From 719c4a786cd5386689f007f3a01a8c0b0fb6bb70 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Mon, 21 Jul 2025 09:44:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=94=AE=E7=9B=98=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                    |  14 ++
 package.json                         |   2 +
 src/components.d.ts                  |   2 +
 src/components/BaseKeyboardInput.vue | 251 +++++++++++++++++++++++++++
 src/views/ParamsConfig/index.vue     |  22 +++
 5 files changed, 291 insertions(+)
 create mode 100644 src/components/BaseKeyboardInput.vue

diff --git a/package-lock.json b/package-lock.json
index c780bae..3141924 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,8 @@
         "element-plus": "^2.9.4",
         "nprogress": "^0.2.0",
         "pinia": "^2.3.1",
+        "simple-keyboard": "^3.8.69",
+        "simple-keyboard-layouts": "^3.4.109",
         "vue": "^3.5.13",
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.5.0"
@@ -4840,6 +4842,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-keyboard": {
+      "version": "3.8.69",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.8.69.tgz",
+      "integrity": "sha512-H/aCx57Tu8xwOTkMrELdJ0mV0s3p1i/AjzKAb+M1TnHCoFyfLumn2SC9pekIOeoB51QENOQycjF/R8SFranwLw==",
+      "license": "MIT"
+    },
+    "node_modules/simple-keyboard-layouts": {
+      "version": "3.4.109",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.4.109.tgz",
+      "integrity": "sha512-eKiKbWmW7P6WO52WrXhAK2uaGPDTibIrOzFCybS8mL6t4JTU49brHbatizo7coHRsbwCyR4W01dzbDRgvtmZWg==",
+      "license": "MIT"
+    },
     "node_modules/sirv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/sirv/-/sirv-3.0.0.tgz",
diff --git a/package.json b/package.json
index 8b336ac..a44e91e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "element-plus": "^2.9.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.3.1",
+    "simple-keyboard": "^3.8.69",
+    "simple-keyboard-layouts": "^3.4.109",
     "vue": "^3.5.13",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.5.0"
