feat(router): 优化 Agent路由加载策略

- 移除静态路由中的占位组件- 删除动态路由加载逻辑
- 在路由守卫中实现 Agent路由的动态加载
- 更新路由元信息和结构
This commit is contained in:
林志军
2025-07-25 10:51:04 +08:00
parent 9fa28c76cc
commit 149831ebc9
4 changed files with 76 additions and 74 deletions

View File

@ -8,6 +8,7 @@
import type { Router } from 'vue-router';
import { setRouteEmitter } from '@/utils/route-listener';
import setupUserLoginInfoGuard from './userLoginInfo';
import { MENU_GROUP_IDS } from '@/router/constants';
// import setupPermissionGuard from './permission';
function setupPageGuard(router: Router) {
@ -17,7 +18,76 @@ function setupPageGuard(router: Router) {
});
}
// 动态加载 agent 路由
let isAgentRouteLoaded = false; // 标志位
async function loadAgentRoute(router: Router) {
if (isAgentRouteLoaded) return; // 防止重复加载
try {
const agentRouter = {
path: '/agent',
name: 'Agent',
redirect: 'agent/index', // 默认重定向到第一个子路由
meta: {
locale: '扣子智能体',
requiresAuth: true,
requireLogin: true,
id: MENU_GROUP_IDS.AGENT,
roles: ['*'],
},
children: [
{
path: 'index',
name: 'AgentIndex',
component: () => import('@/views/agent/index'),
meta: {
title: '首页', // 菜单标题
icon: 'home', // 菜单图标(可选)
requiresAuth: false,
requireLogin: true,
id: MENU_GROUP_IDS.AGENT,
},
},
{
path: 'settings',
name: 'AgentSettings',
component: () => import('@/views/agent/index'),
meta: {
title: '设置', // 菜单标题
icon: 'settings', // 菜单图标(可选)
requiresAuth: true,
requireLogin: true,
id: MENU_GROUP_IDS.AGENT,
},
},
{
path: 'dashboard',
name: 'AgentDashboard',
component: () => import('@/views/agent/index'),
meta: {
title: '仪表盘', // 菜单标题
icon: 'dashboard', // 菜单图标(可选)
requiresAuth: true,
requireLogin: true,
},
},
],
};
router.addRoute(agentRouter); // 使用传递进来的 router 实例
isAgentRouteLoaded = true; // 标记路由已加载
} catch (error) {
console.error('Error loading agent route:', error);
}
}
export default function createRouteGuard(router: Router) {
loadAgentRoute(router).then(() => {
// 路由加载完成后通知菜单更新
setRouteEmitter(router.currentRoute.value);
});
setupPageGuard(router);
setupUserLoginInfoGuard(router);
// setupPermissionGuard(router);

View File

@ -4,31 +4,12 @@ import { MENU_GROUP_IDS } from '@/router/constants';
import IconRepository from '@/assets/svg/icon-repository.svg';
const COMPONENTS: AppRouteRecordRaw[] = [
// {
// path: '/agent',
// name: 'Agent',
// redirect: 'agent/index',
// meta: {
// locale: '扣子智能体',
// icon: IconRepository,
// requiresAuth: true,
// requireLogin: true,
// roles: ['*'],
// id: MENU_GROUP_IDS.AGENT,
// },
// children: [
// {
// path: 'index',
// name: 'AgentIndex',
// component: () => import('@/views/agent/index'),
// meta: {
// requiresAuth: false,
// requireLogin: true,
// },
// }
//
// ],
// },
{
path: '/agent',
name: 'AgentPlaceholder',
component: () => Promise.resolve({ template: '<router-view />' }), // 占位组件
},
];
export default COMPONENTS;

View File

@ -1,46 +0,0 @@
import { getCategoriesMenus } from '@/api/all/agent';
import type { AppRouteRecordRaw } from '../types';
import { MENU_GROUP_IDS } from '@/router/constants';
import IconRepository from '@/assets/svg/icon-repository.svg';
import { IconBookmark } from '@arco-design/web-vue/es/icon';
export const loadDynamicMenus = async (routerInstance) => {
try {
const { code, data } = await getCategoriesMenus();
let router = [
{
path: '/repository233',
name: 'Repository',
redirect: 'repository/brandMaterials',
meta: {
locale: '品牌资产管理',
icon: IconRepository,
requiresAuth: true,
requireLogin: true,
roles: ['*'],
id: MENU_GROUP_IDS.PROPERTY_ID,
},
children: [
{
path: 'brandMaterials',
name: 'RepositoryBrandMaterials',
meta: {
locale: '品牌信息',
requiresAuth: true,
requireLogin: true,
roles: ['*'],
},
component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
},
],
},
];
// 添加子路由到名为 Agent 的父路由下
router.forEach(route => {
routerInstance.addRoute('Agent', route);
});
} catch (error) {
console.error('Failed to load dynamic menus:', error);
}
};