多字形形式和上下文保存

1）原则

1.一个目标是几个自然的步骤。不按数据库表划分,而是按用户逻辑划分："数据→确认→完成"。
2.每一步都是完整的意义。不要太精细地粉碎：3-5步是最佳。
3.过渡不应重置上下文。保存所有字段、选举和文件。
4.允许您返回。向后-没有数据丢失。
5.跟踪进度。进步吧，步骤标题和清晰的CTA。
6.用户可以离开并返回。草稿-本地或服务器上。

2）多字形架构

客户端状态：本地端口（例如React Context/Redux/Signal）或临时存储（"sessionStorage",IndexedDB）。
服务器状态：使用"draft_id"创建草稿,在每个步骤之后保存。
安全性："draft_id"链接到用户，并在N小时后到期；数据是静止加密的。

• "currentStep"是当前步骤的索引；
• "completedSteps"-已完成的列表；
• "errors"-步进错误；
• `progress = current / total`.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3）步骤和布局设计

结构：垂直导航（桌面）/顶部进度栏（移动）。

可见步骤名称： "1.个人详细信息"，"2。身份证明。"

• 主要是"下一步"/"继续"。
• 次要是"后退"。
• 最后一步是"完成"/"提交"。

• 使用'aria-current='step'。
• 如果步骤不均匀,则显示百分比。
• 添加"可以稍后返回"提示。

4）保存上下文和数据

汽车保护

• 更改字段（debouns 500-1000 ms）；
• 转向下一步；
• 失去选项卡的焦点。

• 本地（"localStorage"/IndexedDB）-如果形式短；
• 服务器-用于KUS/付款/问卷。

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

恢复

打开表单时,查找草稿（"draft_id"或本地键）。

• 如果发生冲突,（新字段）-"更新草稿"并突出显示更改。

5） UX过渡模式

仅在局部步骤验证后才前进。
返回-除非数据丢失,否则无需确认。
如果网络错误-我们在本地保存,我们将显示"在下次连接时恢复"。
不要随意更改URL： '/form/step/2' →易于导航/恢复。
支持"Ctrl+Enter"以快速过渡到下一步。

6）状态和视觉提示

In progress：灰色/活动指示灯,只有前一个步骤完成时才可点击。
完成：绿色勾选/图标；可以打开进行编辑。
错误：红色轮廓，字段下方的文本和进度线。
已禁用：当前步骤已隐藏或不可用。

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7）A11y和可用性

活动步骤的'aria-current='step'。
音高变化由"aria-live="polite"表示。
将焦点保持在当前步骤内；过渡时-移至标题。
Tab和Enter导航是可预测的；Esc不应失去上下文。
对于逐步进度条，请使用"role="list"，"role="listitem"和"aria-label"进行步骤。

8）错误和中断行为

网络故障： "连接丢失。数据将在本地保存。"

Taymout：通过3-5 c自动重复；失败时-离线草稿。
会话中断：登录后→"从最后一步继续"。
步骤错误：我们保留部分填充的字段,我们突出显示有问题的字段。

9）平行会议和安全性

"draft_id"在用户上是唯一的。

打开新选项卡-建议"打开另一个会话。在这里更新或继续。"

对于KUS/财务表格-数据在保存草稿之前在客户端（AES/GCM）上加密。
删除TTL草稿（例如7天非活动）。

10） iGaming脚本示例

10.1 KUS/验证

1.个人数据→ 2.文件→ 3。验证→ 4。完成。

照片上传后自动驾驶。
中断后从检查步骤恢复。
指示符的"等待确认"状态。

10.2付款/定金

步骤：1。金额→ 2。方法3 →。确认。
方法数据在会期之间保存。
可以返回到方法选择而不重置金额。

10.3设置限制

步骤：限制类型→值→确认。
进展显示了剩余的步骤。
完成后-屏幕将通过"……"生效。

11）度量与控制

完成率：完成所有步骤的用户百分比。
下降的步骤：在哪个步骤离开。

Average time per step и Time-to-Complete.

自动保存成功率（恢复了多少草稿）。
错误恢复率：失败后成功继续的百分比。

12）反模式

没有后退的硬导航。
重新启动时丢失输入的数据。
跳过没有上下文的步骤。
在10个屏幕上共享一个submit。
步骤中的错误-和"重新开始"。
网络故障后的空白屏幕。
没有语义名称的进步酒吧（"1/4/7……"）。

13）设计系统令牌（示例）

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

CSS预设

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14） QA支票清单

保存和恢复

• 每个步骤都会创建和更新草稿。
• 重新启动时,恢复可用且正确。
• 正在处理版本冲突（旧/新格式）。

导航

• 返回不会丢失数据。
• URL匹配当前步骤。
• 进度栏与状态同步。

网络和离线

• 离线在本地保存并在线恢复。
• 有关失败的报告是可以理解的，并且没有限制性。

A11y

• 'aria-current='step'，'aria-live='polite'工作。
• 焦点转移到步骤标题。

表演

• 瞬时过渡（≤ 100毫秒）。
• 异步存储不会阻止UI。

15）设计系统中的文档

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.

上下文存储（local vs server），A11y和ARIA属性。
UX模板：KYC、存款、限额、问卷、错误后退款。
Do/Do n't提供网络故障和成功恢复的示例。

简短摘要

即使用户分心，重新启动页面或丢失了网络，也必须通过连续的过程感觉到多页形式。自动保护、恢复、可见的进步和安全转发将复杂的情景（KYC、支付、限制）转变为可预测和值得信赖的体验。