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>
2026-01-16 22:11:54 +08:00
parent 103013d8b3
commit 8e8054e571
9 changed files with 287 additions and 42 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -32,4 +32,5 @@ settings.local.json
 *.sw?
 自定义 Web UI
 tmpclaude*
-.claude
+.claude
+CLIProxyAPI-服务端
--- 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}
+      />
    </>
  );
 }
--- a/src/components/monitor/UnsupportedDisableModal.tsx
+++ 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>
+  );
+}
--- 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,
  };
 }
--- 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"
    }
  }
 }
--- 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": "我知道了"
    }
  }
 }
--- 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; }
  // 状态
--- 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>
--- 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}