Merge branches 'main' and 'main' of github.com:danding5/new-api

# Conflicts:
#	common/api_type.go
#	constant/api_type.go
#	constant/channel.go
#	relay/relay_adaptor.go
#	web/src/constants/channel.constants.js

web/src/components/table/channels/ChannelsActions.jsx

@@ -0,0 +1,283 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Dropdown,
+  Modal,
+  Switch,
+  Typography,
+  Select,
+} from '@douyinfe/semi-ui';
+import CompactModeToggle from '../../common/ui/CompactModeToggle';
+
+const ChannelsActions = ({
+  enableBatchDelete,
+  batchDeleteChannels,
+  setShowBatchSetTag,
+  testAllChannels,
+  fixChannelsAbilities,
+  updateAllChannelsBalance,
+  deleteAllDisabledChannels,
+  compactMode,
+  setCompactMode,
+  idSort,
+  setIdSort,
+  setEnableBatchDelete,
+  enableTagMode,
+  setEnableTagMode,
+  statusFilter,
+  setStatusFilter,
+  getFormValues,
+  loadChannels,
+  searchChannels,
+  activeTypeKey,
+  activePage,
+  pageSize,
+  setActivePage,
+  t,
+}) => {
+  return (
+    <div className='flex flex-col gap-2'>
+      {/* 第一行：批量操作按钮 + 设置开关 */}
+      <div className='flex flex-col md:flex-row justify-between gap-2'>
+        {/* 左侧：批量操作按钮 */}
+        <div className='flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto order-2 md:order-1'>
+          <Button
+            size='small'
+            disabled={!enableBatchDelete}
+            type='danger'
+            className='w-full md:w-auto'
+            onClick={() => {
+              Modal.confirm({
+                title: t('确定是否要删除所选通道？'),
+                content: t('此修改将不可逆'),
+                onOk: () => batchDeleteChannels(),
+              });
+            }}
+          >
+            {t('删除所选通道')}
+          </Button>
+
+          <Button
+            size='small'
+            disabled={!enableBatchDelete}
+            type='tertiary'
+            onClick={() => setShowBatchSetTag(true)}
+            className='w-full md:w-auto'
+          >
+            {t('批量设置标签')}
+          </Button>
+
+          <Dropdown
+            size='small'
+            trigger='click'
+            render={
+              <Dropdown.Menu>
+                <Dropdown.Item>
+                  <Button
+                    size='small'
+                    type='tertiary'
+                    className='w-full'
+                    onClick={() => {
+                      Modal.confirm({
+                        title: t('确定？'),
+                        content: t('确定要测试所有通道吗？'),
+                        onOk: () => testAllChannels(),
+                        size: 'small',
+                        centered: true,
+                      });
+                    }}
+                  >
+                    {t('测试所有通道')}
+                  </Button>
+                </Dropdown.Item>
+                <Dropdown.Item>
+                  <Button
+                    size='small'
+                    className='w-full'
+                    onClick={() => {
+                      Modal.confirm({
+                        title: t('确定是否要修复数据库一致性？'),
+                        content: t(
+                          '进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用',
+                        ),
+                        onOk: () => fixChannelsAbilities(),
+                        size: 'sm',
+                        centered: true,
+                      });
+                    }}
+                  >
+                    {t('修复数据库一致性')}
+                  </Button>
+                </Dropdown.Item>
+                <Dropdown.Item>
+                  <Button
+                    size='small'
+                    type='secondary'
+                    className='w-full'
+                    onClick={() => {
+                      Modal.confirm({
+                        title: t('确定？'),
+                        content: t('确定要更新所有已启用通道余额吗？'),
+                        onOk: () => updateAllChannelsBalance(),
+                        size: 'sm',
+                        centered: true,
+                      });
+                    }}
+                  >
+                    {t('更新所有已启用通道余额')}
+                  </Button>
+                </Dropdown.Item>
+                <Dropdown.Item>
+                  <Button
+                    size='small'
+                    type='danger'
+                    className='w-full'
+                    onClick={() => {
+                      Modal.confirm({
+                        title: t('确定是否要删除禁用通道？'),
+                        content: t('此修改将不可逆'),
+                        onOk: () => deleteAllDisabledChannels(),
+                        size: 'sm',
+                        centered: true,
+                      });
+                    }}
+                  >
+                    {t('删除禁用通道')}
+                  </Button>
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            }
+          >
+            <Button
+              size='small'
+              theme='light'
+              type='tertiary'
+              className='w-full md:w-auto'
+            >
+              {t('批量操作')}
+            </Button>
+          </Dropdown>
+
+          <CompactModeToggle
+            compactMode={compactMode}
+            setCompactMode={setCompactMode}
+            t={t}
+          />
+        </div>
+
+        {/* 右侧：设置开关区域 */}
+        <div className='flex flex-col md:flex-row items-start md:items-center gap-2 w-full md:w-auto order-1 md:order-2'>
+          <div className='flex items-center justify-between w-full md:w-auto'>
+            <Typography.Text strong className='mr-2'>
+              {t('使用ID排序')}
+            </Typography.Text>
+            <Switch
+              size='small'
+              checked={idSort}
+              onChange={(v) => {
+                localStorage.setItem('id-sort', v + '');
+                setIdSort(v);
+                const { searchKeyword, searchGroup, searchModel } =
+                  getFormValues();
+                if (
+                  searchKeyword === '' &&
+                  searchGroup === '' &&
+                  searchModel === ''
+                ) {
+                  loadChannels(activePage, pageSize, v, enableTagMode);
+                } else {
+                  searchChannels(
+                    enableTagMode,
+                    activeTypeKey,
+                    statusFilter,
+                    activePage,
+                    pageSize,
+                    v,
+                  );
+                }
+              }}
+            />
+          </div>
+
+          <div className='flex items-center justify-between w-full md:w-auto'>
+            <Typography.Text strong className='mr-2'>
+              {t('开启批量操作')}
+            </Typography.Text>
+            <Switch
+              size='small'
+              checked={enableBatchDelete}
+              onChange={(v) => {
+                localStorage.setItem('enable-batch-delete', v + '');
+                setEnableBatchDelete(v);
+              }}
+            />
+          </div>
+
+          <div className='flex items-center justify-between w-full md:w-auto'>
+            <Typography.Text strong className='mr-2'>
+              {t('标签聚合模式')}
+            </Typography.Text>
+            <Switch
+              size='small'
+              checked={enableTagMode}
+              onChange={(v) => {
+                localStorage.setItem('enable-tag-mode', v + '');
+                setEnableTagMode(v);
+                setActivePage(1);
+                loadChannels(1, pageSize, idSort, v);
+              }}
+            />
+          </div>
+
+          <div className='flex items-center justify-between w-full md:w-auto'>
+            <Typography.Text strong className='mr-2'>
+              {t('状态筛选')}
+            </Typography.Text>
+            <Select
+              size='small'
+              value={statusFilter}
+              onChange={(v) => {
+                localStorage.setItem('channel-status-filter', v);
+                setStatusFilter(v);
+                setActivePage(1);
+                loadChannels(
+                  1,
+                  pageSize,
+                  idSort,
+                  enableTagMode,
+                  activeTypeKey,
+                  v,
+                );
+              }}
+            >
+              <Select.Option value='all'>{t('全部')}</Select.Option>
+              <Select.Option value='enabled'>{t('已启用')}</Select.Option>
+              <Select.Option value='disabled'>{t('已禁用')}</Select.Option>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChannelsActions;

web/src/components/table/channels/ChannelsColumnDefs.jsx

@@ -0,0 +1,652 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Dropdown,
+  InputNumber,
+  Modal,
+  Space,
+  SplitButtonGroup,
+  Tag,
+  Tooltip,
+  Typography,
+} from '@douyinfe/semi-ui';
+import {
+  timestamp2string,
+  renderGroup,
+  renderQuota,
+  getChannelIcon,
+  renderQuotaWithAmount,
+  showSuccess,
+  showError,
+} from '../../../helpers';
+import { CHANNEL_OPTIONS } from '../../../constants';
+import { IconTreeTriangleDown, IconMore } from '@douyinfe/semi-icons';
+import { FaRandom } from 'react-icons/fa';
+
+// Render functions
+const renderType = (type, channelInfo = undefined, t) => {
+  let 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' };
+
+  let icon = getChannelIcon(type);
+
+  if (channelInfo?.is_multi_key) {
+    icon =
+      channelInfo?.multi_key_mode === 'random' ? (
+        <div className='flex items-center gap-1'>
+          <FaRandom className='text-blue-500' />
+          {icon}
+        </div>
+      ) : (
+        <div className='flex items-center gap-1'>
+          <IconTreeTriangleDown className='text-blue-500' />
+          {icon}
+        </div>
+      );
+  }
+
+  return (
+    <Tag color={type2label[type]?.color} shape='circle' prefixIcon={icon}>
+      {type2label[type]?.label}
+    </Tag>
+  );
+};
+
+const renderTagType = (t) => {
+  return (
+    <Tag color='light-blue' shape='circle' type='light'>
+      {t('标签聚合')}
+    </Tag>
+  );
+};
+
+const renderStatus = (status, channelInfo = undefined, t) => {
+  if (channelInfo) {
+    if (channelInfo.is_multi_key) {
+      let keySize = channelInfo.multi_key_size;
+      let enabledKeySize = keySize;
+      if (channelInfo.multi_key_status_list) {
+        enabledKeySize =
+          keySize - Object.keys(channelInfo.multi_key_status_list).length;
+      }
+      return renderMultiKeyStatus(status, keySize, enabledKeySize, t);
+    }
+  }
+  switch (status) {
+    case 1:
+      return (
+        <Tag color='green' shape='circle'>
+          {t('已启用')}
+        </Tag>
+      );
+    case 2:
+      return (
+        <Tag color='red' shape='circle'>
+          {t('已禁用')}
+        </Tag>
+      );
+    case 3:
+      return (
+        <Tag color='yellow' shape='circle'>
+          {t('自动禁用')}
+        </Tag>
+      );
+    default:
+      return (
+        <Tag color='grey' shape='circle'>
+          {t('未知状态')}
+        </Tag>
+      );
+  }
+};
+
+const renderMultiKeyStatus = (status, keySize, enabledKeySize, t) => {
+  switch (status) {
+    case 1:
+      return (
+        <Tag color='green' shape='circle'>
+          {t('已启用')} {enabledKeySize}/{keySize}
+        </Tag>
+      );
+    case 2:
+      return (
+        <Tag color='red' shape='circle'>
+          {t('已禁用')} {enabledKeySize}/{keySize}
+        </Tag>
+      );
+    case 3:
+      return (
+        <Tag color='yellow' shape='circle'>
+          {t('自动禁用')} {enabledKeySize}/{keySize}
+        </Tag>
+      );
+    default:
+      return (
+        <Tag color='grey' shape='circle'>
+          {t('未知状态')} {enabledKeySize}/{keySize}
+        </Tag>
+      );
+  }
+};
+
+const renderResponseTime = (responseTime, t) => {
+  let time = responseTime / 1000;
+  time = time.toFixed(2) + t(' 秒');
+  if (responseTime === 0) {
+    return (
+      <Tag color='grey' shape='circle'>
+        {t('未测试')}
+      </Tag>
+    );
+  } else if (responseTime <= 1000) {
+    return (
+      <Tag color='green' shape='circle'>
+        {time}
+      </Tag>
+    );
+  } else if (responseTime <= 3000) {
+    return (
+      <Tag color='lime' shape='circle'>
+        {time}
+      </Tag>
+    );
+  } else if (responseTime <= 5000) {
+    return (
+      <Tag color='yellow' shape='circle'>
+        {time}
+      </Tag>
+    );
+  } else {
+    return (
+      <Tag color='red' shape='circle'>
+        {time}
+      </Tag>
+    );
+  }
+};
+
+export const getChannelsColumns = ({
+  t,
+  COLUMN_KEYS,
+  updateChannelBalance,
+  manageChannel,
+  manageTag,
+  submitTagEdit,
+  testChannel,
+  setCurrentTestChannel,
+  setShowModelTestModal,
+  setEditingChannel,
+  setShowEdit,
+  setShowEditTag,
+  setEditingTag,
+  copySelectedChannel,
+  refresh,
+  activePage,
+  channels,
+  setShowMultiKeyManageModal,
+  setCurrentMultiKeyChannel,
+}) => {
+  return [
+    {
+      key: COLUMN_KEYS.ID,
+      title: t('ID'),
+      dataIndex: 'id',
+    },
+    {
+      key: COLUMN_KEYS.NAME,
+      title: t('名称'),
+      dataIndex: 'name',
+      render: (text, record, index) => {
+        if (record.remark && record.remark.trim() !== '') {
+          return (
+            <Tooltip
+              content={
+                <div className='flex flex-col gap-2 max-w-xs'>
+                  <div className='text-sm'>{record.remark}</div>
+                  <Button
+                    size='small'
+                    type='primary'
+                    theme='outline'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigator.clipboard
+                        .writeText(record.remark)
+                        .then(() => {
+                          showSuccess(t('复制成功'));
+                        })
+                        .catch(() => {
+                          showError(t('复制失败'));
+                        });
+                    }}
+                  >
+                    {t('复制')}
+                  </Button>
+                </div>
+              }
+              trigger='hover'
+              position='topLeft'
+            >
+              <span>{text}</span>
+            </Tooltip>
+          );
+        }
+        return text;
+      },
+    },
+    {
+      key: COLUMN_KEYS.GROUP,
+      title: t('分组'),
+      dataIndex: 'group',
+      render: (text, record, index) => (
+        <div>
+          <Space spacing={2}>
+            {text
+              ?.split(',')
+              .sort((a, b) => {
+                if (a === 'default') return -1;
+                if (b === 'default') return 1;
+                return a.localeCompare(b);
+              })
+              .map((item, index) => renderGroup(item))}
+          </Space>
+        </div>
+      ),
+    },
+    {
+      key: COLUMN_KEYS.TYPE,
+      title: t('类型'),
+      dataIndex: 'type',
+      render: (text, record, index) => {
+        if (record.children === undefined) {
+          if (record.channel_info) {
+            if (record.channel_info.is_multi_key) {
+              return <>{renderType(text, record.channel_info, t)}</>;
+            }
+          }
+          return <>{renderType(text, undefined, t)}</>;
+        } else {
+          return <>{renderTagType(t)}</>;
+        }
+      },
+    },
+    {
+      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 (
+            <div>
+              <Tooltip
+                content={
+                  t('原因：') + reason + t('，时间：') + timestamp2string(time)
+                }
+              >
+                {renderStatus(text, record.channel_info, t)}
+              </Tooltip>
+            </div>
+          );
+        } else {
+          return renderStatus(text, record.channel_info, t);
+        }
+      },
+    },
+    {
+      key: COLUMN_KEYS.RESPONSE_TIME,
+      title: t('响应时间'),
+      dataIndex: 'response_time',
+      render: (text, record, index) => <div>{renderResponseTime(text, t)}</div>,
+    },
+    {
+      key: COLUMN_KEYS.BALANCE,
+      title: t('已用/剩余'),
+      dataIndex: 'expired_time',
+      render: (text, record, index) => {
+        if (record.children === undefined) {
+          return (
+            <div>
+              <Space spacing={1}>
+                <Tooltip content={t('已用额度')}>
+                  <Tag color='white' type='ghost' shape='circle'>
+                    {renderQuota(record.used_quota)}
+                  </Tag>
+                </Tooltip>
+                <Tooltip
+                  content={t('剩余额度$') + record.balance + t('，点击更新')}
+                >
+                  <Tag
+                    color='white'
+                    type='ghost'
+                    shape='circle'
+                    onClick={() => updateChannelBalance(record)}
+                  >
+                    {renderQuotaWithAmount(record.balance)}
+                  </Tag>
+                </Tooltip>
+              </Space>
+            </div>
+          );
+        } else {
+          return (
+            <Tooltip content={t('已用额度')}>
+              <Tag color='white' type='ghost' shape='circle'>
+                {renderQuota(record.used_quota)}
+              </Tag>
+            </Tooltip>
+          );
+        }
+      },
+    },
+    {
+      key: COLUMN_KEYS.PRIORITY,
+      title: t('优先级'),
+      dataIndex: 'priority',
+      render: (text, record, index) => {
+        if (record.children === undefined) {
+          return (
+            <div>
+              <InputNumber
+                style={{ width: 70 }}
+                name='priority'
+                onBlur={(e) => {
+                  manageChannel(record.id, 'priority', record, e.target.value);
+                }}
+                keepFocus={true}
+                innerButtons
+                defaultValue={record.priority}
+                min={-999}
+                size='small'
+              />
+            </div>
+          );
+        } else {
+          return (
+            <InputNumber
+              style={{ width: 70 }}
+              name='priority'
+              keepFocus={true}
+              onBlur={(e) => {
+                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}
+              size='small'
+            />
+          );
+        }
+      },
+    },
+    {
+      key: COLUMN_KEYS.WEIGHT,
+      title: t('权重'),
+      dataIndex: 'weight',
+      render: (text, record, index) => {
+        if (record.children === undefined) {
+          return (
+            <div>
+              <InputNumber
+                style={{ width: 70 }}
+                name='weight'
+                onBlur={(e) => {
+                  manageChannel(record.id, 'weight', record, e.target.value);
+                }}
+                keepFocus={true}
+                innerButtons
+                defaultValue={record.weight}
+                min={0}
+                size='small'
+              />
+            </div>
+          );
+        } else {
+          return (
+            <InputNumber
+              style={{ width: 70 }}
+              name='weight'
+              keepFocus={true}
+              onBlur={(e) => {
+                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}
+              size='small'
+            />
+          );
+        }
+      },
+    },
+    {
+      key: COLUMN_KEYS.OPERATE,
+      title: '',
+      dataIndex: 'operate',
+      fixed: 'right',
+      render: (text, record, index) => {
+        if (record.children === undefined) {
+          const moreMenuItems = [
+            {
+              node: 'item',
+              name: t('删除'),
+              type: 'danger',
+              onClick: () => {
+                Modal.confirm({
+                  title: t('确定是否要删除此渠道？'),
+                  content: t('此修改将不可逆'),
+                  onOk: () => {
+                    (async () => {
+                      await manageChannel(record.id, 'delete', record);
+                      await refresh();
+                      setTimeout(() => {
+                        if (channels.length === 0 && activePage > 1) {
+                          refresh(activePage - 1);
+                        }
+                      }, 100);
+                    })();
+                  },
+                });
+              },
+            },
+            {
+              node: 'item',
+              name: t('复制'),
+              type: 'tertiary',
+              onClick: () => {
+                Modal.confirm({
+                  title: t('确定是否要复制此渠道？'),
+                  content: t('复制渠道的所有信息'),
+                  onOk: () => copySelectedChannel(record),
+                });
+              },
+            },
+          ];
+
+          return (
+            <Space wrap>
+              <SplitButtonGroup
+                className='overflow-hidden'
+                aria-label={t('测试单个渠道操作项目组')}
+              >
+                <Button
+                  size='small'
+                  type='tertiary'
+                  onClick={() => testChannel(record, '')}
+                >
+                  {t('测试')}
+                </Button>
+                <Button
+                  size='small'
+                  type='tertiary'
+                  icon={<IconTreeTriangleDown />}
+                  onClick={() => {
+                    setCurrentTestChannel(record);
+                    setShowModelTestModal(true);
+                  }}
+                />
+              </SplitButtonGroup>
+
+              {record.status === 1 ? (
+                <Button
+                  type='danger'
+                  size='small'
+                  onClick={() => manageChannel(record.id, 'disable', record)}
+                >
+                  {t('禁用')}
+                </Button>
+              ) : (
+                <Button
+                  size='small'
+                  onClick={() => manageChannel(record.id, 'enable', record)}
+                >
+                  {t('启用')}
+                </Button>
+              )}
+
+              {record.channel_info?.is_multi_key ? (
+                <SplitButtonGroup aria-label={t('多密钥渠道操作项目组')}>
+                  <Button
+                    type='tertiary'
+                    size='small'
+                    onClick={() => {
+                      setEditingChannel(record);
+                      setShowEdit(true);
+                    }}
+                  >
+                    {t('编辑')}
+                  </Button>
+                  <Dropdown
+                    trigger='click'
+                    position='bottomRight'
+                    menu={[
+                      {
+                        node: 'item',
+                        name: t('多密钥管理'),
+                        onClick: () => {
+                          setCurrentMultiKeyChannel(record);
+                          setShowMultiKeyManageModal(true);
+                        },
+                      },
+                    ]}
+                  >
+                    <Button
+                      type='tertiary'
+                      size='small'
+                      icon={<IconTreeTriangleDown />}
+                    />
+                  </Dropdown>
+                </SplitButtonGroup>
+              ) : (
+                <Button
+                  type='tertiary'
+                  size='small'
+                  onClick={() => {
+                    setEditingChannel(record);
+                    setShowEdit(true);
+                  }}
+                >
+                  {t('编辑')}
+                </Button>
+              )}
+
+              <Dropdown
+                trigger='click'
+                position='bottomRight'
+                menu={moreMenuItems}
+              >
+                <Button icon={<IconMore />} type='tertiary' size='small' />
+              </Dropdown>
+            </Space>
+          );
+        } else {
+          // 标签操作按钮
+          return (
+            <Space wrap>
+              <Button
+                type='tertiary'
+                size='small'
+                onClick={() => manageTag(record.key, 'enable')}
+              >
+                {t('启用全部')}
+              </Button>
+              <Button
+                type='tertiary'
+                size='small'
+                onClick={() => manageTag(record.key, 'disable')}
+              >
+                {t('禁用全部')}
+              </Button>
+              <Button
+                type='tertiary'
+                size='small'
+                onClick={() => {
+                  setShowEditTag(true);
+                  setEditingTag(record.key);
+                }}
+              >
+                {t('编辑')}
+              </Button>
+            </Space>
+          );
+        }
+      },
+    },
+  ];
+};

