From eda6cd361ee5a937984ffcf42905256d683ebb76 Mon Sep 17 00:00:00 2001
From: kongkongyo <EliciaDaguehht96@gmail.com>
Date: Fri, 16 Jan 2026 22:11:54 +0800
Subject: [PATCH] Enhance monitoring page functionality and user experience

Changes:
- Add provider type filtering for request logs to quickly locate specific provider usage
- Optimize request log display by showing provider type in a dedicated column and removing auth index column for better readability
- Add friendly prompts for providers that don't support auto-disable (e.g., Claude, Gemini) with manual operation guides
- Point WebUI repository to this repository (forked from official for modifications)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .gitignore                                    |  3 +-
 src/components/monitor/RequestLogs.tsx        | 47 ++++++++--
 .../monitor/UnsupportedDisableModal.tsx       | 82 +++++++++++++++++
 src/hooks/useDisableModel.ts                  | 55 +++++++++--
 src/i18n/locales/en.json                      | 12 ++-
 src/i18n/locales/zh-CN.json                   | 26 ++++--
 src/pages/MonitorPage.module.scss             | 10 +-
 src/pages/MonitorPage.tsx                     | 92 +++++++++++++++++--
 src/pages/SystemPage.tsx                      |  2 +-
 9 files changed, 287 insertions(+), 42 deletions(-)
 create mode 100644 src/components/monitor/UnsupportedDisableModal.tsx

diff --git a/.gitignore b/.gitignore
index 84c834a..1890811 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,4 +32,5 @@ settings.local.json
 *.sw?
 自定义 Web UI
 tmpclaude*
-.claude
\ No newline at end of file
+.claude
+CLIProxyAPI-服务端
\ No newline at end of file
diff --git a/src/components/monitor/RequestLogs.tsx b/src/components/monitor/RequestLogs.tsx
index 688a59f..6aa22f6 100644
--- a/src/components/monitor/RequestLogs.tsx
+++ b/src/components/monitor/RequestLogs.tsx
@@ -6,6 +6,7 @@ import { usageApi } from '@/services/api';
 import { useDisableModel } from '@/hooks';
 import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
 import { DisableModelModal } from './DisableModelModal';
+import { UnsupportedDisableModal } from './UnsupportedDisableModal';
 import {
   maskSecret,
   formatProviderDisplay,
@@ -21,6 +22,7 @@ interface RequestLogsProps {
   data: UsageData | null;
   loading: boolean;
   providerMap: Record<string, string>;
+  providerTypeMap: Record<string, string>;
   apiFilter: string;
 }
 
@@ -33,8 +35,8 @@ interface LogEntry {
   source: string;
   displayName: string;
   providerName: string | null;
+  providerType: string;
   maskedKey: string;
-  authIndex: string;
   failed: boolean;
   inputTokens: number;
   outputTokens: number;
@@ -56,12 +58,13 @@ interface PrecomputedStats {
 // 虚拟滚动行高
 const ROW_HEIGHT = 40;
 
-export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilter }: RequestLogsProps) {
+export function RequestLogs({ data, loading: parentLoading, providerMap, providerTypeMap, apiFilter }: RequestLogsProps) {
   const { t } = useTranslation();
   const [filterApi, setFilterApi] = useState('');
   const [filterModel, setFilterModel] = useState('');
   const [filterSource, setFilterSource] = useState('');
   const [filterStatus, setFilterStatus] = useState<'' | 'success' | 'failed'>('');
+  const [filterProviderType, setFilterProviderType] = useState('');
   const [autoRefresh, setAutoRefresh] = useState(10);
   const [countdown, setCountdown] = useState(0);
   const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -92,12 +95,14 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
   // 使用禁用模型 Hook
   const {
     disableState,
+    unsupportedState,
     disabling,
     isModelDisabled,
     handleDisableClick,
     handleConfirmDisable,
     handleCancelDisable,
-  } = useDisableModel({ providerMap });
+    handleCloseUnsupported,
+  } = useDisableModel({ providerMap, providerTypeMap });
 
   // 处理时间范围变化
   const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
@@ -261,6 +266,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
           const { provider, masked } = getProviderDisplayParts(source, providerMap);
           const displayName = provider ? `${provider} (${masked})` : masked;
           const timestampMs = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
+          // 获取提供商类型
+          const providerType = providerTypeMap[source] || '--';
           entries.push({
             id: `${idCounter++}`,
             timestamp: detail.timestamp,
@@ -270,8 +277,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
             source,
             displayName,
             providerName: provider,
+            providerType,
             maskedKey: masked,
-            authIndex: detail.auth_index || '--',
             failed: detail.failed,
             inputTokens: detail.tokens.input_tokens || 0,
             outputTokens: detail.tokens.output_tokens || 0,
@@ -283,7 +290,7 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
 
     // 按时间倒序排序
     return entries.sort((a, b) => b.timestampMs - a.timestampMs);
-  }, [effectiveData, providerMap]);
+  }, [effectiveData, providerMap, providerTypeMap]);
 
   // 预计算所有条目的统计数据（一次性计算，避免渲染时重复计算）
   const precomputedStats = useMemo(() => {
@@ -339,21 +346,26 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
   }, [logEntries]);
 
   // 获取筛选选项
-  const { apis, models, sources } = useMemo(() => {
+  const { apis, models, sources, providerTypes } = useMemo(() => {
     const apiSet = new Set<string>();
     const modelSet = new Set<string>();
     const sourceSet = new Set<string>();
+    const providerTypeSet = new Set<string>();
 
     logEntries.forEach((entry) => {
       apiSet.add(entry.apiKey);
       modelSet.add(entry.model);
       sourceSet.add(entry.source);
+      if (entry.providerType && entry.providerType !== '--') {
+        providerTypeSet.add(entry.providerType);
+      }
     });
 
     return {
       apis: Array.from(apiSet).sort(),
       models: Array.from(modelSet).sort(),
       sources: Array.from(sourceSet).sort(),
+      providerTypes: Array.from(providerTypeSet).sort(),
     };
   }, [logEntries]);
 
@@ -365,9 +377,10 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
       if (filterSource && entry.source !== filterSource) return false;
       if (filterStatus === 'success' && entry.failed) return false;
       if (filterStatus === 'failed' && !entry.failed) return false;
+      if (filterProviderType && entry.providerType !== filterProviderType) return false;
       return true;
     });
-  }, [logEntries, filterApi, filterModel, filterSource, filterStatus]);
+  }, [logEntries, filterApi, filterModel, filterSource, filterStatus, filterProviderType]);
 
   // 虚拟滚动配置
   const rowVirtualizer = useVirtualizer({
@@ -399,10 +412,10 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
 
     return (
       <>
-        <td>{entry.authIndex}</td>
         <td title={entry.apiKey}>
           {maskSecret(entry.apiKey)}
         </td>
+        <td>{entry.providerType}</td>
         <td title={entry.model}>
           {entry.model}
         </td>
@@ -494,6 +507,16 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
               </option>
             ))}
           </select>
+          <select
+            className={styles.logSelect}
+            value={filterProviderType}
+            onChange={(e) => setFilterProviderType(e.target.value)}
+          >
+            <option value="">{t('monitor.logs.all_provider_types')}</option>
+            {providerTypes.map((type) => (
+              <option key={type} value={type}>{type}</option>
+            ))}
+          </select>
           <select
             className={styles.logSelect}
             value={filterModel}
@@ -557,8 +580,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
                 <table className={`${styles.table} ${styles.virtualTable}`}>
                   <thead>
                     <tr>
-                      <th>{t('monitor.logs.header_auth')}</th>
                       <th>{t('monitor.logs.header_api')}</th>
+                      <th>{t('monitor.logs.header_request_type')}</th>
                       <th>{t('monitor.logs.header_model')}</th>
                       <th>{t('monitor.logs.header_source')}</th>
                       <th>{t('monitor.logs.header_status')}</th>
@@ -638,6 +661,12 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
         onConfirm={handleConfirmDisable}
         onCancel={handleCancelDisable}
       />
+
+      {/* 不支持自动禁用提示弹窗 */}
+      <UnsupportedDisableModal
+        state={unsupportedState}
+        onClose={handleCloseUnsupported}
+      />
     </>
   );
 }
diff --git a/src/components/monitor/UnsupportedDisableModal.tsx b/src/components/monitor/UnsupportedDisableModal.tsx
new file mode 100644
index 0000000..55072c0
--- /dev/null
+++ b/src/components/monitor/UnsupportedDisableModal.tsx
@@ -0,0 +1,82 @@
+/**
+ * 不支持自动禁用提示弹窗组件
+ * 显示手动操作指南
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import type { UnsupportedDisableState } from '@/hooks/useDisableModel';
+
+interface UnsupportedDisableModalProps {
+  /** 不支持禁用的状态 */
+  state: UnsupportedDisableState | null;
+  /** 关闭回调 */
+  onClose: () => void;
+}
+
+export function UnsupportedDisableModal({
+  state,
+  onClose,
+}: UnsupportedDisableModalProps) {
+  const { t } = useTranslation();
+
+  if (!state) return null;
+
+  return (
+    <Modal
+      open={!!state}
+      onClose={onClose}
+      title={t('monitor.logs.disable_unsupported_title')}
+      width={450}
+    >
+      <div style={{ padding: '16px 0' }}>
+        {/* 提示信息 */}
+        <p style={{
+          marginBottom: 16,
+          lineHeight: 1.6,
+          color: 'var(--warning-color, #f59e0b)',
+          fontWeight: 500,
+        }}>
+          ⚠️ {t('monitor.logs.disable_unsupported_desc', { providerType: state.providerType })}
+        </p>
+
+        {/* 手动操作指南 */}
+        <div style={{
+          padding: '12px 16px',
+          background: 'var(--bg-tertiary)',
+          borderRadius: '8px',
+          marginBottom: 16,
+        }}>
+          <p style={{
+            fontWeight: 600,
+            marginBottom: 8,
+            color: 'var(--text-primary)',
+          }}>
+            {t('monitor.logs.disable_unsupported_guide_title')}
+          </p>
+          <ul style={{
+            margin: 0,
+            padding: 0,
+            listStyle: 'none',
+            fontSize: 13,
+            lineHeight: 1.8,
+            color: 'var(--text-secondary)',
+          }}>
+            <li>{t('monitor.logs.disable_unsupported_guide_step1')}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step2', { providerType: state.providerType })}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step3', { model: state.model })}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step4')}</li>
+          </ul>
+        </div>
+
+        {/* 关闭按钮 */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant="primary" onClick={onClose}>
+            {t('monitor.logs.disable_unsupported_close')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/hooks/useDisableModel.ts b/src/hooks/useDisableModel.ts
index 06edaa9..d991fc9 100644
--- a/src/hooks/useDisableModel.ts
+++ b/src/hooks/useDisableModel.ts
@@ -14,17 +14,29 @@ import {
 } from '@/utils/monitor';
 import type { OpenAIProviderConfig } from '@/types';
 
-// 不支持禁用的渠道类型
-const UNSUPPORTED_PROVIDERS = ['claude', 'gemini', 'codex'];
+// 不支持禁用的渠道类型（小写）
+const UNSUPPORTED_PROVIDER_TYPES = ['claude', 'gemini', 'codex', 'vertex'];
+
+/**
+ * 不支持禁用的提示状态
+ */
+export interface UnsupportedDisableState {
+  providerType: string;
+  model: string;
+  displayName: string;
+}
 
 export interface UseDisableModelOptions {
   providerMap: Record<string, string>;
+  providerTypeMap?: Record<string, string>;
   providerModels?: Record<string, Set<string>>;
 }
 
 export interface UseDisableModelReturn {
   /** 当前禁用状态 */
   disableState: DisableState | null;
+  /** 不支持禁用的提示状态 */
+  unsupportedState: UnsupportedDisableState | null;
   /** 是否正在禁用中 */
   disabling: boolean;
   /** 开始禁用流程 */
@@ -33,6 +45,8 @@ export interface UseDisableModelReturn {
   handleConfirmDisable: () => Promise<void>;
   /** 取消禁用 */
   handleCancelDisable: () => void;
+  /** 关闭不支持提示 */
+  handleCloseUnsupported: () => void;
   /** 检查模型是否已禁用 */
   isModelDisabled: (source: string, model: string) => boolean;
 }
@@ -43,19 +57,39 @@ export interface UseDisableModelReturn {
  * @returns 禁用模型相关的状态和方法
  */
 export function useDisableModel(options: UseDisableModelOptions): UseDisableModelReturn {
-  const { providerMap, providerModels } = options;
+  const { providerMap, providerTypeMap, providerModels } = options;
   const { t } = useTranslation();
 
   // 使用全局 store 管理禁用状态
   const { addDisabledModel, isDisabled } = useDisabledModelsStore();
 
   const [disableState, setDisableState] = useState<DisableState | null>(null);
+  const [unsupportedState, setUnsupportedState] = useState<UnsupportedDisableState | null>(null);
   const [disabling, setDisabling] = useState(false);
 
   // 开始禁用流程
   const handleDisableClick = useCallback((source: string, model: string) => {
+    // 首先检查提供商类型是否支持禁用
+    const providerType = providerTypeMap?.[source] || '';
+    const lowerType = providerType.toLowerCase();
+
+    // 如果是不支持的类型，立即显示提示
+    if (lowerType && UNSUPPORTED_PROVIDER_TYPES.includes(lowerType)) {
+      const providerName = resolveProvider(source, providerMap);
+      const displayName = providerName
+        ? `${providerName} / ${model}`
+        : `${source.slice(0, 8)}*** / ${model}`;
+      setUnsupportedState({
+        providerType,
+        model,
+        displayName,
+      });
+      return;
+    }
+
+    // 支持的类型，进入正常禁用流程
     setDisableState(createDisableState(source, model, providerMap));
-  }, [providerMap]);
+  }, [providerMap, providerTypeMap]);
 
   // 确认禁用（需要点击3次）
   const handleConfirmDisable = useCallback(async () => {
@@ -78,12 +112,6 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
         throw new Error(t('monitor.logs.disable_error_no_provider'));
       }
 
-      // 检查是否为不支持的渠道类型
-      const lowerName = providerName.toLowerCase();
-      if (UNSUPPORTED_PROVIDERS.includes(lowerName)) {
-        throw new Error(t('monitor.logs.disable_not_supported', { provider: providerName }));
-      }
-
       // 获取当前配置
       const providers = await providersApi.getOpenAIProviders();
       const targetProvider = providers.find(
@@ -125,6 +153,11 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
     setDisableState(null);
   }, []);
 
+  // 关闭不支持提示
+  const handleCloseUnsupported = useCallback(() => {
+    setUnsupportedState(null);
+  }, []);
+
   // 检查模型是否已禁用
   const isModelDisabled = useCallback((source: string, model: string): boolean => {
     // 首先检查全局状态中是否已禁用
@@ -155,10 +188,12 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
 
   return {
     disableState,
+    unsupportedState,
     disabling,
     handleDisableClick,
     handleConfirmDisable,
     handleCancelDisable,
+    handleCloseUnsupported,
     isModelDisabled,
   };
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0a2a33c..7749350 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1024,6 +1024,7 @@
       "all_models": "All Models",
       "all_sources": "All Sources",
       "all_status": "All Status",
+      "all_provider_types": "All Providers",
       "success": "Success",
       "failed": "Failed",
       "last_update": "Last Update",
@@ -1037,6 +1038,7 @@
       "refreshing": "Refreshing...",
       "header_auth": "Auth Index",
       "header_api": "API",
+      "header_request_type": "Type",
       "header_model": "Model",
       "header_source": "Source",
       "header_status": "Status",
@@ -1063,7 +1065,15 @@
       "disable_error": "Disable failed",
       "disable_error_no_provider": "Cannot identify provider",
       "disable_error_provider_not_found": "Provider config not found: {{provider}}",
-      "disable_not_supported": "{{provider}} provider does not support disable operation"
+      "disable_not_supported": "{{provider}} provider does not support disable operation",
+      "disable_unsupported_title": "Auto-disable Not Supported",
+      "disable_unsupported_desc": "{{providerType}} type providers do not support auto-disable feature.",
+      "disable_unsupported_guide_title": "Manual Operation Guide",
+      "disable_unsupported_guide_step1": "1. Go to the \"AI Providers\" page",
+      "disable_unsupported_guide_step2": "2. Find the corresponding {{providerType}} configuration",
+      "disable_unsupported_guide_step3": "3. Edit the config and remove model \"{{model}}\"",
+      "disable_unsupported_guide_step4": "4. Save the configuration to apply changes",
+      "disable_unsupported_close": "Got it"
     }
   }
 }
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 8dbc7f3..3abac94 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1020,10 +1020,11 @@
       "sort_hint": "自动按时间倒序",
       "scroll_hint": "滚动浏览全部数据",
       "virtual_scroll_info": "当前显示 {{visible}} 行，共 {{total}} 条记录",
-      "all_apis": "全部 API",
-      "all_models": "全部模型",
-      "all_sources": "全部来源渠道",
-      "all_status": "全部状态",
+      "all_apis": "全部请求 API",
+      "all_models": "全部请求模型",
+      "all_sources": "全部请求渠道",
+      "all_status": "全部请求状态",
+      "all_provider_types": "全部请求类型",
       "success": "成功",
       "failed": "失败",
       "last_update": "最后更新",
@@ -1036,10 +1037,11 @@
       "refresh_in_seconds": "{{seconds}}秒后刷新",
       "refreshing": "刷新中...",
       "header_auth": "认证索引",
-      "header_api": "API",
-      "header_model": "模型",
+      "header_api": "请求 API",
+      "header_request_type": "请求类型",
+      "header_model": "请求模型",
       "header_source": "请求渠道",
-      "header_status": "状态",
+      "header_status": "请求状态",
       "header_recent": "最近请求状态",
       "header_rate": "成功率",
       "header_count": "请求数",
@@ -1063,7 +1065,15 @@
       "disable_error": "禁用失败",
       "disable_error_no_provider": "无法识别渠道",
       "disable_error_provider_not_found": "未找到渠道配置：{{provider}}",
-      "disable_not_supported": "{{provider}} 渠道不支持禁用操作"
+      "disable_not_supported": "{{provider}} 渠道不支持禁用操作",
+      "disable_unsupported_title": "不支持自动禁用",
+      "disable_unsupported_desc": "{{providerType}} 类型的渠道暂不支持自动禁用功能。",
+      "disable_unsupported_guide_title": "手动操作指南",
+      "disable_unsupported_guide_step1": "1. 前往「AI 提供商」页面",
+      "disable_unsupported_guide_step2": "2. 找到对应的 {{providerType}} 配置",
+      "disable_unsupported_guide_step3": "3. 编辑配置，移除模型「{{model}}」",
+      "disable_unsupported_guide_step4": "4. 保存配置即可生效",
+      "disable_unsupported_close": "我知道了"
     }
   }
 }
