From 82d1489a5591340048c2e1843ba4c2ad59293892 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Dec 2025 01:48:55 +0000
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=AC?=
 =?UTF-8?q?=E5=BC=80=E7=BB=9F=E8=AE=A1=E6=A6=82=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 GET /admin/public-stats 公开端点，返回脱敏的服务统计数据
- 在 OEM 设置中添加 publicStatsEnabled 开关
- 创建 PublicStatsOverview 组件，展示服务状态、平台可用性、今日统计和模型使用分布
- 在登录页集成公开统计展示（当 publicStatsEnabled 开启时）
- 在设置页品牌设置中添加公开统计开关
---
 src/routes/admin/system.js                    | 264 +++++++++++++++--
 .../components/common/PublicStatsOverview.vue | 266 ++++++++++++++++++
 web/admin-spa/src/stores/auth.js              |  34 ++-
 web/admin-spa/src/stores/settings.js          |   2 +
 web/admin-spa/src/views/LoginView.vue         |  18 +-
 web/admin-spa/src/views/SettingsView.vue      |  75 ++++-
 6 files changed, 632 insertions(+), 27 deletions(-)
 create mode 100644 web/admin-spa/src/components/common/PublicStatsOverview.vue

diff --git a/src/routes/admin/system.js b/src/routes/admin/system.js
index 5692103c..6f8e2382 100644
--- a/src/routes/admin/system.js
+++ b/src/routes/admin/system.js
@@ -4,6 +4,10 @@ const path = require('path')
 const axios = require('axios')
 const claudeCodeHeadersService = require('../../services/claudeCodeHeadersService')
 const claudeAccountService = require('../../services/claudeAccountService')
+const claudeConsoleAccountService = require('../../services/claudeConsoleAccountService')
+const geminiAccountService = require('../../services/geminiAccountService')
+const bedrockAccountService = require('../../services/bedrockAccountService')
+const droidAccountService = require('../../services/droidAccountService')
 const redis = require('../../models/redis')
 const { authenticateAdmin } = require('../../middleware/auth')
 const logger = require('../../utils/logger')
