chore: update default theme style

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,138 +137,142 @@ const EditToken = () => {
   };
 
   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.Dropdown
-              label='模型范围'
-              placeholder={'请选择允许使用的模型，留空则不进行限制'}
-              name='models'
-              fluid
-              multiple
-              search
-              onLabelClick={(e, { value }) => {
-                copy(value).then();
-              }}
-              selection
-              onChange={handleInputChange}
-              value={inputs.models}
-              autoComplete='new-password'
-              options={modelOptions}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='IP 限制'
-              name='subnet'
-              placeholder={
-                '请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'
-              }
-              onChange={handleInputChange}
-              value={inputs.subnet}
-              autoComplete='new-password'
-            />
-          </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' }}>
+    <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='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Dropdown
+                label='模型范围'
+                placeholder={'请选择允许使用的模型，留空则不进行限制'}
+                name='models'
+                fluid
+                multiple
+                search
+                onLabelClick={(e, { value }) => {
+                  copy(value).then();
+                }}
+                selection
+                onChange={handleInputChange}
+                value={inputs.models}
+                autoComplete='new-password'
+                options={modelOptions}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='IP 限制'
+                name='subnet'
+                placeholder={
+                  '请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'
+                }
+                onChange={handleInputChange}
+                value={inputs.subnet}
+                autoComplete='new-password'
+              />
+            </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={() => {
-                setExpiredTime(0, 0, 0, 0);
+                setUnlimitedQuota();
               }}
             >
-              永不过期
+              {unlimited_quota ? '取消无限额度' : '设为无限额度'}
             </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(1, 0, 0, 0);
-              }}
-            >
-              一个月后过期
+            <Button floated='right' positive onClick={submit}>
+              提交
             </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(0, 1, 0, 0);
-              }}
-            >
-              一天后过期
+            <Button floated='right' onClick={handleCancel}>
+              取消
             </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>
-    </>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };