更新用户管理界面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 AddUser = (props) => {
     const originInputs = {
         username: '',
         display_name: '',
         password: '',
     };
     const [inputs, setInputs] = useState(originInputs);
-  const { username, display_name, password } = inputs;
+    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 () => {
+        setLoading(true);
         if (inputs.username === '' || inputs.password === '') return;
         const res = await API.post(`/api/user/`, inputs);
-    const { success, message } = res.data;
+        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
+            <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={handleInputChange}
+                        onChange={value => handleInputChange('username', value)}
                         value={username}
                         autoComplete="off"
-              required
                     />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
+                    <Input
+                        style={{marginTop: 20}}
+                        addonBefore={'显示名'}
                         label="显示名称"
                         name="display_name"
+                        autoComplete="off"
                         placeholder={'请输入显示名称'}
-              onChange={handleInputChange}
+                        onChange={value => handleInputChange('display_name', value)}
                         value={display_name}
-              autoComplete="off"
                     />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label="密码"
+                    <Input
+                        style={{marginTop: 20}}
+                        label="密 码"
                         name="password"
                         type={'password'}
+                        addonBefore={'密码'}
                         placeholder={'请输入密码'}
-              onChange={handleInputChange}
+                        onChange={value => handleInputChange('password', value)}
                         value={password}
                         autoComplete="off"
-              required
                     />
-          </Form.Field>
-          <Button positive type={'submit'} onClick={submit}>
-            提交
-          </Button>
-        </Form>
-      </Segment>
+                </Spin>
+            </SideSheet>
         </>
     );
 };

web/src/pages/User/EditUser.js

 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 {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";
 
-const EditUser = () => {
-  const params = useParams();
-  const userId = params.id;
+const EditUser = (props) => {
+  const userId = props.editingUser.id;
   const [loading, setLoading] = useState(true);
   const [inputs, setInputs] = useState({
     username: '',
@@ -21,15 +21,14 @@ const EditUser = () => {
   const [groupOptions, setGroupOptions] = useState([]);
   const { username, display_name, password, github_id, wechat_id, email, quota, group } =
       inputs;
-  const handleInputChange = (e, { name, value }) => {
+  const handleInputChange = (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,
+        label: group,
         value: group,
       })));
     } catch (error) {
@@ -38,9 +37,10 @@ const EditUser = () => {
   };
   const navigate = useNavigate();
   const handleCancel = () => {
-    navigate("/setting");
+    props.handleClose();
   }
   const loadUser = async () => {
+    setLoading(true);
     let res = undefined;
     if (userId) {
       res = await API.get(`/api/user/${userId}`);
@@ -56,14 +56,16 @@ const EditUser = () => {
     }
     setLoading(false);
   };
+
   useEffect(() => {
     loadUser().then();
     if (userId) {
       fetchGroups().then();
     }
-  }, []);
+  }, [props.editingUser.id]);
 
   const submit = async () => {
+    setLoading(true);
     let res = undefined;
     if (userId) {
       let data = { ...inputs, id: parseInt(userId) };
@@ -77,52 +79,75 @@ const EditUser = () => {
     const { success, message } = res.data;
     if (success) {
       showSuccess('用户信息更新成功！');
+      props.refresh();
+      props.handleClose();
     } else {
       showError(message);
     }
+    setLoading(false);
   };
 
   return (
       <>
-        <Segment loading={loading}>
-          <Header as='h3'>更新用户信息</Header>
-          <Form autoComplete='new-password'>
-            <Form.Field>
-              <Form.Input
+        <SideSheet
+            placement={'right'}
+            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}>
+            <div style={{marginTop: 20}}>
+              <Typography.Text>用户名</Typography.Text>
+            </div>
+            <Input
                 label='用户名'
                 name='username'
                 placeholder={'请输入新的用户名'}
-                  onChange={handleInputChange}
+                onChange={value => handleInputChange('username', value)}
                 value={username}
                 autoComplete='new-password'
             />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
+            <div style={{marginTop: 20}}>
+              <Typography.Text>密码</Typography.Text>
+            </div>
+            <Input
                 label='密码'
                 name='password'
                 type={'password'}
                 placeholder={'请输入新的密码，最短 8 位'}
-                  onChange={handleInputChange}
+                onChange={value => handleInputChange('password', value)}
                 value={password}
                 autoComplete='new-password'
             />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
+            <div style={{marginTop: 20}}>
+              <Typography.Text>显示名称</Typography.Text>
+            </div>
+            <Input
                 label='显示名称'
                 name='display_name'
                 placeholder={'请输入新的显示名称'}
-                  onChange={handleInputChange}
+                onChange={value => handleInputChange('display_name', value)}
                 value={display_name}
                 autoComplete='new-password'
             />
-            </Form.Field>
             {
                 userId && <>
-                  <Form.Field>
-                    <Form.Dropdown
-                        label='分组'
+                  <div style={{marginTop: 20}}>
+                    <Typography.Text>分组</Typography.Text>
+                  </div>
+                  <Select
                       placeholder={'请选择分组'}
                       name='group'
                       fluid
@@ -130,59 +155,58 @@ const EditUser = () => {
                       selection
                       allowAdditions
                       additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-                        onChange={handleInputChange}
+                      onChange={value => handleInputChange('group', value)}
                       value={inputs.group}
                       autoComplete='new-password'
-                        options={groupOptions}
+                      optionList={groupOptions}
                   />
-                  </Form.Field>
-                  <Form.Field>
-                    <Form.Input
-                        label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                  <div style={{marginTop: 20}}>
+                    <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+                  </div>
+                  <Input
                       name='quota'
                       placeholder={'请输入新的剩余额度'}
-                        onChange={handleInputChange}
+                      onChange={value => handleInputChange('quota', value)}
                       value={quota}
                       type={'number'}
                       autoComplete='new-password'
                   />
-                  </Form.Field>
                 </>
             }
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的 GitHub 账户'
+            <Divider style={{marginTop: 20}}>以下信息不可修改</Divider>
+            <div style={{marginTop: 20}}>
+              <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
+            </div>
+            <Input
                 name='github_id'
                 value={github_id}
                 autoComplete='new-password'
                 placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
+                readonly
             />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的微信账户'
+            <div style={{marginTop: 20}}>
+              <Typography.Text>已绑定的微信账户</Typography.Text>
+            </div>
+            <Input
                 name='wechat_id'
                 value={wechat_id}
                 autoComplete='new-password'
                 placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
+                readonly
             />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的邮箱账户'
+            <div style={{marginTop: 20}}>
+              <Typography.Text>已绑定的邮箱账户</Typography.Text>
+            </div>
+            <Input
                 name='email'
                 value={email}
                 autoComplete='new-password'
                 placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
+                readonly
             />
-            </Form.Field>
-            <Button onClick={handleCancel}>取消</Button>
-            <Button positive onClick={submit}>提交</Button>
-          </Form>
-        </Segment>
+          </Spin>
+
+        </SideSheet>
       </>
   );
 };

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>
+    <Layout>
+        <Layout.Header>
+            <h3>管理用户</h3>
+        </Layout.Header>
+        <Layout.Content>
             <UsersTable/>
-    </Segment>
+        </Layout.Content>
+    </Layout>
   </>
 );