From ac44308fbd7c9bb5e0a0e8e77f3962c76de16c1a Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Sat, 7 Mar 2026 14:19:33 +0800
Subject: [PATCH] fix(config): stabilize string list item keys

---
 src/components/config/VisualConfigEditor.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx
index 34519af..bdb0632 100644
--- a/src/components/config/VisualConfigEditor.tsx
+++ b/src/components/config/VisualConfigEditor.tsx
@@ -289,16 +289,28 @@ function StringListEditor({
 }) {
   const { t } = useTranslation();
   const items = value.length ? value : [];
+  const [itemIds, setItemIds] = useState(() => items.map(() => makeClientId()));
+  const renderItemIds = useMemo(() => {
+    if (itemIds.length === items.length) return itemIds;
+    if (itemIds.length > items.length) return itemIds.slice(0, items.length);
+    return [...itemIds, ...Array.from({ length: items.length - itemIds.length }, () => makeClientId())];
+  }, [itemIds, items.length]);
 
   const updateItem = (index: number, nextValue: string) =>
     onChange(items.map((item, i) => (i === index ? nextValue : item)));
-  const addItem = () => onChange([...items, '']);
-  const removeItem = (index: number) => onChange(items.filter((_, i) => i !== index));
+  const addItem = () => {
+    setItemIds([...renderItemIds, makeClientId()]);
+    onChange([...items, '']);
+  };
+  const removeItem = (index: number) => {
+    setItemIds(renderItemIds.filter((_, i) => i !== index));
+    onChange(items.filter((_, i) => i !== index));
+  };
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       {items.map((item, index) => (
-        <div key={index} style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+        <div key={renderItemIds[index] ?? `item-${index}`} style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
           <input
             className="input"
             placeholder={placeholder}