feat: 🚀 Supports connecting historical devices via device list

src/components/ControlBar/Rotation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown :disabled="loading || floating" @command="handleCommand">
+  <el-dropdown :disabled="loading || floating || ['unauthorized', 'offline'].includes(device.status)" @command="handleCommand">
     <slot :loading :trigger="handleTrigger" />
 
     <template #dropdown>

src/components/ControlBar/Terminal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown>
+  <el-dropdown :disabled="['unauthorized', 'offline'].includes(device.status)">
     <slot :loading />
 
     <template #dropdown>

src/components/ControlBar/Volume/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dropdown
     :hide-on-click="false"
-    :disabled="loading || floating"
+    :disabled="loading || floating || ['unauthorized', 'offline'].includes(device.status)"
     @command="handleCommand"
   >
     <slot :loading :trigger="handleTrigger" />

src/components/ControlBar/index.vue

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

src/locales/languages/zh-CN.json

@@ -27,6 +27,8 @@
   "common.warning": "警告",
   "common.info": "消息",
   "common.danger": "错误",
+  "common.connect": "连接",
+  "common.connecting": "连接中",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",

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

@@ -0,0 +1,47 @@
+<template>
+  <EleTooltipButton
+    type="primary"
+    text
+    :loading="loading"
+    :icon="loading ? '' : 'Connection'"
+    placement="top"
+    :content="loading ? $t('common.connecting') : $t('common.connect')"
+    @click="handleClick(device)"
+  >
+  </EleTooltipButton>
+</template>
+
+<script setup>
+const props = defineProps({
+  device: {
+    type: Object,
+    default: () => ({}),
+  },
+  handleConnect: {
+    type: Function,
+    default: () => false,
+  },
+})
+
+const loading = ref(false)
+
+async function handleClick(device) {
+  const [host, port] = device.id.split(':')
+
+  if (!host || !port) {
+    console.warn('Failed to obtain IP and port number')
+    return false
+  }
+
+  loading.value = true
+
+  await props.handleConnect({
+    host,
+    port,
+  })
+
+  loading.value = false
+}
+</script>
+
+<style></style>

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

@@ -2,7 +2,7 @@
   <EleTooltipButton
     type="primary"
     text
-    :disabled="row.unauthorized"
+    :disabled="['unauthorized', 'offline'].includes(row.status)"
     :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="['unauthorized', 'offline'].includes(row.status)"
         icon="CirclePlus"
       >
       </el-button>

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

@@ -7,11 +7,9 @@
   >
     <template #reference>
       <el-tag effect="light" class="cursor-pointer">
-        <div class="flex items-center">
-          <el-icon>
-            <EditPen />
-          </el-icon>
-          <span class="pl-1">{{ device.remark || $t('device.remark') }}</span>
+        <div class="flex items-center space-x-1">
+          <el-icon><EditPen /></el-icon>
+          <span class="">{{ device.remark || $t('device.remark') }}</span>
         </div>
       </el-tag>
     </template>

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

@@ -3,7 +3,7 @@
     v-if="!row.wifi"
     type="primary"
     text
-    :disabled="row.unauthorized"
+    :disabled="['unauthorized', 'offline'].includes(row.status)"
     placement="top"
     :content="$t('device.wireless.mode')"
     @click="handleWifi(row)"
@@ -18,7 +18,7 @@
     type="danger"
     text
     :loading="stopLoading"
-    :disabled="row.unauthorized"
+    :disabled="['unauthorized', 'offline'].includes(row.status)"
     :icon="stopLoading ? '' : 'CircleClose'"
     placement="top"
     :content="stopLoading

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

@@ -71,6 +71,7 @@
 <script>
 import { sleep } from '$/utils'
 import PairDialog from './PairDialog/index.vue'
