---
title: 设计文档
order: 2
category: pro
---

# Steps

##资源链接
### 任务链接
https://project.feishu.cn/v2qint/projectm/detail/6455621058

### Figma设计稿链接
https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12031-9961

### Figma 完整MCP链接
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12031-9962&m=dev
## 组件概述

- 组件名称（英文）： Steps
- 组件编号： pcp_na_steps_V1.0
- 组件类型： Pro Components
- 组件分类：Navigation
- 简介: Steps组件是用于引导用户完成多步骤任务的核心导航组件，通过可视化方式展示当前进度、已完成步骤和待完成步骤
## 2. 版本
- 版本： 1.0
- 更新简介: 首次发布
## 3. 需求来源
- 多步骤表单提交流程（如用户注册）
- 订单处理流程（如支付流程）
- 复杂任务分步操作（如配置向导）
## 4. 组件设计目的
1. 流程可视化：清晰展示任务阶段和当前进度
2. 降低认知负担：分解复杂流程为可管理的步骤
3. 进度反馈：实时显示已完成和待完成步骤
4. 导航控制：支持步骤间的前进和返回操作
5. 错误处理：明确标识问题步骤并提供解决路径

## 适用场景

- 表单提交: 用户注册、问卷调查
- 订单流程: 购物车→支付→完成
- 配置向导: 系统设置、服务开通
- 审批流程: 申请→审核→批准
- 
## UI 设计
### 6.1 展示样式
Steps 采用三部分布局，结构清晰：
- 标识区（Signage area）​​：默认是放置序号、可更改为 自定义icon、自定义dot、自定义图片
- 文本区（Text area）​​：默认标题、内容，可插入其他内容列如标签等自定义渲染内容。
- 连接器（Connector）​​：默认展示线链接，可更换为箭头等
####  6.1.1 Basic
 最基础的使用
Basic-横向布局
MCP： 
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-3280&m=dev
[图片]

Basic-竖向布局
竖向布局，适用于时间轴等场景。
MCP：
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-3367&m=dev
[图片]
####  6.1.2 Dot
精简样式，适用于简单流程
Dot-横向布局
MCP：
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-3293&m=dev
[图片]
Dot-竖向布局
MCP：
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-3372&m=dev
[图片]
####  6.1.3 icon
通过自定义Icon 实现每个步骤的图标不一样

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12031-12105&m=dev
[图片]
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12031-12106&m=dev
[图片]
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12031-12930&m=dev
[图片]
####  6.1.4 Navigation

导航布局：展示的信息更丰富

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-8807&m=dev
[图片]
### 6.2 自适应规则
- 默认宽度撑满父集容器
- 当宽度减少时，每个步骤之间的间距随之缩小，最小间距为16px
- 当再次缩小时，默认启动横向滚动
- 这是默认规则，当开启了栅格布局后，默认规则不再生效
- 竖向默认撑满父集容器
- 当宽度减小时，内容区域随之减小

### 6.3 横向滚动模式
- 可通过 `enableScrollMode` 开启横向滚动模式
- 开启后，步骤条始终保持横向布局，不会自动切换为垂直布局
- 当步骤条宽度超出容器宽度时，显示左右滚动箭头
- 通过 `scrollActionsConfig` 可配置箭头样式和滚动距离
- 滚动箭头支持类型：`lrArrows`（左右箭头）、`tbArrows`（上下箭头）、`dot`（圆点）
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12089-8433&m=dev


### 6.4 基础交互规则

- 步骤导航: 允许点击已完成步骤返回修改
- 状态反馈: 实时更新步骤状态（进行中/完成/错误）
- 错误处理: 错误步骤明确标识并提供解决指导
### 6.5 复合交互逻辑
- 步骤间数据持久化：切换步骤时保存已填写数据
- 步骤验证机制：前进前验证当前步骤数据完整性
- 动态步骤：根据条件显示/隐藏特定步骤
- 进度指示：支持百分比进度显示

## 7. 配置项
### 7.1 样式自定义
- 可设置整体区域的宽高以及背景、边框、圆角
- 三种大小可以选择： Large  Default Small

####  7.1.1 标识区
- 默认是放置序号、可更改为icon、dot、图片等自定义内容，可以设置大小、颜色、背景、边框、圆角
#### 7.1.2 文本区
- 默认展示标题和内容，可以开启和关闭，可以拓展字段，副标题、时间、倒计时、标签等等自定义内容
- 可以自定义文本的大小、颜色、粗细
- 可以更改文本间的间距大小
#### 7.1.3 连接器
- 默认是以线性的方式居中展示，可以自定义粗细、颜色、大小
- 默认展示线链接，可更换为箭头等其他自定义样式
- 可以设置展示的方位，居中、下方、顶部、
- 可以设置与标识区域是否连接，默认是断开的样式
### 7.2 布局方式
- 可以开启栅格布局
- 可以指定标识区和文本区的布局方式是上下还是左右布局，以及间距多少
### 7.3 锚链接
- 可开启锚链接，默认是关闭的

### 7.4 滚动模式配置

| 配置项 | 类型 | 默认值 | 说明 |
|-------|------|-------|------|
| enableScrollMode | boolean | false | 是否启用横向滚动模式 |
| scrollActionsConfig.show | boolean | true | 是否显示滚动箭头 |
| scrollActionsConfig.type | string | 'lrArrows' | 箭头类型（lrArrows/tbArrows/dot） |
| scrollActionsConfig.scrollDistance | number | 200 | 每次点击滚动的距离（px） |

