refactor: optimize header override copy and JSON example dialog

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

@@ -163,7 +163,7 @@ const MODE_DESCRIPTIONS = {
   prune_objects: '按条件清理对象中的子项',
   pass_headers: '把指定请求头透传到上游请求',
   sync_fields: '在一个字段有值、另一个缺失时自动补齐',
-  set_header: '设置运行期请求头（支持整值覆盖，或用 JSON 映射按逗号 token 替换/删除/追加/白名单保留）',
+  set_header: '设置运行期请求头：可直接覆盖整条值，也可对逗号分隔的 token 做删除、替换、追加或白名单保留',
   delete_header: '删除运行期请求头',
   copy_header: '复制请求头',
   move_header: '移动请求头',
@@ -230,23 +230,29 @@ const getModeValueLabel = (mode) => {
   return '值（支持 JSON 或普通文本）';
 };
 
+const HEADER_VALUE_JSONC_EXAMPLE = `{
+  // 置空：删除 Bedrock 不支持的 beta特性
+  "files-api-2025-04-14": null,
+
+  // 替换：把旧特性改成兼容特性
+  "advanced-tool-use-2025-11-20": "tool-search-tool-2025-10-19",
+
+  // 追加：在末尾补一个需要的特性
+  "$append": ["context-1m-2025-08-07"]
+}`;
+
 const getModeValuePlaceholder = (mode) => {
   if (mode === 'set_header') {
     return [
-      'String example:',
+      '纯字符串（整条覆盖）：',
       'Bearer sk-xxx',
       '',
-      'JSON map example:',
+      '或使用 JSON 规则：',
-      '{"advanced-tool-use-2025-11-20": null, "computer-use-2025-01-24": "computer-use-2025-01-24"}',
+      '{',
-      '',
+      '  "files-api-2025-04-14": null,',
-      'JSON map wildcard:',
+      '  "advanced-tool-use-2025-11-20": "tool-search-tool-2025-10-19",',
-      '{"*": null, "computer-use-2025-11-24": "computer-use-2025-11-24"}',
+      '  "$append": ["context-1m-2025-08-07"]',
-      '',
+      '}',
-      'JSON append example:',
-      '{"$append": ["context-1m-2025-08-07"]}',
-      '',
-      'JSON strict keep example:',
-      '{"computer-use-2025-01-24": "computer-use-2025-01-24", "$append": ["context-1m-2025-08-07"], "$keep_only_declared": true}',
     ].join('\n');
   }
   if (mode === 'pass_headers') return 'Authorization, X-Request-Id';
@@ -264,11 +270,6 @@ const getModeValuePlaceholder = (mode) => {
   return '0.7';
 };
 
-const getModeValueHelp = (mode) => {
-  if (mode !== 'set_header') return '';
-  return '字符串：整条请求头直接覆盖。JSON 映射：按逗号分隔 token 逐项处理，null 表示删除，string/array 表示替换，* 表示兜底规则，$append 可在末尾追加新 token，$keep_only_declared=true 时会丢弃未声明 token。';
-};
-
 const SYNC_TARGET_TYPE_OPTIONS = [
   { label: '请求体字段', value: 'json' },
   { label: '请求头字段', value: 'header' },
@@ -1080,6 +1081,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
   const [dragOverPosition, setDragOverPosition] = useState('before');
   const [templateGroupKey, setTemplateGroupKey] = useState('basic');
   const [templatePresetKey, setTemplatePresetKey] = useState('operations_default');
+  const [headerValueExampleVisible, setHeaderValueExampleVisible] = useState(false);
   const [fieldGuideVisible, setFieldGuideVisible] = useState(false);
   const [fieldGuideTarget, setFieldGuideTarget] = useState('path');
   const [fieldGuideKeyword, setFieldGuideKeyword] = useState('');
@@ -1106,6 +1108,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
       setTemplateGroupKey('basic');
       setTemplatePresetKey('operations_default');
     }
+    setHeaderValueExampleVisible(false);
     setFieldGuideVisible(false);
     setFieldGuideTarget('path');
     setFieldGuideKeyword('');
@@ -2828,15 +2831,35 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                       {t(getModeValueLabel(mode))}
                                     </Text>
                                     {mode === 'set_header' ? (
-                                      <Button
+                                      <Space spacing={6}>
-                                        size='small'
+                                        <Button
-                                        type='tertiary'
+                                          size='small'
-                                        onClick={formatSelectedOperationValueAsJson}
+                                          type='tertiary'
-                                      >
+                                          onClick={() =>
-                                        {t('格式化 JSON')}
+                                            setHeaderValueExampleVisible(true)
-                                      </Button>
+                                          }
+                                        >
+                                          {t('查看 JSON 示例')}
+                                        </Button>
+                                        <Button
+                                          size='small'
+                                          type='tertiary'
+                                          onClick={formatSelectedOperationValueAsJson}
+                                        >
+                                          {t('格式化 JSON')}
+                                        </Button>
+                                      </Space>
                                     ) : null}
                                   </div>
+                                  {mode === 'set_header' ? (
+                                    <Text
+                                      type='tertiary'
+                                      size='small'
+                                      className='mt-1 mb-2 block'
+                                    >
+                                      {t('纯字符串会直接覆盖整条请求头，或者点击“查看 JSON 示例”按 token 规则处理。')}
+                                    </Text>
+                                  ) : null}
                                   <TextArea
                                     value={selectedOperation.value_text}
                                     autosize={{ minRows: 1, maxRows: 4 }}
@@ -2847,11 +2870,6 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                       })
                                     }
                                   />
-                                  {getModeValueHelp(mode) ? (
-                                    <Text type='tertiary' size='small'>
-                                      {t(getModeValueHelp(mode))}
-                                    </Text>
-                                  ) : null}
                                 </div>
                               )
                             ) : null}
@@ -3307,6 +3325,27 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
       </Space>
       </Modal>
 
+      <Modal
+        title={t('anthropic-beta JSON 示例')}
+        visible={headerValueExampleVisible}
+        width={760}
+        footer={null}
+        onCancel={() => setHeaderValueExampleVisible(false)}
+        bodyStyle={{ padding: 16, paddingBottom: 24 }}
+      >
+        <Space vertical align='start' spacing={12} style={{ width: '100%' }}>
+          <Text type='tertiary' size='small'>
+            {t('下面是带注释的示例，仅用于参考；实际保存时请删除注释。')}
+          </Text>
+          <TextArea
+            value={HEADER_VALUE_JSONC_EXAMPLE}
+            readOnly
+            autosize={{ minRows: 16, maxRows: 20 }}
+            style={{ marginBottom: 8 }}
+          />
+        </Space>
+      </Modal>
+
       <Modal
         title={null}
         visible={fieldGuideVisible}