chore: update default theme style

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>
   );
 };
 

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; /* 增加标题和数值之间的间距 */
 }