perf: 🚀 关于页面国际化

src/App.vue

@@ -25,11 +25,6 @@ export default {
     Preference,
     About,
   },
-  provide() {
-    return {
-      $app: this,
-    }
-  },
   data() {
     return {
       tabsModel: [

src/components/About/index.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="flex flex-col items-center justify-center h-full -mt-8">
-    <div class="">
+    <a class="block" :href="escrcpyURL" target="_blank">
       <img src="@electron/resources/build/logo.png" class="h-48" alt="" />
-    </div>
+    </a>
+
     <div class="pt-4 text-xl text-center italic text-gray-700">
-      📱 使用图形化的
-      <a
-        class="hover:underline text-primary-500"
-        :href="escrcpyURL"
-        target="_blank"
-      >Scrcpy</a>
-      显示和控制您的 Android 设备，由 Electron 驱动
+      {{ $t("about.description") }}
     </div>
+
     <div class="pt-12 pb-4">
       <el-button
         :loading="loading"
@@ -21,18 +17,21 @@
       >
         {{
           loading && percent
-            ? `正在更新中...（${percent.toFixed(1)}%）`
-            : "版本检测更新"
+            ? `${$t("about.updating")}...（${percent.toFixed(1)}%）`
+            : $t("about.update")
         }}
       </el-button>
     </div>
+
     <div class="text-sm">
       Supported by
+
       <a
         class="hover:underline text-primary-500"
         href="https://viarotel.github.io/"
         target="_blank"
       >Viarotel</a>
+
       v{{ version }}
     </div>
   </div>
@@ -65,20 +64,20 @@ export default {
     onUpdateNotAvailable() {
       this.$electron.ipcRenderer.on('update-not-available', () => {
         this.loading = false
-        this.$message.success('已经是最新版本')
+        this.$message.success(this.$t('about.update-not-available'))
       })
     },
     onUpdateError() {
       this.$electron.ipcRenderer.on('update-error', async (event, ret) => {
         this.loading = false
-        console.log('ret', ret)
+        console.log('onUpdateError.ret', ret)
         try {
           await this.$confirm(
-            '你可能需要科学上网，是否前往发布页面手动下载更新？',
-            '检查更新失败',
+            this.$t('about.update-error.message'),
+            this.$t('about.update-error.title'),
             {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
+              confirmButtonText: this.$t('common.confirm'),
+              cancelButtonText: this.$t('common.cancel'),
               closeOnClickModal: false,
               type: 'error',
             },
@@ -101,11 +100,15 @@ export default {
         console.log('ret', ret)
         this.loading = false
         try {
-          await this.$confirm('是否立即重启更新？', '下载新版本成功', {
-            confirmButtonText: '更新',
-            cancelButtonText: '取消',
-            closeOnClickModal: false,
-          })
+          await this.$confirm(
+            this.$t('about.update-downloaded.message'),
+            this.$t('about.update-downloaded.title'),
+            {
+              confirmButtonText: this.$t('about.update-downloaded.confirm'),
+              cancelButtonText: this.$t('common.cancel'),
+              closeOnClickModal: false,
+            },
+          )
           this.$electron.ipcRenderer.send('quit-and-install')
         }
         catch (error) {
@@ -118,12 +121,16 @@ export default {
         this.loading = false
         try {
           console.log('ret', ret)
-          await this.$confirm(ret.releaseNotes, '发现新版本', {
-            dangerouslyUseHTMLString: true,
-            closeOnClickModal: false,
-            confirmButtonText: '更新',
-            cancelButtonText: '取消',
-          })
+          await this.$confirm(
+            ret.releaseNotes,
+            this.$t('about.update-available.title'),
+            {
+              dangerouslyUseHTMLString: true,
+              closeOnClickModal: false,
+              confirmButtonText: this.$t('about.update-available.confirm'),
+              cancelButtonText: this.$t('common.cancel'),
+            },
+          )
           this.$electron.ipcRenderer.send('download-update')
           this.loading = true
         }

src/components/Device/index.vue

@@ -96,7 +96,7 @@
         </el-table-column>
         <el-table-column
           :label="$t('devices.operates.name')"
-          width="400"
+          width="450"
           align="left"
         >
           <template #default="{ row }">
@@ -192,7 +192,6 @@ export default {
     ControlBar,
     Remark,
   },
-  inject: ['$app'],
   data() {
     const adbCache = storage.get('adbCache') || {}
     return {
@@ -257,7 +256,7 @@ export default {
           },
         )
         this.$store.scrcpy.resetDeps(depType)
-        this.$app.reRender('Preference')
+        this.$root.reRender('Preference')
         this.$message.success('操作成功，请重新尝试。')
       }
       catch (error) {

src/components/Preference/index.vue

@@ -42,16 +42,16 @@
       </div>
       <div class="">
         <el-button type="" plain @click="handleImport">
-          导入配置
+          {{ $t("preferences.config.import") }}
         </el-button>
         <el-button type="" plain @click="handleExport">
-          导出配置
+          {{ $t("preferences.config.export") }}
         </el-button>
         <el-button type="" plain @click="handleEdit">
-          编辑配置
+          {{ $t("preferences.config.edit") }}
         </el-button>
         <el-button type="" plain @click="handleResetAll">
-          重置配置
+          {{ $t("preferences.config.reset") }}
         </el-button>
       </div>
     </div>
@@ -69,7 +69,7 @@
             </div>
             <div class="flex-none pl-4">
               <el-button type="primary" text @click="handleReset(item.type)">
-                恢复默认值
+                {{ $t("preferences.reset") }}
               </el-button>
             </div>
           </div>
@@ -191,34 +191,33 @@ import { useScrcpyStore } from '@/store/index.js'
 import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
 
 export default {
-  inject: ['$app'],
   data() {
     const scrcpyStore = useScrcpyStore()
 
     return {
       scrcpyModel: [
         {
-          label: '自定义',
+          label: this.$t('preferences.custom.name'),
           type: 'custom',
         },
         {
-          label: '视频控制',
+          label: this.$t('preferences.video.name'),
           type: 'video',
         },
         {
-          label: '设备控制',
+          label: this.$t('preferences.device.name'),
           type: 'device',
         },
         {
-          label: '窗口控制',
+          label: this.$t('preferences.window.name'),
           type: 'window',
         },
         {
-          label: '音视频录制',
+          label: this.$t('preferences.record.name'),
           type: 'record',
         },
         {
-          label: '音频控制',
+          label: this.$t('preferences.audio.name'),
           type: 'audio',
         },
       ],
@@ -239,7 +238,7 @@ export default {
       }))
 
       value.unshift({
-        label: 'Global（全局）',
+        label: `Global（${this.$t('preferences.global')}）`,
         value: 'global',
       })
 

src/locales/index.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+import messages from '@intlify/unplugin-vue-i18n/messages'
+
+const locale = window.electron?.process?.env?.LOCALE
+// const locale = 'en_US'
+
+// console.log('locale', locale)
+
+export const i18n = createI18n({
+  locale,
+  fallbackLocale: 'en_US',
+  messages,
+})
+
+export const t = i18n.global.t

src/locales/en_US.json → src/locales/languages/en_US.json

@@ -6,7 +6,7 @@
   "devices": {
     "name": "Devices",
 
-    "loading": "loading...",
+    "loading": "In the loading device...",
 
     "empty": "No device detected",
 
@@ -64,21 +64,33 @@
     "global": "Global",
 
     "config": {
-      "import": "Import Configuration",
-      "export": "Export Configuration",
-      "edit": "Edit Configuration",
-      "reset": "Reset Configuration"
+      "import": "Import",
+      "export": "Export",
+      "edit": "Edit",
+      "reset": "Reset"
     },
 
     "custom": {
       "name": "Custom",
-      "file-path": "File Storage Path",
-      "adb-path": "ADB Path",
-      "scrcpy-path": "Scrcpy Path"
+      "file-path": {
+        "name": "File Path",
+        "placeholder": "Put on the user desktop by default",
+        "tips": "Screenshots and recorded audio and video exist here"
+      },
+      "adb-path": {
+        "name": "ADB Path",
+        "placeholder": "Please set the ADB path",
+        "tips": "The address of the ADB used to connect the device. Note that this option is not affected by the configuration of a single device"
+      },
+      "scrcpy-path": {
+        "name": "Scrcpy Path",
+        "placeholder": "Please set the SCRCPY path",
+        "tips": "The address of the SCRCPY used to connect the device. Note that this option is not affected by the configuration of a single device"
+      }
     },
 
     "video": {
-      "name": "Video Control",
+      "name": "Video",
       "resolution": "Resolution",
       "bit": "Bitrate",
       "refresh-rate": "Refresh Rate",
@@ -94,7 +106,7 @@
     },
 
     "device": {
-      "name": "Device Control",
+      "name": "Device",
       "show-touch": "Show Touches",
       "stay-awake": "Stay Awake",
       "control-in-close-screen": "Turn Off Screen During Control",
@@ -103,28 +115,43 @@
     },
 
     "window": {
-      "name": "Window Control",
+      "name": "Window",
       "borderless": "Borderless Mode",
       "full-screen": "Full Screen Mode",
       "always-top": "Always on Top",
       "disable-screen-saver": "Disable Screensaver"
     },
 
-    "recording": {
-      "name": "Audio/Video Recording",
+    "record": {
+      "name": "Recording",
       "format": "Video Recording Format"
     },
 
     "audio": {
-      "name": "Audio/Video Recording",
+      "name": "Audio",
       "disable": "Disable Audio"
     },
 
     "reset": "Restore Default Values"
   },
   "about": {
     "name": "About",
-    "description": "📱 Display and control your Android device using a graphical interface powered by Electron",
-    "update": "Check for Updates"
+    "description": "📱 Use the graphical Scrcpy powered by Electron to display and control your Android device.",
+    "update": "Check for Updates",
+    "updating": "Updating",
+    "update-not-available": "Already the latest version",
+    "update-error": {
+      "title": "Update Check Failed",
+      "message": "You may need to use a VPN. Do you want to visit the release page and manually download the update?"
+    },
+    "update-downloaded": {
+      "title": "New Version Downloaded",
+      "message": "Do you want to restart and apply the update now?",
+      "confirm": "Update"
+    },
+    "update-available": {
+      "title": "New Version Available",
+      "confirm": "Update"
+    }
   }
 }