perf: ♻️ Optimize device details performance

electron/exposes/adb/index.js

@@ -128,18 +128,12 @@ const tcpip = async (id, port = 5555) => client.getDevice(id).tcpip(port)
 const screencap = async (deviceId, options = {}) => {
   const { returnBase64 = false } = options
 
-  let fileStream = null
-  try {
-    const device = client.getDevice(deviceId)
-    fileStream = await device.screencap()
-  }
-  catch (error) {
-    console.warn(error?.message || error)
-    return false
-  }
+  const device = client.getDevice(deviceId)
+
+  const fileStream = await device.screencap()
 
   if (!fileStream) {
-    return false
+    throw new Error('Failed to obtain screenshot data')
   }
 
   if (returnBase64) {
@@ -292,17 +286,11 @@ async function connectCode(password, options = {}) {
 }
 
 async function battery(id) {
-  try {
-    const res = await deviceShell(id, 'dumpsys battery')
+  const res = await deviceShell(id, 'dumpsys battery')
 
-    const value = parseBatteryDump(res)
+  const value = parseBatteryDump(res)
 
-    return value
-  }
-  catch (error) {
-    console.warn(error?.message || error)
-    return {}
-  }
+  return value
 }
 
 function init() {

package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "3.8.0",
-    "@devicefarmer/adbkit": "3.2.6",
+    "@devicefarmer/adbkit": "3.3.8",
     "@electron-toolkit/preload": "3.0.1",
     "@electron-toolkit/utils": "3.0.0",
     "@electron/remote": "2.1.2",

src/components/ControlBar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-primary-100 dark:bg-gray-800 flex items-center group h-9 overflow-hidden"
+    class="bg-primary-100 dark:bg-gray-800 flex items-center group h-7 lg:h-9 overflow-hidden"
   >
     <el-button
       type="primary"

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

@@ -3,18 +3,18 @@
     ref="popoverRef"
     placement="right"
     :width="500"
-    trigger="click"
+    trigger="hover"
     popper-class="!p-0 !overflow-hidden !rounded-xl"
     @before-enter="onBeforeEnter"
-    @hide="onHide"
+    @after-leave="onAfterLeave"
   >
     <template #reference>
       <el-link type="primary" :underline="false" icon="InfoFilled" class="mr-1"></el-link>
     </template>
 
     <div v-loading="loading" :element-loading-text="$t('common.loading')" :class="connectFlag ? 'h-60' : ''" class="flex items-stretch p-2 space-x-2">
       <div v-if="connectFlag" class="flex-none pb-1">
-        <el-image :src="deviceInfo.screencap" :preview-src-list="[deviceInfo.screencap]" class="!h-full !overflow-hidden !rounded-xl !shadow" />
+        <img :src="deviceInfo.screencap" class="!h-full !overflow-hidden !rounded-xl !shadow min-w-24 max-w-56 bg-gray-200 dark:bg-black object-contain cursor-pointer" alt="" @click="handlePreview" />
       </div>
 
       <div class="flex-1 w-0 overflow-auto">
@@ -43,6 +43,8 @@
         </el-descriptions>
       </div>
     </div>
+
+    <el-image-viewer v-if="imageViewerProps.visible" :url-list="[deviceInfo.screencap]" @close="onViewerClose" />
   </el-popover>
 </template>
 
@@ -67,44 +69,77 @@ const connectFlag = computed(() => ['device'].includes(props.device.status))
 
 const screencapTimer = ref()
 
+const imageViewerProps = ref({
+  visible: false,
+})
+
+function handlePreview() {
+  imageViewerProps.value.visible = true
+}
+
+function onViewerClose() {
+  imageViewerProps.value.visible = false
+}
+
 async function onBeforeEnter() {
   Object.assign(deviceInfo.value, { ...props.device })
 
   if (!connectFlag.value) {
     return false
   }
 
-  loading.value = true
-
-  await Promise.allSettled([getScreencap(), getBattery()])
+  if (!deviceInfo.value.screencap) {
+    loading.value = true
+  }
 
   screencapTimer.value = setInterval(() => {
     getScreencap()
     getBattery()
   }, 5 * 1000)
 
+  await Promise.allSettled([getScreencap(), getBattery()])
+
   loading.value = false
 }
 
 async function getScreencap() {
-  const screencap = await window.adb.screencap(props.device.id, { returnBase64: true })
-
-  Object.assign(deviceInfo.value, { screencap: `data:image/png;base64,${screencap}` })
+  try {
+    const screencap = await window.adb.screencap(props.device.id, { returnBase64: true })
+    Object.assign(deviceInfo.value, { screencap: `data:image/png;base64,${screencap}` })
+  }
+  catch (error) {
+    onError()
+    console.warn(error?.message || error)
+  }
 }
 
 async function getBattery() {
-  const battery = await window.adb.battery(props.device.id)
-
-  Object.assign(deviceInfo.value, { battery: battery.computed })
+  try {
+    const battery = await window.adb.battery(props.device.id)
+    Object.assign(deviceInfo.value, { battery: battery.computed })
+  }
+  catch (error) {
+    onError()
+    console.warn(error?.message || error)
+  }
 }
 
-function onHide() {
+function onAfterLeave() {
   clearInterval(screencapTimer.value)
 
-  deviceInfo.value = {}
+  onViewerClose()
 
   loading.value = false
 }
+
+function onError() {
+  clearInterval(screencapTimer.value)
+  props.device.status = 'offline'
+}
+
+onBeforeUnmount(() => {
+  onAfterLeave()
+})
 </script>
 
 <style lang="postcss" scoped>

src/pages/device/index.vue

@@ -33,7 +33,7 @@
         >
           <template #default="{ row }">
             <div class="flex items-center">
-              <DevicePopover :device="row" />
+              <DevicePopover :key="row.status" :device="row" />
 
               <span class="">
                 {{ row.name }}
@@ -157,7 +157,7 @@
 </template>
 
 <script>
-import { isIPWithPort, sleep } from '$/utils/index.js'
+import { sleep } from '$/utils/index.js'
 import BatchActions from './components/BatchActions/index.vue'
 import ControlBar from '$/components/ControlBar/index.vue'
 import MirrorAction from './components/MirrorAction/index.vue'
@@ -219,7 +219,7 @@ export default {
       return uniqBy(value, 'value')
     },
   },
-  async created() {
+  async mounted() {
     this.getDeviceData()
     this.unAdbWatch = await this.$adb.watch(this.onAdbWatch)
   },
@@ -243,13 +243,6 @@ export default {
         this.getDeviceData()
       }
 
-      if (type === 'add' && !isIPWithPort(ret.id) && ret.$host) {
-        this.formData = {
-          ...this.formData,
-          host: ret.$host,
-        }
-      }
-
       if (type === 'remove') {
         this.mirrorActionRefs = this.mirrorActionRefs.filter(
           item => item.row.id !== ret.id,