chore: update default theme style

2025-09-17 09:16:36 +08:00 · 2025-01-31 23:08:07 +08:00 · 2025-01-31 23:08:07 +08:00 · f2c7c424e9
commit f2c7c424e9
parent 38a42bb265
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) => ({
-        key: group,
-        text: group,
-        value: group
-      })));
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          key: group,
+          text: 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,34 +259,45 @@ const EditChannel = () => {
  };

  return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Select
-              label='类型'
-              name='type'
-              required
-              search
-              options={CHANNEL_OPTIONS}
-              value={inputs.type}
-              onChange={handleInputChange}
-            />
-          </Form.Field>
-          {
-            inputs.type === 3 && (
+    <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='类型'
+                name='type'
+                required
+                search
+                options={CHANNEL_OPTIONS}
+                value={inputs.type}
+                onChange={handleInputChange}
+              />
+            </Form.Field>
+            {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,73 +307,72 @@ 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={'请为渠道命名'}
-              onChange={handleInputChange}
-              value={inputs.name}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Dropdown
-              label='分组'
-              placeholder={'请选择可以使用该渠道的分组'}
-              name='groups'
-              required
-              fluid
-              multiple
-              selection
-              allowAdditions
-              additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-              onChange={handleInputChange}
-              value={inputs.groups}
-              autoComplete='new-password'
-              options={groupOptions}
-            />
-          </Form.Field>
-          {
-            inputs.type === 18 && (
+            )}
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={inputs.name}
+                required
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Dropdown
+                label='分组'
+                placeholder={'请选择可以使用该渠道的分组'}
+                name='groups'
+                required
+                fluid
+                multiple
+                selection
+                allowAdditions
+                additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                onChange={handleInputChange}
+                value={inputs.groups}
+                autoComplete='new-password'
+                options={groupOptions}
+              />
+            </Form.Field>
+            {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={() => {
-                  handleInputChange(null, { name: 'models', value: [] });
-                }}>清除所有模型</Button>
+                <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>
                <Input
                  action={
-                    <Button type={'button'} onClick={addCustomModel}>填入</Button>
+                    <Button type={'button'} onClick={addCustomModel}>
+                      填入
+                    </Button>
                  }
                  placeholder='输入自定义模型名称'
                  value={customModel}
@ -423,37 +488,44 @@ const EditChannel = () => {
                  }}
                />
              </div>
-            )
-          }
-          {
-          inputs.type !== 43 && (<>
-              <Form.Field>
-                <Form.TextArea
-                  label='模型重定向'
-                  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' }}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            <Form.Field>
-                <Form.TextArea
-                  label='系统提示词'
-                  placeholder={`此项可选，用于强制设置给定的系统提示词，请配合自定义模型 & 模型重定向使用，首先创建一个唯一的自定义模型名称并在上面填入，之后将该自定义模型重定向映射到该渠道一个原生支持的模型`}
-                  name='system_prompt'
-                  onChange={handleInputChange}
-                  value={inputs.system_prompt}
-                  style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
+            )}
+            {inputs.type !== 43 && (
+              <>
+                <Form.Field>
+                  <Form.TextArea
+                    label='模型重定向'
+                    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',
+                    }}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <Form.TextArea
+                    label='系统提示词'
+                    placeholder={`此项可选，用于强制设置给定的系统提示词，请配合自定义模型 & 模型重定向使用，首先创建一个唯一的自定义模型名称并在上面填入，之后将该自定义模型重定向映射到该渠道一个原生支持的模型`}
+                    name='system_prompt'
+                    onChange={handleInputChange}
+                    value={inputs.system_prompt}
+                    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,90 +598,101 @@ const EditChannel = () => {
                onChange={handleConfigChange}
                value={config.user_id}
                autoComplete=''
-              />)
-          }
-          {
-            inputs.type !== 33 && inputs.type !== 42 && (batch ? <Form.Field>
-              <Form.TextArea
-                label='密钥'
-                name='key'
-                required
-                placeholder={'请输入密钥，一行一个'}
-                onChange={handleInputChange}
-                value={inputs.key}
-                style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-                autoComplete='new-password'
              />
-            </Form.Field> : <Form.Field>
-              <Form.Input
-                label='密钥'
-                name='key'
-                required
-                placeholder={type2secretPrompt(inputs.type)}
-                onChange={handleInputChange}
-                value={inputs.key}
-                autoComplete='new-password'
-              />
-            </Form.Field>)
-          }
-          {
-            inputs.type === 37 && (
+            )}
+            {inputs.type !== 33 &&
+              inputs.type !== 42 &&
+              (batch ? (
+                <Form.Field>
+                  <Form.TextArea
+                    label='密钥'
+                    name='key'
+                    required
+                    placeholder={'请输入密钥，一行一个'}
+                    onChange={handleInputChange}
+                    value={inputs.key}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              ) : (
+                <Form.Field>
+                  <Form.Input
+                    label='密钥'
+                    name='key'
+                    required
+                    placeholder={type2secretPrompt(inputs.type)}
+                    onChange={handleInputChange}
+                    value={inputs.key}
+                    autoComplete='new-password'
+                  />
+                </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 && (
-              <Form.Field>
-                <Form.Input
-                  label='代理'
-                  name='base_url'
-                  placeholder={'此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'}
-                  onChange={handleInputChange}
-                  value={inputs.base_url}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            )
-          }
-          {
-            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'
+                    }
+                    onChange={handleInputChange}
+                    value={inputs.base_url}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              )}
+            {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>
-        </Form>
-      </Segment>
-    </>
+            )}
+            <Button onClick={handleCancel}>取消</Button>
+            <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>
+              提交
+            </Button>
+          </Form>
+        </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; /* 增加标题和数值之间的间距 */
 }