perf(admin): lazy routes and nav badges

admin-frontend/src/api/feedbacks.js

@@ -5,6 +5,11 @@ export async function fetchFeedbacks(status = '') {
   return data
 }
 
+export async function fetchFeedbackStats() {
+  const { data } = await api.get('/feedbacks', { params: { limit: 1, offset: 0 } })
+  return data?.stats
+}
+
 export async function replyFeedback(feedbackId, reply) {
   const { data } = await api.post(`/feedbacks/${feedbackId}/reply`, { reply })
   return data
@@ -19,4 +24,3 @@ export async function deleteFeedback(feedbackId) {
   const { data } = await api.delete(`/feedbacks/${feedbackId}`)
   return data
 }
-

admin-frontend/src/layouts/AdminLayout.vue

@@ -15,6 +15,8 @@ import {
 } from '@element-plus/icons-vue'
 
 import { api } from '../api/client'
+import { fetchFeedbackStats } from '../api/feedbacks'
+import { fetchPasswordResets } from '../api/passwordResets'
 import { fetchSystemStats } from '../api/stats'
 import StatsCards from '../components/StatsCards.vue'
 
@@ -35,8 +37,46 @@ async function refreshStats() {
   }
 }
 
+const loadingBadges = ref(false)
+const pendingResetsCount = ref(0)
+const pendingFeedbackCount = ref(0)
+let badgeTimer
+
+async function refreshNavBadges(partial = null) {
+  if (partial && typeof partial === 'object') {
+    if (Object.prototype.hasOwnProperty.call(partial, 'pendingResets')) {
+      pendingResetsCount.value = Number(partial.pendingResets || 0)
+    }
+    if (Object.prototype.hasOwnProperty.call(partial, 'pendingFeedbacks')) {
+      pendingFeedbackCount.value = Number(partial.pendingFeedbacks || 0)
+    }
+    return
+  }
+
+  if (loadingBadges.value) return
+  loadingBadges.value = true
+
+  try {
+    const [resetsResult, feedbackResult] = await Promise.allSettled([
+      fetchPasswordResets(),
+      fetchFeedbackStats(),
+    ])
+
+    if (resetsResult.status === 'fulfilled') {
+      pendingResetsCount.value = Array.isArray(resetsResult.value) ? resetsResult.value.length : 0
+    }
+
+    if (feedbackResult.status === 'fulfilled') {
+      pendingFeedbackCount.value = Number(feedbackResult.value?.pending || 0)
+    }
+  } finally {
+    loadingBadges.value = false
+  }
+}
+
 provide('refreshStats', refreshStats)
 provide('adminStats', stats)
+provide('refreshNavBadges', refreshNavBadges)
 
 const isMobile = ref(false)
 const drawerOpen = ref(false)
