From 837b670213f6b5614b3d2f0f0e53b266d89e48ce Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Sat, 5 Apr 2025 15:10:44 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(webui):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E8=A1=A8=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes: #1086
---
 .../src/components/shared/ListConfigItem.vue  | 52 +++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/shared/ListConfigItem.vue b/dashboard/src/components/shared/ListConfigItem.vue
index 9105b572..c166b249 100644
--- a/dashboard/src/components/shared/ListConfigItem.vue
+++ b/dashboard/src/components/shared/ListConfigItem.vue
@@ -3,12 +3,36 @@
     <v-list dense style="background-color: transparent;max-height: 300px; overflow-y: auto;">
       <v-list-item v-for="(item, index) in items" :key="index">
         <v-list-item-content style="display: flex; justify-content: space-between;">
-          <v-list-item-title>
+          <v-list-item-title v-if="editIndex !== index">
             <v-chip size="small" label color="primary">{{ item }}</v-chip>
           </v-list-item-title>
-          <v-btn @click="removeItem(index)" variant="plain">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
+          <v-text-field 
+            v-else
+            v-model="editItem" 
+            dense 
+            hide-details 
+            variant="outlined" 
+            density="compact"
+            @keyup.enter="saveEdit" 
+            @keyup.esc="cancelEdit"
+            autofocus
+          ></v-text-field>
+          <div v-if="editIndex !== index">
+            <v-btn @click="startEdit(index, item)" variant="plain" class="edit-btn" icon size="small">
+              <v-icon>mdi-pencil</v-icon>
+            </v-btn>
+            <v-btn @click="removeItem(index)" variant="plain" icon size="small">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </div>
+          <div v-else>
+            <v-btn @click="saveEdit" variant="plain" color="success" icon size="small">
+              <v-icon>mdi-check</v-icon>
+            </v-btn>
+            <v-btn @click="cancelEdit" variant="plain" color="error" icon size="small">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </div>
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -41,6 +65,8 @@ export default {
     return {
       newItem: '',
       items: this.value,
+      editIndex: -1,
+      editItem: '',
     };
   },
   watch: {
@@ -58,6 +84,20 @@ export default {
     removeItem(index) {
       this.items.splice(index, 1);
     },
+    startEdit(index, item) {
+      this.editIndex = index;
+      this.editItem = item;
+    },
+    saveEdit() {
+      if (this.editItem.trim() !== '') {
+        this.items[this.editIndex] = this.editItem.trim();
+        this.cancelEdit();
+      }
+    },
+    cancelEdit() {
+      this.editIndex = -1;
+      this.editItem = '';
+    },
   },
 };
 </script>
@@ -82,4 +122,8 @@ export default {
 .v-btn {
   margin-left: 8px;
 }
+
+.edit-btn {
+  margin-right: -8px;
+}
 </style>
\ No newline at end of file