feat: 优化打开照片数字人窗口细节，

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "flv.js": "^1.6.2",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.0",
         "vue": "^3.3.7",
@@ -3952,6 +3953,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -4794,6 +4800,15 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "dependencies": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -8480,6 +8495,11 @@
       "integrity": "sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==",
       "dev": true
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "flv.js": "^1.6.2",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.7",

src/main/IPCs.ts

@@ -60,7 +60,7 @@ export default class IPCs {
           }
         })
 
-        await win.loadURL(`${Constants.APP_INDEX_URL_DEV}${url}`)
+        await win.loadURL(url)
 
         if (!IPCs.browserWindows.has(url)) {
           IPCs.browserWindows.set(url, [])

src/renderer/components/layout/HeaderLayout.vue

@@ -117,6 +117,15 @@ async function changeSource() {
                   required
                   @update:model-value="changeSource"
                 ></v-select>
+
+                <v-switch
+                  v-model="setting.isFullscreen.value"
+                  hide-details
+                  true-value="yes"
+                  false-value="no"
+                  color="primary"
+                  :label="`是否打开全屏: ${setting.isFullscreen.value}`"
+                ></v-switch>
               </v-form>
             </v-sheet>
 

src/renderer/screens/PhotoScreen.vue

 <script setup lang="ts">
-// import { useI18n } from 'vue-i18n'
-// import { useTheme } from 'vuetify'
-// import { openExternal } from '@/renderer/utils'
-// import { useCounterStore } from '@/renderer/store/counter'
 // import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 import useStore from '@/renderer/store'
 import { storeToRefs } from 'pinia'
 
-const { photo: usePhoto } = useStore()
+const { photo: usePhoto, settings } = useStore()
 const photo = storeToRefs(usePhoto)
 
-// const { availableLocales } = useI18n()
-// const { counterIncrease } = useCounterStore()
-// const { counter } = storeToRefs(useCounterStore())
-// const theme = useTheme()
-// const languages = ref(['en'])
-// const appVersion = ref('Unknown')
-
 onMounted((): void => {
-  // languages.value = availableLocales
-  // window.mainApi.receive('msgReceivedVersion', (event: Event, version: string) => {
-  //   appVersion.value = version
-  // })
-  // window.mainApi.send('msgRequestGetVersion')
 })
 
 async function handleOpen(event: Event, url: string) {
-  await window.mainApi.send('openWindow', `#show?url=${url}`, {
-    width: window.screen.width / 4,
-    height: window.screen.height
+  const img = event.target as HTMLImageElement;
+  await window.mainApi.send('openWindow', `${location.origin + location.pathname}#show?url=${url}`, {
+    width: img.naturalWidth / 2,
+    height: img.naturalHeight / 2,
+    fullscreen: settings.isFullscreen === 'yes'
   })
 }
 

src/renderer/screens/ShowPhoto.vue

@@ -16,6 +16,7 @@ const { settings } = useStore()
 const sampleRate = 48000
 
 const recordVolume = ref(0)
+const url = route.query.url as string;
 
 router.beforeEach((g) => {
   if (!g.query.url) return router.push('/error')
@@ -102,7 +103,7 @@ async function startAudioInput() {
   microphoneState.value = 'loading'
 
   const { recognizer, channel } = await initVosk({
-    modelPath: new URL(`/vosk/models/${settings.voskSelectModel}`, import.meta.url).href,
+    modelPath: new URL('/vosk/models/' + settings.voskSelectModel, import.meta.url).href,
     result: async (text) => {
       console.log('----------------> text:', text)
       const tone = settings.source.find(({ sourceId }) => settings.selectSource === sourceId)
@@ -166,13 +167,11 @@ function endAudioInput() {
 </script>
 
 <template>
-  <div style="width: 100%; height: 100%" class="d-flex justify-center align-center">
+  <div style="width: 100%; height: 100%" class="d-flex justify-center align-center" :style="{ background: '#000' }">
     <v-img
-      v-if="route.query.url"
-      :width="'100%'"
-      aspect-ratio="1/1"
-      cover
-      :src="route.query.url as string"
+      v-if="url"
+      aspect-ratio="9/16"
+      :src="url"
     ></v-img>
   </div>
 

src/renderer/store/settings.ts

@@ -13,7 +13,8 @@ export type ISettings = {
     description: string
     sex: 1 | 0
   }[]
-  selectSource: string
+  selectSource: string,
+  isFullscreen: 'yes' | 'no'
 }
 
 const useSettingsStore = defineStore('settings', {
@@ -39,7 +40,8 @@ const useSettingsStore = defineStore('settings', {
       voskSelectModel: 'vosk-model-small-cn-0.3.tar.gz',
       ttsHost: 'https://beta.laihua.com',
       source: [],
-      selectSource: ''
+      selectSource: '',
+      isFullscreen: 'no'
     }) as ISettings,
   getters: {},
   actions: {