Skip to content

phsl / new-api

Go to a project
Commit b7ac0b18 by CaIon
Options

更新用户管理界面UI

parent 41e461f3
Showing with 150 additions and 141 deletions
web/src/App.js
...@@ -8,7 +8,6 @@ import LoginForm from './components/LoginForm'; ...@@ -8,7 +8,6 @@ import LoginForm from './components/LoginForm';
import NotFound from './pages/NotFound'; import NotFound from './pages/NotFound';
import Setting from './pages/Setting'; import Setting from './pages/Setting';
import EditUser from './pages/User/EditUser'; import EditUser from './pages/User/EditUser';
import AddUser from './pages/User/AddUser';
import { API, getLogo, getSystemName, showError, showNotice } from './helpers'; import { API, getLogo, getSystemName, showError, showNotice } from './helpers';
import PasswordResetForm from './components/PasswordResetForm'; import PasswordResetForm from './components/PasswordResetForm';
import GitHubOAuth from './components/GitHubOAuth'; import GitHubOAuth from './components/GitHubOAuth';
...@@ -17,10 +16,8 @@ import { UserContext } from './context/User'; ...@@ -17,10 +16,8 @@ import { UserContext } from './context/User';
import { StatusContext } from './context/Status'; import { StatusContext } from './context/Status';
import Channel from './pages/Channel'; import Channel from './pages/Channel';
import Token from './pages/Token'; import Token from './pages/Token';
import EditToken from './pages/Token/EditToken';
import EditChannel from './pages/Channel/EditChannel'; import EditChannel from './pages/Channel/EditChannel';
import Redemption from './pages/Redemption'; import Redemption from './pages/Redemption';
import EditRedemption from './pages/Redemption/EditRedemption';
import TopUp from './pages/TopUp'; import TopUp from './pages/TopUp';
import Log from './pages/Log'; import Log from './pages/Log';
import Chat from './pages/Chat'; import Chat from './pages/Chat';
...@@ -132,22 +129,6 @@ function App() { ...@@ -132,22 +129,6 @@ function App() {
} }
/> />
<Route <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' path='/redemption'
element={ element={
<PrivateRoute> <PrivateRoute>
...@@ -156,22 +137,6 @@ function App() { ...@@ -156,22 +137,6 @@ function App() {
} }
/> />
<Route <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' path='/user'
element={ element={
<PrivateRoute> <PrivateRoute>
...@@ -196,14 +161,6 @@ function App() { ...@@ -196,14 +161,6 @@ function App() {
} }
/> />
<Route <Route
path='/user/add'
element={
<Suspense fallback={<Loading></Loading>}>
<AddUser />
</Suspense>
}
/>
<Route
path='/user/reset' path='/user/reset'
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
......
web/src/components/RedemptionsTable.js
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers'; import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers';
import {ITEMS_PER_PAGE} from '../constants'; import {ITEMS_PER_PAGE} from '../constants';
import {renderQuota} from '../helpers/render'; import {renderQuota} from '../helpers/render';
import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui"; import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui";
import EditRedemption from "../pages/Redemption/EditRedemption"; import EditRedemption from "../pages/Redemption/EditRedemption";
import editRedemption from "../pages/Redemption/EditRedemption";
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
......
web/src/helpers/render.js
import { Label } from 'semantic-ui-react'; import { Label } from 'semantic-ui-react';
import {Tag} from "@douyinfe/semi-ui";
export function renderText(text, limit) { export function renderText(text, limit) {
if (text.length > limit) { if (text.length > limit) {
...@@ -9,18 +10,22 @@ export function renderText(text, limit) { ...@@ -9,18 +10,22 @@ export function renderText(text, limit) {
export function renderGroup(group) { export function renderGroup(group) {
if (group === '') { if (group === '') {
return <Label>default</Label>; return <Tag size='large'>default</Tag>;
} }
let groups = group.split(','); let groups = group.split(',');
groups.sort(); groups.sort();
return <> return <>
{groups.map((group) => { {groups.map((group) => {
if (group === 'vip' || group === 'pro') { 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') { } 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 React, {useEffect, useRef, useState} from 'react';
// import {Button, Form, Header, Message, Segment} from 'semantic-ui-react';
import {useParams, useNavigate} from 'react-router-dom'; import {useParams, useNavigate} from 'react-router-dom';
import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers'; import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers';
import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render'; import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render';
...@@ -247,7 +246,7 @@ const EditToken = (props) => { ...@@ -247,7 +246,7 @@ const EditToken = (props) => {
disabled={unlimited_quota} disabled={unlimited_quota}
/> />
<div style={{marginTop: 20}}> <div style={{marginTop: 20}}>
<Typography.Text>{`新建数量`}</Typography.Text> <Typography.Text>新建数量</Typography.Text>
</div> </div>
{!isEdit && ( {!isEdit && (
<AutoComplete <AutoComplete
......
web/src/pages/User/AddUser.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react'; import {API, isMobile, showError, showSuccess} from '../../helpers';
import { API, 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 = { const originInputs = {
username: '', username: '',
display_name: '', display_name: '',
password: '', password: '',
}; };
const [inputs, setInputs] = useState(originInputs); 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 }) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({...inputs, [name]: value}));
}; };
const submit = async () => { const submit = async () => {
setLoading(true);
if (inputs.username === '' || inputs.password === '') return; if (inputs.username === '' || inputs.password === '') return;
const res = await API.post(`/api/user/`, inputs); const res = await API.post(`/api/user/`, inputs);
const { success, message } = res.data; const {success, message} = res.data;
if (success) { if (success) {
showSuccess('用户账户创建成功！'); showSuccess('用户账户创建成功！');
setInputs(originInputs); setInputs(originInputs);
props.refresh();
props.handleClose();
} else { } else {
showError(message); showError(message);
} }
setLoading(false);
}; };
const handleCancel = () => {
props.handleClose();
}
return ( return (
<> <>
<Segment> <SideSheet
<Header as="h3">创建新用户账户</Header> placement={'left'}
<Form autoComplete="off"> title={<Title level={3}>{'添加用户'}</Title>}
<Form.Field> headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
<Form.Input 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="用户名" label="用户名"
name="username" name="username"
addonBefore={'用户名'}
placeholder={'请输入用户名'} placeholder={'请输入用户名'}
onChange={handleInputChange} onChange={value => handleInputChange('username', value)}
value={username} value={username}
autoComplete="off" autoComplete="off"
required
/> />
</Form.Field> <Input
<Form.Field> style={{marginTop: 20}}
<Form.Input addonBefore={'显示名'}
label="显示名称" label="显示名称"
name="display_name" name="display_name"
autoComplete="off"
placeholder={'请输入显示名称'} placeholder={'请输入显示名称'}
onChange={handleInputChange} onChange={value => handleInputChange('display_name', value)}
value={display_name} value={display_name}
autoComplete="off"
/> />
</Form.Field> <Input
<Form.Field> style={{marginTop: 20}}
<Form.Input label="密 码"
label="密码"
name="password" name="password"
type={'password'} type={'password'}
addonBefore={'密码'}
placeholder={'请输入密码'} placeholder={'请输入密码'}
onChange={handleInputChange} onChange={value => handleInputChange('password', value)}
value={password} value={password}
autoComplete="off" autoComplete="off"
required
/> />
</Form.Field> </Spin>
<Button positive type={'submit'} onClick={submit}> </SideSheet>
提交
</Button>
</Form>
</Segment>
</> </>
); );
}; };
......
web/src/pages/User/EditUser.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { useParams, useNavigate } from 'react-router-dom'; 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 { 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 EditUser = (props) => {
const params = useParams(); const userId = props.editingUser.id;
const userId = params.id;
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
username: '', username: '',
...@@ -21,15 +21,14 @@ const EditUser = () => { ...@@ -21,15 +21,14 @@ const EditUser = () => {
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
const { username, display_name, password, github_id, wechat_id, email, quota, group } = const { username, display_name, password, github_id, wechat_id, email, quota, group } =
inputs; inputs;
const handleInputChange = (e, { name, value }) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const fetchGroups = async () => { const fetchGroups = async () => {
try { try {
let res = await API.get(`/api/group/`); let res = await API.get(`/api/group/`);
setGroupOptions(res.data.data.map((group) => ({ setGroupOptions(res.data.data.map((group) => ({
key: group, label: group,
text: group,
value: group, value: group,
}))); })));
} catch (error) { } catch (error) {
...@@ -38,9 +37,10 @@ const EditUser = () => { ...@@ -38,9 +37,10 @@ const EditUser = () => {
}; };
const navigate = useNavigate(); const navigate = useNavigate();
const handleCancel = () => { const handleCancel = () => {
navigate("/setting"); props.handleClose();
} }
const loadUser = async () => { const loadUser = async () => {
setLoading(true);
let res = undefined; let res = undefined;
if (userId) { if (userId) {
res = await API.get(`/api/user/${userId}`); res = await API.get(`/api/user/${userId}`);
...@@ -56,14 +56,16 @@ const EditUser = () => { ...@@ -56,14 +56,16 @@ const EditUser = () => {
} }
setLoading(false); setLoading(false);
}; };
useEffect(() => { useEffect(() => {
loadUser().then(); loadUser().then();
if (userId) { if (userId) {
fetchGroups().then(); fetchGroups().then();
} }
}, []); }, [props.editingUser.id]);
const submit = async () => { const submit = async () => {
setLoading(true);
let res = undefined; let res = undefined;
if (userId) { if (userId) {
let data = { ...inputs, id: parseInt(userId) }; let data = { ...inputs, id: parseInt(userId) };
...@@ -77,52 +79,75 @@ const EditUser = () => { ...@@ -77,52 +79,75 @@ const EditUser = () => {
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('用户信息更新成功！'); showSuccess('用户信息更新成功！');
props.refresh();
props.handleClose();
} else { } else {
showError(message); showError(message);
} }
setLoading(false);
}; };
return ( return (
<> <>
<Segment loading={loading}> <SideSheet
<Header as='h3'>更新用户信息</Header> placement={'right'}
<Form autoComplete='new-password'> title={<Title level={3}>{'编辑用户'}</Title>}
<Form.Field> headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
<Form.Input 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='用户名' label='用户名'
name='username' name='username'
placeholder={'请输入新的用户名'} placeholder={'请输入新的用户名'}
onChange={handleInputChange} onChange={value => handleInputChange('username', value)}
value={username} value={username}
autoComplete='new-password' autoComplete='new-password'
/> />
</Form.Field> <div style={{marginTop: 20}}>
<Form.Field> <Typography.Text>密码</Typography.Text>
<Form.Input </div>
<Input
label='密码' label='密码'
name='password' name='password'
type={'password'} type={'password'}
placeholder={'请输入新的密码，最短 8 位'} placeholder={'请输入新的密码，最短 8 位'}
onChange={handleInputChange} onChange={value => handleInputChange('password', value)}
value={password} value={password}
autoComplete='new-password' autoComplete='new-password'
/> />
</Form.Field> <div style={{marginTop: 20}}>
<Form.Field> <Typography.Text>显示名称</Typography.Text>
<Form.Input </div>
<Input
label='显示名称' label='显示名称'
name='display_name' name='display_name'
placeholder={'请输入新的显示名称'} placeholder={'请输入新的显示名称'}
onChange={handleInputChange} onChange={value => handleInputChange('display_name', value)}
value={display_name} value={display_name}
autoComplete='new-password' autoComplete='new-password'
/> />
</Form.Field>
{ {
userId && <> userId && <>
<Form.Field> <div style={{marginTop: 20}}>
<Form.Dropdown <Typography.Text>分组</Typography.Text>
label='分组' </div>
<Select
placeholder={'请选择分组'} placeholder={'请选择分组'}
name='group' name='group'
fluid fluid
...@@ -130,59 +155,58 @@ const EditUser = () => { ...@@ -130,59 +155,58 @@ const EditUser = () => {
selection selection
allowAdditions allowAdditions
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'} additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={handleInputChange} onChange={value => handleInputChange('group', value)}
value={inputs.group} value={inputs.group}
autoComplete='new-password' autoComplete='new-password'
options={groupOptions} optionList={groupOptions}
/> />
</Form.Field> <div style={{marginTop: 20}}>
<Form.Field> <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
<Form.Input </div>
label={`剩余额度${renderQuotaWithPrompt(quota)}`} <Input
name='quota' name='quota'
placeholder={'请输入新的剩余额度'} placeholder={'请输入新的剩余额度'}
onChange={handleInputChange} onChange={value => handleInputChange('quota', value)}
value={quota} value={quota}
type={'number'} type={'number'}
autoComplete='new-password' autoComplete='new-password'
/> />
</Form.Field>
</> </>
} }
<Form.Field> <Divider style={{marginTop: 20}}>以下信息不可修改</Divider>
<Form.Input <div style={{marginTop: 20}}>
label='已绑定的 GitHub 账户' <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
</div>
<Input
name='github_id' name='github_id'
value={github_id} value={github_id}
autoComplete='new-password' autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readOnly readonly
/> />
</Form.Field> <div style={{marginTop: 20}}>
<Form.Field> <Typography.Text>已绑定的微信账户</Typography.Text>
<Form.Input </div>
label='已绑定的微信账户' <Input
name='wechat_id' name='wechat_id'
value={wechat_id} value={wechat_id}
autoComplete='new-password' autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readOnly readonly
/> />
</Form.Field> <div style={{marginTop: 20}}>
<Form.Field> <Typography.Text>已绑定的邮箱账户</Typography.Text>
<Form.Input </div>
label='已绑定的邮箱账户' <Input
name='email' name='email'
value={email} value={email}
autoComplete='new-password' autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readOnly readonly
/> />
</Form.Field> </Spin>
<Button onClick={handleCancel}>取消</Button>
<Button positive onClick={submit}>提交</Button> </SideSheet>
</Form>
</Segment>
</> </>
); );
}; };
......
web/src/pages/User/index.js
import React from 'react'; import React from 'react';
import { Segment, Header } from 'semantic-ui-react'; import { Segment, Header } from 'semantic-ui-react';
import UsersTable from '../../components/UsersTable'; import UsersTable from '../../components/UsersTable';
import {Layout} from "@douyinfe/semi-ui";
const User = () => ( const User = () => (
<> <>
<Segment> <Layout>
<Header as='h3'>管理用户</Header> <Layout.Header>
<h3>管理用户</h3>
</Layout.Header>
<Layout.Content>
<UsersTable/> <UsersTable/>
</Segment> </Layout.Content>
</Layout>
</> </>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment