sykj 0.1.9 → 0.2.0

package/packages/keyboard/src/Keyboardcon.vue

@@ -2,12 +2,11 @@
     <div
         @pointerdown.prevent
         @click="makeFocus"
-        class="keyboardcon defaultCss"
+        class="sy-keyboard keyboardcon defaultCss"
         :class="[
             keyStore.keyboardcon ? 'show' : '',
-            toUpKeyCase ? 'upKeyCase' : '',
+            toUpKeyCase ? 'upKeyCase' : ''
         ]"
-        @contextmenu.prevent="makeFocus"
     >
         <!-- 中文拼音列表 -->
         <div class="chinese">
@@ -30,8 +29,9 @@
                         @click="chineseCli(item)"
                         v-for="(item, index) in cn_list_str"
                         :key="index"
-                        >{{ item }}</span
                     >
+                        {{ item }}
+                    </span>
                 </div>
                 <div class="moreText" @click="moreTextCli">
                     <el-icon
@@ -48,26 +48,22 @@
             @touchmove.stop.prevent
             v-show="keyStore.inputType == 'number'"
         >
-            <div class="key_item" v-for="(item, index) in lists" :key="item">
+            <div class="key_item" v-for="(item, index) in lists" :key="index">
                 <div
                     class="key"
-                    @click.stop="choosekey(item, index)"
+                    @click.stop="choosekey(item)"
                     v-if="!Array.isArray(item) && index < 11"
                 >
                     <span>{{ item }}</span>
                 </div>
                 <div class="keys" v-else-if="index < 11">
-                    <span @click.stop="choosekey(item[0], index)">{{
-                        item[0]
-                    }}</span>
-                    <span @click.stop="choosekey(item[1], index)">{{
-                        item[1]
-                    }}</span>
+                    <span @click.stop="choosekey(item[0])">{{ item[0] }}</span>
+                    <span @click.stop="choosekey(item[1])">{{ item[1] }}</span>
                 </div>
                 <div
                     class="key del"
-                    @click.stop="choosekey(item, index)"
-                    v-if="index == '11'"
+                    @click.stop="choosekey(item[0])"
+                    v-if="index == 11"
                 >
                     <img src="./static/key/del.svg" alt="" />
                 </div>
@@ -77,7 +73,8 @@
         <div
             class="text_list"
             :class="[isSymbol ? 'isSymbol' : '']"
-            @touchmove.stop.prevent
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
             v-show="keyStore.inputType != 'number'"
             ref="pressArea"
         >
@@ -92,10 +89,10 @@
                     @touchend="endPress"
                     @touchcancel="cancelPress"
                     v-for="(item1, index1) in item"
-                    @click.stop="choosekey(item1, index1)"
+                    @click.stop="choosekey(item1)"
                     :key="item1"
                 >
-                    <div class="key" v-if="item1.length == 1">
+                    <div class="key" v-if="String(item1).length == 1">
                         <span>{{ item1 }}</span>
                     </div>
                     <div
@@ -128,9 +125,11 @@
                             src="./static/key/enter.svg"
                             alt=""
                         />
-                        <span v-else-if="item1.length > 1" :class="item1">{{
-                            item1
-                        }}</span>
+                        <span
+                            v-else-if="String(item1).length > 1"
+                            :class="item1"
+                            >{{ item1 }}</span
+                        >
                         <span v-else :class="item1">{{ item1 }}</span>
                     </div>
                 </div>
@@ -139,632 +138,680 @@
         <!-- 中英文切换 -->
         <div class="btns" @touchmove.stop.prevent>
             <div v-show="keyStore.showCheckChinese" @click="checkChinese">
-                <!-- <el-icon><Switch /></el-icon -->
                 <span :class="keyStore.isChinese ? 'ch' : ''">中</span>/<span
                     :class="keyStore.isChinese ? '' : 'ch'"
-                    >英</span
                 >
+                    英
+                </span>
             </div>
             <span @click.stop>确认</span>
         </div>
-        <!-- <div class="symbol_list" v-show="keyStore.inputType == 'symbol'"></div> -->
     </div>
 </template>
 
-<script>
-export default {
-    name: "SyKeyboard",
-};
-</script>
-
-<script setup>
-import { onMounted, reactive, ref, onBeforeUnmount, watchEffect } from "vue";
+<script setup lang="ts">
+import { reactive, ref, watchEffect } from 'vue'
+import keyboard from './utils/store'
 
 //#region init ------------------------------------------------------------
