feat: 丰富公开统计概览数据并添加可选显示项

- 后端：添加 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

@@ -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

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;

web/admin-spa/src/views/LoginView.vue

@@ -5,7 +5,6 @@
       <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"
@@ -94,15 +93,6 @@
         <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>
 
@@ -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()

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) {