mirror of
https://github.com/songquanpeng/one-api.git
synced 2025-10-01 07:36:38 +08:00
825374c334
[x] 修改颜色 [x] 日志页面新增快速筛选日期、修复渠道ID查询、自动更新消耗额度、删除日志详情（因为没有太大意义）； [x] 用户管理界面，支持快速设置用户组，在`web\src\components\UsersTable.js`处修改相关值； [x] 令牌界面，删除无用的多种复制、聊天等按钮； [x] 删除 系统访问令牌；
350 lines
11 KiB
JavaScript
350 lines
11 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Button, Form, Label, Pagination, Popup, Table, Dropdown } from 'semantic-ui-react';
|
||
import { Link } from 'react-router-dom';
|
||
import { API, showError, showSuccess } from '../helpers';
|
||
|
||
import { ITEMS_PER_PAGE } from '../constants';
|
||
import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
|
||
|
||
function renderRole(role) {
|
||
switch (role) {
|
||
case 1:
|
||
return <Label>普通用户</Label>;
|
||
case 10:
|
||
return <Label color='var(--czl-warning-color)'>管理员</Label>;
|
||
case 100:
|
||
return <Label color='var(--czl-error-color)'>超级管理员</Label>;
|
||
default:
|
||
return <Label color='var(--czl-error-color)'>未知身份</Label>;
|
||
}
|
||
}
|
||
|
||
const UsersTable = () => {
|
||
const [users, setUsers] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [activePage, setActivePage] = useState(1);
|
||
const [searchKeyword, setSearchKeyword] = useState('');
|
||
const [searching, setSearching] = useState(false);
|
||
|
||
const loadUsers = async (startIdx) => {
|
||
const res = await API.get(`/api/user/?p=${startIdx}`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
if (startIdx === 0) {
|
||
setUsers(data);
|
||
} else {
|
||
let newUsers = users;
|
||
newUsers.push(...data);
|
||
setUsers(newUsers);
|
||
}
|
||
} else {
|
||
showError(message);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
const onPaginationChange = (e, { activePage }) => {
|
||
(async () => {
|
||
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
|
||
// In this case we have to load more data and then append them.
|
||
await loadUsers(activePage - 1);
|
||
}
|
||
setActivePage(activePage);
|
||
})();
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadUsers(0)
|
||
.then()
|
||
.catch((reason) => {
|
||
showError(reason);
|
||
});
|
||
}, []);
|
||
|
||
const manageUser = (username, idx, newGroup) => {
|
||
(async () => {
|
||
const res = await API.post('/api/user/manage', {
|
||
username,
|
||
newGroup
|
||
});
|
||
|
||
const { success, message } = res.data;
|
||
if (success) {
|
||
showSuccess('操作成功完成！');
|
||
let user = res.data.data;
|
||
let newUsers = [...users];
|
||
let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
|
||
newUsers[realIdx].group = user.group; // 用新的 user.group 更新用户分组
|
||
setUsers(newUsers);
|
||
} else {
|
||
showError(message);
|
||
}
|
||
})();
|
||
};
|
||
|
||
|
||
const groupOptions = [
|
||
{ key: 'default', value: 'default', text: '默认', color: 'var(--czl-grayA)' },
|
||
{ key: 'vip', value: 'vip', text: 'VIP', color: 'var(--czl-success-color)' },
|
||
{ key: 'svip', value: 'svip', text: '超级VIP', color: 'var(--czl-error-color)' },
|
||
];
|
||
|
||
const groupColor = (userGroup) => {
|
||
const group = groupOptions.find((option) => option.value === userGroup);
|
||
return group ? group.color : 'inherit'; // 如果未找到分组，则返回默认颜色
|
||
};
|
||
|
||
|
||
|
||
const renderStatus = (status) => {
|
||
switch (status) {
|
||
case 1:
|
||
return <Label basic>已激活</Label>;
|
||
case 2:
|
||
return (
|
||
<Label basic color='red'>
|
||
已封禁
|
||
</Label>
|
||
);
|
||
default:
|
||
return (
|
||
<Label basic color='grey'>
|
||
未知状态
|
||
</Label>
|
||
);
|
||
}
|
||
};
|
||
|
||
const searchUsers = async () => {
|
||
if (searchKeyword === '') {
|
||
// if keyword is blank, load files instead.
|
||
await loadUsers(0);
|
||
setActivePage(1);
|
||
return;
|
||
}
|
||
setSearching(true);
|
||
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
setUsers(data);
|
||
setActivePage(1);
|
||
} else {
|
||
showError(message);
|
||
}
|
||
setSearching(false);
|
||
};
|
||
|
||
const handleKeywordChange = async (e, { value }) => {
|
||
setSearchKeyword(value.trim());
|
||
};
|
||
|
||
const sortUser = (key) => {
|
||
if (users.length === 0) return;
|
||
setLoading(true);
|
||
let sortedUsers = [...users];
|
||
sortedUsers.sort((a, b) => {
|
||
return ('' + a[key]).localeCompare(b[key]);
|
||
});
|
||
if (sortedUsers[0].id === users[0].id) {
|
||
sortedUsers.reverse();
|
||
}
|
||
setUsers(sortedUsers);
|
||
setLoading(false);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Form onSubmit={searchUsers}>
|
||
<Form.Input
|
||
icon='search'
|
||
fluid
|
||
iconPosition='left'
|
||
placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
|
||
value={searchKeyword}
|
||
loading={searching}
|
||
onChange={handleKeywordChange}
|
||
/>
|
||
</Form>
|
||
|
||
<Table basic compact size='small'>
|
||
<Table.Header>
|
||
<Table.Row>
|
||
<Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('id');
|
||
}}
|
||
>
|
||
ID
|
||
</Table.HeaderCell>
|
||
<Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('username');
|
||
}}
|
||
>
|
||
用户名
|
||
</Table.HeaderCell>
|
||
{/* <Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('group');
|
||
}}
|
||
>
|
||
分组
|
||
</Table.HeaderCell> */}
|
||
<Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('quota');
|
||
}}
|
||
>
|
||
统计信息
|
||
</Table.HeaderCell>
|
||
<Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('role');
|
||
}}
|
||
>
|
||
用户角色
|
||
</Table.HeaderCell>
|
||
<Table.HeaderCell
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={() => {
|
||
sortUser('status');
|
||
}}
|
||
>
|
||
状态
|
||
</Table.HeaderCell>
|
||
<Table.HeaderCell>操作</Table.HeaderCell>
|
||
</Table.Row>
|
||
</Table.Header>
|
||
|
||
<Table.Body>
|
||
{users
|
||
.slice(
|
||
(activePage - 1) * ITEMS_PER_PAGE,
|
||
activePage * ITEMS_PER_PAGE
|
||
)
|
||
.map((user, idx) => {
|
||
if (user.deleted) return <></>;
|
||
return (
|
||
<Table.Row key={user.id}>
|
||
<Table.Cell>{user.id}</Table.Cell>
|
||
<Table.Cell>
|
||
<Popup
|
||
content={user.email ? user.email : '未绑定邮箱地址'}
|
||
key={user.username}
|
||
header={user.display_name ? user.display_name : user.username}
|
||
trigger={<span>{renderText(user.username, 15)}</span>}
|
||
hoverable
|
||
/>
|
||
</Table.Cell>
|
||
{/* <Table.Cell>{renderGroup(user.group)}</Table.Cell> */}
|
||
<Table.Cell>
|
||
<Popup content='剩余额度' trigger={<Label basic>{renderQuota(user.quota)}</Label>} />
|
||
<Popup content='已用额度' trigger={<Label basic>{renderQuota(user.used_quota)}</Label>} />
|
||
<Popup content='请求次数' trigger={<Label basic>{renderNumber(user.request_count)}</Label>} />
|
||
</Table.Cell>
|
||
<Table.Cell>{renderRole(user.role)}</Table.Cell>
|
||
<Table.Cell>{renderStatus(user.status)}</Table.Cell>
|
||
<Table.Cell>
|
||
<div>
|
||
<Button.Group size={'small'} style={{marginRight: '10px'}}>
|
||
<Button
|
||
positive
|
||
size={'small'}
|
||
className={`group-button ${user.group}`}
|
||
style={{
|
||
backgroundColor: groupColor(user.group), // 设置透明背景颜色
|
||
width: '100px',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
}}
|
||
>
|
||
{user.group}
|
||
</Button>
|
||
<Dropdown
|
||
className="button icon"
|
||
style={{
|
||
backgroundColor: groupColor(user.group),}}
|
||
floating
|
||
options={groupOptions}
|
||
trigger={<></>}
|
||
onChange={(e, { value }) => manageUser(user.username, idx, value)}
|
||
/>
|
||
</Button.Group>
|
||
<Popup
|
||
trigger={
|
||
<Button size='small' negative disabled={user.role === 100}>
|
||
删除
|
||
</Button>
|
||
}
|
||
on='click'
|
||
flowing
|
||
hoverable
|
||
>
|
||
<Button
|
||
negative
|
||
onClick={() => {
|
||
manageUser(user.username, 'delete', idx);
|
||
}}
|
||
>
|
||
删除用户 {user.username}
|
||
</Button>
|
||
</Popup>
|
||
<Button
|
||
size={'small'}
|
||
onClick={() => {
|
||
manageUser(
|
||
user.username,
|
||
user.status === 1 ? 'disable' : 'enable',
|
||
idx
|
||
);
|
||
}}
|
||
disabled={user.role === 100}
|
||
>
|
||
{user.status === 1 ? '禁用' : '启用'}
|
||
</Button>
|
||
<Button
|
||
size={'small'}
|
||
as={Link}
|
||
to={'/user/edit/' + user.id}
|
||
>
|
||
编辑
|
||
</Button>
|
||
</div>
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
);
|
||
})}
|
||
</Table.Body>
|
||
|
||
<Table.Footer>
|
||
<Table.Row>
|
||
<Table.HeaderCell colSpan='7'>
|
||
<Button size='small' as={Link} to='/user/add' loading={loading}>
|
||
添加新的用户
|
||
</Button>
|
||
<Pagination
|
||
floated='right'
|
||
activePage={activePage}
|
||
onPageChange={onPaginationChange}
|
||
size='small'
|
||
siblingRange={1}
|
||
totalPages={
|
||
Math.ceil(users.length / ITEMS_PER_PAGE) +
|
||
(users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
|
||
}
|
||
/>
|
||
</Table.HeaderCell>
|
||
</Table.Row>
|
||
</Table.Footer>
|
||
</Table>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default UsersTable;
|