feat(dashboard): enhance dashboard with provider breakdown and usage stats

src/i18n/locales/en.json

@@ -97,7 +97,19 @@
     "subtitle": "Welcome to CLI Proxy API Management Center",
     "openai_providers": "OpenAI Providers",
     "quick_actions": "Quick Actions",
-    "current_config": "Current Configuration"
+    "current_config": "Current Configuration",
+    "management_keys": "Management Keys",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth Credentials",
+    "usage_overview": "Usage Overview",
+    "total_requests": "Total Requests",
+    "total_tokens": "Total Tokens",
+    "rpm_30min": "RPM (30min)",
+    "tpm_30min": "TPM (30min)",
+    "models_used": "Models Used",
+    "no_usage_data": "No usage data available",
+    "view_detailed_usage": "View Detailed Stats",
+    "edit_settings": "Edit Settings"
   },
   "basic_settings": {
     "title": "Basic Settings",

src/i18n/locales/zh-CN.json

@@ -97,7 +97,19 @@
     "subtitle": "欢迎使用 CLI Proxy API 管理中心",
     "openai_providers": "OpenAI 提供商",
     "quick_actions": "快捷操作",
-    "current_config": "当前配置"
+    "current_config": "当前配置",
+    "management_keys": "管理密钥",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth 凭证",
+    "usage_overview": "使用概览",
+    "total_requests": "总请求数",
+    "total_tokens": "总 Token 数",
+    "rpm_30min": "RPM (30分钟)",
+    "tpm_30min": "TPM (30分钟)",
+    "models_used": "使用模型数",
+    "no_usage_data": "暂无使用数据",
+    "view_detailed_usage": "查看详细统计",
+    "edit_settings": "编辑设置"
   },
   "basic_settings": {
     "title": "基础设置",

src/pages/DashboardPage.module.scss

@@ -18,6 +18,7 @@
   font-weight: 800;
   color: var(--text-primary);
   margin: 0;
+  line-height: 1.4;
 }
 
 .subtitle {
@@ -105,6 +106,11 @@
   border-radius: $radius-full;
 }
 
+.buildDate {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
 .statsGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -157,6 +163,13 @@
   color: var(--text-secondary);
 }
 
+.statSublabel {
+  font-size: 11px;
+  color: var(--text-secondary);
+  opacity: 0.8;
+  margin-top: 2px;
+}
+
 .section {
   display: flex;
   flex-direction: column;
@@ -184,6 +197,17 @@
   display: inline-flex;
   align-items: center;
   gap: $spacing-sm;
+
+  // Button 内部的 span 需要 flex 对齐图标和文字
+  > span {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
 }
 
 .configGrid {
@@ -221,3 +245,68 @@
     color: var(--text-secondary);
   }
 }
+
+.configValueMono {
+  font-size: 12px;
+  font-family: $font-mono;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.configItemFull {
+  grid-column: 1 / -1;
+}
+
+// Usage stats section
+.usageGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: $spacing-sm;
+}
+
+.usageCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  text-align: center;
+}
+
+.usageValue {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--primary-color);
+}
+
+.usageLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.usageLoading,
+.usageEmpty {
+  padding: $spacing-lg;
+  text-align: center;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+}
+
+.viewMoreLink {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--primary-color);
+  text-decoration: none;
+  margin-top: $spacing-xs;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/pages/DashboardPage.tsx

@@ -2,9 +2,19 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
-import { IconKey, IconBot, IconFileText, IconChartLine, IconSettings, IconShield } from '@/components/ui/icons';
+import {
+  IconKey,
+  IconBot,
+  IconFileText,
+  IconChartLine,
+  IconSettings,
+  IconShield,
+  IconScrollText,
+  IconInfo
+} from '@/components/ui/icons';
 import { useAuthStore, useConfigStore } from '@/stores';
