1
This commit is contained in:
张成
143
demo-project/_doc/快速配置组件映射.md
Normal file
143
demo-project/_doc/快速配置组件映射.md
Normal file
@@ -0,0 +1,143 @@
|
||||
# 快速配置组件映射
|
||||
|
||||
## 🎯 一句话说明
|
||||
|
||||
**在 `Vue.use()` 时传入 `componentMap` 参数，将后端权限菜单中的组件路径映射到实际组件。**
|
||||
|
||||
## 📝 三步配置
|
||||
|
||||
### 步骤1：查看权限菜单接口
|
||||
|
||||
查看后端接口返回的所有 `component` 字段：
|
||||
|
||||
```json
|
||||
{
|
||||
"data": [
|
||||
{ "component": "ball/games.vue" },
|
||||
{ "component": "order/pay_orders.vue" },
|
||||
{ "component": "ball/wch_users.vue" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 步骤2：创建并导入组件
|
||||
|
||||
```javascript
|
||||
// src/main.js
|
||||
import GamesComponent from './views/ball/games.vue'
|
||||
import PayOrdersComponent from './views/order/pay_orders.vue'
|
||||
import WchUsersComponent from './views/ball/wch_users.vue'
|
||||
```
|
||||
|
||||
### 步骤3：配置映射
|
||||
|
||||
```javascript
|
||||
Vue.use(AdminFramework, {
|
||||
config,
|
||||
ViewUI,
|
||||
VueRouter,
|
||||
Vuex,
|
||||
createPersistedState,
|
||||
componentMap: {
|
||||
'ball/games': GamesComponent,
|
||||
'order/pay_orders': PayOrdersComponent,
|
||||
'ball/wch_users': WchUsersComponent
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## ✅ 完成！
|
||||
|
||||
现在权限菜单中的所有业务页面都能正常显示了。
|
||||
|
||||
## 📋 配置模板
|
||||
|
||||
```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: 根据权限菜单接口，导入所有业务组件
|
||||
// import XXXComponent from './views/xxx/xxx.vue'
|
||||
|
||||
Vue.use(AdminFramework, {
|
||||
config,
|
||||
ViewUI,
|
||||
VueRouter,
|
||||
Vuex,
|
||||
createPersistedState,
|
||||
componentMap: {
|
||||
// TODO: 配置组件映射
|
||||
// 'xxx/xxx': XXXComponent
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 💡 关键要点
|
||||
|
||||
### 1. 路径不需要 .vue 后缀
|
||||
|
||||
```javascript
|
||||
// ✅ 正确
|
||||
componentMap: {
|
||||
'ball/games': GamesComponent
|
||||
}
|
||||
|
||||
// ❌ 错误（虽然也能用，但不推荐）
|
||||
componentMap: {
|
||||
'ball/games.vue': GamesComponent
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 系统组件无需配置
|
||||
|
||||
这些已自动映射，**不需要**在 componentMap 中配置：
|
||||
- `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`
|
||||
|
||||
### 3. 未映射的组件会显示提示
|
||||
|
||||
如果组件没有配置映射，页面会显示：
|
||||
```
|
||||
⚠️ 警告
|
||||
页面组件未加载: ball/games.vue
|
||||
请在项目中创建此组件或在组件映射表中注册
|
||||
```
|
||||
|
||||
## 📚 完整文档
|
||||
|
||||
查看详细说明：[权限菜单组件配置指南.md](./权限菜单组件配置指南.md)
|
||||
|
||||
---
|
||||
|
||||
**配置完成后，所有权限菜单中的页面都能正常显示！** 🎉
|
||||
|
||||
575
demo-project/_doc/权限菜单组件配置指南.md
Normal file
575
demo-project/_doc/权限菜单组件配置指南.md
Normal file
@@ -0,0 +1,575 @@
|
||||
# 权限菜单组件配置指南
|
||||
|
||||
## 🎯 核心问题
|
||||
|
||||
**问题**：后端权限菜单接口返回的组件路径需要映射到实际组件，否则会显示 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) - 框架文档
|
||||
|
||||
---
|
||||
|
||||
**配置完成后，重启项目即可看到所有权限菜单中的页面！** 🎉
|
||||
|
||||
233
demo-project/_doc/组件映射修复总结.md
Normal file
233
demo-project/_doc/组件映射修复总结.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# 组件映射修复总结
|
||||
|
||||
## ✅ 问题解决
|
||||
|
||||
### 问题：所有页面都显示 404
|
||||
|
||||
**原因**：
|
||||
1. 权限菜单接口返回的组件路径（如 `ball/games.vue`）没有映射到实际组件
|
||||
2. 之前的代码将所有未知组件都设置为 `Page404`
|
||||
|
||||
### 解决方案
|
||||
|
||||
创建了完整的组件映射机制：
|
||||
- ✅ 框架自动映射系统组件
|
||||
- ✅ 支持用户配置业务组件映射
|
||||
- ✅ 自动处理带和不带 `.vue` 后缀的路径
|
||||
- ✅ 未映射组件显示友好提示
|
||||
|
||||
## 🔧 核心修改
|
||||
|
||||
### 1. `src/utils/uiTool.js`
|
||||
|
||||
#### 添加组件映射功能
|
||||
|
||||
```javascript
|
||||
// 组件映射表
|
||||
const componentMap = {}
|
||||
|
||||
// 设置组件映射
|
||||
static setComponentMap(map) {
|
||||
Object.assign(componentMap, map)
|
||||
}
|
||||
|
||||
// 获取组件
|
||||
static getComponent(componentPath) {
|
||||
const normalizedPath = componentPath.replace(/\.vue$/, '')
|
||||
return componentMap[normalizedPath] || componentMap[componentPath]
|
||||
}
|
||||
```
|
||||
|
||||
#### 优化 menuToRoute 方法
|
||||
|
||||
```javascript
|
||||
static menuToRoute(menus, ParentView, Page404) {
|
||||
menus.forEach(item => {
|
||||
if (item.type === '页面') {
|
||||
// 从映射表获取组件
|
||||
let component = uiTool.getComponent(item.component)
|
||||
|
||||
if (component) {
|
||||
item.component = component // ✅ 使用映射的组件
|
||||
} else {
|
||||
// 显示友好提示
|
||||
console.warn(`组件未找到: ${item.component}`)
|
||||
item.component = PlaceholderComponent
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `src/index.js`
|
||||
|
||||
#### 添加 setupComponentMap 方法
|
||||
|
||||
```javascript
|
||||
setupComponentMap(customMap = {}) {
|
||||
// 框架内置组件
|
||||
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,
|
||||
// 合并用户传入的业务组件
|
||||
...customMap
|
||||
}
|
||||
|
||||
// 自动生成带 .vue 和不带 .vue 的映射
|
||||
const map = {}
|
||||
Object.keys(components).forEach(path => {
|
||||
const cleanPath = path.replace(/\.vue$/, '')
|
||||
map[cleanPath] = components[path]
|
||||
map[cleanPath + '.vue'] = components[path]
|
||||
})
|
||||
|
||||
uiTool.setComponentMap(map)
|
||||
}
|
||||
```
|
||||
|
||||
#### 支持在 install 时传入 componentMap
|
||||
|
||||
```javascript
|
||||
install(Vue, options = {}) {
|
||||
const { config, ViewUI, VueRouter, Vuex, createPersistedState, componentMap } = options
|
||||
|
||||
// 设置组件映射（包含用户传入的映射）
|
||||
this.setupComponentMap(componentMap)
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
#### 添加 addComponentMap 方法
|
||||
|
||||
```javascript
|
||||
addComponentMap(customMap) {
|
||||
uiTool.setComponentMap(customMap)
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 代码优化
|
||||
|
||||
### 优化前（重复代码多）
|
||||
|
||||
```javascript
|
||||
const map = {
|
||||
'system/sys_user.vue': SysUser,
|
||||
'system/sys_user': SysUser, // ← 重复
|
||||
'system/sys_role.vue': SysRole,
|
||||
'system/sys_role': SysRole, // ← 重复
|
||||
// ...每个组件都写两遍
|
||||
}
|
||||
```
|
||||
|
||||
### 优化后（自动生成）
|
||||
|
||||
```javascript
|
||||
const components = {
|
||||
'system/sys_user': SysUser,
|
||||
'system/sys_role': SysRole
|
||||
}
|
||||
|
||||
// 自动生成带 .vue 的映射
|
||||
Object.keys(components).forEach(path => {
|
||||
map[path] = components[path]
|
||||
map[path + '.vue'] = components[path]
|
||||
})
|
||||
```
|
||||
|
||||
**代码量减少 50%** ✅
|
||||
|
||||
## 🚀 使用方法
|
||||
|
||||
### 方法一：在 Vue.use 时配置（推荐）
|
||||
|
||||
```javascript
|
||||
import GamesComponent from './views/ball/games.vue'
|
||||
|
||||
Vue.use(AdminFramework, {
|
||||
config,
|
||||
ViewUI,
|
||||
VueRouter,
|
||||
Vuex,
|
||||
createPersistedState,
|
||||
componentMap: {
|
||||
'ball/games': GamesComponent
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 方法二：使用 addComponentMap
|
||||
|
||||
```javascript
|
||||
Vue.use(AdminFramework, { config, ViewUI, VueRouter, Vuex, createPersistedState })
|
||||
|
||||
AdminFramework.addComponentMap({
|
||||
'ball/games': GamesComponent
|
||||
})
|
||||
```
|
||||
|
||||
## 📝 配置清单
|
||||
|
||||
根据你的权限菜单接口，需要配置的业务组件：
|
||||
|
||||
### 球局模块
|
||||
- [ ] `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` - 热门城市
|
||||
|
||||
## 🎯 已自动映射（无需配置）
|
||||
|
||||
- ✅ `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` - 系统标题设置
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- [快速配置组件映射.md](./快速配置组件映射.md) - 快速指南
|
||||
- [权限菜单组件配置指南.md](./权限菜单组件配置指南.md) - 详细教程
|
||||
- [../README.md](../README.md) - 项目说明
|
||||
- [../../完整使用文档.md](../../完整使用文档.md) - 框架文档
|
||||
|
||||
---
|
||||
|
||||
**修复时间**: 2025-10-08
|
||||
**修复人员**: light
|
||||
|
||||
**现在配置完 componentMap，所有菜单页面都能正常显示了！** 🎉
|
||||
|
||||
Reference in New Issue
Block a user