http://localhost:1313/categories/architecture/ Recent content in Architecture on Saiga Hugo zh-cn wuwenzen@outlook.com (wuwj) wuwenzen@outlook.com (wuwj) Fri, 05 Sep 2025 00:00:00 +0000 http://localhost:1313/posts/2025-09-05-fintech-flow-draft-recovery-idempotency/ Fri, 05 Sep 2025 00:00:00 +0000wuwenzen@outlook.com (wuwj) http://localhost:1313/posts/2025-09-05-fintech-flow-draft-recovery-idempotency/ <h2 id="背景">背景</h2> <p>金融业务系统中的流程页面常见特点：</p> <ul> <li>多步骤（信息填写、声明确认、材料上传、结果确认）</li> <li>强状态依赖（前置条件与联动校验）</li> <li>允许中断（网络、切换页面、超时、权限刷新）</li> </ul> <p>流程页一旦不稳定，会直接带来：重复提交、数据丢失、用户放弃率上升。</p> <hr> <h2 id="1-草稿体系让中断变成常态能力">1. 草稿体系：让中断变成常态能力</h2> <h3 id="本地草稿默认">本地草稿（默认）</h3> <ul> <li>保存频率：输入节流 1–2 秒</li> <li>存储：localStorage/IndexedDB（按体量选择）</li> <li>过期：按时间或版本号过期，避免脏数据长期存在</li> </ul> <h3 id="服务端草稿可选">服务端草稿（可选）</h3> <p>适用于：换设备继续、跨端协作、需要留痕的场景。</p> <p>建议组合策略：本地即时保存 + 步骤完成时服务端持久化。</p> <hr> <h2 id="2-断点恢复最小可用状态模型">2. 断点恢复：最小可用状态模型</h2> <p>建议状态模型包含：</p> <ul> <li>当前步骤 step</li> <li>已完成步骤 completedSteps</li> <li>草稿数据 draft</li> <li>最近保存时间 lastSavedAt</li> <li>版本号 schemaVersion（字段变更时用于迁移）</li> </ul> <p>页面进入时：</p> <ol> <li>检测草稿是否存在</li> <li>校验版本号，必要时做迁移/清理</li> <li>恢复到上次步骤并回显数据</li> </ol> <hr> <h2 id="3-幂等提交避免重复提交与脏数据">3. 幂等提交：避免重复提交与脏数据</h2> <p>幂等通常需要前后端配合，但前端可以先做三件事：</p> <ul> <li>提交按钮防抖与禁用（loading 状态）</li> <li>为关键请求生成 <code>idempotencyKey</code>（一次提交一次 key）</li> <li>请求失败时明确失败原因与可重试策略</li> </ul> <p>幂等 key 的建议组成：</p> <ul> <li>用户标识（脱敏）</li> <li>业务对象 id（如流程实例 id）</li> <li>时间窗口（例如分钟级）</li> <li>随机盐</li> </ul> <hr> <h2 id="4-校验与提示让用户知道为什么不能继续">4. 校验与提示：让用户知道“为什么不能继续”</h2> <p>建议将校验分为：</p> <ul> <li>字段级（即时/离焦）</li> <li>步骤级（提交前聚合）</li> <li>流程级（前置条件、状态校验）</li> </ul> <p>错误展示策略：</p> <ul> <li>顶部给错误概览</li> <li>定位第一个错误并滚动到字段</li> <li>提示文案采用“动作 + 原因”结构（可执行）</li> </ul> <hr> <h2 id="5-可观测性关键链路必须可追踪">5. 可观测性：关键链路必须可追踪</h2> <p>流程页建议至少埋三类指标：</p> <ul> <li>成功率：每步通过率、最终提交成功率</li> <li>失败分布：失败原因码、接口错误码</li> <li>中断点：用户在哪一步退出/超时/刷新</li> </ul> <p>并用 traceId 串联前后端日志，方便排查“为什么卡在某一步”。</p>