From 145171464f4f22081ed9240abf6c7a3755f37446 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Thu, 18 Dec 2025 22:11:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 版本号闪烁问题
   - 将版本信息缓存到 Pinia store，避免每次路由切换都重新请求
   - 添加加载占位符，版本为空时显示骨架屏

2. 管理员登录跳转问题
   - 管理员登录后现在正确跳转到 /admin/dashboard
   - 普通用户仍跳转到 /dashboard

3. Dashboard 页面空白报错
   - 修复 API 返回 null 时访问 .length 导致的 TypeError
   - 为 computed 属性添加可选链操作符保护
   - 为数据赋值添加空数组默认值
---
 .../src/components/common/VersionBadge.vue    | 58 ++++++--------
 frontend/src/router/index.ts                  |  5 +-
 frontend/src/stores/app.ts                    | 79 ++++++++++++++++++-
 frontend/src/views/admin/DashboardView.vue    |  6 +-
 frontend/src/views/user/DashboardView.vue     |  9 ++-
 5 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/common/VersionBadge.vue b/frontend/src/components/common/VersionBadge.vue
index 93c77e0d..c19afd12 100644
--- a/frontend/src/components/common/VersionBadge.vue
+++ b/frontend/src/components/common/VersionBadge.vue
@@ -12,7 +12,8 @@
         ]"
         :title="hasUpdate ? 'New version available' : 'Up to date'"
       >
-        <span class="font-medium">v{{ currentVersion }}</span>
+        <span v-if="currentVersion" class="font-medium">v{{ currentVersion }}</span>
+        <span v-else class="font-medium w-12 h-3 bg-gray-200 dark:bg-dark-600 rounded animate-pulse"></span>
         <!-- Update indicator -->
         <span v-if="hasUpdate" class="relative flex h-2 w-2">
           <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
@@ -56,7 +57,8 @@
               <!-- Version display - centered and prominent -->
               <div class="text-center mb-4">
                 <div class="inline-flex items-center gap-2">
-                  <span class="text-2xl font-bold text-gray-900 dark:text-white">v{{ currentVersion }}</span>
+                  <span v-if="currentVersion" class="text-2xl font-bold text-gray-900 dark:text-white">v{{ currentVersion }}</span>
+                  <span v-else class="text-2xl font-bold text-gray-400 dark:text-dark-500">--</span>
                   <!-- Show check mark when up to date -->
                   <span v-if="!hasUpdate" class="flex items-center justify-center w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/30">
                     <svg class="w-3 h-3 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
@@ -233,8 +235,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAuthStore } from '@/stores';
-import { checkUpdates, performUpdate, restartService, type VersionInfo, type ReleaseInfo } from '@/api/admin/system';
+import { useAuthStore, useAppStore } from '@/stores';
+import { performUpdate, restartService } from '@/api/admin/system';
 
 const { t } = useI18n();
 
@@ -243,20 +245,22 @@ const props = defineProps<{
 }>();
 
 const authStore = useAuthStore();
+const appStore = useAppStore();
 
 const isAdmin = computed(() => authStore.isAdmin);
 
-const loading = ref(false);
 const dropdownOpen = ref(false);
 const dropdownRef = ref<HTMLElement | null>(null);
 
-const currentVersion = ref('0.1.0');
-const latestVersion = ref('0.1.0');
-const hasUpdate = ref(false);
-const releaseInfo = ref<ReleaseInfo | null>(null);
-const buildType = ref('source'); // "source" or "release"
+// Use store's cached version state
+const loading = computed(() => appStore.versionLoading);
+const currentVersion = computed(() => appStore.currentVersion || props.version || '');
+const latestVersion = computed(() => appStore.latestVersion);
+const hasUpdate = computed(() => appStore.hasUpdate);
+const releaseInfo = computed(() => appStore.releaseInfo);
+const buildType = computed(() => appStore.buildType);
 
-// Update process states
+// Update process states (local to this component)
 const updating = ref(false);
 const restarting = ref(false);
 const needRestart = ref(false);
