{t('进度')}: {testProgress.completed}/{testProgress.total}
0 ? (testProgress.completed / testProgress.total) * 100 : 0}%`,
height: '100%',
backgroundColor: 'var(--semi-color-primary)',
borderRadius: '3px',
transition: 'width 0.3s ease'
}} />
{currentTestingModel && (
{t('正在测试')}: {currentTestingModel.includes(':') ? currentTestingModel.split(':').slice(1).join(':').trim() : currentTestingModel}
)}
(
{text}
)
},
{
title: t('状态'),
key: 'status',
width: '20%',
render: (_, record) => {
if (record.isTesting) {
return {t('测试中')};
}
if (record.testResult) {
return (
{record.isSuccess ? t('成功') : t('失败')}
);
}
return {t('未测试')};
}
},
{
title: t('耗时'),
key: 'duration',
width: '15%',
render: (_, record) => {
if (record.testResult?.time) {
return (
{record.testResult.time.toFixed(2)}s
);
}
return '-';
}
},
{
title: t('操作'),
key: 'actions',
width: '25%',
render: (_, record) => (
}
onClick={async () => {
const success = await copy(record.model);
if (success) {
showSuccess(t('模型名称已复制'));
} else {
showError(t('复制失败'));
}
}}
/>
)
}
]}
pagination={false}
size='small'
style={{ marginBottom: '25px' }}
/>
{/* 显示搜索结果数量 */}
{modelSearchKeyword && (
{t('找到 {{count}} 个模型', { count: modelData.length })}
)}
);
};
const ChannelsTable = () => {
const { t } = useTranslation();
let type2label = undefined;
const 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, label: t('未知类型'), color: 'grey' };
}
return (
{type2label[type]?.label}
);
};
const renderTagType = () => {
return (
}
size='large'
shape='circle'
type='light'
>
{t('标签聚合')}
);
};
const renderStatus = (status) => {
switch (status) {
case 1:
return (
{t('已启用')}
);
case 2:
return (
{t('已禁用')}
);
case 3:
return (
{t('自动禁用')}
);
default:
return (
{t('未知状态')}
);
}
};
const renderResponseTime = (responseTime) => {
let time = responseTime / 1000;
time = time.toFixed(2) + t(' 秒');
if (responseTime === 0) {
return (
{t('未测试')}
);
} else if (responseTime <= 1000) {
return (
{time}
);
} else if (responseTime <= 3000) {
return (
{time}
);
} else if (responseTime <= 5000) {
return (
{time}
);
} else {
return (
{time}
);
}
};
// Define column keys for selection
const COLUMN_KEYS = {
ID: 'id',
NAME: 'name',
GROUP: 'group',
TYPE: 'type',
STATUS: 'status',
RESPONSE_TIME: 'response_time',
BALANCE: 'balance',
PRIORITY: 'priority',
WEIGHT: 'weight',
OPERATE: 'operate',
};
// State for column visibility
const [visibleColumns, setVisibleColumns] = useState({});
const [showColumnSelector, setShowColumnSelector] = useState(false);
// Load saved column preferences from localStorage
useEffect(() => {
const savedColumns = localStorage.getItem('channels-table-columns');
if (savedColumns) {
try {
const parsed = JSON.parse(savedColumns);
// Make sure all columns are accounted for
const defaults = getDefaultColumnVisibility();
const merged = { ...defaults, ...parsed };
setVisibleColumns(merged);
} catch (e) {
console.error('Failed to parse saved column preferences', e);
initDefaultColumns();
}
} else {
initDefaultColumns();
}
}, []);
// Update table when column visibility changes
useEffect(() => {
if (Object.keys(visibleColumns).length > 0) {
// Save to localStorage
localStorage.setItem(
'channels-table-columns',
JSON.stringify(visibleColumns),
);
}
}, [visibleColumns]);
// Get default column visibility
const getDefaultColumnVisibility = () => {
return {
[COLUMN_KEYS.ID]: true,
[COLUMN_KEYS.NAME]: true,
[COLUMN_KEYS.GROUP]: true,
[COLUMN_KEYS.TYPE]: true,
[COLUMN_KEYS.STATUS]: true,
[COLUMN_KEYS.RESPONSE_TIME]: true,
[COLUMN_KEYS.BALANCE]: true,
[COLUMN_KEYS.PRIORITY]: true,
[COLUMN_KEYS.WEIGHT]: true,
[COLUMN_KEYS.OPERATE]: true,
};
};
// Initialize default column visibility
const initDefaultColumns = () => {
const defaults = getDefaultColumnVisibility();
setVisibleColumns(defaults);
};
// Handle column visibility change
const handleColumnVisibilityChange = (columnKey, checked) => {
const updatedColumns = { ...visibleColumns, [columnKey]: checked };
setVisibleColumns(updatedColumns);
};
// Handle "Select All" checkbox
const handleSelectAll = (checked) => {
const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]);
const updatedColumns = {};
allKeys.forEach((key) => {
updatedColumns[key] = checked;
});
setVisibleColumns(updatedColumns);
};
// Define all columns with keys
const allColumns = [
{
key: COLUMN_KEYS.ID,
title: t('ID'),
dataIndex: 'id',
},
{
key: COLUMN_KEYS.NAME,
title: t('名称'),
dataIndex: 'name',
},
{
key: COLUMN_KEYS.GROUP,
title: t('分组'),
dataIndex: 'group',
render: (text, record, index) => {
return (
{text
?.split(',')
.sort((a, b) => {
if (a === 'default') return -1;
if (b === 'default') return 1;
return a.localeCompare(b);
})
.map((item, index) => {
return renderGroup(item);
})}
);
},
},
{
key: COLUMN_KEYS.TYPE,
title: t('类型'),
dataIndex: 'type',
render: (text, record, index) => {
if (record.children === undefined) {
return <>{renderType(text)};
} else {
return <>{renderTagType()};
}
},
},
{
key: COLUMN_KEYS.STATUS,
title: t('状态'),
dataIndex: 'status',
render: (text, record, index) => {
if (text === 3) {
if (record.other_info === '') {
record.other_info = '{}';
}
let otherInfo = JSON.parse(record.other_info);
let reason = otherInfo['status_reason'];
let time = otherInfo['status_time'];
return (
{renderStatus(text)}
);
} else {
return renderStatus(text);
}
},
},
{
key: COLUMN_KEYS.RESPONSE_TIME,
title: t('响应时间'),
dataIndex: 'response_time',
render: (text, record, index) => {
return {renderResponseTime(text)}
;
},
},
{
key: COLUMN_KEYS.BALANCE,
title: t('已用/剩余'),
dataIndex: 'expired_time',
render: (text, record, index) => {
if (record.children === undefined) {
return (
{renderQuota(record.used_quota)}
{
updateChannelBalance(record);
}}
>
${renderNumberWithPoint(record.balance)}
);
} else {
return (
{renderQuota(record.used_quota)}
);
}
},
},
{
key: COLUMN_KEYS.PRIORITY,
title: t('优先级'),
dataIndex: 'priority',
render: (text, record, index) => {
if (record.children === undefined) {
return (
{
manageChannel(record.id, 'priority', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.priority}
min={-999}
/>
);
} else {
return (
<>
{
Modal.warning({
title: t('修改子渠道优先级'),
content:
t('确定要修改所有子渠道优先级为 ') +
e.target.value +
t(' 吗？'),
onOk: () => {
if (e.target.value === '') {
return;
}
submitTagEdit('priority', {
tag: record.key,
priority: e.target.value,
});
},
});
}}
innerButtons
defaultValue={record.priority}
min={-999}
/>
);
}
},
},
{
key: COLUMN_KEYS.WEIGHT,
title: t('权重'),
dataIndex: 'weight',
render: (text, record, index) => {
if (record.children === undefined) {
return (
{
manageChannel(record.id, 'weight', record, e.target.value);
}}
keepFocus={true}
innerButtons
defaultValue={record.weight}
min={0}
/>
);
} else {
return (
{
Modal.warning({
title: t('修改子渠道权重'),
content:
t('确定要修改所有子渠道权重为 ') +
e.target.value +
t(' 吗？'),
onOk: () => {
if (e.target.value === '') {
return;
}
submitTagEdit('weight', {
tag: record.key,
weight: e.target.value,
});
},
});
}}
innerButtons
defaultValue={record.weight}
min={-999}
/>
);
}
},
},
{
key: COLUMN_KEYS.OPERATE,
title: '',
dataIndex: 'operate',
render: (text, record, index) => {
if (record.children === undefined) {
return (
}
onClick={() => {
setCurrentTestChannel(record);
setShowModelTestModal(true);
}}
>
{
manageChannel(record.id, 'delete', record).then(() => {
removeRecord(record);
});
}}
>
{record.status === 1 ? (
) : (
)}
{
copySelectedChannel(record);
}}
>
);
} else {
return (
<>
);
}
},
},
];
// Filter columns based on visibility settings
const getVisibleColumns = () => {
return allColumns.filter((column) => visibleColumns[column.key]);
};
// Column selector modal
const renderColumnSelector = () => {
return (
setShowColumnSelector(false)}
footer={
<>
}
style={{ width: isMobile() ? '90%' : 500 }}
bodyStyle={{ padding: '24px' }}
>
v === true)}
indeterminate={
Object.values(visibleColumns).some((v) => v === true) &&
!Object.values(visibleColumns).every((v) => v === true)
}
onChange={(e) => handleSelectAll(e.target.checked)}
>
{t('全选')}
{allColumns.map((column) => {
// Skip columns without title
if (!column.title) {
return null;
}
return (
handleColumnVisibilityChange(column.key, e.target.checked)
}
>
{column.title}
);
})}
{t('确定要删除所有 {{count}} 个测试失败的模型吗？此操作不可撤销。', { count: failedModels.length })}
{t('删除后将保留 {{remaining}} 个正常模型：', { remaining: remainingModels.length })}
{remainingModels.map((model, index) => (
{model}
))}
),
onOk: async () => {
try {
const newModels = remainingModels;
const updateData = {
id: currentTestChannel.id,
models: newModels.join(','),
};
const res = await API.put('/api/channel/', updateData);
if (res.data.success) {
updateChannelProperty(currentTestChannel.id, (channel) => {
channel.models = newModels.join(',');
});
setCurrentTestChannel({
...currentTestChannel,
models: newModels.join(',')
});
setBatchTestResults(prev => prev.filter(r => !failedModelNamesSet.has(r.model)));
await refresh();
showSuccess(t('已删除 {{count}} 个失败的模型', { count: failedModels.length }));
} else {
showError(res.data.message || t('批量删除失败'));
}
} catch (error) {
showError(error.message || t('批量删除失败'));
}
}
});
};
// 批量测试所有模型（并发版本）
const testAllModels = async () => {
// 1) 验证currentTestChannel存在且具有期望的属性
if (!currentTestChannel ||
typeof currentTestChannel !== 'object' ||
!currentTestChannel.id ||
!currentTestChannel.models ||
typeof currentTestChannel.models !== 'string') {
showError(t('当前测试渠道无效或缺少必需属性'));
return;
}
// 修剪空白、去重并过滤空字符串
const models = [...new Set(
currentTestChannel.models
.split(',')
.map(model => model.trim())
.filter(model => model.length > 0)
)];
if (models.length === 0) {
showError(t('没有可测试的模型'));
return;
}
// 创建 AbortController
const controller = new AbortController();
setBatchTestAbortController(controller);
setIsBatchTesting(true);
setBatchTestResults([]);
setCurrentTestingModel('');
setTestProgress({ completed: 0, total: models.length });
// 2) 使用try-catch-finally包装整个异步测试逻辑
try {
const results = await processBatch(models, concurrentLimit, controller);
const successCount = results.filter(r => r.success).length;
const failCount = results.filter(r => !r.success).length;
// 保存测试结果到缓存
saveTestResultsCache(currentTestChannel.id, results);
showInfo(t('批量测试完成：成功 {{successCount}} 个，失败 {{failCount}} 个', {
successCount,
failCount
}));
} catch (error) {
if (isCancellationError(error) || error.message.includes('取消')) {
showInfo(t('测试已取消'));
} else {
showError(t('批量测试过程中发生错误：') + error.message);
}
} finally {
// 3) 确保在finally中重置状态
setIsBatchTesting(false);
setCurrentTestingModel('');
setBatchTestAbortController(null);
}
};
const updateChannelBalance = async (record) => {
const res = await API.get(`/api/channel/update_balance/${record.id}/`);
const { success, message, balance } = res.data;
if (success) {
updateChannelProperty(record.id, (channel) => {
channel.balance = balance;
channel.balance_updated_time = Date.now() / 1000;
});
showInfo(
t('通道 {{name}} 余额更新成功！', { name: record.name }),
);
} else {
showError(message);
}
};
const testAllChannels = async () => {
const res = await API.get(`/api/channel/test`);
const { success, message } = res.data;
if (success) {
showInfo(t('已成功开始测试所有已启用通道，请刷新页面查看结果。'));
} else {
showError(message);
}
};
const deleteAllDisabledChannels = async () => {
const res = await API.delete(`/api/channel/disabled`);
const { success, message, data } = res.data;
if (success) {
showSuccess(
t('已删除所有禁用渠道，共计 {{count}} 个', { count: data }),
);
await refresh();
} else {
showError(message);
}
};
const updateAllChannelsBalance = async () => {
setUpdatingBalance(true);
const res = await API.get(`/api/channel/update_balance`);
const { success, message } = res.data;
if (success) {
showInfo(t('已更新完毕所有已启用通道余额！'));
} else {
showError(message);
}
setUpdatingBalance(false);
};
const batchDeleteChannels = async () => {
if (selectedChannels.length === 0) {
showError(t('请先选择要删除的通道！'));
return;
}
setLoading(true);
let ids = [];
selectedChannels.forEach((channel) => {
ids.push(channel.id);
});
const res = await API.post(`/api/channel/batch`, { ids: ids });
const { success, message, data } = res.data;
if (success) {
showSuccess(t('已删除 {{count}} 个通道！', { count: data }));
await refresh();
} else {
showError(message);
}
setLoading(false);
};
const fixChannelsAbilities = async () => {
const res = await API.post(`/api/channel/fix`);
const { success, message, data } = res.data;
if (success) {
showSuccess(t('已修复 {{count}} 个通道！', { count: data }));
await refresh();
} else {
showError(message);
}
};
let pageData = channels.slice(
(activePage - 1) * pageSize,
activePage * pageSize,
);
const handlePageChange = (page) => {
setActivePage(page);
if (page === Math.ceil(channels.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
loadChannels(page - 1, pageSize, idSort, enableTagMode).then((r) => {});
}
};
const handlePageSizeChange = async (size) => {
localStorage.setItem('page-size', size + '');
setPageSize(size);
setActivePage(1);
loadChannels(0, size, idSort, enableTagMode)
.then()
.catch((reason) => {
showError(reason);
});
};
const fetchGroups = async () => {
try {
let res = await API.get(`/api/group/`);
// add 'all' option
// res.data.data.unshift('all');
if (res === undefined) {
return;
}
setGroupOptions(
res.data.data.map((group) => ({
label: group,
value: group,
})),
);
} catch (error) {
showError(error.message);
}
};
const submitTagEdit = async (type, data) => {
switch (type) {
case 'priority':
if (data.priority === undefined || data.priority === '') {
showError(t('优先级必须是整数！'));
return;
}
data.priority = parseInt(data.priority);
break;
case 'weight':
if (
data.weight === undefined ||
data.weight < 0 ||
data.weight === ''
) {
showInfo(t('权重必须是非负整数！'));
return;
}
data.weight = parseInt(data.weight);
break;
}
try {
const res = await API.put('/api/channel/tag', data);
if (res?.data?.success) {
showSuccess(t('更新成功！'));
await refresh();
}
} catch (error) {
showError(error);
}
};
const closeEdit = () => {
setShowEdit(false);
};
const handleRow = (record, index) => {
if (record.status !== 1) {
return {
style: {
background: 'var(--semi-color-disabled-border)',
},
};
} else {
return {};
}
};
const batchSetChannelTag = async () => {
if (selectedChannels.length === 0) {
showError(t('请先选择要设置标签的渠道！'));
return;
}
if (batchSetTagValue === '') {
showError(t('标签不能为空！'));
return;
}
let ids = selectedChannels.map((channel) => channel.id);
const res = await API.post('/api/channel/batch/tag', {
ids: ids,
tag: batchSetTagValue === '' ? null : batchSetTagValue,
});
if (res.data.success) {
showSuccess(
t('已为 {{count}} 个渠道设置标签！', { count: res.data.data }),
);
await refresh();
setShowBatchSetTag(false);
} else {
showError(res.data.message);
}
};
return (
<>
{renderColumnSelector()}
setShowEditTag(false)}
refresh={refresh}
/>
{t('使用ID排序')}
{
localStorage.setItem('id-sort', v + '');
setIdSort(v);
loadChannels(0, pageSize, v, enableTagMode)
.then()
.catch((reason) => {
showError(reason);
});
}}
>
}
onClick={() => {
setEditingChannel({
id: undefined,
});
setShowEdit(true);
}}
>
{t('添加渠道')}
}
onClick={refresh}
>
{t('刷新')}
}
>
}>
{t('批量操作')}
{t('开启批量操作')}
{
setEnableBatchDelete(v);
}}
/>
{t('标签聚合模式')}
{
setEnableTagMode(v);
loadChannels(0, pageSize, idSort, v);
}}
/>
}
onClick={() => setShowColumnSelector(true)}
>
{t('列设置')}
'',
onPageSizeChange: (size) => {
handlePageSizeChange(size).then();
},
onPageChange: handlePageChange,
}}
expandAllRows={false}
onRow={handleRow}
rowSelection={
enableBatchDelete
? {
onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setSelectedChannels(selectedRows);
},
}
: null
}
/>
setShowBatchSetTag(false)}
maskClosable={false}
centered={true}
style={{ width: isMobile() ? '90%' : 500 }}
>
{t('请输入要设置的标签名称')}
setBatchSetTagValue(v)}
size='large'
/>
{t('已选择 {{count}} 个渠道', { count: selectedChannels.length })}
{/* 模型测试弹窗 */}
{currentTestChannel && (
)}
);
};
export default ChannelsTable;