zkxw/docs/superpowers/specs/2026-07-14-oa-apps-card-layout-design.md

审批管理钉钉式卡片布局

日期： 2026-07-14
范围： web-admin 「审批管理」/#/system-manage/oa-approval/apps
Demo： docs/mockups/oa-approval-apps-card-demo.html

目标

将审批应用从表格列表改为钉钉式「搜索 + 分组 Tab + 横向图标卡片」工作台，便于按分组浏览与快速进入设计器。

交互

1. 顶部胶囊搜索（按应用名称前端过滤）。
2. 分组 Tab：全部 / 各 oa_app_group。
3. 分区标题 + 红点；卡片：图标、名称、状态 Tag；底部右对齐小号「设计 / 更多」（带图标）。
4. 每组末尾「添加」卡；工具栏保留「分组管理 / 新建审批」。
5. 应用图标
   • 打开「新增」弹窗时 pickRandomOaAppIconUrl() 预填默认图（public/oa-app-icons/*）。
   • 用户可不改；确定时把当前 iconUrl 写入后端。
   • 可上传图片（附件上传 API）或点「换一个默认」。
   • 设计器基础设置、发起页同步展示 iconUrl。

主要文件

• web-admin/src/views/oa-approval/apps/index.vue
• web-admin/src/utils/oa-app-icons.ts
• web-admin/public/oa-app-icons/*.svg
• web-admin/src/views/oa-approval/start/index.vue（卡片图标）
• web-admin/src/views/oa-approval/designer/index.vue（基础设置图标）