sykj 0.0.7 → 0.1.1

package/README.md

@@ -43,7 +43,7 @@ app.mount("#app");
 </template>
 
 <script setup>
-import SyKeyboard from "sykj";
+import { SyKeyboard } from "sykj";
 </script>
 
 <style lang="scss" scoped>

package/lib/common.ts

@@ -1,8 +1,36 @@
-import 'sykj/lib/store'
+import "/lib/store";
 
-import 'sykj/lib/focus'
-import SyKeyboard from "sykj/packages/keyboard/index.ts"; // 引入封装好的组件
+import "/lib/focus";
 
-export { 
-    SyKeyboard as default,
- };
+import SyKeyboard from "/packages/keyboard/index.ts"; // 引入封装好的组件
+import SyLoading from "/packages/loading/index.ts";
+
+// export { SyKeyboard as default };
+// export { SyLoading };
+
+// import Vue from "vue";
+// import Loading1 from "./Loading1.vue";
+// import Loading2 from "./Loading2.vue";
+// // 导入其他组件...
+
+const components = [
+    ...SyLoading,
+    SyKeyboard,
+    // 其他组件...
+];
+
+const install = function (Vue: { component: (arg0: any, arg1: any) => void }) {
+    components.forEach((component) => {
+        Vue.component(component.name, component);
+    });
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+if (typeof window !== "undefined" && window.Vue) {
+    install(window.Vue);
+}
+
+export default {
+    install,
+    // 其他导出...
+};

package/lib/focus.ts

@@ -3,26 +3,33 @@
 const globalKey = window.$sy.key;
 // const keyStore = useKeyStore()
 
-let st: number | null = null;
+let st = null;
 document.addEventListener("focusin", (event) => {
-    if (
-        (event.target as HTMLElement)?.tagName === "INPUT" ||
-        (event.target as HTMLElement)?.tagName === "TEXTAREA"
-    ) {
-        clearTimeout(st as number | undefined);
+    const target = event.target as HTMLElement;
+    if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA") {
+        console.log(
+            "🚀 ~ file: focus.js:15 ~ document.addEventListener ~  event.target:",
+            event.target
+        );
+
+        clearTimeout(st);
         globalKey.open();
         globalKey.currentElement = event.target;
+        console.log(
+            "🚀 ~ file: focus.ts:18 ~ document.addEventListener ~ globalKey:",
+            globalKey
+        );
     }
 });
 document.addEventListener("focusout", (event) => {
     st = setTimeout(() => {
         globalKey.close();
+        // globalKey.currentElement = null;
     }, 100);
-    if (
-        (event.target as HTMLElement)?.tagName === "INPUT" ||
-        (event.target as HTMLElement)?.tagName === "TEXTAREA"
-    ) {
+    const target = event.target as HTMLElement;
+    if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA") {
         // window.showKeyboard()
-        // console.log(2);
+        //
+        console.log(2);
     }
 });

package/lib/store.ts

@@ -1,6 +1,5 @@
-(window.globalThis as any).$sy= {
-    key:{
-        show_keyboard:false
-    }
-}
-
+window.globalThis.$sy = {
+    key: {
+        show_keyboard: false,
+    },
+};

package/package.json

@@ -1,15 +1,48 @@
 {
   "name": "sykj",
-  "version": "0.0.7",
+  "version": "0.1.1",
   "description": "rem adaptation🚀",
   "main": "lib/common.ts",
   "files": [
     "lib",
     "packages",
-    "src"
+    "main",
+    "types"
   ],
+  "types": "/types/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite --host",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build  ",
+    "type-check": "vue-tsc --build --force",
+    "package": "vite build && cp -r ./dist/* ./sykj",
+    "docs:dev": "vitepress dev docs --host",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "amfe-flexible": "^2.2.1",
+    "axios": "^1.6.8",
+    "element-plus": "^2.7.2",
+    "pinia": "^2.1.7",
+    "vitepress": "^1.3.1",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/tsconfig": "^0.5.1",
+    "npm-run-all2": "^6.1.2",
+    "postcss": "^8.4.38",
+    "postcss-pxtorem": "^6.1.0",
+    "sass": "^1.77.1",
+    "typescript": "~5.4.5",
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.11"
   },
   "keywords": [
     "keyboard",

package/packages/keyboard/index.ts

@@ -1,8 +1,8 @@
-import SyKeyboard from  './src/Keyboardcon.vue';
-
+import SyKeyboard from "./src/Keyboardcon.vue";
+import { App } from "vue";
 /* istanbul ignore next */
-SyKeyboard.install = function (Vue) {
+SyKeyboard.install = function (Vue: App) {
     Vue.component(SyKeyboard.name, SyKeyboard);
 };
 
-export default SyKeyboard;
+export default SyKeyboard;

package/packages/keyboard/src/Keyboardcon.vue

@@ -144,7 +144,7 @@
                     >英</span
                 >
             </div>
-            <span>确认</span>
+            <span @click.stop>确认</span>
         </div>
         <!-- <div class="symbol_list" v-show="keyStore.inputType == 'symbol'"></div> -->
     </div>
@@ -447,13 +447,14 @@ const setInputValue = (item) => {
         text = text.slice(0, carePos) + item + text.slice(carePos);
     }
 
-    if (toUpKeyCase.value) {
-        // keyStore.currentElement.value = `${text}`.toUpperCase();
-        globalKey.currentElement.value = `${text}`.toUpperCase();
-    } else {
-        // keyStore.currentElement.value = text;
-        globalKey.currentElement.value = text;
-    }
+    // 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);
@@ -784,29 +785,33 @@ const cancelPress = () => {
 @import "./theme.scss";
 
 .defaultCss {
-    --h: 0.7rem;
-    --gap: 0.1rem;
-    --fontSize: 0.4rem;
-    --borra: 0.2em;
+    --h: 4vh;
+    --gap: 0.6vh;
+    --fontSize: 2vh;
+    --borra: 0.4vh;
 }
 
 .upKeyCase {
-    --fontSize: 0.35rem;
+    --fontSize: 2vh;
 }
 
 .keyboardcon {
     position: fixed;
     background-color: #212123;
     width: 100%;
+    max-width: 1280px;
+    margin: auto;
+    left: 0;
+    right: 0;
     bottom: 0;
     font-size: var(--fontSize);
-    padding: 0.25rem 0.25rem 0.125rem;
+    padding: 1.2vh 1.2vh 0.6vh;
     box-sizing: border-box;
-    box-shadow: 0 0 0.3rem 0 rgb(117, 117, 117);
+    box-shadow: 0 0 1.5vh 0 rgb(117, 117, 117);
     z-index: 10000;
     // // @include key_background("keyboard_background");
     background: var(--keyboard_background);
-    border-radius: 0.25rem 0.25rem 0 0;
+    border-radius: 1.2vh 1.2vh 0 0;
     transition: all 0.2s;
     & * {
         box-sizing: border-box;
@@ -816,11 +821,11 @@ const cancelPress = () => {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin: 0.25rem 0;
-        font-size: 0.25rem;
-
+        margin: 1.2vh 0;
+        font-size: 1.2vh;
+        cursor: pointer;
         > div {
-            height: 0.25rem;
+            height: 1.2vh;
             span {
                 color: gainsboro;
                 transition: all 0.3s;
@@ -828,7 +833,7 @@ const cancelPress = () => {
         }
 
         .ch {
-            font-size: 0.35rem;
+            font-size: 1.4vh;
             color: rgb(0, 123, 255);
         }
     }
@@ -844,11 +849,11 @@ const cancelPress = () => {
 
         .wenzi {
             position: relative;
-            height: 0.6rem;
+            height: 3.6vh;
 
             // border: 1px solid red;
             background: var(--keyboard_background);
-            margin-bottom: 0.1rem;
+            margin-bottom: 0.6vh;
             .wenzi_box {
                 display: flex;
                 // flex-wrap: wrap;
@@ -871,7 +876,7 @@ const cancelPress = () => {
 
                 span {
                     flex-shrink: 0;
-                    padding: 0.04rem 0.08rem;
+                    padding: 0.24vh 0.48vh;
                     border-radius: 6px;
                     // border: 1px solid red;
                     height: fit-content;
@@ -887,23 +892,23 @@ const cancelPress = () => {
 
             .wenzi_box_more {
                 // flex-wrap: wrap;
-                padding-right: 0.34rem;
+                padding-right: 1.8vh;
                 box-sizing: border-box;
                 width: 102%;
-                left: -0.03rem;
+                left: -0.18vh;
                 // height: 31vh;
-                height: 4.5rem;
+                height: 25vh;
 
                 // border: 1px solid red;
             }
 
             .moreText {
                 position: absolute;
-                height: 0.55rem;
+                height: 3.5vh;
                 top: 0;
                 right: -5px;
                 z-index: 100;
-                padding: 0 0.05rem;
+                padding: 0 0.3vh;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -1051,7 +1056,7 @@ const cancelPress = () => {
                     background: var(--key_background);
                     span {
                         height: fit-content;
-                        line-height: 0.2rem;
+                        line-height: 1.2vh;
                         // border: 1px solid red;
                     }
 
@@ -1095,8 +1100,8 @@ const cancelPress = () => {
                 // grid-template-columns: repeat(9, 1fr);
             }
 
-            --flw: 8%; // 3 4 头尾
-            --mflw: 50px;
+            --flw: 10%; // 3 4 头尾
+            --mflw: 60px;
             // 单独第3行
             &:nth-child(3) {
                 justify-self: center;
@@ -1111,7 +1116,8 @@ const cancelPress = () => {
                             display: flex;
                             justify-content: center;
                             align-items: center;
-                            font-size: 0.3rem;
+                            font-size: 1.8vh;
+                            // border: 1px solid red;
                             img {
                                 transform: scale(0.7);
                                 // @include filter("key_filter");
@@ -1121,8 +1127,7 @@ const cancelPress = () => {
 
                         .toUpKeyCase {
                             box-shadow: none;
-                            // border: 1px solid red;
-                            background: #c7c7c7;
+                            // border: 1px solid red; ´
 
                             img {
                                 filter: invert(100%);
@@ -1167,7 +1172,7 @@ const cancelPress = () => {
                     .key {
                         padding: 0;
                         box-sizing: border-box;
-                        font-size: 0.3rem;
+                        font-size: 1.8vh;
                         font-weight: bold;
 
                         img {

package/packages/loading/Loading1.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="loadAni">
+        <span>.</span>
+        <span>.</span>
+        <span>.</span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SyLoading1",
+};
+</script>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.loadAni {
+    display: inline-block;
+    user-select: none;
+    span {
+        display: inline-block;
+        margin: 0 2px;
+        font-size: 26px;
+        animation: loadAni 1s ease-in-out infinite;
+        &:nth-child(1) {
+            animation-delay: 0s;
+        }
+        &:nth-child(2) {
+            animation-delay: 0.1s;
+        }
+        &:nth-child(3) {
+            animation-delay: 0.2s;
+        }
+        // border:1px solid red;
+        @keyframes loadAni {
+            0% {
+                transform: translateY(0%);
+            }
+            25% {
+                transform: translateY(-20%);
+            }
+            50% {
+                transform: translateY(10%);
+            }
+            60% {
+                transform: translateY(0%);
+            }
+            100% {
+                transform: translateY(0%);
+            }
+        }
+    }
+}
+</style>

package/packages/loading/Loading2.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="loadAni">
+        <el-icon><Loading /></el-icon>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "SyLoading2",
+};
+</script>
+
+<script lang="ts" setup>
+const props = defineProps({
+    size: {
+        default: 1,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.loadAni {
+    display: inline-block;
+    user-select: none;
+    height: fit-content;
+    .el-icon {
+        animation: loadAni 2s linear infinite;
+        font-size: 20px;
+        @keyframes loadAni {
+            100% {
+                transform: rotateZ(360deg);
+            }
+        }
+    }
+}
+</style>

package/packages/loading/index.ts

@@ -0,0 +1,12 @@
+import Loading1 from "./Loading1.vue";
+import Loading2 from "./Loading2.vue";
+import { App } from "vue";
+const components = [Loading1, Loading2];
+
+components.forEach((i) => {
+    i.install = function (Vue: App) {
+        Vue.component(i.name, i);
+    };
+});
+
+export default components;

package/types/component.d.ts

@@ -0,0 +1,7 @@
+import Vue from "vue";
+
+/** ElementUI component common definition */
+export declare class ElementUIComponent extends Vue {
+    /** Install component into Vue */
+    static install(vue: typeof Vue): void;
+}

package/types/global.d.ts

@@ -0,0 +1,11 @@
+// types/global.d.ts
+
+// 确保 TypeScript 识别这是一个模块
+export {};
+
+declare global {
+    interface Window {
+        Vue: any;
+        $sy: any;
+    }
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+// types/global.d.ts
+
+// 确保 TypeScript 识别这是一个模块
+export {};

package/packages/index.ts

@@ -1,6 +0,0 @@
-// import { useKeyStore } from "./keyboard/src/key_pinia";
-
-
-// export {
-//     useKeyStore
-// }

package/packages/keyboard/src/key_pinia.ts

@@ -1,13 +0,0 @@
-// src/store/user.js
-import { defineStore } from "pinia";
-export const useKeyStore = defineStore({
-    id: "key",
-    state: () => {
-        return {
-            keyboardcon: !false,
-            currentElement: null,
-            inputType: "text",
-            showCheckChinese: false,//是否展示中文输入切换
-        };
-    },
-});