fix: chat2response setting ui (#2643)

* fix: setting ui

* fix: rm global.chat_completions_to_responses_policy

* fix: rm global.chat_completions_to_responses_policy

web/src/pages/Setting/Model/SettingGlobalModel.jsx

@@ -18,7 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
 */
 */
 
 
 import React, { useEffect, useState, useRef } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, Banner, Tag } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Col,
+  Form,
+  Row,
+  Spin,
+  Banner,
+  Tag,
+  Divider,
+} from '@douyinfe/semi-ui';
 import {
 import {
   compareObjects,
   compareObjects,
   API,
   API,
@@ -71,6 +80,18 @@ export default function SettingGlobalModel(props) {
   const [inputs, setInputs] = useState(defaultGlobalSettingInputs);
   const [inputs, setInputs] = useState(defaultGlobalSettingInputs);
   const refForm = useRef();
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(defaultGlobalSettingInputs);
   const [inputsRow, setInputsRow] = useState(defaultGlobalSettingInputs);
+  const chatCompletionsToResponsesPolicyKey =
+    'global.chat_completions_to_responses_policy';
+
+  const setChatCompletionsToResponsesPolicyValue = (value) => {
+    setInputs((prev) => ({
+      ...prev,
+      [chatCompletionsToResponsesPolicyKey]: value,
+    }));
+    if (refForm.current) {
+      refForm.current.setValue(chatCompletionsToResponsesPolicyKey, value);
+    }
+  };
 
 
   const normalizeValueBeforeSave = (key, value) => {
   const normalizeValueBeforeSave = (key, value) => {
     if (key === 'global.thinking_model_blacklist') {
     if (key === 'global.thinking_model_blacklist') {
@@ -216,19 +237,29 @@ export default function SettingGlobalModel(props) {
               </Col>
               </Col>
             </Row>
             </Row>
 
 
-            <Form.Section text={t('ChatCompletions→Responses 兼容配置')}>
+            <Form.Section
+              text={
+                <span
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  {t('ChatCompletions→Responses 兼容配置')}
+                  <Tag color='orange' size='small'>
+                    测试版
+                  </Tag>
+                </span>
+              }
+            >
               <Row style={{ marginTop: 10 }}>
               <Row style={{ marginTop: 10 }}>
                 <Col span={24}>
                 <Col span={24}>
                   <Banner
                   <Banner
                     type='warning'
                     type='warning'
-                    title={
-                      <span>
-                        {t('ChatCompletions→Responses 兼容配置')}{' '}
-                        <Tag color='red' size='small'>
-                          Alpha
-                        </Tag>
-                      </span>
-                    }
                     description={t(
                     description={t(
                       '提示：该功能为测试版，未来配置结构与功能行为可能发生变更，请勿在生产环境使用。',
                       '提示：该功能为测试版，未来配置结构与功能行为可能发生变更，请勿在生产环境使用。',
                     )}
                     )}
@@ -238,6 +269,40 @@ export default function SettingGlobalModel(props) {
 
 
               <Row style={{ marginTop: 10 }}>
               <Row style={{ marginTop: 10 }}>
                 <Col span={24}>
                 <Col span={24}>
+	                  <Form.TextArea
+	                    label={t('参数配置')}
+	                    field={chatCompletionsToResponsesPolicyKey}
+	                    placeholder={
+	                      t('例如（指定渠道）：') +
+	                      '\n' +
+                      chatCompletionsToResponsesPolicyExample +
+                      '\n\n' +
+                      t('例如（全渠道）：') +
+                      '\n' +
+                      chatCompletionsToResponsesPolicyAllChannelsExample
+                    }
+                    rows={8}
+                    rules={[
+                      {
+                        validator: (rule, value) => {
+                          if (!value || value.trim() === '') return true;
+                          return verifyJSON(value);
+                        },
+                        message: t('不是合法的 JSON 字符串'),
+                      },
+                    ]}
+                    onChange={(value) =>
+                      setInputs((prev) => ({
+                        ...prev,
+                        [chatCompletionsToResponsesPolicyKey]: value,
+                      }))
+                    }
+                  />
+                </Col>
+              </Row>
+
+              <Row style={{ marginTop: 10, marginBottom: 16 }}>
+                <Col span={24}>
                   <div
                   <div
                     style={{
                     style={{
                       display: 'flex',
                       display: 'flex',
@@ -250,11 +315,9 @@ export default function SettingGlobalModel(props) {
                       type='secondary'
                       type='secondary'
                       size='small'
                       size='small'
                       onClick={() =>
                       onClick={() =>
-                        setInputs({
-                          ...inputs,
-                          'global.chat_completions_to_responses_policy':
+                        setChatCompletionsToResponsesPolicyValue(
                           chatCompletionsToResponsesPolicyExample,
                           chatCompletionsToResponsesPolicyExample,
-                        })
+                        )
                       }
                       }
                     >
                     >
                       {t('填充模板（指定渠道）')}
                       {t('填充模板（指定渠道）')}
@@ -263,11 +326,9 @@ export default function SettingGlobalModel(props) {
                       type='secondary'
                       type='secondary'
                       size='small'
                       size='small'
                       onClick={() =>
                       onClick={() =>
-                        setInputs({
-                          ...inputs,
-                          'global.chat_completions_to_responses_policy':
+                        setChatCompletionsToResponsesPolicyValue(
                           chatCompletionsToResponsesPolicyAllChannelsExample,
                           chatCompletionsToResponsesPolicyAllChannelsExample,
-                        })
+                        )
                       }
                       }
                     >
                     >
                       {t('填充模板（全渠道）')}
                       {t('填充模板（全渠道）')}
@@ -276,8 +337,7 @@ export default function SettingGlobalModel(props) {
                       type='secondary'
                       type='secondary'
                       size='small'
                       size='small'
                       onClick={() => {
                       onClick={() => {
-                        const raw =
-                          inputs['global.chat_completions_to_responses_policy'];
+                        const raw = inputs[chatCompletionsToResponsesPolicyKey];
                         if (!raw || String(raw).trim() === '') return;
                         if (!raw || String(raw).trim() === '') return;
                         try {
                         try {
                           const formatted = JSON.stringify(
                           const formatted = JSON.stringify(
@@ -285,11 +345,7 @@ export default function SettingGlobalModel(props) {
                             null,
                             null,
                             2,
                             2,
                           );
                           );
-                          setInputs({
-                            ...inputs,
-                            'global.chat_completions_to_responses_policy':
-                              formatted,
-                          });
+                          setChatCompletionsToResponsesPolicyValue(formatted);
                         } catch (error) {
                         } catch (error) {
                           showError(t('不是合法的 JSON 字符串'));
                           showError(t('不是合法的 JSON 字符串'));
                         }
                         }
@@ -300,46 +356,15 @@ export default function SettingGlobalModel(props) {
                   </div>
                   </div>
                 </Col>
                 </Col>
               </Row>
               </Row>
-
-              <Row style={{ marginTop: 10 }}>
-                <Col span={24}>
-                  <Form.TextArea
-                    label={t('配置 JSON')}
-                    field={'global.chat_completions_to_responses_policy'}
-                    placeholder={
-                      t('例如（指定渠道）：') +
-                      '\n' +
-                      chatCompletionsToResponsesPolicyExample +
-                      '\n\n' +
-                      t('例如（全渠道）：') +
-                      '\n' +
-                      chatCompletionsToResponsesPolicyAllChannelsExample
-                    }
-                    rows={8}
-                    rules={[
-                      {
-                        validator: (rule, value) => {
-                          if (!value || value.trim() === '') return true;
-                          return verifyJSON(value);
-                        },
-                        message: t('不是合法的 JSON 字符串'),
-                      },
-                    ]}
-                    extraText={t(
-                      '当客户端调用 /v1/chat/completions 且 model 命中 model_patterns 时，自动改走上游 /v1/responses，并把响应转换回 /v1/chat/completions 结构',
-                    )}
-                    onChange={(value) =>
-                      setInputs({
-                        ...inputs,
-                        'global.chat_completions_to_responses_policy': value,
-                      })
-                    }
-                  />
-                </Col>
-              </Row>
             </Form.Section>
             </Form.Section>
 
 
-            <Form.Section text={t('连接保活设置')}>
+            <Form.Section
+              text={
+                <span style={{ fontSize: 14, fontWeight: 600 }}>
+                  {t('连接保活设置')}
+                </span>
+              }
+            >
               <Row style={{ marginTop: 10 }}>
               <Row style={{ marginTop: 10 }}>
                 <Col span={24}>
                 <Col span={24}>
                   <Banner
                   <Banner