+import { useDeviceStore } from '$/store/device/index.js'
 
 export default {
   components: {
@@ -83,24 +84,31 @@ export default {
     },
   },
   data() {
-    const wirelessList = this.$appStore.get('history.wireless') || []
-
-    const lastIndex = wirelessList.length - 1
-    const lastWireless = wirelessList[lastIndex] || {}
-
     return {
       loading: false,
-      wirelessList,
-
-      formData: {
-        host: lastWireless.host,
-        port: lastWireless.port,
-      },
-
+      formData: {},
       showAutocomplete: false,
     }
   },
   computed: {
+    wirelessList() {
+      const value = this.$store.device.list.reduce((arr, item) => {
+        if (item.wifi) {
+          const [host, port] = item.id.split(':')
+          if (host && port) {
+            arr.push({
+              id: item.id,
+              host,
+              port,
+            })
+          }
+        }
+
+        return arr
+      }, [])
+
+      return value
+    },
     fullHost: {
       get() {
         if (!this.formData.host) {
@@ -116,6 +124,20 @@ export default {
       },
     },
   },
+  watch: {
+    wirelessList: {
+      handler(val) {
+        const lastIndex = val.length - 1
+        const lastWireless = val[lastIndex] || {}
+
+        this.formData = {
+          host: lastWireless.host,
+          port: lastWireless.port,
+        }
+      },
+      immediate: true,
+    },
+  },
   async created() {
     const autoConnect = this.$store.preference.data.autoConnect
     if (autoConnect) {
@@ -156,7 +178,7 @@ export default {
     },
     handleRemove(info) {
       const index = this.wirelessList.findIndex(
-        item => info.host === item.host && item.port === info.port,
+        item => info.id === item.id,
       )
 
       if (index === -1) {
@@ -165,8 +187,6 @@ export default {
 
       this.wirelessList.splice(index, 1)
 
-      this.$appStore.set('history.wireless', this.$toRaw(this.wirelessList))
-
       this.reRenderAutocomplete()
     },
 
@@ -243,8 +263,6 @@ export default {
         await sleep()
 
         this.$message.success(this.$t('device.wireless.connect.success'))
-
-        this.handleSave(params)
       }
       catch (error) {
         if (this.loading) {
@@ -256,22 +274,6 @@ export default {
 
       this.loading = false
     },
-    handleSave(params) {
-      const someValue = this.wirelessList.some(
-        item => item.host === params.host,
-      )
-
-      if (someValue) {
-        return false
-      }
-
-      this.wirelessList.push({
-        host: params.host,
-        port: params.port,
-      })
-
-      this.$appStore.set('history.wireless', this.$toRaw(this.wirelessList))
-    },
     async handleError(message) {
       try {
         await this.$confirm(

src/pages/device/index.vue

@@ -29,35 +29,46 @@
           sortable
           show-overflow-tooltip
           align="left"
-          min-width="200"
+          min-width="150"
         >
           <template #default="{ row }">
-            <div class="flex items-center">
+            <div class="flex items-center space-x-2">
               <DevicePopover :device="row" />
 
               <span class="">
                 {{ 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="">
                 WIFI
               </el-tag>
             </div>
           </template>
         </el-table-column>
 
+        <el-table-column
+          :label="$t('device.remark')"
+          prop="remark"
+          sortable
+          show-overflow-tooltip
+          align="left"
+          min-width="200"
+          :filters="remarkFilters"
+          :filter-method="filterMethod"
+        >
+          <template #default="{ row }">
+            <Remark :device="row" class="" />
+          </template>
+        </el-table-column>
+
         <el-table-column
           v-slot="{ row }"
           :label="$t('device.status')"
           prop="status"
           align="left"
           sortable
           show-overflow-tooltip
-          width="150"
+          width="100"
           :filters="statusFilters"
           :filter-method="filterMethod"
         >
@@ -80,16 +91,25 @@
           v-slot="{ row, $index }"
           :label="$t('device.control.name')"
           align="left"
-          width="160"
+          width="150"
         >
           <MirrorAction
+            v-if="['device', 'unauthorized'].includes(row.status)"
             :ref="(value) => getMirrorActionRefs(value, $index)"
             v-bind="{ row, toggleRowExpansion, handleReset }"
           />
 
-          <MoreDropdown v-bind="{ row, toggleRowExpansion, handleReset }" />
+          <MoreDropdown v-if="['device'].includes(row.status)" v-bind="{ row, toggleRowExpansion, handleReset }" />
+
+          <WirelessAction v-if="['device', 'unauthorized'].includes(row.status)" v-bind="{ row, handleConnect, handleRefresh }" />
 
-          <WirelessAction v-bind="{ row, handleConnect, handleRefresh }" />
+          <ConnectAction
+            v-if="['offline'].includes(row.status) && row.wifi"
+            v-bind="{
+              device: row,
+              handleConnect,
+            }"
+          />
         </el-table-column>
         <el-table-column type="expand">
           <template #header>
@@ -134,6 +154,7 @@ import MirrorAction from './components/MirrorAction/index.vue'
 import MoreDropdown from './components/MoreDropdown/index.vue'
 import Remark from './components/Remark/index.vue'
 import WirelessAction from './components/WirelessAction/index.vue'
+import ConnectAction from './components/ConnectAction/index.vue'
 
 import WirelessGroup from './components/WirelessGroup/index.vue'
 
@@ -152,6 +173,7 @@ export default {
     MirrorAction,
     MoreDropdown,
     WirelessAction,
+    ConnectAction,
     BatchActions,
     DevicePopover,
   },
@@ -173,6 +195,14 @@ export default {
         value: item.value,
       }))
 
+      return value
+    },
+    remarkFilters() {
+      const value = this.deviceList.filter(item => !!item.remark).map(item => ({
+        text: item.remark,
+        value: item.remark,
+      }))
+
       return value
     },
   },

src/store/device/helpers/index.js

@@ -42,7 +42,6 @@ export async function getCurrentDevices() {
     id: device.id,
     status: device.type,
     name: getDeviceName(device),
-    unauthorized: device.type === 'unauthorized',
     wifi: isIPWithPort(device.id),
     remark: getRemark(device.id),
   }))
@@ -71,7 +70,7 @@ export function mergeDevices(historyDevices, currentDevices) {
  */
 export function saveDevicesToStore(devices) {
   const cleanedDevices = devices.map(device =>
-    omit(device, ['status', 'unauthorized']),
+    omit(device, ['status']),
   )
   window.appStore.set('device', keyBy(cleanedDevices, 'id'))
 }