chore: update default theme style

web/default/src/pages/Channel/EditChannel.js

@@ -280,8 +280,8 @@ const EditChannel = () => {
             {inputs.type === 3 && (
               <>
                 <Message>
-                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为
-                  One API 会把请求体中的 model
+                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>
+                  ，因为 One API 会把请求体中的 model
                   参数替换为你的部署名称（模型名称中的点会被剔除），
                   <a
                     target='_blank'
@@ -686,7 +686,11 @@ const EditChannel = () => {
               </Form.Field>
             )}
             <Button onClick={handleCancel}>取消</Button>
-            <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>
+            <Button
+              type={isEdit ? 'button' : 'submit'}
+              positive
+              onClick={submit}
+            >
               提交
             </Button>
           </Form>

web/default/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -13,7 +13,7 @@ const EditRedemption = () => {
   const originInputs = {
     name: '',
     quota: 100000,
-    count: 1
+    count: 1,
   };
   const [inputs, setInputs] = useState(originInputs);
   const { name, quota, count } = inputs;
@@ -49,10 +49,13 @@ const EditRedemption = () => {
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, {
+        ...localInputs,
+        id: parseInt(redemptionId),
+      });
     } else {
       res = await API.post(`/api/redemption/`, {
-        ...localInputs
+        ...localInputs,
       });
     }
     const { success, message, data } = res.data;
@@ -67,19 +70,22 @@ const EditRedemption = () => {
       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`);
     }
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
-        <Form autoComplete='new-password'>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
             <Form.Field>
               <Form.Input
                 label='名称'
@@ -102,8 +108,8 @@ const EditRedemption = () => {
                 type='number'
               />
             </Form.Field>
-          {
-            !isEdit && <>
+            {!isEdit && (
+              <>
                 <Form.Field>
                   <Form.Input
                     label='生成数量'
@@ -116,12 +122,15 @@ const EditRedemption = () => {
                   />
                 </Form.Field>
               </>
-          }
-          <Button positive onClick={submit}>提交</Button>
+            )}
+            <Button positive onClick={submit}>
+              提交
+            </Button>
             <Button onClick={handleCancel}>取消</Button>
           </Form>
-      </Segment>
-    </>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

web/default/src/pages/Token/EditToken.js

@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Message,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   API,
@@ -130,10 +137,13 @@ const EditToken = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Header>
-        <Form autoComplete='new-password'>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新令牌信息' : '创建新的令牌'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
             <Form.Field>
               <Form.Input
                 label='名称'
@@ -260,8 +270,9 @@ const EditToken = () => {
               取消
             </Button>
           </Form>
-      </Segment>
-    </>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

web/default/src/pages/User/EditUser.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -16,30 +16,40 @@ const EditUser = () => {
     wechat_id: '',
     email: '',
     quota: 0,
-    group: 'default'
+    group: 'default',
   });
   const [groupOptions, setGroupOptions] = useState([]);
-  const { username, display_name, password, github_id, wechat_id, email, quota, group } =
-    inputs;
+  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) => ({
+      setGroupOptions(
+        res.data.data.map((group) => ({
           key: group,
           text: group,
           value: group,
-      })));
+        }))
+      );
     } catch (error) {
       showError(error.message);
     }
   };
   const navigate = useNavigate();
   const handleCancel = () => {
-    navigate("/setting");
-  }
+    navigate('/setting');
+  };
   const loadUser = async () => {
     let res = undefined;
     if (userId) {
@@ -83,10 +93,11 @@ const EditUser = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>更新用户信息</Header>
-        <Form autoComplete='new-password'>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>更新用户信息</Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
             <Form.Field>
               <Form.Input
                 label='用户名'
@@ -118,8 +129,8 @@ const EditUser = () => {
                 autoComplete='new-password'
               />
             </Form.Field>
-          {
-            userId && <>
+            {userId && (
+              <>
                 <Form.Field>
                   <Form.Dropdown
                     label='分组'
@@ -129,7 +140,9 @@ const EditUser = () => {
                     search
                     selection
                     allowAdditions
-                  additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                    additionLabel={
+                      '请在系统设置页面编辑分组倍率以添加新的分组：'
+                    }
                     onChange={handleInputChange}
                     value={inputs.group}
                     autoComplete='new-password'
@@ -148,7 +161,7 @@ const EditUser = () => {
                   />
                 </Form.Field>
               </>
-          }
+            )}
             <Form.Field>
               <Form.Input
                 label='已绑定的 GitHub 账户'
@@ -180,10 +193,13 @@ const EditUser = () => {
               />
             </Form.Field>
             <Button onClick={handleCancel}>取消</Button>
-          <Button positive onClick={submit}>提交</Button>
+            <Button positive onClick={submit}>
+              提交
+            </Button>
           </Form>
-      </Segment>
-    </>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };