diff --git a/docs/superpowers/specs/2026-10-02-web-admin-left-sidebar-layout-design.md b/docs/superpowers/specs/2026-10-02-web-admin-left-sidebar-layout-design.md new file mode 100644 index 000000000..6df8d0fcc --- /dev/null +++ b/docs/superpowers/specs/2026-10-02-web-admin-left-sidebar-layout-design.md @@ -0,0 +1,105 @@ +# 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(不混入案例绿) +- 小程序端布局 + +## 验收标准 + +1. 登录后默认:左侧 Logo+系统名+树菜单;右侧顶栏 → 多页签 → 内容 +2. 绑定角标的菜单项显示红色数字;数量与现有 badge 逻辑一致 +3. 多页签开闭、切换、首页固定行为可用 +4. 设置面板可切回门户布局(可选回归) +5. 主色仍为 Fresh Mint,无 `#167c4a` + +## 风险与注意 + +- **本地设置持久化**:旧 `menuType=portal` 可能覆盖新默认,需在实现/验收中处理(例如迁移默认,或文档说明清缓存) +- **门户入口变化**:默认不再出现门户顶栏模块大菜单;深度依赖门户导航的用户需从设置切回或通过侧栏进入 + +## 后续步骤 + +1. 用户审阅本设计文档 +2. 通过后编写实现计划(writing-plans) +3. 再按计划改代码