feat: 🚀 新增支持 深色模式、国际化语言、运行日志等功能

.vscode/settings.json

@@ -29,17 +29,31 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "i18n-ally.localesPaths": [
-    "src/locales/index.js",
-    "src/locales/languages"
-  ],
-  "i18n-ally.sourceLanguage": "zh",
+  "i18n-ally.localesPaths": ["src/locales/index.js", "src/locales/languages"],
+  "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.extract.ignored": [
+    "Switch",
     "${item.id}（${item.$name}${\r\n          item.$remark ? `，${item.$remark}` : ''\r\n        }）",
     "，${item.$remark}",
     "${row.$remark ? `${row.$remark}-` : ''}${\r\n        row.$name\r\n      }-${this.$replaceIP(row.id)}-recording-${dayjs().format(\r\n        'YYYY-MM-DD-HH-mm-ss',\r\n      )}.${recordFormat}",
     "--serial=${row.id} --window-title=${\r\n          row.$remark ? `${row.$remark}-` : ''\r\n        }${row.$name}-${\r\n          row.id\r\n        }-🎥录制中... --record=${savePath} ${this.scrcpyArgs(row.id)}",
-    "--serial=${row.id} --window-title=${\r\n            row.$remark ? `${row.$remark}-` : ''\r\n          }${row.$name}-${row.id} ${this.scrcpyArgs(row.id)}"
+    "--serial=${row.id} --window-title=${\r\n            row.$remark ? `${row.$remark}-` : ''\r\n          }${row.$name}-${row.id} ${this.scrcpyArgs(row.id)}",
+    "${device.$remark ? `${device.$remark}-` : ''}${\r\n        device.$name\r\n      }-${this.$replaceIP(device.id)}-screencap-${dayjs().format(\r\n        'YYYY-MM-DD-HH-mm-ss',\r\n      )}.png",
+    "input keyevent KEYCODE_APP_SWITCH",
+    "input keyevent KEYCODE_HOME",
+    "input keyevent KEYCODE_BACK",
+    "Back",
+    "Notification",
+    "cmd statusbar expand-notifications",
+    "input keyevent KEYCODE_POWER",
+    "Crop",
+    "&",
+    "\r\n        {{\r\n          loading ",
+    "& percent\r\n            ? `${$t(\"about.update.progress\")}...（${percent.toFixed(1)}%）`\r\n            : $t(\"about.update\")\r\n        }}\r\n      ",
+    "\r\n      Supported by\r\n\r\n      ",
+    "Viarotel",
+    "\r\n\r\n      v{{ version }}\r\n    ",
+    "pair ${this.formData.host}:${this.formData.port} ${this.formData.pair}"
   ]
 }

README-CN.md

@@ -133,7 +133,7 @@
 7. 定制化，支持对单个设备进行独立配置 ✅
 8. 添加 macOS 及 linux 操作系统的支持 ✅
 9. 支持国际化 ✅
-10. 对深色模式的支持 🚧
+10. 对深色模式的支持 ✅
 11. 添加对游戏的增强功能，如游戏键位映射 🚧
 
 ## 常见问题

electron/events/handles/index.js

@@ -1,7 +1,10 @@
 import fs from 'fs-extra'
 import { dialog, ipcMain, shell } from 'electron'
