Skip to content

phsl / new-api

Go to a project
Commit b7ac0b18 by CaIon
Options

更新用户管理界面UI

parent 41e461f3
Showing with 109 additions and 124 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 () => {
if (inputs.username === '' || inputs.password === '') return; setLoading(true);
const res = await API.post(`/api/user/`, inputs); if (inputs.username === '' || inputs.password === '') return;
const { success, message } = res.data; const res = await API.post(`/api/user/`, inputs);
if (success) { const {success, message} = res.data;
showSuccess('用户账户创建成功！'); if (success) {
setInputs(originInputs); showSuccess('用户账户创建成功！');
} else { setInputs(originInputs);
showError(message); props.refresh();
props.handleClose();
} else {
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)'}}
label="用户名" visible={props.visible}
name="username" footer={
placeholder={'请输入用户名'} <div style={{display: 'flex', justifyContent: 'flex-end'}}>
onChange={handleInputChange} <Space>
value={username} <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
autoComplete="off" <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
required </Space>
/> </div>
</Form.Field> }
<Form.Field> closeIcon={null}
<Form.Input onCancel={() => handleCancel()}
label="显示名称" width={isMobile() ? '100%' : 600}
name="display_name" >
placeholder={'请输入显示名称'} <Spin spinning={loading}>
onChange={handleInputChange} <Input
value={display_name} style={{marginTop: 20}}
autoComplete="off" label="用户名"
/> name="username"
</Form.Field> addonBefore={'用户名'}
<Form.Field> placeholder={'请输入用户名'}
<Form.Input onChange={value => handleInputChange('username', value)}
label="密码" value={username}
name="password" autoComplete="off"
type={'password'} />
placeholder={'请输入密码'} <Input
onChange={handleInputChange} style={{marginTop: 20}}
value={password} addonBefore={'显示名'}
autoComplete="off" label="显示名称"
required name="display_name"
/> autoComplete="off"
</Form.Field> placeholder={'请输入显示名称'}
<Button positive type={'submit'} onClick={submit}> onChange={value => handleInputChange('display_name', value)}
提交 value={display_name}
</Button> />
</Form> <Input
</Segment> style={{marginTop: 20}}
</> label="密 码"
); name="password"
type={'password'}
addonBefore={'密码'}
placeholder={'请输入密码'}
onChange={value => handleInputChange('password', value)}
value={password}
autoComplete="off"
/>
</Spin>
</SideSheet>
</>
);
}; };
export default AddUser; export default AddUser;
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>
<UsersTable/> <h3>管理用户</h3>
</Segment> </Layout.Header>
<Layout.Content>
<UsersTable/>
</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