perf: 🚀 Supports display of offline devices

electron/main.js

@@ -61,7 +61,7 @@ let mainWindow
 function createWindow() {
   const bounds = appStore.get('common.bounds') || {}
 
-  const baseWidth = 640
+  const baseWidth = 768
   const baseHeight = Number((baseWidth / 1.57).toFixed())
 
   mainWindow = new BrowserWindow({

src/components/ControlBar/index.vue

@@ -29,7 +29,7 @@
             type="primary"
             plain
             class="!border-none !mx-0 bg-transparent !rounded-0"
-            :disabled="device.$unauthorized"
+            :disabled="device.unauthorized"
             :title="$t(item.tips || item.label)"
             :loading="loading"
             @click="handleClick(item, trigger || item.trigger)"

src/components/TaskListDialog/index.vue

@@ -96,7 +96,7 @@
           <EleTagCollapse
             effect="light"
             :value="row.devices"
-            :label="(item) => item.$remark || `${item.$name} (${item.id})`"
+            :label="(item) => item.remark || `${item.name} (${item.id})`"
             class="justify-center"
           />
         </el-table-column>

src/dicts/device/index.js

@@ -1,4 +1,9 @@
 export const deviceStatus = [
+  {
+    label: 'device.status.offline',
+    value: 'offline',
+    tagType: 'info',
+  },
   {
     label: 'device.status.unauthorized',
     value: 'unauthorized',

src/locales/languages/zh-CN.json

@@ -63,6 +63,7 @@
   "device.permission.error": "设备可能未授权成功，请重新插拔设备并点击允许USB调试",
   "device.terminal.name": "终端调试",
   "device.status": "状态",
+  "device.status.offline": "已离线",
   "device.status.unauthorized": "未授权",
   "device.status.connected": "已连接",
 

src/pages/device/components/MirrorAction/index.vue

@@ -2,7 +2,7 @@
   <EleTooltipButton
     type="primary"
     text
-    :disabled="row.$unauthorized"
+    :disabled="row.unauthorized"
     :loading="loading"
     :icon="loading ? '' : 'Link'"
     placement="top"

src/pages/device/components/MoreDropdown/index.vue

@@ -9,7 +9,7 @@
       <el-button
         type="primary"
         text
-        :disabled="row.$unauthorized"
+        :disabled="row.unauthorized"
         icon="CirclePlus"
       >
       </el-button>

src/pages/device/components/Remark/index.vue

@@ -11,14 +11,14 @@
           <el-icon>
             <EditPen />
           </el-icon>
-          <span class="pl-1">{{ device.$remark || $t('device.remark') }}</span>
+          <span class="pl-1">{{ device.remark || $t('device.remark') }}</span>
         </div>
       </el-tag>
     </template>
 
     <el-input
       ref="elInput"
-      v-model="device.$remark"
+      v-model="device.remark"
       class=""
       :placeholder="$t('common.input.placeholder')"
       clearable

src/pages/device/components/WirelessAction/index.vue

@@ -1,9 +1,9 @@
 <template>
   <EleTooltipButton
-    v-if="!row.$wifi"
+    v-if="!row.wifi"
     type="primary"
     text
-    :disabled="row.$unauthorized"
+    :disabled="row.unauthorized"
     placement="top"
     :content="$t('device.wireless.mode')"
     @click="handleWifi(row)"
@@ -14,11 +14,11 @@
   </EleTooltipButton>
 
   <EleTooltipButton
-    v-if="row.$wifi"
+    v-if="row.wifi"
     type="danger"
     text
     :loading="stopLoading"
-    :disabled="row.$unauthorized"
+    :disabled="row.unauthorized"
     :icon="stopLoading ? '' : 'CircleClose'"
     placement="top"
     :content="stopLoading

src/pages/device/index.vue

@@ -8,7 +8,7 @@
 
     <div class="flex-1 h-0 overflow-hidden">
       <el-table
-        ref="elTable"
+        ref="tableRef"
         v-loading="loading && !deviceList.length"
         :element-loading-text="$t('common.loading')"
         :data="deviceList"
@@ -36,14 +36,14 @@
               <DevicePopover :device="row" />
 
               <span class="">
-                {{ row.$name }}
+                {{ row.name }}
               </span>
 
               <div class="ml-2">
                 <Remark :device="row" class="" />
               </div>
 
-              <el-tag v-if="row.$wifi" effect="light" class="ml-2">
+              <el-tag v-if="row.wifi" effect="light" class="ml-2">
                 WIFI
               </el-tag>
             </div>
@@ -242,7 +242,7 @@ export default {
     },
 
     toggleRowExpansion(...args) {
-      this.$refs.elTable.toggleRowExpansion(...args)
+      this.$refs.tableRef.toggleRowExpansion(...args)
     },
 
     handleConnect(...args) {

src/pages/preference/components/ScopeSelect/index.vue

@@ -45,8 +45,8 @@ const deviceStore = useDeviceStore()
 const options = computed(() => {
   const value = deviceStore.list.map(item => ({
     ...item,
-    label: `${item.id}（${item.$name}${
-      item.$remark ? `，${item.$remark}` : ''
+    label: `${item.id}（${item.name}${
+      item.remark ? `，${item.remark}` : ''
     }）`,
     value: item.id,
   }))

src/store/device/helpers/index.js

@@ -0,0 +1,65 @@
+import { defaultsDeep, keyBy, omit } from 'lodash-es'
+import { isIPWithPort, replaceIP } from '$/utils/index.js'
+
+/**
+ * 获取设备名称
+ */
+export function getDeviceName(device) {
+  return device.model ? device.model.split(':')[1] : '未授权设备'
+}
+
+/**
+ * 获取备注名称
+ */
+export function getRemark(deviceId) {
+  const value = window.appStore.get(`device.${replaceIP(deviceId)}.remark`)
+  return value
+}
+
+/**
+ * 获取历史设备列表
+ */
+export function getHistoryDevices() {
+  const devices = window.appStore.get('devices') || []
+  return devices.map(device => ({
+    ...device,
+    status: 'offline',
+  }))
+}
+
+/**
+ * 获取当前连接的设备
+ */
+export async function getCurrentDevices() {
+  const rawDevices = await window.adb.getDevices() || []
+
+  return rawDevices.map(device => ({
+    ...device,
+    id: device.id,
+    status: device.type,
+    name: getDeviceName(device),
+    unauthorized: device.type === 'unauthorized',
+    wifi: isIPWithPort(device.id),
+    remark: getRemark(device.id),
+  }))
+}
+
+/**
+ * 合并历史和当前设备列表
+ */
+export function mergeDevices(historyDevices, currentDevices) {
+  const historyMap = keyBy(historyDevices, 'id')
+  const currentMap = keyBy(currentDevices, 'id')
+
+  return Object.values(defaultsDeep(currentMap, historyMap))
+}
+
+/**
+ * 保存设备信息到存储
+ */
+export function saveDevicesToStore(devices) {
+  const cleanedDevices = devices.map(device =>
+    omit(device, ['status', 'unauthorized']),
+  )
+  window.appStore.set('devices', cleanedDevices)
+}

src/store/device/index.js

@@ -1,10 +1,19 @@
 import { defineStore } from 'pinia'
 import dayjs from 'dayjs'
+
 import { capitalize } from 'lodash-es'
-import { isIPWithPort, replaceIP } from '$/utils/index.js'
+
+import { replaceIP } from '$/utils/index.js'
 
 import { name as packageName } from '$root/package.json'
 
+import {
+  getCurrentDevices,
+  getHistoryDevices,
+  mergeDevices,
+  saveDevicesToStore,
+} from './helpers/index.js'
+
 const $appStore = window.appStore
 
 export const useDeviceStore = defineStore({
@@ -36,7 +45,7 @@ export const useDeviceStore = defineStore({
 
       const appName = capitalize(packageName)
 
-      const deviceName = `${data?.$remark || data.$name}${data.$wifi ? '(WIFI)' : ''}`
+      const deviceName = `${data?.remark || data.name}${data.wifi ? '(WIFI)' : ''}`
 
       const currentTime = dayjs().format('YYYYMMDDHHmmss')
 
@@ -75,23 +84,22 @@ export const useDeviceStore = defineStore({
     setList(data) {
       this.list = data
     },
+    /**
+     * 获取设备列表
+     * @returns {Promise<Array>} 合并后的设备列表
+     */
     async getList() {
-      const res = await window.adb.getDevices()
-
-      const data
-        = res?.map(item => ({
-          ...item,
-          id: item.id,
-          status: item.type,
-          $name: item.model ? item.model.split(':')[1] : '未授权设备',
-          $unauthorized: item.type === 'unauthorized',
-          $wifi: isIPWithPort(item.id),
-          $remark: this.getRemark(item.id),
-        })) || []
+      const historyDevices = getHistoryDevices()
 
-      this.list = data
+      const currentDevices = await getCurrentDevices()
+
+      const mergedDevices = mergeDevices(historyDevices, currentDevices)
 
-      return data
+      saveDevicesToStore(mergedDevices)
+
+      this.list = mergedDevices
+
+      return mergedDevices
     },
     setConfig(value, key = 'device') {
       $appStore.set(key, value)
@@ -101,9 +109,5 @@ export const useDeviceStore = defineStore({
       $appStore.set(`device.${replaceIP(deviceId)}.remark`, value)
       this.init()
     },
-    getRemark(deviceId) {
-      const value = $appStore.get(`device.${replaceIP(deviceId)}.remark`)
-      return value
-    },
   },
 })