admin_core/demo-project/_doc/权限菜单组件配置指南.md

权限菜单组件配置指南

🎯 核心问题

问题：后端权限菜单接口返回的组件路径需要映射到实际组件，否则会显示 404。

解决：在 Vue.use() 时传入 componentMap 参数，一次性注册所有业务组件。

📝 配置步骤

第一步：查看权限菜单接口返回的组件路径

后端接口返回的菜单数据示例：

{
  "code": 0,
  "data": [
    { "component": "home/index.vue" },
    { "component": "system/sys_user.vue" },
    { "component": "ball/games.vue" },
    { "component": "order/pay_orders.vue" },
    { "component": "ball/wch_users.vue" }
  ]
}

第二步：创建对应的业务组件

在项目中创建对应的组件文件：

src/views/
├── ball/
│   ├── games.vue
│   └── wch_users.vue
└── order/
    └── pay_orders.vue

第三步：在 main.js 中配置组件映射

import Vue from 'vue'
import AdminFramework from '../../src/index.js'
import config from './config'

// ✅ 导入所有业务组件（根据权限菜单接口的 component 字段）
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, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  // ✅ 一次性注册所有组件映射
  componentMap: {
    'ball/games': GamesComponent,
    'order/pay_orders': PayOrdersComponent,
    'ball/wch_users': WchUsersComponent
    // 添加更多业务组件...
  }
})

// 创建 Vue 实例
new Vue({
  el: '#app',
  router: AdminFramework.router,
  store: AdminFramework.store,
  render: h => h(App),
  mounted() {
    // 设置权限菜单（会自动加载映射的组件）
    this.$store.dispatch('user/setAuthorityMenus', {
      Main: AdminFramework.Main,
      ParentView: AdminFramework.ParentView,
      Page404: AdminFramework.Page404
    })
  }
})

🔧 两种配置方式

方式一：在 Vue.use 时配置（推荐）

Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    'ball/games': GamesComponent,
    'order/pay_orders': PayOrdersComponent
  }
})

优点：

• ✅ 集中配置，清晰明了
• ✅ 在框架初始化时就完成映射
• ✅ 代码简洁

方式二：使用 addComponentMap 方法

Vue.use(AdminFramework, { config, ViewUI, VueRouter, Vuex, createPersistedState })

// 之后添加映射
AdminFramework.addComponentMap({
  'ball/games': GamesComponent,
  'order/pay_orders': PayOrdersComponent
})

适用场景：

• 需要动态添加组件映射
• 分模块配置

📋 完整示例

根据你的权限菜单接口配置

查看你的接口返回数据，列出所有 component 字段：

// 权限菜单返回的组件列表：
// - home/index.vue
// - system/sys_user.vue
// - system/sys_role.vue
// - system_high/sys_menu.vue
// - system/sys_log.vue
// - system/sys_param_setup.vue
// - ball/games.vue              ← 业务组件，需要自己创建
// - ball/wch_users.vue          ← 业务组件，需要自己创建
// - ball/venues.vue             ← 业务组件，需要自己创建
// - order/pay_orders.vue        ← 业务组件，需要自己创建
// - order/wch_wallets.vue       ← 业务组件，需要自己创建
// - users/user_follows.vue      ← 业务组件，需要自己创建

完整的 main.js 配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'
import createPersistedState from 'vuex-persistedstate'
import 'view-design/dist/styles/iview.css'

import AdminFramework from '../../src/index.js'
import config from './config'
import App from './App.vue'

// ==================== 导入业务组件 ====================
// 球局模块
import GamesComponent from './views/ball/games.vue'
import WchUsersComponent from './views/ball/wch_users.vue'
import VenuesComponent from './views/ball/venues.vue'
import GameParticipantsComponent from './views/ball/game_participants.vue'
import GameCommentsComponent from './views/ball/game_comments.vue'

// 订单模块
import PayOrdersComponent from './views/order/pay_orders.vue'
import WchWalletsComponent from './views/order/wch_wallets.vue'
import WalletTransactionsComponent from './views/order/wallet_transactions.vue'
import TransferDetailsComponent from './views/order/transfer_details.vue'
import FrozenFundsComponent from './views/order/frozen_funds.vue'

// 用户模块
import UserFollowsComponent from './views/users/user_follows.vue'
import RecommendBlocksComponent from './views/users/recommend_blocks.vue'
import UserTrackingComponent from './views/users/user_tracking.vue'

// 资源模块
import ResourcesComponent from './views/statistics/resources.vue'
import NtrQuestionsComponent from './views/ntrp/ntr_questions.vue'
import NtrRecordsComponent from './views/ntrp/ntr_records.vue'

