fix: store加入缓存

src/components/common/FTKeyboard/index.vue

@@ -3,7 +3,8 @@ import 'simple-keyboard/build/css/index.css'
 
 import Keyboard from 'simple-keyboard'
 import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
-import { onUnmounted, ref } from 'vue'
+import { useDeviceStore } from 'stores/deviceStore'
+import { computed, onUnmounted, ref } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -25,19 +26,24 @@ const props = defineProps({
   },
 })
 const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
-const model = defineModel<string>()
+const deviceStore = useDeviceStore()
+const deviceType = computed(() => {
+  return __DEVICE_TYPE__
+})
+
+const model = defineModel()
 const keyboard = ref<any>(null)
 const visible = ref(false)
 const inputRef = ref()
 const popoverRef = ref()
 const entering = ref(false)
-const width = ref(1000)
+const width = ref(800)
 if (props.layoutName === 'number')
   width.value = 300
 const displayDefault = ref({
   '{bksp}': 'backspace',
   '{lock}': 'caps',
-  '{enter}': 'enter',
+  '{enter}': '回车',
   '{tab}': 'tab',
   '{shift}': 'shift',
   '{change}': 'en',
@@ -56,11 +62,25 @@ const open = () => {
   visible.value = true
 }
 
-const focusInput = () => {
+const focusInput = (e: any) => {
+  const rect = e.target.getBoundingClientRect()
+  console.log('元素位置信息:', {
+    top: rect.top + window.scrollY,
+    left: rect.left + window.scrollX,
+    width: rect.width,
+    height: rect.height,
+  })
+  if (rect.top + window.scrollY > 800) {
+    placement.value = 'top'
+  }
+  else {
+    placement.value = 'bottom'
+  }
+  console.log(rect)
   if (visible.value)
     return
   emits('focus')
-  if (props.isOpen)
+  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
     visible.value = true
 }
 
@@ -80,7 +100,7 @@ const blurInput = () => {
     else {
       entering.value = false
     }
-  }, 300)
+  }, 100)
 }
 
 const afterEnter = () => {
@@ -174,7 +194,7 @@ const handleChange = () => {
     })
   }
   else {
-    displayDefault.value['{change}'] = 'cn'
+    displayDefault.value['{change}'] = '中'
     keyboard.value.setOptions({
       layoutName: 'default',
       layoutCandidates: (layout as any).layoutCandidates,
@@ -192,7 +212,7 @@ const handleEnter = () => {
 const handleClose = () => {
   if (props.layoutName === 'number') {
     // 处理精度
-    model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${props.precision}}).*$`), '$1.$2').replace(/\.$/, '')
+    // model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${props.precision}}).*$`), '$1.$2').replace(/\.$/, '')
   }
   popoverRef.value.hide()
   emits('close')
@@ -226,6 +246,8 @@ const close = () => {
   handleClose()
 }
 
+const placement = ref('bottom')
+
 onUnmounted(() => {
   // 某些情况下未触发动画关闭时销毁事件。此处销毁做后备处理
   document.removeEventListener('click', handlePopClose)
@@ -253,10 +275,10 @@ defineExpose({ inputRef, visible, open, close })
     :visible="visible"
     :virtual-ref="inputRef"
     virtual-triggering
-    placement="bottom"
     :width="width"
     :show-arrow="false"
     :hide-after="0"
+    :placement="placement"
     popper-style="padding: 0px;color:#000"
     :persistent="false"
     popper-class="keyboard-popper"

src/stores/systemStore.ts

@@ -5,7 +5,9 @@ import { ref } from 'vue'
 
 import { sendCmd } from '@/apis/system'
 
-export const useSystemStore = defineStore('system', () => {
+export const useSystemStore = defineStore(
+  'system',
+  () => {
     const websocketConnected = ref(true)
     const systemUser = ref<any>(null)
     const systemLogList = ref<System.SystemLog[]>([])
@@ -163,4 +165,6 @@ export const useSystemStore = defineStore('system', () => {
       insertLog,
       insertLogs,
     }
-})
+  },
+  { persist: true },
+)