示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地发布进度
导入进度
- 上传已完成
- 解析当前步骤
- 校验错误
- 完成
水平排列
- 草稿已完成
- 审核当前步骤
- 发布
垂直排列
- 草稿已完成
- 审核当前步骤
- 发布
发布流程
- 内容已完成
- 审核当前步骤
- 发布完成审核后开放已禁用
使用建议
流程状态始终由宿主持有
items 只呈现宿主传入的 pending、current、completed 或 error；onStepSelect 只上报选择意图，宿主再决定是否更新当前步骤。
区分展示步骤与可选择步骤
不传 onStepSelect 时保持纯展示的有序列表；提供回调时只让确实可返回的步骤成为按钮，并用 selectable=false 或 disabled 表达边界。
方向不应改变阅读顺序
短标签可使用水平方向，长说明或窄容器更适合垂直方向；DOM、键盘和视觉顺序必须保持一致。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseSteps } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Steps 不负责路由、工作流、异步完成、访问权限或状态持久化；宿主必须验证选择是否允许并回传最终状态。
- T17 尚缺真实 Chromium browser interaction、manual keyboard/focus、axe、deterministic visual、移动端/RTL 与 packed React 18/19 证据；步骤选择、禁用保护、窄屏溢出和状态宣告尚未完成最终闭环。
- Storybook play, automated axe, manual keyboard/focus review, deterministic visual evidence, and packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseStepsProps
extends Omit<
HTMLAttributes<HTMLOListElement>,
'children' | 'className' | 'role' | 'style'
> {
items: readonly BaseStepItem[];
orientation?: 'horizontal' | 'vertical';
statusLabels?: Partial<BaseStepsStatusLabels>;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseStepsClassNames;
style?: CSSProperties;
onStepSelect?: (id: string, item: BaseStepItem, index: number) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items必填 | 用于生成组件条目的一组结构化数据。 | readonly BaseStepItem[] | — |
orientation | 内容或交互项的排列方向。 | 'horizontal' | 'vertical' | 'horizontal' |
statusLabels | 覆盖步骤状态的可访问文本。 | Partial<BaseStepsStatusLabels> | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseStepsClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onStepSelect | 步骤被选择时调用的回调，并提供步骤 id、条目和索引。 | (id: string, item: BaseStepItem, index: number) => void | — |