1.6 KiB
1.6 KiB
发起审批页 · 加载态美化（三点弹跳）
日期： 2026-08-11
状态： 已确认
Demo： docs/oa-start-loading-demo.html（方案 B）
目标
改善 mobile-h5「发起审批」页（/#/pages/oa/start/index）打开时的加载表现：由纯文字「加载中…」改为更轻、更克制的三点弹跳动效。
方案
- 位置：列表区域居中（搜索栏、分组 Tab、提示文案在加载时仍可见）。
- 动效：三个品牌绿圆点（
#16a34a）依次上下弹跳；下方文案加载审批模板…。 - 实现：仅改
mobile-h5/pages/oa/start/index.vue的 loading 分支模板与 scoped CSS；不引入新组件、不依赖 Vant Loading。 - 空态：仍用现有
.state居中文案「暂无可发起的审批模板」，不改动。
非目标
- 不做骨架屏、全页遮罩、旋转环方案。
- 不改选择器弹层、按钮
:loading等交互态。 - 不改加载逻辑（仍为原有
loading/detailLoading开关与接口请求）。
范围补充（mobile-oa-h5）
同一套三点弹跳复用到填写审批 H5：
- 新增
mobile-oa-h5/src/oa/components/OaPulseLoading.vue OaStart.vue模板加载：加载审批模板…OaFlowPreview.vue流程预览加载：加载中…
验收
- 打开发起审批页（mobile-h5），列表区出现三点弹跳 +「加载审批模板…」。
- 打开填写审批（mobile-oa-h5），整页加载与流程预览加载均为同一套三点弹跳。
- 加载完成后动效消失，正常展示内容或空态。
- 色值与品牌绿
#16a34a一致。