From 780e3b9abc199800b0cdb10c5d48d591cf91cf29 Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Wed, 27 Mar 2024 19:02:30 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E2=99=BB=EF=B8=8F=20Optimize=20delete?=
 =?UTF-8?q?=20history=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Device/components/Wireless/index.vue      | 84 +++++++++++--------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/components/Device/components/Wireless/index.vue b/src/components/Device/components/Wireless/index.vue
index 784fece..f20ef3a 100644
--- a/src/components/Device/components/Wireless/index.vue
+++ b/src/components/Device/components/Wireless/index.vue
@@ -1,43 +1,46 @@
 <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
-      :fetch-suggestions="fetchSuggestions"
-      class="!w-86 flex-none"
-      value-key="host"
-      @select="onSelect"
-    >
-      <template #prepend>
-        {{ $t('device.wireless.name') }}
-      </template>
+    <div class="w-86 flex-none">
+      <el-autocomplete
+        v-if="!showAutocomplete"
+        ref="elAutocompleteRef"
+        v-model="formData.host"
+        placeholder="192.168.0.1"
+        clearable
+        :fetch-suggestions="fetchSuggestions"
+        class="!w-full"
+        value-key="host"
+        @select="onSelect"
+      >
+        <template #prepend>
+          {{ $t('device.wireless.name') }}
+        </template>
 
-      <template #default="{ item }">
-        <div
-          v-if="item.batch"
-          class="text-primary-500"
-          @click.stop="handleBatch"
-        >
-          {{ item.batch }}
-        </div>
-
-        <div v-else class="flex items-center">
-          <div class="flex-1 w-0">
-            {{ item.host }}
-          </div>
+        <template #default="{ item }">
           <div
-            class="flex-none leading-none"
-            @click.prevent.stop="handleRemove(item)"
+            v-if="item.batch"
+            class="text-primary-500"
+            @click.stop="handleBatch"
           >
-            <el-icon class="hover:text-primary-500 !active:text-primary-700">
-              <Close />
-            </el-icon>
+            {{ item.batch }}
           </div>
-        </div>
-      </template>
-    </el-autocomplete>
+
+          <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>
+    </div>
 
     <div class="text-gray-500 text-sm">
       :
@@ -93,6 +96,8 @@ export default {
         host: lastWireless.host,
         port: lastWireless.port,
       },
+
+      showAutocomplete: false,
     }
   },
   async created() {
@@ -145,7 +150,18 @@ export default {
       this.wirelessList.splice(index, 1)
 
       this.$appStore.set('history.wireless', this.$toRaw(this.wirelessList))
+
+      this.reRenderAutocomplete()
     },
+
+    async reRenderAutocomplete() {
+      this.showAutocomplete = true
+
+      await this.$nextTick()
+
+      this.showAutocomplete = false
+    },
+
     async handleBatch() {
       if (this.loading) {
         return false