diff --git a/src/pages/MonitorPage.module.scss b/src/pages/MonitorPage.module.scss
index a3db997..19fc238 100644
--- a/src/pages/MonitorPage.module.scss
+++ b/src/pages/MonitorPage.module.scss
@@ -586,7 +586,7 @@
 // 虚拟滚动表格固定列宽
 .virtualTable {
   table-layout: fixed;
-  min-width: 1200px;
+  min-width: 1180px;
 
   th, td {
     overflow: hidden;
@@ -594,12 +594,12 @@
     white-space: nowrap;
   }
 
-  // 认证索引
-  th:nth-child(1), td:nth-child(1) { width: 100px; }
   // API
-  th:nth-child(2), td:nth-child(2) { width: 110px; }
+  th:nth-child(1), td:nth-child(1) { width: 110px; }
+  // 请求类型
+  th:nth-child(2), td:nth-child(2) { width: 65px; }
   // 模型
-  th:nth-child(3), td:nth-child(3) { width: 120px; }
+  th:nth-child(3), td:nth-child(3) { width: 160px; }
   // 请求渠道
   th:nth-child(4), td:nth-child(4) { width: 140px; }
   // 状态
diff --git a/src/pages/MonitorPage.tsx b/src/pages/MonitorPage.tsx
index c48c8d6..bfe8f49 100644
--- a/src/pages/MonitorPage.tsx
+++ b/src/pages/MonitorPage.tsx
@@ -84,39 +84,116 @@ export function MonitorPage() {
   const [apiFilter, setApiFilter] = useState('');
   const [providerMap, setProviderMap] = useState<Record<string, string>>({});
   const [providerModels, setProviderModels] = useState<Record<string, Set<string>>>({});
+  const [providerTypeMap, setProviderTypeMap] = useState<Record<string, string>>({});
 
-  // 加载渠道名称映射（参照原始 Web UI 的映射方式）
+  // 加载渠道名称映射（支持所有提供商类型）
   const loadProviderMap = useCallback(async () => {
     try {
-      const providers = await providersApi.getOpenAIProviders();
       const map: Record<string, string> = {};
       const modelsMap: Record<string, Set<string>> = {};
-      providers.forEach((provider) => {
-        // 使用 X-Provider header 或 name 作为渠道名称
+      const typeMap: Record<string, string> = {};
+
+      // 并行加载所有提供商配置
+      const [openaiProviders, geminiKeys, claudeConfigs, codexConfigs, vertexConfigs] = await Promise.all([
+        providersApi.getOpenAIProviders().catch(() => []),
+        providersApi.getGeminiKeys().catch(() => []),
+        providersApi.getClaudeConfigs().catch(() => []),
+        providersApi.getCodexConfigs().catch(() => []),
+        providersApi.getVertexConfigs().catch(() => []),
+      ]);
+
+      // 处理 OpenAI 兼容提供商
+      openaiProviders.forEach((provider) => {
         const providerName = provider.headers?.['X-Provider'] || provider.name || 'unknown';
-        // 存储每个渠道的可用模型（使用 alias 和 name 作为标识）
         const modelSet = new Set<string>();
         (provider.models || []).forEach((m) => {
           if (m.alias) modelSet.add(m.alias);
           if (m.name) modelSet.add(m.name);
         });
-        // 遍历 api-key-entries，将每个 api-key 映射到 provider 名称和模型集合
         const apiKeyEntries = provider.apiKeyEntries || [];
         apiKeyEntries.forEach((entry) => {
           const apiKey = entry.apiKey;
           if (apiKey) {
             map[apiKey] = providerName;
             modelsMap[apiKey] = modelSet;
+            typeMap[apiKey] = 'OpenAI';
           }
         });
-        // 也用 name 作为 key（备用）
         if (provider.name) {
           map[provider.name] = providerName;
           modelsMap[provider.name] = modelSet;
+          typeMap[provider.name] = 'OpenAI';
         }
       });
+
+      // 处理 Gemini 提供商
+      geminiKeys.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Gemini';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Gemini';
+        }
+      });
+
+      // 处理 Claude 提供商
+      claudeConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Claude';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Claude';
+          // 存储模型集合
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
+      // 处理 Codex 提供商
+      codexConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Codex';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Codex';
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
+      // 处理 Vertex 提供商
+      vertexConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Vertex';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Vertex';
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
       setProviderMap(map);
       setProviderModels(modelsMap);
+      setProviderTypeMap(typeMap);
     } catch (err) {
       console.warn('Monitor: Failed to load provider map:', err);
     }
@@ -294,6 +371,7 @@ export function MonitorPage() {
         data={filteredData}
         loading={loading}
         providerMap={providerMap}
+        providerTypeMap={providerTypeMap}
         apiFilter={apiFilter}
       />
     </div>
diff --git a/src/pages/SystemPage.tsx b/src/pages/SystemPage.tsx
index 445b34b..481f38c 100644
--- a/src/pages/SystemPage.tsx
+++ b/src/pages/SystemPage.tsx
@@ -181,7 +181,7 @@ export function SystemPage() {
           </a>
 
           <a
-            href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+            href="https://github.com/kongkongyo/Cli-Proxy-API-Management-Center"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.linkCard}