38 lines
1.6 KiB
Markdown
38 lines
1.6 KiB
Markdown
# 发起审批页 · 加载态美化（三点弹跳）
|
||
|
||
**日期：** 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` 流程预览加载：`加载中…`
|
||
|
||
## 验收
|
||
|
||
1. 打开发起审批页（mobile-h5），列表区出现三点弹跳 +「加载审批模板…」。
|
||
2. 打开填写审批（mobile-oa-h5），整页加载与流程预览加载均为同一套三点弹跳。
|
||
3. 加载完成后动效消失，正常展示内容或空态。
|
||
4. 色值与品牌绿 `#16a34a` 一致。
|