-const globalKey = window.globalThis.$sy.key;
+const globalKey = keyboard
 const keyStore = reactive({
     keyboardcon: false,
     currentElement: null,
-    inputType: true ? "text" : "number",
+    inputType: true ? 'text' : 'number',
     showCheckChinese: !false, //是否展示中文输入切换
-    isChinese: false,
-});
-const isSymbol = ref(false);
-//#endregion -----------------------------------------------------------
-
-//#region old ------------------------------------------------------------
+    isChinese: !false
+})
+const isSymbol = ref(false)
+const showMore = ref(false)
+const huanhang = ref(false)
+let lists = ref<(string | number)[][]>([])
+// let active = ref(1)
+let toUpKeyCase = ref(false)
+const cn_input = ref<string>('')
+const cn_list_str = ref([])
+const l_min = ref(0)
+const l_max = ref(10)
+const cursorPosition = ref<number>(-1)
+const pressTimer = ref<ReturnType<typeof setTimeout>>()
+const pressArea = ref(null)
+const longpressSt = ref<ReturnType<typeof setTimeout>>()
+const lastElement = ref<HTMLElement | null>(null)
+
+// const numberKeyBoradMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, ['.', ':'], 0, 'del']
+const textKeyMap = [
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+    ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'],
+    ['&123', 'space', 'enter']
+]
+const symbolMap1 = [
+    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+    ['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
+    ['#+=', '.', ',', '?', '!', "'", 'del'],
+    ['ABC', 'space', 'enter']
+]
+const symbolMap2 = [
+    ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
+    ['_', '\\', '|', '~', '<', '>', '€', '£', '¥', '·'],
+    ['123', '.', ',', '?', '!', "'", 'del'],
+    ['ABC', 'space', 'enter']
+]
+let st: ReturnType<typeof setTimeout>
+let promiseList: Promise<any>[] = []
+let dict: any = {}
+let doubleSpell: any = {}
 
-// const keyStore = useKeyStore()
+//#endregion -----------------------------------------------------------
 
-let st = null;
+// 键盘弹起时，body的padding-bottom设置为30vh
 watchEffect(() => {
     if (keyStore.keyboardcon) {
-        clearTimeout(st);
+        clearTimeout(st)
         // document.body.style = "padding-bottom:30vh;";
-        document.body.style.paddingBottom = "30vh";
+        document.body.style.paddingBottom = '30vh'
     } else {
         st = setTimeout(() => {
             // document.body.style = "padding:0;";
-            document.body.style.paddingBottom = "0vh";
-        }, 0);
+            document.body.style.paddingBottom = '0vh'
+        }, 0)
     }
-});
+})
 
-const numberKeyBoradMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, [".", ":"], 0, "del"];
-const textKeyMap = [
-    ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
-    ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
-    ["shift", "z", "x", "c", "v", "b", "n", "m", "del"],
-    ["&123", "space", "enter"],
-];
+// 滑动输入
+const handleTouchMove = (e: TouchEvent) => {
+    e.preventDefault()
+    const touch = e.touches[0]
 
-const symbolMap1 = [
-    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
-    ["-", "/", ":", ";", "(", ")", "$", "&", "@", '"'],
-    ["#+=", ".", ",", "?", "!", "'", "del"],
-    ["ABC", "space", "enter"],
-];
+    if (!touch) return
 
-const symbolMap2 = [
-    ["[", "]", "{", "}", "#", "%", "^", "*", "+", "="],
-    ["_", "\\", "|", "~", "<", ">", "€", "£", "¥", "·"],
-    ["123", ".", ",", "?", "!", "'", "del"],
-    ["ABC", "space", "enter"],
-];
-
-const showMore = ref(false);
-const huanhang = ref(false);
+    const el = document.elementFromPoint(touch.clientX, touch.clientY)
+    if (!(el instanceof HTMLElement)) return
+
+    if (el.classList.contains('key')) {
+        if (lastElement.value !== el) {
+            // 移除上一次元素的 active
+            if (lastElement.value) lastElement.value.classList.remove('active')
+
+            // 添加当前元素的 active
+            el.classList.add('active')
+
+            // 更新 lastElement
+            lastElement.value = el
+
+            // setInputValue(el.innerText)
+            if (keyStore.isChinese && !toUpKeyCase.value) {
+                // todo: 滑动查找最匹配的拼音
+                chinese(String(el.innerText))
+            } else {
+                setInputValue(el.innerText)
+            }
+        }
+    } else {
+        // 如果滑到空白或非 key 元素，移除上一个 active
+        if (lastElement.value) {
+            lastElement.value.classList.remove('active')
+            lastElement.value = null
+        }
+    }
+}
+
+// 滑动输入去掉最后一个active
+const handleTouchEnd = () => {
+    if (lastElement.value) {
+        lastElement.value.classList.remove('active')
+        lastElement.value = null
+    }
+}
+// 更多（中文）
 const moreTextCli = () => {
     // keyStore.currentElement.focus();
-    globalKey.currentElement.focus();
+    if (globalKey.currentElement) {
+        focusInput()
+    }
 
-    showMore.value = !showMore.value;
+    showMore.value = !showMore.value
     if (showMore.value) {
-        huanhang.value = true;
+        huanhang.value = true
     } else {
         setTimeout(() => {
-            huanhang.value = false;
-        }, 500);
+            huanhang.value = false
+        }, 500)
     }
-};
-const chineseCli = (item) => {
-    // keyStore.currentElement.focus();
-    globalKey.currentElement.focus();
-    setInputValue(item);
-    selectCN(item);
-    console.log(cn_input.value);
+}
+
+// 输入框获取焦点
+const focusInput = () => {
+    try {
+        ;(globalKey.currentElement as HTMLInputElement)?.focus()
+    } catch {}
+}
+
+// 选择文字
+const chineseCli = (item: string) => {
+    focusInput()
+    setInputValue(item)
+    selectCN(item)
     if (!cn_input.value) {
-        showMore.value = false;
+        showMore.value = false
     }
-};
+}
 
