# 移动端「发起审批」列表 · 卡片网格对齐 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 不完全像素级一致可接受，**色与语义名必须一致**。