|
|
@@ -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. 再按计划改代码
|
