金融级流程页面的稳定性设计：草稿、断点恢复与幂等提交

背景

金融业务系统中的流程页面常见特点：

• 多步骤（信息填写、声明确认、材料上传、结果确认）
• 强状态依赖（前置条件与联动校验）
• 允许中断（网络、切换页面、超时、权限刷新）

流程页一旦不稳定，会直接带来：重复提交、数据丢失、用户放弃率上升。

1. 草稿体系：让中断变成常态能力

本地草稿（默认）

• 保存频率：输入节流 1–2 秒
• 存储：localStorage/IndexedDB（按体量选择）
• 过期：按时间或版本号过期，避免脏数据长期存在

服务端草稿（可选）

适用于：换设备继续、跨端协作、需要留痕的场景。

建议组合策略：本地即时保存 + 步骤完成时服务端持久化。

2. 断点恢复：最小可用状态模型

建议状态模型包含：

• 当前步骤 step
• 已完成步骤 completedSteps
• 草稿数据 draft
• 最近保存时间 lastSavedAt
• 版本号 schemaVersion（字段变更时用于迁移）

页面进入时：

1. 检测草稿是否存在
2. 校验版本号，必要时做迁移/清理
3. 恢复到上次步骤并回显数据

3. 幂等提交：避免重复提交与脏数据

幂等通常需要前后端配合，但前端可以先做三件事：

• 提交按钮防抖与禁用（loading 状态）
• 为关键请求生成 idempotencyKey（一次提交一次 key）
• 请求失败时明确失败原因与可重试策略

幂等 key 的建议组成：

• 用户标识（脱敏）
• 业务对象 id（如流程实例 id）
• 时间窗口（例如分钟级）
• 随机盐

4. 校验与提示：让用户知道“为什么不能继续”

建议将校验分为：

• 字段级（即时/离焦）
• 步骤级（提交前聚合）
• 流程级（前置条件、状态校验）

错误展示策略：

• 顶部给错误概览
• 定位第一个错误并滚动到字段
• 提示文案采用“动作 + 原因”结构（可执行）

5. 可观测性：关键链路必须可追踪

流程页建议至少埋三类指标：

• 成功率：每步通过率、最终提交成功率
• 失败分布：失败原因码、接口错误码
• 中断点：用户在哪一步退出/超时/刷新

并用 traceId 串联前后端日志，方便排查“为什么卡在某一步”。

总结

金融级流程页面的稳定性设计核心是：

• 草稿保存让中断可恢复
• 断点恢复让流程可继续
• 幂等提交防止重复与脏写
• 校验提示可执行且可解释
• 观测能力让问题可定位

把这些能力沉淀为流程容器组件后，新流程的交付与维护成本会显著下降。