# 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`：不使用后台菜单接口，不需要改动。