@@ -53,16 +93,19 @@ onMounted(async () => {
   syncIsMobile()
 
   await refreshStats()
+  await refreshNavBadges()
+  badgeTimer = window.setInterval(refreshNavBadges, 60_000)
 })
 
 onBeforeUnmount(() => {
   mediaQuery?.removeEventListener?.('change', syncIsMobile)
+  window.clearInterval(badgeTimer)
 })
 
 const menuItems = [
-  { path: '/pending', label: '待审核', icon: Document },
+  { path: '/pending', label: '待审核', icon: Document, badgeKey: 'pending' },
   { path: '/users', label: '用户', icon: User },
-  { path: '/feedbacks', label: '反馈', icon: ChatLineSquare },
+  { path: '/feedbacks', label: '反馈', icon: ChatLineSquare, badgeKey: 'feedbacks' },
   { path: '/stats', label: '统计', icon: DataAnalysis },
   { path: '/logs', label: '任务日志', icon: List },
   { path: '/announcements', label: '公告', icon: Bell },
@@ -73,6 +116,17 @@ const menuItems = [
 
 const activeMenu = computed(() => route.path)
 
+function badgeFor(item) {
+  if (!item?.badgeKey) return 0
+  if (item.badgeKey === 'pending') {
+    return Number(stats.value?.pending_users || 0) + Number(pendingResetsCount.value || 0)
+  }
+  if (item.badgeKey === 'feedbacks') {
+    return Number(pendingFeedbackCount.value || 0)
+  }
+  return 0
+}
+
 async function logout() {
   try {
     await ElMessageBox.confirm('确定退出管理员登录吗？', '退出登录', {
@@ -108,7 +162,10 @@ async function go(path) {
       <el-menu :default-active="activeMenu" class="aside-menu" router @select="go">
         <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
           <el-icon><component :is="item.icon" /></el-icon>
-          <span>{{ item.label }}</span>
+          <el-badge v-if="badgeFor(item) > 0" :value="badgeFor(item)" :max="99" class="menu-badge">
+            <span class="menu-label">{{ item.label }}</span>
+          </el-badge>
+          <span v-else class="menu-label">{{ item.label }}</span>
         </el-menu-item>
       </el-menu>
     </el-aside>
@@ -133,7 +190,16 @@ async function go(path) {
 
       <el-main class="layout-main">
         <StatsCards :stats="stats" :loading="loadingStats" />
-        <RouterView />
+        <Suspense>
+          <template #default>
+            <RouterView />
+          </template>
+          <template #fallback>
+            <el-card shadow="never" :body-style="{ padding: '16px' }" class="fallback-card">
+              <el-skeleton :rows="5" animated />
+            </el-card>
+          </template>
+        </Suspense>
       </el-main>
     </el-container>
 
@@ -145,7 +211,10 @@ async function go(path) {
       <el-menu :default-active="activeMenu" class="aside-menu" router @select="go">
         <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
           <el-icon><component :is="item.icon" /></el-icon>
-          <span>{{ item.label }}</span>
+          <el-badge v-if="badgeFor(item) > 0" :value="badgeFor(item)" :max="99" class="menu-badge">
+            <span class="menu-label">{{ item.label }}</span>
+          </el-badge>
+          <span v-else class="menu-label">{{ item.label }}</span>
         </el-menu-item>
       </el-menu>
     </el-drawer>
@@ -185,6 +254,22 @@ async function go(path) {
   border-right: none;
 }
 
+.menu-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.menu-badge {
+  display: inline-flex;
+  align-items: center;
+}
+
+.fallback-card {
+  border-radius: var(--app-radius);
+  border: 1px solid var(--app-border);
+}
+
 .layout-header {
   display: flex;
   align-items: center;
@@ -238,4 +323,3 @@ async function go(path) {
   }
 }
 </style>
-

admin-frontend/src/pages/FeedbacksPage.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { inject, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import { closeFeedback, deleteFeedback, fetchFeedbacks, replyFeedback } from '../api/feedbacks'
 
+const refreshNavBadges = inject('refreshNavBadges', null)
+
 const loading = ref(false)
 const statusFilter = ref('')
 const stats = ref({ total: 0, pending: 0, replied: 0, closed: 0 })
@@ -35,6 +37,8 @@ async function load() {
   } finally {
     loading.value = false
   }
+
+  await refreshNavBadges?.({ pendingFeedbacks: stats.value.pending || 0 })
 }
 
 async function onReply(row) {
@@ -253,4 +257,3 @@ onMounted(load)
   gap: 8px;
 }
 </style>
-

admin-frontend/src/pages/PendingPage.vue

@@ -7,6 +7,7 @@ import { approvePasswordReset, fetchPasswordResets, rejectPasswordReset } from '
 import { parseSqliteDateTime } from '../utils/datetime'
 
 const refreshStats = inject('refreshStats', null)
+const refreshNavBadges = inject('refreshNavBadges', null)
 
 const pendingUsers = ref([])
 const passwordResets = ref([])
@@ -46,6 +47,7 @@ async function loadResets() {
 
 async function refreshAll() {
   await Promise.all([loadPending(), loadResets()])
+  await refreshNavBadges?.({ pendingResets: passwordResets.value.length })
 }
 
 async function onApproveUser(row) {
@@ -105,6 +107,7 @@ async function onApproveReset(row) {
     const res = await approvePasswordReset(row.id)
     ElMessage.success(res?.message || '密码重置申请已批准')
     await loadResets()
+    await refreshNavBadges?.({ pendingResets: passwordResets.value.length })
   } catch {
     // handled by interceptor
   }
@@ -125,6 +128,7 @@ async function onRejectReset(row) {
     const res = await rejectPasswordReset(row.id)
     ElMessage.success(res?.message || '密码重置申请已拒绝')
     await loadResets()
+    await refreshNavBadges?.({ pendingResets: passwordResets.value.length })
   } catch {
     // handled by interceptor
   }

admin-frontend/src/router/index.js

@@ -2,15 +2,15 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 import AdminLayout from '../layouts/AdminLayout.vue'
 
-import PendingPage from '../pages/PendingPage.vue'
-import UsersPage from '../pages/UsersPage.vue'
-import FeedbacksPage from '../pages/FeedbacksPage.vue'
-import StatsPage from '../pages/StatsPage.vue'
-import LogsPage from '../pages/LogsPage.vue'
-import AnnouncementsPage from '../pages/AnnouncementsPage.vue'
-import EmailPage from '../pages/EmailPage.vue'
-import SystemPage from '../pages/SystemPage.vue'
-import SettingsPage from '../pages/SettingsPage.vue'
+const PendingPage = () => import('../pages/PendingPage.vue')
+const UsersPage = () => import('../pages/UsersPage.vue')
+const FeedbacksPage = () => import('../pages/FeedbacksPage.vue')
+const StatsPage = () => import('../pages/StatsPage.vue')
+const LogsPage = () => import('../pages/LogsPage.vue')
+const AnnouncementsPage = () => import('../pages/AnnouncementsPage.vue')
+const EmailPage = () => import('../pages/EmailPage.vue')
+const SystemPage = () => import('../pages/SystemPage.vue')
+const SettingsPage = () => import('../pages/SettingsPage.vue')
 
 const routes = [
   {
@@ -37,4 +37,3 @@ const router = createRouter({
 })
 
 export default router
-