perf: ♻️ Support delete historical connection

README-CN.md

@@ -309,8 +309,8 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 > 如果该项目帮到你的话，可以请我喝杯咖啡，让我更有精神完善该项目 😛
 
 <div style="display:flex;">
-  <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79dcbc40246743e2b6870419e88e0392~tplv-k3u1fbpfcp-watermark.image?" alt="viarotel-wepay" style="width: 30%;">
-  <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5e69b83dd746deade95afd4a6864ec~tplv-k3u1fbpfcp-watermark.image?" alt="viarotel-alipay" style="width: 30%;">
+  <img src="./screenshots/zh-cn/viarotel-wepay.jpg" alt="viarotel-wepay" style="width: 30%;">
+  <img src="./screenshots/zh-cn/viarotel-alipay.jpg" alt="viarotel-alipay" style="width: 30%;">
   <a href="https://www.paypal.com/paypalme/viarotel" target="_blank" rel="noopener noreferrer">
     <img src="./screenshots/en-us/viarotel-paypal.png" alt="viarotel-paypal" style="width: 30%;">
   </a>

README.md

@@ -305,8 +305,8 @@ This project would not be possible without the following open source projects:
 > If this project has helped you, you can buy me a coffee to keep me energized and improving the project! 😛
 
 <div style="display:flex;">
-  <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79dcbc40246743e2b6870419e88e0392~tplv-k3u1fbpfcp-watermark.image?" alt="viarotel-wepay" style="width: 30%;">
-  <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5e69b83dd746deade95afd4a6864ec~tplv-k3u1fbpfcp-watermark.image?" alt="viarotel-alipay" style="width: 30%;">
+  <img src="./screenshots/zh-cn/viarotel-wepay.jpg" alt="viarotel-wepay" style="width: 30%;">
+  <img src="./screenshots/zh-cn/viarotel-alipay.jpg" alt="viarotel-alipay" style="width: 30%;">
   <a href="https://www.paypal.com/paypalme/viarotel" target="_blank" rel="noopener noreferrer">
     <img src="./screenshots/en-us/viarotel-paypal.png" alt="viarotel-paypal" style="width: 30%;">
   </a>

src/components/Device/components/Wireless/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="flex items-center flex-none space-x-2">
     <el-autocomplete
+      ref="elAutocompleteRef"
       v-model="formData.host"
       placeholder="192.168.0.1"
       clearable
@@ -16,17 +17,25 @@
       <template #default="{ item }">
         <div
           v-if="item.batch"
-          text
-          type="primary"
           class="text-primary-500"
           @click.stop="handleBatch"
         >
           {{ item.batch }}
         </div>
 
-        <template v-else>
-          {{ item.host }}
-        </template>
+        <div v-else class="flex items-center">
+          <div class="flex-1 w-0">
+            {{ item.host }}
+          </div>
+          <div
+            class="flex-none leading-none"
+            @click.prevent.stop="handleRemove(item)"
+          >
+            <el-icon class="hover:text-primary-500 !active:text-primary-700">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
       </template>
     </el-autocomplete>
 
@@ -59,6 +68,7 @@
 
 <script>
 import PairDialog from './PairDialog/index.vue'
+import { sleep } from '@/utils'
 
 export default {
   components: {
@@ -124,6 +134,19 @@ export default {
     onPairSuccess() {
       this.handleConnect()
     },
+    handleRemove(info) {
+      const index = this.wirelessList.findIndex(
+        item => info.host === item.host && item.port === info.port,
+      )
+
+      if (index === -1) {
+        return false
+      }
+
+      this.wirelessList.splice(index, 1)
+
+      this.$appStore.set('history.wireless', this.$toRaw(this.wirelessList))
+    },
     async handleBatch() {
       if (this.loading) {
         return false