-//选择中文
-const selectCN = (text) => {
-    let strList = cn_input.value.split("'");
+//选择文字
+const selectCN = (text: string) => {
+    let strList = cn_input.value.split("'")
     if (strList.length === 1 || text.length >= strList.length) {
-        cn_input.value = "";
-        cn_list_str.value = [];
-        // l_min.value = 0;
-        // l_max.value = 10;
-        return;
+        cn_input.value = ''
+        cn_list_str.value = []
+        return
     }
-    setCn_input(text);
-};
+    setCn_input(text)
+}
+
 //设置中文输入
-const setCn_input = (text) => {
-    const singleDict = dict;
-    let itemList = [];
+const setCn_input = (text: string) => {
+    const singleDict: any = dict
+    let itemList = []
     for (let key in singleDict) {
-        let value = singleDict[key];
-        if (typeof value === "string") {
-            let valueList = value.split("");
-            let item = valueList.find((item) => item === text);
+        let value = singleDict[key]
+        if (typeof value === 'string') {
+            let valueList = value.split('')
+            let item = valueList.find((item) => item === text)
             if (item) {
-                itemList.push(key);
+                itemList.push(key)
             }
         }
     }
-    let str = "";
-    const cn_inputList = cn_input.value.split("'");
+    let str = ''
+    const cn_inputList = cn_input.value.split("'")
     for (let i = 0; i < cn_inputList.length; i++) {
-        let item = cn_inputList[i];
+        let item = cn_inputList[i]
         for (let key of itemList) {
-            let list = key.split("");
-            let count = 0;
+            let list = key.split('')
+            let count = 0
             for (let k = 0; k < list.length; k++) {
                 if (key.charAt(k) === item.charAt(k)) {
-                    count += 1;
+                    count += 1
                     if (
                         k === 0 &&
                         item.length != key.length &&
                         key.length > item.length
                     ) {
                         // 用于处理首单词缩写法
-                        str = item;
+                        str = item
                     }
                 }
                 if (count === list.length) {
-                    str = item;
+                    str = item
                 }
             }
         }
     }
-    cn_input.value = cn_inputList.filter((item) => item != str).join("'");
-    findChinese();
-};
-
-let lists = ref([]);
-let active = ref(1);
-
-let toUpKeyCase = ref(false);
+    cn_input.value = cn_inputList.filter((item) => item != str).join("'")
+    findChinese()
+}
 
-const choosekey = (item) => {
-    try {
-        // keyStore.currentElement.focus();
-        globalKey.currentElement.focus();
-    } catch (error) {}
+// 键盘点击
+const choosekey = (item: string | number) => {
+    focusInput()
 
     switch (item) {
-        case "del":
+        case 'del':
             if (keyStore.isChinese && cn_input.value?.length) {
                 // 处理拼音删除
-                delPinyin();
+                delPinyin()
             } else {
                 // 普通删除
-                delInputText();
+                delInputText()
             }
-
-            break;
-        case "shift":
-            toUpKeyCase.value = !toUpKeyCase.value;
+            break
+        case 'shift':
+            toUpKeyCase.value = !toUpKeyCase.value
             lists.value = lists.value.map((i) => {
                 i = i.map((j) => {
-                    if (j.length == 1) {
-                        if (toUpKeyCase.value) return j.toUpperCase();
-                        else return j.toLowerCase();
+                    if (typeof j === 'string' && j.length == 1) {
+                        if (toUpKeyCase.value) return j.toUpperCase()
+                        else return j.toLowerCase()
                     } else {
-                        return j;
+                        return j
                     }
-                });
-                return i;
-            });
-            break;
-        case "space":
+                })
+                return i
+            })
+            break
+        case 'space':
             // keyStore.currentElement.value += " ";
-            setInputValue(" ");
-            break;
-        case "&123":
-            lists.value = symbolMap1;
-            toUpKeyCase.value = false;
-            isSymbol.value = true;
-
-            break;
-        case "ABC":
-            lists.value = textKeyMap;
-            isSymbol.value = false;
-            break;
-        case "#+=":
-            lists.value = symbolMap2;
-            break;
-        case "123":
-            lists.value = symbolMap1;
-
-            break;
-        case "enter":
+            setInputValue(' ')
+            break
+        case '&123':
+            lists.value = symbolMap1
+            toUpKeyCase.value = false
+            isSymbol.value = true
+
+            break
+        case 'ABC':
+            lists.value = textKeyMap
+            isSymbol.value = false
+            break
+        case '#+=':
+            lists.value = symbolMap2
+            break
+        case '123':
+            lists.value = symbolMap1
+
+            break
+        case 'enter':
             // keyStore.currentElement.value += "\n";
-            globalKey.currentElement.value += "\n";
-            if (globalKey.currentElement.getAttribute("enter") !== null) {
-                globalKey.currentElement.blur();
+            // globalKey.currentElement.value += '\n'
+            setInputValue('\n')
+
+            if (
+                (globalKey.currentElement as HTMLInputElement)?.getAttribute(
+                    'enter'
+                ) !== null
+            ) {
+                ;(globalKey.currentElement as HTMLInputElement)?.blur()
             }
 
             // triggerKeyPress("Enter");
-            break;
+            break
         default:
             if (keyStore.isChinese && !toUpKeyCase.value) {
-                chinese(item);
+                chinese(String(item))
             } else {
-                setInputValue(item);
+                setInputValue(item)
             }
 
-            break;
+            break
     }
-};
+}
 
 /**删除字符串的某个字符*/
