feat: 完成渠道界面

This commit is contained in:
Apple\Apple 2024-03-16 09:47:29 +08:00
parent 034ea8dfcc
commit 61a9f8001b

View File

@ -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,6 +576,7 @@ const ChannelsTable = () => {
return ( return (
<> <>
<EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} /> <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
<div style={{ display: "flex", placeItems: "center", justifyContent: "space-between" }}>
<Form onSubmit={() => { <Form onSubmit={() => {
searchChannels(searchKeyword, searchGroup, searchModel); searchChannels(searchKeyword, searchGroup, searchModel);
}} labelPosition="left"> }} labelPosition="left">
@ -583,7 +584,7 @@ const ChannelsTable = () => {
<Space> <Space>
<Form.Input <Form.Input
field="search_keyword" field="search_keyword"
label="搜索渠道关键词" label="搜索"
placeholder="ID名称和密钥 ..." placeholder="ID名称和密钥 ..."
value={searchKeyword} value={searchKeyword}
loading={searching} loading={searching}
@ -591,7 +592,7 @@ const ChannelsTable = () => {
setSearchKeyword(v.trim()); setSearchKeyword(v.trim());
}} }}
/> />
<Form.Input {/* <Form.Input
field="search_model" field="search_model"
label="模型" label="模型"
placeholder="模型关键字" placeholder="模型关键字"
@ -604,49 +605,12 @@ 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> </Space>
</div> </div>
</Form> </Form>
<div style={{ marginTop: 10, display: 'flex' }}>
<Space>
<Space>
<Typography.Text strong>使用ID排序</Typography.Text>
<Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
localStorage.setItem('id-sort', v + '');
setIdSort(v);
loadChannels(0, pageSize, v)
.then()
.catch((reason) => {
showError(reason);
});
}}></Switch>
</Space>
</Space>
</div>
<Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: channelCount,
pageSizeOpts: [10, 20, 50, 100],
showSizeChanger: true,
formatPageText: (page) => '',
onPageSizeChange: (size) => {
handlePageSizeChange(size).then();
},
onPageChange: handlePageChange
}} loading={loading} onRow={handleRow} rowSelection={
enableBatchDelete ?
{
onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setSelectedChannels(selectedRows);
}
} : null
} />
<div style={{ <div style={{
display: isMobile() ? '' : 'flex', display: isMobile() ? '' : 'flex',
marginTop: isMobile() ? 0 : -45, marginTop: isMobile() ? 0 : -45,
@ -662,22 +626,30 @@ const ChannelsTable = () => {
}); });
setShowEdit(true); setShowEdit(true);
} }
}>添加渠道</Button> }>添加新的渠道</Button>
<Popconfirm <Popconfirm
title="确定?" title="确定?"
okType={'warning'} okType={'warning'}
onConfirm={testAllChannels} onConfirm={() => { testChannels("all") }}
position={isMobile() ? 'top' : 'top'} position={isMobile() ? 'top' : 'top'}
> >
<Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button> <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
</Popconfirm> </Popconfirm>
<Popconfirm <Popconfirm
title="确定?"
okType={'warning'}
onConfirm={() => { testChannels("disabled") }}
position={isMobile() ? 'top' : 'top'}
>
<Button theme="light" type="warning" style={{ marginRight: 8 }}>测试禁用渠道</Button>
</Popconfirm>
{/* <Popconfirm
title="确定?" title="确定?"
okType={'secondary'} okType={'secondary'}
onConfirm={updateAllChannelsBalance} onConfirm={updateAllChannelsBalance}
> >
<Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button> <Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
</Popconfirm> </Popconfirm> */}
<Popconfirm <Popconfirm
title="确定是否要删除禁用通道?" title="确定是否要删除禁用通道?"
content="此修改将不可逆" content="此修改将不可逆"
@ -693,7 +665,7 @@ const ChannelsTable = () => {
{/*</div>*/} {/*</div>*/}
</div> </div>
<div style={{ marginTop: 20 }}> {/* <div style={{ marginTop: 20 }}>
<Space> <Space>
<Typography.Text strong>开启批量删除</Typography.Text> <Typography.Text strong>开启批量删除</Typography.Text>
<Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => { <Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
@ -721,6 +693,43 @@ const ChannelsTable = () => {
</Popconfirm> </Popconfirm>
</Space> </Space>
</div> </div>
<div style={{ marginTop: 10, display: 'flex' }}>
<Space>
<Space>
<Typography.Text strong>使用ID排序</Typography.Text>
<Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
localStorage.setItem('id-sort', v + '');
setIdSort(v);
loadChannels(0, pageSize, v)
.then()
.catch((reason) => {
showError(reason);
});
}}></Switch>
</Space>
</Space>
</div> */}
</div>
<Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
currentPage: activePage,
pageSize: pageSize,
total: channelCount,
pageSizeOpts: [10, 20, 50, 100],
showSizeChanger: true,
formatPageText: (page) => '',
onPageSizeChange: (size) => {
handlePageSizeChange(size).then();
},
onPageChange: handlePageChange
}} loading={loading} onRow={handleRow} rowSelection={
enableBatchDelete ?
{
onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setSelectedChannels(selectedRows);
}
} : null
} />
</> </>
); );
}; };