admin_core/demo-project/_doc/组件映射修复总结.md

组件映射修复总结

✅ 问题解决

问题：所有页面都显示 404

原因：

1. 权限菜单接口返回的组件路径（如 ball/games.vue）没有映射到实际组件
2. 之前的代码将所有未知组件都设置为 Page404

解决方案

创建了完整的组件映射机制：

• ✅ 框架自动映射系统组件
• ✅ 支持用户配置业务组件映射
• ✅ 自动处理带和不带 .vue 后缀的路径
• ✅ 未映射组件显示友好提示

🔧 核心修改

1. src/utils/uiTool.js

添加组件映射功能

// 组件映射表
const componentMap = {}

// 设置组件映射
static setComponentMap(map) {
  Object.assign(componentMap, map)
}

// 获取组件
static getComponent(componentPath) {
  const normalizedPath = componentPath.replace(/\.vue$/, '')
  return componentMap[normalizedPath] || componentMap[componentPath]
}

优化 menuToRoute 方法

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 方法

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

install(Vue, options = {}) {
  const { config, ViewUI, VueRouter, Vuex, createPersistedState, componentMap } = options
  
  // 设置组件映射（包含用户传入的映射）
  this.setupComponentMap(componentMap)
  
  // ...
}

添加 addComponentMap 方法

addComponentMap(customMap) {
  uiTool.setComponentMap(customMap)
}

📊 代码优化

优化前（重复代码多）

const map = {
  'system/sys_user.vue': SysUser,
  'system/sys_user': SysUser,           // ← 重复
  'system/sys_role.vue': SysRole,
  'system/sys_role': SysRole,           // ← 重复
  // ...每个组件都写两遍
}

优化后（自动生成）

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

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

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

方法二：使用 addComponentMap

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 - 详细教程
• ../README.md - 项目说明
• ../../完整使用文档.md - 框架文档

---

修复时间: 2025-10-08
修复人员: light

现在配置完 componentMap，所有菜单页面都能正常显示了！ 🎉