-const delStringLast = (text, index) => {
-    if (index < 0) return;
-    let arrText = text.split("");
+const delStringLast = (text: string, index: number) => {
+    if (index < 0) return ''
+    let arrText = text.split('')
     if (index > 0) {
-        arrText[index - 1] = "";
+        arrText[index - 1] = ''
     } else {
-        arrText[index] = "";
+        arrText[index] = ''
     }
 
-    arrText = arrText.filter((item) => item);
-    const endIndex = arrText.length - 1;
+    arrText = arrText.filter((item) => item)
+    const endIndex = arrText.length - 1
     if (arrText[endIndex] === "'") {
-        arrText[endIndex] = "";
+        arrText[endIndex] = ''
     }
-    let result = arrText.join("");
+    let result = arrText.join('') || ''
 
-    return result;
-};
+    return result
+}
 // 拼音删除
 const delPinyin = () => {
-    cn_input.value = delStringLast(cn_input.value, cn_input.value.length);
-    if (cn_input.value === "") {
-        cn_list_str.value = [];
-        return;
+    cn_input.value = delStringLast(cn_input.value, cn_input.value.length)
+    if (cn_input.value === '') {
+        cn_list_str.value = []
+        return
     }
-    const specialPinYin = ["u", "v", "i"].includes(cn_input.value.split("")[0]);
+    const specialPinYin = ['u', 'v', 'i'].includes(cn_input.value.split('')[0])
     if (cn_list_str.value && cn_list_str.value.length === 1 && specialPinYin) {
         //@ts-ignore
-        cn_list_str.value = [cn_input.value];
-        return;
+        cn_list_str.value = [cn_input.value]
+        return
     }
-    let re = new RegExp(`^${cn_input.value}\\w*`);
+    let re = new RegExp(`^${cn_input.value}\\w*`)
     let keys = Object.keys(dict)
         .filter((key) => {
-            const result = re.test(key);
-            return result;
+            const result = re.test(key)
+            return result
         })
-        .sort();
+        .sort()
 
     cn_list_str.value =
         (keys.length > 1
-            ? keys.reduce((a, b) => a + dict[b], "")
-            : dict[keys[0]]) || "".split("");
+            ? keys.reduce((a, b) => a + dict[b], '')
+            : dict[keys[0]]) || ''.split('')
 
-    findChinese("del");
-};
+    findChinese('del')
+}
 
 // 普通删除字符
 const delInputText = () => {
     // let carePos = getCaretPosition(keyStore.currentElement);
-    let carePos = getCaretPosition(globalKey.currentElement);
-    // let text = keyStore.currentElement.value;
-    let text = globalKey.currentElement.value;
+    let carePos = 0
+    let text = ''
+    if (
+        globalKey.currentElement &&
+        (globalKey.currentElement instanceof HTMLInputElement ||
+            globalKey.currentElement instanceof HTMLTextAreaElement)
+    ) {
+        carePos = getCaretPosition(globalKey.currentElement)
+        text = globalKey.currentElement.value
+    }
     if (carePos <= 0 || carePos > text.length) {
         // keyStore.currentElement.value = text;
-        globalKey.currentElement.value = text;
+        ;(globalKey.currentElement as HTMLInputElement).value = text
     } else {
         // keyStore.currentElement.value =
         //     text.slice(0, carePos - 1) + text.slice(carePos);
-        globalKey.currentElement.value =
-            text.slice(0, carePos - 1) + text.slice(carePos);
+        ;(globalKey.currentElement as HTMLInputElement).value =
+            text.slice(0, carePos - 1) + text.slice(carePos)
     }
     // keyStore.currentElement.setSelectionRange(carePos - 1, carePos - 1);
-    globalKey.currentElement.setSelectionRange(carePos - 1, carePos - 1);
-    triggerModel();
-};
+    ;(globalKey.currentElement as HTMLInputElement).setSelectionRange(
+        carePos - 1,
+        carePos - 1
+    )
+    triggerModel()
+}
 
 // 输入内容
