移动端「发起审批」列表 · 卡片网格对齐 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 目标

列表展示改为与 Web 同构的卡片网格（手机默认每行 2 张）。
每一类标题独立一行（分组名 + 红点 +「N 个表单」），其下再排该组卡片。
保留搜索框下方的分类 Tab（全部 / 各组名）。
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 结构

页面自上而下：

搜索（占位「请输入审批单名称」）
横向分类 Tab：全部 + groupOptions
提示文案「选择一个审批单即可发起」
Body：按 displayGroups 分段
- Section head（独占一行）：name · 红点 #f87171 · 右对齐 N 个表单
- Card row：CSS grid 1fr 1fr，gap ~10–16rpx
- Card：上区 icon + name/desc；下区顶部分隔线 + 右对齐「发起」
空态 / 加载态保持现有文案

交互：点卡片或「发起」→ 现有 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. 验收

「全部」下：各组标题各占一行，组内卡片 2 列网格；组间顺序与 Web 一致（按 group 列表，未分组最后）。
切 Tab / 搜索后：仅展示匹配项；仍有标题行 + 网格。
ep: 模板：背景色、图标色与 Web 同模板一致（同 iconUrl 字符串）。
图片型 iconUrl：方块内 aspectFill。
点发起仍进入现有 webview 流程。
Demo HTML 与真机列表在结构上可目视对照通过。

8. 风险

小程序内联 SVG：部分图标需用 rich-text 或 image（base64/svg 文件）；优先用 uni-app 支持的方式（可先 image + 本地/内联 data URI，或用 text 首字仅作临时——验收要求禁止长期首字兜底替代 ep 色标）。
图标字形与 Element Plus 不完全像素级一致可接受，色与语义名必须一致。

2026-08-11-mobile-oa-start-card-grid-design.md 5.0 KB History Raw