@@ -254,30 +258,37 @@ router.get('/check-updates', authenticateAdmin, async (req, res) => {
 
 // ==================== OEM 设置管理 ====================
 
+// 默认OEM设置
+const defaultOemSettings = {
+  siteName: 'Claude Relay Service',
+  siteIcon: '',
+  siteIconData: '', // Base64编码的图标数据
+  showAdminButton: true, // 是否显示管理后台按钮
+  publicStatsEnabled: false, // 是否在首页显示公开统计概览
+  updatedAt: new Date().toISOString()
+}
+
+// 获取OEM设置的辅助函数
+async function getOemSettings() {
+  const client = redis.getClient()
+  const oemSettings = await client.get('oem:settings')
+
+  let settings = { ...defaultOemSettings }
+  if (oemSettings) {
+    try {
+      settings = { ...defaultOemSettings, ...JSON.parse(oemSettings) }
+    } catch (err) {
+      logger.warn('⚠️ Failed to parse OEM settings, using defaults:', err.message)
+    }
+  }
+  return settings
+}
+
 // 获取OEM设置（公开接口，用于显示）
 // 注意：这个端点没有 authenticateAdmin 中间件，因为前端登录页也需要访问
 router.get('/oem-settings', async (req, res) => {
   try {
-    const client = redis.getClient()
-    const oemSettings = await client.get('oem:settings')
-
-    // 默认设置
-    const defaultSettings = {
-      siteName: 'Claude Relay Service',
-      siteIcon: '',
-      siteIconData: '', // Base64编码的图标数据
-      showAdminButton: true, // 是否显示管理后台按钮
-      updatedAt: new Date().toISOString()
-    }
-
-    let settings = defaultSettings
-    if (oemSettings) {
-      try {
-        settings = { ...defaultSettings, ...JSON.parse(oemSettings) }
-      } catch (err) {
-        logger.warn('⚠️ Failed to parse OEM settings, using defaults:', err.message)
-      }
-    }
+    const settings = await getOemSettings()
 
     // 添加 LDAP 启用状态到响应中
     return res.json({
@@ -296,7 +307,7 @@ router.get('/oem-settings', async (req, res) => {
 // 更新OEM设置
 router.put('/oem-settings', authenticateAdmin, async (req, res) => {
   try {
-    const { siteName, siteIcon, siteIconData, showAdminButton } = req.body
+    const { siteName, siteIcon, siteIconData, showAdminButton, publicStatsEnabled } = req.body
 
     // 验证输入
     if (!siteName || typeof siteName !== 'string' || siteName.trim().length === 0) {
@@ -328,6 +339,7 @@ router.put('/oem-settings', authenticateAdmin, async (req, res) => {
       siteIcon: (siteIcon || '').trim(),
       siteIconData: (siteIconData || '').trim(), // Base64数据
       showAdminButton: showAdminButton !== false, // 默认为true
+      publicStatsEnabled: publicStatsEnabled === true, // 默认为false
       updatedAt: new Date().toISOString()
     }
 
@@ -398,4 +410,214 @@ router.post('/claude-code-version/clear', authenticateAdmin, async (req, res) =>
   }
 })
 
+// ==================== 公开统计概览 ====================
+
+// 获取公开统计数据（无需认证，用于首页展示）
+// 只在 publicStatsEnabled 开启时返回数据
+router.get('/public-stats', async (req, res) => {
+  try {
+    // 检查是否启用了公开统计
+    const settings = await getOemSettings()
+    if (!settings.publicStatsEnabled) {
+      return res.json({
+        success: true,
+        enabled: false,
+        data: null
+      })
+    }
+
+    // 辅助函数：规范化布尔值
+    const normalizeBoolean = (value) => value === true || value === 'true'
+    const isRateLimitedFlag = (status) => {
+      if (!status) return false
+      if (typeof status === 'string') return status === 'limited'
+      if (typeof status === 'object') return status.isRateLimited === true
+      return false
+    }
+
+    // 并行获取统计数据
+    const [
+      claudeAccounts,
+      claudeConsoleAccounts,
+      geminiAccounts,
+      bedrockAccountsResult,
+      droidAccounts,
+      todayStats,
+      modelStats
+    ] = await Promise.all([
+      claudeAccountService.getAllAccounts(),
+      claudeConsoleAccountService.getAllAccounts(),
+      geminiAccountService.getAllAccounts(),
+      bedrockAccountService.getAllAccounts(),
+      droidAccountService.getAllAccounts(),
+      redis.getTodayStats(),
+      getPublicModelStats()
+    ])
+
+    const bedrockAccounts = bedrockAccountsResult.success ? bedrockAccountsResult.data : []
+
+    // 计算各平台正常账户数
+    const normalClaudeAccounts = claudeAccounts.filter(
+      (acc) =>
+        acc.isActive &&
+        acc.status !== 'blocked' &&
+        acc.status !== 'unauthorized' &&
+        acc.schedulable !== false &&
+        !(acc.rateLimitStatus && acc.rateLimitStatus.isRateLimited)
+    ).length
+    const normalClaudeConsoleAccounts = claudeConsoleAccounts.filter(
+      (acc) =>
+        acc.isActive &&
+        acc.status !== 'blocked' &&
+        acc.status !== 'unauthorized' &&
+        acc.schedulable !== false &&
+        !(acc.rateLimitStatus && acc.rateLimitStatus.isRateLimited)
+    ).length
+    const normalGeminiAccounts = geminiAccounts.filter(
+      (acc) =>
+        acc.isActive &&
+        acc.status !== 'blocked' &&
+        acc.status !== 'unauthorized' &&
+        acc.schedulable !== false &&
+        !(
+          acc.rateLimitStatus === 'limited' ||
+          (acc.rateLimitStatus && acc.rateLimitStatus.isRateLimited)
+        )
+    ).length
+    const normalBedrockAccounts = bedrockAccounts.filter(
+      (acc) =>
+        acc.isActive &&
+        acc.status !== 'blocked' &&
+        acc.status !== 'unauthorized' &&
+        acc.schedulable !== false &&
+        !(acc.rateLimitStatus && acc.rateLimitStatus.isRateLimited)
+    ).length
+    const normalDroidAccounts = droidAccounts.filter(
+      (acc) =>
+        normalizeBoolean(acc.isActive) &&
+        acc.status !== 'blocked' &&
+        acc.status !== 'unauthorized' &&
+        normalizeBoolean(acc.schedulable) &&
+        !isRateLimitedFlag(acc.rateLimitStatus)
+    ).length
+
+    // 计算总正常账户数
+    const totalNormalAccounts =
+      normalClaudeAccounts +
+      normalClaudeConsoleAccounts +
+      normalGeminiAccounts +
+      normalBedrockAccounts +
+      normalDroidAccounts
+
+    // 判断服务状态
+    const isHealthy = redis.isConnected && totalNormalAccounts > 0
+
+    // 构建公开统计数据（脱敏后的数据）
+    const publicStats = {
+      // 服务状态
+      serviceStatus: isHealthy ? 'healthy' : 'degraded',
+      uptime: process.uptime(),
+
+      // 平台可用性（只显示是否有可用账户，不显示具体数量）
+      platforms: {
+        claude: normalClaudeAccounts + normalClaudeConsoleAccounts > 0,
+        gemini: normalGeminiAccounts > 0,
+        bedrock: normalBedrockAccounts > 0,
+        droid: normalDroidAccounts > 0
+      },
+
+      // 今日统计
+      todayStats: {
+        requests: todayStats.requestsToday || 0,
+        tokens: todayStats.tokensToday || 0,
+        inputTokens: todayStats.inputTokensToday || 0,
+        outputTokens: todayStats.outputTokensToday || 0
+      },
+
+      // 模型使用分布（只返回模型名和请求占比，不返回具体数量）
+      modelDistribution: modelStats,
+
+      // 系统时区
+      systemTimezone: config.system.timezoneOffset || 8
+    }
+
+    return res.json({
+      success: true,
+      enabled: true,
+      data: publicStats
+    })
+  } catch (error) {
+    logger.error('❌ Failed to get public stats:', error)
+    return res.status(500).json({
+      success: false,
+      error: 'Failed to get public stats',
+      message: error.message
+    })
+  }
+})
+
+// 获取公开模型统计的辅助函数
+async function getPublicModelStats() {
+  try {
+    const client = redis.getClientSafe()
+    const today = redis.getDateStringInTimezone()
+    const pattern = `usage:model:daily:*:${today}`
+    const keys = await client.keys(pattern)
+
+    if (keys.length === 0) {
+      return []
+    }
+
+    // 模型名标准化
+    const normalizeModelName = (model) => {
+      if (!model || model === 'unknown') return model
+      if (model.includes('.anthropic.') || model.includes('.claude')) {
+        let normalized = model.replace(/^[a-z0-9-]+\./, '')
+        normalized = normalized.replace('anthropic.', '')
+        normalized = normalized.replace(/-v\d+:\d+$/, '')
+        return normalized
+      }
+      return model.replace(/-v\d+:\d+|:latest$/, '')
+    }
+
+    // 聚合模型数据
+    const modelStatsMap = new Map()
+    let totalRequests = 0
+
+    for (const key of keys) {
+      const match = key.match(/usage:model:daily:(.+):\d{4}-\d{2}-\d{2}$/)
+      if (!match) continue
+
+      const rawModel = match[1]
+      const normalizedModel = normalizeModelName(rawModel)
+      const data = await client.hgetall(key)
+
+      if (data && Object.keys(data).length > 0) {
+        const requests = parseInt(data.requests) || 0
+        totalRequests += requests
+
+        const stats = modelStatsMap.get(normalizedModel) || { requests: 0 }
+        stats.requests += requests
+        modelStatsMap.set(normalizedModel, stats)
+      }
+    }
+
+    // 转换为数组并计算占比
+    const modelStats = []
+    for (const [model, stats] of modelStatsMap) {
+      modelStats.push({
+        model,
+        percentage: totalRequests > 0 ? Math.round((stats.requests / totalRequests) * 100) : 0
+      })
+    }
+
+    // 按占比排序，取前5个
+    modelStats.sort((a, b) => b.percentage - a.percentage)
+    return modelStats.slice(0, 5)
+  } catch (error) {
+    logger.warn('⚠️ Failed to get public model stats:', error.message)
+    return []
+  }
+}
+
 module.exports = router
diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
new file mode 100644
index 00000000..81a52042
--- /dev/null
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -0,0 +1,266 @@
+<template>
+  <div v-if="authStore.publicStats" class="public-stats-overview">
+    <!-- 服务状态徽章 -->
+    <div class="mb-4 flex items-center justify-center gap-2">
+      <div
+        class="status-badge"
+        :class="{
+          'status-healthy': authStore.publicStats.serviceStatus === 'healthy',
+          'status-degraded': authStore.publicStats.serviceStatus === 'degraded'
+        }"
+      >
+        <span class="status-dot"></span>
+        <span class="status-text">{{
+          authStore.publicStats.serviceStatus === 'healthy' ? '服务正常' : '服务降级'
+        }}</span>
+      </div>
+      <span class="text-xs text-gray-500 dark:text-gray-400">
+        运行 {{ formatUptime(authStore.publicStats.uptime) }}
+      </span>
+    </div>
+
+    <!-- 平台可用性指示器 -->
+    <div class="mb-4 flex flex-wrap justify-center gap-2">
+      <div
+        v-for="(available, platform) in authStore.publicStats.platforms"
+        :key="platform"
+        class="platform-badge"
+        :class="{ available: available, unavailable: !available }"
+      >
+        <i :class="getPlatformIcon(platform)" class="mr-1"></i>
+        <span>{{ getPlatformName(platform) }}</span>
+      </div>
+    </div>
+
+    <!-- 今日统计 -->
+    <div class="stats-grid">
+      <div class="stat-item">
+        <div class="stat-value">{{ formatNumber(authStore.publicStats.todayStats.requests) }}</div>
+        <div class="stat-label">今日请求</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ formatTokens(authStore.publicStats.todayStats.tokens) }}</div>
+        <div class="stat-label">今日 Tokens</div>
+      </div>
+    </div>
+
+    <!-- 模型使用分布 -->
+    <div v-if="authStore.publicStats.modelDistribution?.length > 0" class="mt-4">
+      <div class="mb-2 text-center text-xs text-gray-600 dark:text-gray-400">模型使用分布</div>
+      <div class="model-distribution">
+        <div
+          v-for="model in authStore.publicStats.modelDistribution"
+          :key="model.model"
+          class="model-bar-item"
+        >
+          <div class="model-name">{{ formatModelName(model.model) }}</div>
+          <div class="model-bar">
+            <div class="model-bar-fill" :style="{ width: `${model.percentage}%` }"></div>
+          </div>
+          <div class="model-percentage">{{ model.percentage }}%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 加载状态 -->
+  <div v-else-if="authStore.publicStatsLoading" class="public-stats-loading">
+    <div class="loading-spinner"></div>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+// 格式化运行时间
+function formatUptime(seconds) {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+
+  if (days > 0) {
+    return `${days}天 ${hours}小时`
+  } else if (hours > 0) {
+    return `${hours}小时 ${minutes}分钟`
+  } else {
+    return `${minutes}分钟`
+  }
+}
+
+// 格式化数字
+function formatNumber(num) {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  }
+  return num.toString()
+}
+
+// 格式化 tokens
+function formatTokens(tokens) {
+  if (tokens >= 1000000000) {
+    return (tokens / 1000000000).toFixed(2) + 'B'
+  } else if (tokens >= 1000000) {
+    return (tokens / 1000000).toFixed(2) + 'M'
+  } else if (tokens >= 1000) {
+    return (tokens / 1000).toFixed(1) + 'K'
+  }
+  return tokens.toString()
+}
+
+// 获取平台图标
+function getPlatformIcon(platform) {
+  const icons = {
+    claude: 'fas fa-robot',
+    gemini: 'fas fa-gem',
+    bedrock: 'fab fa-aws',
+    droid: 'fas fa-microchip'
+  }
+  return icons[platform] || 'fas fa-server'
+}
+
+// 获取平台名称
+function getPlatformName(platform) {
+  const names = {
+    claude: 'Claude',
+    gemini: 'Gemini',
+    bedrock: 'Bedrock',
+    droid: 'Droid'
+  }
+  return names[platform] || platform
+}
+
+// 格式化模型名称
+function formatModelName(model) {
+  if (!model) return 'Unknown'
+  // 简化长模型名称
+  const parts = model.split('-')
+  if (parts.length > 2) {
+    return parts.slice(0, 2).join('-')
+  }
+  return model
+}
+</script>
+
+<style scoped>
+.public-stats-overview {
+  @apply rounded-xl border border-gray-200/50 bg-white/80 p-4 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 状态徽章 */
+.status-badge {
+  @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
+}
+
+.status-healthy {
+  @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400;
+}
+
+.status-degraded {
+  @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400;
+}
+
+.status-dot {
+  @apply inline-block h-2 w-2 rounded-full;
+}
+
+.status-healthy .status-dot {
+  @apply bg-green-500;
+  animation: pulse 2s infinite;
+}
+
+.status-degraded .status-dot {
+  @apply bg-yellow-500;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* 平台徽章 */
+.platform-badge {
+  @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium transition-all;
+}
+
+.platform-badge.available {
+  @apply bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400;
+}
+
+.platform-badge.unavailable {
+  @apply bg-gray-100 text-gray-400 line-through dark:bg-gray-800 dark:text-gray-600;
+}
+
+/* 统计网格 */
+.stats-grid {
+  @apply grid grid-cols-2 gap-3;
+}
+
+.stat-item {
+  @apply rounded-lg bg-gray-50 p-3 text-center dark:bg-gray-700/50;
+}
+
+.stat-value {
+  @apply text-lg font-bold text-gray-900 dark:text-gray-100;
+}
+
+.stat-label {
+  @apply text-xs text-gray-500 dark:text-gray-400;
+}
+
+/* 模型分布 */
+.model-distribution {
+  @apply space-y-2;
+}
+
+.model-bar-item {
+  @apply flex items-center gap-2 text-xs;
+}
+
+.model-name {
+  @apply w-20 truncate text-gray-600 dark:text-gray-400;
+}
+
+.model-bar {
+  @apply relative h-2 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700;
+}
+
+.model-bar-fill {
+  @apply absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-blue-500 to-purple-500;
+  transition: width 0.5s ease-out;
+}
+
+.model-percentage {
+  @apply w-10 text-right text-gray-500 dark:text-gray-400;
+}
+
+/* 加载状态 */
+.public-stats-loading {
+  @apply flex items-center justify-center py-8;
+}
+
+.loading-spinner {
+  @apply h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent;
+}
+</style>
diff --git a/web/admin-spa/src/stores/auth.js b/web/admin-spa/src/stores/auth.js
index bbd39c62..e36083e5 100644
--- a/web/admin-spa/src/stores/auth.js
+++ b/web/admin-spa/src/stores/auth.js
@@ -14,10 +14,15 @@ export const useAuthStore = defineStore('auth', () => {
     siteName: 'Claude Relay Service',
     siteIcon: '',
     siteIconData: '',
-    faviconData: ''
+    faviconData: '',
+    publicStatsEnabled: false
   })
   const oemLoading = ref(true)
 
+  // 公开统计数据
+  const publicStats = ref(null)
+  const publicStatsLoading = ref(false)
+
   // 计算属性
   const isAuthenticated = computed(() => !!authToken.value && isLoggedIn.value)
   const token = computed(() => authToken.value)
@@ -104,6 +109,11 @@ export const useAuthStore = defineStore('auth', () => {
         if (result.data.siteName) {
           document.title = `${result.data.siteName} - 管理后台`
         }
+
+        // 如果公开统计已启用，加载统计数据
+        if (result.data.publicStatsEnabled) {
+          loadPublicStats()
+        }
       }
     } catch (error) {
       console.error('加载OEM设置失败:', error)
@@ -112,6 +122,23 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
+  async function loadPublicStats() {
+    publicStatsLoading.value = true
+    try {
+      const result = await apiClient.get('/admin/public-stats')
+      if (result.success && result.enabled && result.data) {
+        publicStats.value = result.data
+      } else {
+        publicStats.value = null
+      }
+    } catch (error) {
+      console.error('加载公开统计失败:', error)
+      publicStats.value = null
+    } finally {
+      publicStatsLoading.value = false
+    }
+  }
+
   return {
     // 状态
     isLoggedIn,
@@ -121,6 +148,8 @@ export const useAuthStore = defineStore('auth', () => {
     loginLoading,
     oemSettings,
     oemLoading,
+    publicStats,
+    publicStatsLoading,
 
     // 计算属性
     isAuthenticated,
@@ -131,6 +160,7 @@ export const useAuthStore = defineStore('auth', () => {
     login,
     logout,
     checkAuth,
-    loadOemSettings
+    loadOemSettings,
+    loadPublicStats
   }
 })
diff --git a/web/admin-spa/src/stores/settings.js b/web/admin-spa/src/stores/settings.js
index 986ce327..fb1f2d7b 100644
--- a/web/admin-spa/src/stores/settings.js
+++ b/web/admin-spa/src/stores/settings.js
@@ -9,6 +9,7 @@ export const useSettingsStore = defineStore('settings', () => {
     siteIcon: '',
     siteIconData: '',
     showAdminButton: true, // 控制管理后台按钮的显示
+    publicStatsEnabled: false, // 是否在首页显示公开统计概览
     updatedAt: null
   })
 
@@ -66,6 +67,7 @@ export const useSettingsStore = defineStore('settings', () => {
       siteIcon: '',
       siteIconData: '',
       showAdminButton: true,
+      publicStatsEnabled: false,
       updatedAt: null
     }
 
diff --git a/web/admin-spa/src/views/LoginView.vue b/web/admin-spa/src/views/LoginView.vue
index 62138897..fc2e8380 100644
--- a/web/admin-spa/src/views/LoginView.vue
+++ b/web/admin-spa/src/views/LoginView.vue
@@ -5,9 +5,11 @@
       <ThemeToggle mode="dropdown" />
     </div>
 
-    <div
-      class="glass-strong w-full max-w-md rounded-xl p-6 shadow-2xl sm:rounded-2xl sm:p-8 md:rounded-3xl md:p-10"
-    >
+    <div class="flex w-full max-w-4xl flex-col items-center gap-6 lg:flex-row lg:items-start">
+      <!-- 登录卡片 -->
+      <div
+        class="glass-strong w-full max-w-md rounded-xl p-6 shadow-2xl sm:rounded-2xl sm:p-8 md:rounded-3xl md:p-10"
+      >
       <div class="mb-6 text-center sm:mb-8">
         <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
         <div
@@ -92,6 +94,15 @@
         <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
       </div>
     </div>
+
+      <!-- 公开统计概览 -->
+      <div
+        v-if="authStore.oemSettings.publicStatsEnabled && authStore.publicStats"
+        class="w-full max-w-md lg:max-w-sm"
+      >
+        <PublicStatsOverview />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -100,6 +111,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useThemeStore } from '@/stores/theme'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
+import PublicStatsOverview from '@/components/common/PublicStatsOverview.vue'
 
 const authStore = useAuthStore()
 const themeStore = useThemeStore()
diff --git a/web/admin-spa/src/views/SettingsView.vue b/web/admin-spa/src/views/SettingsView.vue
index b9b260a2..0806302c 100644
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -194,6 +194,45 @@
                   </td>
                 </tr>
 
+                <!-- 公开统计概览 -->
+                <tr class="table-row">
+                  <td class="w-48 whitespace-nowrap px-6 py-4">
+                    <div class="flex items-center">
+                      <div
+                        class="mr-3 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600"
+                      >
+                        <i class="fas fa-chart-bar text-xs text-white" />
+                      </div>
+                      <div>
+                        <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                          公开统计
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">登录页展示</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="flex items-center">
+                      <label class="inline-flex cursor-pointer items-center">
+                        <input
+                          v-model="oemSettings.publicStatsEnabled"
+                          class="peer sr-only"
+                          type="checkbox"
+                        />
+                        <div
+                          class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"
+                        ></div>
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
+                          oemSettings.publicStatsEnabled ? '显示统计概览' : '隐藏统计概览'
+                        }}</span>
+                      </label>
+                    </div>
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                      启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
+                    </p>
+                  </td>
+                </tr>
+
                 <!-- 操作按钮 -->
                 <tr>
                   <td class="px-6 py-6" colspan="2">
@@ -346,6 +385,39 @@
               </div>
             </div>
 
+            <!-- 公开统计卡片 -->
+            <div class="glass-card p-4">
+              <div class="mb-3 flex items-center gap-3">
+                <div
+                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md"
+                >
+                  <i class="fas fa-chart-bar"></i>
+                </div>
+                <div>
+                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">公开统计</h3>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">在登录页展示统计概览</p>
+                </div>
+              </div>
+              <div class="space-y-2">
+                <label class="inline-flex cursor-pointer items-center">
+                  <input
+                    v-model="oemSettings.publicStatsEnabled"
+                    class="peer sr-only"
+                    type="checkbox"
+                  />
+                  <div
+                    class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"
+                  ></div>
+                  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
+                    oemSettings.publicStatsEnabled ? '显示统计概览' : '隐藏统计概览'
+                  }}</span>
+                </label>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
+                </p>
+              </div>
+            </div>
+
             <!-- 操作按钮卡片 -->
             <div class="glass-card p-4">
               <div class="flex flex-col gap-3">
@@ -2467,7 +2539,8 @@ const saveOemSettings = async () => {
       siteName: oemSettings.value.siteName,
       siteIcon: oemSettings.value.siteIcon,
       siteIconData: oemSettings.value.siteIconData,
-      showAdminButton: oemSettings.value.showAdminButton
+      showAdminButton: oemSettings.value.showAdminButton,
+      publicStatsEnabled: oemSettings.value.publicStatsEnabled
     }
     const result = await settingsStore.saveOemSettings(settings)
     if (result && result.success) {

From ab474c33226f73c3c256260cef508c14d2727a20 Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 17:30:00 +0000
Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E5=B0=86=E5=85=AC=E5=BC=80?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=A6=82=E8=A7=88=E7=A7=BB=E8=87=B3=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=8A=B6=E6=80=81=E6=A6=82=E8=A7=88=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在首页添加"状态概览"标签，作为默认显示页面
- 修复 PublicStatsOverview.vue 属性顺序 lint 错误
- 修复 LoginView.vue prettier 格式问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/common/PublicStatsOverview.vue |   2 +-
 web/admin-spa/src/views/ApiStatsView.vue      |  38 ++++-
 web/admin-spa/src/views/LoginView.vue         | 158 +++++++++---------
 3 files changed, 115 insertions(+), 83 deletions(-)

diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index 81a52042..cee9665c 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -27,7 +27,7 @@
         class="platform-badge"
         :class="{ available: available, unavailable: !available }"
       >
-        <i :class="getPlatformIcon(platform)" class="mr-1"></i>
+        <i class="mr-1" :class="getPlatformIcon(platform)"></i>
         <span>{{ getPlatformName(platform) }}</span>
       </div>
     </div>
diff --git a/web/admin-spa/src/views/ApiStatsView.vue b/web/admin-spa/src/views/ApiStatsView.vue
index c5b0d51a..306e194e 100644
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -6,7 +6,13 @@
         <LogoTitle
           :loading="oemLoading"
           :logo-src="oemSettings.siteIconData || oemSettings.siteIcon"
-          :subtitle="currentTab === 'stats' ? 'API Key 使用统计' : '使用教程'"
+          :subtitle="
+            currentTab === 'stats'
+              ? 'API Key 使用统计'
+              : currentTab === 'overview'
+                ? '服务状态概览'
+                : '使用教程'
+          "
           :title="oemSettings.siteName"
         />
         <div class="flex items-center gap-2 md:gap-4">
@@ -49,6 +55,13 @@
         <div
           class="inline-flex w-full max-w-md rounded-full border border-white/20 bg-white/10 p-1 shadow-lg backdrop-blur-xl md:w-auto"
         >
+          <button
+            :class="['tab-pill-button', currentTab === 'overview' ? 'active' : '']"
+            @click="switchToOverview"
+          >
+            <i class="fas fa-tachometer-alt mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">状态概览</span>
+          </button>
           <button
             :class="['tab-pill-button', currentTab === 'stats' ? 'active' : '']"
             @click="currentTab = 'stats'"
@@ -67,6 +80,13 @@
       </div>
     </div>
 
+    <!-- 状态概览内容 -->
+    <div v-if="currentTab === 'overview'" class="tab-content">
+      <div class="mx-auto max-w-2xl">
+        <PublicStatsOverview />
+      </div>
+    </div>
+
     <!-- 统计内容 -->
     <div v-if="currentTab === 'stats'" class="tab-content">
       <!-- API Key 输入区域 -->
@@ -174,6 +194,7 @@ import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useApiStatsStore } from '@/stores/apistats'
 import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
 import LogoTitle from '@/components/common/LogoTitle.vue'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
 import ApiKeyInput from '@/components/apistats/ApiKeyInput.vue'
@@ -184,13 +205,15 @@ import AggregatedStatsCard from '@/components/apistats/AggregatedStatsCard.vue'
 import ModelUsageStats from '@/components/apistats/ModelUsageStats.vue'
 import TutorialView from './TutorialView.vue'
 import ApiKeyTestModal from '@/components/apikeys/ApiKeyTestModal.vue'
+import PublicStatsOverview from '@/components/common/PublicStatsOverview.vue'
 
 const route = useRoute()
 const apiStatsStore = useApiStatsStore()
 const themeStore = useThemeStore()
+const authStore = useAuthStore()
 
-// 当前标签页
-const currentTab = ref('stats')
+// 当前标签页 - 默认显示状态概览
+const currentTab = ref('overview')
 
 // 主题相关
 const isDarkMode = computed(() => themeStore.isDarkMode)
@@ -223,6 +246,12 @@ const closeTestModal = () => {
   showTestModal.value = false
 }
 
+// 切换到状态概览并加载数据
+const switchToOverview = () => {
+  currentTab.value = 'overview'
+  authStore.loadPublicStats()
+}
+
 // 处理键盘快捷键
 const handleKeyDown = (event) => {
   // Ctrl/Cmd + Enter 查询
@@ -249,6 +278,9 @@ onMounted(() => {
   // 加载 OEM 设置
   loadOemSettings()
 
+  // 默认加载公开统计数据
+  authStore.loadPublicStats()
+
   // 检查 URL 参数
   const urlApiId = route.query.apiId
   const urlApiKey = route.query.apiKey
diff --git a/web/admin-spa/src/views/LoginView.vue b/web/admin-spa/src/views/LoginView.vue
index fc2e8380..4a26653f 100644
--- a/web/admin-spa/src/views/LoginView.vue
+++ b/web/admin-spa/src/views/LoginView.vue
@@ -10,90 +10,90 @@
       <div
         class="glass-strong w-full max-w-md rounded-xl p-6 shadow-2xl sm:rounded-2xl sm:p-8 md:rounded-3xl md:p-10"
       >
-      <div class="mb-6 text-center sm:mb-8">
-        <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
-        <div
-          class="mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-gray-300/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm sm:mb-6 sm:h-20 sm:w-20 sm:rounded-2xl"
-        >
-          <template v-if="!oemLoading">
-            <img
-              v-if="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
-              alt="Logo"
-              class="h-10 w-10 object-contain sm:h-12 sm:w-12"
-              :src="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
-              @error="(e) => (e.target.style.display = 'none')"
-            />
-            <i v-else class="fas fa-cloud text-2xl text-gray-700 sm:text-3xl" />
+        <div class="mb-6 text-center sm:mb-8">
+          <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
+          <div
+            class="mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-gray-300/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm sm:mb-6 sm:h-20 sm:w-20 sm:rounded-2xl"
+          >
+            <template v-if="!oemLoading">
+              <img
+                v-if="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
+                alt="Logo"
+                class="h-10 w-10 object-contain sm:h-12 sm:w-12"
+                :src="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
+                @error="(e) => (e.target.style.display = 'none')"
+              />
+              <i v-else class="fas fa-cloud text-2xl text-gray-700 sm:text-3xl" />
+            </template>
+            <div v-else class="h-10 w-10 animate-pulse rounded bg-gray-300/50 sm:h-12 sm:w-12" />
+          </div>
+          <template v-if="!oemLoading && authStore.oemSettings.siteName">
+            <h1 class="header-title mb-2 text-2xl font-bold text-white sm:text-3xl">
+              {{ authStore.oemSettings.siteName }}
+            </h1>
           </template>
-          <div v-else class="h-10 w-10 animate-pulse rounded bg-gray-300/50 sm:h-12 sm:w-12" />
+          <div
+            v-else-if="oemLoading"
+            class="mx-auto mb-2 h-8 w-48 animate-pulse rounded bg-gray-300/50 sm:h-9 sm:w-64"
+          />
+          <p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">管理后台</p>
         </div>
-        <template v-if="!oemLoading && authStore.oemSettings.siteName">
-          <h1 class="header-title mb-2 text-2xl font-bold text-white sm:text-3xl">
-            {{ authStore.oemSettings.siteName }}
-          </h1>
-        </template>
+
+        <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
+          <div>
+            <label
+              class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+              for="username"
+              >用户名</label
+            >
+            <input
+              id="username"
+              v-model="loginForm.username"
+              autocomplete="username"
+              class="form-input w-full"
+              name="username"
+              placeholder="请输入用户名"
+              required
+              type="text"
+            />
+          </div>
+
+          <div>
+            <label
+              class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+              for="password"
+              >密码</label
+            >
+            <input
+              id="password"
+              v-model="loginForm.password"
+              autocomplete="current-password"
+              class="form-input w-full"
+              name="password"
+              placeholder="请输入密码"
+              required
+              type="password"
+            />
+          </div>
+
+          <button
+            class="btn btn-primary w-full px-4 py-3 text-base font-semibold sm:px-6 sm:py-4 sm:text-lg"
+            :disabled="authStore.loginLoading"
+            type="submit"
+          >
+            <i v-if="!authStore.loginLoading" class="fas fa-sign-in-alt mr-2" />
+            <div v-if="authStore.loginLoading" class="loading-spinner mr-2" />
+            {{ authStore.loginLoading ? '登录中...' : '登录' }}
+          </button>
+        </form>
+
         <div
-          v-else-if="oemLoading"
-          class="mx-auto mb-2 h-8 w-48 animate-pulse rounded bg-gray-300/50 sm:h-9 sm:w-64"
-        />
-        <p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">管理后台</p>
-      </div>
-
-      <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
-        <div>
-          <label
-            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
-            for="username"
-            >用户名</label
-          >
-          <input
-            id="username"
-            v-model="loginForm.username"
-            autocomplete="username"
-            class="form-input w-full"
-            name="username"
-            placeholder="请输入用户名"
-            required
-            type="text"
-          />
-        </div>
-
-        <div>
-          <label
-            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
-            for="password"
-            >密码</label
-          >
-          <input
-            id="password"
-            v-model="loginForm.password"
-            autocomplete="current-password"
-            class="form-input w-full"
-            name="password"
-            placeholder="请输入密码"
-            required
-            type="password"
-          />
-        </div>
-
-        <button
-          class="btn btn-primary w-full px-4 py-3 text-base font-semibold sm:px-6 sm:py-4 sm:text-lg"
-          :disabled="authStore.loginLoading"
-          type="submit"
+          v-if="authStore.loginError"
+          class="mt-4 rounded-lg border border-red-500/30 bg-red-500/20 p-3 text-center text-xs text-red-800 backdrop-blur-sm dark:text-red-400 sm:mt-6 sm:rounded-xl sm:p-4 sm:text-sm"
         >
-          <i v-if="!authStore.loginLoading" class="fas fa-sign-in-alt mr-2" />
-          <div v-if="authStore.loginLoading" class="loading-spinner mr-2" />
-          {{ authStore.loginLoading ? '登录中...' : '登录' }}
-        </button>
-      </form>
-
-      <div
-        v-if="authStore.loginError"
-        class="mt-4 rounded-lg border border-red-500/30 bg-red-500/20 p-3 text-center text-xs text-red-800 backdrop-blur-sm dark:text-red-400 sm:mt-6 sm:rounded-xl sm:p-4 sm:text-sm"
-      >
-        <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
+          <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
+        </div>
       </div>
-    </div>
 
       <!-- 公开统计概览 -->
       <div

From 0c1bdf53d6f9dd26c6f8e0c91c832a191e9ddad2 Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 17:42:14 +0000
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=E4=B8=B0=E5=AF=8C=E5=85=AC?=
 =?UTF-8?q?=E5=BC=80=E7=BB=9F=E8=AE=A1=E6=A6=82=E8=A7=88=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=8F=AF=E9=80=89=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端：添加 OEM 设置选项控制公开统计显示内容
  - publicStatsShowModelDistribution: 模型使用分布
  - publicStatsShowTokenTrends: Token 使用趋势（近7天）
  - publicStatsShowApiKeysTrends: API Keys 活跃趋势（近7天）
  - publicStatsShowAccountTrends: 账号活跃趋势（近7天）
- 后端：扩展 /admin/public-stats API 返回趋势数据
- 前端：PublicStatsOverview 组件支持显示趋势柱状图
- 前端：设置页面添加公开统计选项复选框
- 前端：从登录页移除公开统计概览（已移至首页）

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/admin/system.js                    | 176 +++++++++++++++++-
 .../components/common/PublicStatsOverview.vue | 158 +++++++++++++++-
 web/admin-spa/src/views/LoginView.vue         | 169 ++++++++---------
 web/admin-spa/src/views/SettingsView.vue      | 100 +++++++++-
 4 files changed, 505 insertions(+), 98 deletions(-)

diff --git a/src/routes/admin/system.js b/src/routes/admin/system.js
index 6f8e2382..96afd6f5 100644
--- a/src/routes/admin/system.js
+++ b/src/routes/admin/system.js
@@ -265,6 +265,11 @@ const defaultOemSettings = {
   siteIconData: '', // Base64编码的图标数据
   showAdminButton: true, // 是否显示管理后台按钮
   publicStatsEnabled: false, // 是否在首页显示公开统计概览
+  // 公开统计显示选项
+  publicStatsShowModelDistribution: true, // 显示模型使用分布
+  publicStatsShowTokenTrends: false, // 显示Token使用趋势
+  publicStatsShowApiKeysTrends: false, // 显示API Keys使用趋势
+  publicStatsShowAccountTrends: false, // 显示账号使用趋势
   updatedAt: new Date().toISOString()
 }
 
@@ -307,7 +312,17 @@ router.get('/oem-settings', async (req, res) => {
 // 更新OEM设置
 router.put('/oem-settings', authenticateAdmin, async (req, res) => {
   try {
-    const { siteName, siteIcon, siteIconData, showAdminButton, publicStatsEnabled } = req.body
+    const {
+      siteName,
+      siteIcon,
+      siteIconData,
+      showAdminButton,
+      publicStatsEnabled,
+      publicStatsShowModelDistribution,
+      publicStatsShowTokenTrends,
+      publicStatsShowApiKeysTrends,
+      publicStatsShowAccountTrends
+    } = req.body
 
     // 验证输入
     if (!siteName || typeof siteName !== 'string' || siteName.trim().length === 0) {
@@ -340,6 +355,11 @@ router.put('/oem-settings', authenticateAdmin, async (req, res) => {
       siteIconData: (siteIconData || '').trim(), // Base64数据
       showAdminButton: showAdminButton !== false, // 默认为true
       publicStatsEnabled: publicStatsEnabled === true, // 默认为false
+      // 公开统计显示选项
+      publicStatsShowModelDistribution: publicStatsShowModelDistribution !== false, // 默认为true
+      publicStatsShowTokenTrends: publicStatsShowTokenTrends === true, // 默认为false
+      publicStatsShowApiKeysTrends: publicStatsShowApiKeysTrends === true, // 默认为false
+      publicStatsShowAccountTrends: publicStatsShowAccountTrends === true, // 默认为false
       updatedAt: new Date().toISOString()
     }
 
@@ -534,11 +554,39 @@ router.get('/public-stats', async (req, res) => {
         outputTokens: todayStats.outputTokensToday || 0
       },
 
-      // 模型使用分布（只返回模型名和请求占比，不返回具体数量）
-      modelDistribution: modelStats,
-
       // 系统时区
-      systemTimezone: config.system.timezoneOffset || 8
+      systemTimezone: config.system.timezoneOffset || 8,
+
+      // 显示选项
+      showOptions: {
+        modelDistribution: settings.publicStatsShowModelDistribution !== false,
+        tokenTrends: settings.publicStatsShowTokenTrends === true,
+        apiKeysTrends: settings.publicStatsShowApiKeysTrends === true,
+        accountTrends: settings.publicStatsShowAccountTrends === true
+      }
+    }
+
+    // 根据设置添加可选数据
+    if (settings.publicStatsShowModelDistribution !== false) {
+      publicStats.modelDistribution = modelStats
+    }
+
+    // 获取趋势数据（最近7天）
+    if (
+      settings.publicStatsShowTokenTrends ||
+      settings.publicStatsShowApiKeysTrends ||
+      settings.publicStatsShowAccountTrends
+    ) {
+      const trendData = await getPublicTrendData(settings)
+      if (settings.publicStatsShowTokenTrends && trendData.tokenTrends) {
+        publicStats.tokenTrends = trendData.tokenTrends
+      }
+      if (settings.publicStatsShowApiKeysTrends && trendData.apiKeysTrends) {
+        publicStats.apiKeysTrends = trendData.apiKeysTrends
+      }
+      if (settings.publicStatsShowAccountTrends && trendData.accountTrends) {
+        publicStats.accountTrends = trendData.accountTrends
+      }
     }
 
     return res.json({
@@ -620,4 +668,122 @@ async function getPublicModelStats() {
   }
 }
 
+// 获取公开趋势数据的辅助函数（最近7天）
+async function getPublicTrendData(settings) {
+  const result = {
+    tokenTrends: null,
+    apiKeysTrends: null,
+    accountTrends: null
+  }
+
+  try {
+    const client = redis.getClientSafe()
+    const days = 7
+
+    // 生成最近7天的日期列表
+    const dates = []
+    for (let i = days - 1; i >= 0; i--) {
+      const date = new Date()
+      date.setDate(date.getDate() - i)
+      dates.push(redis.getDateStringInTimezone(date))
+    }
+
+    // Token使用趋势
+    if (settings.publicStatsShowTokenTrends) {
+      const tokenTrends = []
+      for (const dateStr of dates) {
+        const pattern = `usage:model:daily:*:${dateStr}`
+        const keys = await client.keys(pattern)
+
+        let dayTokens = 0
+        let dayRequests = 0
+        for (const key of keys) {
+          const data = await client.hgetall(key)
+          if (data) {
+            dayTokens += (parseInt(data.inputTokens) || 0) + (parseInt(data.outputTokens) || 0)
+            dayRequests += parseInt(data.requests) || 0
+          }
+        }
+
+        tokenTrends.push({
+          date: dateStr,
+          tokens: dayTokens,
+          requests: dayRequests
+        })
+      }
+      result.tokenTrends = tokenTrends
+    }
+
+    // API Keys使用趋势（脱敏：只显示总数，不显示具体Key）
+    if (settings.publicStatsShowApiKeysTrends) {
+      const apiKeysTrends = []
+      for (const dateStr of dates) {
+        const pattern = `usage:apikey:daily:*:${dateStr}`
+        const keys = await client.keys(pattern)
+
+        let dayRequests = 0
+        let dayTokens = 0
+        let activeKeys = 0
+
+        for (const key of keys) {
+          const data = await client.hgetall(key)
+          if (data) {
+            const requests = parseInt(data.requests) || 0
+            if (requests > 0) {
+              activeKeys++
+              dayRequests += requests
+              dayTokens += (parseInt(data.inputTokens) || 0) + (parseInt(data.outputTokens) || 0)
+            }
+          }
+        }
+
+        apiKeysTrends.push({
+          date: dateStr,
+          activeKeys,
+          requests: dayRequests,
+          tokens: dayTokens
+        })
+      }
+      result.apiKeysTrends = apiKeysTrends
+    }
+
+    // 账号使用趋势（脱敏：只显示总数，不显示具体账号）
+    if (settings.publicStatsShowAccountTrends) {
+      const accountTrends = []
+      for (const dateStr of dates) {
+        const pattern = `usage:account:daily:*:${dateStr}`
+        const keys = await client.keys(pattern)
+
+        let dayRequests = 0
+        let dayTokens = 0
+        let activeAccounts = 0
+
+        for (const key of keys) {
+          const data = await client.hgetall(key)
+          if (data) {
+            const requests = parseInt(data.requests) || 0
+            if (requests > 0) {
+              activeAccounts++
+              dayRequests += requests
+              dayTokens += (parseInt(data.inputTokens) || 0) + (parseInt(data.outputTokens) || 0)
+            }
+          }
+        }
+
+        accountTrends.push({
+          date: dateStr,
+          activeAccounts,
+          requests: dayRequests,
+          tokens: dayTokens
+        })
+      }
+      result.accountTrends = accountTrends
+    }
+  } catch (error) {
+    logger.warn('⚠️ Failed to get public trend data:', error.message)
+  }
+
+  return result
+}
+
 module.exports = router
diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index cee9665c..5f3277fa 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -45,8 +45,14 @@
     </div>
 
     <!-- 模型使用分布 -->
-    <div v-if="authStore.publicStats.modelDistribution?.length > 0" class="mt-4">
-      <div class="mb-2 text-center text-xs text-gray-600 dark:text-gray-400">模型使用分布</div>
+    <div
+      v-if="
+        authStore.publicStats.showOptions?.modelDistribution &&
+        authStore.publicStats.modelDistribution?.length > 0
+      "
+      class="mt-4"
+    >
+      <div class="section-title">模型使用分布</div>
       <div class="model-distribution">
         <div
           v-for="model in authStore.publicStats.modelDistribution"
@@ -61,6 +67,80 @@
         </div>
       </div>
     </div>
+
+    <!-- Token使用趋势 -->
+    <div
+      v-if="
+        authStore.publicStats.showOptions?.tokenTrends && authStore.publicStats.tokenTrends?.length
+      "
+      class="mt-4"
+    >
+      <div class="section-title">Token 使用趋势（近7天）</div>
+      <div class="trend-chart">
+        <div
+          v-for="(item, index) in authStore.publicStats.tokenTrends"
+          :key="index"
+          class="trend-bar-wrapper"
+        >
+          <div
+            class="trend-bar trend-bar-tokens"
+            :style="{ height: `${getTrendBarHeight(item.tokens, 'tokens')}%` }"
+            :title="`${formatDate(item.date)}: ${formatTokens(item.tokens)} tokens`"
+          ></div>
+          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- API Keys 使用趋势 -->
+    <div
+      v-if="
+        authStore.publicStats.showOptions?.apiKeysTrends &&
+        authStore.publicStats.apiKeysTrends?.length
+      "
+      class="mt-4"
+    >
+      <div class="section-title">API Keys 活跃趋势（近7天）</div>
+      <div class="trend-chart">
+        <div
+          v-for="(item, index) in authStore.publicStats.apiKeysTrends"
+          :key="index"
+          class="trend-bar-wrapper"
+        >
+          <div
+            class="trend-bar trend-bar-keys"
+            :style="{ height: `${getTrendBarHeight(item.activeKeys, 'apiKeys')}%` }"
+            :title="`${formatDate(item.date)}: ${item.activeKeys} 个活跃 Key`"
+          ></div>
+          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 账号使用趋势 -->
+    <div
+      v-if="
+        authStore.publicStats.showOptions?.accountTrends &&
+        authStore.publicStats.accountTrends?.length
+      "
+      class="mt-4"
+    >
+      <div class="section-title">账号活跃趋势（近7天）</div>
+      <div class="trend-chart">
+        <div
+          v-for="(item, index) in authStore.publicStats.accountTrends"
+          :key="index"
+          class="trend-bar-wrapper"
+        >
+          <div
+            class="trend-bar trend-bar-accounts"
+            :style="{ height: `${getTrendBarHeight(item.activeAccounts, 'accounts')}%` }"
+            :title="`${formatDate(item.date)}: ${item.activeAccounts} 个活跃账号`"
+          ></div>
+          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <!-- 加载状态 -->
@@ -70,6 +150,7 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
@@ -143,6 +224,44 @@ function formatModelName(model) {
   }
   return model
 }
+
+// 格式化日期
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  const parts = dateStr.split('-')
+  if (parts.length === 3) {
+    return `${parts[1]}月${parts[2]}日`
+  }
+  return dateStr
+}
+
+// 格式化日期（短格式）
+function formatDateShort(dateStr) {
+  if (!dateStr) return ''
+  const parts = dateStr.split('-')
+  if (parts.length === 3) {
+    return `${parts[1]}/${parts[2]}`
+  }
+  return dateStr
+}
+
+// 计算趋势图柱高度
+const maxValues = computed(() => {
+  const stats = authStore.publicStats
+  if (!stats) return { tokens: 1, apiKeys: 1, accounts: 1 }
+
+  return {
+    tokens: Math.max(...(stats.tokenTrends?.map((t) => t.tokens) || [1]), 1),
+    apiKeys: Math.max(...(stats.apiKeysTrends?.map((t) => t.activeKeys) || [1]), 1),
+    accounts: Math.max(...(stats.accountTrends?.map((t) => t.activeAccounts) || [1]), 1)
+  }
+})
+
+function getTrendBarHeight(value, type) {
+  const max = maxValues.value[type] || 1
+  const height = (value / max) * 100
+  return Math.max(height, 5) // 最小高度5%
+}
 </script>
 
 <style scoped>
@@ -162,6 +281,11 @@ function formatModelName(model) {
   }
 }
 
+/* 章节标题 */
+.section-title {
+  @apply mb-2 text-center text-xs text-gray-600 dark:text-gray-400;
+}
+
 /* 状态徽章 */
 .status-badge {
   @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
@@ -255,6 +379,36 @@ function formatModelName(model) {
   @apply w-10 text-right text-gray-500 dark:text-gray-400;
 }
 
+/* 趋势图表 */
+.trend-chart {
+  @apply flex h-24 items-end justify-between gap-1 rounded-lg bg-gray-50 p-2 dark:bg-gray-700/50;
+}
+
+.trend-bar-wrapper {
+  @apply flex flex-1 flex-col items-center;
+}
+
+.trend-bar {
+  @apply w-full max-w-8 rounded-t transition-all duration-300;
+  min-height: 4px;
+}
+
+.trend-bar-tokens {
+  @apply bg-gradient-to-t from-blue-500 to-blue-400;
+}
+
+.trend-bar-keys {
+  @apply bg-gradient-to-t from-green-500 to-green-400;
+}
+
+.trend-bar-accounts {
+  @apply bg-gradient-to-t from-purple-500 to-purple-400;
+}
+
+.trend-label {
+  @apply mt-1 text-center text-[10px] text-gray-500 dark:text-gray-400;
+}
+
 /* 加载状态 */
 .public-stats-loading {
   @apply flex items-center justify-center py-8;
diff --git a/web/admin-spa/src/views/LoginView.vue b/web/admin-spa/src/views/LoginView.vue
index 4a26653f..0ec84e78 100644
--- a/web/admin-spa/src/views/LoginView.vue
+++ b/web/admin-spa/src/views/LoginView.vue
@@ -5,102 +5,92 @@
       <ThemeToggle mode="dropdown" />
     </div>
 
-    <div class="flex w-full max-w-4xl flex-col items-center gap-6 lg:flex-row lg:items-start">
-      <!-- 登录卡片 -->
-      <div
-        class="glass-strong w-full max-w-md rounded-xl p-6 shadow-2xl sm:rounded-2xl sm:p-8 md:rounded-3xl md:p-10"
-      >
-        <div class="mb-6 text-center sm:mb-8">
-          <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
-          <div
-            class="mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-gray-300/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm sm:mb-6 sm:h-20 sm:w-20 sm:rounded-2xl"
-          >
-            <template v-if="!oemLoading">
-              <img
-                v-if="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
-                alt="Logo"
-                class="h-10 w-10 object-contain sm:h-12 sm:w-12"
-                :src="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
-                @error="(e) => (e.target.style.display = 'none')"
-              />
-              <i v-else class="fas fa-cloud text-2xl text-gray-700 sm:text-3xl" />
-            </template>
-            <div v-else class="h-10 w-10 animate-pulse rounded bg-gray-300/50 sm:h-12 sm:w-12" />
-          </div>
-          <template v-if="!oemLoading && authStore.oemSettings.siteName">
-            <h1 class="header-title mb-2 text-2xl font-bold text-white sm:text-3xl">
-              {{ authStore.oemSettings.siteName }}
-            </h1>
-          </template>
-          <div
-            v-else-if="oemLoading"
-            class="mx-auto mb-2 h-8 w-48 animate-pulse rounded bg-gray-300/50 sm:h-9 sm:w-64"
-          />
-          <p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">管理后台</p>
-        </div>
-
-        <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
-          <div>
-            <label
-              class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
-              for="username"
-              >用户名</label
-            >
-            <input
-              id="username"
-              v-model="loginForm.username"
-              autocomplete="username"
-              class="form-input w-full"
-              name="username"
-              placeholder="请输入用户名"
-              required
-              type="text"
-            />
-          </div>
-
-          <div>
-            <label
-              class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
-              for="password"
-              >密码</label
-            >
-            <input
-              id="password"
-              v-model="loginForm.password"
-              autocomplete="current-password"
-              class="form-input w-full"
-              name="password"
-              placeholder="请输入密码"
-              required
-              type="password"
-            />
-          </div>
-
-          <button
-            class="btn btn-primary w-full px-4 py-3 text-base font-semibold sm:px-6 sm:py-4 sm:text-lg"
-            :disabled="authStore.loginLoading"
-            type="submit"
-          >
-            <i v-if="!authStore.loginLoading" class="fas fa-sign-in-alt mr-2" />
-            <div v-if="authStore.loginLoading" class="loading-spinner mr-2" />
-            {{ authStore.loginLoading ? '登录中...' : '登录' }}
-          </button>
-        </form>
-
+    <!-- 登录卡片 -->
+    <div
+      class="glass-strong w-full max-w-md rounded-xl p-6 shadow-2xl sm:rounded-2xl sm:p-8 md:rounded-3xl md:p-10"
+    >
+      <div class="mb-6 text-center sm:mb-8">
+        <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
         <div
-          v-if="authStore.loginError"
-          class="mt-4 rounded-lg border border-red-500/30 bg-red-500/20 p-3 text-center text-xs text-red-800 backdrop-blur-sm dark:text-red-400 sm:mt-6 sm:rounded-xl sm:p-4 sm:text-sm"
+          class="mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-gray-300/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm sm:mb-6 sm:h-20 sm:w-20 sm:rounded-2xl"
         >
-          <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
+          <template v-if="!oemLoading">
+            <img
+              v-if="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
+              alt="Logo"
+              class="h-10 w-10 object-contain sm:h-12 sm:w-12"
+              :src="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon"
+              @error="(e) => (e.target.style.display = 'none')"
+            />
+            <i v-else class="fas fa-cloud text-2xl text-gray-700 sm:text-3xl" />
+          </template>
+          <div v-else class="h-10 w-10 animate-pulse rounded bg-gray-300/50 sm:h-12 sm:w-12" />
         </div>
+        <template v-if="!oemLoading && authStore.oemSettings.siteName">
+          <h1 class="header-title mb-2 text-2xl font-bold text-white sm:text-3xl">
+            {{ authStore.oemSettings.siteName }}
+          </h1>
+        </template>
+        <div
+          v-else-if="oemLoading"
+          class="mx-auto mb-2 h-8 w-48 animate-pulse rounded bg-gray-300/50 sm:h-9 sm:w-64"
+        />
+        <p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">管理后台</p>
       </div>
 
-      <!-- 公开统计概览 -->
+      <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
+        <div>
+          <label
+            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+            for="username"
+            >用户名</label
+          >
+          <input
+            id="username"
+            v-model="loginForm.username"
+            autocomplete="username"
+            class="form-input w-full"
+            name="username"
+            placeholder="请输入用户名"
+            required
+            type="text"
+          />
+        </div>
+
+        <div>
+          <label
+            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+            for="password"
+            >密码</label
+          >
+          <input
+            id="password"
+            v-model="loginForm.password"
+            autocomplete="current-password"
+            class="form-input w-full"
+            name="password"
+            placeholder="请输入密码"
+            required
+            type="password"
+          />
+        </div>
+
+        <button
+          class="btn btn-primary w-full px-4 py-3 text-base font-semibold sm:px-6 sm:py-4 sm:text-lg"
+          :disabled="authStore.loginLoading"
+          type="submit"
+        >
+          <i v-if="!authStore.loginLoading" class="fas fa-sign-in-alt mr-2" />
+          <div v-if="authStore.loginLoading" class="loading-spinner mr-2" />
+          {{ authStore.loginLoading ? '登录中...' : '登录' }}
+        </button>
+      </form>
+
       <div
-        v-if="authStore.oemSettings.publicStatsEnabled && authStore.publicStats"
-        class="w-full max-w-md lg:max-w-sm"
+        v-if="authStore.loginError"
+        class="mt-4 rounded-lg border border-red-500/30 bg-red-500/20 p-3 text-center text-xs text-red-800 backdrop-blur-sm dark:text-red-400 sm:mt-6 sm:rounded-xl sm:p-4 sm:text-sm"
       >
-        <PublicStatsOverview />
+        <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
       </div>
     </div>
   </div>
@@ -111,7 +101,6 @@ import { ref, onMounted, computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useThemeStore } from '@/stores/theme'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
-import PublicStatsOverview from '@/components/common/PublicStatsOverview.vue'
 
 const authStore = useAuthStore()
 const themeStore = useThemeStore()
diff --git a/web/admin-spa/src/views/SettingsView.vue b/web/admin-spa/src/views/SettingsView.vue
index 0806302c..0e589fa1 100644
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -230,6 +230,53 @@
                     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                       启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
                     </p>
+                    <!-- 公开统计显示选项 -->
+                    <div
+                      v-if="oemSettings.publicStatsEnabled"
+                      class="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700/50"
+                    >
+                      <p class="text-xs font-medium text-gray-700 dark:text-gray-300">
+                        选择要公开显示的数据：
+                      </p>
+                      <label class="flex items-center gap-2">
+                        <input
+                          v-model="oemSettings.publicStatsShowModelDistribution"
+                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                          type="checkbox"
+                        />
+                        <span class="text-sm text-gray-700 dark:text-gray-300">模型使用分布</span>
+                      </label>
+                      <label class="flex items-center gap-2">
+                        <input
+                          v-model="oemSettings.publicStatsShowTokenTrends"
+                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                          type="checkbox"
+                        />
+                        <span class="text-sm text-gray-700 dark:text-gray-300"
+                          >Token 使用趋势（近7天）</span
+                        >
+                      </label>
+                      <label class="flex items-center gap-2">
+                        <input
+                          v-model="oemSettings.publicStatsShowApiKeysTrends"
+                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                          type="checkbox"
+                        />
+                        <span class="text-sm text-gray-700 dark:text-gray-300"
+                          >API Keys 活跃趋势（近7天）</span
+                        >
+                      </label>
+                      <label class="flex items-center gap-2">
+                        <input
+                          v-model="oemSettings.publicStatsShowAccountTrends"
+                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                          type="checkbox"
+                        />
+                        <span class="text-sm text-gray-700 dark:text-gray-300"
+                          >账号活跃趋势（近7天）</span
+                        >
+                      </label>
+                    </div>
                   </td>
                 </tr>
 
@@ -415,6 +462,53 @@
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                   启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
                 </p>
+                <!-- 公开统计显示选项 (移动端) -->
+                <div
+                  v-if="oemSettings.publicStatsEnabled"
+                  class="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-700/50"
+                >
+                  <p class="text-xs font-medium text-gray-700 dark:text-gray-300">
+                    选择要公开显示的数据：
+                  </p>
+                  <label class="flex items-center gap-2">
+                    <input
+                      v-model="oemSettings.publicStatsShowModelDistribution"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="checkbox"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300">模型使用分布</span>
+                  </label>
+                  <label class="flex items-center gap-2">
+                    <input
+                      v-model="oemSettings.publicStatsShowTokenTrends"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="checkbox"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >Token 使用趋势（近7天）</span
+                    >
+                  </label>
+                  <label class="flex items-center gap-2">
+                    <input
+                      v-model="oemSettings.publicStatsShowApiKeysTrends"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="checkbox"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >API Keys 活跃趋势（近7天）</span
+                    >
+                  </label>
+                  <label class="flex items-center gap-2">
+                    <input
+                      v-model="oemSettings.publicStatsShowAccountTrends"
+                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="checkbox"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >账号活跃趋势（近7天）</span
+                    >
+                  </label>
+                </div>
               </div>
             </div>
 
@@ -2540,7 +2634,11 @@ const saveOemSettings = async () => {
       siteIcon: oemSettings.value.siteIcon,
       siteIconData: oemSettings.value.siteIconData,
       showAdminButton: oemSettings.value.showAdminButton,
-      publicStatsEnabled: oemSettings.value.publicStatsEnabled
+      publicStatsEnabled: oemSettings.value.publicStatsEnabled,
+      publicStatsShowModelDistribution: oemSettings.value.publicStatsShowModelDistribution,
+      publicStatsShowTokenTrends: oemSettings.value.publicStatsShowTokenTrends,
+      publicStatsShowApiKeysTrends: oemSettings.value.publicStatsShowApiKeysTrends,
+      publicStatsShowAccountTrends: oemSettings.value.publicStatsShowAccountTrends
     }
     const result = await settingsStore.saveOemSettings(settings)
     if (result && result.success) {

From 0d94d3b4499d1b0b29e6daa7bd8653bc0f095d8d Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 18:58:20 +0000
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E5=85=AC=E5=BC=80=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=BA=20-=20=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E8=AE=BE=E7=BD=AE=E6=A0=8F=E7=9B=AE=E5=92=8C=E5=8F=8C?=
 =?UTF-8?q?Y=E8=BD=B4=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将公开统计设置从品牌设置移至独立栏目
- 用三合一双Y轴折线图替代条形图（Chart.js + vue-chartjs）
- 左Y轴显示Tokens，右Y轴显示活跃数量
- 添加暂无数据状态的友好提示
- 修复Y轴可能显示负数的问题（设置min:0）

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/admin-spa/package-lock.json               |  11 +
 web/admin-spa/package.json                    |   1 +
 .../components/common/PublicStatsOverview.vue | 414 +++++++++++++-----
 web/admin-spa/src/views/SettingsView.vue      | 309 ++++++-------
 4 files changed, 457 insertions(+), 278 deletions(-)

diff --git a/web/admin-spa/package-lock.json b/web/admin-spa/package-lock.json
index 481df56a..3ece6a49 100644
--- a/web/admin-spa/package-lock.json
+++ b/web/admin-spa/package-lock.json
@@ -15,6 +15,7 @@
         "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "vue": "^3.3.4",
+        "vue-chartjs": "^5.3.3",
         "vue-router": "^4.2.5",
         "xlsx": "^0.18.5",
         "xlsx-js-style": "^1.2.0"
@@ -5131,6 +5132,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
+      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-demi": {
       "version": "0.14.10",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
diff --git a/web/admin-spa/package.json b/web/admin-spa/package.json
index af353d80..a6e1df25 100644
--- a/web/admin-spa/package.json
+++ b/web/admin-spa/package.json
@@ -18,6 +18,7 @@
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
+    "vue-chartjs": "^5.3.3",
     "vue-router": "^4.2.5",
     "xlsx": "^0.18.5",
     "xlsx-js-style": "^1.2.0"
diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index 5f3277fa..6b069a81 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -68,78 +68,34 @@
       </div>
     </div>
 
-    <!-- Token使用趋势 -->
-    <div
-      v-if="
-        authStore.publicStats.showOptions?.tokenTrends && authStore.publicStats.tokenTrends?.length
-      "
-      class="mt-4"
-    >
-      <div class="section-title">Token 使用趋势（近7天）</div>
-      <div class="trend-chart">
-        <div
-          v-for="(item, index) in authStore.publicStats.tokenTrends"
-          :key="index"
-          class="trend-bar-wrapper"
-        >
-          <div
-            class="trend-bar trend-bar-tokens"
-            :style="{ height: `${getTrendBarHeight(item.tokens, 'tokens')}%` }"
-            :title="`${formatDate(item.date)}: ${formatTokens(item.tokens)} tokens`"
-          ></div>
-          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
+    <!-- 趋势图表（三合一双Y轴折线图） -->
+    <div v-if="hasAnyTrendData" class="mt-4">
+      <div class="section-title">使用趋势（近7天）</div>
+      <div class="chart-container">
+        <Line :data="chartData" :options="chartOptions" />
+      </div>
+      <!-- 图例 -->
+      <div class="chart-legend">
+        <div v-if="authStore.publicStats.showOptions?.tokenTrends" class="legend-item">
+          <span class="legend-dot legend-tokens"></span>
+          <span class="legend-text">Tokens</span>
+        </div>
+        <div v-if="authStore.publicStats.showOptions?.apiKeysTrends" class="legend-item">
+          <span class="legend-dot legend-keys"></span>
+          <span class="legend-text">活跃 Keys</span>
+        </div>
+        <div v-if="authStore.publicStats.showOptions?.accountTrends" class="legend-item">
+          <span class="legend-dot legend-accounts"></span>
+          <span class="legend-text">活跃账号</span>
         </div>
       </div>
     </div>
 
-    <!-- API Keys 使用趋势 -->
-    <div
-      v-if="
-        authStore.publicStats.showOptions?.apiKeysTrends &&
-        authStore.publicStats.apiKeysTrends?.length
-      "
-      class="mt-4"
-    >
-      <div class="section-title">API Keys 活跃趋势（近7天）</div>
-      <div class="trend-chart">
-        <div
-          v-for="(item, index) in authStore.publicStats.apiKeysTrends"
-          :key="index"
-          class="trend-bar-wrapper"
-        >
-          <div
-            class="trend-bar trend-bar-keys"
-            :style="{ height: `${getTrendBarHeight(item.activeKeys, 'apiKeys')}%` }"
-            :title="`${formatDate(item.date)}: ${item.activeKeys} 个活跃 Key`"
-          ></div>
-          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 账号使用趋势 -->
-    <div
-      v-if="
-        authStore.publicStats.showOptions?.accountTrends &&
-        authStore.publicStats.accountTrends?.length
-      "
-      class="mt-4"
-    >
-      <div class="section-title">账号活跃趋势（近7天）</div>
-      <div class="trend-chart">
-        <div
-          v-for="(item, index) in authStore.publicStats.accountTrends"
-          :key="index"
-          class="trend-bar-wrapper"
-        >
-          <div
-            class="trend-bar trend-bar-accounts"
-            :style="{ height: `${getTrendBarHeight(item.activeAccounts, 'accounts')}%` }"
-            :title="`${formatDate(item.date)}: ${item.activeAccounts} 个活跃账号`"
-          ></div>
-          <div class="trend-label">{{ formatDateShort(item.date) }}</div>
-        </div>
-      </div>
+    <!-- 暂无趋势数据 -->
+    <div v-else-if="hasTrendOptionsEnabled" class="empty-state mt-4">
+      <i class="fas fa-chart-line empty-icon"></i>
+      <p class="empty-text">暂无趋势数据</p>
+      <p class="empty-hint">数据将在有请求后自动更新</p>
     </div>
   </div>
 
@@ -147,14 +103,238 @@
   <div v-else-if="authStore.publicStatsLoading" class="public-stats-loading">
     <div class="loading-spinner"></div>
   </div>
+
+  <!-- 无数据状态 -->
+  <div v-else class="public-stats-empty">
+    <i class="fas fa-chart-pie empty-icon"></i>
+    <p class="empty-text">暂无统计数据</p>
+  </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
+import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js'
+
+// 注册 Chart.js 组件
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+)
 
 const authStore = useAuthStore()
 
+// 检查是否有任何趋势选项启用
+const hasTrendOptionsEnabled = computed(() => {
+  const opts = authStore.publicStats?.showOptions
+  return opts?.tokenTrends || opts?.apiKeysTrends || opts?.accountTrends
+})
+
+// 检查是否有实际趋势数据
+const hasAnyTrendData = computed(() => {
+  const stats = authStore.publicStats
+  if (!stats) return false
+
+  const opts = stats.showOptions || {}
+  const hasTokens = opts.tokenTrends && stats.tokenTrends?.length > 0
+  const hasKeys = opts.apiKeysTrends && stats.apiKeysTrends?.length > 0
+  const hasAccounts = opts.accountTrends && stats.accountTrends?.length > 0
+
+  return hasTokens || hasKeys || hasAccounts
+})
+
+// 图表数据
+const chartData = computed(() => {
+  const stats = authStore.publicStats
+  if (!stats) return { labels: [], datasets: [] }
+
+  const opts = stats.showOptions || {}
+
+  // 获取日期标签（优先使用 tokenTrends）
+  const labels =
+    stats.tokenTrends?.map((t) => formatDateShort(t.date)) ||
+    stats.apiKeysTrends?.map((t) => formatDateShort(t.date)) ||
+    stats.accountTrends?.map((t) => formatDateShort(t.date)) ||
+    []
+
+  const datasets = []
+
+  // Token 趋势（左Y轴）
+  if (opts.tokenTrends && stats.tokenTrends?.length > 0) {
+    datasets.push({
+      label: 'Tokens',
+      data: stats.tokenTrends.map((t) => t.tokens),
+      borderColor: 'rgb(59, 130, 246)',
+      backgroundColor: 'rgba(59, 130, 246, 0.1)',
+      yAxisID: 'y',
+      tension: 0.3,
+      fill: true,
+      pointRadius: 3,
+      pointHoverRadius: 5
+    })
+  }
+
+  // API Keys 趋势（右Y轴）
+  if (opts.apiKeysTrends && stats.apiKeysTrends?.length > 0) {
+    datasets.push({
+      label: '活跃 Keys',
+      data: stats.apiKeysTrends.map((t) => t.activeKeys),
+      borderColor: 'rgb(34, 197, 94)',
+      backgroundColor: 'rgba(34, 197, 94, 0.1)',
+      yAxisID: 'y1',
+      tension: 0.3,
+      fill: false,
+      pointRadius: 3,
+      pointHoverRadius: 5
+    })
+  }
+
+  // 账号趋势（右Y轴）
+  if (opts.accountTrends && stats.accountTrends?.length > 0) {
+    datasets.push({
+      label: '活跃账号',
+      data: stats.accountTrends.map((t) => t.activeAccounts),
+      borderColor: 'rgb(168, 85, 247)',
+      backgroundColor: 'rgba(168, 85, 247, 0.1)',
+      yAxisID: 'y1',
+      tension: 0.3,
+      fill: false,
+      pointRadius: 3,
+      pointHoverRadius: 5
+    })
+  }
+
+  return { labels, datasets }
+})
+
+// 图表配置
+const chartOptions = computed(() => {
+  const isDark = document.documentElement.classList.contains('dark')
+  const textColor = isDark ? 'rgba(156, 163, 175, 1)' : 'rgba(107, 114, 128, 1)'
+  const gridColor = isDark ? 'rgba(75, 85, 99, 0.3)' : 'rgba(229, 231, 235, 0.8)'
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index',
+      intersect: false
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        backgroundColor: isDark ? 'rgba(31, 41, 55, 0.9)' : 'rgba(255, 255, 255, 0.9)',
+        titleColor: isDark ? '#e5e7eb' : '#1f2937',
+        bodyColor: isDark ? '#d1d5db' : '#4b5563',
+        borderColor: isDark ? 'rgba(75, 85, 99, 0.5)' : 'rgba(229, 231, 235, 1)',
+        borderWidth: 1,
+        padding: 10,
+        displayColors: true,
+        callbacks: {
+          label: function (context) {
+            let label = context.dataset.label || ''
+            if (label) {
+              label += ': '
+            }
+            if (context.dataset.yAxisID === 'y') {
+              label += formatTokens(context.parsed.y)
+            } else {
+              label += context.parsed.y
+            }
+            return label
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: {
+          color: gridColor,
+          drawBorder: false
+        },
+        ticks: {
+          color: textColor,
+          font: {
+            size: 10
+          }
+        }
+      },
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+        min: 0,
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: 'Tokens',
+          color: 'rgb(59, 130, 246)',
+          font: {
+            size: 10
+          }
+        },
+        grid: {
+          color: gridColor,
+          drawBorder: false
+        },
+        ticks: {
+          color: textColor,
+          font: {
+            size: 10
+          },
+          callback: function (value) {
+            return formatTokensShort(value)
+          }
+        }
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        min: 0,
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: '数量',
+          color: 'rgb(34, 197, 94)',
+          font: {
+            size: 10
+          }
+        },
+        grid: {
+          drawOnChartArea: false
+        },
+        ticks: {
+          color: textColor,
+          font: {
+            size: 10
+          },
+          stepSize: 1
+        }
+      }
+    }
+  }
+})
+
 // 格式化运行时间
 function formatUptime(seconds) {
   const days = Math.floor(seconds / 86400)
@@ -192,6 +372,18 @@ function formatTokens(tokens) {
   return tokens.toString()
 }
 
+// 格式化 tokens（简短版，用于Y轴）
+function formatTokensShort(tokens) {
+  if (tokens >= 1000000000) {
+    return (tokens / 1000000000).toFixed(0) + 'B'
+  } else if (tokens >= 1000000) {
+    return (tokens / 1000000).toFixed(0) + 'M'
+  } else if (tokens >= 1000) {
+    return (tokens / 1000).toFixed(0) + 'K'
+  }
+  return tokens.toString()
+}
+
 // 获取平台图标
 function getPlatformIcon(platform) {
   const icons = {
@@ -225,16 +417,6 @@ function formatModelName(model) {
   return model
 }
 
-// 格式化日期
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  const parts = dateStr.split('-')
-  if (parts.length === 3) {
-    return `${parts[1]}月${parts[2]}日`
-  }
-  return dateStr
-}
-
 // 格式化日期（短格式）
 function formatDateShort(dateStr) {
   if (!dateStr) return ''
@@ -244,24 +426,6 @@ function formatDateShort(dateStr) {
   }
   return dateStr
 }
-
-// 计算趋势图柱高度
-const maxValues = computed(() => {
-  const stats = authStore.publicStats
-  if (!stats) return { tokens: 1, apiKeys: 1, accounts: 1 }
-
-  return {
-    tokens: Math.max(...(stats.tokenTrends?.map((t) => t.tokens) || [1]), 1),
-    apiKeys: Math.max(...(stats.apiKeysTrends?.map((t) => t.activeKeys) || [1]), 1),
-    accounts: Math.max(...(stats.accountTrends?.map((t) => t.activeAccounts) || [1]), 1)
-  }
-})
-
-function getTrendBarHeight(value, type) {
-  const max = maxValues.value[type] || 1
-  const height = (value / max) * 100
-  return Math.max(height, 5) // 最小高度5%
-}
 </script>
 
 <style scoped>
@@ -379,34 +543,56 @@ function getTrendBarHeight(value, type) {
   @apply w-10 text-right text-gray-500 dark:text-gray-400;
 }
 
-/* 趋势图表 */
-.trend-chart {
-  @apply flex h-24 items-end justify-between gap-1 rounded-lg bg-gray-50 p-2 dark:bg-gray-700/50;
+/* 图表容器 */
+.chart-container {
+  @apply rounded-lg bg-gray-50 p-3 dark:bg-gray-700/50;
+  height: 180px;
 }
 
-.trend-bar-wrapper {
-  @apply flex flex-1 flex-col items-center;
+/* 图例 */
+.chart-legend {
+  @apply mt-2 flex flex-wrap items-center justify-center gap-4;
 }
 
-.trend-bar {
-  @apply w-full max-w-8 rounded-t transition-all duration-300;
-  min-height: 4px;
+.legend-item {
+  @apply flex items-center gap-1.5;
 }
 
-.trend-bar-tokens {
-  @apply bg-gradient-to-t from-blue-500 to-blue-400;
+.legend-dot {
+  @apply inline-block h-2.5 w-2.5 rounded-full;
 }
 
-.trend-bar-keys {
-  @apply bg-gradient-to-t from-green-500 to-green-400;
+.legend-tokens {
+  @apply bg-blue-500;
 }
 
-.trend-bar-accounts {
-  @apply bg-gradient-to-t from-purple-500 to-purple-400;
+.legend-keys {
+  @apply bg-green-500;
 }
 
-.trend-label {
-  @apply mt-1 text-center text-[10px] text-gray-500 dark:text-gray-400;
+.legend-accounts {
+  @apply bg-purple-500;
+}
+
+.legend-text {
+  @apply text-xs text-gray-600 dark:text-gray-400;
+}
+
+/* 空状态 */
+.empty-state {
+  @apply flex flex-col items-center justify-center rounded-lg bg-gray-50 py-6 dark:bg-gray-700/50;
+}
+
+.empty-icon {
+  @apply mb-2 text-2xl text-gray-400 dark:text-gray-500;
+}
+
+.empty-text {
+  @apply text-sm text-gray-500 dark:text-gray-400;
+}
+
+.empty-hint {
+  @apply mt-1 text-xs text-gray-400 dark:text-gray-500;
 }
 
 /* 加载状态 */
@@ -414,6 +600,10 @@ function getTrendBarHeight(value, type) {
   @apply flex items-center justify-center py-8;
 }
 
+.public-stats-empty {
+  @apply flex flex-col items-center justify-center rounded-xl border border-gray-200/50 bg-white/80 py-8 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80;
+}
+
 .loading-spinner {
   @apply h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent;
 }
diff --git a/web/admin-spa/src/views/SettingsView.vue b/web/admin-spa/src/views/SettingsView.vue
index 0e589fa1..43d181e4 100644
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -48,6 +48,18 @@
             <i class="fas fa-robot mr-2"></i>
             Claude 转发
           </button>
+          <button
+            :class="[
+              'border-b-2 pb-2 text-sm font-medium transition-colors',
+              activeSection === 'publicStats'
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            ]"
+            @click="activeSection = 'publicStats'"
+          >
+            <i class="fas fa-chart-line mr-2"></i>
+            公开统计
+          </button>
         </nav>
       </div>
 
@@ -194,92 +206,6 @@
                   </td>
                 </tr>
 
-                <!-- 公开统计概览 -->
-                <tr class="table-row">
-                  <td class="w-48 whitespace-nowrap px-6 py-4">
-                    <div class="flex items-center">
-                      <div
-                        class="mr-3 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600"
-                      >
-                        <i class="fas fa-chart-bar text-xs text-white" />
-                      </div>
-                      <div>
-                        <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                          公开统计
-                        </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400">登录页展示</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4">
-                    <div class="flex items-center">
-                      <label class="inline-flex cursor-pointer items-center">
-                        <input
-                          v-model="oemSettings.publicStatsEnabled"
-                          class="peer sr-only"
-                          type="checkbox"
-                        />
-                        <div
-                          class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"
-                        ></div>
-                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
-                          oemSettings.publicStatsEnabled ? '显示统计概览' : '隐藏统计概览'
-                        }}</span>
-                      </label>
-                    </div>
-                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                      启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
-                    </p>
-                    <!-- 公开统计显示选项 -->
-                    <div
-                      v-if="oemSettings.publicStatsEnabled"
-                      class="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700/50"
-                    >
-                      <p class="text-xs font-medium text-gray-700 dark:text-gray-300">
-                        选择要公开显示的数据：
-                      </p>
-                      <label class="flex items-center gap-2">
-                        <input
-                          v-model="oemSettings.publicStatsShowModelDistribution"
-                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                          type="checkbox"
-                        />
-                        <span class="text-sm text-gray-700 dark:text-gray-300">模型使用分布</span>
-                      </label>
-                      <label class="flex items-center gap-2">
-                        <input
-                          v-model="oemSettings.publicStatsShowTokenTrends"
-                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                          type="checkbox"
-                        />
-                        <span class="text-sm text-gray-700 dark:text-gray-300"
-                          >Token 使用趋势（近7天）</span
-                        >
-                      </label>
-                      <label class="flex items-center gap-2">
-                        <input
-                          v-model="oemSettings.publicStatsShowApiKeysTrends"
-                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                          type="checkbox"
-                        />
-                        <span class="text-sm text-gray-700 dark:text-gray-300"
-                          >API Keys 活跃趋势（近7天）</span
-                        >
-                      </label>
-                      <label class="flex items-center gap-2">
-                        <input
-                          v-model="oemSettings.publicStatsShowAccountTrends"
-                          class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                          type="checkbox"
-                        />
-                        <span class="text-sm text-gray-700 dark:text-gray-300"
-                          >账号活跃趋势（近7天）</span
-                        >
-                      </label>
-                    </div>
-                  </td>
-                </tr>
-
                 <!-- 操作按钮 -->
                 <tr>
                   <td class="px-6 py-6" colspan="2">
@@ -432,86 +358,6 @@
               </div>
             </div>
 
-            <!-- 公开统计卡片 -->
-            <div class="glass-card p-4">
-              <div class="mb-3 flex items-center gap-3">
-                <div
-                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md"
-                >
-                  <i class="fas fa-chart-bar"></i>
-                </div>
-                <div>
-                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">公开统计</h3>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">在登录页展示统计概览</p>
-                </div>
-              </div>
-              <div class="space-y-2">
-                <label class="inline-flex cursor-pointer items-center">
-                  <input
-                    v-model="oemSettings.publicStatsEnabled"
-                    class="peer sr-only"
-                    type="checkbox"
-                  />
-                  <div
-                    class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"
-                  ></div>
-                  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
-                    oemSettings.publicStatsEnabled ? '显示统计概览' : '隐藏统计概览'
-                  }}</span>
-                </label>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  启用后，未登录用户可在首页看到服务状态、模型使用分布等概览信息
-                </p>
-                <!-- 公开统计显示选项 (移动端) -->
-                <div
-                  v-if="oemSettings.publicStatsEnabled"
-                  class="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-700/50"
-                >
-                  <p class="text-xs font-medium text-gray-700 dark:text-gray-300">
-                    选择要公开显示的数据：
-                  </p>
-                  <label class="flex items-center gap-2">
-                    <input
-                      v-model="oemSettings.publicStatsShowModelDistribution"
-                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                      type="checkbox"
-                    />
-                    <span class="text-sm text-gray-700 dark:text-gray-300">模型使用分布</span>
-                  </label>
-                  <label class="flex items-center gap-2">
-                    <input
-                      v-model="oemSettings.publicStatsShowTokenTrends"
-                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                      type="checkbox"
-                    />
-                    <span class="text-sm text-gray-700 dark:text-gray-300"
-                      >Token 使用趋势（近7天）</span
-                    >
-                  </label>
-                  <label class="flex items-center gap-2">
-                    <input
-                      v-model="oemSettings.publicStatsShowApiKeysTrends"
-                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                      type="checkbox"
-                    />
-                    <span class="text-sm text-gray-700 dark:text-gray-300"
-                      >API Keys 活跃趋势（近7天）</span
-                    >
-                  </label>
-                  <label class="flex items-center gap-2">
-                    <input
-                      v-model="oemSettings.publicStatsShowAccountTrends"
-                      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                      type="checkbox"
-                    />
-                    <span class="text-sm text-gray-700 dark:text-gray-300"
-                      >账号活跃趋势（近7天）</span
-                    >
-                  </label>
-                </div>
-              </div>
-            </div>
-
             <!-- 操作按钮卡片 -->
             <div class="glass-card p-4">
               <div class="flex flex-col gap-3">
@@ -1191,6 +1037,137 @@
             </div>
           </div>
         </div>
+
+        <!-- 公开统计设置部分 -->
+        <div v-show="activeSection === 'publicStats'">
+          <div class="rounded-lg bg-white/80 p-6 shadow-lg backdrop-blur-sm dark:bg-gray-800/80">
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md"
+                >
+                  <i class="fas fa-chart-line"></i>
+                </div>
+                <div>
+                  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+                    公开统计概览
+                  </h2>
+                  <p class="text-sm text-gray-600 dark:text-gray-400">
+                    配置未登录用户可见的统计数据
+                  </p>
+                </div>
+              </div>
+              <label class="inline-flex cursor-pointer items-center">
+                <input
+                  v-model="oemSettings.publicStatsEnabled"
+                  class="peer sr-only"
+                  type="checkbox"
+                />
+                <div
+                  class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"
+                ></div>
+                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
+                  oemSettings.publicStatsEnabled ? '已启用' : '已禁用'
+                }}</span>
+              </label>
+            </div>
+
+            <!-- 数据显示选项 -->
+            <div
+              v-if="oemSettings.publicStatsEnabled"
+              class="space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700/50"
+            >
+              <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                <i class="fas fa-eye mr-2 text-gray-400"></i>
+                选择要公开显示的数据：
+              </p>
+              <div class="grid gap-3 sm:grid-cols-2">
+                <label
+                  class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
+                >
+                  <input
+                    v-model="oemSettings.publicStatsShowModelDistribution"
+                    class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
+                    type="checkbox"
+                  />
+                  <div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                      >模型使用分布</span
+                    >
+                    <p class="text-xs text-gray-500 dark:text-gray-400">显示各模型的使用占比</p>
+                  </div>
+                </label>
+                <label
+                  class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
+                >
+                  <input
+                    v-model="oemSettings.publicStatsShowTokenTrends"
+                    class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
+                    type="checkbox"
+                  />
+                  <div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                      >Token 使用趋势</span
+                    >
+                    <p class="text-xs text-gray-500 dark:text-gray-400">显示近7天的Token使用量</p>
+                  </div>
+                </label>
+                <label
+                  class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
+                >
+                  <input
+                    v-model="oemSettings.publicStatsShowApiKeysTrends"
+                    class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
+                    type="checkbox"
+                  />
+                  <div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                      >API Keys 活跃趋势</span
+                    >
+                    <p class="text-xs text-gray-500 dark:text-gray-400">
+                      显示近7天的活跃API Key数量
+                    </p>
+                  </div>
+                </label>
+                <label
+                  class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
+                >
+                  <input
+                    v-model="oemSettings.publicStatsShowAccountTrends"
+                    class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
+                    type="checkbox"
+                  />
+                  <div>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                      >账号活跃趋势</span
+                    >
+                    <p class="text-xs text-gray-500 dark:text-gray-400">显示近7天的活跃账号数量</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <!-- 操作按钮 -->
+            <div class="mt-6 flex items-center justify-between">
+              <div class="flex gap-3">
+                <button
+                  class="btn btn-primary px-6 py-3"
+                  :class="{ 'cursor-not-allowed opacity-50': saving }"
+                  :disabled="saving"
+                  @click="saveOemSettings"
+                >
+                  <div v-if="saving" class="loading-spinner mr-2"></div>
+                  <i v-else class="fas fa-save mr-2" />
+                  {{ saving ? '保存中...' : '保存设置' }}
+                </button>
+              </div>
+              <div v-if="oemSettings.updatedAt" class="text-sm text-gray-500 dark:text-gray-400">
+                <i class="fas fa-clock mr-1" />
+                最后更新：{{ formatDateTime(oemSettings.updatedAt) }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

From cfeb4658ad8a260f535f1fe7e5a818f6055ec853 Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 21:43:26 -0500
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=88=86=E5=B8=83=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端：getPublicModelStats 支持 today/24h/7d/30d/all 五种时间范围
- 后端：新增 publicStatsModelDistributionPeriod 设置项
- 前端：设置页面添加横向选项卡式时间范围选择器
- 前端：公开统计组件显示当前数据时间范围标签

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/admin/system.js                    | 99 ++++++++++++++++---
 .../components/common/PublicStatsOverview.vue | 24 ++++-
 web/admin-spa/src/stores/settings.js          |  5 +
 web/admin-spa/src/views/SettingsView.vue      | 58 ++++++++---
 4 files changed, 157 insertions(+), 29 deletions(-)

diff --git a/src/routes/admin/system.js b/src/routes/admin/system.js
index 96afd6f5..01a20891 100644
--- a/src/routes/admin/system.js
+++ b/src/routes/admin/system.js
@@ -267,6 +267,7 @@ const defaultOemSettings = {
   publicStatsEnabled: false, // 是否在首页显示公开统计概览
   // 公开统计显示选项
   publicStatsShowModelDistribution: true, // 显示模型使用分布
+  publicStatsModelDistributionPeriod: 'today', // 模型使用分布时间范围: today, 24h, 7d, 30d, all
   publicStatsShowTokenTrends: false, // 显示Token使用趋势
   publicStatsShowApiKeysTrends: false, // 显示API Keys使用趋势
   publicStatsShowAccountTrends: false, // 显示账号使用趋势
@@ -319,6 +320,7 @@ router.put('/oem-settings', authenticateAdmin, async (req, res) => {
       showAdminButton,
       publicStatsEnabled,
       publicStatsShowModelDistribution,
+      publicStatsModelDistributionPeriod,
       publicStatsShowTokenTrends,
       publicStatsShowApiKeysTrends,
       publicStatsShowAccountTrends
@@ -349,6 +351,12 @@ router.put('/oem-settings', authenticateAdmin, async (req, res) => {
       }
     }
 
+    // 验证时间范围值
+    const validPeriods = ['today', '24h', '7d', '30d', 'all']
+    const periodValue = validPeriods.includes(publicStatsModelDistributionPeriod)
+      ? publicStatsModelDistributionPeriod
+      : 'today'
+
     const settings = {
       siteName: siteName.trim(),
       siteIcon: (siteIcon || '').trim(),
@@ -357,6 +365,7 @@ router.put('/oem-settings', authenticateAdmin, async (req, res) => {
       publicStatsEnabled: publicStatsEnabled === true, // 默认为false
       // 公开统计显示选项
       publicStatsShowModelDistribution: publicStatsShowModelDistribution !== false, // 默认为true
+      publicStatsModelDistributionPeriod: periodValue, // 时间范围
       publicStatsShowTokenTrends: publicStatsShowTokenTrends === true, // 默认为false
       publicStatsShowApiKeysTrends: publicStatsShowApiKeysTrends === true, // 默认为false
       publicStatsShowAccountTrends: publicStatsShowAccountTrends === true, // 默认为false
@@ -449,9 +458,15 @@ router.get('/public-stats', async (req, res) => {
     // 辅助函数：规范化布尔值
     const normalizeBoolean = (value) => value === true || value === 'true'
     const isRateLimitedFlag = (status) => {
-      if (!status) return false
-      if (typeof status === 'string') return status === 'limited'
-      if (typeof status === 'object') return status.isRateLimited === true
+      if (!status) {
+        return false
+      }
+      if (typeof status === 'string') {
+        return status === 'limited'
+      }
+      if (typeof status === 'object') {
+        return status.isRateLimited === true
+      }
       return false
     }
 
@@ -471,7 +486,7 @@ router.get('/public-stats', async (req, res) => {
       bedrockAccountService.getAllAccounts(),
       droidAccountService.getAllAccounts(),
       redis.getTodayStats(),
-      getPublicModelStats()
+      getPublicModelStats(settings.publicStatsModelDistributionPeriod || 'today')
     ])
 
     const bedrockAccounts = bedrockAccountsResult.success ? bedrockAccountsResult.data : []
@@ -568,7 +583,9 @@ router.get('/public-stats', async (req, res) => {
 
     // 根据设置添加可选数据
     if (settings.publicStatsShowModelDistribution !== false) {
-      publicStats.modelDistribution = modelStats
+      // modelStats 现在返回 { stats: [], period }
+      publicStats.modelDistribution = modelStats.stats
+      publicStats.modelDistributionPeriod = modelStats.period
     }
 
     // 获取趋势数据（最近7天）
@@ -605,20 +622,70 @@ router.get('/public-stats', async (req, res) => {
 })
 
 // 获取公开模型统计的辅助函数
-async function getPublicModelStats() {
+// period: 'today' | '24h' | '7d' | '30d' | 'all'
+async function getPublicModelStats(period = 'today') {
   try {
     const client = redis.getClientSafe()
     const today = redis.getDateStringInTimezone()
-    const pattern = `usage:model:daily:*:${today}`
-    const keys = await client.keys(pattern)
+    const tzDate = redis.getDateInTimezone()
 
-    if (keys.length === 0) {
-      return []
+    // 根据period生成日期范围
+    const getDatePatterns = () => {
+      const patterns = []
+
+      if (period === 'today') {
+        patterns.push(`usage:model:daily:*:${today}`)
+      } else if (period === '24h') {
+        // 过去24小时 = 今天 + 昨天
+        patterns.push(`usage:model:daily:*:${today}`)
+        const yesterday = new Date(tzDate)
+        yesterday.setDate(yesterday.getDate() - 1)
+        patterns.push(`usage:model:daily:*:${redis.getDateStringInTimezone(yesterday)}`)
+      } else if (period === '7d') {
+        // 过去7天
+        for (let i = 0; i < 7; i++) {
+          const date = new Date(tzDate)
+          date.setDate(date.getDate() - i)
+          patterns.push(`usage:model:daily:*:${redis.getDateStringInTimezone(date)}`)
+        }
+      } else if (period === '30d') {
+        // 过去30天
+        for (let i = 0; i < 30; i++) {
+          const date = new Date(tzDate)
+          date.setDate(date.getDate() - i)
+          patterns.push(`usage:model:daily:*:${redis.getDateStringInTimezone(date)}`)
+        }
+      } else if (period === 'all') {
+        // 所有数据
+        patterns.push('usage:model:daily:*')
+      } else {
+        // 默认今天
+        patterns.push(`usage:model:daily:*:${today}`)
+      }
+
+      return patterns
+    }
+
+    const patterns = getDatePatterns()
+    let allKeys = []
+
+    for (const pattern of patterns) {
+      const keys = await client.keys(pattern)
+      allKeys.push(...keys)
+    }
+
+    // 去重
+    allKeys = [...new Set(allKeys)]
+
+    if (allKeys.length === 0) {
+      return { stats: [], period }
     }
 
     // 模型名标准化
     const normalizeModelName = (model) => {
-      if (!model || model === 'unknown') return model
+      if (!model || model === 'unknown') {
+        return model
+      }
       if (model.includes('.anthropic.') || model.includes('.claude')) {
         let normalized = model.replace(/^[a-z0-9-]+\./, '')
         normalized = normalized.replace('anthropic.', '')
@@ -632,9 +699,11 @@ async function getPublicModelStats() {
     const modelStatsMap = new Map()
     let totalRequests = 0
 
-    for (const key of keys) {
+    for (const key of allKeys) {
       const match = key.match(/usage:model:daily:(.+):\d{4}-\d{2}-\d{2}$/)
-      if (!match) continue
+      if (!match) {
+        continue
+      }
 
       const rawModel = match[1]
       const normalizedModel = normalizeModelName(rawModel)
@@ -661,10 +730,10 @@ async function getPublicModelStats() {
 
     // 按占比排序，取前5个
     modelStats.sort((a, b) => b.percentage - a.percentage)
-    return modelStats.slice(0, 5)
+    return { stats: modelStats.slice(0, 5), period }
   } catch (error) {
     logger.warn('⚠️ Failed to get public model stats:', error.message)
-    return []
+    return { stats: [], period }
   }
 }
 
diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index 6b069a81..5c630186 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -52,7 +52,12 @@
       "
       class="mt-4"
     >
-      <div class="section-title">模型使用分布</div>
+      <div class="section-title">
+        模型使用分布
+        <span class="period-label">{{
+          formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
+        }}</span>
+      </div>
       <div class="model-distribution">
         <div
           v-for="model in authStore.publicStats.modelDistribution"
@@ -384,6 +389,18 @@ function formatTokensShort(tokens) {
   return tokens.toString()
 }
 
+// 格式化时间范围标签
+function formatPeriodLabel(period) {
+  const labels = {
+    today: '今天',
+    '24h': '过去24小时',
+    '7d': '过去7天',
+    '30d': '过去30天',
+    all: '全部'
+  }
+  return labels[period] || labels['today']
+}
+
 // 获取平台图标
 function getPlatformIcon(platform) {
   const icons = {
@@ -450,6 +467,11 @@ function formatDateShort(dateStr) {
   @apply mb-2 text-center text-xs text-gray-600 dark:text-gray-400;
 }
 
+/* 时间范围标签 */
+.period-label {
+  @apply ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400;
+}
+
 /* 状态徽章 */
 .status-badge {
   @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
diff --git a/web/admin-spa/src/stores/settings.js b/web/admin-spa/src/stores/settings.js
index fb1f2d7b..468ca9bf 100644
--- a/web/admin-spa/src/stores/settings.js
+++ b/web/admin-spa/src/stores/settings.js
@@ -10,6 +10,11 @@ export const useSettingsStore = defineStore('settings', () => {
     siteIconData: '',
     showAdminButton: true, // 控制管理后台按钮的显示
     publicStatsEnabled: false, // 是否在首页显示公开统计概览
+    publicStatsShowModelDistribution: true,
+    publicStatsModelDistributionPeriod: 'today', // 时间范围: today, 24h, 7d, 30d, all
+    publicStatsShowTokenTrends: false,
+    publicStatsShowApiKeysTrends: false,
+    publicStatsShowAccountTrends: false,
     updatedAt: null
   })
 
diff --git a/web/admin-spa/src/views/SettingsView.vue b/web/admin-spa/src/views/SettingsView.vue
index 43d181e4..ce631fb2 100644
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -1082,21 +1082,42 @@
                 选择要公开显示的数据：
               </p>
               <div class="grid gap-3 sm:grid-cols-2">
-                <label
-                  class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
+                <div
+                  class="rounded-lg border border-gray-200 bg-white p-3 transition-colors dark:border-gray-600 dark:bg-gray-800"
                 >
-                  <input
-                    v-model="oemSettings.publicStatsShowModelDistribution"
-                    class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
-                    type="checkbox"
-                  />
-                  <div>
-                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
-                      >模型使用分布</span
-                    >
-                    <p class="text-xs text-gray-500 dark:text-gray-400">显示各模型的使用占比</p>
+                  <label class="flex cursor-pointer items-center gap-3">
+                    <input
+                      v-model="oemSettings.publicStatsShowModelDistribution"
+                      class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="checkbox"
+                    />
+                    <div>
+                      <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                        >模型使用分布</span
+                      >
+                      <p class="text-xs text-gray-500 dark:text-gray-400">显示各模型的使用占比</p>
+                    </div>
+                  </label>
+                  <div v-if="oemSettings.publicStatsShowModelDistribution" class="mt-3 pl-7">
+                    <div class="mb-1.5 text-xs text-gray-500 dark:text-gray-400">时间范围</div>
+                    <div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700/50">
+                      <button
+                        v-for="option in modelDistributionPeriodOptions"
+                        :key="option.value"
+                        class="rounded-md px-2.5 py-1 text-xs font-medium transition-all"
+                        :class="
+                          oemSettings.publicStatsModelDistributionPeriod === option.value
+                            ? 'bg-white text-green-600 shadow-sm dark:bg-gray-600 dark:text-green-400'
+                            : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
+                        "
+                        type="button"
+                        @click="oemSettings.publicStatsModelDistributionPeriod = option.value"
+                      >
+                        {{ option.label }}
+                      </button>
+                    </div>
                   </div>
-                </label>
+                </div>
                 <label
                   class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
                 >
@@ -1765,6 +1786,15 @@ defineOptions({
 const settingsStore = useSettingsStore()
 const { loading, saving, oemSettings } = storeToRefs(settingsStore)
 
+// 模型使用分布时间范围选项
+const modelDistributionPeriodOptions = [
+  { value: 'today', label: '今天' },
+  { value: '24h', label: '24小时' },
+  { value: '7d', label: '7天' },
+  { value: '30d', label: '30天' },
+  { value: 'all', label: '全部' }
+]
+
 // 组件refs
 const iconFileInput = ref()
 
@@ -2613,6 +2643,8 @@ const saveOemSettings = async () => {
       showAdminButton: oemSettings.value.showAdminButton,
       publicStatsEnabled: oemSettings.value.publicStatsEnabled,
       publicStatsShowModelDistribution: oemSettings.value.publicStatsShowModelDistribution,
+      publicStatsModelDistributionPeriod:
+        oemSettings.value.publicStatsModelDistributionPeriod || 'today',
       publicStatsShowTokenTrends: oemSettings.value.publicStatsShowTokenTrends,
       publicStatsShowApiKeysTrends: oemSettings.value.publicStatsShowApiKeysTrends,
       publicStatsShowAccountTrends: oemSettings.value.publicStatsShowAccountTrends

From e754589ad54903d406340dc67b1afb15e6025905 Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 21:48:59 -0500
Subject: [PATCH 6/7] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=85=AC?=
 =?UTF-8?q?=E5=BC=80=E7=BB=9F=E8=AE=A1=E6=A6=82=E8=A7=88=E7=9A=84=E5=AE=BD?=
 =?UTF-8?q?=E5=B1=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除状态概览的最大宽度限制，与其他标签页保持一致
- 重构 PublicStatsOverview 组件布局为响应式两列设计
- 顶部状态栏：服务状态左侧，平台可用性右侧
- 主内容区：今日统计（4项）与模型分布并排显示
- 图表区域独立占满宽度
- 各区块添加独立圆角背景，视觉层次更清晰

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/common/PublicStatsOverview.vue | 206 +++++++++++-------
 web/admin-spa/src/views/ApiStatsView.vue      |   4 +-
 2 files changed, 130 insertions(+), 80 deletions(-)

diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index 5c630186..afb9fd80 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -1,81 +1,103 @@
 <template>
   <div v-if="authStore.publicStats" class="public-stats-overview">
-    <!-- 服务状态徽章 -->
-    <div class="mb-4 flex items-center justify-center gap-2">
-      <div
-        class="status-badge"
-        :class="{
-          'status-healthy': authStore.publicStats.serviceStatus === 'healthy',
-          'status-degraded': authStore.publicStats.serviceStatus === 'degraded'
-        }"
-      >
-        <span class="status-dot"></span>
-        <span class="status-text">{{
-          authStore.publicStats.serviceStatus === 'healthy' ? '服务正常' : '服务降级'
-        }}</span>
-      </div>
-      <span class="text-xs text-gray-500 dark:text-gray-400">
-        运行 {{ formatUptime(authStore.publicStats.uptime) }}
-      </span>
-    </div>
-
-    <!-- 平台可用性指示器 -->
-    <div class="mb-4 flex flex-wrap justify-center gap-2">
-      <div
-        v-for="(available, platform) in authStore.publicStats.platforms"
-        :key="platform"
-        class="platform-badge"
-        :class="{ available: available, unavailable: !available }"
-      >
-        <i class="mr-1" :class="getPlatformIcon(platform)"></i>
-        <span>{{ getPlatformName(platform) }}</span>
-      </div>
-    </div>
-
-    <!-- 今日统计 -->
-    <div class="stats-grid">
-      <div class="stat-item">
-        <div class="stat-value">{{ formatNumber(authStore.publicStats.todayStats.requests) }}</div>
-        <div class="stat-label">今日请求</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">{{ formatTokens(authStore.publicStats.todayStats.tokens) }}</div>
-        <div class="stat-label">今日 Tokens</div>
-      </div>
-    </div>
-
-    <!-- 模型使用分布 -->
-    <div
-      v-if="
-        authStore.publicStats.showOptions?.modelDistribution &&
-        authStore.publicStats.modelDistribution?.length > 0
-      "
-      class="mt-4"
-    >
-      <div class="section-title">
-        模型使用分布
-        <span class="period-label">{{
-          formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
-        }}</span>
-      </div>
-      <div class="model-distribution">
+    <!-- 顶部状态栏：服务状态 + 平台可用性 -->
+    <div class="header-section">
+      <div class="flex items-center gap-2">
         <div
-          v-for="model in authStore.publicStats.modelDistribution"
-          :key="model.model"
-          class="model-bar-item"
+          class="status-badge"
+          :class="{
+            'status-healthy': authStore.publicStats.serviceStatus === 'healthy',
+            'status-degraded': authStore.publicStats.serviceStatus === 'degraded'
+          }"
         >
-          <div class="model-name">{{ formatModelName(model.model) }}</div>
-          <div class="model-bar">
-            <div class="model-bar-fill" :style="{ width: `${model.percentage}%` }"></div>
+          <span class="status-dot"></span>
+          <span class="status-text">{{
+            authStore.publicStats.serviceStatus === 'healthy' ? '服务正常' : '服务降级'
+          }}</span>
+        </div>
+        <span class="text-xs text-gray-500 dark:text-gray-400">
+          运行 {{ formatUptime(authStore.publicStats.uptime) }}
+        </span>
+      </div>
+      <div class="flex flex-wrap justify-center gap-2 md:justify-end">
+        <div
+          v-for="(available, platform) in authStore.publicStats.platforms"
+          :key="platform"
+          class="platform-badge"
+          :class="{ available: available, unavailable: !available }"
+        >
+          <i class="mr-1" :class="getPlatformIcon(platform)"></i>
+          <span>{{ getPlatformName(platform) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区：今日统计 + 模型分布 -->
+    <div class="main-content">
+      <!-- 左侧：今日统计 -->
+      <div class="stats-section">
+        <div class="section-title-left">今日统计</div>
+        <div class="stats-grid">
+          <div class="stat-item">
+            <div class="stat-value">
+              {{ formatNumber(authStore.publicStats.todayStats.requests) }}
+            </div>
+            <div class="stat-label">请求数</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              {{ formatTokens(authStore.publicStats.todayStats.tokens) }}
+            </div>
+            <div class="stat-label">Tokens</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              {{ formatTokens(authStore.publicStats.todayStats.inputTokens) }}
+            </div>
+            <div class="stat-label">输入</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              {{ formatTokens(authStore.publicStats.todayStats.outputTokens) }}
+            </div>
+            <div class="stat-label">输出</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：模型使用分布 -->
+      <div
+        v-if="
+          authStore.publicStats.showOptions?.modelDistribution &&
+          authStore.publicStats.modelDistribution?.length > 0
+        "
+        class="model-section"
+      >
+        <div class="section-title-left">
+          模型使用分布
+          <span class="period-label">{{
+            formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
+          }}</span>
+        </div>
+        <div class="model-distribution">
+          <div
+            v-for="model in authStore.publicStats.modelDistribution"
+            :key="model.model"
+            class="model-bar-item"
+          >
+            <div class="model-name">{{ formatModelName(model.model) }}</div>
+            <div class="model-bar">
+              <div class="model-bar-fill" :style="{ width: `${model.percentage}%` }"></div>
+            </div>
+            <div class="model-percentage">{{ model.percentage }}%</div>
           </div>
-          <div class="model-percentage">{{ model.percentage }}%</div>
         </div>
       </div>
     </div>
 
     <!-- 趋势图表（三合一双Y轴折线图） -->
-    <div v-if="hasAnyTrendData" class="mt-4">
-      <div class="section-title">使用趋势（近7天）</div>
+    <div v-if="hasAnyTrendData" class="chart-section">
+      <div class="section-title-left">使用趋势（近7天）</div>
       <div class="chart-container">
         <Line :data="chartData" :options="chartOptions" />
       </div>
@@ -97,7 +119,7 @@
     </div>
 
     <!-- 暂无趋势数据 -->
-    <div v-else-if="hasTrendOptionsEnabled" class="empty-state mt-4">
+    <div v-else-if="hasTrendOptionsEnabled" class="empty-state">
       <i class="fas fa-chart-line empty-icon"></i>
       <p class="empty-text">暂无趋势数据</p>
       <p class="empty-hint">数据将在有请求后自动更新</p>
@@ -447,7 +469,7 @@ function formatDateShort(dateStr) {
 
 <style scoped>
 .public-stats-overview {
-  @apply rounded-xl border border-gray-200/50 bg-white/80 p-4 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80;
+  @apply rounded-xl border border-gray-200/50 bg-white/80 p-4 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80 md:p-6;
   animation: fadeIn 0.3s ease-out;
 }
 
@@ -462,14 +484,44 @@ function formatDateShort(dateStr) {
   }
 }
 
-/* 章节标题 */
+/* 顶部状态栏 */
+.header-section {
+  @apply mb-4 flex flex-col items-center justify-between gap-3 border-b border-gray-200 pb-4 dark:border-gray-700 md:mb-6 md:flex-row md:pb-6;
+}
+
+/* 主内容区 */
+.main-content {
+  @apply grid gap-4 md:grid-cols-2 md:gap-6;
+}
+
+/* 统计区块 */
+.stats-section {
+  @apply rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30;
+}
+
+/* 模型区块 */
+.model-section {
+  @apply rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30;
+}
+
+/* 图表区块 */
+.chart-section {
+  @apply mt-4 rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30 md:mt-6;
+}
+
+/* 章节标题（居中） */
 .section-title {
   @apply mb-2 text-center text-xs text-gray-600 dark:text-gray-400;
 }
 
+/* 章节标题（左对齐） */
+.section-title-left {
+  @apply mb-3 text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
 /* 时间范围标签 */
 .period-label {
-  @apply ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400;
+  @apply ml-1 rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-normal text-gray-500 dark:bg-gray-600 dark:text-gray-400;
 }
 
 /* 状态徽章 */
@@ -528,11 +580,11 @@ function formatDateShort(dateStr) {
 }
 
 .stat-item {
-  @apply rounded-lg bg-gray-50 p-3 text-center dark:bg-gray-700/50;
+  @apply rounded-lg bg-white p-3 text-center shadow-sm dark:bg-gray-800/50;
 }
 
 .stat-value {
-  @apply text-lg font-bold text-gray-900 dark:text-gray-100;
+  @apply text-lg font-bold text-gray-900 dark:text-gray-100 md:text-xl;
 }
 
 .stat-label {
@@ -541,15 +593,15 @@ function formatDateShort(dateStr) {
 
 /* 模型分布 */
 .model-distribution {
-  @apply space-y-2;
+  @apply space-y-2.5;
 }
 
 .model-bar-item {
-  @apply flex items-center gap-2 text-xs;
+  @apply flex items-center gap-3 text-sm;
 }
 
 .model-name {
-  @apply w-20 truncate text-gray-600 dark:text-gray-400;
+  @apply w-24 truncate text-gray-600 dark:text-gray-400 md:w-32;
 }
 
 .model-bar {
diff --git a/web/admin-spa/src/views/ApiStatsView.vue b/web/admin-spa/src/views/ApiStatsView.vue
index 306e194e..a496dab6 100644
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -82,9 +82,7 @@
 
     <!-- 状态概览内容 -->
     <div v-if="currentTab === 'overview'" class="tab-content">
-      <div class="mx-auto max-w-2xl">
-        <PublicStatsOverview />
-      </div>
+      <PublicStatsOverview />
     </div>
 
     <!-- 统计内容 -->

From b16968c3e5995f9234f7b7aa2bd0f867c291b346 Mon Sep 17 00:00:00 2001
From: Chapoly1305 <musts-papacy-0w@icloud.com>
Date: Tue, 23 Dec 2025 21:59:02 -0500
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=88=86=E5=B8=83=E6=94=B9=E7=94=A8=E7=8E=AF=E5=BD=A2?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将条形图改为 Doughnut 环形图，更直观展示占比
- 右侧图例显示模型名称和百分比
- 支持8种渐变配色，明暗主题自适应
- 移除旧的条形图相关样式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/common/PublicStatsOverview.vue | 140 +++++++++++++-----
 1 file changed, 103 insertions(+), 37 deletions(-)

diff --git a/web/admin-spa/src/components/common/PublicStatsOverview.vue b/web/admin-spa/src/components/common/PublicStatsOverview.vue
index afb9fd80..f0c4a82c 100644
--- a/web/admin-spa/src/components/common/PublicStatsOverview.vue
+++ b/web/admin-spa/src/components/common/PublicStatsOverview.vue
@@ -79,18 +79,8 @@
             formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
           }}</span>
         </div>
-        <div class="model-distribution">
-          <div
-            v-for="model in authStore.publicStats.modelDistribution"
-            :key="model.model"
-            class="model-bar-item"
-          >
-            <div class="model-name">{{ formatModelName(model.model) }}</div>
-            <div class="model-bar">
-              <div class="model-bar-fill" :style="{ width: `${model.percentage}%` }"></div>
-            </div>
-            <div class="model-percentage">{{ model.percentage }}%</div>
-          </div>
+        <div class="model-chart-container">
+          <Doughnut :data="modelChartData" :options="modelChartOptions" />
         </div>
       </div>
     </div>
@@ -141,13 +131,14 @@
 <script setup>
 import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
-import { Line } from 'vue-chartjs'
+import { Line, Doughnut } from 'vue-chartjs'
 import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
   PointElement,
   LineElement,
+  ArcElement,
   Title,
   Tooltip,
   Legend,
@@ -160,6 +151,7 @@ ChartJS.register(
   LinearScale,
   PointElement,
   LineElement,
+  ArcElement,
   Title,
   Tooltip,
   Legend,
@@ -187,7 +179,96 @@ const hasAnyTrendData = computed(() => {
   return hasTokens || hasKeys || hasAccounts
 })
 
-// 图表数据
+// 模型分布颜色
+const modelColors = [
+  'rgb(99, 102, 241)', // indigo
+  'rgb(59, 130, 246)', // blue
+  'rgb(16, 185, 129)', // emerald
+  'rgb(245, 158, 11)', // amber
+  'rgb(239, 68, 68)', // red
+  'rgb(139, 92, 246)', // violet
+  'rgb(236, 72, 153)', // pink
+  'rgb(20, 184, 166)' // teal
+]
+
+// 模型分布环形图数据
+const modelChartData = computed(() => {
+  const stats = authStore.publicStats
+  if (!stats?.modelDistribution?.length) {
+    return { labels: [], datasets: [] }
+  }
+
+  const models = stats.modelDistribution
+  return {
+    labels: models.map((m) => formatModelName(m.model)),
+    datasets: [
+      {
+        data: models.map((m) => m.percentage),
+        backgroundColor: models.map((_, i) => modelColors[i % modelColors.length]),
+        borderColor: 'transparent',
+        borderWidth: 0,
+        hoverOffset: 4
+      }
+    ]
+  }
+})
+
+// 模型分布环形图选项
+const modelChartOptions = computed(() => {
+  const isDark = document.documentElement.classList.contains('dark')
+  const textColor = isDark ? 'rgb(156, 163, 175)' : 'rgb(107, 114, 128)'
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '60%',
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          color: textColor,
+          padding: 12,
+          usePointStyle: true,
+          pointStyle: 'circle',
+          font: {
+            size: 11
+          },
+          generateLabels: (chart) => {
+            const data = chart.data
+            if (data.labels.length && data.datasets.length) {
+              return data.labels.map((label, i) => ({
+                text: `${label} ${data.datasets[0].data[i]}%`,
+                fillStyle: data.datasets[0].backgroundColor[i],
+                strokeStyle: 'transparent',
+                lineWidth: 0,
+                pointStyle: 'circle',
+                hidden: false,
+                index: i
+              }))
+            }
+            return []
+          }
+        }
+      },
+      tooltip: {
+        backgroundColor: isDark ? 'rgba(31, 41, 55, 0.95)' : 'rgba(255, 255, 255, 0.95)',
+        titleColor: isDark ? 'rgb(243, 244, 246)' : 'rgb(17, 24, 39)',
+        bodyColor: isDark ? 'rgb(209, 213, 219)' : 'rgb(75, 85, 99)',
+        borderColor: isDark ? 'rgba(75, 85, 99, 0.3)' : 'rgba(209, 213, 219, 0.5)',
+        borderWidth: 1,
+        padding: 10,
+        cornerRadius: 8,
+        callbacks: {
+          label: (context) => {
+            return ` ${context.label}: ${context.parsed}%`
+          }
+        }
+      }
+    }
+  }
+})
+
+// 趋势图表数据
 const chartData = computed(() => {
   const stats = authStore.publicStats
   if (!stats) return { labels: [], datasets: [] }
@@ -591,33 +672,18 @@ function formatDateShort(dateStr) {
   @apply text-xs text-gray-500 dark:text-gray-400;
 }
 
-/* 模型分布 */
-.model-distribution {
-  @apply space-y-2.5;
+/* 模型分布环形图容器 */
+.model-chart-container {
+  height: 160px;
 }
 
-.model-bar-item {
-  @apply flex items-center gap-3 text-sm;
+@media (min-width: 768px) {
+  .model-chart-container {
+    height: 180px;
+  }
 }
 
-.model-name {
-  @apply w-24 truncate text-gray-600 dark:text-gray-400 md:w-32;
-}
-
-.model-bar {
-  @apply relative h-2 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700;
-}
-
-.model-bar-fill {
-  @apply absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-blue-500 to-purple-500;
-  transition: width 0.5s ease-out;
-}
-
-.model-percentage {
-  @apply w-10 text-right text-gray-500 dark:text-gray-400;
-}
-
-/* 图表容器 */
+/* 趋势图表容器 */
 .chart-container {
   @apply rounded-lg bg-gray-50 p-3 dark:bg-gray-700/50;
   height: 180px;