docs: add mobile OA start card-grid design and HTML demo

Align the mini-program start list with web card sections and shared ep icon color pairs.

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

docs/superpowers/specs/2026-08-11-mobile-oa-start-card-grid-design.md

@@ -0,0 +1,118 @@
+# 移动端「发起审批」列表 · 卡片网格对齐 Web
+
+> 日期：2026-08-11  
+> 范围：`mobile-h5/pages/oa/start/index.vue`（模板列表页）  
+> 视觉 Demo：`mobile-ui/zkxw-mobile-oa-start-cards-demo.html`  
+> 对齐：`web-admin/src/views/oa-approval/start/index.vue` + `OaAppIcon` + `utils/oa-app-icons.ts`  
+> 父设计：`docs/superpowers/specs/2026-08-11-mobile-oa-start-approval-design.md` §6.1
+
+---
+
+## 1. 背景与目标
+
+### 1.1 现状
+
+- 小程序列表页已有：搜索、分组 Tab、按分组分段、列表行式卡片（横向全宽：图标 + 文案 + 右侧「发起」）。
+- Logo 仅支持图片 URL 或首字文字兜底，**未解析** Web 的 `ep:IconName|#bg` 串，色板与 Web 不一致。
+- Web 发起审批为：**分类标题独立一行** + **卡片网格**（`oa-apps__card-row` 换行）+ `OaAppIcon` 彩色底/图标色。
+
+### 1.2 目标
+
+1. 列表展示改为与 Web 同构的**卡片网格**（手机默认每行 2 张）。
+2. **每一类标题独立一行**（分组名 + 红点 +「N 个表单」），其下再排该组卡片。
+3. **保留**搜索框下方的分类 Tab（全部 / 各组名）。
+4. Logo 的背景色、图标色与 Web `OA_APP_ICON_COLOR_PAIRS` **完全一致**；支持 `ep:…` 与图片 URL。
+
+### 1.3 非目标
+
+- 不改发起后的 web-view / H5 填写页。
+- 不改接口契约（仍用现有 `fetchOaTemplates` + `fetchOaGroupList`）。
+- 不把 Web `#10b981` 当作页面主色；页面骨架与「发起」按钮仍用三墙 `#0a9f6d`。
+
+---
+
+## 2. 已确认决策
+
+| 决策点 | 结论 |
+|--------|------|
+| 布局 | 卡片网格，对齐 Demo（2 列） |
+| 分类标题 | 独立一行，对齐 Web `section-head` |
+| 顶部分类 Tab | **保留**（搜索下方） |
+| Logo 色 | 与 Web `OA_APP_ICON_COLOR_PAIRS` 一致 |
+| 实现路径 | 小程序内解析 `ep:` + 内联 SVG 映射（不依赖 Element Plus） |
+
+---
+
+## 3. 方案说明（推荐）
+
+在 `mobile-h5` 增加轻量工具 `utils/oa-app-icons.js`（色对、解析、默认值从 Web `oa-app-icons.ts` **逐字拷贝色表与规则**），页面用组件或内联块渲染图标：
+
+- `ep:Document|#d1fae5` → 32×32、圆角 8、背景 `#d1fae5`、SVG 描边/填充 `#059669`
+- 非 `ep:` 的 URL → 图片铺满方块（与 Web `kind=image` 一致）
+- 空值 → 默认 `ep:Document` + 默认绿对
+
+**备选未采用**：整页 web-view 渲染列表（过重）；把图标做成独立 H5 CDN（多一次网络与域名配置）。
+
+---
+
+## 4. UI 结构
+
+页面自上而下：
+
+1. 搜索（占位「请输入审批单名称」）
+2. 横向分类 Tab：全部 + `groupOptions`
+3. 提示文案「选择一个审批单即可发起」
+4. Body：按 `displayGroups` 分段
+   - **Section head（独占一行）**：`name` · 红点 `#f87171` · 右对齐 `N 个表单`
+   - **Card row**：CSS grid `1fr 1fr`，gap ~10–16rpx
+   - **Card**：上区 icon + name/desc；下区顶部分隔线 + 右对齐「发起」
+5. 空态 / 加载态保持现有文案
+
+交互：点卡片或「发起」→ 现有 `onPick` → webview。
+
+数据逻辑：沿用现有 `displayGroups`（搜索 + Tab 过滤 + 按组桶 + 未分组），**不改分组算法**。
+
+---
+
+## 5. Logo 规范
+
+| 项 | 值 |
+|----|-----|
+| 尺寸 | 32×32（对齐 Web `OaAppIcon` sm） |
+| 圆角 | 8px |
+| 色对 | 与 Web 锁定 8 组（禁止灰）：见 `OA_APP_ICON_COLOR_PAIRS` |
+| 解析 | `resolveOaAppIcon` / `parseEpIconUrl` 行为对齐 Web |
+| 图标集 | Web `OA_APP_EP_ICON_NAMES` 子集须覆盖；未知名回退 `Document` |
+| 页面主色 | 三墙 `#0a9f6d`（按钮/Tab active）；**不**用色对覆盖整页主题 |
+
+色对权威源：`web-admin/src/utils/oa-app-icons.ts`。mobile 侧拷贝后若 Web 变更，须同步更新并在 PR 注明。
+
+---
+
+## 6. 实现文件（预期）
+
+| 文件 | 变更 |
+|------|------|
+| `mobile-h5/utils/oa-app-icons.js` | 新增：色对、解析、可选 SVG path 映射 |
+| `mobile-h5/pages/oa/start/index.vue` | 模板改为 section-head + card-row；接图标解析 |
+| `mobile-ui/zkxw-mobile-oa-start-cards-demo.html` | 已作为视觉冻结参考 |
+
+可选：抽 `components/OaAppIcon.vue`（若页面内联过长再抽）。
+
+---
+
+## 7. 验收
+
+1. 「全部」下：各组标题各占一行，组内卡片 2 列网格；组间顺序与 Web 一致（按 group 列表，未分组最后）。
+2. 切 Tab / 搜索后：仅展示匹配项；仍有标题行 + 网格。
+3. `ep:` 模板：背景色、图标色与 Web 同模板一致（同 `iconUrl` 字符串）。
+4. 图片型 `iconUrl`：方块内 aspectFill。
+5. 点发起仍进入现有 webview 流程。
+6. Demo HTML 与真机列表在结构上可目视对照通过。
+
+---
+
+## 8. 风险
+
+- 小程序内联 SVG：部分图标需用 `rich-text` 或 `image`（base64/svg 文件）；优先用 uni-app 支持的方式（可先 `image` + 本地/内联 data URI，或用 `text` 首字仅作临时——**验收要求禁止长期首字兜底替代 ep 色标**）。
+- 图标字形与 Element Plus 不完全像素级一致可接受，**色与语义名必须一致**。