web/src/components/table/channels/ChannelsFilters.jsx

@@ -0,0 +1,159 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Button, Form } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+const ChannelsFilters = ({
+  setEditingChannel,
+  setShowEdit,
+  refresh,
+  setShowColumnSelector,
+  formInitValues,
+  setFormApi,
+  searchChannels,
+  enableTagMode,
+  formApi,
+  groupOptions,
+  loading,
+  searching,
+  t,
+}) => {
+  return (
+    <div className='flex flex-col md:flex-row justify-between items-center gap-2 w-full'>
+      <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
+        <Button
+          size='small'
+          theme='light'
+          type='primary'
+          className='w-full md:w-auto'
+          onClick={() => {
+            setEditingChannel({
+              id: undefined,
+            });
+            setShowEdit(true);
+          }}
+        >
+          {t('添加渠道')}
+        </Button>
+
+        <Button
+          size='small'
+          type='tertiary'
+          className='w-full md:w-auto'
+          onClick={refresh}
+        >
+          {t('刷新')}
+        </Button>
+
+        <Button
+          size='small'
+          type='tertiary'
+          onClick={() => setShowColumnSelector(true)}
+          className='w-full md:w-auto'
+        >
+          {t('列设置')}
+        </Button>
+      </div>
+
+      <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto order-1 md:order-2'>
+        <Form
+          initValues={formInitValues}
+          getFormApi={(api) => setFormApi(api)}
+          onSubmit={() => searchChannels(enableTagMode)}
+          allowEmpty={true}
+          autoComplete='off'
+          layout='horizontal'
+          trigger='change'
+          stopValidateWithError={false}
+          className='flex flex-col md:flex-row items-center gap-2 w-full'
+        >
+          <div className='relative w-full md:w-64'>
+            <Form.Input
+              size='small'
+              field='searchKeyword'
+              prefix={<IconSearch />}
+              placeholder={t('渠道ID，名称，密钥，API地址')}
+              showClear
+              pure
+            />
+          </div>
+          <div className='w-full md:w-48'>
+            <Form.Input
+              size='small'
+              field='searchModel'
+              prefix={<IconSearch />}
+              placeholder={t('模型关键字')}
+              showClear
+              pure
+            />
+          </div>
+          <div className='w-full md:w-32'>
+            <Form.Select
+              size='small'
+              field='searchGroup'
+              placeholder={t('选择分组')}
+              optionList={[
+                { label: t('选择分组'), value: null },
+                ...groupOptions,
+              ]}
+              className='w-full'
+              showClear
+              pure
+              onChange={() => {
+                // 延迟执行搜索，让表单值先更新
+                setTimeout(() => {
+                  searchChannels(enableTagMode);
+                }, 0);
+              }}
+            />
+          </div>
+          <Button
+            size='small'
+            type='tertiary'
+            htmlType='submit'
+            loading={loading || searching}
+            className='w-full md:w-auto'
+          >
+            {t('查询')}
+          </Button>
+          <Button
+            size='small'
+            type='tertiary'
+            onClick={() => {
+              if (formApi) {
+                formApi.reset();
+                // 重置后立即查询，使用setTimeout确保表单重置完成
+                setTimeout(() => {
+                  refresh();
+                }, 100);
+              }
+            }}
+            className='w-full md:w-auto'
+          >
+            {t('重置')}
+          </Button>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default ChannelsFilters;

web/src/components/table/channels/ChannelsTable.jsx

@@ -0,0 +1,168 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useMemo } from 'react';
+import { Empty } from '@douyinfe/semi-ui';
+import CardTable from '../../common/ui/CardTable';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { getChannelsColumns } from './ChannelsColumnDefs';
+
+const ChannelsTable = (channelsData) => {
+  const {
+    channels,
+    loading,
+    searching,
+    activePage,
+    pageSize,
+    channelCount,
+    enableBatchDelete,
+    compactMode,
+    visibleColumns,
+    setSelectedChannels,
+    handlePageChange,
+    handlePageSizeChange,
+    handleRow,
+    t,
+    COLUMN_KEYS,
+    // Column functions and data
+    updateChannelBalance,
+    manageChannel,
+    manageTag,
+    submitTagEdit,
+    testChannel,
+    setCurrentTestChannel,
+    setShowModelTestModal,
+    setEditingChannel,
+    setShowEdit,
+    setShowEditTag,
+    setEditingTag,
+    copySelectedChannel,
+    refresh,
+    // Multi-key management
+    setShowMultiKeyManageModal,
+    setCurrentMultiKeyChannel,
+  } = channelsData;
+
+  // Get all columns
+  const allColumns = useMemo(() => {
+    return getChannelsColumns({
+      t,
+      COLUMN_KEYS,
+      updateChannelBalance,
+      manageChannel,
+      manageTag,
+      submitTagEdit,
+      testChannel,
+      setCurrentTestChannel,
+      setShowModelTestModal,
+      setEditingChannel,
+      setShowEdit,
+      setShowEditTag,
+      setEditingTag,
+      copySelectedChannel,
+      refresh,
+      activePage,
+      channels,
+      setShowMultiKeyManageModal,
+      setCurrentMultiKeyChannel,
+    });
+  }, [
+    t,
+    COLUMN_KEYS,
+    updateChannelBalance,
+    manageChannel,
+    manageTag,
+    submitTagEdit,
+    testChannel,
+    setCurrentTestChannel,
+    setShowModelTestModal,
+    setEditingChannel,
+    setShowEdit,
+    setShowEditTag,
+    setEditingTag,
+    copySelectedChannel,
+    refresh,
+    activePage,
+    channels,
+    setShowMultiKeyManageModal,
+    setCurrentMultiKeyChannel,
+  ]);
+
+  // Filter columns based on visibility settings
+  const getVisibleColumns = () => {
+    return allColumns.filter((column) => visibleColumns[column.key]);
+  };
+
+  const visibleColumnsList = useMemo(() => {
+    return getVisibleColumns();
+  }, [visibleColumns, allColumns]);
+
+  const tableColumns = useMemo(() => {
+    return compactMode
+      ? visibleColumnsList.map(({ fixed, ...rest }) => rest)
+      : visibleColumnsList;
+  }, [compactMode, visibleColumnsList]);
+
+  return (
+    <CardTable
+      columns={tableColumns}
+      dataSource={channels}
+      scroll={compactMode ? undefined : { x: 'max-content' }}
+      pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: channelCount,
+        pageSizeOpts: [10, 20, 50, 100],
+        showSizeChanger: true,
+        onPageSizeChange: handlePageSizeChange,
+        onPageChange: handlePageChange,
+      }}
+      hidePagination={true}
+      expandAllRows={false}
+      onRow={handleRow}
+      rowSelection={
+        enableBatchDelete
+          ? {
+              onChange: (selectedRowKeys, selectedRows) => {
+                setSelectedChannels(selectedRows);
+              },
+            }
+          : null
+      }
+      empty={
+        <Empty
+          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+          darkModeImage={
+            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+          }
+          description={t('搜索无结果')}
+          style={{ padding: 30 }}
+        />
+      }
+      className='rounded-xl overflow-hidden'
+      size='middle'
+      loading={loading || searching}
+    />
+  );
+};
+
+export default ChannelsTable;

