1

完整使用文档.md

@@ -165,7 +165,10 @@ import createPersistedState from 'vuex-persistedstate'
 import AdminFramework from './libs/admin-framework.js'
 import App from './App.vue'
 import config from './config'
-import HomePage from './views/home/index.vue'  // 可选：自定义首页组件
+
+// 可选：导入业务组件（根据权限菜单接口的 component 字段）
+import GamesComponent from './views/ball/games.vue'
+import PayOrdersComponent from './views/order/pay_orders.vue'
 
 // 🎉 只需这一行！框架自动完成所有初始化
 Vue.use(AdminFramework, {
@@ -174,7 +177,12 @@ Vue.use(AdminFramework, {
   VueRouter,
   Vuex,
   createPersistedState,
-  HomePage  // 可选：传入自定义首页组件（不传则使用框架内置组件）
+  // ✅ 可选：配置业务组件映射（用于权限菜单）
+  componentMap: {
+    'ball/games': GamesComponent,
+    'order/pay_orders': PayOrdersComponent
+    // 添加更多业务组件...
+  }
 })
 
 // 创建 Vue 实例
@@ -1168,6 +1176,94 @@ Vue.use(AdminFramework, { ... })
 
 框架使用时样式会自动注入到页面中，无需任何额外配置！
 
+### Q14: 权限菜单中的业务页面显示 404 怎么办？
+
+A: **需要配置组件映射表。**
+
+**问题原因**：
+后端权限菜单接口返回的组件路径（如 `ball/games.vue`）需要映射到实际组件。
+
+**解决方案**：
+
+#### 方式一：在 Vue.use 时配置（推荐）
+
+```javascript
+// 1. 导入业务组件
+import GamesComponent from './views/ball/games.vue'
+import PayOrdersComponent from './views/order/pay_orders.vue'
+
+// 2. 配置映射
+Vue.use(AdminFramework, {
+  config,
+  ViewUI,
+  VueRouter,
+  Vuex,
+  createPersistedState,
+  // ✅ 配置组件映射
+  componentMap: {
+    'ball/games': GamesComponent,
+    'order/pay_orders': PayOrdersComponent
+    // 根据权限菜单接口的 component 字段添加...
+  }
+})
+```
+
+#### 方式二：使用 addComponentMap 方法
+
+```javascript
+// 先使用框架
+Vue.use(AdminFramework, { config, ViewUI, VueRouter, Vuex, createPersistedState })
+
+// 然后添加映射
+AdminFramework.addComponentMap({
+  'ball/games': GamesComponent,
+  'order/pay_orders': PayOrdersComponent
+})
+```
+
+#### 框架已自动映射的系统组件
+
+以下组件**无需配置**，框架已自动映射：
+- ✅ `home/index.vue` - 主页
+- ✅ `system/sys_user.vue` - 用户管理
+- ✅ `system/sys_role.vue` - 角色管理
+- ✅ `system/sys_log.vue` - 日志管理
+- ✅ `system/sys_param_setup.vue` - 参数设置
+- ✅ `system_high/sys_menu.vue` - 菜单管理
+- ✅ `system_high/sys_control.vue` - 控制器管理
+- ✅ `system_high/sys_title.vue` - 系统标题设置
+
+#### 配置技巧
+
+**路径规则**：
+- 后端返回：`"component": "ball/games.vue"`
+- 配置映射：`'ball/games': GamesComponent`（不需要 `.vue` 后缀）
+- 框架会自动处理带和不带 `.vue` 的路径
+
+**完整示例**：
+```javascript
+// 根据你的权限菜单接口，导入所有可能用到的组件
+import GamesComponent from './views/ball/games.vue'
+import WchUsersComponent from './views/ball/wch_users.vue'
+import PayOrdersComponent from './views/order/pay_orders.vue'
+
+Vue.use(AdminFramework, {
+  config,
+  ViewUI,
+  VueRouter,
+  Vuex,
+  createPersistedState,
+  componentMap: {
+    'ball/games': GamesComponent,
+    'ball/wch_users': WchUsersComponent,
+    'order/pay_orders': PayOrdersComponent
+  }
+})
+```
+
+**未映射的组件**：
+会显示友好提示：`页面组件未加载: xxx.vue，请在项目中创建此组件或在组件映射表中注册`
+
 ---
 
 ## 📦 完整的项目结构示例