// 消息模块
import MsgNotificationsComponent from './views/message/msg_notifications.vue'

// 使用框架
Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  // ✅ 组件映射表
  componentMap: {
    // 球局模块
    'ball/games': GamesComponent,
    'ball/wch_users': WchUsersComponent,
    'ball/venues': VenuesComponent,
    'ball/game_participants': GameParticipantsComponent,
    'ball/game_comments': GameCommentsComponent,
    
    // 订单模块
    'order/pay_orders': PayOrdersComponent,
    'order/wch_wallets': WchWalletsComponent,
    'order/wallet_transactions': WalletTransactionsComponent,
    'order/transfer_details': TransferDetailsComponent,
    'order/frozen_funds': FrozenFundsComponent,
    
    // 用户模块
    'users/user_follows': UserFollowsComponent,
    'users/recommend_blocks': RecommendBlocksComponent,
    'users/user_tracking': UserTrackingComponent,
    
    // 资源模块
    'statistics/resources': ResourcesComponent,
    'ntrp/ntr_questions': NtrQuestionsComponent,
    'ntrp/ntr_records': NtrRecordsComponent,
    
    // 消息模块
    'message/msg_notifications': MsgNotificationsComponent
  }
})

// 创建 Vue 实例
new Vue({
  el: '#app',
  router: AdminFramework.router,
  store: AdminFramework.store,
  render: h => h(App),
  mounted() {
    AdminFramework.uiTool.setRem()
    
    // 设置权限菜单（会自动根据映射表加载组件）
    this.$store.dispatch('user/setAuthorityMenus', {
      Main: AdminFramework.Main,
      ParentView: AdminFramework.ParentView,
      Page404: AdminFramework.Page404
    })
    
    // 获取系统标题
    this.$store.dispatch('app/getSysTitle', {
      defaultTitle: 'Demo 管理系统',
      defaultLogo: ''
    })
  }
})

// 响应式适配
window.addEventListener('load', AdminFramework.uiTool.setRem)
window.addEventListener('resize', AdminFramework.uiTool.setRem)

🎯 关键要点

1. 路径命名规则

后端返回：

{ "component": "ball/games.vue" }

项目文件：

src/views/ball/games.vue

配置映射（不需要 .vue 后缀）：

componentMap: {
  'ball/games': GamesComponent  // ✅ 不需要写 .vue
}

框架会自动处理：

• ball/games ✅
• ball/games.vue ✅

2. 框架内置组件

以下组件无需配置，框架已自动映射：

• home/index.vue → HomePage
• system/sys_user.vue → SysUser
• system/sys_role.vue → SysRole
• system/sys_log.vue → SysLog
• system/sys_param_setup.vue → SysParamSetup
• system_high/sys_menu.vue → SysMenu
• system_high/sys_control.vue → SysControl
• system_high/sys_title.vue → SysTitle

3. 业务组件

需要在项目中：

1. 创建组件文件
2. 在 main.js 中导入
3. 在 componentMap 中配置

⚠️ 组件未找到的提示

如果后端返回的组件路径没有在映射表中，会显示：

┌────────────────────────────────────┐
│ ⚠️ 警告                            │
│ 页面组件未加载: ball/games.vue     │
│ 请在项目中创建此组件或在组件映射表中注册 │
└────────────────────────────────────┘

控制台也会输出：

⚠️ 组件未找到: ball/games.vue，使用占位组件

💡 快速配置技巧

技巧1：批量导入组件

// 按模块组织导入
// 球局模块
import GamesComponent from './views/ball/games.vue'
import WchUsersComponent from './views/ball/wch_users.vue'

// 订单模块
import PayOrdersComponent from './views/order/pay_orders.vue'
import WchWalletsComponent from './views/order/wch_wallets.vue'

技巧2：使用对象展开

// 定义模块组件映射
const ballComponents = {
  'ball/games': GamesComponent,
  'ball/wch_users': WchUsersComponent
}

const orderComponents = {
  'order/pay_orders': PayOrdersComponent,
  'order/wch_wallets': WchWalletsComponent
}

// 合并配置
Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    ...ballComponents,
    ...orderComponents
  }
})

技巧3：注释待开发的组件

componentMap: {
  'ball/games': GamesComponent,  // ✅ 已开发
  // 'ball/venues': VenuesComponent,  // ⏳ 待开发
  // 'order/pay_orders': PayOrdersComponent  // ⏳ 待开发
}

📊 配置流程图

后端接口返回菜单
    ↓
查看所有 component 字段
    ↓
在项目中创建对应的 .vue 文件
    ↓