-const setInputValue = (item) => {
-    item = `${item}`;
-    // let carePos = getCaretPosition(keyStore.currentElement);
-    let carePos = getCaretPosition(globalKey.currentElement);
-
-    // let text = keyStore.currentElement.value;
-    let text = globalKey.currentElement.value;
-
+const setInputValue = (item: string | number) => {
+    // item = `${item}`
+    let carePos = 0
+    let text = ''
+    if (
+        globalKey.currentElement &&
+        (globalKey.currentElement instanceof HTMLInputElement ||
+            globalKey.currentElement instanceof HTMLTextAreaElement)
+    ) {
+        carePos = getCaretPosition(globalKey.currentElement)
+        text = globalKey.currentElement.value
+    }
     if (carePos <= 0) {
-        text = item + text;
+        text = item + text
     } else if (carePos > text.length) {
-        text = text + item;
+        text = text + item
     } else {
-        text = text.slice(0, carePos) + item + text.slice(carePos);
+        text = text.slice(0, carePos) + item + text.slice(carePos)
     }
+    ;(globalKey.currentElement as HTMLInputElement).value = text
+    carePos += String(item).length + 1
+    ;(globalKey.currentElement as HTMLInputElement).setSelectionRange(
+        carePos - 1,
+        carePos - 1
+    )
+    triggerModel()
+}
 
-    // if (toUpKeyCase.value) {
-    //     // keyStore.currentElement.value = `${text}`.toUpperCase();
-    //     globalKey.currentElement.value = `${text}`.toUpperCase();
-    // } else {
-    //     // keyStore.currentElement.value = text;
-    //     globalKey.currentElement.value = text;
-    // }
-    globalKey.currentElement.value = text;
-    carePos += item.length + 1;
-
-    // keyStore.currentElement.setSelectionRange(carePos - 1, carePos - 1);
-    globalKey.currentElement.setSelectionRange(carePos - 1, carePos - 1);
-    triggerModel();
-    // const reg = /^[a-zA-Z]$/;
-    // if (toUpKeyCase.value && reg.test(item)) {
-    //     keyStore.currentElement.value += item.toUpperCase();
-    // } else {
-    //     keyStore.currentElement.value += item;
-    // }
-};
-
-const cn_input = ref("");
-const cn_list_str = ref([]);
-const l_min = ref(0);
-const l_max = ref(10);
-const cursorPosition = ref(-1);
-let promiseList = [];
-let dict = {};
-let doubleSpell = {};
-
-// 获取词库
-const getChinese = () => {
-    const promise = import("./static/dict/baseDict.json").then((res) => {
-        dict = res;
-    });
-
-    const promise1 = import("./static/dict/chowder.json").then((res) => {
-        doubleSpell = res;
-    });
-    promiseList.push(promise1);
+// 获取词库, 直接执行
+;(() => {
+    const promise = import('./static/dict/baseDict.json').then((res) => {
+        dict = res
+    })
+    promiseList.push(promise)
+
+    const promise1 = import('./static/dict/chowder.json').then((res) => {
+        doubleSpell = res
+    })
+    promiseList.push(promise1)
     Promise.all(promiseList)
         .then(() => {
-            console.log("加载完成");
+            console.log('词库加载完成')
         })
         .catch((err) => {
-            console.error("词库错误", err);
-        });
-};
-getChinese();
+            console.error('词库加载错误', err)
+        })
+})()
 
 // 中文输入
-const chinese = (key) => {
-    const reg = /^[a-zA-Z]$/;
+const chinese = (key: string) => {
+    const reg = /^[a-zA-Z]$/
     if (!reg.test(key)) {
-        setInputValue(key);
-        return;
+        setInputValue(key)
+        return
     }
-    cn_input.value += key; //拼音输入框添加拼音
+    cn_input.value += key //拼音输入框添加拼音
     if (cn_input.value[0] == "'") {
-        cn_input.value = cn_input.value.slice(1);
+        cn_input.value = cn_input.value.slice(1)
     }
-    const specialPinYin = ["u", "v", "i"].includes(cn_input.value.split("")[0]); //判断是否是特殊拼音
+    const specialPinYin = ['u', 'v', 'i'].includes(cn_input.value.split('')[0]) //判断是否是特殊拼音
     if (specialPinYin) {
         //如果是特殊拼音
         if (!cn_list_str.value.length) {
             //如果没有拼音列表
             //@ts-ignore
-            cn_list_str.value = [key]; //拼音列表添加拼音
+            cn_list_str.value = [key] //拼音列表添加拼音
         } else {
-            const value = cn_list_str.value[0] + key; //拼音列表第一个拼音加上当前拼音
+            const value = cn_list_str.value[0] + key //拼音列表第一个拼音加上当前拼音
             //@ts-ignore
-            cn_list_str.value[0] = value; //拼音列表第一个拼音替换为新的拼音
+            cn_list_str.value[0] = value //拼音列表第一个拼音替换为新的拼音
         }
-        return;
+        return
     }
 
-    findChinese("add", key); //查找中文
-};
+    findChinese('add', key) //查找中文
+}
 
 // 查字典
