Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成渠道界面

Browse Source
This commit is contained in:
Apple\Apple 2024-03-16 09:47:29 +08:00
parent 034ea8dfcc
commit 61a9f8001b
1 changed files with 173 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

337
web/air/src/components/ChannelsTable.js
View File

@ -4,18 +4,18 @@ import { API, isMobile, shouldShowPrompt, showError, showInfo, showSuccess, time
import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants'; import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
import { renderGroup, renderNumberWithPoint, renderQuota } from '../helpers/render'; import { renderGroup, renderNumberWithPoint, renderQuota } from '../helpers/render';
import { import {
Button, Button,
Dropdown, Dropdown,
Form, Form,
InputNumber, InputNumber,
Popconfirm, Popconfirm,
Space, Space,
SplitButtonGroup, SplitButtonGroup,
Switch, Switch,
Table, Table,
Tag, Tag,
Tooltip, Tooltip,
Typography Typography
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import EditChannel from '../pages/Channel/EditChannel'; import EditChannel from '../pages/Channel/EditChannel';
import { IconTreeTriangleDown } from '@douyinfe/semi-icons'; import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
@ -56,23 +56,23 @@ const ChannelsTable = () => {
title: '名称', title: '名称',
dataIndex: 'name' dataIndex: 'name'
}, },
{ // {
title: '分组', // title: '分组',
dataIndex: 'group', // dataIndex: 'group',
render: (text, record, index) => { // render: (text, record, index) => {
return ( // return (
<div> // <div>
<Space spacing={2}> // <Space spacing={2}>
{ // {
text.split(',').map((item, index) => { // text.split(',').map((item, index) => {
return (renderGroup(item)); // return (renderGroup(item));
}) // })
} // }
</Space> // </Space>
</div> // </div>
); // );
} // }
}, // },
{ {
title: '类型', title: '类型',
dataIndex: 'type', dataIndex: 'type',
@ -147,33 +147,33 @@ const ChannelsTable = () => {
); );
} }
}, },
{ // {
title: '权重', // title: '权重',
dataIndex: 'weight', // dataIndex: 'weight',
render: (text, record, index) => { // render: (text, record, index) => {
return ( // return (
<div> // <div>
<InputNumber // <InputNumber
style={{ width: 70 }} // style={{ width: 70 }}
name="weight" // name="weight"
onBlur={e => { // onBlur={e => {
manageChannel(record.id, 'weight', record, e.target.value); // manageChannel(record.id, 'weight', record, e.target.value);
}} // }}
keepFocus={true} // keepFocus={true}
innerButtons // innerButtons
defaultValue={record.weight} // defaultValue={record.weight}
min={0} // min={0}
/> // />
</div> // </div>
); // );
} // }
}, // },
{ {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
render: (text, record, index) => ( render: (text, record, index) => (
<div> <div>
<SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组"> {/* <SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组">
<Button theme="light" onClick={() => { <Button theme="light" onClick={() => {
testChannel(record, ''); testChannel(record, '');
}}>测试</Button> }}>测试</Button>
@ -181,8 +181,8 @@ const ChannelsTable = () => {
> >
<Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button> <Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
</Dropdown> </Dropdown>
</SplitButtonGroup> </SplitButtonGroup> */}
{/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/} <Button theme='light' type='primary' style={{ marginRight: 1 }} onClick={() => testChannel(record)}>测试</Button>
<Popconfirm <Popconfirm
title="确定是否要删除此渠道？" title="确定是否要删除此渠道？"
content="此修改将不可逆" content="此修改将不可逆"
@ -443,11 +443,11 @@ const ChannelsTable = () => {
} }
}; };
const testAllChannels = async () => { const testChannels = async (scope) => {
const res = await API.get(`/api/channel/test`); const res = await API.get(`/api/channel/test?scope=${scope}`);
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showInfo('已成功开始测试所有通道，请刷新页面查看结果。'); showInfo('已成功开始测试通道，请刷新页面查看结果。');
} else { } else {
showError(message); showError(message);
} }
@ -576,22 +576,23 @@ const ChannelsTable = () => {
return ( return (
<> <>
<EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} /> <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
<Form onSubmit={() => { <div style={{ display: "flex", placeItems: "center", justifyContent: "space-between" }}>
searchChannels(searchKeyword, searchGroup, searchModel); <Form onSubmit={() => {
}} labelPosition="left"> searchChannels(searchKeyword, searchGroup, searchModel);
<div style={{ display: 'flex' }}> }} labelPosition="left">
<Space> <div style={{ display: 'flex' }}>
<Form.Input <Space>
field="search_keyword" <Form.Input
label="搜索渠道关键词" field="search_keyword"
placeholder="ID，名称和密钥 ..." label="搜索"
value={searchKeyword} placeholder="ID，名称和密钥 ..."
loading={searching} value={searchKeyword}
onChange={(v) => { loading={searching}
setSearchKeyword(v.trim()); onChange={(v) => {
}} setSearchKeyword(v.trim());
/> }}
<Form.Input />
{/* <Form.Input
field="search_model" field="search_model"
label="模型" label="模型"
placeholder="模型关键字" placeholder="模型关键字"
@ -604,29 +605,111 @@ const ChannelsTable = () => {
<Form.Select field="group" label="分组" optionList={groupOptions} onChange={(v) => { <Form.Select field="group" label="分组" optionList={groupOptions} onChange={(v) => {
setSearchGroup(v); setSearchGroup(v);
searchChannels(searchKeyword, v, searchModel); searchChannels(searchKeyword, v, searchModel);
}} /> }} /> */}
<Button label="查询" type="primary" htmlType="submit" className="btn-margin-right" <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
style={{ marginRight: 8 }}>查询</Button> style={{ marginRight: 8 }}>查询</Button>
</Space>
</div>
</Form>
<div style={{
display: isMobile() ? '' : 'flex',
marginTop: isMobile() ? 0 : -45,
zIndex: 999,
position: 'relative',
pointerEvents: 'none'
}}>
<Space style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}>
<Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
() => {
setEditingChannel({
id: undefined
});
setShowEdit(true);
}
}>添加新的渠道</Button>
<Popconfirm
title="确定？"
okType={'warning'}
onConfirm={() => { testChannels("all") }}
position={isMobile() ? 'top' : 'top'}
>
<Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
</Popconfirm>
<Popconfirm
title="确定？"
okType={'warning'}
onConfirm={() => { testChannels("disabled") }}
position={isMobile() ? 'top' : 'top'}
>
<Button theme="light" type="warning" style={{ marginRight: 8 }}>测试禁用渠道</Button>
</Popconfirm>
{/* <Popconfirm
title="确定？"
okType={'secondary'}
onConfirm={updateAllChannelsBalance}
>
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
</Popconfirm> */}
<Popconfirm
title="确定是否要删除禁用通道？"
content="此修改将不可逆"
okType={'danger'}
onConfirm={deleteAllDisabledChannels}
>
<Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
</Popconfirm>
<Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
</Space>
{/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
{/*</div>*/}
</div>
{/* <div style={{ marginTop: 20 }}>
<Space>
<Typography.Text strong>开启批量删除</Typography.Text>
<Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
setEnableBatchDelete(v);
}}></Switch>
<Popconfirm
title="确定是否要删除所选通道？"
content="此修改将不可逆"
okType={'danger'}
onConfirm={batchDeleteChannels}
disabled={!enableBatchDelete}
position={'top'}
>
<Button disabled={!enableBatchDelete} theme="light" type="danger"
style={{ marginRight: 8 }}>删除所选通道</Button>
</Popconfirm>
<Popconfirm
title="确定是否要修复数据库一致性？"
content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用"
okType={'warning'}
onConfirm={fixChannelsAbilities}
position={'top'}
>
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
</Popconfirm>
</Space> </Space>
</div> </div>
</Form> <div style={{ marginTop: 10, display: 'flex' }}>
<div style={{ marginTop: 10, display: 'flex' }}>
<Space>
<Space> <Space>
<Typography.Text strong>使用ID排序</Typography.Text> <Space>
<Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => { <Typography.Text strong>使用ID排序</Typography.Text>
localStorage.setItem('id-sort', v + ''); <Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
setIdSort(v); localStorage.setItem('id-sort', v + '');
loadChannels(0, pageSize, v) setIdSort(v);
.then() loadChannels(0, pageSize, v)
.catch((reason) => { .then()
showError(reason); .catch((reason) => {
}); showError(reason);
}}></Switch> });
}}></Switch>
</Space>
</Space> </Space>
</Space> </div> */}
</div> </div>
<Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{ <Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage, currentPage: activePage,
pageSize: pageSize, pageSize: pageSize,
@ -647,80 +730,6 @@ const ChannelsTable = () => {
} }
} : null } : null
} /> } />
<div style={{
display: isMobile() ? '' : 'flex',
marginTop: isMobile() ? 0 : -45,
zIndex: 999,
position: 'relative',
pointerEvents: 'none'
}}>
<Space style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}>
<Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
() => {
setEditingChannel({
id: undefined
});
setShowEdit(true);
}
}>添加渠道</Button>
<Popconfirm
title="确定？"
okType={'warning'}
onConfirm={testAllChannels}
position={isMobile() ? 'top' : 'top'}
>
<Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
</Popconfirm>
<Popconfirm
title="确定？"
okType={'secondary'}
onConfirm={updateAllChannelsBalance}
>
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
</Popconfirm>
<Popconfirm
title="确定是否要删除禁用通道？"
content="此修改将不可逆"
okType={'danger'}
onConfirm={deleteAllDisabledChannels}
>
<Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
</Popconfirm>
<Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
</Space>
{/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
{/*</div>*/}
</div>
<div style={{ marginTop: 20 }}>
<Space>
<Typography.Text strong>开启批量删除</Typography.Text>
<Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
setEnableBatchDelete(v);
}}></Switch>
<Popconfirm
title="确定是否要删除所选通道？"
content="此修改将不可逆"
okType={'danger'}
onConfirm={batchDeleteChannels}
disabled={!enableBatchDelete}
position={'top'}
>
<Button disabled={!enableBatchDelete} theme="light" type="danger"
style={{ marginRight: 8 }}>删除所选通道</Button>
</Popconfirm>
<Popconfirm
title="确定是否要修复数据库一致性？"
content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用"
okType={'warning'}
onConfirm={fixChannelsAbilities}
position={'top'}
>
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
</Popconfirm>
</Space>
</div>
</> </>
); );
}; };