+import themeHandles from './theme/index.js'
+
+export default (mainWindow) => {
+  themeHandles(mainWindow)
 
-export default () => {
   ipcMain.handle(
     'show-open-dialog',
     async (event, { preset = '', ...options } = {}) => {
@@ -11,11 +14,11 @@ export default () => {
         .catch(e => console.warn(e))
 
       if (res.canceled) {
-        throw new Error('用户取消操作')
+        throw new Error('User cancel operation')
       }
 
       if (!res.filePaths.length) {
-        throw new Error('获取目录或文件路径失败')
+        throw new Error('Get the directory or file path failure')
       }
 
       const filePaths = res.filePaths
@@ -48,11 +51,11 @@ export default () => {
         .catch(e => console.warn(e))
 
       if (res.canceled) {
-        throw new Error('用户取消操作')
+        throw new Error('User cancel operation')
       }
 
       if (!res.filePath) {
-        throw new Error('获取文件路径失败')
+        throw new Error('Failure to obtain the file path')
       }
 
       const destinationPath = res.filePath

electron/events/handles/theme/index.js

@@ -0,0 +1,26 @@
+import { ipcMain, nativeTheme } from 'electron'
+
+export default (mainWindow) => {
+  const appTheme = {
+    value() {
+      return nativeTheme.themeSource
+    },
+    update(value) {
+      nativeTheme.themeSource = value
+    },
+    isDark() {
+      return nativeTheme.shouldUseDarkColors
+    },
+  }
+
+  Object.entries(appTheme).forEach(([key, handler]) => {
+    ipcMain.handle(`app-theme-${key}`, (_, value) => handler(value))
+  })
+
+  nativeTheme.on('updated', () => {
+    mainWindow.webContents.send('app-theme-change', {
+      isDark: appTheme.isDark(),
+      value: appTheme.value(),
+    })
+  })
+}

electron/events/tray/index.js

@@ -1,8 +1,11 @@
 import { Menu, Tray, app, dialog } from 'electron'
 import { trayPath } from '@electron/configs/index.js'
 import appStore from '@electron/helpers/store.js'
+import { executeI18n } from '@electron/helpers/index.js'
 
 export default (mainWindow) => {
+  const t = value => executeI18n(mainWindow, value)
+
   let tray = null
 
   const showApp = () => {
@@ -38,7 +41,7 @@ export default (mainWindow) => {
     return true
   }
 
-  const closeApp = (response) => {
+  const closeApp = async (response) => {
     if (response === 0) {
       quitApp()
       return true
@@ -56,20 +59,20 @@ export default (mainWindow) => {
 
       const contextMenu = Menu.buildFromTemplate([
         {
-          label: '打开',
+          label: await t('common.open'),
           click: () => {
             showApp()
           },
         },
         {
-          label: '重启服务',
+          label: await t('common.restart'),
           click: () => {
             app.relaunch()
             quitApp()
           },
         },
         {
-          label: '退出',
+          label: await t('close.quit'),
           click: () => {
             quitApp()
           },
@@ -101,11 +104,15 @@ export default (mainWindow) => {
 
     const { response, checkboxChecked } = await dialog.showMessageBox({
       type: 'question',
-      buttons: ['退出', '最小化到托盘', '取消退出'],
-      title: '提示',
-      message: '确定要退出吗？',
+      buttons: [
+        await t('close.quit'),
+        await t('close.minimize'),
+        await t('close.quit.cancel'),
+      ],
+      title: await t('common.tips'),
+      message: await t('close.message'),
       checkboxChecked: false,
-      checkboxLabel: '是否记住选择？',
+      checkboxLabel: await t('close.remember'),
     })
 
     // console.log('response', response)

electron/events/updater/index.js

@@ -4,9 +4,7 @@ import { autoUpdater } from 'electron-updater'
 import { devPublishPath } from '@electron/configs/index.js'
 
 export default (mainWindow) => {
-  // dev-start, 这里是为了在本地做应用升级测试使用，正式环境请务必删除
-  // if (is.dev && process.env.ELECTRON_RENDERER_URL) {
-  if (is.dev && process.env.VITE_DEV_SERVER_URL) {
+  if (is.dev) {
     autoUpdater.updateConfigPath = devPublishPath
     Object.defineProperty(app, 'isPackaged', {
       get() {

electron/exposes/adbkit/index.js

@@ -113,7 +113,7 @@ const display = async (deviceId) => {
     value = uniq(mapValue)
   }
   catch (error) {
-    console.error(error?.message || error)
+    console.warn(error?.message || error)
   }
 
   console.log('display.deviceId.value', value)

electron/exposes/index.js

@@ -14,10 +14,10 @@ export default {
   init(expose) {
     expose('nodePath', path)
 
-    expose('appStore', store)
-
     expose('appLog', log)
 
+    expose('appStore', store)
+
     expose('electron', {
       ...electron(),
       configs,

electron/helpers/console.js

@@ -1,8 +1,13 @@
 import log from '@electron/helpers/log.js'
 
+import appStore from './store.js'
 import { createProxy } from './index.js'
 
-Object.assign(console, {
-  ...createProxy(log.functions, log.levels),
-  raw: console.log,
-})
+const debug = appStore.get('common.debug') || false
+
+if (debug) {
+  Object.assign(console, {
+    ...createProxy(log.functions, log.levels),
+    raw: console.log,
+  })
+}

electron/helpers/index.js

@@ -42,3 +42,15 @@ export function createProxy(targetObject, methodNames) {
     return proxyObj
   }, {})
 }
+
+export async function executeI18n(mainWindow, value) {
+  try {
+    return await mainWindow.webContents.executeJavaScript(
+      `window.t('${value}')`,
+    )
+  }
+  catch (error) {
+    console.warn(error?.message || error)
+    return value
+  }
+}

electron/main.js

@@ -4,7 +4,7 @@ import { electronApp, optimizer } from '@electron-toolkit/utils'
 
 // process.js 必须位于非依赖项的顶部
 import './helpers/process.js'
-import './helpers/store.js'
+import appStore from './helpers/store.js'
 
 import log from './helpers/log.js'
 import './helpers/console.js'
@@ -15,7 +15,16 @@ import events from './events/index.js'
 
 log.initialize({ preload: true })
 
-console.log('Successfully initialized the Escrcpy logging system.')
+const debug = !!appStore.get('common.debug')
+
+log.info('Debug Status:', debug)
+
+if (!debug) {
+  log.warn(
+    'Debug Tips:',
+    '如果需要生成并查看运行日志请在偏好设置页面启动调试功能',
+  )
+}
 
 // The built directory structure
 //

index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon"  href="/logo.ico" />

src/App.vue

@@ -4,7 +4,7 @@
       <el-tab-pane
         v-for="(item, index) of tabsModel"
         :key="index"
-        :label="item.label"
+        :label="$t(item.label)"
         :name="item.prop"
         lazy
       >
@@ -29,15 +29,15 @@ export default {
     return {
       tabsModel: [
         {
-          label: this.$t('device.list'),
+          label: 'device.list',
           prop: 'Device',
         },
         {
-          label: this.$t('preferences.name'),
+          label: 'preferences.name',
           prop: 'Preference',
         },
         {
-          label: this.$t('about.name'),
+          label: 'about.name',
           prop: 'About',
         },
       ],
@@ -47,6 +47,7 @@ export default {
     }
   },
   created() {
+    this.$store.theme.init()
     this.$store.preference.init()
     this.showTips()
   },

src/components/About/index.vue

@@ -4,7 +4,7 @@
       <img src="@electron/resources/build/logo.png" class="h-48" alt="" />
     </a>
 
-    <div class="pt-4 text-xl text-center italic text-gray-700">
+    <div class="pt-4 text-xl text-center italic text-gray-700 dark:text-white">
       {{ $t("about.description") }}
     </div>
 
@@ -68,7 +68,7 @@ export default {
       })
     },
     onUpdateError() {
-      this.$electron.ipcRenderer.on('update-error', async (event, ret) => {
+      this.$electron.ipcRenderer.on('update-error', async (_, ret) => {
         this.loading = false
         console.log('onUpdateError.ret', ret)
         try {