feat: 将公开统计概览移至首页状态概览标签

- 在首页添加"状态概览"标签，作为默认显示页面
- 修复 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>

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>

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

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