docs: add left-sidebar layout implementation plan

Track the approved task breakdown for default LEFT shell, work tabs,
badge styling, and UI spec updates.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/superpowers/plans/2026-10-02-web-admin-left-sidebar-layout.md

@@ -0,0 +1,282 @@
+# web-admin 左侧树形壳层布局 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将 `web-admin` 默认壳层从门户顶栏改为「左侧 Logo+树菜单 / 右侧顶栏→多页签→内容」，并保持 Fresh Mint 色与现有菜单数字角标。
+
+**Architecture:** 复用已有 `MenuTypeEnum.LEFT` 与 `ArtSidebarMenu`；在非门户布局分支挂载 `ArtWorkTab`；默认配置改为 LEFT + 开启多页签/面包屑；门户代码保留可选。角标数据链路不动，仅统一红色数字样式为 `#dc2626`。
+
+**Tech Stack:** Vue 3 · Pinia · Element Plus · SCSS · Fresh Mint tokens
+
+**Spec:** `docs/superpowers/specs/2026-10-02-web-admin-left-sidebar-layout-design.md`
+
+---
+
+## File map
+
+| File | Responsibility |
+|------|----------------|
+| `web-admin/src/config/setting.ts` | 默认 `menuType=LEFT`、`showWorkTab=true`、`showCrumbs=true`、侧栏宽度约 220 |
+| `web-admin/src/views/index/index.vue` | 非门户分支装配 WorkTab；去掉强制 PORTAL；启动仍开多页签与首页固定 Tab |
+| `web-admin/src/views/index/style.scss` | 非门户下 `#app-worktab` 样式（对齐门户条） |
+| `web-admin/src/assets/styles/core/app.scss` | `.art-text-badge` 危险色改为 `#dc2626` |
+| `docs/web-admin-ui-spec-fresh-mint.md` | §3 默认壳层说明更新 |
+
+**Note on `worktab.ts`:** `isPortalMultiTabMode()` 表示「门户 DOM 溢出淘汰」语义，应保持 `PORTAL && showWorkTab`。LEFT 多页签走既有 `showWorkTab` + 容量上限路径，**本计划不改**该函数。
+
+---
+
+### Task 1: 默认配置改为 LEFT + 多页签
+
+**Files:**
+- Modify: `web-admin/src/config/setting.ts`
+
+- [ ] **Step 1: 更新默认值**
+
+将下列字段改为：
+
+```ts
+menuType: MenuTypeEnum.LEFT,
+menuOpenWidth: 220,
+showCrumbs: true,
+showWorkTab: true,
+```
+
+其余字段保持不变。
+
+- [ ] **Step 2: 自检**
+
+确认文件仍从 `@/enums/appEnum` 导入 `MenuTypeEnum`，且无语法错误。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web-admin/src/config/setting.ts
+git commit -m "$(cat <<'EOF'
+feat(web-admin): default shell to left menu with work tabs
+
+Use LEFT layout as the product default and enable breadcrumbs and
+multi-tabs so the classic sidebar shell matches the approved design.
+EOF
+)"
+```
+
+---
+
+### Task 2: 布局装配 — 顶栏 → 多页签 → 内容
+
+**Files:**
+- Modify: `web-admin/src/views/index/index.vue`
+- Modify: `web-admin/src/views/index/style.scss`
+
+- [ ] **Step 1: 更新非门户模板**
+
+将 `v-else` 分支的 `<main id="app-main">` 改为：
+
+```vue
+<main id="app-main">
+  <div id="app-header">
+    <ArtHeaderBar />
+  </div>
+  <div id="app-worktab">
+    <ArtWorkTab />
+  </div>
+  <div id="app-content">
+    <ArtPageContent />
+  </div>
+</main>
+```
+
+门户分支（`v-if="isPortalLayout"`）保持不动。
+
+- [ ] **Step 2: 改写 `onMounted`**
+
+替换现有 `onMounted` 为：
+
+```ts
+onMounted(() => {
+  const width = Number(settingStore.menuOpenWidth)
+  if (!Number.isFinite(width) || width < 220) {
+    settingStore.setMenuOpenWidth(220)
+  } else if (width === 270 || width === 290) {
+    // 收敛历史默认偏宽侧栏
+    settingStore.setMenuOpenWidth(220)
+  }
+
+  // 产品默认壳层：LEFT（不再强制 PORTAL；设置面板仍可切回门户）
+  if (menuType.value === MenuTypeEnum.PORTAL) {
+    settingStore.switchMenuLayouts(MenuTypeEnum.LEFT)
+  }
+
+  settingStore.setWorkTab(true)
+  const home = homePath.value || HOME_PAGE_PATH || '/home'
+  if (home) {
+    worktabStore.openTab(
+      {
+        path: home,
+        title: '首页',
+        name: 'PortalHome',
+        fixedTab: true,
+        keepAlive: true
+      },
+      { activate: false }
+    )
+  }
+})
+```
+
+说明：将历史强制 PORTAL 改为「若仍是 PORTAL 则迁到 LEFT」，保证验收看到左树壳；用户之后可在设置切回门户（会持久化，下次进入保留门户——若产品希望每次强制 LEFT，再改为无条件 `switchMenuLayouts(LEFT)`）。
+
+- [ ] **Step 3: 为非门户补 `#app-worktab` 样式**
+
+在 `web-admin/src/views/index/style.scss` 的 `#app-main` 内、`#app-header` 之后增加：
+
+```scss
+#app-worktab {
+  flex-shrink: 0;
+  width: 100%;
+  background: #f1f5f9;
+  border-bottom: 1px solid var(--mint-border, #e2e8f0);
+}
+```
+
+（可与 `style.portal.scss` 中 `#app-worktab` 视觉对齐；勿改门户文件除非两边需抽公共类——本任务优先最小改动复制必要样式。）
+
+- [ ] **Step 4: 手动冒烟（开发服）**
+
+Run: 在 `web-admin` 目录 `pnpm dev`，浏览器无痕或清站点数据后登录。
+
+Expected:
+- 左侧有 Logo + 系统名 + 树菜单
+- 右侧自上而下：顶栏、多页签、内容
+- 打开多个菜单后 Tab 可切换
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web-admin/src/views/index/index.vue web-admin/src/views/index/style.scss
+git commit -m "$(cat <<'EOF'
+feat(web-admin): mount work tabs under left-layout header
+
+Assemble header → worktab → content for the non-portal shell and migrate
+legacy portal default so the classic sidebar layout is the entry experience.
+EOF
+)"
+```
+
+---
+
+### Task 3: 菜单红色数字角标样式对齐
+
+**Files:**
+- Modify: `web-admin/src/assets/styles/core/app.scss`（`.art-text-badge` 段）
+
+- [ ] **Step 1: 统一角标危险色为 Fresh Mint danger**
+
+将 `.art-text-badge` 的 `background: #fd4e4e` 改为 `background: #dc2626`。
+
+`--circle` 修饰符已具备圆角数字形态，保持结构不变。确认侧栏 `theme.scss` 中 `.menu-title-wrap .art-text-badge { margin-left: auto; position: static; }` 仍生效（无需改）。
+
+- [ ] **Step 2: 冒烟**
+
+登录后进入有角标的菜单（如运输计划 / 购买证 / 报销等，视租户数据而定）。
+
+Expected: 菜单项右侧红底白字圆角数字；色值为 `#dc2626`。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web-admin/src/assets/styles/core/app.scss
+git commit -m "$(cat <<'EOF'
+style(web-admin): align menu text badge with Fresh Mint danger
+
+Use #dc2626 for sidebar numeric badges so they match the approved
+case-style red counters without leaving the design token chain.
+EOF
+)"
+```
+
+---
+
+### Task 4: 更新 UI 规范 §3
+
+**Files:**
+- Modify: `docs/web-admin-ui-spec-fresh-mint.md`（§3 全局与布局结构）
+
+- [ ] **Step 1: 在 §3.1 附近补充默认壳层说明**
+
+在 `### 3.1 根布局` 之后（或 §3 开头）增加一小节节，内容要点：
+
+```markdown
+### 3.0 默认壳层（web-admin 运行时）
+
+- **默认布局**：左侧树菜单（`MenuTypeEnum.LEFT`），不再默认门户顶栏。
+- **左侧**：Logo + 系统名称 + 树形菜单；菜单数字角标为红底白字圆角（`#dc2626`）。
+- **右侧自上而下**：顶栏（面包屑/工具，高约 56px）→ 多页签 WorkTab → 内容区。
+- **侧栏宽度**：约 `220px`（与本节 `.sidebar` 宽度一致）。
+- **门户布局（PORTAL）**：保留为可选；设置面板可切换；业务页内容规范不变。
+- **色调**：Fresh Mint（`--primary #10b981` 链）；不得使用案例 HTML 的 `#167c4a` 作为主色。
+```
+
+同步检查 §3.2 侧栏宽度 `220px` 与实现一致（无需改数字时只加交叉引用）。
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add docs/web-admin-ui-spec-fresh-mint.md
+git commit -m "$(cat <<'EOF'
+docs: document left-sidebar shell as web-admin default
+
+Update Fresh Mint layout section so the runtime shell matches the
+approved left-tree + header/worktab/content structure.
+EOF
+)"
+```
+
+---
+
+### Task 5: 验收清单
+
+- [ ] **Step 1: 清缓存后登录**
+
+Expected: 默认左树 + 右顶栏→Tab→内容；无门户顶栏模块条。
+
+- [ ] **Step 2: 多页签**
+
+打开 ≥2 个业务页；切换、关闭、首页固定 Tab 可用。
+
+- [ ] **Step 3: 角标**
+
+有 badge 的菜单显示红色数字（`#dc2626`）。
+
+- [ ] **Step 4: 色调**
+
+主色仍为 `#10b981` / `#059669`；无 `#167c4a`。
+
+- [ ] **Step 5: 可选回归**
+
+设置面板切到 Portal，确认门户壳仍可用（不要求作为默认）。
+
+- [ ] **Step 6: 图谱（若本会话改了代码）**
+
+```bash
+./scripts/update-graph.sh frontend
+```
+
+---
+
+## Spec coverage check
+
+| Spec 要求 | Task |
+|-----------|------|
+| 默认 LEFT，取消强制 PORTAL | Task 1–2 |
+| 右：顶栏→多页签→内容 | Task 2 |
+| Fresh Mint 色 | Task 1–4（不改主色） |
+| 红色数字角标 | Task 3（数据复用现网） |
+| 门户保留可选 | Task 2（不删门户分支）+ Task 5 |
+| UI 规范 §3 | Task 4 |
+| 侧栏宽度约 220 | Task 1–2 |
+
+## Placeholder scan
+
+无 TBD / 「类似 Task N」占位；步骤含具体代码与命令。