feat: vConsole 导入使用

package-lock.json

@@ -15,6 +15,7 @@
         "flv.js": "^1.6.2",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.0",
+        "vconsole": "^3.15.1",
         "vue": "^3.3.7",
         "vue-i18n": "^9.6.2",
         "vue-router": "^4.2.5",
@@ -488,6 +489,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.6.tgz",
+      "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -3832,6 +3849,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
+      "integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
@@ -8369,6 +8394,11 @@
         "duplexer2": "0.0.2"
       }
     },
+    "node_modules/mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
+    },
     "node_modules/mute-stream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmmirror.com/mute-stream/-/mute-stream-0.0.5.tgz",
@@ -10908,6 +10938,23 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/vconsole": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.1.tgz",
+      "integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
+    "node_modules/vconsole/node_modules/core-js": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.34.0.tgz",
+      "integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==",
+      "hasInstallScript": true
+    },
     "node_modules/verror": {
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "flv.js": "^1.6.2",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
+    "vconsole": "^3.15.1",
     "vue": "^3.3.7",
     "vue-i18n": "^9.6.2",
     "vue-router": "^4.2.5",

src/renderer/components/layout/HeaderLayout.vue

@@ -4,11 +4,13 @@ import { useRoute, useRouter } from 'vue-router'
 import useStore from '@/renderer/store'
 import { storeToRefs } from 'pinia'
 import { audioAiTTS } from '@/renderer/plugins/tts'
+import VConsole from 'vconsole'
 
 const router = useRouter()
 const route: any = useRoute()
 const { settings } = useStore()
 const setting = storeToRefs(settings)
+let vconsole: VConsole | null = null;
 
 settings.tts === 'xf_tts' && settings.getSource()
 
@@ -27,6 +29,10 @@ function init() {
   window.mainApi.receive('msgReceivedAppData', (event: Event, path: string) => {
     setting.appData.value = path
   })
+
+  if (setting.vConsole.value) {
+    vconsole = new VConsole();
+  }
 }
 init()
 
@@ -91,6 +97,14 @@ async function changeOpenDevTools() {
   await window.mainApi.send('openDevTools', setting.isOpenDevTools.value)
 }
 
+async function changeOpenVConsole() {
+  if (setting.vConsole.value) {
+    vconsole = new VConsole();
+  } else if (vconsole) {
+    vconsole.destroy();
+  }
+}
+
 function clear() {
   localStorage.clear()
   location.reload()
@@ -238,6 +252,14 @@ function clear() {
                   :label="`是否打开 devTool: ${setting.isOpenDevTools.value}`"
                   @update:model-value="changeOpenDevTools"
                 ></v-switch>
+
+                <v-switch
+                  v-model="setting.vConsole.value"
+                  hide-details
+                  color="primary"
+                  :label="`是否打开 vConsole: ${setting.vConsole.value}`"
+                  @update:model-value="changeOpenVConsole"
+                ></v-switch>
               </v-form>
             </v-sheet>
 

src/renderer/store/settings.ts

@@ -28,6 +28,7 @@ export type ISettings = {
   llmToTTSSliceLength: number
   voskWsLUrl: string
   liveHost: string
+  vConsole: boolean
 }
 
 const useSettingsStore = defineStore('settings', {
@@ -63,7 +64,8 @@ const useSettingsStore = defineStore('settings', {
       llmUrl: 'ws://127.0.0.1:9899/api/v1/stream',
       llmToTTSSliceLength: 20,
       voskWsLUrl: 'ws://127.0.0.1:2700',
-      liveHost: 'http://122.51.32.12:9000'
+      liveHost: 'http://122.51.32.12:9000',
+      vConsole: true,
     }) as ISettings,
   getters: {},
   actions: {