1.5 KiB
1.5 KiB
门户顶栏大面板菜单（方案 A）
目标
将 web-admin 门户布局从「顶栏一级下拉 + 左侧二/三级树」改为「顶栏横排一级 + 点击展开大面板」，取消左侧常驻菜单，内容区全宽。
交互
- 顶栏横排展示全部一级模块。
- 点击一级展开大面板；再点同一级或遮罩关闭。
- 面板内左右两栏，二级行左右均分（如 12→6+6）；建议每栏可见约 5 行，超出后面板整体纵向滚动。
- 每行：左侧二级标题（不可点）+ 右侧三级文字链（可点）。
- 二级无子节点且自身可导航时：生成与二级同名的虚拟三级，路由继承该二级。
- 点击三级跳转并关闭面板。
范围
- 仅
MenuTypeEnum.PORTAL布局。 - 不改后端菜单数据模型；虚拟三级仅在前端展示层生成。
非目标
- 方案 B（5 列网格）本期不落地。
- 面板内搜索可后续增强。
面板宽度（一级较少时）
权限导致一级模块仅 2～4 个时，一级横排区域会变窄。大面板宽度不得简单等于一级区域宽度。
策略（已确认）：最小宽度 + 相对一级居中
width = max(一级区域宽度, min(720px, 视口宽度 − 32px))- 水平以一级区域中心为基准居中；左右各保留约 16px，避免贴边溢出
- 一级区域已 ≥ 720px 时，面板仍跟随一级区域宽度（与原先「同宽」一致）
- 纵向仍贴在一级栏下方；面板内部左右分栏布局不变
参考 Demo：docs/portal-mega-panel-width-demo.html