审批管理钉钉式卡片布局

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

目标

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

交互

顶部胶囊搜索（按应用名称前端过滤）。
分组 Tab：全部 / 各 oa_app_group。
分区标题 + 红点；卡片：图标、名称、状态 Tag；底部右对齐小号「设计 / 更多」（带图标）。
每组末尾「添加」卡；工具栏保留「分组管理 / 新建审批」。
应用图标
- 打开「新增」弹窗时 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（基础设置图标）