-import { apiKeysApi, providersApi, authFilesApi } from '@/services/api';
+import { apiKeysApi, providersApi, authFilesApi, usageApi } from '@/services/api';
+import { collectUsageDetails, extractTotalTokens, calculateRecentPerMinuteRates, formatCompactNumber } from '@/utils/usage';
 import styles from './DashboardPage.module.scss';
 
 interface QuickStat {
@@ -13,51 +23,129 @@ interface QuickStat {
   icon: React.ReactNode;
   path: string;
   loading?: boolean;
+  sublabel?: string;
+}
+
+interface ProviderStats {
+  gemini: number | null;
+  codex: number | null;
+  claude: number | null;
+  openai: number | null;
+}
+
+interface UsageStats {
+  totalRequests: number;
+  totalTokens: number;
+  rpm: number;
+  tpm: number;
+  modelsUsed: number;
 }
 
 export function DashboardPage() {
   const { t } = useTranslation();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
   const apiBase = useAuthStore((state) => state.apiBase);
   const config = useConfigStore((state) => state.config);
 
   const [stats, setStats] = useState<{
     apiKeys: number | null;
-    providers: number | null;
     authFiles: number | null;
   }>({
     apiKeys: null,
-    providers: null,
     authFiles: null
   });
 
+  const [providerStats, setProviderStats] = useState<ProviderStats>({
+    gemini: null,
+    codex: null,
+    claude: null,
+    openai: null
+  });
+
+  const [usageStats, setUsageStats] = useState<UsageStats | null>(null);
   const [loading, setLoading] = useState(true);
+  const [usageLoading, setUsageLoading] = useState(true);
 
   useEffect(() => {
     const fetchStats = async () => {
       setLoading(true);
       try {
-        const [keysRes, providersRes, filesRes] = await Promise.allSettled([
+        const [keysRes, filesRes, geminiRes, codexRes, claudeRes, openaiRes] = await Promise.allSettled([
           apiKeysApi.list(),
-          providersApi.getOpenAIProviders(),
+          authFilesApi.list(),
-          authFilesApi.list()
+          providersApi.getGeminiKeys(),
+          providersApi.getCodexConfigs(),
+          providersApi.getClaudeConfigs(),
+          providersApi.getOpenAIProviders()
         ]);
 
         setStats({
           apiKeys: keysRes.status === 'fulfilled' ? keysRes.value.length : null,
-          providers: providersRes.status === 'fulfilled' ? providersRes.value.length : null,
           authFiles: filesRes.status === 'fulfilled' ? filesRes.value.files.length : null
         });
+
+        setProviderStats({
+          gemini: geminiRes.status === 'fulfilled' ? geminiRes.value.length : null,
+          codex: codexRes.status === 'fulfilled' ? codexRes.value.length : null,
+          claude: claudeRes.status === 'fulfilled' ? claudeRes.value.length : null,
+          openai: openaiRes.status === 'fulfilled' ? openaiRes.value.length : null
+        });
       } finally {
         setLoading(false);
       }
     };
 
+    const fetchUsage = async () => {
+      if (!config?.usageStatisticsEnabled) {
+        setUsageLoading(false);
+        return;
+      }
+      setUsageLoading(true);
+      try {
+        const response = await usageApi.getUsage();
+        const usageData = response?.usage ?? response;
+
+        if (usageData) {
+          const details = collectUsageDetails(usageData);
+          const totalRequests = details.length;
+          const totalTokens = details.reduce((sum, d) => sum + extractTotalTokens(d), 0);
+          const rateStats = calculateRecentPerMinuteRates(30, usageData);
+
+          // Count unique models
+          const modelSet = new Set<string>();
+          details.forEach(d => {
+            if (d.__modelName) modelSet.add(d.__modelName);
+          });
+
+          setUsageStats({
+            totalRequests,
+            totalTokens,
+            rpm: rateStats.rpm,
+            tpm: rateStats.tpm,
+            modelsUsed: modelSet.size
+          });
+        }
+      } catch {
+        // Ignore usage fetch errors
+      } finally {
+        setUsageLoading(false);
+      }
+    };
+
     if (connectionStatus === 'connected') {
       fetchStats();
+      fetchUsage();
     }
-  }, [connectionStatus]);
+  }, [connectionStatus, config?.usageStatisticsEnabled]);
+
+  // Calculate total provider keys
+  const totalProviderKeys =
+    (providerStats.gemini ?? 0) +
+    (providerStats.codex ?? 0) +
+    (providerStats.claude ?? 0) +
+    (providerStats.openai ?? 0);
 
   const quickStats: QuickStat[] = [
     {
@@ -65,21 +153,29 @@ export function DashboardPage() {
       value: stats.apiKeys ?? '-',
       icon: <IconKey size={24} />,
       path: '/api-keys',
-      loading: loading && stats.apiKeys === null
+      loading: loading && stats.apiKeys === null,
+      sublabel: t('dashboard.management_keys')
     },
     {
-      label: t('dashboard.openai_providers'),
+      label: t('nav.ai_providers'),
-      value: stats.providers ?? '-',
+      value: loading ? '-' : totalProviderKeys,
       icon: <IconBot size={24} />,
       path: '/ai-providers',
-      loading: loading && stats.providers === null
+      loading: loading,
+      sublabel: t('dashboard.provider_keys_detail', {
+        gemini: providerStats.gemini ?? 0,
+        codex: providerStats.codex ?? 0,
+        claude: providerStats.claude ?? 0,
+        openai: providerStats.openai ?? 0
+      })
     },
     {
       label: t('nav.auth_files'),
       value: stats.authFiles ?? '-',
       icon: <IconFileText size={24} />,
       path: '/auth-files',
-      loading: loading && stats.authFiles === null
+      loading: loading && stats.authFiles === null,
+      sublabel: t('dashboard.oauth_credentials')
     }
   ];
 
@@ -87,7 +183,9 @@ export function DashboardPage() {
     { label: t('nav.basic_settings'), icon: <IconSettings size={18} />, path: '/settings' },
     { label: t('nav.ai_providers'), icon: <IconBot size={18} />, path: '/ai-providers' },
     { label: t('nav.oauth'), icon: <IconShield size={18} />, path: '/oauth' },
-    { label: t('nav.usage_stats'), icon: <IconChartLine size={18} />, path: '/usage' }
+    { label: t('nav.usage_stats'), icon: <IconChartLine size={18} />, path: '/usage' },
+    ...(config?.loggingToFile ? [{ label: t('nav.logs'), icon: <IconScrollText size={18} />, path: '/logs' }] : []),
+    { label: t('nav.system_info'), icon: <IconInfo size={18} />, path: '/system' }
   ];
 
   return (
@@ -121,6 +219,11 @@ export function DashboardPage() {
         <div className={styles.connectionInfo}>
           <span className={styles.serverUrl}>{apiBase || '-'}</span>
           {serverVersion && <span className={styles.serverVersion}>v{serverVersion}</span>}
+          {serverBuildDate && (
+            <span className={styles.buildDate}>
+              {new Date(serverBuildDate).toLocaleDateString()}
+            </span>
+          )}
         </div>
       </div>
 
@@ -131,11 +234,51 @@ export function DashboardPage() {
             <div className={styles.statContent}>
               <span className={styles.statValue}>{stat.loading ? '...' : stat.value}</span>
               <span className={styles.statLabel}>{stat.label}</span>
+              {stat.sublabel && !stat.loading && (
+                <span className={styles.statSublabel}>{stat.sublabel}</span>
+              )}
             </div>
           </Link>
         ))}
       </div>
 
+      {config?.usageStatisticsEnabled && (
+        <div className={styles.section}>
+          <h2 className={styles.sectionTitle}>{t('dashboard.usage_overview')}</h2>
+          {usageLoading ? (
+            <div className={styles.usageLoading}>{t('common.loading')}</div>
+          ) : usageStats ? (
+            <div className={styles.usageGrid}>
+              <div className={styles.usageCard}>
+                <span className={styles.usageValue}>{formatCompactNumber(usageStats.totalRequests)}</span>
+                <span className={styles.usageLabel}>{t('dashboard.total_requests')}</span>
+              </div>
+              <div className={styles.usageCard}>
+                <span className={styles.usageValue}>{formatCompactNumber(usageStats.totalTokens)}</span>
+                <span className={styles.usageLabel}>{t('dashboard.total_tokens')}</span>
+              </div>
+              <div className={styles.usageCard}>
+                <span className={styles.usageValue}>{usageStats.rpm.toFixed(1)}</span>
+                <span className={styles.usageLabel}>{t('dashboard.rpm_30min')}</span>
+              </div>
+              <div className={styles.usageCard}>
+                <span className={styles.usageValue}>{formatCompactNumber(usageStats.tpm)}</span>
+                <span className={styles.usageLabel}>{t('dashboard.tpm_30min')}</span>
+              </div>
+              <div className={styles.usageCard}>
+                <span className={styles.usageValue}>{usageStats.modelsUsed}</span>
+                <span className={styles.usageLabel}>{t('dashboard.models_used')}</span>
+              </div>
+            </div>
+          ) : (
+            <div className={styles.usageEmpty}>{t('dashboard.no_usage_data')}</div>
+          )}
+          <Link to="/usage" className={styles.viewMoreLink}>
+            {t('dashboard.view_detailed_usage')} →
+          </Link>
+        </div>
+      )}
+
       <div className={styles.section}>
         <h2 className={styles.sectionTitle}>{t('dashboard.quick_actions')}</h2>
         <div className={styles.actionsGrid}>
@@ -172,11 +315,32 @@ export function DashboardPage() {
                 {config.loggingToFile ? t('common.yes') : t('common.no')}
               </span>
             </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.request_log_enable')}</span>
+              <span className={`${styles.configValue} ${config.requestLog ? styles.enabled : styles.disabled}`}>
+                {config.requestLog ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
             <div className={styles.configItem}>
               <span className={styles.configLabel}>{t('basic_settings.retry_count_label')}</span>
               <span className={styles.configValue}>{config.requestRetry ?? 0}</span>
             </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.ws_auth_enable')}</span>
+              <span className={`${styles.configValue} ${config.wsAuth ? styles.enabled : styles.disabled}`}>
+                {config.wsAuth ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            {config.proxyUrl && (
+              <div className={`${styles.configItem} ${styles.configItemFull}`}>
+                <span className={styles.configLabel}>{t('basic_settings.proxy_url_label')}</span>
+                <span className={styles.configValueMono}>{config.proxyUrl}</span>
+              </div>
+            )}
           </div>
+          <Link to="/settings" className={styles.viewMoreLink}>
+            {t('dashboard.edit_settings')} →
+          </Link>
         </div>
       )}
     </div>