-const findChinese = (type, key) => {
+const findChinese = (type?: string, key?: string) => {
     // type = del key不需要传，type = add key必须要传
-    l_min.value = 0; //最小值
-    l_max.value = 10; //最大值
-    const pinYinList = cn_input.value.split("'"); //拼音列表
-    let pinYin = pinYinList[pinYinList.length - 1]; //当前拼音
+    l_min.value = 0 //最小值
+    l_max.value = 10 //最大值
+    const pinYinList = cn_input.value.split("'") //拼音列表
+    let pinYin = pinYinList[pinYinList.length - 1] //当前拼音
 
-    let re = new RegExp(`^${pinYin}\\w*`); //正则,匹配当前拼音开头的拼音
+    let re = new RegExp(`^${pinYin}\\w*`) //正则,匹配当前拼音开头的拼音
     let keys = Object.keys(dict) //获取拼音字典的key
         .filter((item) => {
             //过滤
-            let strList = pinYin.split(""); //当前拼音转数组
+            let strList = pinYin.split('') //当前拼音转数组
 
-            const temp = ["h", "o", "n", "a", "e"].includes(
+            const temp = ['h', 'o', 'n', 'a', 'e'].includes(
                 strList[strList.length - 1] //判断是否是特殊拼音
-            );
+            )
             if (pinYin.length >= 2 && !temp) {
                 //如果是特殊拼音
-                if (item === pinYin) return true; //如果拼音字典的key等于当前拼音，返回true
+                if (item === pinYin) return true //如果拼音字典的key等于当前拼音，返回true
             } else {
-                let result = re.test(item); //如果不是特殊拼音，返回正则匹配结果
-                return result;
+                let result = re.test(item) //如果不是特殊拼音，返回正则匹配结果
+                return result
             }
         })
-        .sort();
+        .sort()
     cn_list_str.value =
-        keys.length > 1
-            ? keys.reduce((a, b) => a + dict[b], "")
-            : dict[keys[0]]; //如果拼音列表大于1，拼接拼音列表，否则直接赋值
+        keys.length > 1 ? keys.reduce((a, b) => a + dict[b], '') : dict[keys[0]] //如果拼音列表大于1，拼接拼音列表，否则直接赋值
     // cn_list_str.value = cn_list_str.value.replaceAll("[object Object]", "");
 
-    if (!cn_list_str.value || (!cn_list_str.value.length && type === "del")) {
+    if (!cn_list_str.value || (!cn_list_str.value.length && type === 'del')) {
         //如果拼音列表不存在或者拼音列表长度为0并且type为del
         cn_input.value = cn_input.value.replace(
             new RegExp(`(.*)${key}`),
             `$1'${key}`
-        );
+        )
     }
 
     if (!cn_list_str.value && !Array.isArray(cn_list_str.value)) {
-        cn_list_str.value = [];
+        cn_list_str.value = []
     }
 
-    keys = cn_input.value.split("'");
+    keys = cn_input.value.split("'")
 
     if (keys.length >= 2) {
-        cn_list_str.value = [];
-        findDoubleSpell();
+        cn_list_str.value = []
+        findDoubleSpell()
     }
-};
+}
 
 // 连续输入
 const findDoubleSpell = () => {
-    let keys = cn_input.value.split("'");
-    const partDict = doubleSpell[cn_input.value.charAt(0)];
-    if (!partDict) return;
-    if (["an"].includes(keys[keys.length - 1])) {
-        let tempStr = keys[keys.length - 2];
-        if (["n"].includes(tempStr.charAt(tempStr.length - 1))) {
-            let newTempStr = tempStr.slice(0, tempStr.length - 1);
+    let keys = cn_input.value.split("'")
+    const partDict = doubleSpell[cn_input.value.charAt(0)]
+    if (!partDict) return
+    if (['an'].includes(keys[keys.length - 1])) {
+        let tempStr = keys[keys.length - 2]
+        if (['n'].includes(tempStr.charAt(tempStr.length - 1))) {
+            let newTempStr = tempStr.slice(0, tempStr.length - 1)
             keys = [
                 newTempStr,
-                tempStr.slice(tempStr.length - 1) + keys[keys.length - 1],
-            ];
-            cn_input.value = keys.join("'");
+                tempStr.slice(tempStr.length - 1) + keys[keys.length - 1]
+            ]
+            cn_input.value = keys.join("'")
         }
     }
 
     let keyResult = Object.keys(partDict).filter((key) => {
-        const keys = key.split("'");
-        const cn_inputList = cn_input.value.split("'");
-        const isLen = cn_inputList.length === keys.length;
-        if (!isLen) return;
-        let result = true;
+        const keys = key.split("'")
+        const cn_inputList = cn_input.value.split("'")
+        const isLen = cn_inputList.length === keys.length
+        if (!isLen) return
+        let result = true
         for (let i = 0; i < keys.length; i++) {
             if (keys[i].charAt(0) != cn_inputList[i].charAt(0)) {
-                result = false;
+                result = false
             } else {
-                const keyItemList = keys[i].split("");
-                const strList = cn_inputList[i].split("");
+                const keyItemList = keys[i].split('')
+                const strList = cn_inputList[i].split('')
                 for (let j = 0; j < strList.length; j++) {
-                    if (!strList[j]) break;
+                    if (!strList[j]) break
                     if (keyItemList[j] != strList[j]) {
-                        result = false;
+                        result = false
                     }
                 }
             }
         }
         if (result && isLen) {
-            return partDict[key];
+            return partDict[key]
         }
-    });
+    })
 
-    let strList = [];
-    let singleDictList = [];
-    const singleDict = dict;
+    let strList = []
+    let singleDictList = []
+    const singleDict = dict
     for (let key of keyResult) {
-        let keyList = key.split("'");
-        strList.push(partDict[key].split(","));
+        let keyList = key.split("'")
+        strList.push(partDict[key].split(','))
         for (let item of keyList) {
             if (singleDict[item]) {
-                singleDictList.push(singleDict[item].split(""));
+                singleDictList.push(singleDict[item].split(''))
             }
         }
     }
     if (!keyResult.length && keys.length) {
         for (let item of keys) {
             if (singleDict[item]) {
-                singleDictList.push(singleDict[item].split(""));
+                singleDictList.push(singleDict[item].split(''))
             }
         }
     }
 
