feat: able to add more UI theme (#860)

2025-11-11 19:03:43 +08:00 · 2024-01-01 18:55:03 +08:00
parent 505817ca17
commit aa03c89133
72 changed files with 66 additions and 42 deletions
--- a/web/default/src/pages/About/index.js
+++ b/web/default/src/pages/About/index.js
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { Header, Segment } from 'semantic-ui-react';
+import { API, showError } from '../../helpers';
+import { marked } from 'marked';
+
+const About = () => {
+  const [about, setAbout] = useState('');
+  const [aboutLoaded, setAboutLoaded] = useState(false);
+
+  const displayAbout = async () => {
+    setAbout(localStorage.getItem('about') || '');
+    const res = await API.get('/api/about');
+    const { success, message, data } = res.data;
+    if (success) {
+      let aboutContent = data;
+      if (!data.startsWith('https://')) {
+        aboutContent = marked.parse(data);
+      }
+      setAbout(aboutContent);
+      localStorage.setItem('about', aboutContent);
+    } else {
+      showError(message);
+      setAbout('加载关于内容失败...');
+    }
+    setAboutLoaded(true);
+  };
+
+  useEffect(() => {
+    displayAbout().then();
+  }, []);
+
+  return (
+    <>
+      {
+        aboutLoaded && about === '' ? <>
+          <Segment>
+            <Header as='h3'>关于</Header>
+            <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
+            项目仓库地址：
+            <a href='https://github.com/songquanpeng/one-api'>
+              https://github.com/songquanpeng/one-api
+            </a>
+          </Segment>
+        </> : <>
+          {
+            about.startsWith('https://') ? <iframe
+              src={about}
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+            /> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: about }}></div>
+          }
+        </>
+      }
+    </>
+  );
+};
+
+
+export default About;
--- a/web/default/src/pages/Channel/EditChannel.js
+++ b/web/default/src/pages/Channel/EditChannel.js
@@ -0,0 +1,493 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Input, Message, Segment } from 'semantic-ui-react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { API, 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'
+};
+
+function type2secretPrompt(type) {
+  // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
+  switch (type) {
+    case 15:
+      return '按照如下格式输入：APIKey|SecretKey';
+    case 18:
+      return '按照如下格式输入：APPID|APISecret|APIKey';
+    case 22:
+      return '按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041';
+    case 23:
+      return '按照如下格式输入：AppId|SecretId|SecretKey';
+    default:
+      return '请输入渠道对应的鉴权密钥';
+  }
+}
+
+const EditChannel = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const channelId = params.id;
+  const isEdit = channelId !== undefined;
+  const [loading, setLoading] = useState(isEdit);
+  const handleCancel = () => {
+    navigate('/channel');
+  };
+
+  const originInputs = {
+    name: '',
+    type: 1,
+    key: '',
+    base_url: '',
+    other: '',
+    model_mapping: '',
+    models: [],
+    groups: ['default']
+  };
+  const [batch, setBatch] = useState(false);
+  const [inputs, setInputs] = useState(originInputs);
+  const [originModelOptions, setOriginModelOptions] = useState([]);
+  const [modelOptions, setModelOptions] = useState([]);
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [basicModels, setBasicModels] = useState([]);
+  const [fullModels, setFullModels] = useState([]);
+  const [customModel, setCustomModel] = useState('');
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+    if (name === 'type' && inputs.models.length === 0) {
+      let localModels = [];
+      switch (value) {
+        case 14:
+          localModels = ['claude-instant-1', 'claude-2', 'claude-2.0', 'claude-2.1'];
+          break;
+        case 11:
+          localModels = ['PaLM-2'];
+          break;
+        case 15:
+          localModels = ['ERNIE-Bot', 'ERNIE-Bot-turbo', 'ERNIE-Bot-4', 'Embedding-V1'];
+          break;
+        case 17:
+          localModels = ['qwen-turbo', 'qwen-plus', 'qwen-max', 'qwen-max-longcontext', 'text-embedding-v1'];
+          let withInternetVersion = [];
+          for (let i = 0; i < localModels.length; i++) {
+            if (localModels[i].startsWith('qwen-')) {
+              withInternetVersion.push(localModels[i] + '-internet');
+            }
+          }
+          localModels = [...localModels, ...withInternetVersion];
+          break;
+        case 16:
+          localModels = ['chatglm_turbo', 'chatglm_pro', 'chatglm_std', 'chatglm_lite'];
+          break;
+        case 18:
+          localModels = ['SparkDesk'];
+          break;
+        case 19:
+          localModels = ['360GPT_S2_V9', 'embedding-bert-512-v1', 'embedding_s1_v1', 'semantic_similarity_s1_v1'];
+          break;
+        case 23:
+          localModels = ['hunyuan'];
+          break;
+        case 24:
+          localModels = ['gemini-pro', 'gemini-pro-vision'];
+          break;
+      }
+      setInputs((inputs) => ({ ...inputs, models: localModels }));
+    }
+  };
+
+  const loadChannel = async () => {
+    let res = await API.get(`/api/channel/${channelId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data.models === '') {
+        data.models = [];
+      } else {
+        data.models = data.models.split(',');
+      }
+      if (data.group === '') {
+        data.groups = [];
+      } else {
+        data.groups = data.group.split(',');
+      }
+      if (data.model_mapping !== '') {
+        data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
+      }
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const fetchModels = async () => {
+    try {
+      let res = await API.get(`/api/channel/models`);
+      let localModelOptions = res.data.data.map((model) => ({
+        key: model.id,
+        text: model.id,
+        value: model.id
+      }));
+      setOriginModelOptions(localModelOptions);
+      setFullModels(res.data.data.map((model) => model.id));
+      setBasicModels(res.data.data.filter((model) => {
+        return model.id.startsWith('gpt-3') || model.id.startsWith('text-');
+      }).map((model) => model.id));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group/`);
+      setGroupOptions(res.data.data.map((group) => ({
+        key: group,
+        text: group,
+        value: group
+      })));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  useEffect(() => {
+    let localModelOptions = [...originModelOptions];
+    inputs.models.forEach((model) => {
+      if (!localModelOptions.find((option) => option.key === model)) {
+        localModelOptions.push({
+          key: model,
+          text: model,
+          value: model
+        });
+      }
+    });
+    setModelOptions(localModelOptions);
+  }, [originModelOptions, inputs.models]);
+
+  useEffect(() => {
+    if (isEdit) {
+      loadChannel().then();
+    }
+    fetchModels().then();
+    fetchGroups().then();
+  }, []);
+
+  const submit = async () => {
+    if (!isEdit && (inputs.name === '' || inputs.key === '')) {
+      showInfo('请填写渠道名称和渠道密钥！');
+      return;
+    }
+    if (inputs.models.length === 0) {
+      showInfo('请至少选择一个模型！');
+      return;
+    }
+    if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
+      showInfo('模型映射必须是合法的 JSON 格式！');
+      return;
+    }
+    let localInputs = inputs;
+    if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
+      localInputs.base_url = localInputs.base_url.slice(0, localInputs.base_url.length - 1);
+    }
+    if (localInputs.type === 3 && localInputs.other === '') {
+      localInputs.other = '2023-06-01-preview';
+    }
+    if (localInputs.type === 18 && localInputs.other === '') {
+      localInputs.other = 'v2.1';
+    }
+    let res;
+    localInputs.models = localInputs.models.join(',');
+    localInputs.group = localInputs.groups.join(',');
+    if (isEdit) {
+      res = await API.put(`/api/channel/`, { ...localInputs, id: parseInt(channelId) });
+    } else {
+      res = await API.post(`/api/channel/`, localInputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      if (isEdit) {
+        showSuccess('渠道更新成功！');
+      } else {
+        showSuccess('渠道创建成功！');
+        setInputs(originInputs);
+      }
+    } else {
+      showError(message);
+    }
+  };
+
+  const addCustomModel = () => {
+    if (customModel.trim() === '') return;
+    if (inputs.models.includes(customModel)) return;
+    let localModels = [...inputs.models];
+    localModels.push(customModel);
+    let localModelOptions = [];
+    localModelOptions.push({
+      key: customModel,
+      text: customModel,
+      value: customModel
+    });
+    setModelOptions(modelOptions => {
+      return [...modelOptions, ...localModelOptions];
+    });
+    setCustomModel('');
+    handleInputChange(null, { name: 'models', value: localModels });
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Select
+              label='类型'
+              name='type'
+              required
+              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>。
+                </Message>
+                <Form.Field>
+                  <Form.Input
+                    label='AZURE_OPENAI_ENDPOINT'
+                    name='base_url'
+                    placeholder={'请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'}
+                    onChange={handleInputChange}
+                    value={inputs.base_url}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <Form.Input
+                    label='默认 API 版本'
+                    name='other'
+                    placeholder={'请输入默认 API 版本，例如：2023-06-01-preview，该配置可以被实际的请求查询参数所覆盖'}
+                    onChange={handleInputChange}
+                    value={inputs.other}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              </>
+            )
+          }
+          {
+            inputs.type === 8 && (
+              <Form.Field>
+                <Form.Input
+                  label='Base URL'
+                  name='base_url'
+                  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='other'
+                  placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
+                  onChange={handleInputChange}
+                  value={inputs.other}
+                  autoComplete='new-password'
+                />
+              </Form.Field>
+            )
+          }
+          {
+            inputs.type === 21 && (
+              <Form.Field>
+                <Form.Input
+                  label='知识库 ID'
+                  name='other'
+                  placeholder={'请输入知识库 ID，例如：123456'}
+                  onChange={handleInputChange}
+                  value={inputs.other}
+                  autoComplete='new-password'
+                />
+              </Form.Field>
+            )
+          }
+          {
+            inputs.type === 17 && (
+              <Form.Field>
+                <Form.Input
+                  label='插件参数'
+                  name='other'
+                  placeholder={'请输入插件参数，即 X-DashScope-Plugin 请求头的取值'}
+                  onChange={handleInputChange}
+                  value={inputs.other}
+                  autoComplete='new-password'
+                />
+              </Form.Field>
+            )
+          }
+          <Form.Field>
+            <Form.Dropdown
+              label='模型'
+              placeholder={'请选择该渠道所支持的模型'}
+              name='models'
+              required
+              fluid
+              multiple
+              selection
+              onChange={handleInputChange}
+              value={inputs.models}
+              autoComplete='new-password'
+              options={modelOptions}
+            />
+          </Form.Field>
+          <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>
+            <Input
+              action={
+                <Button type={'button'} onClick={addCustomModel}>填入</Button>
+              }
+              placeholder='输入自定义模型名称'
+              value={customModel}
+              onChange={(e, { value }) => {
+                setCustomModel(value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  addCustomModel();
+                  e.preventDefault();
+                }
+              }}
+            />
+          </div>
+          <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>
+          {
+            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>
+          }
+          {
+            !isEdit && (
+              <Form.Checkbox
+                checked={batch}
+                label='批量创建'
+                name='batch'
+                onChange={() => setBatch(!batch)}
+              />
+            )
+          }
+          {
+            inputs.type !== 3 && 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'}
+                  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>
+    </>
+  );
+};
+
+export default EditChannel;
--- a/web/default/src/pages/Channel/index.js
+++ b/web/default/src/pages/Channel/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Header, Segment } from 'semantic-ui-react';
+import ChannelsTable from '../../components/ChannelsTable';
+
+const File = () => (
+  <>
+    <Segment>
+      <Header as='h3'>管理渠道</Header>
+      <ChannelsTable />
+    </Segment>
+  </>
+);
+
+export default File;
--- a/web/default/src/pages/Chat/index.js
+++ b/web/default/src/pages/Chat/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Chat = () => {
+  const chatLink = localStorage.getItem('chat_link');
+
+  return (
+    <iframe
+      src={chatLink}
+      style={{ width: '100%', height: '85vh', border: 'none' }}
+    />
+  );
+};
+
+
+export default Chat;
--- a/web/default/src/pages/Home/index.js
+++ b/web/default/src/pages/Home/index.js
@@ -0,0 +1,133 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Card, Grid, Header, Segment } from 'semantic-ui-react';
+import { API, showError, showNotice, timestamp2string } from '../../helpers';
+import { StatusContext } from '../../context/Status';
+import { marked } from 'marked';
+
+const Home = () => {
+  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
+  const [homePageContent, setHomePageContent] = useState('');
+
+  const displayNotice = async () => {
+    const res = await API.get('/api/notice');
+    const { success, message, data } = res.data;
+    if (success) {
+      let oldNotice = localStorage.getItem('notice');
+        if (data !== oldNotice && data !== '') {
+            const htmlNotice = marked(data);
+            showNotice(htmlNotice, true);
+            localStorage.setItem('notice', data);
+        }
+    } else {
+      showError(message);
+    }
+  };
+
+  const displayHomePageContent = async () => {
+    setHomePageContent(localStorage.getItem('home_page_content') || '');
+    const res = await API.get('/api/home_page_content');
+    const { success, message, data } = res.data;
+    if (success) {
+      let content = data;
+      if (!data.startsWith('https://')) {
+        content = marked.parse(data);
+      }
+      setHomePageContent(content);
+      localStorage.setItem('home_page_content', content);
+    } else {
+      showError(message);
+      setHomePageContent('加载首页内容失败...');
+    }
+    setHomePageContentLoaded(true);
+  };
+
+  const getStartTimeString = () => {
+    const timestamp = statusState?.status?.start_time;
+    return timestamp2string(timestamp);
+  };
+
+  useEffect(() => {
+    displayNotice().then();
+    displayHomePageContent().then();
+  }, []);
+  return (
+    <>
+      {
+        homePageContentLoaded && homePageContent === '' ? <>
+          <Segment>
+            <Header as='h3'>系统状况</Header>
+            <Grid columns={2} stackable>
+              <Grid.Column>
+                <Card fluid>
+                  <Card.Content>
+                    <Card.Header>系统信息</Card.Header>
+                    <Card.Meta>系统信息总览</Card.Meta>
+                    <Card.Description>
+                      <p>名称：{statusState?.status?.system_name}</p>
+                      <p>版本：{statusState?.status?.version ? statusState?.status?.version : "unknown"}</p>
+                      <p>
+                        源码：
+                        <a
+                          href='https://github.com/songquanpeng/one-api'
+                          target='_blank'
+                        >
+                          https://github.com/songquanpeng/one-api
+                        </a>
+                      </p>
+                      <p>启动时间：{getStartTimeString()}</p>
+                    </Card.Description>
+                  </Card.Content>
+                </Card>
+              </Grid.Column>
+              <Grid.Column>
+                <Card fluid>
+                  <Card.Content>
+                    <Card.Header>系统配置</Card.Header>
+                    <Card.Meta>系统配置总览</Card.Meta>
+                    <Card.Description>
+                      <p>
+                        邮箱验证：
+                        {statusState?.status?.email_verification === true
+                          ? '已启用'
+                          : '未启用'}
+                      </p>
+                      <p>
+                        GitHub 身份验证：
+                        {statusState?.status?.github_oauth === true
+                          ? '已启用'
+                          : '未启用'}
+                      </p>
+                      <p>
+                        微信身份验证：
+                        {statusState?.status?.wechat_login === true
+                          ? '已启用'
+                          : '未启用'}
+                      </p>
+                      <p>
+                        Turnstile 用户校验：
+                        {statusState?.status?.turnstile_check === true
+                          ? '已启用'
+                          : '未启用'}
+                      </p>
+                    </Card.Description>
+                  </Card.Content>
+                </Card>
+              </Grid.Column>
+            </Grid>
+          </Segment>
+        </> : <>
+          {
+            homePageContent.startsWith('https://') ? <iframe
+              src={homePageContent}
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+            /> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: homePageContent }}></div>
+          }
+        </>
+      }
+
+    </>
+  );
+};
+
+export default Home;
--- a/web/default/src/pages/Log/index.js
+++ b/web/default/src/pages/Log/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Header, Segment } from 'semantic-ui-react';
+import LogsTable from '../../components/LogsTable';
+
+const Token = () => (
+  <>
+    <LogsTable />
+  </>
+);
+
+export default Token;
--- a/web/default/src/pages/NotFound/index.js
+++ b/web/default/src/pages/NotFound/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Message } from 'semantic-ui-react';
+
+const NotFound = () => (
+  <>
+    <Message negative>
+      <Message.Header>页面不存在</Message.Header>
+      <p>请检查你的浏览器地址是否正确</p>
+    </Message>
+  </>
+);
+
+export default NotFound;
--- a/web/default/src/pages/Redemption/EditRedemption.js
+++ b/web/default/src/pages/Redemption/EditRedemption.js
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
+import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+
+const EditRedemption = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const redemptionId = params.id;
+  const isEdit = redemptionId !== undefined;
+  const [loading, setLoading] = useState(isEdit);
+  const originInputs = {
+    name: '',
+    quota: 100000,
+    count: 1
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { name, quota, count } = inputs;
+
+  const handleCancel = () => {
+    navigate('/redemption');
+  };
+  
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadRedemption = async () => {
+    let res = await API.get(`/api/redemption/${redemptionId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    if (isEdit) {
+      loadRedemption().then();
+    }
+  }, []);
+
+  const submit = async () => {
+    if (!isEdit && inputs.name === '') return;
+    let localInputs = inputs;
+    localInputs.count = parseInt(localInputs.count);
+    localInputs.quota = parseInt(localInputs.quota);
+    let res;
+    if (isEdit) {
+      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+    } else {
+      res = await API.post(`/api/redemption/`, {
+        ...localInputs
+      });
+    }
+    const { success, message, data } = res.data;
+    if (success) {
+      if (isEdit) {
+        showSuccess('兑换码更新成功！');
+      } else {
+        showSuccess('兑换码创建成功！');
+        setInputs(originInputs);
+      }
+    } else {
+      showError(message);
+    }
+    if (!isEdit && data) {
+      let text = "";
+      for (let i = 0; i < data.length; i++) {
+        text += data[i] + "\n";
+      }
+      downloadTextAsFile(text, `${inputs.name}.txt`);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Input
+              label='名称'
+              name='name'
+              placeholder={'请输入名称'}
+              onChange={handleInputChange}
+              value={name}
+              autoComplete='new-password'
+              required={!isEdit}
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label={`额度${renderQuotaWithPrompt(quota)}`}
+              name='quota'
+              placeholder={'请输入单个兑换码中包含的额度'}
+              onChange={handleInputChange}
+              value={quota}
+              autoComplete='new-password'
+              type='number'
+            />
+          </Form.Field>
+          {
+            !isEdit && <>
+              <Form.Field>
+                <Form.Input
+                  label='生成数量'
+                  name='count'
+                  placeholder={'请输入生成数量'}
+                  onChange={handleInputChange}
+                  value={count}
+                  autoComplete='new-password'
+                  type='number'
+                />
+              </Form.Field>
+            </>
+          }
+          <Button positive onClick={submit}>提交</Button>
+          <Button onClick={handleCancel}>取消</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditRedemption;
--- a/web/default/src/pages/Redemption/index.js
+++ b/web/default/src/pages/Redemption/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Segment, Header } from 'semantic-ui-react';
+import RedemptionsTable from '../../components/RedemptionsTable';
+
+const Redemption = () => (
+  <>
+    <Segment>
+      <Header as='h3'>管理兑换码</Header>
+      <RedemptionsTable/>
+    </Segment>
+  </>
+);
+
+export default Redemption;
--- a/web/default/src/pages/Setting/index.js
+++ b/web/default/src/pages/Setting/index.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Segment, Tab } from 'semantic-ui-react';
+import SystemSetting from '../../components/SystemSetting';
+import { isRoot } from '../../helpers';
+import OtherSetting from '../../components/OtherSetting';
+import PersonalSetting from '../../components/PersonalSetting';
+import OperationSetting from '../../components/OperationSetting';
+
+const Setting = () => {
+  let panes = [
+    {
+      menuItem: '个人设置',
+      render: () => (
+        <Tab.Pane attached={false}>
+          <PersonalSetting />
+        </Tab.Pane>
+      )
+    }
+  ];
+
+  if (isRoot()) {
+    panes.push({
+      menuItem: '运营设置',
+      render: () => (
+        <Tab.Pane attached={false}>
+          <OperationSetting />
+        </Tab.Pane>
+      )
+    });
+    panes.push({
+      menuItem: '系统设置',
+      render: () => (
+        <Tab.Pane attached={false}>
+          <SystemSetting />
+        </Tab.Pane>
+      )
+    });
+    panes.push({
+      menuItem: '其他设置',
+      render: () => (
+        <Tab.Pane attached={false}>
+          <OtherSetting />
+        </Tab.Pane>
+      )
+    });
+  }
+
+  return (
+    <Segment>
+      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+    </Segment>
+  );
+};
+
+export default Setting;
--- a/web/default/src/pages/Token/EditToken.js
+++ b/web/default/src/pages/Token/EditToken.js
@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { API, showError, showSuccess, timestamp2string } from '../../helpers';
+import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+
+const EditToken = () => {
+  const params = useParams();
+  const tokenId = params.id;
+  const isEdit = tokenId !== undefined;
+  const [loading, setLoading] = useState(isEdit);
+  const originInputs = {
+    name: '',
+    remain_quota: isEdit ? 0 : 500000,
+    expired_time: -1,
+    unlimited_quota: false
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { name, remain_quota, expired_time, unlimited_quota } = inputs;
+  const navigate = useNavigate();
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+  const handleCancel = () => {
+    navigate("/token");
+  }
+  const setExpiredTime = (month, day, hour, minute) => {
+    let now = new Date();
+    let timestamp = now.getTime() / 1000;
+    let seconds = month * 30 * 24 * 60 * 60;
+    seconds += day * 24 * 60 * 60;
+    seconds += hour * 60 * 60;
+    seconds += minute * 60;
+    if (seconds !== 0) {
+      timestamp += seconds;
+      setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
+    } else {
+      setInputs({ ...inputs, expired_time: -1 });
+    }
+  };
+
+  const setUnlimitedQuota = () => {
+    setInputs({ ...inputs, unlimited_quota: !unlimited_quota });
+  };
+
+  const loadToken = async () => {
+    let res = await API.get(`/api/token/${tokenId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data.expired_time !== -1) {
+        data.expired_time = timestamp2string(data.expired_time);
+      }
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    if (isEdit) {
+      loadToken().then();
+    }
+  }, []);
+
+  const submit = async () => {
+    if (!isEdit && inputs.name === '') return;
+    let localInputs = inputs;
+    localInputs.remain_quota = parseInt(localInputs.remain_quota);
+    if (localInputs.expired_time !== -1) {
+      let time = Date.parse(localInputs.expired_time);
+      if (isNaN(time)) {
+        showError('过期时间格式错误！');
+        return;
+      }
+      localInputs.expired_time = Math.ceil(time / 1000);
+    }
+    let res;
+    if (isEdit) {
+      res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
+    } else {
+      res = await API.post(`/api/token/`, localInputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      if (isEdit) {
+        showSuccess('令牌更新成功！');
+      } else {
+        showSuccess('令牌创建成功，请在列表页面点击复制获取令牌！');
+        setInputs(originInputs);
+      }
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Input
+              label='名称'
+              name='name'
+              placeholder={'请输入名称'}
+              onChange={handleInputChange}
+              value={name}
+              autoComplete='new-password'
+              required={!isEdit}
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='过期时间'
+              name='expired_time'
+              placeholder={'请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'}
+              onChange={handleInputChange}
+              value={expired_time}
+              autoComplete='new-password'
+              type='datetime-local'
+            />
+          </Form.Field>
+          <div style={{ lineHeight: '40px' }}>
+            <Button type={'button'} onClick={() => {
+              setExpiredTime(0, 0, 0, 0);
+            }}>永不过期</Button>
+            <Button type={'button'} onClick={() => {
+              setExpiredTime(1, 0, 0, 0);
+            }}>一个月后过期</Button>
+            <Button type={'button'} onClick={() => {
+              setExpiredTime(0, 1, 0, 0);
+            }}>一天后过期</Button>
+            <Button type={'button'} onClick={() => {
+              setExpiredTime(0, 0, 1, 0);
+            }}>一小时后过期</Button>
+            <Button type={'button'} onClick={() => {
+              setExpiredTime(0, 0, 0, 1);
+            }}>一分钟后过期</Button>
+          </div>
+          <Message>注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。</Message>
+          <Form.Field>
+            <Form.Input
+              label={`额度${renderQuotaWithPrompt(remain_quota)}`}
+              name='remain_quota'
+              placeholder={'请输入额度'}
+              onChange={handleInputChange}
+              value={remain_quota}
+              autoComplete='new-password'
+              type='number'
+              disabled={unlimited_quota}
+            />
+          </Form.Field>
+          <Button type={'button'} onClick={() => {
+            setUnlimitedQuota();
+          }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
+          <Button floated='right' positive onClick={submit}>提交</Button>
+          <Button floated='right' onClick={handleCancel}>取消</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditToken;
--- a/web/default/src/pages/Token/index.js
+++ b/web/default/src/pages/Token/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Segment, Header } from 'semantic-ui-react';
+import TokensTable from '../../components/TokensTable';
+
+const Token = () => (
+  <>
+    <Segment>
+      <Header as='h3'>我的令牌</Header>
+      <TokensTable/>
+    </Segment>
+  </>
+);
+
+export default Token;
--- a/web/default/src/pages/TopUp/index.js
+++ b/web/default/src/pages/TopUp/index.js
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Segment, Statistic } from 'semantic-ui-react';
+import { API, showError, showInfo, showSuccess } from '../../helpers';
+import { renderQuota } from '../../helpers/render';
+
+const TopUp = () => {
+  const [redemptionCode, setRedemptionCode] = useState('');
+  const [topUpLink, setTopUpLink] = useState('');
+  const [userQuota, setUserQuota] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const topUp = async () => {
+    if (redemptionCode === '') {
+      showInfo('请输入充值码！')
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const res = await API.post('/api/user/topup', {
+        key: redemptionCode
+      });
+      const { success, message, data } = res.data;
+      if (success) {
+        showSuccess('充值成功！');
+        setUserQuota((quota) => {
+          return quota + data;
+        });
+        setRedemptionCode('');
+      } else {
+        showError(message);
+      }
+    } catch (err) {
+      showError('请求失败');
+    } finally {
+      setIsSubmitting(false); 
+    }
+  };
+
+  const openTopUpLink = () => {
+    if (!topUpLink) {
+      showError('超级管理员未设置充值链接！');
+      return;
+    }
+    window.open(topUpLink, '_blank');
+  };
+
+  const getUserQuota = async ()=>{
+    let res  = await API.get(`/api/user/self`);
+    const {success, message, data} = res.data;
+    if (success) {
+      setUserQuota(data.quota);
+    } else {
+      showError(message);
+    }
+  }
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      if (status.top_up_link) {
+        setTopUpLink(status.top_up_link);
+      }
+    }
+    getUserQuota().then();
+  }, []);
+
+  return (
+    <Segment>
+      <Header as='h3'>充值额度</Header>
+      <Grid columns={2} stackable>
+        <Grid.Column>
+          <Form>
+            <Form.Input
+              placeholder='兑换码'
+              name='redemptionCode'
+              value={redemptionCode}
+              onChange={(e) => {
+                setRedemptionCode(e.target.value);
+              }}
+            />
+            <Button color='green' onClick={openTopUpLink}>
+              获取兑换码
+            </Button>
+            <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
+                {isSubmitting ? '兑换中...' : '兑换'}
+            </Button>
+          </Form>
+        </Grid.Column>
+        <Grid.Column>
+          <Statistic.Group widths='one'>
+            <Statistic>
+              <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
+              <Statistic.Label>剩余额度</Statistic.Label>
+            </Statistic>
+          </Statistic.Group>
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+export default TopUp;
--- a/web/default/src/pages/User/AddUser.js
+++ b/web/default/src/pages/User/AddUser.js
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../../helpers';
+
+const AddUser = () => {
+  const originInputs = {
+    username: '',
+    display_name: '',
+    password: '',
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { username, display_name, password } = inputs;
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const submit = async () => {
+    if (inputs.username === '' || inputs.password === '') return;
+    const res = await API.post(`/api/user/`, inputs);
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('用户账户创建成功！');
+      setInputs(originInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment>
+        <Header as="h3">创建新用户账户</Header>
+        <Form autoComplete="off">
+          <Form.Field>
+            <Form.Input
+              label="用户名"
+              name="username"
+              placeholder={'请输入用户名'}
+              onChange={handleInputChange}
+              value={username}
+              autoComplete="off"
+              required
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label="显示名称"
+              name="display_name"
+              placeholder={'请输入显示名称'}
+              onChange={handleInputChange}
+              value={display_name}
+              autoComplete="off"
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label="密码"
+              name="password"
+              type={'password'}
+              placeholder={'请输入密码'}
+              onChange={handleInputChange}
+              value={password}
+              autoComplete="off"
+              required
+            />
+          </Form.Field>
+          <Button positive type={'submit'} onClick={submit}>
+            提交
+          </Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default AddUser;
--- a/web/default/src/pages/User/EditUser.js
+++ b/web/default/src/pages/User/EditUser.js
@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { API, showError, showSuccess } from '../../helpers';
+import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+
+const EditUser = () => {
+  const params = useParams();
+  const userId = params.id;
+  const [loading, setLoading] = useState(true);
+  const [inputs, setInputs] = useState({
+    username: '',
+    display_name: '',
+    password: '',
+    github_id: '',
+    wechat_id: '',
+    email: '',
+    quota: 0,
+    group: 'default'
+  });
+  const [groupOptions, setGroupOptions] = useState([]);
+  const { username, display_name, password, github_id, wechat_id, email, quota, group } =
+    inputs;
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group/`);
+      setGroupOptions(res.data.data.map((group) => ({
+        key: group,
+        text: group,
+        value: group,
+      })));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+  const navigate = useNavigate();
+  const handleCancel = () => {
+    navigate("/setting");
+  }
+  const loadUser = async () => {
+    let res = undefined;
+    if (userId) {
+      res = await API.get(`/api/user/${userId}`);
+    } else {
+      res = await API.get(`/api/user/self`);
+    }
+    const { success, message, data } = res.data;
+    if (success) {
+      data.password = '';
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    loadUser().then();
+    if (userId) {
+      fetchGroups().then();
+    }
+  }, []);
+
+  const submit = async () => {
+    let res = undefined;
+    if (userId) {
+      let data = { ...inputs, id: parseInt(userId) };
+      if (typeof data.quota === 'string') {
+        data.quota = parseInt(data.quota);
+      }
+      res = await API.put(`/api/user/`, data);
+    } else {
+      res = await API.put(`/api/user/self`, inputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('用户信息更新成功！');
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>更新用户信息</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Input
+              label='用户名'
+              name='username'
+              placeholder={'请输入新的用户名'}
+              onChange={handleInputChange}
+              value={username}
+              autoComplete='new-password'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='密码'
+              name='password'
+              type={'password'}
+              placeholder={'请输入新的密码，最短 8 位'}
+              onChange={handleInputChange}
+              value={password}
+              autoComplete='new-password'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='显示名称'
+              name='display_name'
+              placeholder={'请输入新的显示名称'}
+              onChange={handleInputChange}
+              value={display_name}
+              autoComplete='new-password'
+            />
+          </Form.Field>
+          {
+            userId && <>
+              <Form.Field>
+                <Form.Dropdown
+                  label='分组'
+                  placeholder={'请选择分组'}
+                  name='group'
+                  fluid
+                  search
+                  selection
+                  allowAdditions
+                  additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                  onChange={handleInputChange}
+                  value={inputs.group}
+                  autoComplete='new-password'
+                  options={groupOptions}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Form.Input
+                  label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                  name='quota'
+                  placeholder={'请输入新的剩余额度'}
+                  onChange={handleInputChange}
+                  value={quota}
+                  type={'number'}
+                  autoComplete='new-password'
+                />
+              </Form.Field>
+            </>
+          }
+          <Form.Field>
+            <Form.Input
+              label='已绑定的 GitHub 账户'
+              name='github_id'
+              value={github_id}
+              autoComplete='new-password'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的微信账户'
+              name='wechat_id'
+              value={wechat_id}
+              autoComplete='new-password'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的邮箱账户'
+              name='email'
+              value={email}
+              autoComplete='new-password'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Button onClick={handleCancel}>取消</Button>
+          <Button positive onClick={submit}>提交</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditUser;
--- a/web/default/src/pages/User/index.js
+++ b/web/default/src/pages/User/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Segment, Header } from 'semantic-ui-react';
+import UsersTable from '../../components/UsersTable';
+
+const User = () => (
+  <>
+    <Segment>
+      <Header as='h3'>管理用户</Header>
+      <UsersTable/>
+    </Segment>
+  </>
+);
+
+export default User;