fix: 🚀 修复对设备进行独立配置时的一些问题

README.md

@@ -9,6 +9,7 @@
 ## 特点
 
 - 🏃 同步：得益于 Web 技术，将更快速的与 Scrcpy 保持同步
+- 💡 定制化：支持对多个设备偏好进行独立配置，并且能够添加备注以及导入导出所有配置的功能
 - 😎 轻巧度：本机支持，仅显示设备屏幕
 - ⚡️ 性能：30~120 帧每秒，取决于设备
 - 🌟 质量：1920×1080 或更高
@@ -113,12 +114,13 @@
 2. 内置的软件更新功能 ✅
 3. 录制和保存音视频 ✅
 4. 添加设备快捷交互控制栏 ✅
-5. 支持自定义设备名称，以及用户配置的导出及导入 ✅
-6. 支持自定义 Adb 及 Scrcpy 依赖 ✅
-7. 支持精简版本(不包含 Adb 及 Scrcpy 依赖)和完整版本以满足不同用户需求 🚧
-8. 添加 macOS 及 linux 操作系统的支持 🚧
-9. 支持语言国际化功能 🚧
-10. 添加对游戏的增强功能，如游戏键位映射 🚧
+5. 支持自定义 Adb 及 Scrcpy 依赖 ✅
+6. 支持自定义设备名称，以及偏好设置的导出及导入 ✅
+7. 定制化，支持对单个设备进行独立配置 ✅
+8. 支持精简版本(不包含 Adb 及 Scrcpy 依赖)和完整版本以满足不同用户需求 🚧
+9. 添加 macOS 及 linux 操作系统的支持 🚧
+10. 支持语言国际化功能 🚧
+11. 添加对游戏的增强功能，如游戏键位映射 🚧
 
 ## 常见问题
 

electron/configs/index.js

@@ -2,6 +2,8 @@ import { resolve } from 'node:path'
 
 import { buildResolve, extraResolve } from '@electron/helpers/index.js'
 
+export const desktopPath = process.env.DESKTOP_PATH
+
 export const devPublishPath = resolve('dev-publish.yml')
 
 export const logoPath = buildResolve('logo.png')

electron/exposes/adbkit/index.js

@@ -17,12 +17,26 @@ window.addEventListener('beforeunload', () => {
   }
 })
 
