fix(frontend): 菜单点击偶发无响应三处根因——①路由懒加载chunk失败被静默吞掉(新增onError自动整页重载+保险丝防循环) ②首页入口被权限接口阻塞(改乐观显示+缓存TTL10分钟+超时30s→8s) ③菜单hover预取目标页chunk(工具卡片/工作流步骤/顶部导航)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="home-root" :class="{ 'nav-permissions-loading': !permissionReady }">
|
||||
<div class="home-root">
|
||||
<header class="header">
|
||||
<span class="header-title">数富AI</span>
|
||||
<div class="header-right">
|
||||
@@ -59,7 +59,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { restoreLoginUser } from '@/shared/auth/ensure-auth'
|
||||
import { getCurrentUserAppColumnRaw, type PermissionMenuItem } from '@/shared/api/permission'
|
||||
import { getCurrentUserAppColumnRaw, readCachedAppColumnPermissions, type PermissionMenuItem } from '@/shared/api/permission'
|
||||
import { useVersionUpdate } from '@/shared/composables/useVersionUpdate'
|
||||
import { resolvePageHref } from '@/shared/page-prefix'
|
||||
|
||||
@@ -73,10 +73,10 @@ const { checking, updating, currentVersion, hasUpdate, canDownload, hint, checke
|
||||
const logoutHref = computed(() => `${resolvePageHref('/new_web_source/login.html')}?logout=1`)
|
||||
|
||||
// 桌面端首页仅保留一级入口:亚马逊 / 视频;图片已收进视频页(/image-video)二级菜单。
|
||||
// 入口先乐观显示(接口返回后按权限隐藏),避免权限接口慢时首页入口空白"点不了"。
|
||||
type PermissionState = { amazon: boolean; video: boolean }
|
||||
const permissionState = ref<PermissionState>({ amazon: false, video: false })
|
||||
const permissionState = ref<PermissionState>({ amazon: true, video: true })
|
||||
const permissionUnavailable = ref(false)
|
||||
const permissionReady = ref(false)
|
||||
|
||||
const amazonHref = computed(() => resolvePageHref('/new_web_source/amazon-console.html'))
|
||||
const videoHref = computed(() => resolvePageHref('/new_web_source/image-video.html'))
|
||||
@@ -125,18 +125,24 @@ async function loadPermissions() {
|
||||
const currentUid = getUid()
|
||||
if (!currentUid) {
|
||||
permissionUnavailable.value = true
|
||||
permissionReady.value = true
|
||||
return
|
||||
}
|
||||
// 先用本地缓存立即渲染入口(有缓存时接口失败也不让入口消失)
|
||||
const cached = readCachedAppColumnPermissions(Number(currentUid))
|
||||
if (cached) {
|
||||
permissionState.value = computePermissionState(cached)
|
||||
}
|
||||
try {
|
||||
// 经 shared/api/permission 层拉取原始权限菜单项(含本地缓存写入;接口失败走 catch)
|
||||
const items = await getCurrentUserAppColumnRaw()
|
||||
permissionState.value = computePermissionState(items)
|
||||
permissionUnavailable.value = false
|
||||
} catch {
|
||||
permissionUnavailable.value = true
|
||||
// 无缓存才退回"显示全部入口";有缓存已按缓存显示,保持现状即可
|
||||
if (!cached) {
|
||||
permissionUnavailable.value = true
|
||||
}
|
||||
}
|
||||
permissionReady.value = true
|
||||
}
|
||||
|
||||
async function loadCurrentUser() {
|
||||
@@ -339,10 +345,6 @@ body {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.home-root.nav-permissions-loading .entrance-btn {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.entrances {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
|
||||
Reference in New Issue
Block a user