-    singleDictList = Array.from(new Set(singleDictList.flat(2)));
+    singleDictList = Array.from(new Set(singleDictList.flat(2)))
     strList = strList
         .flat(2)
         //@ts-ignore
         .sort((a, b) => {
-            if (b.length > a.length) return -1;
+            if (b.length > a.length) return -1
         })
-        .reverse();
+        .reverse()
     //@ts-ignore
-    cn_list_str.value = strList.concat(singleDictList);
-};
+    cn_list_str.value = strList.concat(singleDictList)
+}
 
 //获取光标位置
-const getCaretPosition = (element) => {
-    let carePos = 0;
+const getCaretPosition = (element: HTMLInputElement | HTMLTextAreaElement) => {
+    let carePos = 0
     try {
-        carePos = element.selectionStart;
-    } catch (error) {}
-    cursorPosition.value = carePos;
-    return carePos;
-};
+        carePos = element.selectionStart ?? 0
+    } catch {}
+    cursorPosition.value = carePos
+    return carePos
+}
 
 // 符号切换
-const checkChinese = (item) => {
-    console.log(cn_list_str.value);
-    cn_input.value = "";
-    cn_list_str.value = [];
-    showMore.value = false;
-    // keyStore.currentElement.focus();
-    // keyStore.isChinese = !keyStore.isChinese;
-    globalKey.currentElement.focus();
-    keyStore.isChinese = !keyStore.isChinese;
-};
+const checkChinese = () => {
+    console.log(cn_list_str.value)
+    cn_input.value = ''
+    cn_list_str.value = []
+    showMore.value = false
+    focusInput()
+    keyStore.isChinese = !keyStore.isChinese
+}
 
 // 类型
 watchEffect(() => {
-    if (keyStore.inputType == "number") {
-        lists.value = numberKeyBoradMap;
+    if (keyStore.inputType == 'number') {
+        // lists.value = numberKeyBoradMap
     } else {
-        lists.value = textKeyMap;
+        lists.value = textKeyMap
     }
-});
+})
 
 //#endregion -----------------------------------------------------------
 
 //#region $sy global  ------------------------------------------------------------
 const showKeyboard = () => {
-    keyStore.keyboardcon = true;
-};
+    keyStore.keyboardcon = true
+}
 const hideKeyboard = () => {
-    keyStore.keyboardcon = false;
-};
-window.globalThis.$sy.key.open = showKeyboard;
-window.globalThis.$sy.key.close = hideKeyboard;
+    keyStore.keyboardcon = false
+}
+
 //#endregion -----------------------------------------------------------
 
-//#region input ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️
 // 手动触发input事件
 const triggerModel = () => {
-    globalKey.currentElement.dispatchEvent(new Event("input"));
-};
-
-const makeFocus = (e) => {
-    globalKey.currentElement.focus();
-};
+    ;(globalKey.currentElement as HTMLInputElement).dispatchEvent(
+        new Event('input')
+    )
+}
 
-//#endregion ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
+const makeFocus = () => {
+    focusInput()
+}
 
 //#region 长按事件 ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️
-// 定义一个 ref 来保存计时器
-const pressTimer = ref(null);
-
-// 定义一个 ref 来引用 DOM 元素
-const pressArea = ref(null);
-
-const longpressSt = ref(false);
 
 // 定义长按事件逻辑
-const onLongPress = (t) => {
+const onLongPress = (text: string) => {
     //   alert("长按事件触发");
     longpressSt.value = setInterval(() => {
         // console.log("长按触发", t);
-        choosekey(t);
-    }, 50);
-};
+        choosekey(text)
+    }, 50)
+}
 
 // 开始按压的处理函数
-const startPress = (e) => {
+const startPress = (e: TouchEvent) => {
+    const target = e.target as HTMLElement
+    if (target.classList.contains('key')) {
+        target.classList.toggle('active', true)
+    }
     let value =
-        e.target.children[0]?.innerText || e.target.children[0].className;
-    if (value != "del") return;
+        (target.children[0] as HTMLElement)?.innerText ||
+        (target.children[0] as HTMLElement)?.className
+    if (value != 'del') return
     pressTimer.value = setTimeout(() => {
-        onLongPress(value);
-    }, 500); // 设置长按时间为500毫秒
-};
+        onLongPress(value)
+    }, 500) // 设置长按时间为500毫秒
+}
 
 // 结束按压的处理函数
-const endPress = () => {
-    clearTimeout(pressTimer.value);
-    clearInterval(longpressSt.value);
-};
+const endPress = (e: TouchEvent) => {
+    const target = e.target as HTMLElement
+    if (target.classList.contains('key')) {
+        target.classList.toggle('active', false)
+    }
+    clearTimeout(pressTimer.value)
+    clearInterval(longpressSt.value)
+}
 
 // 取消按压的处理函数
 const cancelPress = () => {
-    clearTimeout(pressTimer.value);
-    clearInterval(longpressSt.value);
-};
+    clearTimeout(pressTimer.value)
+    clearInterval(longpressSt.value)
+}
 
 // 添加和清理事件监听器
 
 //#endregion ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
 
 //
