chore: reformat code

web/src/pages/Redemption/EditRedemption.js

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import {API, downloadTextAsFile, isMobile, showError, showSuccess} from '../../helpers';
-import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import {SideSheet, Space, Spin, Button, Input, Typography, AutoComplete, Modal} from "@douyinfe/semi-ui";
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Divider} from "semantic-ui-react";
+import { useNavigate, useParams } from 'react-router-dom';
+import { API, downloadTextAsFile, isMobile, showError, showSuccess } from '../../helpers';
+import { renderQuotaWithPrompt } from '../../helpers/render';
+import { AutoComplete, Button, Input, Modal, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Divider } from 'semantic-ui-react';
 
 const EditRedemption = (props) => {
   const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
 
   const params = useParams();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const originInputs = {
     name: '',
     quota: 100000,
@@ -22,8 +22,8 @@ const EditRedemption = (props) => {
 
   const handleCancel = () => {
     props.handleClose();
-  }
-  
+  };
+
   const handleInputChange = (name, value) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -43,9 +43,9 @@ const EditRedemption = (props) => {
   useEffect(() => {
     if (isEdit) {
       loadRedemption().then(
-          () => {
-            // console.log(inputs);
-          }
+        () => {
+          // console.log(inputs);
+        }
       );
     } else {
       setInputs(originInputs);
@@ -82,21 +82,21 @@ const EditRedemption = (props) => {
       showError(message);
     }
     if (!isEdit && data) {
-      let text = "";
+      let text = '';
       for (let i = 0; i < data.length; i++) {
-        text += data[i] + "\n";
+        text += data[i] + '\n';
       }
       // downloadTextAsFile(text, `${inputs.name}.txt`);
       Modal.confirm({
         title: '兑换码创建成功',
         content: (
-            <div>
-                <p>兑换码创建成功，是否下载兑换码？</p>
-                <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
-            </div>
+          <div>
+            <p>兑换码创建成功，是否下载兑换码？</p>
+            <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
+          </div>
         ),
         onOk: () => {
-            downloadTextAsFile(text, `${inputs.name}.txt`);
+          downloadTextAsFile(text, `${inputs.name}.txt`);
         }
       });
     }
@@ -106,71 +106,71 @@ const EditRedemption = (props) => {
   return (
     <>
       <SideSheet
-          placement={isEdit ? 'right' : 'left'}
-          title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
-          headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-          bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-          visible={props.visiable}
-          footer={
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-              <Space>
-                <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
-              </Space>
-            </div>
-          }
-          closeIcon={null}
-          onCancel={() => handleCancel()}
-          width={isMobile() ? '100%' : 600}
+        placement={isEdit ? 'right' : 'left'}
+        title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        visible={props.visiable}
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Space>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+            </Space>
+          </div>
+        }
+        closeIcon={null}
+        onCancel={() => handleCancel()}
+        width={isMobile() ? '100%' : 600}
       >
         <Spin spinning={loading}>
           <Input
-              style={{ marginTop: 20 }}
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={value => handleInputChange('name', value)}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
+            style={{ marginTop: 20 }}
+            label="名称"
+            name="name"
+            placeholder={'请输入名称'}
+            onChange={value => handleInputChange('name', value)}
+            value={name}
+            autoComplete="new-password"
+            required={!isEdit}
           />
-          <Divider/>
+          <Divider />
           <div style={{ marginTop: 20 }}>
             <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
           </div>
           <AutoComplete
-              style={{ marginTop: 8 }}
-              name='quota'
-              placeholder={'请输入额度'}
-              onChange={(value) => handleInputChange('quota', value)}
-              value={quota}
-              autoComplete='new-password'
-              type='number'
-              position={'bottom'}
-              data={[
-                {value: 500000, label: '1$'},
-                {value: 5000000, label: '10$'},
-                {value: 25000000, label: '50$'},
-                {value: 50000000, label: '100$'},
-                {value: 250000000, label: '500$'},
-                {value: 500000000, label: '1000$'},
-              ]}
+            style={{ marginTop: 8 }}
+            name="quota"
+            placeholder={'请输入额度'}
+            onChange={(value) => handleInputChange('quota', value)}
+            value={quota}
+            autoComplete="new-password"
+            type="number"
+            position={'bottom'}
+            data={[
+              { value: 500000, label: '1$' },
+              { value: 5000000, label: '10$' },
+              { value: 25000000, label: '50$' },
+              { value: 50000000, label: '100$' },
+              { value: 250000000, label: '500$' },
+              { value: 500000000, label: '1000$' }
+            ]}
           />
           {
-              !isEdit && <>
-                <Divider/>
-                <Typography.Text>生成数量</Typography.Text>
-                <Input
-                    style={{ marginTop: 8 }}
-                    label='生成数量'
-                    name='count'
-                    placeholder={'请输入生成数量'}
-                    onChange={value => handleInputChange('count', value)}
-                    value={count}
-                    autoComplete='new-password'
-                    type='number'
-                />
-              </>
+            !isEdit && <>
+              <Divider />
+              <Typography.Text>生成数量</Typography.Text>
+              <Input
+                style={{ marginTop: 8 }}
+                label="生成数量"
+                name="count"
+                placeholder={'请输入生成数量'}
+                onChange={value => handleInputChange('count', value)}
+                value={count}
+                autoComplete="new-password"
+                type="number"
+              />
+            </>
           }
         </Spin>
       </SideSheet>

web/src/pages/Token/EditToken.js

@@ -1,352 +1,351 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {useParams, useNavigate} from 'react-router-dom';
-import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers';
-import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { API, isMobile, showError, showSuccess, timestamp2string } from '../../helpers';
+import { renderQuotaWithPrompt } from '../../helpers/render';
 import {
-    Layout,
-    SideSheet,
+    AutoComplete,
+    Banner,
     Button,
+    Checkbox,
+    DatePicker,
+    Input,
+    Select,
+    SideSheet,
     Space,
     Spin,
-    Banner,
-    Input,
-    DatePicker,
-    AutoComplete,
-    Typography,
-    Checkbox, Select
-} from "@douyinfe/semi-ui";
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Divider} from "semantic-ui-react";
+    Typography
+} from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Divider } from 'semantic-ui-react';
 
 const EditToken = (props) => {
-    const [isEdit, setIsEdit] = useState(false);
-    const [loading, setLoading] = useState(isEdit);
-    const originInputs = {
-        name: '',
-        remain_quota: isEdit ? 0 : 500000,
-        expired_time: -1,
-        unlimited_quota: false,
-        model_limits_enabled: false,
-        model_limits: [],
-    };
-    const [inputs, setInputs] = useState(originInputs);
-    const {name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits} = inputs;
-    // const [visible, setVisible] = useState(false);
-    const [models, setModels] = useState({});
-    const navigate = useNavigate();
-    const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
-    };
-    const handleCancel = () => {
+  const [isEdit, setIsEdit] = useState(false);
+  const [loading, setLoading] = useState(isEdit);
+  const originInputs = {
+    name: '',
+    remain_quota: isEdit ? 0 : 500000,
+    expired_time: -1,
+    unlimited_quota: false,
+    model_limits_enabled: false,
+    model_limits: []
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits } = inputs;
+  // const [visible, setVisible] = useState(false);
+  const [models, setModels] = useState({});
+  const navigate = useNavigate();
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+  const handleCancel = () => {
+    props.handleClose();
+  };
+  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 loadModels = async () => {
+    let res = await API.get(`/api/user/models`);
+    const { success, message, data } = res.data;
+    if (success) {
+      let localModelOptions = data.map((model) => ({
+        label: model,
+        value: model
+      }));
+      setModels(localModelOptions);
+    } else {
+      showError(message);
+    }
+  };
+
+  const loadToken = async () => {
+    setLoading(true);
+    let res = await API.get(`/api/token/${props.editingToken.id}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data.expired_time !== -1) {
+        data.expired_time = timestamp2string(data.expired_time);
+      }
+      if (data.model_limits !== '') {
+        data.model_limits = data.model_limits.split(',');
+      } else {
+        data.model_limits = [];
+      }
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    setIsEdit(props.editingToken.id !== undefined);
+  }, [props.editingToken.id]);
+
+  useEffect(() => {
+    if (!isEdit) {
+      setInputs(originInputs);
+    } else {
+      loadToken().then(
+        () => {
+          // console.log(inputs);
+        }
+      );
+    }
+    loadModels();
+  }, [isEdit]);
+
+  // 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1
+  const [tokenCount, setTokenCount] = useState(1);
+
+  // 新增处理 tokenCount 变化的函数
+  const handleTokenCountChange = (value) => {
+    // 确保用户输入的是正整数
+    const count = parseInt(value, 10);
+    if (!isNaN(count) && count > 0) {
+      setTokenCount(count);
+    }
+  };
+
+  // 生成一个随机的四位字母数字字符串
+  const generateRandomSuffix = () => {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 6; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+  };
+
+  const submit = async () => {
+    setLoading(true);
+    if (isEdit) {
+      // 编辑令牌的逻辑保持不变
+      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('过期时间格式错误！');
+          setLoading(false);
+          return;
+        }
+        localInputs.expired_time = Math.ceil(time / 1000);
+      }
+      localInputs.model_limits = localInputs.model_limits.join(',');
+      let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(props.editingToken.id) });
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('令牌更新成功！');
+        props.refresh();
         props.handleClose();
-    }
-    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});
+      } else {
+        showError(message);
+      }
+    } else {
+      // 处理新增多个令牌的情况
+      let successCount = 0; // 记录成功创建的令牌数量
+      for (let i = 0; i < tokenCount; i++) {
+        let localInputs = { ...inputs };
+        if (i !== 0) {
+          // 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
+          localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
         }
-    };
+        localInputs.remain_quota = parseInt(localInputs.remain_quota);
 
-    const setUnlimitedQuota = () => {
-        setInputs({...inputs, unlimited_quota: !unlimited_quota});
-    };
+        if (localInputs.expired_time !== -1) {
+          let time = Date.parse(localInputs.expired_time);
+          if (isNaN(time)) {
+            showError('过期时间格式错误！');
+            setLoading(false);
+            break;
+          }
+          localInputs.expired_time = Math.ceil(time / 1000);
+        }
+        localInputs.model_limits = localInputs.model_limits.join(',');
+        let res = await API.post(`/api/token/`, localInputs);
+        const { success, message } = res.data;
 
-    const loadModels = async () => {
-        let res = await API.get(`/api/user/models`);
-        const {success, message, data} = res.data;
         if (success) {
-            let localModelOptions = data.map((model) => ({
-                label: model,
-                value: model
-            }));
-            setModels(localModelOptions);
+          successCount++;
         } else {
-            showError(message);
+          showError(message);
+          break; // 如果创建失败，终止循环
         }
+      }
+
+      if (successCount > 0) {
+        showSuccess(`${successCount}个令牌创建成功，请在列表页面点击复制获取令牌！`);
+        props.refresh();
+        props.handleClose();
+      }
     }
+    setLoading(false);
+    setInputs(originInputs); // 重置表单
+    setTokenCount(1); // 重置数量为默认值
+  };
 
-    const loadToken = async () => {
-        setLoading(true);
-        let res = await API.get(`/api/token/${props.editingToken.id}`);
-        const {success, message, data} = res.data;
-        if (success) {
-            if (data.expired_time !== -1) {
-                data.expired_time = timestamp2string(data.expired_time);
-            }
-            if (data.model_limits !== '') {
-                data.model_limits = data.model_limits.split(',');
-            } else {
-                data.model_limits = [];
-            }
-            setInputs(data);
-        } else {
-            showError(message);
+
+  return (
+    <>
+      <SideSheet
+        placement={isEdit ? 'right' : 'left'}
+        title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        visible={props.visiable}
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Space>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+            </Space>
+          </div>
         }
-        setLoading(false);
-    };
-    useEffect(() => {
-        setIsEdit(props.editingToken.id !== undefined);
-    }, [props.editingToken.id]);
+        closeIcon={null}
+        onCancel={() => handleCancel()}
+        width={isMobile() ? '100%' : 600}
+      >
+        <Spin spinning={loading}>
+          <Input
+            style={{ marginTop: 20 }}
+            label="名称"
+            name="name"
+            placeholder={'请输入名称'}
+            onChange={(value) => handleInputChange('name', value)}
+            value={name}
+            autoComplete="new-password"
+            required={!isEdit}
+          />
+          <Divider />
+          <DatePicker
+            label="过期时间"
+            name="expired_time"
+            placeholder={'请选择过期时间'}
+            onChange={(value) => handleInputChange('expired_time', value)}
+            value={expired_time}
+            autoComplete="new-password"
+            type="dateTime"
+          />
+          <div style={{ marginTop: 20 }}>
+            <Space>
+              <Button type={'tertiary'} onClick={() => {
+                setExpiredTime(0, 0, 0, 0);
+              }}>永不过期</Button>
+              <Button type={'tertiary'} onClick={() => {
+                setExpiredTime(0, 0, 1, 0);
+              }}>一小时</Button>
+              <Button type={'tertiary'} onClick={() => {
+                setExpiredTime(1, 0, 0, 0);
+              }}>一个月</Button>
+              <Button type={'tertiary'} onClick={() => {
+                setExpiredTime(0, 1, 0, 0);
+              }}>一天</Button>
+            </Space>
+          </div>
 
-    useEffect(() => {
-       if (!isEdit) {
-           setInputs(originInputs);
-       } else {
-           loadToken().then(
-               () => {
-                   // console.log(inputs);
-               }
-           );
-       }
-       loadModels();
-    }, [isEdit]);
+          <Divider />
+          <Banner type={'warning'}
+                  description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner>
+          <div style={{ marginTop: 20 }}>
+            <Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
+          </div>
+          <AutoComplete
+            style={{ marginTop: 8 }}
+            name="remain_quota"
+            placeholder={'请输入额度'}
+            onChange={(value) => handleInputChange('remain_quota', value)}
+            value={remain_quota}
+            autoComplete="new-password"
+            type="number"
+            // position={'top'}
+            data={[
+              { value: 500000, label: '1$' },
+              { value: 5000000, label: '10$' },
+              { value: 25000000, label: '50$' },
+              { value: 50000000, label: '100$' },
+              { value: 250000000, label: '500$' },
+              { value: 500000000, label: '1000$' }
+            ]}
+            disabled={unlimited_quota}
+          />
 
-    // 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1
-    const [tokenCount, setTokenCount] = useState(1);
+          {!isEdit && (
+            <>
+              <div style={{ marginTop: 20 }}>
+                <Typography.Text>新建数量</Typography.Text>
+              </div>
+              <AutoComplete
+                style={{ marginTop: 8 }}
+                label="数量"
+                placeholder={'请选择或输入创建令牌的数量'}
+                onChange={(value) => handleTokenCountChange(value)}
+                onSelect={(value) => handleTokenCountChange(value)}
+                value={tokenCount.toString()}
+                autoComplete="off"
+                type="number"
+                data={[
+                  { value: 10, label: '10个' },
+                  { value: 20, label: '20个' },
+                  { value: 30, label: '30个' },
+                  { value: 100, label: '100个' }
+                ]}
+                disabled={unlimited_quota}
+              />
+            </>
+          )}
 
-    // 新增处理 tokenCount 变化的函数
-    const handleTokenCountChange = (value) => {
-        // 确保用户输入的是正整数
-        const count = parseInt(value, 10);
-        if (!isNaN(count) && count > 0) {
-            setTokenCount(count);
-        }
-    };
+          <div>
+            <Button style={{ marginTop: 8 }} type={'warning'} onClick={() => {
+              setUnlimitedQuota();
+            }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
+          </div>
+          <Divider />
+          <div style={{ marginTop: 10, display: 'flex' }}>
+            <Space>
+              <Checkbox
+                name="model_limits_enabled"
+                checked={model_limits_enabled}
+                onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
+              >
+              </Checkbox>
+              <Typography.Text>启用模型限制（非必要，不建议启用）</Typography.Text>
+            </Space>
+          </div>
 
-    // 生成一个随机的四位字母数字字符串
-    const generateRandomSuffix = () => {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < 6; i++) {
-            result += characters.charAt(Math.floor(Math.random() * characters.length));
-        }
-        return result;
-    };
-
-    const submit = async () => {
-        setLoading(true);
-        if (isEdit) {
-            // 编辑令牌的逻辑保持不变
-            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('过期时间格式错误！');
-                    setLoading(false);
-                    return;
-                }
-                localInputs.expired_time = Math.ceil(time / 1000);
-            }
-            localInputs.model_limits = localInputs.model_limits.join(',');
-            let res = await API.put(`/api/token/`, {...localInputs, id: parseInt(props.editingToken.id)});
-            const {success, message} = res.data;
-            if (success) {
-                showSuccess('令牌更新成功！');
-                props.refresh();
-                props.handleClose();
-            } else {
-                showError(message);
-            }
-        } else {
-            // 处理新增多个令牌的情况
-            let successCount = 0; // 记录成功创建的令牌数量
-            for (let i = 0; i < tokenCount; i++) {
-                let localInputs = {...inputs};
-                if (i !== 0) {
-                    // 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
-                    localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
-                }
-                localInputs.remain_quota = parseInt(localInputs.remain_quota);
-
-                if (localInputs.expired_time !== -1) {
-                    let time = Date.parse(localInputs.expired_time);
-                    if (isNaN(time)) {
-                        showError('过期时间格式错误！');
-                        setLoading(false);
-                        break;
-                    }
-                    localInputs.expired_time = Math.ceil(time / 1000);
-                }
-                localInputs.model_limits = localInputs.model_limits.join(',');
-                let res = await API.post(`/api/token/`, localInputs);
-                const {success, message} = res.data;
-
-                if (success) {
-                    successCount++;
-                } else {
-                    showError(message);
-                    break; // 如果创建失败，终止循环
-                }
-            }
-
-            if (successCount > 0) {
-                showSuccess(`${successCount}个令牌创建成功，请在列表页面点击复制获取令牌！`);
-                props.refresh();
-                props.handleClose();
-            }
-        }
-        setLoading(false);
-        setInputs(originInputs); // 重置表单
-        setTokenCount(1); // 重置数量为默认值
-    };
-
-
-
-    return (
-        <>
-            <SideSheet
-                placement={isEdit ? 'right' : 'left'}
-                title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
-                headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                visible={props.visiable}
-                footer={
-                    <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-                        <Space>
-                            <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                            <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
-                        </Space>
-                    </div>
-                }
-                closeIcon={null}
-                onCancel={() => handleCancel()}
-                width={isMobile() ? '100%' : 600}
-            >
-                <Spin spinning={loading}>
-                    <Input
-                        style={{marginTop: 20}}
-                        label='名称'
-                        name='name'
-                        placeholder={'请输入名称'}
-                        onChange={(value) => handleInputChange('name', value)}
-                        value={name}
-                        autoComplete='new-password'
-                        required={!isEdit}
-                    />
-                    <Divider/>
-                    <DatePicker
-                        label='过期时间'
-                        name='expired_time'
-                        placeholder={'请选择过期时间'}
-                        onChange={(value) => handleInputChange('expired_time', value)}
-                        value={expired_time}
-                        autoComplete='new-password'
-                        type='dateTime'
-                    />
-                    <div style={{marginTop: 20}}>
-                        <Space>
-                            <Button type={'tertiary'} onClick={() => {
-                                setExpiredTime(0, 0, 0, 0);
-                            }}>永不过期</Button>
-                            <Button type={'tertiary'} onClick={() => {
-                                setExpiredTime(0, 0, 1, 0);
-                            }}>一小时</Button>
-                            <Button type={'tertiary'} onClick={() => {
-                                setExpiredTime(1, 0, 0, 0);
-                            }}>一个月</Button>
-                            <Button type={'tertiary'} onClick={() => {
-                                setExpiredTime(0, 1, 0, 0);
-                            }}>一天</Button>
-                        </Space>
-                    </div>
-
-                    <Divider/>
-                    <Banner type={'warning'}
-                            description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner>
-                    <div style={{marginTop: 20}}>
-                        <Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
-                    </div>
-                    <AutoComplete
-                        style={{marginTop: 8}}
-                        name='remain_quota'
-                        placeholder={'请输入额度'}
-                        onChange={(value) => handleInputChange('remain_quota', value)}
-                        value={remain_quota}
-                        autoComplete='new-password'
-                        type='number'
-                        // position={'top'}
-                        data={[
-                            {value: 500000, label: '1$'},
-                            {value: 5000000, label: '10$'},
-                            {value: 25000000, label: '50$'},
-                            {value: 50000000, label: '100$'},
-                            {value: 250000000, label: '500$'},
-                            {value: 500000000, label: '1000$'},
-                        ]}
-                        disabled={unlimited_quota}
-                    />
-
-                    {!isEdit && (
-                        <>
-                            <div style={{marginTop: 20}}>
-                                <Typography.Text>新建数量</Typography.Text>
-                            </div>
-                            <AutoComplete
-                                style={{ marginTop: 8 }}
-                                label='数量'
-                                placeholder={'请选择或输入创建令牌的数量'}
-                                onChange={(value) => handleTokenCountChange(value)}
-                                onSelect={(value) => handleTokenCountChange(value)}
-                                value={tokenCount.toString()}
-                                autoComplete='off'
-                                type='number'
-                                data={[
-                                    { value: 10, label: '10个' },
-                                    { value: 20, label: '20个' },
-                                    { value: 30, label: '30个' },
-                                    { value: 100, label: '100个' },
-                                ]}
-                                disabled={unlimited_quota}
-                            />
-                        </>
-                    )}
-
-                    <div>
-                        <Button style={{marginTop: 8}} type={'warning'} onClick={() => {
-                            setUnlimitedQuota();
-                        }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
-                    </div>
-                    <Divider/>
-                    <div style={{marginTop: 10, display: 'flex'}}>
-                        <Space>
-                            <Checkbox
-                                name='model_limits_enabled'
-                                checked={model_limits_enabled}
-                                onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
-                            >
-                            </Checkbox>
-                            <Typography.Text>启用模型限制（非必要，不建议启用）</Typography.Text>
-                        </Space>
-                    </div>
-
-                    <Select
-                        style={{marginTop: 8}}
-                        placeholder={'请选择该渠道所支持的模型'}
-                        name='models'
-                        required
-                        multiple
-                        selection
-                        onChange={value => {
-                            handleInputChange('model_limits', value);
-                        }}
-                        value={inputs.model_limits}
-                        autoComplete='new-password'
-                        optionList={models}
-                        disabled={!model_limits_enabled}
-                    />
-                </Spin>
-            </SideSheet>
-        </>
-    );
+          <Select
+            style={{ marginTop: 8 }}
+            placeholder={'请选择该渠道所支持的模型'}
+            name="models"
+            required
+            multiple
+            selection
+            onChange={value => {
+              handleInputChange('model_limits', value);
+            }}
+            value={inputs.model_limits}
+            autoComplete="new-password"
+            optionList={models}
+            disabled={!model_limits_enabled}
+          />
+        </Spin>
+      </SideSheet>
+    </>
+  );
 };
 
 export default EditToken;

web/src/pages/User/AddUser.js

@@ -1,98 +1,98 @@
-import React, {useState} from 'react';
-import {API, isMobile, showError, showSuccess} from '../../helpers';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Button, SideSheet, Space, Input, Spin} from "@douyinfe/semi-ui";
+import React, { useState } from 'react';
+import { API, isMobile, showError, showSuccess } from '../../helpers';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';
 
 const AddUser = (props) => {
-    const originInputs = {
-        username: '',
-        display_name: '',
-        password: '',
-    };
-    const [inputs, setInputs] = useState(originInputs);
-    const [loading, setLoading] = useState(false);
-    const {username, display_name, password} = inputs;
+  const originInputs = {
+    username: '',
+    display_name: '',
+    password: ''
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const [loading, setLoading] = useState(false);
+  const { username, display_name, password } = inputs;
 
-    const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
-    };
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
 
-    const submit = async () => {
-        setLoading(true);
-        if (inputs.username === '' || inputs.password === '') return;
-        const res = await API.post(`/api/user/`, inputs);
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess('用户账户创建成功！');
-            setInputs(originInputs);
-            props.refresh();
-            props.handleClose();
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
-
-    const handleCancel = () => {
-        props.handleClose();
+  const submit = async () => {
+    setLoading(true);
+    if (inputs.username === '' || inputs.password === '') return;
+    const res = await API.post(`/api/user/`, inputs);
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('用户账户创建成功！');
+      setInputs(originInputs);
+      props.refresh();
+      props.handleClose();
+    } else {
+      showError(message);
     }
+    setLoading(false);
+  };
 
-    return (
-        <>
-            <SideSheet
-                placement={'left'}
-                title={<Title level={3}>{'添加用户'}</Title>}
-                headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                visible={props.visible}
-                footer={
-                    <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-                        <Space>
-                            <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                            <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
-                        </Space>
-                    </div>
-                }
-                closeIcon={null}
-                onCancel={() => handleCancel()}
-                width={isMobile() ? '100%' : 600}
-            >
-                <Spin spinning={loading}>
-                    <Input
-                        style={{marginTop: 20}}
-                        label="用户名"
-                        name="username"
-                        addonBefore={'用户名'}
-                        placeholder={'请输入用户名'}
-                        onChange={value => handleInputChange('username', value)}
-                        value={username}
-                        autoComplete="off"
-                    />
-                    <Input
-                        style={{marginTop: 20}}
-                        addonBefore={'显示名'}
-                        label="显示名称"
-                        name="display_name"
-                        autoComplete="off"
-                        placeholder={'请输入显示名称'}
-                        onChange={value => handleInputChange('display_name', value)}
-                        value={display_name}
-                    />
-                    <Input
-                        style={{marginTop: 20}}
-                        label="密 码"
-                        name="password"
-                        type={'password'}
-                        addonBefore={'密码'}
-                        placeholder={'请输入密码'}
-                        onChange={value => handleInputChange('password', value)}
-                        value={password}
-                        autoComplete="off"
-                    />
-                </Spin>
-            </SideSheet>
-        </>
-    );
+  const handleCancel = () => {
+    props.handleClose();
+  };
+
+  return (
+    <>
+      <SideSheet
+        placement={'left'}
+        title={<Title level={3}>{'添加用户'}</Title>}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        visible={props.visible}
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Space>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+            </Space>
+          </div>
+        }
+        closeIcon={null}
+        onCancel={() => handleCancel()}
+        width={isMobile() ? '100%' : 600}
+      >
+        <Spin spinning={loading}>
+          <Input
+            style={{ marginTop: 20 }}
+            label="用户名"
+            name="username"
+            addonBefore={'用户名'}
+            placeholder={'请输入用户名'}
+            onChange={value => handleInputChange('username', value)}
+            value={username}
+            autoComplete="off"
+          />
+          <Input
+            style={{ marginTop: 20 }}
+            addonBefore={'显示名'}
+            label="显示名称"
+            name="display_name"
+            autoComplete="off"
+            placeholder={'请输入显示名称'}
+            onChange={value => handleInputChange('display_name', value)}
+            value={display_name}
+          />
+          <Input
+            style={{ marginTop: 20 }}
+            label="密 码"
+            name="password"
+            type={'password'}
+            addonBefore={'密码'}
+            placeholder={'请输入密码'}
+            onChange={value => handleInputChange('password', value)}
+            value={password}
+            autoComplete="off"
+          />
+        </Spin>
+      </SideSheet>
+    </>
+  );
 };
 
 export default AddUser;

web/src/pages/User/EditUser.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
-import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import { SideSheet, Space, Button, Spin, Input, Typography, Select, Divider } from "@douyinfe/semi-ui";
+import { renderQuotaWithPrompt } from '../../helpers/render';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Button, Divider, Input, Select, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
 
 const EditUser = (props) => {
   const userId = props.editingUser.id;
@@ -29,7 +29,7 @@ const EditUser = (props) => {
       let res = await API.get(`/api/group/`);
       setGroupOptions(res.data.data.map((group) => ({
         label: group,
-        value: group,
+        value: group
       })));
     } catch (error) {
       showError(error.message);
@@ -38,7 +38,7 @@ const EditUser = (props) => {
   const navigate = useNavigate();
   const handleCancel = () => {
     props.handleClose();
-  }
+  };
   const loadUser = async () => {
     setLoading(true);
     let res = undefined;
@@ -98,8 +98,8 @@ const EditUser = (props) => {
         footer={
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-              <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
             </Space>
           </div>
         }
@@ -112,35 +112,35 @@ const EditUser = (props) => {
             <Typography.Text>用户名</Typography.Text>
           </div>
           <Input
-            label='用户名'
-            name='username'
+            label="用户名"
+            name="username"
             placeholder={'请输入新的用户名'}
             onChange={value => handleInputChange('username', value)}
             value={username}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           <div style={{ marginTop: 20 }}>
             <Typography.Text>密码</Typography.Text>
           </div>
           <Input
-            label='密码'
-            name='password'
+            label="密码"
+            name="password"
             type={'password'}
             placeholder={'请输入新的密码，最短 8 位'}
             onChange={value => handleInputChange('password', value)}
             value={password}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           <div style={{ marginTop: 20 }}>
             <Typography.Text>显示名称</Typography.Text>
           </div>
           <Input
-            label='显示名称'
-            name='display_name'
+            label="显示名称"
+            name="display_name"
             placeholder={'请输入新的显示名称'}
             onChange={value => handleInputChange('display_name', value)}
             value={display_name}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           {
             userId && <>
@@ -149,7 +149,7 @@ const EditUser = (props) => {
               </div>
               <Select
                 placeholder={'请选择分组'}
-                name='group'
+                name="group"
                 fluid
                 search
                 selection
@@ -157,19 +157,19 @@ const EditUser = (props) => {
                 additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
                 onChange={value => handleInputChange('group', value)}
                 value={inputs.group}
-                autoComplete='new-password'
+                autoComplete="new-password"
                 optionList={groupOptions}
               />
               <div style={{ marginTop: 20 }}>
                 <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
               </div>
               <Input
-                name='quota'
+                name="quota"
                 placeholder={'请输入新的剩余额度'}
                 onChange={value => handleInputChange('quota', value)}
                 value={quota}
                 type={'number'}
-                autoComplete='new-password'
+                autoComplete="new-password"
               />
             </>
           }
@@ -178,37 +178,37 @@ const EditUser = (props) => {
             <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
           </div>
           <Input
-            name='github_id'
+            name="github_id"
             value={github_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
           />
           <div style={{ marginTop: 20 }}>
             <Typography.Text>已绑定的微信账户</Typography.Text>
           </div>
           <Input
-            name='wechat_id'
+            name="wechat_id"
             value={wechat_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
           />
           <Input
-            name='telegram_id'
+            name="telegram_id"
             value={telegram_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
           />
           <div style={{ marginTop: 20 }}>
             <Typography.Text>已绑定的邮箱账户</Typography.Text>
           </div>
           <Input
-            name='email'
+            name="email"
             value={email}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
           />
         </Spin>