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] =?UTF-8?q?feat:=20=E5=85=AC=E5=BC=80=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=BA=20-=20=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=A0=8F=E7=9B=AE=E5=92=8C=E5=8F=8CY?=
 =?UTF-8?q?=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>