1

demo-project/src/main.js

@@ -14,8 +14,13 @@ import config from './config'
 // 引入根组件
 import App from './App.vue'
 
-// 引入业务页面（可选）
+// 引入业务页面（根据后端权限菜单接口返回的组件路径导入）
 import ProductList from './views/business/product_list.vue'
+// 根据你的权限菜单接口，导入所有可能用到的业务组件：
+// import GamesComponent from './views/ball/games.vue'
+// import PayOrdersComponent from './views/order/pay_orders.vue'
+// import WchUsersComponent from './views/ball/wch_users.vue'
+// ... 导入更多业务组件
 
 // 🎉 使用框架 - 自动完成所有初始化
 Vue.use(AdminFramework, {
@@ -23,17 +28,19 @@ Vue.use(AdminFramework, {
   ViewUI,
   VueRouter,
   Vuex,
-  createPersistedState
+  createPersistedState,
-})
+  // ✅ 在这里一次性注册所有业务组件映射
-
+  componentMap: {
-// 添加自定义组件映射（用于权限菜单中的组件路径）
+    // 业务组件映射（根据后端菜单中的 component 字段配置）
-// 当后端返回的菜单包含这些路径时，会自动加载对应组件
+    'business/product_list': ProductList
-AdminFramework.addComponentMap({
+    // 根据权限菜单接口返回的 component 字段添加映射：
-  'business/product_list.vue': ProductList,
+    // 'ball/games': GamesComponent,
-  'business/product_list': ProductList
+    // 'order/pay_orders': PayOrdersComponent,
-  // 如果有更多业务组件，在这里添加：
+    // 'ball/wch_users': WchUsersComponent,
-  // 'ball/games.vue': GamesComponent,
+    // 'order/wch_wallets': WchWalletsComponent,
-  // 'order/pay_orders.vue': PayOrdersComponent,
+    // 'users/user_follows': UserFollowsComponent,
+    // ... 添加更多业务组件
+  }
 })
 
 // 添加自定义业务路由（手动添加的路由）

src/index.js

@@ -115,12 +115,13 @@ class AdminFramework {
    * @param {Object} options.VueRouter - VueRouter 实例（可选）
    * @param {Object} options.Vuex - Vuex 实例（可选）
    * @param {Function} options.createPersistedState - vuex-persistedstate（可选）
+   * @param {Object} options.componentMap - 自定义组件映射表（可选）
    */
   install(Vue, options = {}) {
     if (this.installed) return
     this.installed = true
 
-    const { config = {}, ViewUI, VueRouter, Vuex, createPersistedState } = options
+    const { config = {}, ViewUI, VueRouter, Vuex, createPersistedState, componentMap } = options
     this.config = config
 
     // 自动注册 ViewUI
@@ -147,8 +148,8 @@ class AdminFramework {
     // 自动注册全局组件
     this.registerGlobalComponents(Vue)
     
-    // 自动设置组件映射表
+    // 自动设置组件映射表（包含外部传入的映射）
-    this.setupComponentMap()
+    this.setupComponentMap(componentMap)
 
     // 如果提供了 Vuex，自动创建 Store
     if (Vuex && !this.store) {
@@ -192,9 +193,10 @@ class AdminFramework {
   
   /**
    * 设置组件映射表（将后端返回的路径映射到实际组件）
+   * @param {Object} customMap - 外部传入的自定义组件映射
    */
-  setupComponentMap() {
+  setupComponentMap(customMap = {}) {
-    // 组件列表：路径 => 组件
+    // 框架内置组件列表：路径 => 组件
     const components = {
       'home/index': HomePage,
       'system/sys_log': SysLog,
@@ -203,14 +205,17 @@ class AdminFramework {
       'system/sys_user': SysUser,
       'system_high/sys_control': SysControl,
       'system_high/sys_menu': SysMenu,
-      'system_high/sys_title': SysTitle
+      'system_high/sys_title': SysTitle,
+      // 合并外部传入的组件映射
+      ...customMap
     }
     
     // 自动生成带 .vue 和不带 .vue 的映射
     const map = {}
     Object.keys(components).forEach(path => {
-      map[path] = components[path]
+      const cleanPath = path.replace(/\.vue$/, '')
-      map[path + '.vue'] = components[path]
+      map[cleanPath] = components[path]
+      map[cleanPath + '.vue'] = components[path]
     })
     
     uiTool.setComponentMap(map)