@@ -277,24 +281,12 @@ function closeDropdown() {
 async function refreshVersion(force = true) {
   if (!isAdmin.value) return;
 
-  loading.value = true;
-  try {
-    const data: VersionInfo = await checkUpdates(force);
-    currentVersion.value = data.current_version;
-    latestVersion.value = data.latest_version;
-    buildType.value = data.build_type || 'source';
-    // Show update indicator for all build types
-    hasUpdate.value = data.has_update;
-    releaseInfo.value = data.release_info || null;
-    // Reset update states when refreshing
-    updateError.value = '';
-    updateSuccess.value = false;
-    needRestart.value = false;
-  } catch (error) {
-    console.error('Failed to check updates:', error);
-  } finally {
-    loading.value = false;
-  }
+  // Reset update states when refreshing
+  updateError.value = '';
+  updateSuccess.value = false;
+  needRestart.value = false;
+
+  await appStore.fetchVersion(force);
 }
 
 async function handleUpdate() {
@@ -308,7 +300,8 @@ async function handleUpdate() {
     const result = await performUpdate();
     updateSuccess.value = true;
     needRestart.value = result.need_restart;
-    hasUpdate.value = false;
+    // Clear version cache to reflect update completed
+    appStore.clearVersionCache();
   } catch (error: unknown) {
     const err = error as { response?: { data?: { message?: string } }; message?: string };
     updateError.value = err.response?.data?.message || err.message || t('version.updateFailed');
@@ -346,9 +339,8 @@ function handleClickOutside(event: MouseEvent) {
 
 onMounted(() => {
   if (isAdmin.value) {
-    refreshVersion(false);
-  } else if (props.version) {
-    currentVersion.value = props.version;
+    // Use cached version if available, otherwise fetch
+    appStore.fetchVersion(false);
   }
   document.addEventListener('click', handleClickOutside);
 });
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d61d9464..d99d7072 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -305,9 +305,10 @@ router.beforeEach((to, _from, next) => {
 
   // If route doesn't require auth, allow access
   if (!requiresAuth) {
-    // If already authenticated and trying to access login/register, redirect to dashboard
+    // If already authenticated and trying to access login/register, redirect to appropriate dashboard
     if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
-      next('/dashboard');
+      // Admin users go to admin dashboard, regular users go to user dashboard
+      next(authStore.isAdmin ? '/admin/dashboard' : '/dashboard');
       return;
     }
     next();
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 0135349e..4313cb82 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -6,14 +6,24 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import type { Toast, ToastType } from '@/types';
+import { checkUpdates as checkUpdatesAPI, type VersionInfo, type ReleaseInfo } from '@/api/admin/system';
 
 export const useAppStore = defineStore('app', () => {
   // ==================== State ====================
-  
+
   const sidebarCollapsed = ref<boolean>(false);
   const loading = ref<boolean>(false);
   const toasts = ref<Toast[]>([]);
 
+  // Version cache state
+  const versionLoaded = ref<boolean>(false);
+  const versionLoading = ref<boolean>(false);
+  const currentVersion = ref<string>('');
+  const latestVersion = ref<string>('');
+  const hasUpdate = ref<boolean>(false);
+  const buildType = ref<string>('source');
+  const releaseInfo = ref<ReleaseInfo | null>(null);
+
   // Auto-incrementing ID for toasts
   let toastIdCounter = 0;
 
@@ -192,6 +202,56 @@ export const useAppStore = defineStore('app', () => {
     toasts.value = [];
   }
 
+  // ==================== Version Management ====================
+
+  /**
+   * Fetch version info (uses cache unless force=true)
+   * @param force - Force refresh from API
+   */
+  async function fetchVersion(force = false): Promise<VersionInfo | null> {
+    // Return cached data if available and not forcing refresh
+    if (versionLoaded.value && !force) {
+      return {
+        current_version: currentVersion.value,
+        latest_version: latestVersion.value,
+        has_update: hasUpdate.value,
+        build_type: buildType.value,
+        release_info: releaseInfo.value || undefined,
+        cached: true,
+      };
+    }
+
+    // Prevent duplicate requests
+    if (versionLoading.value) {
+      return null;
+    }
+
+    versionLoading.value = true;
+    try {
+      const data = await checkUpdatesAPI(force);
+      currentVersion.value = data.current_version;
+      latestVersion.value = data.latest_version;
+      hasUpdate.value = data.has_update;
+      buildType.value = data.build_type || 'source';
+      releaseInfo.value = data.release_info || null;
+      versionLoaded.value = true;
+      return data;
+    } catch (error) {
+      console.error('Failed to fetch version:', error);
+      return null;
+    } finally {
+      versionLoading.value = false;
+    }
+  }
+
+  /**
+   * Clear version cache (e.g., after update)
+   */
+  function clearVersionCache(): void {
+    versionLoaded.value = false;
+    hasUpdate.value = false;
+  }
+
   // ==================== Return Store API ====================
 
   return {
@@ -199,10 +259,19 @@ export const useAppStore = defineStore('app', () => {
     sidebarCollapsed,
     loading,
     toasts,
-    
+
+    // Version state
+    versionLoaded,
+    versionLoading,
+    currentVersion,
+    latestVersion,
+    hasUpdate,
+    buildType,
+    releaseInfo,
+
     // Computed
     hasActiveToasts,
-    
+
     // Actions
     toggleSidebar,
     setSidebarCollapsed,
@@ -217,5 +286,9 @@ export const useAppStore = defineStore('app', () => {
     withLoading,
     withLoadingAndError,
     reset,
+
+    // Version actions
+    fetchVersion,
+    clearVersionCache,
   };
 });
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index 361d09d9..2985a9f4 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -406,7 +406,7 @@ const lineOptions = computed(() => ({
 
 // Model chart data
 const modelChartData = computed(() => {
-  if (!modelStats.value.length) return null
+  if (!modelStats.value?.length) return null
 
   const colors = [
     '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
@@ -425,7 +425,7 @@ const modelChartData = computed(() => {
 
 // Trend chart data
 const trendChartData = computed(() => {
-  if (!trendData.value.length) return null
+  if (!trendData.value?.length) return null
 
   return {
     labels: trendData.value.map(d => d.date),
@@ -460,7 +460,7 @@ const trendChartData = computed(() => {
 
 // User trend chart data
 const userTrendChartData = computed(() => {
-  if (!userTrend.value.length) return null
+  if (!userTrend.value?.length) return null
 
   // Group by user
   const userGroups = new Map<string, { name: string; data: Map<string, number> }>()
diff --git a/frontend/src/views/user/DashboardView.vue b/frontend/src/views/user/DashboardView.vue
index 68a6b58a..5bf86a86 100644
--- a/frontend/src/views/user/DashboardView.vue
+++ b/frontend/src/views/user/DashboardView.vue
@@ -531,7 +531,7 @@ const lineOptions = computed(() => ({
 
 // Model chart data
 const modelChartData = computed(() => {
-  if (!modelStats.value.length) return null
+  if (!modelStats.value?.length) return null
 
   const colors = [
     '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
@@ -550,7 +550,7 @@ const modelChartData = computed(() => {
 
 // Trend chart data
 const trendChartData = computed(() => {
-  if (!trendData.value.length) return null
+  if (!trendData.value?.length) return null
 
   return {
     labels: trendData.value.map(d => d.date),
@@ -688,8 +688,9 @@ const loadChartData = async () => {
       usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value }),
     ])
 
-    trendData.value = trendResponse.trend
-    modelStats.value = modelResponse.models
+    // Ensure we always have arrays, even if API returns null
+    trendData.value = trendResponse.trend || []
+    modelStats.value = modelResponse.models || []
   } catch (error) {
     console.error('Error loading chart data:', error)
   }