- 删除 frontend/src/views/systemMonitor/2026-04-22-disk-monitor-design.md 设计文档 - 删除 frontend/src/views/tools/addLedger/API_DEBUG.md 调试文档 - 在 AGENTS.md 中新增前端页面结构归档章节,规范复杂工具页结构 - 明确 index.vue、components/、utils/ 职责边界和拆分原则 - 规定页面级类型和 contract 脚本管理方式 - 统一复杂页面拆分优先顺序和注意事项
188 lines
6.1 KiB
TypeScript
188 lines
6.1 KiB
TypeScript
import router from '@/routers'
|
|
import { LOGIN_URL } from '@/config'
|
|
import { type RouteRecordRaw } from 'vue-router'
|
|
import { ElNotification } from 'element-plus'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import { useAuthStore } from '@/stores/modules/auth'
|
|
|
|
const modules = import.meta.glob('@/views/**/*.vue')
|
|
const VIEWS_ALIAS_PREFIX = '@/views'
|
|
const VIEWS_SRC_PREFIX = '/src/views'
|
|
const COMPONENT_PATH_ALIASES: Record<string, string> = {
|
|
// 后端菜单沿用 event-list 模块名时,前端实际页面目录为 eventList。
|
|
'/event/event-list': '/event/eventList',
|
|
'/event/event-list/index': '/event/eventList/index'
|
|
}
|
|
const STATIC_ROUTE_NAMES = new Set([
|
|
'layout',
|
|
'login',
|
|
'home',
|
|
'tools',
|
|
'toolWaveform',
|
|
'toolMmsMapping',
|
|
'toolAddData',
|
|
'toolAddLedger',
|
|
'eventList',
|
|
'systemMonitor',
|
|
'diskMonitor',
|
|
'403',
|
|
'404',
|
|
'500'
|
|
])
|
|
|
|
let isInitializing = false
|
|
|
|
/**
|
|
* 清除已有的动态路由,避免重复注入。
|
|
*/
|
|
const clearDynamicRoutes = () => {
|
|
const routes = router.getRoutes()
|
|
routes.forEach(route => {
|
|
if (route.name && !STATIC_ROUTE_NAMES.has(String(route.name))) {
|
|
router.removeRoute(route.name)
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 统一菜单 component 配置格式,只允许映射到 views 目录。
|
|
*/
|
|
const normalizeComponentPath = (path: string) => {
|
|
let normalizedPath = path.trim().replace(/\\/g, '/')
|
|
|
|
if (normalizedPath.startsWith(VIEWS_ALIAS_PREFIX)) {
|
|
normalizedPath = normalizedPath.slice(VIEWS_ALIAS_PREFIX.length)
|
|
} else if (normalizedPath.startsWith(VIEWS_SRC_PREFIX)) {
|
|
normalizedPath = normalizedPath.slice(VIEWS_SRC_PREFIX.length)
|
|
} else if (normalizedPath.startsWith('src/views')) {
|
|
normalizedPath = normalizedPath.slice('src/views'.length)
|
|
}
|
|
|
|
if (!normalizedPath.startsWith('/')) {
|
|
normalizedPath = '/' + normalizedPath
|
|
}
|
|
if (normalizedPath.endsWith('.vue')) {
|
|
normalizedPath = normalizedPath.slice(0, -4)
|
|
}
|
|
if (normalizedPath.length > 1 && normalizedPath.endsWith('/')) {
|
|
normalizedPath = normalizedPath.slice(0, -1)
|
|
}
|
|
|
|
return COMPONENT_PATH_ALIASES[normalizedPath] ?? normalizedPath
|
|
}
|
|
|
|
/**
|
|
* 根据菜单 component 路径查找对应页面模块。
|
|
* 兼容菜单资源里常见的多种写法,避免因为前缀或 index 差异导致误判。
|
|
*/
|
|
const resolveComponentModule = (path: string) => {
|
|
const normalizedPath = normalizeComponentPath(path)
|
|
const viewPath = normalizedPath.endsWith('/index') ? normalizedPath.slice(0, -'/index'.length) : normalizedPath
|
|
const candidatePaths = Array.from(
|
|
new Set([
|
|
`${VIEWS_ALIAS_PREFIX}${normalizedPath}.vue`,
|
|
`${VIEWS_ALIAS_PREFIX}${normalizedPath}/index.vue`,
|
|
`${VIEWS_ALIAS_PREFIX}${viewPath}/index.vue`,
|
|
`${VIEWS_SRC_PREFIX}${normalizedPath}.vue`,
|
|
`${VIEWS_SRC_PREFIX}${normalizedPath}/index.vue`,
|
|
`${VIEWS_SRC_PREFIX}${viewPath}/index.vue`
|
|
])
|
|
)
|
|
|
|
for (const candidatePath of candidatePaths) {
|
|
if (candidatePath in modules) {
|
|
return {
|
|
moduleLoader: modules[candidatePath],
|
|
resolvedPath: candidatePath
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
moduleLoader: undefined,
|
|
resolvedPath: candidatePaths
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 初始化动态路由。
|
|
*/
|
|
export const initDynamicRouter = async () => {
|
|
if (isInitializing) return Promise.reject(new Error('Dynamic router initialization in progress'))
|
|
|
|
isInitializing = true
|
|
const userStore = useUserStore()
|
|
const authStore = useAuthStore()
|
|
const unresolvedRoutes: Array<{ name?: string; path?: string; component?: string; candidates: string[] }> = []
|
|
|
|
try {
|
|
await authStore.getAuthMenuList()
|
|
await authStore.getAuthButtonList()
|
|
|
|
if (!authStore.authMenuListGet.length) {
|
|
ElNotification({
|
|
title: '无权限访问',
|
|
message: '当前账号无任何菜单权限,请联系系统管理员',
|
|
type: 'warning',
|
|
duration: 3000
|
|
})
|
|
userStore.setAccessToken('')
|
|
userStore.setRefreshToken('')
|
|
userStore.setExp(0)
|
|
await router.replace(LOGIN_URL)
|
|
return Promise.reject('No permission')
|
|
}
|
|
|
|
clearDynamicRoutes()
|
|
|
|
for (const item of authStore.flatMenuListGet) {
|
|
if (item.children) delete item.children
|
|
if (item.name && STATIC_ROUTE_NAMES.has(String(item.name))) {
|
|
continue
|
|
}
|
|
|
|
// 动态菜单组件必须先映射成真实页面模块,否则 addRoute 后会直接落到 404。
|
|
if (item.component && typeof item.component === 'string') {
|
|
const { moduleLoader, resolvedPath } = resolveComponentModule(item.component)
|
|
if (moduleLoader) {
|
|
item.component = moduleLoader
|
|
} else {
|
|
unresolvedRoutes.push({
|
|
name: item.name,
|
|
path: item.path,
|
|
component: item.component,
|
|
candidates: resolvedPath
|
|
})
|
|
continue
|
|
}
|
|
}
|
|
|
|
if (
|
|
typeof item.path === 'string' &&
|
|
(typeof item.component === 'function' || typeof item.redirect === 'string')
|
|
) {
|
|
const routeItem = item as unknown as RouteRecordRaw
|
|
if (item.meta?.isFull) {
|
|
router.addRoute(routeItem)
|
|
} else {
|
|
router.addRoute('layout', routeItem)
|
|
}
|
|
} else {
|
|
console.warn('Invalid route item:', item)
|
|
}
|
|
}
|
|
|
|
if (unresolvedRoutes.length) {
|
|
console.error('[dynamic-router] unresolved route components', unresolvedRoutes)
|
|
}
|
|
} catch (error) {
|
|
userStore.setAccessToken('')
|
|
userStore.setRefreshToken('')
|
|
userStore.setExp(0)
|
|
await router.replace(LOGIN_URL)
|
|
return Promise.reject(error)
|
|
} finally {
|
|
isInitializing = false
|
|
}
|
|
}
|