Able to manage channels now

This commit is contained in:
JustSong 2023-04-23 15:42:23 +08:00
parent 63da6dc6a0
commit 9fc375c604
9 changed files with 196 additions and 216 deletions

View File

@ -94,4 +94,9 @@ const (
ChannelTypeUnknown = 0 ChannelTypeUnknown = 0
ChannelTypeOpenAI = 1 ChannelTypeOpenAI = 1
ChannelTypeAPI2D = 2 ChannelTypeAPI2D = 2
ChannelTypeAzure = 3
ChannelTypeCloseAI = 4
ChannelTypeOpenAISB = 5
ChannelTypeOpenAIMax = 6
ChannelTypeOhMyGPT = 7
) )

View File

@ -82,6 +82,8 @@ func AddChannel(c *gin.Context) {
}) })
return return
} }
channel.CreatedTime = common.GetTimestamp()
channel.AccessedTime = common.GetTimestamp()
err = channel.Insert() err = channel.Insert()
if err != nil { if err != nil {
c.JSON(http.StatusOK, gin.H{ c.JSON(http.StatusOK, gin.H{
@ -136,6 +138,7 @@ func UpdateChannel(c *gin.Context) {
c.JSON(http.StatusOK, gin.H{ c.JSON(http.StatusOK, gin.H{
"success": true, "success": true,
"message": "", "message": "",
"data": channel,
}) })
return return
} }

View File

@ -9,7 +9,7 @@ type Channel struct {
Type int `json:"type" gorm:"default:0"` Type int `json:"type" gorm:"default:0"`
Key string `json:"key"` Key string `json:"key"`
Status int `json:"status" gorm:"default:1"` Status int `json:"status" gorm:"default:1"`
Name string `json:"name" gorm:"unique;index"` Name string `json:"name" gorm:"index"`
Weight int `json:"weight"` Weight int `json:"weight"`
CreatedTime int64 `json:"created_time" gorm:"bigint"` CreatedTime int64 `json:"created_time" gorm:"bigint"`
AccessedTime int64 `json:"accessed_time" gorm:"bigint"` AccessedTime int64 `json:"accessed_time" gorm:"bigint"`

View File

@ -1,40 +1,48 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react'; import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { API, showError, showSuccess } from '../helpers'; import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
import { ITEMS_PER_PAGE } from '../constants'; import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
function renderRole(role) { function renderTimestamp(timestamp) {
switch (role) { return (
case 1: <>
return <Label>普通用户</Label>; {timestamp2string(timestamp)}
case 10: </>
return <Label color='yellow'>管理员</Label>; );
case 100: }
return <Label color='orange'>超级管理员</Label>;
default: let type2label = undefined;
return <Label color='red'>未知身份</Label>;
function renderType(type) {
if (!type2label) {
type2label = new Map;
for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
} }
type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
}
return <Label basic color={type2label[type].color}>{type2label[type].text}</Label>;
} }
const ChannelsTable = () => { const ChannelsTable = () => {
const [users, setUsers] = useState([]); const [channels, setChannels] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1); const [activePage, setActivePage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const loadUsers = async (startIdx) => { const loadChannels = async (startIdx) => {
const res = await API.get(`/api/user/?p=${startIdx}`); const res = await API.get(`/api/channel/?p=${startIdx}`);
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
if (startIdx === 0) { if (startIdx === 0) {
setUsers(data); setChannels(data);
} else { } else {
let newUsers = users; let newChannels = channels;
newUsers.push(...data); newChannels.push(...data);
setUsers(newUsers); setChannels(newChannels);
} }
} else { } else {
showError(message); showError(message);
@ -44,55 +52,63 @@ const ChannelsTable = () => {
const onPaginationChange = (e, { activePage }) => { const onPaginationChange = (e, { activePage }) => {
(async () => { (async () => {
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) { if (activePage === Math.ceil(channels.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them. // In this case we have to load more data and then append them.
await loadUsers(activePage - 1); await loadChannels(activePage - 1);
} }
setActivePage(activePage); setActivePage(activePage);
})(); })();
}; };
useEffect(() => { useEffect(() => {
loadUsers(0) loadChannels(0)
.then() .then()
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
}); });
}, []); }, []);
const manageUser = (username, action, idx) => { const manageChannel = async (id, action, idx) => {
(async () => { let data = { id };
const res = await API.post('/api/user/manage', { let res;
username, switch (action) {
action, case 'delete':
}); res = await API.delete(`/api/channel/${id}/`);
break;
case 'enable':
data.status = 1;
res = await API.put('/api/channel/', data);
break;
case 'disable':
data.status = 2;
res = await API.put('/api/channel/', data);
break;
}
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('操作成功完成!'); showSuccess('操作成功完成!');
let user = res.data.data; let channel = res.data.data;
let newUsers = [...users]; let newChannels = [...channels];
let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx; let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
if (action === 'delete') { if (action === 'delete') {
newUsers[realIdx].deleted = true; newChannels[realIdx].deleted = true;
} else { } else {
newUsers[realIdx].status = user.status; newChannels[realIdx].status = channel.status;
newUsers[realIdx].role = user.role;
} }
setUsers(newUsers); setChannels(newChannels);
} else { } else {
showError(message); showError(message);
} }
})();
}; };
const renderStatus = (status) => { const renderStatus = (status) => {
switch (status) { switch (status) {
case 1: case 1:
return <Label basic>已激活</Label>; return <Label basic color='green'>已启用</Label>;
case 2: case 2:
return ( return (
<Label basic color='red'> <Label basic color='red'>
</Label> </Label>
); );
default: default:
@ -104,18 +120,18 @@ const ChannelsTable = () => {
} }
}; };
const searchUsers = async () => { const searchChannels = async () => {
if (searchKeyword === '') { if (searchKeyword === '') {
// if keyword is blank, load files instead. // if keyword is blank, load files instead.
await loadUsers(0); await loadChannels(0);
setActivePage(1); setActivePage(1);
return; return;
} }
setSearching(true); setSearching(true);
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`); const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`);
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setUsers(data); setChannels(data);
setActivePage(1); setActivePage(1);
} else { } else {
showError(message); showError(message);
@ -127,28 +143,28 @@ const ChannelsTable = () => {
setSearchKeyword(value.trim()); setSearchKeyword(value.trim());
}; };
const sortUser = (key) => { const sortChannel = (key) => {
if (users.length === 0) return; if (channels.length === 0) return;
setLoading(true); setLoading(true);
let sortedUsers = [...users]; let sortedChannels = [...channels];
sortedUsers.sort((a, b) => { sortedChannels.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]); return ('' + a[key]).localeCompare(b[key]);
}); });
if (sortedUsers[0].id === users[0].id) { if (sortedChannels[0].id === channels[0].id) {
sortedUsers.reverse(); sortedChannels.reverse();
} }
setUsers(sortedUsers); setChannels(sortedChannels);
setLoading(false); setLoading(false);
}; };
return ( return (
<> <>
<Form onSubmit={searchUsers}> <Form onSubmit={searchChannels}>
<Form.Input <Form.Input
icon='search' icon='search'
fluid fluid
iconPosition='left' iconPosition='left'
placeholder='搜索用户的 ID用户名显示名称以及邮箱地址 ...' placeholder='搜索渠道的 ID 和名称 ...'
value={searchKeyword} value={searchKeyword}
loading={searching} loading={searching}
onChange={handleKeywordChange} onChange={handleKeywordChange}
@ -161,87 +177,78 @@ const ChannelsTable = () => {
<Table.HeaderCell <Table.HeaderCell
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
sortUser('username'); sortChannel('id');
}} }}
> >
用户名 ID
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell <Table.HeaderCell
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
sortUser('display_name'); sortChannel('name');
}} }}
> >
显示名称 名称
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell <Table.HeaderCell
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
sortUser('email'); sortChannel('type');
}} }}
> >
邮箱地址 类型
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell <Table.HeaderCell
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
sortUser('role'); sortChannel('status');
}}
>
用户角色
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortUser('status');
}} }}
> >
状态 状态
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('created_time');
}}
>
创建时间
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('accessed_time');
}}
>
访问时间
</Table.HeaderCell>
<Table.HeaderCell>操作</Table.HeaderCell> <Table.HeaderCell>操作</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{users {channels
.slice( .slice(
(activePage - 1) * ITEMS_PER_PAGE, (activePage - 1) * ITEMS_PER_PAGE,
activePage * ITEMS_PER_PAGE activePage * ITEMS_PER_PAGE
) )
.map((user, idx) => { .map((channel, idx) => {
if (user.deleted) return <></>; if (channel.deleted) return <></>;
return ( return (
<Table.Row key={user.id}> <Table.Row key={channel.id}>
<Table.Cell>{user.username}</Table.Cell> <Table.Cell>{channel.id}</Table.Cell>
<Table.Cell>{user.display_name}</Table.Cell> <Table.Cell>{channel.name ? channel.name : '无'}</Table.Cell>
<Table.Cell>{user.email ? user.email : '无'}</Table.Cell> <Table.Cell>{renderType(channel.type)}</Table.Cell>
<Table.Cell>{renderRole(user.role)}</Table.Cell> <Table.Cell>{renderStatus(channel.status)}</Table.Cell>
<Table.Cell>{renderStatus(user.status)}</Table.Cell> <Table.Cell>{renderTimestamp(channel.created_time)}</Table.Cell>
<Table.Cell>{renderTimestamp(channel.accessed_time)}</Table.Cell>
<Table.Cell> <Table.Cell>
<div> <div>
<Button
size={'small'}
positive
onClick={() => {
manageUser(user.username, 'promote', idx);
}}
>
提升
</Button>
<Button
size={'small'}
color={'yellow'}
onClick={() => {
manageUser(user.username, 'demote', idx);
}}
>
降级
</Button>
<Button <Button
size={'small'} size={'small'}
negative negative
onClick={() => { onClick={() => {
manageUser(user.username, 'delete', idx); manageChannel(channel.id, 'delete', idx);
}} }}
> >
删除 删除
@ -249,19 +256,19 @@ const ChannelsTable = () => {
<Button <Button
size={'small'} size={'small'}
onClick={() => { onClick={() => {
manageUser( manageChannel(
user.username, channel.id,
user.status === 1 ? 'disable' : 'enable', channel.status === 1 ? 'disable' : 'enable',
idx idx
); );
}} }}
> >
{user.status === 1 ? '禁用' : '启用'} {channel.status === 1 ? '禁用' : '启用'}
</Button> </Button>
<Button <Button
size={'small'} size={'small'}
as={Link} as={Link}
to={'/user/edit/' + user.id} to={'/channel/edit/' + channel.id}
> >
编辑 编辑
</Button> </Button>
@ -275,8 +282,8 @@ const ChannelsTable = () => {
<Table.Footer> <Table.Footer>
<Table.Row> <Table.Row>
<Table.HeaderCell colSpan='6'> <Table.HeaderCell colSpan='6'>
<Button size='small' as={Link} to='/user/add' loading={loading}> <Button size='small' as={Link} to='/channel/add' loading={loading}>
添加新的用户 添加新的渠道
</Button> </Button>
<Pagination <Pagination
floated='right' floated='right'
@ -285,8 +292,8 @@ const ChannelsTable = () => {
size='small' size='small'
siblingRange={1} siblingRange={1}
totalPages={ totalPages={
Math.ceil(users.length / ITEMS_PER_PAGE) + Math.ceil(channels.length / ITEMS_PER_PAGE) +
(users.length % ITEMS_PER_PAGE === 0 ? 1 : 0) (channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
} }
/> />
</Table.HeaderCell> </Table.HeaderCell>

View File

@ -115,7 +115,7 @@ const TokensTable = () => {
return; return;
} }
setSearching(true); setSearching(true);
const res = await API.get(`/api/token/search?keyword=${searchKeyword}/`); const res = await API.get(`/api/token/search?keyword=${searchKeyword}`);
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setTokens(data); setTokens(data);

View File

@ -0,0 +1,9 @@
export const CHANNEL_OPTIONS = [
{ key: 1, text: 'OpenAI', value: 1, color: 'green' },
{ key: 2, text: 'API2D', value: 2, color: 'blue' },
{ key: 3, text: 'Azure', value: 3, color: 'olive' },
{ key: 4, text: 'CloseAI', value: 4, color: 'teal' },
{ key: 5, text: 'OpenAI-SB', value: 5, color: 'brown' },
{ key: 6, text: 'OpenAI Max', value: 6, color: 'violet' },
{ key: 7, text: 'OhMyGPT', value: 7, color: 'purple' }
];

View File

@ -1,3 +1,4 @@
export * from './toast.constants'; export * from './toast.constants';
export * from './user.constants'; export * from './user.constants';
export * from './common.constant'; export * from './common.constant';
export * from './channel.constants';

View File

@ -1,26 +1,27 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react'; import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { API, showError, showSuccess } from '../../helpers'; import { API, showError, showSuccess } from '../../helpers';
import { CHANNEL_OPTIONS } from '../../constants';
const AddChannel = () => { const AddChannel = () => {
const originInputs = { const originInputs = {
username: '', name: '',
display_name: '', type: 1,
password: '', key: ''
}; };
const [inputs, setInputs] = useState(originInputs); const [inputs, setInputs] = useState(originInputs);
const { username, display_name, password } = inputs; const { name, type, key } = inputs;
const handleInputChange = (e, { name, value }) => { const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const submit = async () => { const submit = async () => {
if (inputs.username === '' || inputs.password === '') return; if (inputs.name === '' || inputs.key === '') return;
const res = await API.post(`/api/user/`, inputs); const res = await API.post(`/api/channel/`, inputs);
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('用户账户创建成功!'); showSuccess('渠道创建成功!');
setInputs(originInputs); setInputs(originInputs);
} else { } else {
showError(message); showError(message);
@ -30,38 +31,37 @@ const AddChannel = () => {
return ( return (
<> <>
<Segment> <Segment>
<Header as="h3">创建新用户账户</Header> <Header as='h3'>创建新的渠道</Header>
<Form autoComplete="off"> <Form autoComplete='off'>
<Form.Field>
<Form.Select
label='类型'
name='type'
options={CHANNEL_OPTIONS}
value={inputs.type}
onChange={handleInputChange}
/>
</Form.Field>
<Form.Field> <Form.Field>
<Form.Input <Form.Input
label="用户名" label='名称'
name="username" name='name'
placeholder={'请输入用户名'} placeholder={'请输入'}
onChange={handleInputChange} onChange={handleInputChange}
value={username} value={name}
autoComplete="off" autoComplete='off'
required required
/> />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<Form.Input <Form.Input
label="显示名称" label='密钥'
name="display_name" name='key'
placeholder={'请输入显示名称'} placeholder={'请输入密钥'}
onChange={handleInputChange} onChange={handleInputChange}
value={display_name} value={key}
autoComplete="off" // type='password'
/> autoComplete='off'
</Form.Field>
<Form.Field>
<Form.Input
label="密码"
name="password"
type={'password'}
placeholder={'请输入密码'}
onChange={handleInputChange}
value={password}
autoComplete="off"
required required
/> />
</Form.Field> </Form.Field>

View File

@ -2,32 +2,23 @@ import React, { useEffect, useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react'; import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { API, showError, showSuccess } from '../../helpers'; import { API, showError, showSuccess } from '../../helpers';
import { CHANNEL_OPTIONS } from '../../constants';
const EditChannel = () => { const EditChannel = () => {
const params = useParams(); const params = useParams();
const userId = params.id; const channelId = params.id;
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
username: '', name: '',
display_name: '', key: '',
password: '', type: 1,
github_id: '',
wechat_id: '',
email: '',
}); });
const { username, display_name, password, github_id, wechat_id, email } =
inputs;
const handleInputChange = (e, { name, value }) => { const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
const loadUser = async () => { const loadChannel = async () => {
let res = undefined; let res = await API.get(`/api/channel/${channelId}`);
if (userId) {
res = await API.get(`/api/user/${userId}`);
} else {
res = await API.get(`/api/user/self`);
}
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
data.password = ''; data.password = '';
@ -38,19 +29,14 @@ const EditChannel = () => {
setLoading(false); setLoading(false);
}; };
useEffect(() => { useEffect(() => {
loadUser().then(); loadChannel().then();
}, []); }, []);
const submit = async () => { const submit = async () => {
let res = undefined; let res = await API.put(`/api/channel/`, { ...inputs, id: parseInt(channelId) });
if (userId) {
res = await API.put(`/api/user/`, { ...inputs, id: parseInt(userId) });
} else {
res = await API.put(`/api/user/self`, inputs);
}
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('用户信息更新成功!'); showSuccess('渠道更新成功!');
} else { } else {
showError(message); showError(message);
} }
@ -59,69 +45,38 @@ const EditChannel = () => {
return ( return (
<> <>
<Segment loading={loading}> <Segment loading={loading}>
<Header as='h3'>更新用户信息</Header> <Header as='h3'>更新渠道信息</Header>
<Form autoComplete='off'> <Form autoComplete='off'>
<Form.Field> <Form.Field>
<Form.Input <Form.Select
label='用户名' label='类型'
name='username' name='type'
placeholder={'请输入新的用户名'} options={CHANNEL_OPTIONS}
value={inputs.type}
onChange={handleInputChange} onChange={handleInputChange}
value={username}
autoComplete='off'
/> />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<Form.Input <Form.Input
label='密码' label='名称'
name='password' name='name'
type={'password'} placeholder={'请输入新的名称'}
placeholder={'请输入新的密码'}
onChange={handleInputChange} onChange={handleInputChange}
value={password} value={inputs.name}
autoComplete='off' autoComplete='off'
/> />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<Form.Input <Form.Input
label='显示名称' label='密钥'
name='display_name' name='key'
placeholder={'请输入新的显示名称'} placeholder={'请输入新的密钥'}
onChange={handleInputChange} onChange={handleInputChange}
value={display_name} value={inputs.key}
// type='password'
autoComplete='off' autoComplete='off'
/> />
</Form.Field> </Form.Field>
<Form.Field>
<Form.Input
label='已绑定的 GitHub 账户'
name='github_id'
value={github_id}
autoComplete='off'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>
</Form.Field>
<Form.Field>
<Form.Input
label='已绑定的微信账户'
name='wechat_id'
value={wechat_id}
autoComplete='off'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>
</Form.Field>
<Form.Field>
<Form.Input
label='已绑定的邮箱账户'
name='email'
value={email}
autoComplete='off'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>
</Form.Field>
<Button onClick={submit}>提交</Button> <Button onClick={submit}>提交</Button>
</Form> </Form>
</Segment> </Segment>