更新用户管理界面UI

web/src/pages/User/AddUser.js

@@ -1,77 +1,98 @@
-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/EditUser.js

@@ -1,12 +1,12 @@
 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,112 +79,134 @@ 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
-                  label='用户名'
-                  name='username'
-                  placeholder={'请输入新的用户名'}
-                  onChange={handleInputChange}
-                  value={username}
-                  autoComplete='new-password'
-              />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='密码'
-                  name='password'
-                  type={'password'}
-                  placeholder={'请输入新的密码，最短 8 位'}
-                  onChange={handleInputChange}
-                  value={password}
-                  autoComplete='new-password'
-              />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='显示名称'
-                  name='display_name'
-                  placeholder={'请输入新的显示名称'}
-                  onChange={handleInputChange}
-                  value={display_name}
-                  autoComplete='new-password'
-              />
-            </Form.Field>
+        <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={value => handleInputChange('username', value)}
+                value={username}
+                autoComplete='new-password'
+            />
+            <div style={{marginTop: 20}}>
+              <Typography.Text>密码</Typography.Text>
+            </div>
+            <Input
+                label='密码'
+                name='password'
+                type={'password'}
+                placeholder={'请输入新的密码，最短 8 位'}
+                onChange={value => handleInputChange('password', value)}
+                value={password}
+                autoComplete='new-password'
+            />
+            <div style={{marginTop: 20}}>
+              <Typography.Text>显示名称</Typography.Text>
+            </div>
+            <Input
+                label='显示名称'
+                name='display_name'
+                placeholder={'请输入新的显示名称'}
+                onChange={value => handleInputChange('display_name', value)}
+                value={display_name}
+                autoComplete='new-password'
+            />
             {
                 userId && <>
-                  <Form.Field>
-                    <Form.Dropdown
-                        label='分组'
-                        placeholder={'请选择分组'}
-                        name='group'
-                        fluid
-                        search
-                        selection
-                        allowAdditions
-                        additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-                        onChange={handleInputChange}
-                        value={inputs.group}
-                        autoComplete='new-password'
-                        options={groupOptions}
-                    />
-                  </Form.Field>
-                  <Form.Field>
-                    <Form.Input
-                        label={`剩余额度${renderQuotaWithPrompt(quota)}`}
-                        name='quota'
-                        placeholder={'请输入新的剩余额度'}
-                        onChange={handleInputChange}
-                        value={quota}
-                        type={'number'}
-                        autoComplete='new-password'
-                    />
-                  </Form.Field>
+                  <div style={{marginTop: 20}}>
+                    <Typography.Text>分组</Typography.Text>
+                  </div>
+                  <Select
+                      placeholder={'请选择分组'}
+                      name='group'
+                      fluid
+                      search
+                      selection
+                      allowAdditions
+                      additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                      onChange={value => handleInputChange('group', value)}
+                      value={inputs.group}
+                      autoComplete='new-password'
+                      optionList={groupOptions}
+                  />
+                  <div style={{marginTop: 20}}>
+                    <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+                  </div>
+                  <Input
+                      name='quota'
+                      placeholder={'请输入新的剩余额度'}
+                      onChange={value => handleInputChange('quota', value)}
+                      value={quota}
+                      type={'number'}
+                      autoComplete='new-password'
+                  />
                 </>
             }
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的 GitHub 账户'
-                  name='github_id'
-                  value={github_id}
-                  autoComplete='new-password'
-                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
-              />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的微信账户'
-                  name='wechat_id'
-                  value={wechat_id}
-                  autoComplete='new-password'
-                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
-              />
-            </Form.Field>
-            <Form.Field>
-              <Form.Input
-                  label='已绑定的邮箱账户'
-                  name='email'
-                  value={email}
-                  autoComplete='new-password'
-                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                  readOnly
-              />
-            </Form.Field>
-            <Button onClick={handleCancel}>取消</Button>
-            <Button positive onClick={submit}>提交</Button>
-          </Form>
-        </Segment>
+            <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
+            />
+            <div style={{marginTop: 20}}>
+              <Typography.Text>已绑定的微信账户</Typography.Text>
+            </div>
+            <Input
+                name='wechat_id'
+                value={wechat_id}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readonly
+            />
+            <div style={{marginTop: 20}}>
+              <Typography.Text>已绑定的邮箱账户</Typography.Text>
+            </div>
+            <Input
+                name='email'
+                value={email}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readonly
+            />
+          </Spin>
+
+        </SideSheet>
       </>
   );
 };

web/src/pages/User/index.js

@@ -1,13 +1,18 @@
 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>
   </>
 );