fix: 修复前端多个 bug
1. 版本号闪烁问题 - 将版本信息缓存到 Pinia store,避免每次路由切换都重新请求 - 添加加载占位符,版本为空时显示骨架屏 2. 管理员登录跳转问题 - 管理员登录后现在正确跳转到 /admin/dashboard - 普通用户仍跳转到 /dashboard 3. Dashboard 页面空白报错 - 修复 API 返回 null 时访问 .length 导致的 TypeError - 为 computed 属性添加可选链操作符保护 - 为数据赋值添加空数组默认值
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user