# 权限菜单组件配置指南

## 🎯 核心问题

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

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

## 📝 配置步骤

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

后端接口返回的菜单数据示例：
```json
{
  "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 中配置组件映射

```javascript
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 时配置（推荐）

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

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

### 方式二：使用 addComponentMap 方法

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

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

**适用场景**：
- 需要动态添加组件映射
- 分模块配置

## 📋 完整示例

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

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

```javascript
// 权限菜单返回的组件列表：
// - 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 配置

```javascript
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. 路径命名规则

**后端返回**：
```json
{ "component": "ball/games.vue" }
```

**项目文件**：
```
src/views/ball/games.vue
```

**配置映射**（不需要 .vue 后缀）：
```javascript
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：批量导入组件

```javascript
// 按模块组织导入
// 球局模块
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：使用对象展开

```javascript
// 定义模块组件映射
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：注释待开发的组件

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

## 📊 配置流程图

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

## 🚀 实战示例

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

#### 1. 后端返回的菜单
```json
{
  "id": 123,
  "name": "球局表",
  "path": "games",
  "component": "ball/games.vue",
  "type": "页面"
}
```

#### 2. 创建组件文件
```vue
<!-- 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 中配置
```javascript
// 导入
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` - 热门城市

## 🎯 推荐配置模板

```javascript
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](../README.md) - 项目说明
- [../CHANGELOG.md](../CHANGELOG.md) - 更新日志
- [../../完整使用文档.md](../../完整使用文档.md) - 框架文档

---

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