web/src/components/table/channels/ChannelsTabs.jsx

@@ -0,0 +1,97 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Tabs, TabPane, Tag } from '@douyinfe/semi-ui';
+import { CHANNEL_OPTIONS } from '../../../constants';
+import { getChannelIcon } from '../../../helpers';
+
+const ChannelsTabs = ({
+  enableTagMode,
+  activeTypeKey,
+  setActiveTypeKey,
+  channelTypeCounts,
+  availableTypeKeys,
+  loadChannels,
+  activePage,
+  pageSize,
+  idSort,
+  setActivePage,
+  t,
+}) => {
+  if (enableTagMode) return null;
+
+  const handleTabChange = (key) => {
+    setActiveTypeKey(key);
+    setActivePage(1);
+    loadChannels(1, pageSize, idSort, enableTagMode, key);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTypeKey}
+      type='card'
+      collapsible
+      onChange={handleTabChange}
+      className='mb-2'
+    >
+      <TabPane
+        itemKey='all'
+        tab={
+          <span className='flex items-center gap-2'>
+            {t('全部')}
+            <Tag
+              color={activeTypeKey === 'all' ? 'red' : 'grey'}
+              shape='circle'
+            >
+              {channelTypeCounts['all'] || 0}
+            </Tag>
+          </span>
+        }
+      />
+
+      {CHANNEL_OPTIONS.filter((opt) =>
+        availableTypeKeys.includes(String(opt.value)),
+      ).map((option) => {
+        const key = String(option.value);
+        const count = channelTypeCounts[option.value] || 0;
+        return (
+          <TabPane
+            key={key}
+            itemKey={key}
+            tab={
+              <span className='flex items-center gap-2'>
+                {getChannelIcon(option.value)}
+                {option.label}
+                <Tag
+                  color={activeTypeKey === key ? 'red' : 'grey'}
+                  shape='circle'
+                >
+                  {count}
+                </Tag>
+              </span>
+            }
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default ChannelsTabs;

web/src/components/table/channels/index.jsx

@@ -0,0 +1,88 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import CardPro from '../../common/ui/CardPro';
+import ChannelsTable from './ChannelsTable';
+import ChannelsActions from './ChannelsActions';
+import ChannelsFilters from './ChannelsFilters';
+import ChannelsTabs from './ChannelsTabs';
+import { useChannelsData } from '../../../hooks/channels/useChannelsData';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import BatchTagModal from './modals/BatchTagModal';
+import ModelTestModal from './modals/ModelTestModal';
+import ColumnSelectorModal from './modals/ColumnSelectorModal';
+import EditChannelModal from './modals/EditChannelModal';
+import EditTagModal from './modals/EditTagModal';
+import MultiKeyManageModal from './modals/MultiKeyManageModal';
+import { createCardProPagination } from '../../../helpers/utils';
+
+const ChannelsPage = () => {
+  const channelsData = useChannelsData();
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {/* Modals */}
+      <ColumnSelectorModal {...channelsData} />
+      <EditTagModal
+        visible={channelsData.showEditTag}
+        tag={channelsData.editingTag}
+        handleClose={() => channelsData.setShowEditTag(false)}
+        refresh={channelsData.refresh}
+      />
+      <EditChannelModal
+        refresh={channelsData.refresh}
+        visible={channelsData.showEdit}
+        handleClose={channelsData.closeEdit}
+        editingChannel={channelsData.editingChannel}
+      />
+      <BatchTagModal {...channelsData} />
+      <ModelTestModal {...channelsData} />
+      <MultiKeyManageModal
+        visible={channelsData.showMultiKeyManageModal}
+        onCancel={() => channelsData.setShowMultiKeyManageModal(false)}
+        channel={channelsData.currentMultiKeyChannel}
+        onRefresh={channelsData.refresh}
+      />
+
+      {/* Main Content */}
+      <CardPro
+        type='type3'
+        tabsArea={<ChannelsTabs {...channelsData} />}
+        actionsArea={<ChannelsActions {...channelsData} />}
+        searchArea={<ChannelsFilters {...channelsData} />}
+        paginationArea={createCardProPagination({
+          currentPage: channelsData.activePage,
+          pageSize: channelsData.pageSize,
+          total: channelsData.channelCount,
+          onPageChange: channelsData.handlePageChange,
+          onPageSizeChange: channelsData.handlePageSizeChange,
+          isMobile: isMobile,
+          t: channelsData.t,
+        })}
+        t={channelsData.t}
+      >
+        <ChannelsTable {...channelsData} />
+      </CardPro>
+    </>
+  );
+};
+
+export default ChannelsPage;

web/src/components/table/channels/modals/BatchTagModal.jsx

@@ -0,0 +1,63 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Modal, Input, Typography } from '@douyinfe/semi-ui';
+
+const BatchTagModal = ({
+  showBatchSetTag,
+  setShowBatchSetTag,
+  batchSetChannelTag,
+  batchSetTagValue,
+  setBatchSetTagValue,
+  selectedChannels,
+  t,
+}) => {
+  return (
+    <Modal
+      title={t('批量设置标签')}
+      visible={showBatchSetTag}
+      onOk={batchSetChannelTag}
+      onCancel={() => setShowBatchSetTag(false)}
+      maskClosable={false}
+      centered={true}
+      size='small'
+      className='!rounded-lg'
+    >
+      <div className='mb-5'>
+        <Typography.Text>{t('请输入要设置的标签名称')}</Typography.Text>
+      </div>
+      <Input
+        placeholder={t('请输入标签名称')}
+        value={batchSetTagValue}
+        onChange={(v) => setBatchSetTagValue(v)}
+      />
+      <div className='mt-4'>
+        <Typography.Text type='secondary'>
+          {t('已选择 ${count} 个渠道').replace(
+            '${count}',
+            selectedChannels.length,
+          )}
+        </Typography.Text>
+      </div>
+    </Modal>
+  );
+};
+
+export default BatchTagModal;

web/src/components/table/channels/modals/ColumnSelectorModal.jsx

@@ -0,0 +1,128 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
+import { getChannelsColumns } from '../ChannelsColumnDefs';
+
+const ColumnSelectorModal = ({
+  showColumnSelector,
+  setShowColumnSelector,
+  visibleColumns,
+  handleColumnVisibilityChange,
+  handleSelectAll,
+  initDefaultColumns,
+  COLUMN_KEYS,
+  t,
+  // Props needed for getChannelsColumns
+  updateChannelBalance,
+  manageChannel,
+  manageTag,
+  submitTagEdit,
+  testChannel,
+  setCurrentTestChannel,
+  setShowModelTestModal,
+  setEditingChannel,
+  setShowEdit,
+  setShowEditTag,
+  setEditingTag,
+  copySelectedChannel,
+  refresh,
+  activePage,
+  channels,
+}) => {
+  // Get all columns for display in selector
+  const allColumns = getChannelsColumns({
+    t,
+    COLUMN_KEYS,
+    updateChannelBalance,
+    manageChannel,
+    manageTag,
+    submitTagEdit,
+    testChannel,
+    setCurrentTestChannel,
+    setShowModelTestModal,
+    setEditingChannel,
+    setShowEdit,
+    setShowEditTag,
+    setEditingTag,
+    copySelectedChannel,
+    refresh,
+    activePage,
+    channels,
+  });
+
+  return (
+    <Modal
+      title={t('列设置')}
+      visible={showColumnSelector}
+      onCancel={() => setShowColumnSelector(false)}
+      footer={
+        <div className='flex justify-end'>
+          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
+          <Button onClick={() => setShowColumnSelector(false)}>
+            {t('取消')}
+          </Button>
+          <Button onClick={() => setShowColumnSelector(false)}>
+            {t('确定')}
+          </Button>
+        </div>
+      }
+    >
+      <div style={{ marginBottom: 20 }}>
+        <Checkbox
+          checked={Object.values(visibleColumns).every((v) => v === true)}
+          indeterminate={
+            Object.values(visibleColumns).some((v) => v === true) &&
+            !Object.values(visibleColumns).every((v) => v === true)
+          }
+          onChange={(e) => handleSelectAll(e.target.checked)}
+        >
+          {t('全选')}
+        </Checkbox>
+      </div>
+      <div
+        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
+        style={{ border: '1px solid var(--semi-color-border)' }}
+      >
+        {allColumns.map((column) => {
+          // Skip columns without title
+          if (!column.title) {
+            return null;
+          }
+
+          return (
+            <div key={column.key} className='w-1/2 mb-4 pr-2'>
+              <Checkbox
+                checked={!!visibleColumns[column.key]}
+                onChange={(e) =>
+                  handleColumnVisibilityChange(column.key, e.target.checked)
+                }
+              >
+                {column.title}
+              </Checkbox>
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default ColumnSelectorModal;

web/src/components/table/channels/modals/EditTagModal.jsx

@@ -0,0 +1,521 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  API,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
+  verifyJSON,
+  selectFilter,
+} from '../../../../helpers';
+import {
+  SideSheet,
+  Space,
+  Button,
+  Typography,
+  Spin,
+  Banner,
+  Card,
+  Tag,
+  Avatar,
+  Form,
+} from '@douyinfe/semi-ui';
+import {
+  IconSave,
+  IconClose,
+  IconBookmark,
+  IconUser,
+  IconCode,
+} from '@douyinfe/semi-icons';
+import { getChannelModels } from '../../../../helpers';
+import { useTranslation } from 'react-i18next';
+
+const { Text, Title } = Typography;
+
+const MODEL_MAPPING_EXAMPLE = {
+  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
+};
+
+const EditTagModal = (props) => {
+  const { t } = useTranslation();
+  const { visible, tag, handleClose, refresh } = props;
+  const [loading, setLoading] = useState(false);
+  const [originModelOptions, setOriginModelOptions] = useState([]);
+  const [modelOptions, setModelOptions] = useState([]);
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [customModel, setCustomModel] = useState('');
+  const originInputs = {
+    tag: '',
+    new_tag: null,
+    model_mapping: null,
+    groups: [],
+    models: [],
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const formApiRef = useRef(null);
+  const getInitValues = () => ({ ...originInputs });
+
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+    if (formApiRef.current) {
+      formApiRef.current.setValue(name, value);
+    }
+    if (name === 'type') {
+      let localModels = [];
+      switch (value) {
+        case 2:
+          localModels = [
+            'mj_imagine',
+            'mj_variation',
+            'mj_reroll',
+            'mj_blend',
+            'mj_upscale',
+            'mj_describe',
+            'mj_uploads',
+          ];
+          break;
+        case 5:
+          localModels = [
+            'swap_face',
+            'mj_imagine',
+            'mj_video',
+            'mj_edits',
+            'mj_variation',
+            'mj_reroll',
+            'mj_blend',
+            'mj_upscale',
+            'mj_describe',
+            'mj_zoom',
+            'mj_shorten',
+            'mj_modal',
+            'mj_inpaint',
+            'mj_custom_zoom',
+            'mj_high_variation',
+            'mj_low_variation',
+            'mj_pan',
+            'mj_uploads',
+          ];
+          break;
+        case 36:
+          localModels = ['suno_music', 'suno_lyrics'];
+          break;
+        case 52:
+          localModels = ['NousResearch/Hermes-4-405B-FP8', 'Qwen/Qwen3-235B-A22B-Thinking-2507', 'Qwen/Qwen3-Coder-480B-A35B-Instruct-FP8','Qwen/Qwen3-235B-A22B-Instruct-2507', 'zai-org/GLM-4.5-FP8', 'openai/gpt-oss-120b', 'deepseek-ai/DeepSeek-R1-0528', 'deepseek-ai/DeepSeek-R1', 'deepseek-ai/DeepSeek-V3-0324', 'deepseek-ai/DeepSeek-V3.1'];
+          break; 
+        default:
+          localModels = getChannelModels(value);
+          break;
+      }
+      if (inputs.models.length === 0) {
+        setInputs((inputs) => ({ ...inputs, models: localModels }));
+      }
+    }
+  };
+
+  const fetchModels = async () => {
+    try {
+      let res = await API.get(`/api/channel/models`);
+      let localModelOptions = res.data.data.map((model) => ({
+        label: model.id,
+        value: model.id,
+      }));
+      setOriginModelOptions(localModelOptions);
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group/`);
+      if (res === undefined) {
+        return;
+      }
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          label: group,
+          value: group,
+        })),
+      );
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  const handleSave = async (values) => {
+    setLoading(true);
+    const formVals = values || formApiRef.current?.getValues() || {};
+    let data = { tag };
+    if (formVals.model_mapping) {
+      if (!verifyJSON(formVals.model_mapping)) {
+        showInfo('模型映射必须是合法的 JSON 格式！');
+        setLoading(false);
+        return;
+      }
+      data.model_mapping = formVals.model_mapping;
+    }
+    if (formVals.groups && formVals.groups.length > 0) {
+      data.groups = formVals.groups.join(',');
+    }
+    if (formVals.models && formVals.models.length > 0) {
+      data.models = formVals.models.join(',');
+    }
+    data.new_tag = formVals.new_tag;
+    if (
+      data.model_mapping === undefined &&
+      data.groups === undefined &&
+      data.models === undefined &&
+      data.new_tag === undefined
+    ) {
+      showWarning('没有任何修改！');
+      setLoading(false);
+      return;
+    }
+    await submit(data);
+    setLoading(false);
+  };
+
+  const submit = async (data) => {
+    try {
+      const res = await API.put('/api/channel/tag', data);
+      if (res?.data?.success) {
+        showSuccess('标签更新成功！');
+        refresh();
+        handleClose();
+      }
+    } catch (error) {
+      showError(error);
+    }
+  };
+
+  useEffect(() => {
+    let localModelOptions = [...originModelOptions];
+    inputs.models.forEach((model) => {
+      if (!localModelOptions.find((option) => option.label === model)) {
+        localModelOptions.push({
+          label: model,
+          value: model,
+        });
+      }
+    });
+    setModelOptions(localModelOptions);
+  }, [originModelOptions, inputs.models]);
+
+  useEffect(() => {
+    const fetchTagModels = async () => {
+      if (!tag) return;
+      setLoading(true);
+      try {
+        const res = await API.get(`/api/channel/tag/models?tag=${tag}`);
+        if (res?.data?.success) {
+          const models = res.data.data ? res.data.data.split(',') : [];
+          handleInputChange('models', models);
+        } else {
+          showError(res.data.message);
+        }
+      } catch (error) {
+        showError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchModels().then();
+    fetchGroups().then();
+    fetchTagModels().then();
+    if (formApiRef.current) {
+      formApiRef.current.setValues({
+        ...getInitValues(),
+        tag: tag,
+        new_tag: tag,
+      });
+    }
+
+    setInputs({
+      ...originInputs,
+      tag: tag,
+      new_tag: tag,
+    });
+  }, [visible, tag]);
+
+  useEffect(() => {
+    if (formApiRef.current) {
+      formApiRef.current.setValues(inputs);
+    }
+  }, [inputs]);
+
+  const addCustomModels = () => {
+    if (customModel.trim() === '') return;
+    const modelArray = customModel.split(',').map((model) => model.trim());
+
+    let localModels = [...inputs.models];
+    let localModelOptions = [...modelOptions];
+    const addedModels = [];
+
+    modelArray.forEach((model) => {
+      if (model && !localModels.includes(model)) {
+        localModels.push(model);
+        localModelOptions.push({
+          key: model,
+          text: model,
+          value: model,
+        });
+        addedModels.push(model);
+      }
+    });
+
+    setModelOptions(localModelOptions);
+    setCustomModel('');
+    handleInputChange('models', localModels);
+
+    if (addedModels.length > 0) {
+      showSuccess(
+        t('已新增 {{count}} 个模型：{{list}}', {
+          count: addedModels.length,
+          list: addedModels.join(', '),
+        }),
+      );
+    } else {
+      showInfo(t('未发现新增模型'));
+    }
+  };
+
+  return (
+    <SideSheet
+      placement='right'
+      title={
+        <Space>
+          <Tag color='blue' shape='circle'>
+            {t('编辑')}
+          </Tag>
+          <Title heading={4} className='m-0'>
+            {t('编辑标签')}
+          </Title>
+        </Space>
+      }
+      bodyStyle={{ padding: '0' }}
+      visible={visible}
+      width={600}
+      onCancel={handleClose}
+      footer={
+        <div className='flex justify-end bg-white'>
+          <Space>
+            <Button
+              theme='solid'
+              onClick={() => formApiRef.current?.submitForm()}
+              loading={loading}
+              icon={<IconSave />}
+            >
+              {t('保存')}
+            </Button>
+            <Button
+              theme='light'
+              type='primary'
+              onClick={handleClose}
+              icon={<IconClose />}
+            >
+              {t('取消')}
+            </Button>
+          </Space>
+        </div>
+      }
+      closeIcon={null}
+    >
+      <Form
+        key={tag || 'edit'}
+        initValues={getInitValues()}
+        getFormApi={(api) => (formApiRef.current = api)}
+        onSubmit={handleSave}
+      >
+        {() => (
+          <Spin spinning={loading}>
+            <div className='p-2'>
+              <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
+                {/* Header: Tag Info */}
+                <div className='flex items-center mb-2'>
+                  <Avatar size='small' color='blue' className='mr-2 shadow-md'>
+                    <IconBookmark size={16} />
+                  </Avatar>
+                  <div>
+                    <Text className='text-lg font-medium'>{t('标签信息')}</Text>
+                    <div className='text-xs text-gray-600'>
+                      {t('标签的基本配置')}
+                    </div>
+                  </div>
+                </div>
+
+                <Banner
+                  type='warning'
+                  description={t('所有编辑均为覆盖操作，留空则不更改')}
+                  className='!rounded-lg mb-4'
+                />
+
+                <div className='space-y-4'>
+                  <Form.Input
+                    field='new_tag'
+                    label={t('标签名称')}
+                    placeholder={t('请输入新标签，留空则解散标签')}
+                    onChange={(value) => handleInputChange('new_tag', value)}
+                  />
+                </div>
+              </Card>
+
+              <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
+                {/* Header: Model Config */}
+                <div className='flex items-center mb-2'>
+                  <Avatar
+                    size='small'
+                    color='purple'
+                    className='mr-2 shadow-md'
+                  >
+                    <IconCode size={16} />
+                  </Avatar>
+                  <div>
+                    <Text className='text-lg font-medium'>{t('模型配置')}</Text>
+                    <div className='text-xs text-gray-600'>
+                      {t('模型选择和映射设置')}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='space-y-4'>
+                  <Banner
+                    type='info'
+                    description={t(
+                      '当前模型列表为该标签下所有渠道模型列表最长的一个，并非所有渠道的并集，请注意可能导致某些渠道模型丢失。',
+                    )}
+                    className='!rounded-lg mb-4'
+                  />
+                  <Form.Select
+                    field='models'
+                    label={t('模型')}
+                    placeholder={t('请选择该渠道所支持的模型，留空则不更改')}
+                    multiple
+                    filter={selectFilter}
+                    autoClearSearchValue={false}
+                    searchPosition='dropdown'
+                    optionList={modelOptions}
+                    style={{ width: '100%' }}
+                    onChange={(value) => handleInputChange('models', value)}
+                  />
+
+                  <Form.Input
+                    field='custom_model'
+                    label={t('自定义模型名称')}
+                    placeholder={t('输入自定义模型名称')}
+                    onChange={(value) => setCustomModel(value.trim())}
+                    suffix={
+                      <Button
+                        size='small'
+                        type='primary'
+                        onClick={addCustomModels}
+                      >
+                        {t('填入')}
+                      </Button>
+                    }
+                  />
+
+                  <Form.TextArea
+                    field='model_mapping'
+                    label={t('模型重定向')}
+                    placeholder={t(
+                      '此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改',
+                    )}
+                    autosize
+                    onChange={(value) =>
+                      handleInputChange('model_mapping', value)
+                    }
+                    extraText={
+                      <Space>
+                        <Text
+                          className='!text-semi-color-primary cursor-pointer'
+                          onClick={() =>
+                            handleInputChange(
+                              'model_mapping',
+                              JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
+                            )
+                          }
+                        >
+                          {t('填入模板')}
+                        </Text>
+                        <Text
+                          className='!text-semi-color-primary cursor-pointer'
+                          onClick={() =>
+                            handleInputChange(
+                              'model_mapping',
+                              JSON.stringify({}, null, 2),
+                            )
+                          }
+                        >
+                          {t('清空重定向')}
+                        </Text>
+                        <Text
+                          className='!text-semi-color-primary cursor-pointer'
+                          onClick={() => handleInputChange('model_mapping', '')}
+                        >
+                          {t('不更改')}
+                        </Text>
+                      </Space>
+                    }
+                  />
+                </div>
+              </Card>
+
+              <Card className='!rounded-2xl shadow-sm border-0'>
+                {/* Header: Group Settings */}
+                <div className='flex items-center mb-2'>
+                  <Avatar size='small' color='green' className='mr-2 shadow-md'>
+                    <IconUser size={16} />
+                  </Avatar>
+                  <div>
+                    <Text className='text-lg font-medium'>{t('分组设置')}</Text>
+                    <div className='text-xs text-gray-600'>
+                      {t('用户分组配置')}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='space-y-4'>
+                  <Form.Select
+                    field='groups'
+                    label={t('分组')}
+                    placeholder={t('请选择可以使用该渠道的分组，留空则不更改')}
+                    multiple
+                    allowAdditions
+                    additionLabel={t(
+                      '请在系统设置页面编辑分组倍率以添加新的分组：',
+                    )}
+                    optionList={groupOptions}
+                    style={{ width: '100%' }}
+                    onChange={(value) => handleInputChange('groups', value)}
+                  />
+                </div>
+              </Card>
+            </div>
+          </Spin>
+        )}
+      </Form>
+    </SideSheet>
+  );
+};
+
+export default EditTagModal;

web/src/components/table/channels/modals/ModelSelectModal.jsx

@@ -0,0 +1,350 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect } from 'react';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+import {
+  Modal,
+  Checkbox,
+  Spin,
+  Input,
+  Typography,
+  Empty,
+  Tabs,
+  Collapse,
+} from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { IconSearch } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import { getModelCategories } from '../../../../helpers/render';
+
+const ModelSelectModal = ({
+  visible,
+  models = [],
+  selected = [],
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const [checkedList, setCheckedList] = useState(selected);
+  const [keyword, setKeyword] = useState('');
+  const [activeTab, setActiveTab] = useState('new');
+
+  const isMobile = useIsMobile();
+
+  const filteredModels = models.filter((m) =>
+    m.toLowerCase().includes(keyword.toLowerCase()),
+  );
+
+  // 分类模型：新获取的模型和已有模型
+  const newModels = filteredModels.filter((model) => !selected.includes(model));
+  const existingModels = filteredModels.filter((model) =>
+    selected.includes(model),
+  );
+
+  // 同步外部选中值
+  useEffect(() => {
+    if (visible) {
+      setCheckedList(selected);
+    }
+  }, [visible, selected]);
+
+  // 当模型列表变化时，设置默认tab
+  useEffect(() => {
+    if (visible) {
+      // 默认显示新获取模型tab，如果没有新模型则显示已有模型
+      const hasNewModels = newModels.length > 0;
+      setActiveTab(hasNewModels ? 'new' : 'existing');
+    }
+  }, [visible, newModels.length, selected]);
+
+  const handleOk = () => {
+    onConfirm && onConfirm(checkedList);
+  };
+
+  // 按厂商分类模型
+  const categorizeModels = (models) => {
+    const categories = getModelCategories(t);
+    const categorizedModels = {};
+    const uncategorizedModels = [];
+
+    models.forEach((model) => {
+      let foundCategory = false;
+      for (const [key, category] of Object.entries(categories)) {
+        if (key !== 'all' && category.filter({ model_name: model })) {
+          if (!categorizedModels[key]) {
+            categorizedModels[key] = {
+              label: category.label,
+              icon: category.icon,
+              models: [],
+            };
+          }
+          categorizedModels[key].models.push(model);
+          foundCategory = true;
+          break;
+        }
+      }
+      if (!foundCategory) {
+        uncategorizedModels.push(model);
+      }
+    });
+
+    // 如果有未分类模型，添加到"其他"分类
+    if (uncategorizedModels.length > 0) {
+      categorizedModels['other'] = {
+        label: t('其他'),
+        icon: null,
+        models: uncategorizedModels,
+      };
+    }
+
+    return categorizedModels;
+  };
+
+  const newModelsByCategory = categorizeModels(newModels);
+  const existingModelsByCategory = categorizeModels(existingModels);
+
+  // Tab列表配置
+  const tabList = [
+    ...(newModels.length > 0
+      ? [
+          {
+            tab: `${t('新获取的模型')} (${newModels.length})`,
+            itemKey: 'new',
+          },
+        ]
+      : []),
+    ...(existingModels.length > 0
+      ? [
+          {
+            tab: `${t('已有的模型')} (${existingModels.length})`,
+            itemKey: 'existing',
+          },
+        ]
+      : []),
+  ];
+
+  // 处理分类全选/取消全选
+  const handleCategorySelectAll = (categoryModels, isChecked) => {
+    let newCheckedList = [...checkedList];
+
+    if (isChecked) {
+      // 全选：添加该分类下所有未选中的模型
+      categoryModels.forEach((model) => {
+        if (!newCheckedList.includes(model)) {
+          newCheckedList.push(model);
+        }
+      });
+    } else {
+      // 取消全选：移除该分类下所有已选中的模型
+      newCheckedList = newCheckedList.filter(
+        (model) => !categoryModels.includes(model),
+      );
+    }
+
+    setCheckedList(newCheckedList);
+  };
+
+  // 检查分类是否全选
+  const isCategoryAllSelected = (categoryModels) => {
+    return (
+      categoryModels.length > 0 &&
+      categoryModels.every((model) => checkedList.includes(model))
+    );
+  };
+
+  // 检查分类是否部分选中
+  const isCategoryIndeterminate = (categoryModels) => {
+    const selectedCount = categoryModels.filter((model) =>
+      checkedList.includes(model),
+    ).length;
+    return selectedCount > 0 && selectedCount < categoryModels.length;
+  };
+
+  const renderModelsByCategory = (modelsByCategory, categoryKeyPrefix) => {
+    const categoryEntries = Object.entries(modelsByCategory);
+    if (categoryEntries.length === 0) return null;
+
+    // 生成所有面板的key，确保都展开
+    const allActiveKeys = categoryEntries.map(
+      (_, index) => `${categoryKeyPrefix}_${index}`,
+    );
+
+    return (
+      <Collapse
+        key={`${categoryKeyPrefix}_${categoryEntries.length}`}
+        defaultActiveKey={[]}
+      >
+        {categoryEntries.map(([key, categoryData], index) => (
+          <Collapse.Panel
+            key={`${categoryKeyPrefix}_${index}`}
+            itemKey={`${categoryKeyPrefix}_${index}`}
+            header={`${categoryData.label} (${categoryData.models.length})`}
+            extra={
+              <Checkbox
+                checked={isCategoryAllSelected(categoryData.models)}
+                indeterminate={isCategoryIndeterminate(categoryData.models)}
+                onChange={(e) => {
+                  e.stopPropagation(); // 防止触发面板折叠
+                  handleCategorySelectAll(
+                    categoryData.models,
+                    e.target.checked,
+                  );
+                }}
+                onClick={(e) => e.stopPropagation()} // 防止点击checkbox时折叠面板
+              />
+            }
+          >
+            <div className='flex items-center gap-2 mb-3'>
+              {categoryData.icon}
+              <Typography.Text type='secondary' size='small'>
+                {t('已选择 {{selected}} / {{total}}', {
+                  selected: categoryData.models.filter((model) =>
+                    checkedList.includes(model),
+                  ).length,
+                  total: categoryData.models.length,
+                })}
+              </Typography.Text>
+            </div>
+            <div className='grid grid-cols-2 gap-x-4'>
+              {categoryData.models.map((model) => (
+                <Checkbox key={model} value={model} className='my-1'>
+                  {model}
+                </Checkbox>
+              ))}
+            </div>
+          </Collapse.Panel>
+        ))}
+      </Collapse>
+    );
+  };
+
+  return (
+    <Modal
+      header={
+        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 py-4'>
+          <Typography.Title heading={5} className='m-0'>
+            {t('选择模型')}
+          </Typography.Title>
+          <div className='flex-shrink-0'>
+            <Tabs
+              type='slash'
+              size='small'
+              tabList={tabList}
+              activeKey={activeTab}
+              onChange={(key) => setActiveTab(key)}
+            />
+          </div>
+        </div>
+      }
+      visible={visible}
+      onOk={handleOk}
+      onCancel={onCancel}
+      okText={t('确定')}
+      cancelText={t('取消')}
+      size={isMobile ? 'full-width' : 'large'}
+      closeOnEsc
+      maskClosable
+      centered
+    >
+      <Input
+        prefix={<IconSearch size={14} />}
+        placeholder={t('搜索模型')}
+        value={keyword}
+        onChange={(v) => setKeyword(v)}
+        showClear
+      />
+
+      <Spin spinning={!models || models.length === 0}>
+        <div style={{ maxHeight: 400, overflowY: 'auto', paddingRight: 8 }}>
+          {filteredModels.length === 0 ? (
+            <Empty
+              image={
+                <IllustrationNoResult style={{ width: 150, height: 150 }} />
+              }
+              darkModeImage={
+                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+              }
+              description={t('暂无匹配模型')}
+              style={{ padding: 30 }}
+            />
+          ) : (
+            <Checkbox.Group
+              value={checkedList}
+              onChange={(vals) => setCheckedList(vals)}
+            >
+              {activeTab === 'new' && newModels.length > 0 && (
+                <div>{renderModelsByCategory(newModelsByCategory, 'new')}</div>
+              )}
+              {activeTab === 'existing' && existingModels.length > 0 && (
+                <div>
+                  {renderModelsByCategory(existingModelsByCategory, 'existing')}
+                </div>
+              )}
+            </Checkbox.Group>
+          )}
+        </div>
+      </Spin>
+
+      <Typography.Text
+        type='secondary'
+        size='small'
+        className='block text-right mt-4'
+      >
+        <div className='flex items-center justify-end gap-2'>
+          {(() => {
+            const currentModels =
+              activeTab === 'new' ? newModels : existingModels;
+            const currentSelected = currentModels.filter((model) =>
+              checkedList.includes(model),
+            ).length;
+            const isAllSelected =
+              currentModels.length > 0 &&
+              currentSelected === currentModels.length;
+            const isIndeterminate =
+              currentSelected > 0 && currentSelected < currentModels.length;
+
+            return (
+              <>
+                <span>
+                  {t('已选择 {{selected}} / {{total}}', {
+                    selected: currentSelected,
+                    total: currentModels.length,
+                  })}
+                </span>
+                <Checkbox
+                  checked={isAllSelected}
+                  indeterminate={isIndeterminate}
+                  onChange={(e) => {
+                    handleCategorySelectAll(currentModels, e.target.checked);
+                  }}
+                />
+              </>
+            );
+          })()}
+        </div>
+      </Typography.Text>
+    </Modal>
+  );
+};
+
+export default ModelSelectModal;

web/src/components/table/channels/modals/ModelTestModal.jsx

@@ -0,0 +1,283 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Modal,
+  Button,
+  Input,
+  Table,
+  Tag,
+  Typography,
+} from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+import { copy, showError, showInfo, showSuccess } from '../../../../helpers';
+import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
+
+const ModelTestModal = ({
+  showModelTestModal,
+  currentTestChannel,
+  handleCloseModal,
+  isBatchTesting,
+  batchTestModels,
+  modelSearchKeyword,
+  setModelSearchKeyword,
+  selectedModelKeys,
+  setSelectedModelKeys,
+  modelTestResults,
+  testingModels,
+  testChannel,
+  modelTablePage,
+  setModelTablePage,
+  allSelectingRef,
+  isMobile,
+  t,
+}) => {
+  const hasChannel = Boolean(currentTestChannel);
+
+  const filteredModels = hasChannel
+    ? currentTestChannel.models
+        .split(',')
+        .filter((model) =>
+          model.toLowerCase().includes(modelSearchKeyword.toLowerCase()),
+        )
+    : [];
+
+  const handleCopySelected = () => {
+    if (selectedModelKeys.length === 0) {
+      showError(t('请先选择模型！'));
+      return;
+    }
+    copy(selectedModelKeys.join(',')).then((ok) => {
+      if (ok) {
+        showSuccess(
+          t('已复制 ${count} 个模型').replace(
+            '${count}',
+            selectedModelKeys.length,
+          ),
+        );
+      } else {
+        showError(t('复制失败，请手动复制'));
+      }
+    });
+  };
+
+  const handleSelectSuccess = () => {
+    if (!currentTestChannel) return;
+    const successKeys = currentTestChannel.models
+      .split(',')
+      .filter((m) => m.toLowerCase().includes(modelSearchKeyword.toLowerCase()))
+      .filter((m) => {
+        const result = modelTestResults[`${currentTestChannel.id}-${m}`];
+        return result && result.success;
+      });
+    if (successKeys.length === 0) {
+      showInfo(t('暂无成功模型'));
+    }
+    setSelectedModelKeys(successKeys);
+  };
+
+  const columns = [
+    {
+      title: t('模型名称'),
+      dataIndex: 'model',
+      render: (text) => (
+        <div className='flex items-center'>
+          <Typography.Text strong>{text}</Typography.Text>
+        </div>
+      ),
+    },
+    {
+      title: t('状态'),
+      dataIndex: 'status',
+      render: (text, record) => {
+        const testResult =
+          modelTestResults[`${currentTestChannel.id}-${record.model}`];
+        const isTesting = testingModels.has(record.model);
+
+        if (isTesting) {
+          return (
+            <Tag color='blue' shape='circle'>
+              {t('测试中')}
+            </Tag>
+          );
+        }
+
+        if (!testResult) {
+          return (
+            <Tag color='grey' shape='circle'>
+              {t('未开始')}
+            </Tag>
+          );
+        }
+
+        return (
+          <div className='flex items-center gap-2'>
+            <Tag color={testResult.success ? 'green' : 'red'} shape='circle'>
+              {testResult.success ? t('成功') : t('失败')}
+            </Tag>
+            {testResult.success && (
+              <Typography.Text type='tertiary'>
+                {t('请求时长: ${time}s').replace(
+                  '${time}',
+                  testResult.time.toFixed(2),
+                )}
+              </Typography.Text>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      title: '',
+      dataIndex: 'operate',
+      render: (text, record) => {
+        const isTesting = testingModels.has(record.model);
+        return (
+          <Button
+            type='tertiary'
+            onClick={() => testChannel(currentTestChannel, record.model)}
+            loading={isTesting}
+            size='small'
+          >
+            {t('测试')}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  const dataSource = (() => {
+    if (!hasChannel) return [];
+    const start = (modelTablePage - 1) * MODEL_TABLE_PAGE_SIZE;
+    const end = start + MODEL_TABLE_PAGE_SIZE;
+    return filteredModels.slice(start, end).map((model) => ({
+      model,
+      key: model,
+    }));
+  })();
+
+  return (
+    <Modal
+      title={
+        hasChannel ? (
+          <div className='flex flex-col gap-2 w-full'>
+            <div className='flex items-center gap-2'>
+              <Typography.Text
+                strong
+                className='!text-[var(--semi-color-text-0)] !text-base'
+              >
+                {currentTestChannel.name} {t('渠道的模型测试')}
+              </Typography.Text>
+              <Typography.Text type='tertiary' size='small'>
+                {t('共')} {currentTestChannel.models.split(',').length}{' '}
+                {t('个模型')}
+              </Typography.Text>
+            </div>
+          </div>
+        ) : null
+      }
+      visible={showModelTestModal}
+      onCancel={handleCloseModal}
+      footer={
+        hasChannel ? (
+          <div className='flex justify-end'>
+            {isBatchTesting ? (
+              <Button type='danger' onClick={handleCloseModal}>
+                {t('停止测试')}
+              </Button>
+            ) : (
+              <Button type='tertiary' onClick={handleCloseModal}>
+                {t('取消')}
+              </Button>
+            )}
+            <Button
+              onClick={batchTestModels}
+              loading={isBatchTesting}
+              disabled={isBatchTesting}
+            >
+              {isBatchTesting
+                ? t('测试中...')
+                : t('批量测试${count}个模型').replace(
+                    '${count}',
+                    filteredModels.length,
+                  )}
+            </Button>
+          </div>
+        ) : null
+      }
+      maskClosable={!isBatchTesting}
+      className='!rounded-lg'
+      size={isMobile ? 'full-width' : 'large'}
+    >
+      {hasChannel && (
+        <div className='model-test-scroll'>
+          {/* 搜索与操作按钮 */}
+          <div className='flex items-center justify-end gap-2 w-full mb-2'>
+            <Input
+              placeholder={t('搜索模型...')}
+              value={modelSearchKeyword}
+              onChange={(v) => {
+                setModelSearchKeyword(v);
+                setModelTablePage(1);
+              }}
+              className='!w-full'
+              prefix={<IconSearch />}
+              showClear
+            />
+
+            <Button onClick={handleCopySelected}>{t('复制已选')}</Button>
+
+            <Button type='tertiary' onClick={handleSelectSuccess}>
+              {t('选择成功')}
+            </Button>
+          </div>
+
+          <Table
+            columns={columns}
+            dataSource={dataSource}
+            rowSelection={{
+              selectedRowKeys: selectedModelKeys,
+              onChange: (keys) => {
+                if (allSelectingRef.current) {
+                  allSelectingRef.current = false;
+                  return;
+                }
+                setSelectedModelKeys(keys);
+              },
+              onSelectAll: (checked) => {
+                allSelectingRef.current = true;
+                setSelectedModelKeys(checked ? filteredModels : []);
+              },
+            }}
+            pagination={{
+              currentPage: modelTablePage,
+              pageSize: MODEL_TABLE_PAGE_SIZE,
+              total: filteredModels.length,
+              showSizeChanger: false,
+              onPageChange: (page) => setModelTablePage(page),
+            }}
+          />
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default ModelTestModal;

web/src/components/table/channels/modals/MultiKeyManageModal.jsx

@@ -0,0 +1,701 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Modal,
+  Button,
+  Table,
+  Tag,
+  Typography,
+  Space,
+  Tooltip,
+  Popconfirm,
+  Empty,
+  Spin,
+  Select,
+  Row,
+  Col,
+  Badge,
+  Progress,
+  Card,
+} from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import {
+  API,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../../../../helpers';
+
+const { Text } = Typography;
+
+const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [keyStatusList, setKeyStatusList] = useState([]);
+  const [operationLoading, setOperationLoading] = useState({});
+
+  // Pagination states
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  // Statistics states
+  const [enabledCount, setEnabledCount] = useState(0);
+  const [manualDisabledCount, setManualDisabledCount] = useState(0);
+  const [autoDisabledCount, setAutoDisabledCount] = useState(0);
+
+  // Filter states
+  const [statusFilter, setStatusFilter] = useState(null); // null=all, 1=enabled, 2=manual_disabled, 3=auto_disabled
+
+  // Load key status data
+  const loadKeyStatus = async (
+    page = currentPage,
+    size = pageSize,
+    status = statusFilter,
+  ) => {
+    if (!channel?.id) return;
+
+    setLoading(true);
+    try {
+      const requestData = {
+        channel_id: channel.id,
+        action: 'get_key_status',
+        page: page,
+        page_size: size,
+      };
+
+      // Add status filter if specified
+      if (status !== null) {
+        requestData.status = status;
+      }
+
+      const res = await API.post('/api/channel/multi_key/manage', requestData);
+
+      if (res.data.success) {
+        const data = res.data.data;
+        setKeyStatusList(data.keys || []);
+        setTotal(data.total || 0);
+        setCurrentPage(data.page || 1);
+        setPageSize(data.page_size || 10);
+        setTotalPages(data.total_pages || 0);
+
+        // Update statistics (these are always the overall statistics)
+        setEnabledCount(data.enabled_count || 0);
+        setManualDisabledCount(data.manual_disabled_count || 0);
+        setAutoDisabledCount(data.auto_disabled_count || 0);
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      console.error(error);
+      showError(t('获取密钥状态失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Disable a specific key
+  const handleDisableKey = async (keyIndex) => {
+    const operationId = `disable_${keyIndex}`;
+    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'disable_key',
+        key_index: keyIndex,
+      });
+
+      if (res.data.success) {
+        showSuccess(t('密钥已禁用'));
+        await loadKeyStatus(currentPage, pageSize); // Reload current page
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('禁用密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+    }
+  };
+
+  // Enable a specific key
+  const handleEnableKey = async (keyIndex) => {
+    const operationId = `enable_${keyIndex}`;
+    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'enable_key',
+        key_index: keyIndex,
+      });
+
+      if (res.data.success) {
+        showSuccess(t('密钥已启用'));
+        await loadKeyStatus(currentPage, pageSize); // Reload current page
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('启用密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+    }
+  };
+
+  // Enable all disabled keys
+  const handleEnableAll = async () => {
+    setOperationLoading((prev) => ({ ...prev, enable_all: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'enable_all_keys',
+      });
+
+      if (res.data.success) {
+        showSuccess(res.data.message || t('已启用所有密钥'));
+        // Reset to first page after bulk operation
+        setCurrentPage(1);
+        await loadKeyStatus(1, pageSize);
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('启用所有密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, enable_all: false }));
+    }
+  };
+
+  // Disable all enabled keys
+  const handleDisableAll = async () => {
+    setOperationLoading((prev) => ({ ...prev, disable_all: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'disable_all_keys',
+      });
+
+      if (res.data.success) {
+        showSuccess(res.data.message || t('已禁用所有密钥'));
+        // Reset to first page after bulk operation
+        setCurrentPage(1);
+        await loadKeyStatus(1, pageSize);
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('禁用所有密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, disable_all: false }));
+    }
+  };
+
+  // Delete all disabled keys
+  const handleDeleteDisabledKeys = async () => {
+    setOperationLoading((prev) => ({ ...prev, delete_disabled: true }));
+
+    try {
+      const res = await API.post('/api/channel/multi_key/manage', {
+        channel_id: channel.id,
+        action: 'delete_disabled_keys',
+      });
+
+      if (res.data.success) {
+        showSuccess(res.data.message);
+        // Reset to first page after deletion as data structure might change
+        setCurrentPage(1);
+        await loadKeyStatus(1, pageSize);
+        onRefresh && onRefresh(); // Refresh parent component
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('删除禁用密钥失败'));
+    } finally {
+      setOperationLoading((prev) => ({ ...prev, delete_disabled: false }));
+    }
+  };
+
+  // Handle page change
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+    loadKeyStatus(page, pageSize);
+  };
+
+  // Handle page size change
+  const handlePageSizeChange = (size) => {
+    setPageSize(size);
+    setCurrentPage(1); // Reset to first page
+    loadKeyStatus(1, size);
+  };
+
+  // Handle status filter change
+  const handleStatusFilterChange = (status) => {
+    setStatusFilter(status);
+    setCurrentPage(1); // Reset to first page when filter changes
+    loadKeyStatus(1, pageSize, status);
+  };
+
+  // Effect to load data when modal opens
+  useEffect(() => {
+    if (visible && channel?.id) {
+      setCurrentPage(1); // Reset to first page when opening
+      loadKeyStatus(1, pageSize);
+    }
+  }, [visible, channel?.id]);
+
+  // Reset pagination when modal closes
+  useEffect(() => {
+    if (!visible) {
+      setCurrentPage(1);
+      setKeyStatusList([]);
+      setTotal(0);
+      setTotalPages(0);
+      setEnabledCount(0);
+      setManualDisabledCount(0);
+      setAutoDisabledCount(0);
+      setStatusFilter(null); // Reset filter
+    }
+  }, [visible]);
+
+  // Percentages for progress display
+  const enabledPercent =
+    total > 0 ? Math.round((enabledCount / total) * 100) : 0;
+  const manualDisabledPercent =
+    total > 0 ? Math.round((manualDisabledCount / total) * 100) : 0;
+  const autoDisabledPercent =
+    total > 0 ? Math.round((autoDisabledCount / total) * 100) : 0;
+
+  // 取消饼图：不再需要图表数据与配置
+
+  // Get status tag component
+  const renderStatusTag = (status) => {
+    switch (status) {
+      case 1:
+        return (
+          <Tag color='green' shape='circle' size='small'>
+            {t('已启用')}
+          </Tag>
+        );
+      case 2:
+        return (
+          <Tag color='red' shape='circle' size='small'>
+            {t('已禁用')}
+          </Tag>
+        );
+      case 3:
+        return (
+          <Tag color='orange' shape='circle' size='small'>
+            {t('自动禁用')}
+          </Tag>
+        );
+      default:
+        return (
+          <Tag color='grey' shape='circle' size='small'>
+            {t('未知状态')}
+          </Tag>
+        );
+    }
+  };
+
+  // Table columns definition
+  const columns = [
+    {
+      title: t('索引'),
+      dataIndex: 'index',
+      render: (text) => `#${text}`,
+    },
+    // {
+    //   title: t('密钥预览'),
+    //   dataIndex: 'key_preview',
+    //   render: (text) => (
+    //     <Text code style={{ fontSize: '12px' }}>
+    //       {text}
+    //     </Text>
+    //   ),
+    // },
+    {
+      title: t('状态'),
+      dataIndex: 'status',
+      render: (status) => renderStatusTag(status),
+    },
+    {
+      title: t('禁用原因'),
+      dataIndex: 'reason',
+      render: (reason, record) => {
+        if (record.status === 1 || !reason) {
+          return <Text type='quaternary'>-</Text>;
+        }
+        return (
+          <Tooltip content={reason}>
+            <Text style={{ maxWidth: '200px', display: 'block' }} ellipsis>
+              {reason}
+            </Text>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      title: t('禁用时间'),
+      dataIndex: 'disabled_time',
+      render: (time, record) => {
+        if (record.status === 1 || !time) {
+          return <Text type='quaternary'>-</Text>;
+        }
+        return (
+          <Tooltip content={timestamp2string(time)}>
+            <Text style={{ fontSize: '12px' }}>{timestamp2string(time)}</Text>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      title: t('操作'),
+      key: 'action',
+      fixed: 'right',
+      width: 100,
+      render: (_, record) => (
+        <Space>
+          {record.status === 1 ? (
+            <Button
+              type='danger'
+              size='small'
+              loading={operationLoading[`disable_${record.index}`]}
+              onClick={() => handleDisableKey(record.index)}
+            >
+              {t('禁用')}
+            </Button>
+          ) : (
+            <Button
+              type='primary'
+              size='small'
+              loading={operationLoading[`enable_${record.index}`]}
+              onClick={() => handleEnableKey(record.index)}
+            >
+              {t('启用')}
+            </Button>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      title={
+        <Space>
+          <Text>{t('多密钥管理')}</Text>
+          {channel?.name && (
+            <Tag size='small' shape='circle' color='white'>
+              {channel.name}
+            </Tag>
+          )}
+          <Tag size='small' shape='circle' color='white'>
+            {t('总密钥数')}: {total}
+          </Tag>
+          {channel?.channel_info?.multi_key_mode && (
+            <Tag size='small' shape='circle' color='white'>
+              {channel.channel_info.multi_key_mode === 'random'
+                ? t('随机模式')
+                : t('轮询模式')}
+            </Tag>
+          )}
+        </Space>
+      }
+      visible={visible}
+      onCancel={onCancel}
+      width={900}
+      footer={null}
+    >
+      <div className='flex flex-col mb-5'>
+        {/* Stats & Mode */}
+        <div
+          className='rounded-xl p-4 mb-3'
+          style={{
+            background: 'var(--semi-color-bg-1)',
+            border: '1px solid var(--semi-color-border)',
+          }}
+        >
+          <Row gutter={16} align='middle'>
+            <Col span={8}>
+              <div
+                style={{
+                  background: 'var(--semi-color-bg-0)',
+                  border: '1px solid var(--semi-color-border)',
+                  borderRadius: 12,
+                  padding: 12,
+                }}
+              >
+                <div className='flex items-center gap-2 mb-2'>
+                  <Badge dot type='success' />
+                  <Text type='tertiary'>{t('已启用')}</Text>
+                </div>
+                <div className='flex items-end gap-2 mb-2'>
+                  <Text
+                    style={{ fontSize: 18, fontWeight: 700, color: '#22c55e' }}
+                  >
+                    {enabledCount}
+                  </Text>
+                  <Text
+                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
+                  >
+                    / {total}
+                  </Text>
+                </div>
+                <Progress
+                  percent={enabledPercent}
+                  showInfo={false}
+                  size='small'
+                  stroke='#22c55e'
+                  style={{ height: 6, borderRadius: 999 }}
+                />
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  background: 'var(--semi-color-bg-0)',
+                  border: '1px solid var(--semi-color-border)',
+                  borderRadius: 12,
+                  padding: 12,
+                }}
+              >
+                <div className='flex items-center gap-2 mb-2'>
+                  <Badge dot type='danger' />
+                  <Text type='tertiary'>{t('手动禁用')}</Text>
+                </div>
+                <div className='flex items-end gap-2 mb-2'>
+                  <Text
+                    style={{ fontSize: 18, fontWeight: 700, color: '#ef4444' }}
+                  >
+                    {manualDisabledCount}
+                  </Text>
+                  <Text
+                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
+                  >
+                    / {total}
+                  </Text>
+                </div>
+                <Progress
+                  percent={manualDisabledPercent}
+                  showInfo={false}
+                  size='small'
+                  stroke='#ef4444'
+                  style={{ height: 6, borderRadius: 999 }}
+                />
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  background: 'var(--semi-color-bg-0)',
+                  border: '1px solid var(--semi-color-border)',
+                  borderRadius: 12,
+                  padding: 12,
+                }}
+              >
+                <div className='flex items-center gap-2 mb-2'>
+                  <Badge dot type='warning' />
+                  <Text type='tertiary'>{t('自动禁用')}</Text>
+                </div>
+                <div className='flex items-end gap-2 mb-2'>
+                  <Text
+                    style={{ fontSize: 18, fontWeight: 700, color: '#f59e0b' }}
+                  >
+                    {autoDisabledCount}
+                  </Text>
+                  <Text
+                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
+                  >
+                    / {total}
+                  </Text>
+                </div>
+                <Progress
+                  percent={autoDisabledPercent}
+                  showInfo={false}
+                  size='small'
+                  stroke='#f59e0b'
+                  style={{ height: 6, borderRadius: 999 }}
+                />
+              </div>
+            </Col>
+          </Row>
+        </div>
+
+        {/* Table */}
+        <div className='flex-1 flex flex-col min-h-0'>
+          <Spin spinning={loading}>
+            <Card className='!rounded-xl'>
+              <Table
+                title={() => (
+                  <Row gutter={12} style={{ width: '100%' }}>
+                    <Col span={14}>
+                      <Row gutter={12} style={{ alignItems: 'center' }}>
+                        <Col>
+                          <Select
+                            value={statusFilter}
+                            onChange={handleStatusFilterChange}
+                            size='small'
+                            placeholder={t('全部状态')}
+                          >
+                            <Select.Option value={null}>
+                              {t('全部状态')}
+                            </Select.Option>
+                            <Select.Option value={1}>
+                              {t('已启用')}
+                            </Select.Option>
+                            <Select.Option value={2}>
+                              {t('手动禁用')}
+                            </Select.Option>
+                            <Select.Option value={3}>
+                              {t('自动禁用')}
+                            </Select.Option>
+                          </Select>
+                        </Col>
+                      </Row>
+                    </Col>
+                    <Col
+                      span={10}
+                      style={{ display: 'flex', justifyContent: 'flex-end' }}
+                    >
+                      <Space>
+                        <Button
+                          size='small'
+                          type='tertiary'
+                          onClick={() => loadKeyStatus(currentPage, pageSize)}
+                          loading={loading}
+                        >
+                          {t('刷新')}
+                        </Button>
+                        {manualDisabledCount + autoDisabledCount > 0 && (
+                          <Popconfirm
+                            title={t('确定要启用所有密钥吗？')}
+                            onConfirm={handleEnableAll}
+                            position={'topRight'}
+                          >
+                            <Button
+                              size='small'
+                              type='primary'
+                              loading={operationLoading.enable_all}
+                            >
+                              {t('启用全部')}
+                            </Button>
+                          </Popconfirm>
+                        )}
+                        {enabledCount > 0 && (
+                          <Popconfirm
+                            title={t('确定要禁用所有的密钥吗？')}
+                            onConfirm={handleDisableAll}
+                            okType={'danger'}
+                            position={'topRight'}
+                          >
+                            <Button
+                              size='small'
+                              type='danger'
+                              loading={operationLoading.disable_all}
+                            >
+                              {t('禁用全部')}
+                            </Button>
+                          </Popconfirm>
+                        )}
+                        <Popconfirm
+                          title={t('确定要删除所有已自动禁用的密钥吗？')}
+                          content={t(
+                            '此操作不可撤销，将永久删除已自动禁用的密钥',
+                          )}
+                          onConfirm={handleDeleteDisabledKeys}
+                          okType={'danger'}
+                          position={'topRight'}
+                        >
+                          <Button
+                            size='small'
+                            type='warning'
+                            loading={operationLoading.delete_disabled}
+                          >
+                            {t('删除自动禁用密钥')}
+                          </Button>
+                        </Popconfirm>
+                      </Space>
+                    </Col>
+                  </Row>
+                )}
+                columns={columns}
+                dataSource={keyStatusList}
+                pagination={{
+                  currentPage: currentPage,
+                  pageSize: pageSize,
+                  total: total,
+                  showSizeChanger: true,
+                  showQuickJumper: true,
+                  pageSizeOpts: [10, 20, 50, 100],
+                  onChange: (page, size) => {
+                    setCurrentPage(page);
+                    loadKeyStatus(page, size);
+                  },
+                  onShowSizeChange: (current, size) => {
+                    setCurrentPage(1);
+                    handlePageSizeChange(size);
+                  },
+                }}
+                size='small'
+                bordered={false}
+                rowKey='index'
+                scroll={{ x: 'max-content' }}
+                empty={
+                  <Empty
+                    image={
+                      <IllustrationNoResult
+                        style={{ width: 140, height: 140 }}
+                      />
+                    }
+                    darkModeImage={
+                      <IllustrationNoResultDark
+                        style={{ width: 140, height: 140 }}
+                      />
+                    }
+                    title={t('暂无密钥数据')}
+                    description={t('请检查渠道配置或刷新重试')}
+                    style={{ padding: 30 }}
+                  />
+                }
+              />
+            </Card>
+          </Spin>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default MultiKeyManageModal;