-appStore.onDidChange('scrcpy.adbPath', async (value) => {
-  console.log('onDidChange.scrcpy.adbPath.value', value)
+appStore.onDidChange('scrcpy.global.adbPath', async (value, oldValue) => {
+  console.log('onDidChange.scrcpy.global.adbPath', value)
+
+  if (!value) {
+    return false
+  }
+
+  if (value === oldValue) {
+    return false
+  }
+
+  if (value === client?.options?.bin) {
+    return false
+  }
+
   if (client) {
     await client.kill().catch(e => console.warn(e))
     client = null
   }
+
   client = Adb.createClient({ bin: value })
 })
 
@@ -108,7 +122,12 @@ const watch = async (callback) => {
 }
 
 export default () => {
-  client = Adb.createClient({ bin: appStore.get('scrcpy.adbPath') || adbPath })
+  const binPath = appStore.get('scrcpy.global.adbPath') || adbPath
+
+  client = Adb.createClient({
+    bin: binPath,
+  })
+
   console.log('client', client)
 
   return {

electron/exposes/scrcpy/index.js

@@ -3,15 +3,13 @@ import appStore from '@electron/helpers/store.js'
 import { adbPath, scrcpyPath } from '@electron/configs/index.js'
 
 const shell = async (command, { stdout, stderr } = {}) => {
+  const spawnPath = appStore.get('scrcpy.global.scrcpyPath') || scrcpyPath
   const args = command.split(' ')
-  const scrcpyProcess = spawn(
-    appStore.get('scrcpy.scrcpyPath') || scrcpyPath,
-    args,
-    {
-      env: { ...process.env, ADB: adbPath },
-      shell: true,
-    },
-  )
+
+  const scrcpyProcess = spawn(spawnPath, args, {
+    env: { ...process.env, ADB: adbPath },
+    shell: true,
+  })
 
   scrcpyProcess.stdout.on('data', (data) => {
     const stringData = data.toString()

electron/helpers/packaged.js → electron/helpers/process.js

@@ -1,6 +1,8 @@
-/** 在主进程中获取项目打包状态并将该值存储到环境变量中，从而在预加载脚本中及渲染进程中使用 */
+/** 在主进程中获取关键信息存储到环境变量中，从而在预加载脚本中及渲染进程中使用 */
 /** 注意： app.isPackaged 可能被被某些方法改变所以请将该文件放到 main.js 必须位于非依赖项的顶部 */
 
 import { app } from 'electron'
 
 process.env.IS_PACKAGED = JSON.stringify(app.isPackaged)
+
+process.env.DESKTOP_PATH = app.getPath('desktop')

electron/helpers/store.js

@@ -3,8 +3,8 @@ import { createProxy } from './index.js'
 
 const appStore = new Store()
 
-appStore.onDidAnyChange(() => {
-  console.log('appStore.onDidAnyChange', appStore.store)
+appStore.onDidAnyChange((value) => {
+  console.log('appStore.onDidAnyChange.value', value)
 })
 
 export default {

electron/main.js

@@ -2,8 +2,8 @@ import path from 'node:path'
 import { BrowserWindow, app, shell } from 'electron'
 import { electronApp, optimizer } from '@electron-toolkit/utils'
 
-// packaged.js 必须位于非依赖项的顶部
-import './helpers/packaged.js'
+// process.js 必须位于非依赖项的顶部
+import './helpers/process.js'
 import './helpers/store.js'
 
 import { icnsLogoPath, icoLogoPath, logoPath } from './configs/index.js'

src/components/Device/ControlBar/index.vue

@@ -83,12 +83,11 @@ export default {
       ],
     }
   },
-  computed: {
-    scrcpyConfig() {
-      return this.$store.scrcpy.config
-    },
-  },
+  computed: {},
   methods: {
+    scrcpyConfig(...args) {
+      return this.$store.scrcpy.getConfig(...args)
+    },
     async handleInstall(device) {
       let files = null
 
@@ -109,7 +108,7 @@ export default {
       }
 
       const messageEl = this.$message({
-        message: ` 正在为 ${device.name} 安装应用中...`,
+        message: ` 正在为 ${device.$name} 安装应用中...`,
         icon: LoadingIcon,
         duration: 0,
       })
@@ -132,11 +131,11 @@ export default {
       if (successCount) {
         if (totalCount > 1) {
           this.$message.success(
-            `已成功将应用安装到 ${device.name} 中，共 ${totalCount}个，成功 ${successCount}个，失败 ${failCount}个`,
+            `已成功将应用安装到 ${device.$name} 中，共 ${totalCount}个，成功 ${successCount}个，失败 ${failCount}个`,
           )
         }
         else {
-          this.$message.success(`已成功将应用安装到 ${device.name} 中`)
+          this.$message.success(`已成功将应用安装到 ${device.$name} 中`)
         }
         return
       }
@@ -156,15 +155,19 @@ export default {
     },
     async handleScreenCap(device) {
       const messageEl = this.$message({
-        message: ` 正在截取 ${device.name} 的屏幕快照...`,
+        message: ` 正在截取 ${device.$name} 的屏幕快照...`,
         icon: LoadingIcon,
         duration: 0,
       })
 
-      const fileName = `${device.name}-screencap-${dayjs().format(
+      const fileName = `${device.$remark ? `${device.$remark}-` : ''}${
+        device.$name
+      }-${this.$replaceIP(device.id)}-screencap-${dayjs().format(
         'YYYY-MM-DD-HH-mm-ss',
       )}.png`
-      const savePath = this.$path.resolve(this.scrcpyConfig.savePath, fileName)
+
+      const deviceConfig = this.scrcpyConfig(device.id)
+      const savePath = this.$path.resolve(deviceConfig.savePath, fileName)
 
       try {
         await this.$adb.screencap(device.id, { savePath })

src/components/Device/index.vue

@@ -65,12 +65,7 @@
           align="left"
           width="200"
         />
-        <el-table-column
-          prop="name"
-          label="设备名称"
-          show-overflow-tooltip
-          align="left"
-        >
+        <el-table-column label="设备名称" show-overflow-tooltip align="left">
           <template #default="{ row }">
             <div class="flex items-center">
               <el-tooltip
@@ -83,7 +78,7 @@
                 </el-icon>
               </el-tooltip>
 
-              {{ row.name }}
+              {{ row.$name }}
 
               <el-tag v-if="row.$wifi" effect="light" class="ml-2">
                 WIFI
@@ -188,11 +183,7 @@ export default {
       },
     }
   },
-  computed: {
-    scrcpyConfig() {
-      return this.$store.scrcpy.config
-    },
-  },
+  computed: {},
   async created() {
     this.getDeviceData()
 
@@ -217,6 +208,9 @@ export default {
     }
   },
   methods: {
+    scrcpyConfig(...args) {
+      return this.$store.scrcpy.getConfig(...args)
+    },
     scrcpyArgs(...args) {
       return this.$store.scrcpy.getStringConfig(...args)
     },
@@ -225,13 +219,19 @@ export default {
       this.$refs.elTable.toggleRowExpansion(...params)
     },
     getRecordPath(row) {
-      const basePath = this.scrcpyConfig.savePath
-      const recordFormat = this.scrcpyConfig['--record-format']
-      const fileName = `${row.name || row.id}-recording-${dayjs().format(
+      const rowConfig = this.scrcpyConfig(row.id)
+      const basePath = rowConfig.savePath
+      const recordFormat = rowConfig['--record-format']
+
+      const fileName = `${row.$remark ? `${row.$remark}-` : ''}${
+        row.$name
+      }-${this.$replaceIP(row.id)}-recording-${dayjs().format(
         'YYYY-MM-DD-HH-mm-ss',
       )}.${recordFormat}`
+
       const joinValue = this.$path.join(basePath, fileName)
       const value = this.$path.normalize(joinValue)
+
       return value
     },
     async handleRecord(row) {
@@ -243,9 +243,9 @@ export default {
       try {
         const command = `--serial=${row.id} --window-title=${
           row.$remark ? `${row.$remark}-` : ''
-        }${row.name}-${
+        }${row.$name}-${
           row.id
-        }-🎥录制中... --record=${savePath} ${this.scrcpyArgs()}`
+        }-🎥录制中... --record=${savePath} ${this.scrcpyArgs(row.id)}`
 
         console.log('handleRecord.command', command)
 
@@ -279,7 +279,7 @@ export default {
         await this.$scrcpy.shell(
           `--serial=${row.id} --window-title=${
             row.$remark ? `${row.$remark}-` : ''
-          }${row.name}-${row.id} ${this.scrcpyArgs()}`,
+          }${row.$name}-${row.id} ${this.scrcpyArgs(row.id)}`,
           { stdout: this.onStdout },
         )
       }
@@ -373,22 +373,15 @@ export default {
       this.loading = true
       await sleep(500)
       try {
-        const data = await this.$adb.getDevices()
+        const data = await this.$store.device.getList()
         this.deviceList
           = data?.map(item => ({
             ...item,
-            id: item.id,
-            name: item.model ? item.model.split(':')[1] : '未授权设备',
             $loading: false,
             $recordLoading: false,
             $stopLoading: false,
-            $unauthorized: item.type === 'unauthorized',
-            $wifi: isIPWithPort(item.id),
-            $remark: this.$store.device.getRemark(item.id),
           })) || []
 
-        this.$store.device.setList(this.deviceList)
-
         console.log('getDeviceData.data', this.deviceList)
       }
       catch (error) {

src/components/Preference/index.vue

@@ -5,17 +5,31 @@
         <el-select
           v-model="scopeValue"
           value-key=""
-          title="该选项用于设置偏好设置的作用域范围"
           placeholder="偏好设置的作用域范围"
           filterable
           no-data-text="暂无数据"
           class="!w-90"
           @change="onScopeChange"
         >
           <template #prefix>
-            <el-icon class="text-primary-300 hover:text-primary-500">
-              <QuestionFilled />
-            </el-icon>
+            <el-tooltip class="" effect="dark" placement="bottom-start">
+              <el-icon class="text-primary-300 hover:text-primary-500">
+                <QuestionFilled />
+              </el-icon>
+              <template #content>
+                <div class="space-y-1">
+                  <div class="pb-1">
+                    对全局或者单个设备的设置不同的偏好配置
+                  </div>
+                  <div class="">
+                    全局：将对所有设备生效。
+                  </div>
+                  <div class="">
+                    单个设备：继承于全局配置，并对单个设备进行独立设置，仅对此设备生效。
+                  </div>
+                </div>
+              </template>
+            </el-tooltip>
           </template>
           <el-option
             v-for="item in scopeList"
@@ -36,6 +50,9 @@
         <el-button type="" plain @click="handleEdit">
           编辑配置
         </el-button>
+        <el-button type="" plain @click="handleResetAll">
+          重置配置
+        </el-button>
       </div>
     </div>
     <div class="grid gap-6 pr-2">
@@ -213,15 +230,15 @@ export default {
     scopeList() {
       const value = this.$store.device.list.map(item => ({
         ...item,
-        label: `${item.id}（${item.name}${
+        label: `${item.id}（${item.$name}${
           item.$remark ? `，${item.$remark}` : ''
         }）`,
 
-        value: this.$store.device.removeDots(item.id),
+        value: item.id,
       }))
 
       value.unshift({
-        label: '全局范围',
+        label: 'Global（全局）',
         value: 'global',
       })
 
@@ -243,8 +260,13 @@ export default {
     })
   },
   methods: {
+    handleResetAll() {
+      this.$store.scrcpy.reset(this.scopeValue)
+      this.scrcpyForm = this.$store.scrcpy.config
+    },
     onScopeChange(value) {
-      this.$store.scrcpy.setScope(value)
+      const replaceIPValue = this.$store.device.replaceIP(value)
+      this.$store.scrcpy.setScope(replaceIPValue)
       this.scrcpyForm = this.$store.scrcpy.config
     },
     async handleImport() {