1

demo-project/src/main.js

@@ -26,7 +26,17 @@ Vue.use(AdminFramework, {
   createPersistedState
 })
 
-// 添加自定义业务路由（可选）
+// 添加自定义组件映射（用于权限菜单中的组件路径）
+// 当后端返回的菜单包含这些路径时，会自动加载对应组件
+AdminFramework.addComponentMap({
+  'business/product_list.vue': ProductList,
+  'business/product_list': ProductList
+  // 如果有更多业务组件，在这里添加：
+  // 'ball/games.vue': GamesComponent,
+  // 'order/pay_orders.vue': PayOrdersComponent,
+})
+
+// 添加自定义业务路由（手动添加的路由）
 const businessRoutes = [
   {
     path: '/business/product',

src/index.js

@@ -147,6 +147,9 @@ class AdminFramework {
     // 自动注册全局组件
     this.registerGlobalComponents(Vue)
     
+    // 自动设置组件映射表
+    this.setupComponentMap()
+
     // 如果提供了 Vuex，自动创建 Store
     if (Vuex && !this.store) {
       this.store = this.createStore(Vuex, {}, createPersistedState)
@@ -187,6 +190,45 @@ class AdminFramework {
     Vue.component('LoginPage', LoginPage)
   }
   
+  /**
+   * 设置组件映射表（将后端返回的路径映射到实际组件）
+   */
+  setupComponentMap() {
+    // 组件列表：路径 => 组件
+    const components = {
+      'home/index': HomePage,
+      'system/sys_log': SysLog,
+      'system/sys_param_setup': SysParamSetup,
+      'system/sys_role': SysRole,
+      'system/sys_user': SysUser,
+      'system_high/sys_control': SysControl,
+      'system_high/sys_menu': SysMenu,
+      'system_high/sys_title': SysTitle
+    }
+    
+    // 自动生成带 .vue 和不带 .vue 的映射
+    const map = {}
+    Object.keys(components).forEach(path => {
+      map[path] = components[path]
+      map[path + '.vue'] = components[path]
+    })
+    
+    uiTool.setComponentMap(map)
+  }
+  
+  /**
+   * 添加自定义组件映射
+   * @param {Object} customMap - 自定义组件映射对象
+   * @example
+   * AdminFramework.addComponentMap({
+   *   'ball/games.vue': GamesComponent,
+   *   'order/pay_orders.vue': PayOrdersComponent
+   * })
+   */
+  addComponentMap(customMap) {
+    uiTool.setComponentMap(customMap)
+  }
+
   /**
    * 初始化 HTTP 配置
    * @param {Object} config - HTTP 配置

src/utils/uiTool.js

@@ -1,6 +1,32 @@
 import http from './http'
 
+// 组件映射表（将后端返回的路径映射到实际组件）
+const componentMap = {}
+
 export default class uiTool {
+  
+  /**
+   * 设置组件映射表
+   * @param {Object} map - 组件映射对象
+   */
+  static setComponentMap(map) {
+    Object.assign(componentMap, map)
+  }
+  
+  /**
+   * 根据路径获取组件
+   * @param {String} componentPath - 组件路径（如 "system/sys_user.vue"）
+   * @returns {Component} 组件或 null
+   */
+  static getComponent(componentPath) {
+    if (!componentPath) return null
+    
+    // 标准化路径（移除 .vue 后缀）
+    const normalizedPath = componentPath.replace(/\.vue$/, '')
+    
+    // 从映射表中查找
+    return componentMap[normalizedPath] || componentMap[componentPath]
+  }
   static setRem() {
     let whdef = 100 / 1920
     let bodyWidth = document.body.clientWidth
@@ -142,11 +168,29 @@ export default class uiTool {
           item.component = ParentView
         } else if (item.type === '页面' || item.type === '功能') {
           try {
-            let componentName = item.component
-            // 这里需要在使用时动态导入
-            item.componentPath = componentName
-            item.component = Page404
+            let componentPath = item.component
+            
+            // 从组件映射表中获取组件
+            let component = uiTool.getComponent(componentPath)
+            
+            if (component) {
+              // 找到了对应的组件
+              item.component = component
+            } else {
+              // 未找到组件，使用占位组件并记录路径
+              console.warn(`组件未找到: ${componentPath}，使用占位组件`)
+              item.component = {
+                render: h => h('div', { style: { padding: '20px' } }, [
+                  h('Alert', { props: { type: 'warning' } }, [
+                    h('p', `页面组件未加载: ${componentPath}`),
+                    h('p', '请在项目中创建此组件或在组件映射表中注册')
+                  ])
+                ])
+              }
+              item.componentPath = componentPath
+            }
           } catch (e) {
+            console.error('组件加载失败:', e)
             item.component = Page404
           }
         } else {
@@ -156,7 +200,8 @@ export default class uiTool {
         item.meta = {
           icon: item.icon,
           isMenu: item.is_show_menu,
-          type: item.type
+          type: item.type,
+          title: item.name
         }
 
         if (item.children && item.children.length > 0) {
@@ -168,14 +213,24 @@ export default class uiTool {
     return []
   }
 
-  static getRoutes(Main, ParentView, Page404) {
+  static getRoutes(Main, ParentView, Page404, HomePage) {
     let mainRoute = {
       path: '/',
       name: '主视图',
       redirect: '/home',
       component: Main,
       meta: { title: '首页', notCache: true },
-      children: []
+      children: [
+        // 默认 home 路由，确保登录后能跳转
+        {
+          path: '/home',
+          name: 'home',
+          meta: { title: '首页', notCache: true },
+          component: HomePage || { 
+            render: h => h('div', { style: { padding: '20px' } }, '欢迎使用管理系统') 
+          }
+        }
+      ]
     }
 
     // 从 localStorage 读取权限菜单
@@ -189,8 +244,17 @@ export default class uiTool {
         let menus = uiTool.transformTree(authorityMenus)
         let curRoutes = uiTool.menuToRoute(menus, ParentView, Page404)
 
-        // 使用后端返回的路由（包括首页）
-        mainRoute.children = curRoutes
+        // 合并权限路由，保留默认 home 路由
+        const homeRoute = mainRoute.children.find(r => r.name === 'home')
+        const hasHome = curRoutes.some(r => r.name === 'home')
+        
+        if (hasHome) {
+          // 如果权限路由中有 home，使用权限路由的 home
+          mainRoute.children = curRoutes
+        } else {
+          // 如果权限路由中没有 home，保留默认 home 并添加其他路由
+          mainRoute.children = [homeRoute, ...curRoutes]
+        }
       }
     }