oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: 修复前端多个 bug

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

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

3. Dashboard 页面空白报错
   - 修复 API 返回 null 时访问 .length 导致的 TypeError
   - 为 computed 属性添加可选链操作符保护
   - 为数据赋值添加空数组默认值
This commit is contained in:
shaw
2025-12-18 22:11:29 +08:00
parent 9b4fc42457
commit 145171464f
5 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/common/VersionBadge.vue
View File

@@ -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);
});

5
frontend/src/router/index.ts
View File

@@ -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();

79
frontend/src/stores/app.ts
View File

@@ -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,
};
});

6
frontend/src/views/admin/DashboardView.vue
View File

@@ -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> }>()

9
frontend/src/views/user/DashboardView.vue
View File

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