web-admin 左侧树形壳层布局设计

日期：2026-10-02
状态：待审阅
参考：案例html/index_运输管理页.html
范围：web-admin 全局壳层（布局默认值、顶区装配、侧栏角标样式）；不含业务页改造。

背景与目标

用户希望管理端布局对齐案例页的部署模式：

左侧：Logo + 系统名称 + 树形菜单（菜单项可带红色数字角标）
右侧：顶栏 → 多页签（WorkTab）→ 内容区

当前默认是 MenuTypeEnum.PORTAL（顶栏门户壳），且启动时强制切到 PORTAL。工程内已有 LEFT 布局骨架，以及 menu-badge 数字角标能力；多页签目前主要挂在门户分支，且启用条件偏 PORTAL-only。

已确认决策

项	决策
改造路径	方案 1：启用已有 LEFT，按案例微调；不新建第三种布局
右侧叠放	顶栏（面包屑/工具）→ 多页签 → 内容
色调	保持 Fresh Mint（`#10b981` 链）；不引入案例 `#167c4a`
角标	复用现有 menu-badge 数据；样式贴近案例红底白字圆角数字（危险色 `#dc2626`）
门户	代码保留，设置面板可切回；不作默认

壳层结构

┌──────────────┬──────────────────────────────────┐
│ Logo + 名称  │  ArtHeaderBar（面包屑 / 工具）    │
│              ├──────────────────────────────────┤
│ 树形菜单     │  ArtWorkTab（多页签，保留）         │
│ + 红色数字角标├──────────────────────────────────┤
│              │  ArtPageContent（业务页）          │
└──────────────┴──────────────────────────────────┘

默认 menuType = LEFT
侧栏宽度对齐 UI 规范约 220–232px（若本地缓存宽度过大可收敛）
业务页面内容与列表/弹窗规范不变

组件与行为

1. 默认布局

web-admin/src/config/setting.ts：menuType 改为 MenuTypeEnum.LEFT；showWorkTab 保持 true
web-admin/src/views/index/index.vue：
- 删除（或不再执行）启动时 switchMenuLayouts(PORTAL) 的强制逻辑
- 非门户分支装配：ArtHeaderBar → ArtWorkTab → ArtPageContent
- 仍可开启多页签，并为首页固定 Tab（行为与现门户一致）

2. 多页签启用条件

web-admin/src/store/modules/worktab.ts：不再要求「仅 PORTAL + showWorkTab」。改为：showWorkTab === true 且当前为非门户壳（menuType !== PORTAL，含默认 LEFT）时启用多页签逻辑
art-work-tab/index.vue：去掉仅门户才能正常工作的硬依赖；LEFT 下继续使用现有胶囊 Tab 样式

3. 侧栏品牌与角标

ArtSidebarMenu 在非门户下继续展示 Logo + 系统名（现有逻辑）
SidebarSubmenu + 相关样式：数字角标保持 resolveMenuBadgeText / useMenuBadgeStore 数据源；视觉改为案例式红底白字圆角数字（#dc2626）
不改角标统计 API、菜单 menuCode 绑定规则

4. 门户与设置

PORTAL 相关组件与路由装配保留
设置面板仍可切换布局；默认进入为 LEFT
本地若持久化了旧 menuType，用户可能需清缓存或在设置中手动切一次 LEFT（验收时注明）

文件清单

文件	改动
`web-admin/src/config/setting.ts`	默认 `LEFT`；确认 `showWorkTab: true`
`web-admin/src/views/index/index.vue`	挂 WorkTab；去掉强制 PORTAL
`web-admin/src/store/modules/worktab.ts`	LEFT 可启用多页签
`web-admin/src/components/core/layouts/art-work-tab/index.vue`	按需去掉 PORTAL-only 假设
`web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/**`	品牌区/角标样式微调
`docs/web-admin-ui-spec-fresh-mint.md` §3	默认壳层改为左树 + 右侧顶栏/多页签；门户改为可选

明确不改

各业务列表/表单页实现
菜单数据源、权限模型、角标统计接口
Fresh Mint 主色 Token（不混入案例绿）
小程序端布局

验收标准

登录后默认：左侧 Logo+系统名+树菜单；右侧顶栏 → 多页签 → 内容
绑定角标的菜单项显示红色数字；数量与现有 badge 逻辑一致
多页签开闭、切换、首页固定行为可用
设置面板可切回门户布局（可选回归）
主色仍为 Fresh Mint，无 #167c4a

风险与注意

本地设置持久化：旧 menuType=portal 可能覆盖新默认，需在实现/验收中处理（例如迁移默认，或文档说明清缓存）
门户入口变化：默认不再出现门户顶栏模块大菜单；深度依赖门户导航的用户需从设置切回或通过侧栏进入

后续步骤

用户审阅本设计文档
通过后编写实现计划（writing-plans）
再按计划改代码

2026-10-02-web-admin-left-sidebar-layout-design.md 5.1 KB Постоянная ссылка История Исходник