diff --git a/src/components.d.ts b/src/components.d.ts
index a77330b..388b3c9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BaseKeyboardInput: typeof import('./components/BaseKeyboardInput.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@@ -19,6 +20,7 @@ declare module 'vue' {
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
diff --git a/src/components/BaseKeyboardInput.vue b/src/components/BaseKeyboardInput.vue
new file mode 100644
index 0000000..31128cb
--- /dev/null
+++ b/src/components/BaseKeyboardInput.vue
@@ -0,0 +1,251 @@
+<template>
+    <div ref="keyboardWrapRef" class="keyboard-wrap" @click="focusInput">
+        <el-input ref="inputRef" v-model="model" @keyup.enter="handleEnter" :disabled="disabled" v-bind="$attrs">
+            <template v-for="(item, index) in $slots" :key="index" #[index]>
+                <slot :name="index"></slot>
+            </template>
+        </el-input>
+    </div>
+    <el-popover v-if="visible" :visible="true" :virtual-ref="inputRef" virtual-triggering placement="bottom" :width="width" :show-arrow="false" :hide-after="0" popper-style="padding: 0px;color:#000" popper-class="keyboard-popper" @after-enter="keyboardInit">
+        <div class="simple-keyboard"></div>
+    </el-popover>
+</template>
+
+<script setup lang="ts">
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
+defineOptions({
+    inheritAttrs: false
+})
+const model = defineModel<string>()
+const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
+const props = defineProps({
+    layoutName: {
+        type: String,
+        default: 'default'
+    },
+    // 保留几位小数 layoutName为number时生效
+    precision: {
+        type: Number,
+        default: 2
+    },
+    // 获取焦点打开键盘
+    isOpen: {
+        type: Boolean,
+        default: true
+    },
+    disabled: Boolean
+})
+
+const keyboard = ref<any>(null)
+const keyboardWrapRef = ref(null)
+const visible = ref(false)
+const inputRef = ref()
+const width = ref(1000)
+if (props.layoutName == 'number') width.value = 300
+
+const displayDefault = ref({
+    '{bksp}': 'backspace',
+    '{lock}': 'caps',
+    '{enter}': 'enter',
+    '{tab}': 'tab',
+    '{shift}': 'shift',
+    '{change}': 'en',
+    '{space}': 'space',
+    '{clear}': 'clear',
+    '{close}': 'close',
+    '{arrowleft}': '←',
+    '{arrowright}': '→'
+})
+
+const open = () => {
+    if (visible.value) return
+    inputRef.value.focus()
+    emits('focus')
+    visible.value = true
+}
+
+const focusInput = () => {
+    if (props.disabled) return
+    if (visible.value) return
+    emits('focus')
+    if (props.isOpen) visible.value = true
+}
+
+const lang: any = {
+    'zh-cn': {
+        // 默认布局
+        default: [
+            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} q w e r t y u i o p [ ] \\',
+            "{lock} a s d f g h j k l ; ' {enter}",
+            '{change} z x c v b n m , . / {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ],
+        // 大小写
+        shift: [
+            '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+            '{tab} Q W E R T Y U I O P { } |',
+            '{lock} A S D F G H J K L : " {enter}',
+            '{change} Z X C V B N M < > ? {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ]
+    },
+    th: {
+        default: [
+            '\u005F \u0E45 \u002F \u002D \u0E20 \u0E16 \u0E38 \u0E36 \u0E04 \u0E15 \u0E08 \u0E02 \u0E0A {bksp}',
+            '{tab} \u0E46 \u0E44 \u0E33 \u0E1E \u0E30 \u0E31 \u0E35 \u0E23 \u0E19 \u0E22 \u0E1A \u0E25 \u0E03',
+            '{lock} \u0E1F \u0E2B \u0E01 \u0E14 \u0E40 \u0E49 \u0E48 \u0E32 \u0E2A \u0E27 \u0E07 {enter}',
+            '{shift} \u0E1C \u0E1B \u0E41 \u0E2D \u0E34 \u0E37 \u0E17 \u0E21 \u0E43 \u0E1D {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ],
+        shift: [
+            '% + \u0E51 \u0E52 \u0E53 \u0E54 \u0E39 \u0E3F \u0E55 \u0E56 \u0E57 \u0E58 \u0E59 {bksp}',
+            '{tab} \u0E50 \u0022 \u0E0E \u0E11 \u0E18 \u0E4D \u0E4A \u0E13 \u0E2F \u0E0D \u0E10 \u002C \u0E05',
+            '{lock} \u0E24 \u0E06 \u0E0F \u0E42 \u0E0C \u0E47 \u0E4B \u0E29 \u0E28 \u0E0B \u002E {enter}',
+            '{shift} ( ) \u0E09 \u0E2E \u0E3A \u0E4C \u003F \u0E12 \u0E2C \u0E26 {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ]
+    }
+}
+
+const keyboardInit = () => {
+    let keyboardLayout = {
+        // 数字布局
+        number: ['7 8 9', '4 5 6', '1 2 3', '. 0 {bksp}', '{arrowleft} {arrowright} {clear} {close}'],
+        ...lang['zh-cn']
+    }
+
+    // if (lang[useSession('lang').value]) {
+    //     keyboardLayout = { ...lang[useSession('lang').value], ...keyboardLayout }
+    // }
+    keyboard.value = new Keyboard('simple-keyboard', {
+        onChange: onChange,
+        onKeyPress: onKeyPress,
+        onInit: onInit,
+        layout: keyboardLayout,
+        layoutName: props.layoutName,
+        display: displayDefault.value
+        // theme: 'hg-theme-default init-keyboard' // 添加自定义class处理清空逻辑
+    })
+}
+
+const onInit = (keyboard: any) => {
+    keyboard.setInput(model.value)
+    keyboard.setCaretPosition(inputRef.value?.ref.selectionEnd)
+    document.addEventListener('click', handlePopClose)
+}
+const onChange = (input: any) => {
+    model.value = input
+    emits('onChange', input)
+}
+
+const onKeyPress = (button: any) => {
+    if (button === '{lock}') return handleLock()
+    if (button === '{change}') return handleChange()
+    if (button === '{clear}') return handleClear()
+    if (button === '{enter}') return handleEnter()
+    if (button === '{close}') return close()
+    if (button === '{arrowleft}') return handleArrow(0)
+    if (button === '{arrowright}') return handleArrow(1)
+}
+const handleLock = () => {
+    let currentLayout = keyboard.value.options.layoutName
+    let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+    keyboard.value.setOptions({
+        layoutName: shiftToggle
+    })
+}
+const handleChange = () => {
+    let layoutCandidates = keyboard.value.options.layoutCandidates
+    // 切换中英文输入法
+    if (layoutCandidates != null && layoutCandidates != undefined) {
+        displayDefault.value['{change}'] = 'en'
+        keyboard.value.setOptions({
+            layoutName: 'default',
+            layoutCandidates: null,
+            display: displayDefault.value
+        })
+    } else {
+        displayDefault.value['{change}'] = 'cn'
+        keyboard.value.setOptions({
+            layoutName: 'default',
+            layoutCandidates: (layout as any)?.layoutCandidates,
+            display: displayDefault.value
+        })
+    }
+}
+const handleClear = () => {
+    keyboard.value.clearInput()
+    model.value = ''
+}
+const handleEnter = () => {
+    emits('enter')
+}
+const close = () => {
+    if (props.layoutName == 'number') {
+        // 处理精度
+        model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${props.precision}}).*$`), '$1.$2').replace(/\.$/, '')
+    }
+    document.removeEventListener('click', handlePopClose)
+    visible.value = false
+    emits('close')
+}
+const handleArrow = (num: number) => {
+    // 处理左右箭头下标位置
+    const index = keyboard.value.getCaretPositionEnd()
+    if (num == 0 && index - 1 >= 0) {
+        keyboard.value.setCaretPosition(index - 1)
+    } else if (num == 1 && index + 1 <= (model.value?.length || 0)) {
+        keyboard.value.setCaretPosition(index + 1)
+    }
+}
+
+const handlePopClose = (e: any) => {
+    // 虚拟键盘区域 输入框区域 中文选项区域
+    if (
+        (e.target as Element).closest('.keyboard-popper') ||
+        (e.target as Element).closest('.keyboard-wrap') == keyboardWrapRef.value ||
+        /hg-candidate-box/.test(e.target.className)
+    ) {
+        const index = keyboard.value.getCaretPositionEnd()
+        inputRef.value.ref.selectionStart = inputRef.value.ref.selectionEnd = index
+        inputRef.value.focus()
+    } else {
+        close()
+    }
+}
+
+onUnmounted(() => {
+    // 某些情况下未触发动画关闭时销毁事件。此处销毁做后备处理
+    document.removeEventListener('click', handlePopClose)
+})
+
+defineExpose({ inputRef, visible, open, close, keyboardInit })
+</script>
+
+<style scoped>
+.keyboard-wrap {
+    width: 100%;
+}
+</style>
+
+<style>
+.hg-theme-default .hg-button.hg-button-arrowleft,
+.hg-theme-default .hg-button.hg-button-arrowright {
+    max-width: 70px;
+}
+
+.hg-theme-default .hg-button.hg-button-close {
+    max-width: 100px;
+}
+
+.hg-layout-number .hg-button.hg-button-close {
+    max-width: none;
+}
+
+.hg-layout-number .hg-button.hg-button-bksp {
+    max-width: 92px;
+}
+</style>
diff --git a/src/views/ParamsConfig/index.vue b/src/views/ParamsConfig/index.vue
index c893452..ce331fc 100644
--- a/src/views/ParamsConfig/index.vue
+++ b/src/views/ParamsConfig/index.vue
@@ -128,6 +128,22 @@
                                 <!-- <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" /> -->
                             </div>
                         </div>
+                        <div class="line">
+                            <div class="item">
+                                <div class="key">测试值</div>
+                                <div class="value">
+                                    <BaseKeyboardInput v-model="test.value"></BaseKeyboardInput>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="line">
+                            <div class="item">
+                                <div class="key">测试数字</div>
+                                <div class="value">
+                                    <BaseKeyboardInput v-model="test.number" layout-name="number"></BaseKeyboardInput>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -169,6 +185,12 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import RPC from '@/utils/rpc';
 import TableDialog from './TableDialog.vue';
+import BaseKeyboardInput from '@/components/BaseKeyboardInput.vue';
+
+const test = ref({
+    value: '',
+    number: ''
+})
 
 const router = useRouter()
 const currentTime = ref('')

From 2f3246b444a2da469b7fff955899632a8dfcea04 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Mon, 21 Jul 2025 10:18:39 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=94=AE=E7=9B=98=E6=9A=82=E5=AD=981?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseKeyboardInput.vue |  4 ++--
 src/views/ParamsConfig/index.vue     | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/BaseKeyboardInput.vue b/src/components/BaseKeyboardInput.vue
index 31128cb..b00124e 100644
--- a/src/components/BaseKeyboardInput.vue
+++ b/src/components/BaseKeyboardInput.vue
@@ -28,7 +28,7 @@ const props = defineProps({
     // 保留几位小数 layoutName为number时生效
     precision: {
         type: Number,
-        default: 2
+        default: 10
     },
     // 获取焦点打开键盘
     isOpen: {
@@ -132,7 +132,7 @@ const keyboardInit = () => {
 }
 
 const onInit = (keyboard: any) => {
-    keyboard.setInput(model.value)
+    keyboard.setInput(String(model.value || ''))
     keyboard.setCaretPosition(inputRef.value?.ref.selectionEnd)
     document.addEventListener('click', handlePopClose)
 }
diff --git a/src/views/ParamsConfig/index.vue b/src/views/ParamsConfig/index.vue
index ce331fc..9b01438 100644
--- a/src/views/ParamsConfig/index.vue
+++ b/src/views/ParamsConfig/index.vue
@@ -32,12 +32,14 @@
                             <div class="item">
                                 <div class="key">大地经度</div>
                                 <!-- <el-input v-model="formField.lat" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" /> -->
-                                <el-input-number :min="0" :max="180" v-model="formField.lat" style="width: 100px" placeholder="请输入" :controls="false" />
+                                <!-- <el-input-number :min="0" :max="180" v-model="formField.lat" style="width: 100px" placeholder="请输入" :controls="false" /> -->
+                                <BaseKeyboardInput v-model="formField.lat" layout-name="number"></BaseKeyboardInput>
                             </div>
                             <div class="item">
                                 <div class="key">大地纬度</div>
                                 <!-- <el-input v-model="formField.lgn" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" /> -->
-                                <el-input-number :min="0" :max="90" v-model="formField.lgn" style="width: 100px" placeholder="请输入" :controls="false" />
+                                <!-- <el-input-number :min="0" :max="90" v-model="formField.lgn" style="width: 100px" placeholder="请输入" :controls="false" /> -->
+                                <BaseKeyboardInput v-model="formField.lgn" layout-name="number"></BaseKeyboardInput>
                             </div>
                         </div>
                         <div class="line">
@@ -128,7 +130,7 @@
                                 <!-- <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" /> -->
                             </div>
                         </div>
-                        <div class="line">
+                        <!-- <div class="line">
                             <div class="item">
                                 <div class="key">测试值</div>
                                 <div class="value">
@@ -143,7 +145,7 @@
                                     <BaseKeyboardInput v-model="test.number" layout-name="number"></BaseKeyboardInput>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -188,8 +190,8 @@ import TableDialog from './TableDialog.vue';
 import BaseKeyboardInput from '@/components/BaseKeyboardInput.vue';
 
 const test = ref({
-    value: '',
-    number: ''
+    value: '123',
+    number: 90
 })
 
 const router = useRouter()