Files
WonderQ-Project/docs/decisions/0003-admin-menu-editor.md
duanshuwen 4c245f0d1f feat(admin, admin-ui): 实现RuoYi风格后台菜单管理,优化媒体资源处理
新增服务端菜单校验与归一化逻辑,完善菜单相关Schema;前端实现条件渲染的菜单编辑器,支持搜索式图标选择器与父级树过滤。新增媒体URL统一处理工具修复管理端本地静态资源路径映射问题,更新全部相关文档、技术决策记录与测试用例。本次变更不影响WonderQ-MiniAPP端。
2026-08-27 09:08:05 +08:00

1.5 KiB

0003 后台菜单父子树与 RuoYi 风格编辑器

状态

已采纳。

决策

WonderQ 菜单继续使用服务端 AdminMenu.parentId 自引用关系,并由 GET /api/admin/system/menus 同时提供平铺数据和树形数据。管理端新增/编辑菜单按 RuoYi 的目录、页面、按钮模式展示条件字段:目录只维护路由,页面维护路由、预注册组件和权限标识,按钮只维护权限标识。

父级菜单只能选择目录或页面;编辑时前端从选择树中移除当前分支,后端再次校验父级存在、父级类型和循环归属。权限标识冲突返回 409,非法类型字段返回 422,避免仅依赖前端校验造成脏数据。

菜单图标使用 @element-plus/icons-vue 的静态白名单映射。编辑器提供可搜索图标网格和清空操作;服务端或历史数据中的未知图标统一回退默认图标,不能动态执行任意组件或图标路径。

原因

  • 保留 RuoYi 用户熟悉的菜单层级、条件字段和操作流程。
  • 用服务端树约束保证角色授权、动态路由和菜单编辑看到同一套父子关系。
  • 将图标输入限制在 Element Plus 组件白名单,降低动态组件注入和版本漂移风险。

影响范围

  • WonderQ-Admin:菜单请求 schema、父子关系/类型/权限冲突校验、动态菜单树字段。
  • WonderQ-Admin-UI-Vue:菜单编辑器条件字段、父级树和可搜索图标选择器。
  • WonderQ-MiniAPP:不使用后台菜单接口,不需要改动。