把上传、字段映射、校验和提交拆成可恢复的连续流程。A recoverable flow that separates upload, field mapping, validation, and submission.
B 端后台B2B admin数据看板Data dashboard向导Wizard表单Form单栏Single column专业Professional克制Restrained
数据导入
上传文件
映射字段
检查数据
确认导入
映射文件字段已识别 4 个字段
客户名称对应联系人邮箱对应合同金额对应
正在检查 1,284 行数据已完成 842 行，可以安全离开此页。
发现 17 行错误主要问题是日期格式不一致。
已导入 1,267 条记录17 条错误记录未写入。
标本可交互，可以切换不同状态。Interactive specimen — switch between the available states.
适用场景Use cases
文件上传、字段映射、数据校验文件上传 · 字段映射 · 数据校验
关键状态Key states
默认Default处理中Processing错误Error成功反馈Success
布局结构Structure
可返回的进度导航Reversible progress navigation
当前步骤表单Current-step form
校验摘要Validation summary
上一步与继续操作Back and continue actions
视觉特征Visual traits
步骤名称直接描述任务Step names describe the task
错误按行和字段定位Errors point to row and field
提交前显示影响范围Impact is shown before submission
实现约束Implementation guardrails
需要做到Do
返回上一步时保留输入Preserve input when going back
校验错误提供定位和下载Locate and download validation errors
导入中显示处理数量Show processed counts while importing
避免Avoid
只用 Step 1 这类无意义标签Use meaningless labels such as Step 1
失败后要求重新上传文件Require a new upload after failure
AI 风格说明AI design brief
构建一个可恢复的数据导入向导。
适用场景：文件上传、字段映射、数据校验。
页面结构：可返回的进度导航；当前步骤表单；校验摘要；上一步与继续操作。
视觉特征：步骤名称直接描述任务；错误按行和字段定位；提交前显示影响范围。
关键状态：默认、处理中、错误、成功反馈。
需要做到：返回上一步时保留输入；校验错误提供定位和下载；导入中显示处理数量。
避免：只用 Step 1 这类无意义标签；失败后要求重新上传文件。Build a recoverable data-import wizard.
Use cases: File upload, Field mapping, Data validation.
Structure: Reversible progress navigation; Current-step form; Validation summary; Back and continue actions.
Visual traits: Step names describe the task; Errors point to row and field; Impact is shown before submission.
Key states: Default, Processing, Error, Success.
Do: Preserve input when going back; Locate and download validation errors; Show processed counts while importing.
Avoid: Use meaningless labels such as Step 1; Require a new upload after failure.
# 数据导入向导 (Data Import Wizard)
把上传、字段映射、校验和提交拆成可恢复的连续流程。
A recoverable flow that separates upload, field mapping, validation, and submission.
## 分类
- 产品类型：B 端后台、数据看板 / B2B admin, Data dashboard
- 页面类型：向导、表单 / Wizard, Form
- 布局方式：单栏 / Single column
- 视觉气质：专业、克制 / Professional, Restrained
- 关键状态：默认、处理中、错误、成功反馈 / Default, Processing, Error, Success
## 页面结构
- 可返回的进度导航 / Reversible progress navigation
- 当前步骤表单 / Current-step form
- 校验摘要 / Validation summary
- 上一步与继续操作 / Back and continue actions
## 视觉特征
- 步骤名称直接描述任务 / Step names describe the task
- 错误按行和字段定位 / Errors point to row and field
- 提交前显示影响范围 / Impact is shown before submission
## AI 风格说明 / AI design brief
构建一个可恢复的数据导入向导。
适用场景：文件上传、字段映射、数据校验。
页面结构：可返回的进度导航；当前步骤表单；校验摘要；上一步与继续操作。
视觉特征：步骤名称直接描述任务；错误按行和字段定位；提交前显示影响范围。
关键状态：默认、处理中、错误、成功反馈。
需要做到：返回上一步时保留输入；校验错误提供定位和下载；导入中显示处理数量。
避免：只用 Step 1 这类无意义标签；失败后要求重新上传文件。
Build a recoverable data-import wizard.
Use cases: File upload, Field mapping, Data validation.
Structure: Reversible progress navigation; Current-step form; Validation summary; Back and continue actions.
Visual traits: Step names describe the task; Errors point to row and field; Impact is shown before submission.
Key states: Default, Processing, Error, Success.
Do: Preserve input when going back; Locate and download validation errors; Show processed counts while importing.
Avoid: Use meaningless labels such as Step 1; Require a new upload after failure.
来源：LearnUI PM 原创示例，MIT License
