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/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;