更新用户管理界面UI

web/src/App.js

@@ -8,7 +8,6 @@ import LoginForm from './components/LoginForm';
 import NotFound from './pages/NotFound';
 import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
-import AddUser from './pages/User/AddUser';
 import { API, getLogo, getSystemName, showError, showNotice } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
 import GitHubOAuth from './components/GitHubOAuth';
@@ -17,10 +16,8 @@ import { UserContext } from './context/User';
 import { StatusContext } from './context/Status';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
-import EditToken from './pages/Token/EditToken';
 import EditChannel from './pages/Channel/EditChannel';
 import Redemption from './pages/Redemption';
-import EditRedemption from './pages/Redemption/EditRedemption';
 import TopUp from './pages/TopUp';
 import Log from './pages/Log';
 import Chat from './pages/Chat';
@@ -132,22 +129,6 @@ function App() {
                     }
                 />
                 <Route
-                    path='/token/edit/:id'
-                    element={
-                        <Suspense fallback={<Loading></Loading>}>
-                            <EditToken />
-                        </Suspense>
-                    }
-                />
-                <Route
-                    path='/token/add'
-                    element={
-                        <Suspense fallback={<Loading></Loading>}>
-                            <EditToken />
-                        </Suspense>
-                    }
-                />
-                <Route
                     path='/redemption'
                     element={
                         <PrivateRoute>
@@ -156,22 +137,6 @@ function App() {
                     }
                 />
                 <Route
-                    path='/redemption/edit/:id'
-                    element={
-                        <Suspense fallback={<Loading></Loading>}>
-                            <EditRedemption />
-                        </Suspense>
-                    }
-                />
-                <Route
-                    path='/redemption/add'
-                    element={
-                        <Suspense fallback={<Loading></Loading>}>
-                            <EditRedemption />
-                        </Suspense>
-                    }
-                />
-                <Route
                     path='/user'
                     element={
                         <PrivateRoute>
@@ -196,14 +161,6 @@ function App() {
                     }
                 />
                 <Route
-                    path='/user/add'
-                    element={
-                        <Suspense fallback={<Loading></Loading>}>
-                            <AddUser />
-                        </Suspense>
-                    }
-                />
-                <Route
                     path='/user/reset'
                     element={
                         <Suspense fallback={<Loading></Loading>}>

web/src/components/RedemptionsTable.js

 import React, {useEffect, useState} from 'react';
-import {Link} from 'react-router-dom';
 import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers';
 
 import {ITEMS_PER_PAGE} from '../constants';
 import {renderQuota} from '../helpers/render';
 import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui";
 import EditRedemption from "../pages/Redemption/EditRedemption";
-import editRedemption from "../pages/Redemption/EditRedemption";
 
 function renderTimestamp(timestamp) {
     return (

web/src/helpers/render.js

 import { Label } from 'semantic-ui-react';
+import {Tag} from "@douyinfe/semi-ui";
 
 export function renderText(text, limit) {
   if (text.length > limit) {
@@ -9,18 +10,22 @@ export function renderText(text, limit) {
 
 export function renderGroup(group) {
   if (group === '') {
-    return <Label>default</Label>;
+    return <Tag size='large'>default</Tag>;
   }
   let groups = group.split(',');
   groups.sort();
   return <>
     {groups.map((group) => {
       if (group === 'vip' || group === 'pro') {
-        return <Label color='yellow'>{group}</Label>;
+        return <Tag size='large' color='yellow'>{group}</Tag>;
       } else if (group === 'svip' || group === 'premium') {
-        return <Label color='red'>{group}</Label>;
+        return <Tag size='large' color='red'>{group}</Tag>;
+      }
+      if (group === 'default') {
+        return <Tag size='large'>{group}</Tag>;
+      } else {
+        return <Tag size='large' color={stringToColor(group)}>{group}</Tag>;
       }
-      return <Label>{group}</Label>;
     })}
   </>;
 }

web/src/pages/Token/EditToken.js

 import React, {useEffect, useRef, useState} from 'react';
-// import {Button, Form, Header, Message, Segment} from 'semantic-ui-react';
 import {useParams, useNavigate} from 'react-router-dom';
 import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers';
 import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render';
@@ -247,7 +246,7 @@ const EditToken = (props) => {
                         disabled={unlimited_quota}
                     />
                     <div style={{marginTop: 20}}>
-                        <Typography.Text>{`新建数量`}</Typography.Text>
+                        <Typography.Text>新建数量</Typography.Text>
                     </div>
                     {!isEdit && (
                         <AutoComplete

web/src/pages/User/AddUser.js

-import React, { useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
-import { API, showError, showSuccess } from '../../helpers';
+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";
 
-const AddUser = () => {
-  const originInputs = {
-    username: '',
-    display_name: '',
-    password: '',
-  };
-  const [inputs, setInputs] = useState(originInputs);
-  const { username, display_name, password } = inputs;
+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 handleInputChange = (e, { name, value }) => {
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-  };
+    const handleInputChange = (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);
+    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();
     }
-  };
 
-  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>
-    </>
-  );
+    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/index.js

 import React from 'react';
 import { Segment, Header } from 'semantic-ui-react';
 import UsersTable from '../../components/UsersTable';
+import {Layout} from "@douyinfe/semi-ui";
 
 const User = () => (
   <>
-    <Segment>
-      <Header as='h3'>管理用户</Header>
-      <UsersTable/>
-    </Segment>
+    <Layout>
+        <Layout.Header>
+            <h3>管理用户</h3>
+        </Layout.Header>
+        <Layout.Content>
+            <UsersTable/>
+        </Layout.Content>
+    </Layout>
   </>
 );