Procházet zdrojové kódy

🎨 feat(EditChannel): improve model selection UX, clipboard feedback & rounded styling (#1290)

* Added a dedicated effect to merge origin and selected models, ensuring selected items always remain in the dropdown list.
* Enhanced “Copy all models” button:
  * Shows info message when list is empty.
  * Displays success / error notification based on copy result.
* Unified UI look-and-feel by applying `!rounded-lg` class to inputs, selects, banners and buttons.
* i18n: added English translations for new prompts
  - "No models to copy"
  - "Model list copied to clipboard"
  - "Copy failed"
t0ng7u před 8 měsíci
rodič
revize
1ab75b8a92
2 změnil soubory, kde provedl 35 přidání a 23 odebrání
  1. 4 1
      web/src/i18n/locales/en.json
  2. 31 22
      web/src/pages/Channel/EditChannel.js

+ 4 - 1
web/src/i18n/locales/en.json

@@ -1734,5 +1734,8 @@
   "该模型存在固定价格与倍率计费方式冲突,请确认选择": "The model has a fixed price and ratio billing method conflict, please confirm the selection",
   "当前计费": "Current billing",
   "修改为": "Modify to",
-  "状态筛选": "Status filter"
+  "状态筛选": "Status filter",
+  "没有模型可以复制": "No models to copy",
+  "模型列表已复制到剪贴板": "Model list copied to clipboard",
+  "复制失败": "Copy failed"
 }

+ 31 - 22
web/src/pages/Channel/EditChannel.js

@@ -300,27 +300,27 @@ const EditChannel = (props) => {
     }
   };
 
-useEffect(() => {
-  // 使用 Map 来避免重复,以 value 为键
-  const modelMap = new Map();
-  
-  // 先添加原始模型选项
-  originModelOptions.forEach(option => {
-    modelMap.set(option.value, option);
-  });
-  
-  // 再添加当前选中的模型(如果不存在)
-  inputs.models.forEach(model => {
-    if (!modelMap.has(model)) {
-      modelMap.set(model, {
-        label: model,
-        value: model,
-      });
-    }
-  });
-  
-  setModelOptions(Array.from(modelMap.values()));
-}, [originModelOptions, inputs.models]);
+  useEffect(() => {
+    // 使用 Map 来避免重复,以 value 为键
+    const modelMap = new Map();
+
+    // 先添加原始模型选项
+    originModelOptions.forEach(option => {
+      modelMap.set(option.value, option);
+    });
+
+    // 再添加当前选中的模型(如果不存在)
+    inputs.models.forEach(model => {
+      if (!modelMap.has(model)) {
+        modelMap.set(model, {
+          label: model,
+          value: model,
+        });
+      }
+    });
+
+    setModelOptions(Array.from(modelMap.values()));
+  }, [originModelOptions, inputs.models]);
 
   useEffect(() => {
     fetchModels().then();
@@ -835,7 +835,16 @@ useEffect(() => {
                   <Button
                     type='tertiary'
                     onClick={() => {
-                      copy(inputs.models.join(','));
+                      if (inputs.models.length === 0) {
+                        showInfo(t('没有模型可以复制'));
+                        return;
+                      }
+                      try {
+                        copy(inputs.models.join(','));
+                        showSuccess(t('模型列表已复制到剪贴板'));
+                      } catch (error) {
+                        showError(t('复制失败'));
+                      }
                     }}
                     size="large"
                     className="!rounded-lg"