chore: update default theme style

2025-11-04 15:53:42 +08:00 · 2025-01-31 23:08:07 +08:00
parent 38a42bb265
commit f2c7c424e9
2 changed files with 294 additions and 214 deletions
--- a/web/default/src/pages/Channel/EditChannel.js
+++ b/web/default/src/pages/Channel/EditChannel.js
@@ -1,13 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Input, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Input,
+  Message,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { API, copy, getChannelModels, showError, showInfo, showSuccess, verifyJSON } from '../../helpers';
+import {
+  API,
+  copy,
+  getChannelModels,
+  showError,
+  showInfo,
+  showSuccess,
+  verifyJSON,
+} from '../../helpers';
 import { CHANNEL_OPTIONS } from '../../constants';

 const MODEL_MAPPING_EXAMPLE = {
  'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
  'gpt-4-0314': 'gpt-4',
-  'gpt-4-32k-0314': 'gpt-4-32k'
+  'gpt-4-32k-0314': 'gpt-4-32k',
 };

 function type2secretPrompt(type) {
@@ -45,7 +61,7 @@ const EditChannel = () => {
    model_mapping: '',
    system_prompt: '',
    models: [],
-    groups: ['default']
+    groups: ['default'],
  };
  const [batch, setBatch] = useState(false);
  const [inputs, setInputs] = useState(originInputs);
@@ -61,7 +77,7 @@ const EditChannel = () => {
    ak: '',
    user_id: '',
    vertex_ai_project_id: '',
-    vertex_ai_adc: ''
+    vertex_ai_adc: '',
  });
  const handleInputChange = (e, { name, value }) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -93,7 +109,11 @@ const EditChannel = () => {
        data.groups = data.group.split(',');
      }
      if (data.model_mapping !== '') {
-        data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
+        data.model_mapping = JSON.stringify(
+          JSON.parse(data.model_mapping),
+          null,
+          2
+        );
      }
      setInputs(data);
      if (data.config !== '') {
@@ -112,7 +132,7 @@ const EditChannel = () => {
      let localModelOptions = res.data.data.map((model) => ({
        key: model.id,
        text: model.id,
-        value: model.id
+        value: model.id,
      }));
      setOriginModelOptions(localModelOptions);
      setFullModels(res.data.data.map((model) => model.id));
@@ -124,11 +144,13 @@ const EditChannel = () => {
  const fetchGroups = async () => {
    try {
      let res = await API.get(`/api/group/`);
-      setGroupOptions(res.data.data.map((group) => ({
+      setGroupOptions(
+        res.data.data.map((group) => ({
          key: group,
          text: group,
-        value: group
-      })));
+          value: group,
+        }))
+      );
    } catch (error) {
      showError(error.message);
    }
@@ -141,7 +163,7 @@ const EditChannel = () => {
        localModelOptions.push({
          key: model,
          text: model,
-          value: model
+          value: model,
        });
      }
    });
@@ -163,7 +185,11 @@ const EditChannel = () => {
    if (inputs.key === '') {
      if (config.ak !== '' && config.sk !== '' && config.region !== '') {
        inputs.key = `${config.ak}|${config.sk}|${config.region}`;
-      } else if (config.region !== '' && config.vertex_ai_project_id !== '' && config.vertex_ai_adc !== '') {
+      } else if (
+        config.region !== '' &&
+        config.vertex_ai_project_id !== '' &&
+        config.vertex_ai_adc !== ''
+      ) {
        inputs.key = `${config.region}|${config.vertex_ai_project_id}|${config.vertex_ai_adc}`;
      }
    }
@@ -179,9 +205,12 @@ const EditChannel = () => {
      showInfo('模型映射必须是合法的 JSON 格式！');
      return;
    }
-    let localInputs = {...inputs};
+    let localInputs = { ...inputs };
    if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
-      localInputs.base_url = localInputs.base_url.slice(0, localInputs.base_url.length - 1);
+      localInputs.base_url = localInputs.base_url.slice(
+        0,
+        localInputs.base_url.length - 1
+      );
    }
    if (localInputs.type === 3 && localInputs.other === '') {
      localInputs.other = '2024-03-01-preview';
@@ -191,7 +220,10 @@ const EditChannel = () => {
    localInputs.group = localInputs.groups.join(',');
    localInputs.config = JSON.stringify(config);
    if (isEdit) {
-      res = await API.put(`/api/channel/`, { ...localInputs, id: parseInt(channelId) });
+      res = await API.put(`/api/channel/`, {
+        ...localInputs,
+        id: parseInt(channelId),
+      });
    } else {
      res = await API.post(`/api/channel/`, localInputs);
    }
@@ -217,9 +249,9 @@ const EditChannel = () => {
    localModelOptions.push({
      key: customModel,
      text: customModel,
-      value: customModel
+      value: customModel,
    });
-    setModelOptions(modelOptions => {
+    setModelOptions((modelOptions) => {
      return [...modelOptions, ...localModelOptions];
    });
    setCustomModel('');
@@ -227,10 +259,13 @@ const EditChannel = () => {
  };

  return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Header>
-        <Form autoComplete='new-password'>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新渠道信息' : '创建新的渠道'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
            <Form.Field>
              <Form.Select
                label='类型'
@@ -242,19 +277,27 @@ const EditChannel = () => {
                onChange={handleInputChange}
              />
            </Form.Field>
-          {
-            inputs.type === 3 && (
+            {inputs.type === 3 && (
              <>
                <Message>
-                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为 One API 会把请求体中的 model
-                  参数替换为你的部署名称（模型名称中的点会被剔除），<a target='_blank'
-                                                                    href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'>图片演示</a>。
+                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为
+                  One API 会把请求体中的 model
+                  参数替换为你的部署名称（模型名称中的点会被剔除），
+                  <a
+                    target='_blank'
+                    href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'
+                  >
+                    图片演示
+                  </a>
+                  。
                </Message>
                <Form.Field>
                  <Form.Input
                    label='AZURE_OPENAI_ENDPOINT'
                    name='base_url'
-                    placeholder={'请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'}
+                    placeholder={
+                      '请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'
+                    }
                    onChange={handleInputChange}
                    value={inputs.base_url}
                    autoComplete='new-password'
@@ -264,38 +307,38 @@ const EditChannel = () => {
                  <Form.Input
                    label='默认 API 版本'
                    name='other'
-                    placeholder={'请输入默认 API 版本，例如：2024-03-01-preview，该配置可以被实际的请求查询参数所覆盖'}
+                    placeholder={
+                      '请输入默认 API 版本，例如：2024-03-01-preview，该配置可以被实际的请求查询参数所覆盖'
+                    }
                    onChange={handleInputChange}
                    value={inputs.other}
                    autoComplete='new-password'
                  />
                </Form.Field>
              </>
-            )
-          }
-          {
-            inputs.type === 8 && (
+            )}
+            {inputs.type === 8 && (
              <Form.Field>
                <Form.Input
                  label='Base URL'
                  name='base_url'
-                  placeholder={'请输入自定义渠道的 Base URL，例如：https://openai.justsong.cn'}
+                  placeholder={
+                    '请输入自定义渠道的 Base URL，例如：https://openai.justsong.cn'
+                  }
                  onChange={handleInputChange}
                  value={inputs.base_url}
                  autoComplete='new-password'
                />
              </Form.Field>
-            )
-          }
+            )}
            <Form.Field>
              <Form.Input
                label='名称'
-              required
                name='name'
-              placeholder={'请为渠道命名'}
+                placeholder={'请输入名称'}
                onChange={handleInputChange}
                value={inputs.name}
-              autoComplete='new-password'
+                required
              />
            </Form.Field>
            <Form.Field>
@@ -315,22 +358,21 @@ const EditChannel = () => {
                options={groupOptions}
              />
            </Form.Field>
-          {
-            inputs.type === 18 && (
+            {inputs.type === 18 && (
              <Form.Field>
                <Form.Input
                  label='模型版本'
                  name='other'
-                  placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
+                  placeholder={
+                    '请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'
+                  }
                  onChange={handleInputChange}
                  value={inputs.other}
                  autoComplete='new-password'
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 21 && (
+            )}
+            {inputs.type === 21 && (
              <Form.Field>
                <Form.Input
                  label='知识库 ID'
@@ -341,38 +383,40 @@ const EditChannel = () => {
                  autoComplete='new-password'
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 17 && (
+            )}
+            {inputs.type === 17 && (
              <Form.Field>
                <Form.Input
                  label='插件参数'
                  name='other'
-                  placeholder={'请输入插件参数，即 X-DashScope-Plugin 请求头的取值'}
+                  placeholder={
+                    '请输入插件参数，即 X-DashScope-Plugin 请求头的取值'
+                  }
                  onChange={handleInputChange}
                  value={inputs.other}
                  autoComplete='new-password'
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 34 && (
+            )}
+            {inputs.type === 34 && (
              <Message>
-                对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀 `bot-`，例如：`bot-123456`。
+                对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀
+                `bot-`，例如：`bot-123456`。
              </Message>
-            )
-          }
-          {
-            inputs.type === 40 && (
+            )}
+            {inputs.type === 40 && (
              <Message>
-                对于豆包而言，需要手动去 <a target="_blank" href="https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint">模型推理页面</a> 创建推理接入点，以接入点名称作为模型名称，例如：`ep-20240608051426-tkxvl`。
+                对于豆包而言，需要手动去{' '}
+                <a
+                  target='_blank'
+                  href='https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint'
+                >
+                  模型推理页面
+                </a>{' '}
+                创建推理接入点，以接入点名称作为模型名称，例如：`ep-20240608051426-tkxvl`。
              </Message>
-            )
-          }
-          {
-            inputs.type !== 43 && (
+            )}
+            {inputs.type !== 43 && (
              <Form.Field>
                <Form.Dropdown
                  label='模型'
@@ -392,23 +436,44 @@ const EditChannel = () => {
                  options={modelOptions}
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type !== 43 && (
+            )}
+            {inputs.type !== 43 && (
              <div style={{ lineHeight: '40px', marginBottom: '12px' }}>
-                <Button type={'button'} onClick={() => {
-                  handleInputChange(null, { name: 'models', value: basicModels });
-                }}>填入相关模型</Button>
-                <Button type={'button'} onClick={() => {
-                  handleInputChange(null, { name: 'models', value: fullModels });
-                }}>填入所有模型</Button>
-                <Button type={'button'} onClick={() => {
+                <Button
+                  type={'button'}
+                  onClick={() => {
+                    handleInputChange(null, {
+                      name: 'models',
+                      value: basicModels,
+                    });
+                  }}
+                >
+                  填入相关模型
+                </Button>
+                <Button
+                  type={'button'}
+                  onClick={() => {
+                    handleInputChange(null, {
+                      name: 'models',
+                      value: fullModels,
+                    });
+                  }}
+                >
+                  填入所有模型
+                </Button>
+                <Button
+                  type={'button'}
+                  onClick={() => {
                    handleInputChange(null, { name: 'models', value: [] });
-                }}>清除所有模型</Button>
+                  }}
+                >
+                  清除所有模型
+                </Button>
                <Input
                  action={
-                    <Button type={'button'} onClick={addCustomModel}>填入</Button>
+                    <Button type={'button'} onClick={addCustomModel}>
+                      填入
+                    </Button>
                  }
                  placeholder='输入自定义模型名称'
                  value={customModel}
@@ -423,18 +488,24 @@ const EditChannel = () => {
                  }}
                />
              </div>
-            )
-          }
-          {
-          inputs.type !== 43 && (<>
+            )}
+            {inputs.type !== 43 && (
+              <>
                <Form.Field>
                  <Form.TextArea
                    label='模型重定向'
-                  placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`}
+                    placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(
+                      MODEL_MAPPING_EXAMPLE,
+                      null,
+                      2
+                    )}`}
                    name='model_mapping'
                    onChange={handleInputChange}
                    value={inputs.model_mapping}
-                  style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
                    autoComplete='new-password'
                  />
                </Form.Field>
@@ -445,15 +516,16 @@ const EditChannel = () => {
                    name='system_prompt'
                    onChange={handleInputChange}
                    value={inputs.system_prompt}
-                  style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
                    autoComplete='new-password'
                  />
                </Form.Field>
              </>
-            )
-          }
-          {
-            inputs.type === 33 && (
+            )}
+            {inputs.type === 33 && (
              <Form.Field>
                <Form.Input
                  label='Region'
@@ -483,10 +555,8 @@ const EditChannel = () => {
                  autoComplete=''
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 42 && (
+            )}
+            {inputs.type === 42 && (
              <Form.Field>
                <Form.Input
                  label='Region'
@@ -510,16 +580,16 @@ const EditChannel = () => {
                  label='Google Cloud Application Default Credentials JSON'
                  name='vertex_ai_adc'
                  required
-                  placeholder={'Google Cloud Application Default Credentials JSON'}
+                  placeholder={
+                    'Google Cloud Application Default Credentials JSON'
+                  }
                  onChange={handleConfigChange}
                  value={config.vertex_ai_adc}
                  autoComplete=''
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 34 && (
+            )}
+            {inputs.type === 34 && (
              <Form.Input
                label='User ID'
                name='user_id'
@@ -528,10 +598,12 @@ const EditChannel = () => {
                onChange={handleConfigChange}
                value={config.user_id}
                autoComplete=''
-              />)
-          }
-          {
-            inputs.type !== 33 && inputs.type !== 42 && (batch ? <Form.Field>
+              />
+            )}
+            {inputs.type !== 33 &&
+              inputs.type !== 42 &&
+              (batch ? (
+                <Form.Field>
                  <Form.TextArea
                    label='密钥'
                    name='key'
@@ -539,10 +611,15 @@ const EditChannel = () => {
                    placeholder={'请输入密钥，一行一个'}
                    onChange={handleInputChange}
                    value={inputs.key}
-                style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
                    autoComplete='new-password'
                  />
-            </Form.Field> : <Form.Field>
+                </Form.Field>
+              ) : (
+                <Form.Field>
                  <Form.Input
                    label='密钥'
                    name='key'
@@ -552,66 +629,70 @@ const EditChannel = () => {
                    value={inputs.key}
                    autoComplete='new-password'
                  />
-            </Form.Field>)
-          }
-          {
-            inputs.type === 37 && (
+                </Form.Field>
+              ))}
+            {inputs.type === 37 && (
              <Form.Field>
                <Form.Input
                  label='Account ID'
                  name='user_id'
                  required
-                  placeholder={'请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'}
+                  placeholder={
+                    '请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'
+                  }
                  onChange={handleConfigChange}
                  value={config.user_id}
                  autoComplete=''
                />
              </Form.Field>
-            )
-          }
-          {
-            inputs.type !== 33 && !isEdit && (
+            )}
+            {inputs.type !== 33 && !isEdit && (
              <Form.Checkbox
                checked={batch}
                label='批量创建'
                name='batch'
                onChange={() => setBatch(!batch)}
              />
-            )
-          }
-          {
-            inputs.type !== 3 && inputs.type !== 33 && inputs.type !== 8 && inputs.type !== 22 && (
+            )}
+            {inputs.type !== 3 &&
+              inputs.type !== 33 &&
+              inputs.type !== 8 &&
+              inputs.type !== 22 && (
                <Form.Field>
                  <Form.Input
                    label='代理'
                    name='base_url'
-                  placeholder={'此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'}
+                    placeholder={
+                      '此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'
+                    }
                    onChange={handleInputChange}
                    value={inputs.base_url}
                    autoComplete='new-password'
                  />
                </Form.Field>
-            )
-          }
-          {
-            inputs.type === 22 && (
+              )}
+            {inputs.type === 22 && (
              <Form.Field>
                <Form.Input
                  label='私有部署地址'
                  name='base_url'
-                  placeholder={'请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'}
+                  placeholder={
+                    '请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'
+                  }
                  onChange={handleInputChange}
                  value={inputs.base_url}
                  autoComplete='new-password'
                />
              </Form.Field>
-            )
-          }
+            )}
            <Button onClick={handleCancel}>取消</Button>
-          <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>提交</Button>
+            <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>
+              提交
+            </Button>
          </Form>
-      </Segment>
-    </>
+        </Card.Content>
+      </Card>
+    </div>
  );
 };

--- a/web/default/src/pages/Dashboard/Dashboard.css
+++ b/web/default/src/pages/Dashboard/Dashboard.css
@@ -54,7 +54,6 @@
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
-    padding: 0 8px;
    gap: 12px; /* 增加标题和数值之间的间距 */
 }