refactor(json-editor): 优化键值对添加逻辑及布局调整

- 移除自动生成唯一键名逻辑，新增键值对时默认空键名
- 调整键输入框和值输入框的栅格宽度，提升编辑界面布局
- 优化整体视觉呈现，使键和值输入区域更合理分布

feat(channels): 添加模型映射解析及反向映射显示功能

- 新增解析模型映射配置的函数，安全处理JSON解析错误
- 实现反向映射创建，将映射值对应回键名，用于显示
- 在模型选项中优先显示映射后的名称，原名作为提示
- 依赖列表新增对模型映射配置的监听，确保更新及时

Author: AAEE86

web/src/components/common/ui/JSONEditor.jsx

@@ -247,16 +247,9 @@ const JSONEditor = ({
   // 添加键值对
   const addKeyValue = useCallback(() => {
     const newPairs = [...keyValuePairs];
-    const existingKeys = newPairs.map(p => p.key);
-    let counter = 1;
-    let newKey = `field_${counter}`;
-    while (existingKeys.includes(newKey)) {
-      counter += 1;
-      newKey = `field_${counter}`;
-    }
     newPairs.push({
       id: generateUniqueId(),
-      key: newKey,
+      key: '',
       value: ''
     });
     handleVisualChange(newPairs);
@@ -408,7 +401,7 @@ const JSONEditor = ({
 
           return (
             <Row key={pair.id} gutter={8} align="middle">
-              <Col span={6}>
+              <Col span={12}>
                 <div className="relative">
                   <Input
                     placeholder={t('键名')}
@@ -435,7 +428,7 @@ const JSONEditor = ({
                   )}
                 </div>
               </Col>
-              <Col span={16}>
+              <Col span={10}>
                 {renderValueInput(pair.id, pair.value)}
               </Col>
               <Col span={2}>

web/src/components/table/channels/modals/EditChannelModal.jsx

@@ -500,6 +500,28 @@ const EditChannelModal = (props) => {
     }
   };
 
+  // 解析模型映射配置并创建反向映射
+  const parseModelMapping = (mappingStr) => {
+    if (!mappingStr || mappingStr.trim() === '') return {};
+    try {
+      return JSON.parse(mappingStr);
+    } catch (error) {
+      console.warn('Failed to parse model mapping:', error);
+      return {};
+    }
+  };
+
+  // 根据模型映射创建反向映射 (值 -> 键)
+  const createReverseMapping = (mapping) => {
+    const reverseMap = {};
+    for (const [key, value] of Object.entries(mapping)) {
+      if (typeof value === 'string' && value.trim() !== '') {
+        reverseMap[value] = key;
+      }
+    }
+    return reverseMap;
+  };
+
   useEffect(() => {
     const modelMap = new Map();
 
@@ -521,29 +543,39 @@ const EditChannelModal = (props) => {
       }
     });
 
+    // 解析模型映射配置
+    const modelMapping = parseModelMapping(inputs.model_mapping);
+    const reverseMapping = createReverseMapping(modelMapping);
+
     const categories = getModelCategories(t);
     const optionsWithIcon = Array.from(modelMap.values()).map((opt) => {
-      const modelName = opt.value;
+      const originalModelName = opt.value;
+      // 如果存在反向映射，使用映射后的名称作为显示名称
+      const displayModelName = reverseMapping[originalModelName] || originalModelName;
+      
       let icon = null;
       for (const [key, category] of Object.entries(categories)) {
-        if (key !== 'all' && category.filter({ model_name: modelName })) {
+        if (key !== 'all' && category.filter({ model_name: originalModelName })) {
           icon = category.icon;
           break;
         }
       }
+      
       return {
         ...opt,
         label: (
           <span className="flex items-center gap-1">
             {icon}
-            {modelName}
+            <span title={originalModelName !== displayModelName ? `原始名称: ${originalModelName}` : undefined}>
+              {displayModelName}
+            </span>
           </span>
         ),
       };
     });
 
     setModelOptions(optionsWithIcon);
-  }, [originModelOptions, inputs.models, t]);
+  }, [originModelOptions, inputs.models, inputs.model_mapping, t]);
 
   useEffect(() => {
     fetchModels().then();