add emoji for mobile

package-lock.json

@@ -17,6 +17,7 @@
         "copy-text-to-clipboard": "^3.2.0",
         "file-saver": "^2.0.5",
         "naive-ui": "^2.37.3",
+        "node-emoji": "^2.1.3",
         "normalize.css": "^8.0.1",
         "query-string": "^8.1.0",
         "vue": "^3.4.15",
@@ -2510,6 +2511,17 @@
         "win32"
       ]
     },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
@@ -2961,6 +2973,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/client-zip": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/client-zip/-/client-zip-1.6.3.tgz",
@@ -3136,6 +3156,11 @@
       "integrity": "sha512-z/6oZ/Muqk4BaE7P69bXhUhpJbUM9ZJeka43ZwxsDshKtePns4mhBlh8bU5+yrnOnz3fhG82XLzGUXazOmsWnA==",
       "dev": true
     },
+    "node_modules/emojilib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+      "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -3495,6 +3520,20 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz",
+      "integrity": "sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==",
+      "dependencies": {
+        "@sindresorhus/is": "^4.6.0",
+        "char-regex": "^1.0.2",
+        "emojilib": "^2.4.0",
+        "skin-tone": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
@@ -3702,6 +3741,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/skin-tone": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+      "integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+      "dependencies": {
+        "unicode-emoji-modifier-base": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -3823,6 +3873,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/unicode-emoji-modifier-base": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+      "integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/unicode-match-property-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
@@ -5689,6 +5747,11 @@
       "dev": true,
       "optional": true
     },
+    "@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw=="
+    },
     "@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
@@ -6056,6 +6119,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
+    },
     "client-zip": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/client-zip/-/client-zip-1.6.3.tgz",
@@ -6207,6 +6275,11 @@
       "integrity": "sha512-z/6oZ/Muqk4BaE7P69bXhUhpJbUM9ZJeka43ZwxsDshKtePns4mhBlh8bU5+yrnOnz3fhG82XLzGUXazOmsWnA==",
       "dev": true
     },
+    "emojilib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+      "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -6472,6 +6545,17 @@
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
+    "node-emoji": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz",
+      "integrity": "sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==",
+      "requires": {
+        "@sindresorhus/is": "^4.6.0",
+        "char-regex": "^1.0.2",
+        "emojilib": "^2.4.0",
+        "skin-tone": "^2.0.0"
+      }
+    },
     "node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
@@ -6639,6 +6723,14 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "skin-tone": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+      "integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+      "requires": {
+        "unicode-emoji-modifier-base": "^1.0.0"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -6726,6 +6818,11 @@
       "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
       "dev": true
     },
+    "unicode-emoji-modifier-base": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+      "integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g=="
+    },
     "unicode-match-property-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "copy-text-to-clipboard": "^3.2.0",
     "file-saver": "^2.0.5",
     "naive-ui": "^2.37.3",
+    "node-emoji": "^2.1.3",
     "normalize.css": "^8.0.1",
     "query-string": "^8.1.0",
     "vue": "^3.4.15",

src/mobile/Content.vue

@@ -1,19 +1,17 @@
 <script lang="ts" setup>
+import { onUnmounted, computed } from "vue"
+import { EditorView } from "@codemirror/view"
+import { whenever } from "@vueuse/core"
+import { useThemeVars } from "naive-ui"
 import CodeEditor from "../components/CodeEditor.vue"
+import ThemeButton from "../components/ThemeButton.vue"
+import SelectLanguage from "../components/SelectLanguage.vue"
+import Helper from "./Helper.vue"
 import { code, input, output, size, status } from "../composables/code"
 import { Status } from "../types"
 import { tab } from "../composables/tab"
 import { Tab } from "../types"
-import ThemeButton from "../components/ThemeButton.vue"
-import SelectLanguage from "../components/SelectLanguage.vue"
-import Helper from "./Helper.vue"
-import { useThemeVars } from "naive-ui"
-import { computed } from "vue"
-import { EditorView } from "@codemirror/view"
 import { insertText } from "../composables/helper"
-import { whenever } from "@vueuse/core"
-import { onUnmounted } from "vue"
-import { watch } from "vue"
 
 let codeEditor: EditorView | null = null
 

src/mobile/Header.vue

@@ -1,9 +1,18 @@
 <script lang="ts" setup>
 import { useMessage, type DropdownOption } from "naive-ui"
+import { random } from "node-emoji"
+import { onMounted, ref } from "vue"
+import { useIntervalFn } from "@vueuse/core"
 import { code, loading, reset, run } from "../composables/code"
 import { tab } from "../composables/tab"
 import copyTextToClipboard from "copy-text-to-clipboard"
 
+const emoji = ref("")
+
+function getRandomEmoji() {
+  emoji.value = random().emoji
+}
+
 const message = useMessage()
 function switchAndRun() {
   tab.value = "output"
@@ -19,11 +28,14 @@ const menu: DropdownOption[] = [
   { label: "复制", key: "copy", props: { onClick: copy } },
   { label: "重置", key: "reset", props: { onClick: reset } },
 ]
+
+onMounted(getRandomEmoji)
+useIntervalFn(getRandomEmoji, 5000, { immediate: true })
 </script>
 <template>
   <n-layout-header class="container" bordered>
     <n-flex justify="space-between" align="center">
-      <div class="title">徐越的自测猫</div>
+      <div @click="getRandomEmoji" class="title">徐越的自测猫 {{ emoji }}</div>
       <n-flex align="center">
         <n-dropdown :options="menu">
           <n-button>操作</n-button>

vite.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
       output: {
         manualChunks: {
           file: ["file-saver", "client-zip"],
+          fancy: ["node-emoji"],
           editor: [
             "vue-codemirror",
             "codemirror",