feat: add cc-switch integration and modal for token management

- Introduced a new CCSwitchModal component for managing CCSwitch configurations.
- Updated the TokensPage to include functionality for opening the CCSwitch modal.
- Enhanced the useTokensData hook to handle CCSwitch URLs and trigger the modal.
- Modified chat settings to include a new "CC Switch" entry.
- Updated sidebar logic to skip certain links based on the new configuration.

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

@@ -38,6 +38,7 @@ import TokensActions from './TokensActions';
 import TokensFilters from './TokensFilters';
 import TokensDescription from './TokensDescription';
 import EditTokenModal from './modals/EditTokenModal';
+import CCSwitchModal from './modals/CCSwitchModal';
 import { useTokensData } from '../../../hooks/tokens/useTokensData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
@@ -45,8 +46,10 @@ import { createCardProPagination } from '../../../helpers/utils';
 function TokensPage() {
   // Define the function first, then pass it into the hook to avoid TDZ errors
   const openFluentNotificationRef = useRef(null);
-  const tokensData = useTokensData((key) =>
-    openFluentNotificationRef.current?.(key),
+  const openCCSwitchModalRef = useRef(null);
+  const tokensData = useTokensData(
+    (key) => openFluentNotificationRef.current?.(key),
+    (key) => openCCSwitchModalRef.current?.(key),
   );
   const isMobile = useIsMobile();
   const latestRef = useRef({
@@ -60,6 +63,8 @@ function TokensPage() {
   const [selectedModel, setSelectedModel] = useState('');
   const [fluentNoticeOpen, setFluentNoticeOpen] = useState(false);
   const [prefillKey, setPrefillKey] = useState('');
+  const [ccSwitchVisible, setCCSwitchVisible] = useState(false);
+  const [ccSwitchKey, setCCSwitchKey] = useState('');
 
   // Keep latest data for handlers inside notifications
   useEffect(() => {
@@ -183,6 +188,15 @@ function TokensPage() {
   // assign after definition so hook callback can call it safely
   openFluentNotificationRef.current = openFluentNotification;
 
+  function openCCSwitchModal(key) {
+    if (modelOptions.length === 0) {
+      loadModels();
+    }
+    setCCSwitchKey(key || '');
+    setCCSwitchVisible(true);
+  }
+  openCCSwitchModalRef.current = openCCSwitchModal;
+
   // Prefill to Fluent handler
   const handlePrefillToFluent = () => {
     const {
@@ -363,6 +377,13 @@ function TokensPage() {
         handleClose={closeEdit}
       />
 
+      <CCSwitchModal
+        visible={ccSwitchVisible}
+        onClose={() => setCCSwitchVisible(false)}
+        tokenKey={ccSwitchKey}
+        modelOptions={modelOptions}
+      />
+
       <CardPro
         type='type1'
         descriptionArea={

web/src/components/table/tokens/modals/CCSwitchModal.jsx

@@ -0,0 +1,195 @@
+/*
+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, useMemo } from 'react';
+import {
+  Modal,
+  RadioGroup,
+  Radio,
+  Select,
+  Input,
+  Toast,
+  Typography,
+} from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { selectFilter } from '../../../../helpers';
+
+const APP_CONFIGS = {
+  claude: {
+    label: 'Claude',
+    defaultName: 'My Claude',
+    modelFields: [
+      { key: 'model', label: '主模型' },
+      { key: 'haikuModel', label: 'Haiku 模型' },
+      { key: 'sonnetModel', label: 'Sonnet 模型' },
+      { key: 'opusModel', label: 'Opus 模型' },
+    ],
+  },
+  codex: {
+    label: 'Codex',
+    defaultName: 'My Codex',
+    modelFields: [{ key: 'model', label: '主模型' }],
+  },
+  gemini: {
+    label: 'Gemini',
+    defaultName: 'My Gemini',
+    modelFields: [{ key: 'model', label: '主模型' }],
+  },
+};
+
+function getServerAddress() {
+  try {
+    const raw = localStorage.getItem('status');
+    if (raw) {
+      const status = JSON.parse(raw);
+      if (status.server_address) return status.server_address;
+    }
+  } catch (_) {}
+  return window.location.origin;
+}
+
+function buildCCSwitchURL(app, name, models, apiKey) {
+  const serverAddress = getServerAddress();
+  const endpoint = app === 'codex' ? serverAddress + '/v1' : serverAddress;
+  const params = new URLSearchParams();
+  params.set('resource', 'provider');
+  params.set('app', app);
+  params.set('name', name);
+  params.set('endpoint', endpoint);
+  params.set('apiKey', apiKey);
+  for (const [k, v] of Object.entries(models)) {
+    if (v) params.set(k, v);
+  }
+  params.set('homepage', serverAddress);
+  params.set('enabled', 'true');
+  return `ccswitch://v1/import?${params.toString()}`;
+}
+
+export default function CCSwitchModal({
+  visible,
+  onClose,
+  tokenKey,
+  modelOptions,
+}) {
+  const { t } = useTranslation();
+  const [app, setApp] = useState('claude');
+  const [name, setName] = useState(APP_CONFIGS.claude.defaultName);
+  const [models, setModels] = useState({});
+
+  const currentConfig = APP_CONFIGS[app];
+
+  useEffect(() => {
+    if (visible) {
+      setModels({});
+      setApp('claude');
+      setName(APP_CONFIGS.claude.defaultName);
+    }
+  }, [visible]);
+
+  const handleAppChange = (val) => {
+    setApp(val);
+    setName(APP_CONFIGS[val].defaultName);
+    setModels({});
+  };
+
+  const handleModelChange = (field, value) => {
+    setModels((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = () => {
+    if (!models.model) {
+      Toast.warning(t('请选择主模型'));
+      return;
+    }
+    const apiKey = 'sk-' + tokenKey;
+    const url = buildCCSwitchURL(app, name, models, apiKey);
+    window.open(url, '_blank');
+    onClose();
+  };
+
+  const fieldLabelStyle = useMemo(
+    () => ({
+      marginBottom: 4,
+      fontSize: 13,
+      color: 'var(--semi-color-text-1)',
+    }),
+    [],
+  );
+
+  return (
+    <Modal
+      title={t('填入 CC Switch')}
+      visible={visible}
+      onCancel={onClose}
+      onOk={handleSubmit}
+      okText={t('打开 CC Switch')}
+      cancelText={t('取消')}
+      maskClosable={false}
+      width={480}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div>
+          <div style={fieldLabelStyle}>{t('应用')}</div>
+          <RadioGroup
+            type='button'
+            value={app}
+            onChange={(e) => handleAppChange(e.target.value)}
+            style={{ width: '100%' }}
+          >
+            {Object.entries(APP_CONFIGS).map(([key, cfg]) => (
+              <Radio key={key} value={key}>
+                {cfg.label}
+              </Radio>
+            ))}
+          </RadioGroup>
+        </div>
+
+        <div>
+          <div style={fieldLabelStyle}>{t('名称')}</div>
+          <Input
+            value={name}
+            onChange={setName}
+            placeholder={currentConfig.defaultName}
+          />
+        </div>
+
+        {currentConfig.modelFields.map((field) => (
+          <div key={field.key}>
+            <div style={fieldLabelStyle}>
+              {t(field.label)}
+              {field.key === 'model' && (
+                <Typography.Text type='danger'> *</Typography.Text>
+              )}
+            </div>
+            <Select
+              placeholder={t('请选择模型')}
+              optionList={modelOptions}
+              value={models[field.key] || undefined}
+              onChange={(val) => handleModelChange(field.key, val)}
+              filter={selectFilter}
+              style={{ width: '100%' }}
+              showClear
+              searchable
+              emptyContent={t('暂无数据')}
+            />
+          </div>
+        ))}
+      </div>
+    </Modal>
+  );
+}