import type { MenuOption } from 'naive-ui' import { router } from '@/router' import { staticRoutes } from '@/router/routes.static' import { fetchUserRoutes } from '@/service' import { $t } from '@/utils' import { coiMsgError } from '@/utils/coi' import { createMenus, createRoutes, generateCacheRoutes } from './helper' interface RoutesStatus { isInitAuthRoute: boolean menus: MenuOption[] rowRoutes: AppRoute.RowRoute[] backendRoutes: AppRoute.BackendRoute[] activeMenu: string | null cacheRoutes: string[] } export const useRouteStore = defineStore('route-store', { state: (): RoutesStatus => { return { isInitAuthRoute: false, activeMenu: null, menus: [], rowRoutes: [], backendRoutes: [], cacheRoutes: [], } }, actions: { resetRouteStore() { this.resetRoutes() this.$reset() }, resetRoutes() { if (router.hasRoute('appRoot')) router.removeRoute('appRoot') }, // set the currently highlighted menu key setActiveMenu(key: string) { this.activeMenu = key }, async initRouteInfo() { // 始终加载静态路由(仪表盘等基础路由) const allRoutes = [...staticRoutes] if (import.meta.env.VITE_ROUTE_LOAD_MODE === 'dynamic') { try { // 获取动态路由并合并 const { isSuccess, data } = await fetchUserRoutes() if (isSuccess && data) { // 将动态路由添加到静态路由中 const dynamicRoutes = Array.isArray(data) ? data : [] console.warn('成功获取动态路由:', dynamicRoutes.length, '个') // 保持动态路由的原始ID关系,不需要修改ID,因为静态路由和动态路由可以共存 const processedDynamicRoutes = dynamicRoutes return [...allRoutes, ...processedDynamicRoutes] } else { console.warn('动态路由获取失败,只使用静态路由') } } catch (error) { console.error('动态路由获取异常,只使用静态路由:', error) } } return allRoutes }, async initAuthRoute() { this.isInitAuthRoute = false // Initialize route information const routeData = await this.initRouteInfo() if (!routeData) { coiMsgError($t(`app.getRouteError`)) return } // 检查是否包含动态路由数据(通过是否有menuId字段判断) const hasDynamicRoutes = routeData.some(item => 'menuId' in item) if (hasDynamicRoutes) { // 混合模式:分离静态路由和动态路由 const staticRouteData = routeData.filter(item => !('menuId' in item)) as AppRoute.RowRoute[] const dynamicRouteData = routeData.filter(item => 'menuId' in item) as AppRoute.BackendRoute[] // 保存动态路由原始数据 this.backendRoutes = dynamicRouteData // 转换动态路由为前端格式 const transformedDynamicRoutes = dynamicRouteData.map(item => ({ id: item.menuId, pid: item.parentId === 0 ? null : item.parentId, name: item.name, path: item.path, componentPath: item.component || null, redirect: item.redirect || undefined, title: item.menuName, icon: item.icon, requiresAuth: true, hide: item.isHide === '0', keepAlive: item.isKeepAlive === '0', pinTab: item.isAffix === '0', activeMenu: item.activeMenu || undefined, menuType: item.menuType as AppRoute.MenuType, href: item.isLink === '0' ? item.path : undefined, } as AppRoute.RowRoute)) // 合并静态路由和转换后的动态路由 this.rowRoutes = [...staticRouteData, ...transformedDynamicRoutes] this.cacheRoutes = generateCacheRoutes(this.rowRoutes) console.warn('混合路由模式 - 静态路由:', staticRouteData.length, '动态路由:', transformedDynamicRoutes.length) } else { // 纯静态路由模式 this.rowRoutes = routeData as AppRoute.RowRoute[] this.cacheRoutes = generateCacheRoutes(this.rowRoutes) console.warn('静态路由模式 - 路由数量:', this.rowRoutes.length) } // Generate actual route and insert const routes = createRoutes(routeData) router.addRoute(routes) // Generate side menu this.menus = createMenus(routeData) this.isInitAuthRoute = true }, }, })