feat: 🚀 添加 i18n 初步支持

.vscode/settings.json

@@ -28,5 +28,11 @@
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "i18n-ally.localesPaths": [
+    "src/locales",
+    "dist-release/win-arm64-unpacked/locales",
+    "dist-release/win-unpacked/locales"
+  ],
+  "i18n-ally.sourceLanguage": "en"
 }

electron/helpers/process.js

@@ -13,3 +13,5 @@ process.env.IS_PACKAGED = JSON.stringify(app.isPackaged)
 process.env.DESKTOP_PATH = app.getPath('desktop')
 
 process.env.CWD = process.cwd()
+
+process.env.LOCALE = process.env.LANG?.split('.')?.[0] || 'zh_CN'

package.json

@@ -24,6 +24,7 @@
     "@devicefarmer/adbkit": "^3.2.5",
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^2.0.1",
+    "@intlify/unplugin-vue-i18n": "^1.4.0",
     "@viarotel-org/design": "^0.7.0",
     "@viarotel-org/eslint-config": "^0.7.0",
     "@viarotel-org/postcss-config": "^0.7.0",
@@ -45,6 +46,7 @@
     "vite-plugin-electron-renderer": "^0.14.5",
     "vite-plugin-eslint": "^1.8.1",
     "vite-svg-loader": "^4.0.0",
+    "vue-i18n": "^9.5.0",
     "which": "^4.0.0"
   }
 }

src/App.vue

@@ -29,15 +29,15 @@ export default {
     return {
       tabsModel: [
         {
-          label: '设备列表',
+          label: this.$t('devices'),
           prop: 'Device',
         },
         {
-          label: '偏好设置',
+          label: this.$t('preferences'),
           prop: 'Preference',
         },
         {
-          label: '关于',
+          label: this.$t('about'),
           prop: 'About',
         },
       ],

src/locales/en_US.json

@@ -0,0 +1,15 @@
+{
+  "// 设备列表": true,
+
+  "devices": "Devices",
+
+  "// 偏好设备": true,
+
+  "preferences": "Preferences",
+
+  "// 关于": true,
+
+  "about": "About",
+
+  "// 底部占位符": true
+}

src/locales/zh_CN.json

@@ -0,0 +1,35 @@
+{
+  "// 设备列表": true,
+
+  "wireless-connection": "无线连接",
+  "connected-device": "连接设备",
+  "refresh-device": "刷新设备",
+  "restart-service": "重启服务",
+
+  "device-id": "设备 ID",
+  "device-name": "设备名称",
+  "devices": "设备列表",
+  "operate": "操作",
+
+  "install-app": "安装应用",
+  "screen-capture": "截取屏幕",
+  "reboot-device": "重启设备",
+  "power-key": "电源键",
+  "notification-bar": "通知栏",
+  "return-key": "切换键",
+  "home-key": "切换键",
+  "switch-key": "切换键",
+  "wireless-mode": "无线模式",
+  "start-recording": "开始录制",
+  "start-mirror": "开始镜像",
+
+  "// 偏好设备": true,
+
+  "preferences": "偏好设置",
+
+  "// 关于": true,
+
+  "about": "关于",
+
+  "// 底部占位符": true
+}

src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import messages from '@intlify/unplugin-vue-i18n/messages'
 import App from './App.vue'
 
 import store from './store/index.js'
@@ -16,8 +18,18 @@ const app = createApp(App)
 app.use(store)
 
 app.use(plugins)
+
 app.use(icons)
 
+const locale = window.electron?.process?.env?.LOCALE
+// const locale = 'en_US'
+// console.log('locale', locale)
+const i18n = createI18n({
+  locale,
+  messages,
+})
+app.use(i18n)
+
 app.config.globalProperties.$electron = window.electron
 app.config.globalProperties.$adb = window.adbkit
 app.config.globalProperties.$scrcpy = window.scrcpy

vite.config.js

@@ -8,6 +8,7 @@ import useVue from '@vitejs/plugin-vue'
 import useEslint from 'vite-plugin-eslint'
 import useUnoCSS from 'unocss/vite'
 import useSvg from 'vite-svg-loader'
+import useI18n from '@intlify/unplugin-vue-i18n/vite'
 
 const merge = (config, { command = '' } = {}) =>
   mergeConfig(
@@ -37,6 +38,9 @@ export default params =>
         useUnoCSS(),
         useSvg(),
         useVue(),
+        useI18n({
+          include: [resolve(__dirname, './src/locales/**')],
+        }),
         useElectron([
           {
             entry: 'electron/main.js',