在 main.js 中导入组件
    ↓
在 componentMap 中配置映射
    ↓
框架自动生成路由
    ↓
页面正常显示 ✅

🚀 实战示例

示例：添加"球局管理"页面

1. 后端返回的菜单

{
  "id": 123,
  "name": "球局表",
  "path": "games",
  "component": "ball/games.vue",
  "type": "页面"
}

2. 创建组件文件

<!-- src/views/ball/games.vue -->
<template>
  <div class="games-page">
    <h2>球局管理</h2>
    <Table :columns="columns" :data="list" />
  </div>
</template>

<script>
export default {
  name: 'games',
  data() {
    return {
      list: [],
      columns: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$http.post('ball/games/list', {})
      this.list = res.data
    }
  }
}
</script>

3. 在 main.js 中配置

// 导入
import GamesComponent from './views/ball/games.vue'

// 配置映射
Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    'ball/games': GamesComponent  // ✅ 添加映射
  }
})

4. 完成！

登录后，权限菜单中的"球局表"会自动加载 GamesComponent 组件。

📚 框架自动处理

已自动映射的系统组件

后端路径	组件	说明
home/index.vue	HomePage	主页
system/sys_user.vue	SysUser	用户管理
system/sys_role.vue	SysRole	角色管理
system/sys_log.vue	SysLog	日志管理
system/sys_param_setup.vue	SysParamSetup	参数设置
system_high/sys_menu.vue	SysMenu	菜单管理
system_high/sys_control.vue	SysControl	控制器管理
system_high/sys_title.vue	SysTitle	系统标题设置

需要手动配置的业务组件

根据你的权限菜单接口，需要配置：

• ✅ ball/games.vue - 球局表
• ✅ ball/wch_users.vue - 微信用户
• ✅ ball/venues.vue - 场地表
• ✅ ball/game_participants.vue - 球局参与者
• ✅ ball/game_comments.vue - 球局评论
• ✅ order/pay_orders.vue - 支付订单
• ✅ order/wch_wallets.vue - 用户钱包
• ✅ order/wallet_transactions.vue - 交易记录
• ✅ order/transfer_details.vue - 转账详情
• ✅ order/frozen_funds.vue - 冻结资金
• ✅ users/user_follows.vue - 用户关注
• ✅ users/recommend_blocks.vue - 推荐屏蔽
• ✅ users/user_tracking.vue - 行为追踪
• ✅ statistics/resources.vue - 图库资源表
• ✅ ntrp/ntr_questions.vue - 题库管理
• ✅ ntrp/ntr_records.vue - 测试记录
• ✅ message/msg_notifications.vue - 消息管理
• ✅ system/wch_professions.vue - 职业管理
• ✅ system/wch_cities.vue - 城市管理
• ✅ business/hot_city_qr.vue - 热门城市

🎯 推荐配置模板

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'
import createPersistedState from 'vuex-persistedstate'
import 'view-design/dist/styles/iview.css'

import AdminFramework from '../../src/index.js'
import config from './config'
import App from './App.vue'

// ==================== 导入业务组件 ====================
// TODO: 根据权限菜单接口返回的 component 字段，导入对应组件

// 使用框架
Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    // TODO: 在这里添加业务组件映射
    // 格式：'后端返回的路径（不含.vue）': 导入的组件
  }
})

// 创建 Vue 实例
new Vue({
  el: '#app',
  router: AdminFramework.router,
  store: AdminFramework.store,
  render: h => h(App),
  mounted() {
    AdminFramework.uiTool.setRem()
    
    this.$store.dispatch('user/setAuthorityMenus', {
      Main: AdminFramework.Main,
      ParentView: AdminFramework.ParentView,
      Page404: AdminFramework.Page404
    })
    
    this.$store.dispatch('app/getSysTitle', {
      defaultTitle: config.title,
      defaultLogo: ''
    })
  }
})

window.addEventListener('load', AdminFramework.uiTool.setRem)
window.addEventListener('resize', AdminFramework.uiTool.setRem)

📝 总结

✅ 优化后的优势

1. 代码简洁

   • 不需要重复写 .vue 后缀的映射
   • 框架自动生成

2. 集中配置

   • 在 Vue.use() 时一次性配置所有映射
   • 清晰明了

3. 灵活扩展

   • 可以随时使用 addComponentMap() 添加新映射
   • 支持分模块配置

🔗 相关文档

• ../README.md - 项目说明
• ../CHANGELOG.md - 更新日志
• ../../完整使用文档.md - 框架文档

---

配置完成后，重启项目即可看到所有权限菜单中的页面！ 🎉