perf: ✅ A new method is adopted to solve the problem of IP type confi…

…guration storage

electron/exposes/scrcpy/helper.js

@@ -1,5 +1,4 @@
 import appStore from '$electron/helpers/store.js'
-import { replaceIP } from '$renderer/utils/index.js'
 
 /**
  * Parse scrcpy app list output into structured data
@@ -39,7 +38,7 @@ export function parseScrcpyAppList(rawText) {
  * @returns {string}
  */
 export function getDisplayOverlay(serial) {
-  const value = appStore.get(`scrcpy.${replaceIP(serial)}.--display-overlay`)
+  const value = appStore.get('scrcpy')?.[serial]?.['--display-overlay']
     || appStore.get('scrcpy.global.--display-overlay')
     || ''
   return value

electron/helpers/store.js

@@ -1,5 +1,5 @@
 import Store from 'electron-store'
-import { isEqual } from 'lodash-es'
+import { isEqual, set } from 'lodash-es'
 import { createProxy } from './index.js'
 
 const appStore = new Store()
@@ -10,9 +10,7 @@ if (isEqual(appStore.store, {})) {
 }
 
 export default {
-  ...appStore,
   ...createProxy(appStore, [
-    'set',
     'get',
     'delete',
     'clear',
@@ -22,6 +20,21 @@ export default {
     'onDidAnyChange',
     'openInEditor',
   ]),
+
   getAll: () => appStore.store,
   setAll: value => (appStore.store = value),
+
+  set(...args) {
+    if (Array.isArray(args[0])) {
+      const tempStore = { ...appStore.store }
+
+      set(tempStore, args[0], args[1])
+
+      appStore.set(tempStore)
+
+      return false
+    }
+
+    appStore.set(...args)
+  },
 }

src/bootstrap/default/index.js

@@ -8,8 +8,6 @@ import plugins from '$/plugins/index.js'
 
 import store from '$/store/index.js'
 
-import { replaceIP, restoreIP } from '$/utils/index.js'
-
 import '$/utils/console.js'
 
 import 'virtual:uno.css'
@@ -40,9 +38,6 @@ export default (App, { router } = {}) => {
   app.config.globalProperties.$scrcpy = window.scrcpy
   app.config.globalProperties.$gnirehtet = window.gnirehtet
 
-  app.config.globalProperties.$replaceIP = replaceIP
-  app.config.globalProperties.$restoreIP = restoreIP
-
   app.config.globalProperties.$toRaw = toRaw
 
   app.mount('#app').$nextTick(() => {

src/dicts/device/index.js

@@ -1,17 +1,17 @@
 export const deviceStatus = [
   {
-    label: 'device.status.offline',
-    value: 'offline',
-    tagType: 'info',
+    label: 'device.status.connected',
+    value: 'device',
+    tagType: 'success',
   },
   {
     label: 'device.status.unauthorized',
     value: 'unauthorized',
     tagType: 'danger',
   },
   {
-    label: 'device.status.connected',
-    value: 'device',
-    tagType: 'success',
+    label: 'device.status.offline',
+    value: 'offline',
+    tagType: 'info',
   },
 ]

src/pages/preference/index.vue

@@ -86,7 +86,7 @@ export default {
   methods: {
     onDeviceChange(options) {
       const device = options.some(
-        item => this.$replaceIP(item.value) === this.deviceScope,
+        item => item.value === this.deviceScope,
       )
 
       if (device) {

src/store/device/helpers/index.js

@@ -1,5 +1,6 @@
 import { defaultsDeep, keyBy, omit } from 'lodash-es'
-import { isIPWithPort, replaceIP } from '$/utils/index.js'
+import { isIPWithPort } from '$/utils/index.js'
+import { deviceStatus as deviceStatusDict } from '$/dicts/device/index.js'
 
 /**
  * 获取设备名称
@@ -12,28 +13,31 @@ export function getDeviceName(device) {
  * 获取备注名称
  */
 export function getRemark(deviceId) {
-  const value = window.appStore.get(`device.${replaceIP(deviceId)}.remark`)
+  const value = window.appStore.get('device')?.[deviceId]?.remark
   return value
 }
 
 /**
  * 获取历史设备列表
  */
 export function getHistoryDevices() {
-  const devices = window.appStore.get('devices') || []
-  return devices.map(device => ({
+  const devices = window.appStore.get('device') || {}
+
+  const value = Object.values(devices).map(device => ({
     ...device,
     status: 'offline',
   }))
+
+  return value
 }
 
 /**
  * 获取当前连接的设备
  */
 export async function getCurrentDevices() {
-  const rawDevices = await window.adb.getDevices() || []
+  const devices = await window.adb.getDevices() || []
 
-  return rawDevices.map(device => ({
+  return devices.map(device => ({
     ...device,
     id: device.id,
     status: device.type,
@@ -51,7 +55,15 @@ export function mergeDevices(historyDevices, currentDevices) {
   const historyMap = keyBy(historyDevices, 'id')
   const currentMap = keyBy(currentDevices, 'id')
 
-  return Object.values(defaultsDeep(currentMap, historyMap))
+  const sortModel = deviceStatusDict.reduce((obj, item, index) => {
+    obj[item.value] = index
+    return obj
+  }, {})
+
+  const value = Object.values(defaultsDeep(currentMap, historyMap))
+    .sort((a, b) => sortModel[a.status] - sortModel[b.status])
+
+  return value
 }
 
 /**
@@ -61,5 +73,5 @@ export function saveDevicesToStore(devices) {
   const cleanedDevices = devices.map(device =>
     omit(device, ['status', 'unauthorized']),
   )
-  window.appStore.set('devices', cleanedDevices)
+  window.appStore.set('device', keyBy(cleanedDevices, 'id'))
 }

src/store/device/index.js

@@ -3,8 +3,6 @@ import dayjs from 'dayjs'
 
 import { capitalize } from 'lodash-es'
 
-import { replaceIP } from '$/utils/index.js'
-
 import { name as packageName } from '$root/package.json'
 
 import {
@@ -26,7 +24,6 @@ export const useDeviceStore = defineStore({
   },
   getters: {},
   actions: {
-    replaceIP,
     init() {
       this.config = {
         ...($appStore.get('device') || {}),
@@ -106,7 +103,7 @@ export const useDeviceStore = defineStore({
       this.init()
     },
     setRemark(deviceId, value) {
-      $appStore.set(`device.${replaceIP(deviceId)}.remark`, value)
+      $appStore.set(['device', deviceId, 'remark'], value)
       this.init()
     },
   },

src/store/preference/helpers/index.js

@@ -84,9 +84,10 @@ export function setStoreData(data, scope) {
 
   const storeList = Object.entries(storeModel).reduce((arr, [field, value]) => {
     arr.push({
-      field: field === 'scrcpy' ? `scrcpy.${scope}` : field,
+      field: field === 'scrcpy' ? ['scrcpy', scope] : field,
       value,
     })
+
     return arr
   }, [])
 

src/store/preference/index.js

@@ -1,4 +1,3 @@
-import { replaceIP, restoreIP } from '$/utils/index.js'
 import { cloneDeep, get, pickBy, set } from 'lodash-es'
 
 import { defineStore } from 'pinia'
@@ -20,9 +19,7 @@ const { adbPath, scrcpyPath, gnirehtetPath } = window.electron?.configs || {}
 export const usePreferenceStore = defineStore({
   id: 'app-preference',
   state() {
-    const deviceScope = restoreIP(
-      window.appStore.get('scrcpy.deviceScope') || 'global',
-    )
+    const deviceScope = window.appStore.get('scrcpy.deviceScope') || 'global'
 
     const recordKeys = Object.values(model?.record?.children || {}).map(
       item => item.field,
@@ -56,7 +53,7 @@ export const usePreferenceStore = defineStore({
       return this.data
     },
     setScope(value) {
-      this.deviceScope = replaceIP(value)
+      this.deviceScope = value
       window.appStore.set('scrcpy.deviceScope', this.deviceScope)
       this.init()
     },
@@ -78,7 +75,7 @@ export const usePreferenceStore = defineStore({
         delete pickData.gnirehtetPath
       }
 
-      setStoreData(pickData, replaceIP(scope))
+      setStoreData(pickData, scope)
 
       this.init(scope)
     },
@@ -92,7 +89,7 @@ export const usePreferenceStore = defineStore({
         fields.forEach((key) => {
           if (key === 'scrcpy') {
             this.deviceScope = scope
-            window.appStore.set(`scrcpy.${replaceIP(scope)}`, {})
+            window.appStore.set(['scrcpy', 'scope'], {})
             return false
           }
           window.appStore.set(key, {})
@@ -120,7 +117,7 @@ export const usePreferenceStore = defineStore({
       let value = mergeConfig(getDefaultData(), getStoreData())
 
       if (scope !== 'global') {
-        value = mergeConfig(value, getStoreData(replaceIP(scope)))
+        value = mergeConfig(value, getStoreData(scope))
       }
 
       return value

src/utils/index.js

@@ -17,14 +17,6 @@ export function isIPWithPort(ip) {
   return regex.test(ip)
 }
 
-export function replaceIP(value) {
-  return value.replaceAll('.', '_').replaceAll(':', '-')
-}
-
-export function restoreIP(value) {
-  return value.replaceAll('_', '.').replaceAll('-', ':')
-}
-
 /**
  * 创建一个代理对象，将目标对象的指定方法转发并执行。
  *