+
+keyboard.open = showKeyboard
+keyboard.close = hideKeyboard
 </script>
 
 <style lang="scss">
-@import "./theme.scss";
+@import './theme.scss';
 
 .defaultCss {
     --h: 4vh;
@@ -795,9 +842,11 @@ const cancelPress = () => {
     background: var(--keyboard_background);
     border-radius: 1.2vh 1.2vh 0 0;
     transition: all 0.2s;
+
     & * {
         box-sizing: border-box;
     }
+
     .btns {
         color: rgb(0, 123, 255);
         display: flex;
@@ -806,8 +855,10 @@ const cancelPress = () => {
         margin: 1.2vh 0;
         font-size: 1.2vh;
         cursor: pointer;
+
         > div {
             height: 1.2vh;
+
             span {
                 color: gainsboro;
                 transition: all 0.3s;
@@ -836,16 +887,21 @@ const cancelPress = () => {
             // border: 1px solid red;
             background: var(--keyboard_background);
             margin-bottom: 0.6vh;
+
             .wenzi_box {
                 display: flex;
                 // flex-wrap: wrap;
                 gap: 10px;
                 padding: 5px;
                 overflow: auto;
+
                 &::-webkit-scrollbar {
-                    display: none; /* 适用于 Chrome, Safari 和 Opera */
+                    display: none;
+                    /* 适用于 Chrome, Safari 和 Opera */
                 }
-                scrollbar-width: none; /* 适用于 Firefox */
+
+                scrollbar-width: none;
+                /* 适用于 Firefox */
                 position: absolute;
                 left: 0;
                 top: 0;
@@ -927,6 +983,7 @@ const cancelPress = () => {
             user-select: none;
             // @include key_color("key_color");
             color: var(--key_color);
+
             .key {
                 box-shadow: inset 0px 0px 2px 0px #8f9eae;
                 // @include key_background("key_background");
@@ -994,9 +1051,11 @@ const cancelPress = () => {
     .text_list {
         --symbolP: 0 5%;
     }
+
     .isSymbol {
         --symbolP: 0;
     }
+
     .text_list {
         display: grid;
         grid-template-columns: repeat(1, 1fr);
@@ -1008,6 +1067,7 @@ const cancelPress = () => {
             display: flex;
             gap: var(--gap);
             width: 100%;
+
             // border: 1px solid red;
             // 全部
             .key_item_column {
@@ -1021,10 +1081,12 @@ const cancelPress = () => {
                 justify-content: center;
                 align-items: center;
                 height: var(--h);
+
                 & span,
                 & img {
                     pointer-events: none;
                 }
+
                 .key {
                     border-radius: var(--borra);
                     display: flex;
@@ -1036,17 +1098,18 @@ const cancelPress = () => {
                     box-shadow: inset 0px 0px 2px 0px #8f9eae;
 
                     background: var(--key_background);
+
                     span {
                         height: fit-content;
                         line-height: 1.2vh;
                         // border: 1px solid red;
                     }
+                }
 
-                    &:active {
-                        background: var(--key_active_background);
-                        box-shadow: inset 0px 0px 2px 2px #65708220;
-                        transform: scale(0.99);
-                    }
+                .active {
+                    background: var(--key_active_background);
+                    box-shadow: inset 0px 0px 2px 2px #65708220;
+                    transform: scale(0.99);
                 }
             }
 
@@ -1057,10 +1120,12 @@ const cancelPress = () => {
                     // border: 1px solid red;
                     flex: 1;
                     flex-shrink: 0;
+
                     .key {
                         padding: 0;
                         box-sizing: border-box;
                     }
+
                     // flex: 1;
                 }
             }
@@ -1070,9 +1135,11 @@ const cancelPress = () => {
                 display: flex;
                 justify-content: center;
                 padding: var(--symbolP);
+
                 .key_item_column {
                     flex-shrink: 0;
                     flex: 1;
+
                     .key {
                         padding: 0;
                         box-sizing: border-box;
@@ -1084,6 +1151,7 @@ const cancelPress = () => {
 
             --flw: 10%; // 3 4 头尾
             --mflw: 60px;
+
             // 单独第3行
             &:nth-child(3) {
                 justify-self: center;
@@ -1093,12 +1161,14 @@ const cancelPress = () => {
                     // flex: 1;
                     &:nth-child(1) {
                         padding: 0;
+
                         .key {
                             box-sizing: border-box;
                             display: flex;
                             justify-content: center;
                             align-items: center;
                             font-size: 1.8vh;
+
                             // border: 1px solid red;
                             img {
                                 transform: scale(0.7);
@@ -1106,14 +1176,6 @@ const cancelPress = () => {
                                 filter: var(--key_filter);
                             }
                         }
-
-                        .toUpKeyCase {
-                            //   box-shadow: none;
-                            // border: 1px solid red; ´
-                            img {
-                                // filter: invert(100%);
-                            }
-                        }
                     }
 
                     &:first-child,
@@ -1149,6 +1211,7 @@ const cancelPress = () => {
 
                     // flex: 1;
                     font-weight: 400;
+
                     // border: 1px solid red;
                     .key {
                         padding: 0;