From 387ff12d77249505019e76dec908f44625520ff4 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Tue, 24 Sep 2024 19:12:05 +0800
Subject: [PATCH 1/3] refactor(steps): refactor steps

re #414
---
 src/steps/StepItem.tsx    | 195 +++++++++++++++++++++++++-------------
 src/steps/Steps.tsx       |  31 +++---
 src/steps/StepsContext.ts |   7 ++
 src/steps/defaultProps.ts |  11 ++-
 src/steps/index.tsx       |   3 +-
 src/steps/steps.en-US.md  |  35 +++++++
 src/steps/steps.md        |  24 +++--
 src/steps/style/index.js  |   3 +-
 src/steps/type.ts         |  23 ++++-
 9 files changed, 229 insertions(+), 103 deletions(-)
 create mode 100644 src/steps/steps.en-US.md

diff --git a/src/steps/StepItem.tsx b/src/steps/StepItem.tsx
index 2947854d..b46fda7a 100644
--- a/src/steps/StepItem.tsx
+++ b/src/steps/StepItem.tsx
@@ -1,11 +1,14 @@
 import React, { FC, useContext, useMemo } from 'react';
 import classnames from 'classnames';
-import { Icon } from 'tdesign-icons-react';
+import { CheckIcon, CloseIcon } from 'tdesign-icons-react';
+import isNumber from 'lodash/isNumber';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import { TdStepItemProps } from './type';
-import useConfig from '../_util/useConfig';
 import { stepItemDefaultProps } from './defaultProps';
 import StepsContext from './StepsContext';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import parseTNode from '../_util/parseTNode';
 
 export enum StepItemStatusEnum {
   DEFAULT = 'default',
@@ -29,96 +32,154 @@ export interface StepItemProps extends TdStepItemProps, NativeProps {
 }
 
 const StepItem: FC<StepItemProps> = (props) => {
-  const { title, content, icon, status, index, children } = props;
+  const { title, titleRight, extra, content, icon, status, index, children } = useDefaultProps(
+    props,
+    stepItemDefaultProps,
+  );
 
-  const { value, readonly, theme, layout, onChange } = useContext(StepsContext);
+  const {
+    value,
+    readonly,
+    theme,
+    layout,
+    currentStatus: contextStatus,
+    onChange,
+    sequence,
+    itemList,
+  } = useContext(StepsContext);
+
+  const stepItemClass = usePrefixClass('step-item');
+  const dot = useMemo(() => theme === StepThemeEnum.DOT, [theme]);
+
+  const isLastChild = useMemo(
+    () => index === (sequence === 'positive' ? itemList.length - 1 : 0),
+    [index, itemList.length, sequence],
+  );
 
-  const { classPrefix } = useConfig();
+  const currentStatus = useMemo(() => {
+    if (status !== StepItemStatusEnum.DEFAULT) return status;
+    if (index === value) return contextStatus;
+    if (isNumber(value) && index < value) return StepItemStatusEnum.FINISH;
+    return status;
+  }, [contextStatus, index, status, value]);
+
+  const rootClassName = useMemo(
+    () =>
+      classnames(stepItemClass, `${stepItemClass}--${layout}`, {
+        [`${stepItemClass}--default`]: readonly,
+        [`${stepItemClass}--${currentStatus}`]: currentStatus,
+      }),
+    [currentStatus, layout, readonly, stepItemClass],
+  );
+  const iconWrapperClassName = useMemo(
+    () => classnames(`${stepItemClass}__anchor`, `${stepItemClass}__anchor--${layout}`),
+    [layout, stepItemClass],
+  );
+  const dotClass = useMemo(
+    () => classnames(`${stepItemClass}__dot`, `${stepItemClass}__dot--${currentStatus}`),
+    [currentStatus, stepItemClass],
+  );
 
-  const name = `${classPrefix}-step`;
+  const iconClassName = useMemo(
+    () =>
+      classnames(``, {
+        [`${stepItemClass}__icon`]: icon,
+        [`${stepItemClass}__icon--${currentStatus}`]: icon,
+        [`${stepItemClass}__circle`]: !icon,
+        [`${stepItemClass}__circle--${currentStatus}`]: !icon,
+      }),
+    [currentStatus, icon, stepItemClass],
+  );
 
-  const dot = useMemo(() => theme === StepThemeEnum.DOT && layout === StepLayoutEnum.VERTICAL, [theme, layout]);
+  const contentClass = useMemo(
+    () =>
+      classnames(`${stepItemClass}__content`, `${stepItemClass}__content--${layout}`, {
+        [`${stepItemClass}__content--${layout}`]: isLastChild,
+        [`${stepItemClass}__content--last`]: isLastChild,
+      }),
+    [isLastChild, layout, stepItemClass],
+  );
+  const tilteClass = useMemo(
+    () =>
+      classnames(
+        `${stepItemClass}__title`,
+        `${stepItemClass}__title--${currentStatus}`,
+        `${stepItemClass}__title--${layout}`,
+      ),
+    [currentStatus, layout, stepItemClass],
+  );
+  const descriptionClass = useMemo(
+    () =>
+      classnames(
+        `${stepItemClass}__description`,
+        `${stepItemClass}__description--${currentStatus}`,
+        `${stepItemClass}__description--${layout}`,
+      ),
+    [currentStatus, layout, stepItemClass],
+  );
+  const extraClass = useMemo(
+    () =>
+      classnames(
+        `${stepItemClass}__extra`,
+        `${stepItemClass}__extra--${currentStatus}`,
+        `${stepItemClass}__extra--${layout}`,
+      ),
+    [currentStatus, layout, stepItemClass],
+  );
+  const separatorClass = useMemo(
+    () =>
+      classnames(
+        stepItemClass,
+        `${stepItemClass}__line`,
+        `${stepItemClass}__line--${currentStatus}`,
+        `${stepItemClass}__line--${layout}`,
+        `${stepItemClass}__line--${theme}`,
+        `${stepItemClass}__line--${sequence}`,
+      ),
+    [currentStatus, layout, sequence, stepItemClass, theme],
+  );
 
   const onStepClick = (e) => {
-    if (readonly || dot) return;
+    if (readonly) return;
     const currentValue = index;
     onChange(currentValue, value, { e });
   };
 
-  const innerClassName = useMemo(() => {
-    if (typeof icon === 'boolean') {
-      return `${name}__inner`;
+  const renderIconContent = () => {
+    if (icon) {
+      return parseTNode(icon);
     }
-    return classnames(`${name}__inner`, `${name}__inner__icon`);
-  }, [name, icon]);
 
-  const iconContent = useMemo(() => {
-    if (dot) {
-      return '';
+    if (currentStatus === StepItemStatusEnum.ERROR) {
+      return <CloseIcon />;
     }
 
-    if (status === StepItemStatusEnum.ERROR) {
-      return <Icon name="close" />;
+    if (currentStatus === StepItemStatusEnum.FINISH) {
+      return <CheckIcon />;
     }
 
-    if (index < value && readonly) {
-      return <Icon name="check" />;
-    }
-
-    if (typeof icon === 'boolean') {
-      return index + 1;
-    }
-
-    if (typeof icon === 'string') {
-      return <Icon name={icon} size="24" />;
-    }
-
-    return icon;
-  }, [status, index, value, readonly, icon, dot]);
-
-  const currentStatus = useMemo(() => {
-    if (status !== StepItemStatusEnum.DEFAULT) {
-      return status;
-    }
-    if (+value === index) {
-      return StepItemStatusEnum.PROCESS;
-    }
-    if (+value > index) {
-      return StepItemStatusEnum.FINISH;
-    }
-    return '';
-  }, [value, index, status]);
+    return index + 1;
+  };
 
   return withNativeProps(
     props,
-    <div
-      className={classnames(`${name}`, {
-        [`${name}--default`]: !readonly,
-        [`${name}--${currentStatus}`]: currentStatus,
-      })}
-    >
-      <div className={innerClassName}>
-        <div className={`${name}-icon`}>
-          <div
-            className={classnames(`${name}-icon__number`, {
-              [`${name}-icon__dot`]: dot,
-            })}
-            onClick={onStepClick}
-          >
-            {iconContent}
-          </div>
-        </div>
-        <div className={`${name}-content`}>
-          <div className={`${name}-title`}>{title}</div>
-          <div className={`${name}-description`}>{content || children}</div>
-          <div className={`${name}-extra`} />
+    <div className={rootClassName} onClick={onStepClick}>
+      <div className={iconWrapperClassName}>
+        {dot ? <div className={dotClass}></div> : <div className={iconClassName}>{renderIconContent()}</div>}
+      </div>
+      <div className={contentClass}>
+        <div className={tilteClass}>
+          {parseTNode(title)}
+          {parseTNode(titleRight)}
         </div>
+        <div className={descriptionClass}>{parseTNode(children || content)}</div>
+        <div className={extraClass}>{parseTNode(extra)}</div>
       </div>
+      {!isLastChild && <div className={separatorClass}></div>}
     </div>,
   );
 };
 
 StepItem.displayName = 'StepItem';
-StepItem.defaultProps = stepItemDefaultProps;
 
 export default StepItem;
diff --git a/src/steps/Steps.tsx b/src/steps/Steps.tsx
index 9d38aa46..e3a86ac3 100644
--- a/src/steps/Steps.tsx
+++ b/src/steps/Steps.tsx
@@ -3,10 +3,11 @@ import classnames from 'classnames';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import useDefault from '../_util/useDefault';
 import { TdStepsProps } from './type';
-import useConfig from '../_util/useConfig';
 import { stepsDefaultProps } from './defaultProps';
 import StepsContext from './StepsContext';
 import StepItem from './StepItem';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
 
 export interface StepsProps extends TdStepsProps, NativeProps {}
 
@@ -16,17 +17,14 @@ const Steps: FC<StepsProps> = (props) => {
     layout,
     readonly,
     theme,
-    separator,
+    sequence,
     current,
     defaultCurrent,
+    currentStatus,
     onChange: onCurrentChange,
     options,
-  } = props;
-
-  const { classPrefix } = useConfig();
-
-  const name = `${classPrefix}-steps`;
-
+  } = useDefaultProps(props, stepsDefaultProps);
+  const stepsClass = usePrefixClass('steps');
   const [value, onChange] = useDefault(current, defaultCurrent, onCurrentChange);
 
   const stepItemList = useMemo(() => {
@@ -42,17 +40,13 @@ const Steps: FC<StepsProps> = (props) => {
 
   return withNativeProps(
     props,
-    <StepsContext.Provider value={{ value, readonly, theme, layout, onChange }}>
+    <StepsContext.Provider
+      value={{ value, readonly, theme, layout, onChange, currentStatus, sequence, itemList: stepItemList }}
+    >
       <div
-        className={classnames(
-          name,
-          `${name}--${layout}`,
-          `${name}--${theme}-anchor`,
-          `${name}--${separator}-separator`,
-          {
-            [`${name}--readonly`]: readonly,
-          },
-        )}
+        className={classnames(stepsClass, `${stepsClass}--${layout}`, `${stepsClass}--${sequence}`, {
+          [`${stepsClass}--readonly`]: readonly,
+        })}
       >
         {stepItemList}
       </div>
@@ -61,6 +55,5 @@ const Steps: FC<StepsProps> = (props) => {
 };
 
 Steps.displayName = 'Steps';
-Steps.defaultProps = stepsDefaultProps;
 
 export default Steps;
diff --git a/src/steps/StepsContext.ts b/src/steps/StepsContext.ts
index d1f13485..5644fcd9 100644
--- a/src/steps/StepsContext.ts
+++ b/src/steps/StepsContext.ts
@@ -1,10 +1,14 @@
 import React, { MouseEvent } from 'react';
+import { TNode } from '../common';
 
 interface StepsContextProps {
   value: string | number;
   readonly: boolean;
   theme: 'default' | 'dot';
   layout: 'horizontal' | 'vertical';
+  currentStatus?: 'default' | 'process' | 'finish' | 'error';
+  sequence?: 'positive' | 'reverse';
+  itemList: TNode[];
   onChange: (current: string | number, previous: string | number, context?: { e?: MouseEvent<HTMLDivElement> }) => void;
 }
 
@@ -14,6 +18,9 @@ const StepsContext = React.createContext<StepsContextProps>({
   onChange: null,
   theme: 'default',
   layout: 'horizontal',
+  sequence: 'positive',
+  itemList: [],
+  currentStatus: 'default',
 });
 
 export default StepsContext;
diff --git a/src/steps/defaultProps.ts b/src/steps/defaultProps.ts
index 05ab6502..aa88112c 100644
--- a/src/steps/defaultProps.ts
+++ b/src/steps/defaultProps.ts
@@ -5,10 +5,17 @@
 import { TdStepsProps, TdStepItemProps } from './type';
 
 export const stepsDefaultProps: TdStepsProps = {
+  currentStatus: 'process',
   layout: 'horizontal',
   readonly: false,
-  separator: 'line',
+  sequence: 'positive',
   theme: 'default',
 };
 
-export const stepItemDefaultProps: TdStepItemProps = { icon: true, status: 'default' };
+export const stepItemDefaultProps: TdStepItemProps = {
+  content: '',
+  extra: '',
+  status: 'default',
+  title: '',
+  titleRight: '',
+};
diff --git a/src/steps/index.tsx b/src/steps/index.tsx
index 797cd5dd..cca63e0d 100644
--- a/src/steps/index.tsx
+++ b/src/steps/index.tsx
@@ -8,6 +8,7 @@ export type { StepItemProps } from './StepItem';
 export * from './type';
 
 export const Steps = _Steps;
-(Steps as any).StepItem = _StepItem;
+export const StepItem = _StepItem;
+// (Steps as any).StepItem = _StepItem;
 
 export default Steps;
diff --git a/src/steps/steps.en-US.md b/src/steps/steps.en-US.md
new file mode 100644
index 00000000..7e8bae8f
--- /dev/null
+++ b/src/steps/steps.en-US.md
@@ -0,0 +1,35 @@
+:: BASE_DOC ::
+
+## API
+
+### Steps Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+current | String / Number | - | \- | N
+defaultCurrent | String / Number | - | uncontrolled property | N
+currentStatus | String | process | options: default/process/finish/error | N
+layout | String | horizontal | options: horizontal/vertical | N
+options | Array | - | Typescript：`Array<TdStepItemProps>` | N
+readonly | Boolean | false | \- | N
+sequence | String | positive | options: positive/reverse | N
+theme | String | default | options: default/dot | N
+onChange | Function |  | Typescript：`(current: string \| number, previous: string \| number, context?: { e?: MouseEvent }) => void`<br/> | N
+
+
+### StepItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+extra | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N
+subStepItems | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N
+title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+titleRight | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
diff --git a/src/steps/steps.md b/src/steps/steps.md
index 6775b070..0a354897 100644
--- a/src/steps/steps.md
+++ b/src/steps/steps.md
@@ -1,29 +1,35 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Steps Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 | N
 defaultCurrent | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
+currentStatus | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 options | Array | - | 步骤条数据列表（作用和 StepItem 效果一样）。TS 类型：`Array<TdStepItemProps>` | N
 readonly | Boolean | false | 只读状态 | N
-separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
-onChange | Function |  | TS 类型：`(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
+onChange | Function |  | TS 类型：`(current: string \| number, previous: string \| number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
+
 
 ### StepItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-children | TNode | - | 步骤描述，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-content | TNode | '' | 步骤描述。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N
-title | TNode | '' | 标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+children | TNode | - | 步骤描述，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | '' | 步骤描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+extra | TNode | '' | 步骤条自定义内容 仅支持 layout = 'vertical' 时。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N
+subStepItems | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N
+title | TNode | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+titleRight | TNode | '' | 标题右侧数据 仅支持 layout = 'vertical' 时。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
diff --git a/src/steps/style/index.js b/src/steps/style/index.js
index 6156d9cf..5ce6b9cd 100644
--- a/src/steps/style/index.js
+++ b/src/steps/style/index.js
@@ -1 +1,2 @@
-import '../../_common/style/mobile/components/steps/_index.less';
+import '../../_common/style/mobile/components/steps/v2/_index.less';
+import '../../_common/style/mobile/components/step-item/v2/_index.less';
diff --git a/src/steps/type.ts b/src/steps/type.ts
index e2641c22..b447f542 100644
--- a/src/steps/type.ts
+++ b/src/steps/type.ts
@@ -16,6 +16,11 @@ export interface TdStepsProps {
    * 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成，非受控属性
    */
   defaultCurrent?: string | number;
+  /**
+   * 用于控制 current 指向的步骤条的状态
+   * @default process
+   */
+  currentStatus?: 'default' | 'process' | 'finish' | 'error';
   /**
    * 步骤条方向，有两种：横向和纵向
    * @default horizontal
@@ -31,10 +36,10 @@ export interface TdStepsProps {
    */
   readonly?: boolean;
   /**
-   * 步骤条分割符
-   * @default line
+   * 步骤条顺序
+   * @default positive
    */
-  separator?: 'line' | 'dashed' | 'arrow';
+  sequence?: 'positive' | 'reverse';
   /**
    * 步骤条风格
    * @default default
@@ -60,13 +65,18 @@ export interface TdStepItemProps {
    * @default ''
    */
   content?: TNode;
+  /**
+   * 步骤条自定义内容 仅支持 layout = 'vertical' 时
+   * @default ''
+   */
+  extra?: TNode;
   /**
    * 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标
    * @default true
    */
   icon?: TNode;
   /**
-   * 当前步骤的状态
+   * 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态
    * @default default
    */
   status?: StepStatus;
@@ -75,6 +85,11 @@ export interface TdStepItemProps {
    * @default ''
    */
   title?: TNode;
+  /**
+   * 标题右侧数据 仅支持 layout = 'vertical' 时
+   * @default ''
+   */
+  titleRight?: TNode;
 }
 
 export type StepStatus = 'default' | 'process' | 'finish' | 'error';

From 62927fbeaa12be750a0c9f21c50d69114d6bc347 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Wed, 25 Sep 2024 10:37:58 +0800
Subject: [PATCH 2/3] refactor(steps): add example

---
 site/mobile/mobile.config.js             |   2 +-
 src/steps/_example/click.jsx             |  54 -----------
 src/steps/_example/content.jsx           |  29 ------
 src/steps/_example/horizontal.jsx        |  60 ------------
 src/steps/_example/horizontal.tsx        |  84 +++++++++++++++++
 src/steps/_example/icon.jsx              |  76 ---------------
 src/steps/_example/index.jsx             |  47 ---------
 src/steps/_example/index.tsx             |  27 ++++++
 src/steps/_example/special.tsx           |  86 +++++++++++++++++
 src/steps/_example/status.tsx            |  84 +++++++++++++++++
 src/steps/_example/style/index.less      |   2 +-
 src/steps/_example/vertical-readonly.jsx |  20 ----
 src/steps/_example/vertical.jsx          |  14 ---
 src/steps/_example/vertical.tsx          | 115 +++++++++++++++++++++++
 14 files changed, 398 insertions(+), 302 deletions(-)
 delete mode 100644 src/steps/_example/click.jsx
 delete mode 100644 src/steps/_example/content.jsx
 delete mode 100644 src/steps/_example/horizontal.jsx
 create mode 100644 src/steps/_example/horizontal.tsx
 delete mode 100644 src/steps/_example/icon.jsx
 delete mode 100644 src/steps/_example/index.jsx
 create mode 100644 src/steps/_example/index.tsx
 create mode 100644 src/steps/_example/special.tsx
 create mode 100644 src/steps/_example/status.tsx
 delete mode 100644 src/steps/_example/vertical-readonly.jsx
 delete mode 100644 src/steps/_example/vertical.jsx
 create mode 100644 src/steps/_example/vertical.tsx

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index d8fcfdec..c6050819 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -235,7 +235,7 @@ export default {
     {
       title: 'Steps 步骤条',
       name: 'steps',
-      component: () => import('tdesign-mobile-react/steps/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/steps/_example/index.tsx'),
     },
     {
       title: 'TabBar 标签栏',
diff --git a/src/steps/_example/click.jsx b/src/steps/_example/click.jsx
deleted file mode 100644
index 403b33ac..00000000
--- a/src/steps/_example/click.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState } from 'react';
-import { Steps } from 'tdesign-mobile-react';
-
-export default function Click() {
-  const [current1, setCurrent1] = useState(1);
-  const [current2] = useState(1);
-  const [current3] = useState(1);
-  const stepItemList = [
-    {
-      title: '步骤描述',
-      content: '辅助信息文字最多两行',
-    },
-    {
-      title: '步骤描述',
-      content: '辅助信息文字最多两行',
-    },
-  ];
-  return (
-    <>
-      <Steps
-        current={current1}
-        onChange={(value) => {
-          setCurrent1(value);
-        }}
-      >
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-      </Steps>
-      <Steps defaultCurrent={current2} options={stepItemList} />
-      <Steps defaultCurrent={current3}>
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-      </Steps>
-      <Steps defaultCurrent={current3}>
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-      </Steps>
-      <Steps defaultCurrent={current2}>
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-        <Steps.StepItem title="步骤描述" />
-      </Steps>
-      <Steps defaultCurrent={current2}>
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-        <Steps.StepItem title="步骤描述" content="辅助信息文字最多两行" />
-      </Steps>
-    </>
-  );
-}
diff --git a/src/steps/_example/content.jsx b/src/steps/_example/content.jsx
deleted file mode 100644
index ea1733ae..00000000
--- a/src/steps/_example/content.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useState } from 'react';
-import { Steps } from 'tdesign-mobile-react';
-
-export default function Content() {
-  const [current] = useState(1);
-  return (
-    <>
-      <Steps defaultCurrent={current} readonly={true} layout="vertical">
-        <Steps.StepItem
-          title="已完成步骤"
-          content={
-            <div>
-              可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。
-              <img style={{marginTop: '8px'}} src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/mobile/%E5%9B%BE%E7%89%871.png" alt="" />
-            </div>
-          }
-        />
-        <Steps.StepItem
-          title="当前步骤"
-          content="可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。"
-        />
-        <Steps.StepItem
-          title="未完成步骤"
-          content="可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。"
-        />
-      </Steps>
-    </>
-  );
-}
diff --git a/src/steps/_example/horizontal.jsx b/src/steps/_example/horizontal.jsx
deleted file mode 100644
index 1760f7c2..00000000
--- a/src/steps/_example/horizontal.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { Steps } from 'tdesign-mobile-react';
-
-export default function Horizontal() {
-  return (
-    <>
-      <div className="tdesign-mobile-block">
-        <Steps defaultCurrent={0} readonly={true}>
-          <Steps.StepItem title="当前步骤" />
-          <Steps.StepItem title="未完成步骤" />
-        </Steps>
-        <Steps defaultCurrent={0} readonly={true}>
-          <Steps.StepItem title="当前步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-        <Steps defaultCurrent={0} readonly={true}>
-          <Steps.StepItem title="错误步骤" content="辅助信息文字最多两行" status="error" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-      </div>
-      <div className="tdesign-mobile-block">
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" />
-          <Steps.StepItem title="当前步骤" />
-          <Steps.StepItem title="未完成步骤" />
-        </Steps>
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="当前步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="错误步骤" content="辅助信息文字最多两行" status="error" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-      </div>
-      <div className="tdesign-mobile-block">
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" />
-          <Steps.StepItem title="当前步骤" />
-          <Steps.StepItem title="未完成步骤" />
-          <Steps.StepItem title="未完成步骤" />
-        </Steps>
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="当前步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-        <Steps defaultCurrent={1} readonly={true}>
-          <Steps.StepItem title="已完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="错误步骤" content="辅助信息文字最多两行" status="error" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-          <Steps.StepItem title="未完成步骤" content="辅助信息文字最多两行" />
-        </Steps>
-      </div>
-    </>
-  );
-}
diff --git a/src/steps/_example/horizontal.tsx b/src/steps/_example/horizontal.tsx
new file mode 100644
index 00000000..a3e917f6
--- /dev/null
+++ b/src/steps/_example/horizontal.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Steps, StepItem } from 'tdesign-mobile-react';
+import { CartIcon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function Horizontal() {
+  const [options, setOptions] = useState({
+    first: 1,
+    second: 1,
+    third: 1,
+  });
+
+  const onFirstChange = (current: number) => {
+    console.log('first change', current);
+    setOptions({
+      ...options,
+      first: current,
+    });
+  };
+  const onSecondChange = (current: number) => {
+    console.log('second change', current);
+    setOptions({
+      ...options,
+      second: current,
+    });
+  };
+  const onThirdChange = (current: number) => {
+    console.log('third change', current);
+    setOptions({
+      ...options,
+      third: current,
+    });
+  };
+
+  const getTitle = (type: 'first' | 'second' | 'third', index: number) => {
+    if (index === options[type]) {
+      return '当前步骤';
+    }
+    if (index < options[type]) {
+      return '已完成';
+    }
+    if (index > options[type]) {
+      return '未完成';
+    }
+  };
+
+  return (
+    <>
+      <TDemoBlock summary="水平带序号步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.first} onChange={onFirstChange}>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('first', index)} index={index} content="辅助信息" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="水平带图标步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.second} onChange={onSecondChange}>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem
+                key={index}
+                title={getTitle('second', index)}
+                index={index}
+                content="辅助信息"
+                icon={<CartIcon size={20} />}
+              />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="水平简略步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.third} theme="dot" onChange={onThirdChange}>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('third', index)} index={index} content="辅助信息" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+    </>
+  );
+}
diff --git a/src/steps/_example/icon.jsx b/src/steps/_example/icon.jsx
deleted file mode 100644
index b1361754..00000000
--- a/src/steps/_example/icon.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import { Steps } from 'tdesign-mobile-react';
-import { UserIcon, LocationIcon, TimeIcon } from 'tdesign-icons-react'
-
-export default function Icon() {
-  const [current, setCurrent] = useState(1);
-  return (
-    <>
-      <Steps
-        current={current}
-        onChange={(value) => {
-          setCurrent(value);
-        }}
-      >
-        <Steps.StepItem
-          title="步骤描述"
-          icon={
-            <>
-              <UserIcon />
-            </>
-          }
-        />
-        <Steps.StepItem
-          title="选中步骤"
-          icon={
-            <>
-              <LocationIcon />
-            </>
-          }
-        />
-        <Steps.StepItem
-          title="步骤描述"
-          icon={
-            <>
-              <TimeIcon />
-            </>
-          }
-        />
-      </Steps>
-      <Steps
-        current={current}
-        onChange={(value) => {
-          setCurrent(value);
-        }}
-      >
-        <Steps.StepItem
-          title="步骤描述"
-          content="辅助信息文字最多两行"
-          icon={
-            <>
-              <UserIcon />
-            </>
-          }
-        />
-        <Steps.StepItem
-          title="选中步骤"
-          content="辅助信息文字最多两行"
-          icon={
-            <>
-              <LocationIcon />
-            </>
-          }
-        />
-        <Steps.StepItem
-          title="步骤描述"
-          content="辅助信息文字最多两行"
-          icon={
-            <>
-              <TimeIcon />
-            </>
-          }
-        />
-      </Steps>
-    </>
-  );
-}
diff --git a/src/steps/_example/index.jsx b/src/steps/_example/index.jsx
deleted file mode 100644
index 8cff8ef1..00000000
--- a/src/steps/_example/index.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import Click from './click';
-import Icon from './icon';
-import Horizontal from './horizontal';
-import Content from './content';
-
-import './style/index.less';
-import Vertical from './vertical';
-import VerticalReadonly from './vertical-readonly';
-
-export default function StepsDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <TDemoHeader title="Steps 步骤条" summary="用于用户对某个任务的时间节点" />
-      <TDemoBlock title="01 类型" summary="横向可操作步骤条">
-        <div className="tdesign-mobile-block">
-          <Click />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="横向带图标可操作步骤条">
-        <div className="tdesign-mobile-block">
-          <Icon />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="横向只读步骤条">
-        <Horizontal />
-      </TDemoBlock>
-      <TDemoBlock title="" summary="竖向只读步骤条">
-        <div className="tdesign-mobile-block">
-          <VerticalReadonly />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="竖向简化只读步骤条">
-        <div className="tdesign-mobile-block">
-          <Vertical />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="自定义内容步骤条">
-        <div className="tdesign-mobile-block">
-          <Content />
-        </div>
-      </TDemoBlock>
-    </div>
-  );
-}
diff --git a/src/steps/_example/index.tsx b/src/steps/_example/index.tsx
new file mode 100644
index 00000000..26e8a929
--- /dev/null
+++ b/src/steps/_example/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import Horizontal from './horizontal';
+import Vertical from './vertical';
+import Status from './status';
+import Special from './special';
+
+import './style/index.less';
+
+export default function StepsDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Steps 步骤条" summary="用于任务步骤展示或任务进度展示" />
+      <TDemoBlock title="01 组件类型">
+        <Horizontal />
+        <Vertical />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态">
+        <Status />
+      </TDemoBlock>
+      <TDemoBlock title="03 特殊类型">
+        <Special />
+      </TDemoBlock>
+    </div>
+  );
+}
diff --git a/src/steps/_example/special.tsx b/src/steps/_example/special.tsx
new file mode 100644
index 00000000..07d61ed8
--- /dev/null
+++ b/src/steps/_example/special.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Steps, StepItem, Button } from 'tdesign-mobile-react';
+import { CartIcon, ChevronRightIcon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function Special() {
+  const [options, setOptions] = useState({
+    first: 3,
+    second: 4,
+  });
+
+  const [count, setCount] = useState(4);
+
+  const onFirstChange = (current: number) => {
+    console.log('first change', current);
+    setOptions({
+      ...options,
+      first: current,
+    });
+  };
+  const onSecondChange = (current: number) => {
+    console.log('second change', current);
+    setOptions({
+      ...options,
+      second: current,
+    });
+  };
+
+  const getTitle = (type: 'first' | 'second' | 'third', index: number) => {
+    if (index === options[type]) {
+      return '当前步骤';
+    }
+    if (index < options[type]) {
+      return '已完成步骤';
+    }
+    if (index > options[type]) {
+      return '未完成';
+    }
+  };
+
+  return (
+    <>
+      <TDemoBlock summary="垂直自定义步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps current={options.first} onChange={onFirstChange} layout="vertical" theme="dot">
+            {Array.from({ length: count }).map((_, index) => (
+              <StepItem
+                key={index}
+                title={getTitle('first', index)}
+                index={index}
+                content="辅助信息"
+                titleRight={<ChevronRightIcon size={22} color="rgba(0, 0, 0, .4)" />}
+              />
+            ))}
+          </Steps>
+          <Button
+            style={{ width: '100%' }}
+            size="large"
+            theme="light"
+            onClick={() => {
+              setOptions((pre) => ({ ...pre, first: pre.first + 1 }));
+              setCount(count + 1);
+            }}
+          >
+            下一步
+          </Button>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="纯展示步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.second} onChange={onSecondChange} layout="vertical" theme="dot" readonly>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem
+                key={index}
+                title="步骤展示"
+                index={index}
+                content="可自定义此处内容"
+                icon={<CartIcon size={20} />}
+              />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+    </>
+  );
+}
diff --git a/src/steps/_example/status.tsx b/src/steps/_example/status.tsx
new file mode 100644
index 00000000..8136ab85
--- /dev/null
+++ b/src/steps/_example/status.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Steps, StepItem } from 'tdesign-mobile-react';
+import { CartIcon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function Status() {
+  const [options, setOptions] = useState({
+    first: 1,
+    second: 1,
+    third: 1,
+  });
+
+  const onFirstChange = (current: number) => {
+    console.log('first change', current);
+    setOptions({
+      ...options,
+      first: current,
+    });
+  };
+  const onSecondChange = (current: number) => {
+    console.log('second change', current);
+    setOptions({
+      ...options,
+      second: current,
+    });
+  };
+  const onThirdChange = (current: number) => {
+    console.log('third change', current);
+    setOptions({
+      ...options,
+      third: current,
+    });
+  };
+
+  const getTitle = (type: 'first' | 'second' | 'third', index: number) => {
+    if (index === options[type]) {
+      return '当前步骤';
+    }
+    if (index < options[type]) {
+      return '已完成';
+    }
+    if (index > options[type]) {
+      return '未完成';
+    }
+  };
+
+  return (
+    <>
+      <TDemoBlock summary="选项卡状态">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.first} onChange={onFirstChange} currentStatus="error">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('first', index)} index={index} content="辅助信息" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock>
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.second} onChange={onSecondChange} currentStatus="error">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem
+                key={index}
+                title={getTitle('second', index)}
+                index={index}
+                content="辅助信息"
+                icon={<CartIcon size={20} />}
+              />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock>
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.third} theme="dot" onChange={onThirdChange} currentStatus="error">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('third', index)} index={index} content="辅助信息" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+    </>
+  );
+}
diff --git a/src/steps/_example/style/index.less b/src/steps/_example/style/index.less
index d9b5deba..a3bf6a57 100644
--- a/src/steps/_example/style/index.less
+++ b/src/steps/_example/style/index.less
@@ -1,6 +1,6 @@
 .tdesign-mobile-block {
   background-color: #ffffff;
-  padding: 40px 12px;
+  padding: 16px 12px;
 
   & + & {
     margin-top: 12px;
diff --git a/src/steps/_example/vertical-readonly.jsx b/src/steps/_example/vertical-readonly.jsx
deleted file mode 100644
index 988236e9..00000000
--- a/src/steps/_example/vertical-readonly.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-import { Steps } from 'tdesign-mobile-react';
-
-export default function Vertical() {
-  const [current] = useState(1);
-  return (
-    <>
-      <Steps defaultCurrent={current} readonly={true} layout="vertical">
-        <Steps.StepItem title="已完成步骤" />
-        <Steps.StepItem title="当前步骤" />
-        <Steps.StepItem title="未完成步骤" />
-      </Steps>
-      <Steps defaultCurrent={current} readonly={true} layout="vertical">
-        <Steps.StepItem title="已完成步骤" />
-        <Steps.StepItem title="错误步骤" status="error" />
-        <Steps.StepItem title="未完成步骤" />
-      </Steps>
-    </>
-  );
-}
diff --git a/src/steps/_example/vertical.jsx b/src/steps/_example/vertical.jsx
deleted file mode 100644
index 2c343cbd..00000000
--- a/src/steps/_example/vertical.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { useState } from 'react';
-import { Steps } from 'tdesign-mobile-react';
-
-export default function Vertical() {
-  const [current] = useState(1);
-  // 竖向简化只读步骤条
-  return (
-    <Steps defaultCurrent={current} theme="dot" layout="vertical">
-      <Steps.StepItem title="事件描述" />
-      <Steps.StepItem title="事件描述" />
-      <Steps.StepItem title="事件描述" />
-    </Steps>
-  );
-}
diff --git a/src/steps/_example/vertical.tsx b/src/steps/_example/vertical.tsx
new file mode 100644
index 00000000..a50118ac
--- /dev/null
+++ b/src/steps/_example/vertical.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Steps, StepItem, Image } from 'tdesign-mobile-react';
+import { CartIcon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function Vertical() {
+  const [options, setOptions] = useState({
+    first: 1,
+    second: 1,
+    third: 1,
+    four: 1,
+  });
+
+  const onFirstChange = (current: number) => {
+    console.log('first change', current);
+    setOptions({
+      ...options,
+      first: current,
+    });
+  };
+  const onSecondChange = (current: number) => {
+    console.log('second change', current);
+    setOptions({
+      ...options,
+      second: current,
+    });
+  };
+  const onThirdChange = (current: number) => {
+    console.log('third change', current);
+    setOptions({
+      ...options,
+      third: current,
+    });
+  };
+  const onFourChange = (current: number) => {
+    console.log('four change', current);
+    setOptions({
+      ...options,
+      four: current,
+    });
+  };
+
+  const getTitle = (type: 'first' | 'second' | 'third' | 'four', index: number) => {
+    if (index === options[type]) {
+      return '当前步骤';
+    }
+    if (index < options[type]) {
+      return '已完成';
+    }
+    if (index > options[type]) {
+      return '未完成';
+    }
+  };
+
+  return (
+    <>
+      <TDemoBlock summary="垂直带序号步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.first} onChange={onFirstChange} layout="vertical">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('first', index)} index={index} content="可自定义此处内容" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="垂直带图标步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.second} onChange={onSecondChange} layout="vertical">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem
+                key={index}
+                title={getTitle('second', index)}
+                index={index}
+                content="可自定义此处内容"
+                icon={<CartIcon size={20} />}
+              />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="垂直简略步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.third} theme="dot" onChange={onThirdChange} layout="vertical">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem key={index} title={getTitle('third', index)} index={index} content="可自定义此处内容" />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="垂直带可自定义此处内容步骤条">
+        <div className="tdesign-mobile-block">
+          <Steps defaultCurrent={options.four} theme="dot" onChange={onFourChange} layout="vertical">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <StepItem
+                key={index}
+                title={getTitle('four', index)}
+                index={index}
+                content="可自定义此处内容"
+                extra={
+                  index === 1 && (
+                    <Image
+                      src="https://tdesign.gtimg.com/mobile/demos/steps1.png"
+                      alt="图标"
+                      style={{ width: '100%' }}
+                    />
+                  )
+                }
+              />
+            ))}
+          </Steps>
+        </div>
+      </TDemoBlock>
+    </>
+  );
+}

From df11247086e7ea0446540bcc8c85982223ef5acb Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Wed, 25 Sep 2024 10:42:36 +0800
Subject: [PATCH 3/3] test(steps): update snap

---
 test/snap/__snapshots__/csr.test.jsx.snap | 4342 +++++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap |   10 +
 2 files changed, 4352 insertions(+)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 400d9c55..1de5b1bf 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -41408,6 +41408,4338 @@ exports[`csr snapshot test > csr test src/stepper/_example/theme.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        水平带序号步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--finish"
+              >
+                <svg
+                  class="t-icon t-icon-check"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--process"
+              >
+                2
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                3
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                4
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        水平带图标步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--finish"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--process"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        水平简略步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--process"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Steps 步骤条
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        用于任务步骤展示或任务进度展示
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              水平带序号步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-check"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--process"
+                    >
+                      2
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      3
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      4
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              水平带图标步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--process"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              水平简略步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--process"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              垂直带序号步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-check"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--process"
+                    >
+                      2
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      3
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      4
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              垂直带图标步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--process"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              垂直简略步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--process"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              垂直带可自定义此处内容步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--process"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                        style="width: 100%;"
+                      >
+                        <div
+                          class="t-image__mask"
+                        >
+                          <div
+                            class="t-loading t-loading--center"
+                            style="font-size: 20px;"
+                          >
+                            <div
+                              class="t-loading__dots"
+                              style="animation-duration: 800ms; width: 20px; height: 20px;"
+                            >
+                              <div
+                                class="t-loading__dot"
+                                style="animation-duration: 0.8s; animation-delay: 0s;"
+                              />
+                              <div
+                                class="t-loading__dot"
+                                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                              />
+                              <div
+                                class="t-loading__dot"
+                                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        <img
+                          alt="图标"
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/steps1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          02 组件状态
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              选项卡状态
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-check"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--error"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--error"
+                    >
+                      <svg
+                        class="t-icon t-icon-close"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      3
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__circle t-step-item__circle--default"
+                    >
+                      4
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--finish"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--error"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--error"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__icon t-step-item__icon--default"
+                    >
+                      <svg
+                        class="t-icon t-icon-cart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 20px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--horizontal t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+                    >
+                      已完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--error"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--error"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+                    >
+                      当前步骤
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--horizontal t-step-item--default"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--horizontal"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--default"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+                    >
+                      未完成
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          03 特殊类型
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              垂直自定义步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成步骤
+                      <svg
+                        class="t-icon t-icon-chevron-right"
+                        color="rgba(0, 0, 0, .4)"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 22px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成步骤
+                      <svg
+                        class="t-icon t-icon-chevron-right"
+                        color="rgba(0, 0, 0, .4)"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 22px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      已完成步骤
+                      <svg
+                        class="t-icon t-icon-chevron-right"
+                        color="rgba(0, 0, 0, .4)"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 22px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--process"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--process"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+                    >
+                      当前步骤
+                      <svg
+                        class="t-icon t-icon-chevron-right"
+                        color="rgba(0, 0, 0, .4)"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 22px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+                    >
+                      辅助信息
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+              <button
+                class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+                style="width: 100%;"
+                type="button"
+              >
+                <span
+                  class="t-button__content"
+                >
+                   
+                  下一步
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+        >
+          <div
+            class="tdesign-mobile-demo-block__header"
+          >
+            <p
+              class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+            >
+              纯展示步骤条
+            </p>
+          </div>
+          <div
+            class="tdesign-mobile-demo-block__slot"
+          >
+            <div
+              class="tdesign-mobile-block"
+            >
+              <div
+                class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"
+              >
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      步骤展示
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      步骤展示
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      步骤展示
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+                  />
+                </div>
+                <div
+                  class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+                >
+                  <div
+                    class="t-step-item__anchor t-step-item__anchor--vertical"
+                  >
+                    <div
+                      class="t-step-item__dot t-step-item__dot--finish"
+                    />
+                  </div>
+                  <div
+                    class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+                  >
+                    <div
+                      class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+                    >
+                      步骤展示
+                      
+                    </div>
+                    <div
+                      class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+                    >
+                      可自定义此处内容
+                    </div>
+                    <div
+                      class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/steps/_example/special.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        垂直自定义步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成步骤
+                <svg
+                  class="t-icon t-icon-chevron-right"
+                  color="rgba(0, 0, 0, .4)"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 22px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成步骤
+                <svg
+                  class="t-icon t-icon-chevron-right"
+                  color="rgba(0, 0, 0, .4)"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 22px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成步骤
+                <svg
+                  class="t-icon t-icon-chevron-right"
+                  color="rgba(0, 0, 0, .4)"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 22px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--process"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+              >
+                当前步骤
+                <svg
+                  class="t-icon t-icon-chevron-right"
+                  color="rgba(0, 0, 0, .4)"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 22px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+          style="width: 100%;"
+          type="button"
+        >
+          <span
+            class="t-button__content"
+          >
+             
+            下一步
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        纯展示步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                步骤展示
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                步骤展示
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                步骤展示
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                步骤展示
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        选项卡状态
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--finish"
+              >
+                <svg
+                  class="t-icon t-icon-check"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--error"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--error"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                3
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                4
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--finish"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--error"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--error"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--horizontal t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--error"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--error"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--horizontal t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--horizontal"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal"
+              >
+                辅助信息
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        垂直带序号步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--finish"
+              >
+                <svg
+                  class="t-icon t-icon-check"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--process"
+              >
+                2
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                3
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__circle t-step-item__circle--default"
+              >
+                4
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        垂直带图标步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--finish"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--process"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__icon t-step-item__icon--default"
+              >
+                <svg
+                  class="t-icon t-icon-cart"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 20px;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        垂直简略步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--process"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        垂直带可自定义此处内容步骤条
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      <div
+        class="tdesign-mobile-block"
+      >
+        <div
+          class="t-steps t-steps--vertical t-steps--positive"
+        >
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--finish"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--finish"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical"
+              >
+                已完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--process"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--process"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--process t-step-item__title--vertical"
+              >
+                当前步骤
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--process t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"
+              >
+                <div
+                  class="t-image t-image--square"
+                  style="width: 100%;"
+                >
+                  <div
+                    class="t-image__mask"
+                  >
+                    <div
+                      class="t-loading t-loading--center"
+                      style="font-size: 20px;"
+                    >
+                      <div
+                        class="t-loading__dots"
+                        style="animation-duration: 800ms; width: 20px; height: 20px;"
+                      >
+                        <div
+                          class="t-loading__dot"
+                          style="animation-duration: 0.8s; animation-delay: 0s;"
+                        />
+                        <div
+                          class="t-loading__dot"
+                          style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                        />
+                        <div
+                          class="t-loading__dot"
+                          style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <img
+                    alt="图标"
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/steps1.png"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+            <div
+              class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"
+            />
+          </div>
+          <div
+            class="t-step-item t-step-item--vertical t-step-item--default"
+          >
+            <div
+              class="t-step-item__anchor t-step-item__anchor--vertical"
+            >
+              <div
+                class="t-step-item__dot t-step-item__dot--default"
+              />
+            </div>
+            <div
+              class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"
+            >
+              <div
+                class="t-step-item__title t-step-item__title--default t-step-item__title--vertical"
+              >
+                未完成
+                
+              </div>
+              <div
+                class="t-step-item__description t-step-item__description--default t-step-item__description--vertical"
+              >
+                可自定义此处内容
+              </div>
+              <div
+                class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/sticky/_example/base.tsx 1`] = `
 <div>
   <div
@@ -53642,6 +57974,16 @@ exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `"<div class="stepper-example"><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--filled t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--outline t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--outline t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--outline t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--normal t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Steps 步骤条</h1><p class="tdesign-mobile-demo-header__summary">用于任务步骤展示或任务进度展示</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带可自定义此处内容步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"><div class="t-image t-image--square" style="width:100%"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/steps1.png" alt="图标"/></div></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选项卡状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--error"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 特殊类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直自定义步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div></div></div><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle" style="width:100%"><span class="t-button__content"> <!-- -->下一步</span></button></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">纯展示步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直自定义步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div></div></div><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle" style="width:100%"><span class="t-button__content"> <!-- -->下一步</span></button></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">纯展示步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选项卡状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--error"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带可自定义此处内容步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"><div class="t-image t-image--square" style="width:100%"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/steps1.png" alt="图标"/></div></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"<div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle custom-common-button"><span class="t-button__content"> <!-- -->基础吸顶</span></button></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"<div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle custom-button custom-common-button"><span class="t-button__content"> <!-- -->指定容器</span></button></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index b3964200..ae45c65b 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -344,6 +344,16 @@ exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `"<div class="stepper-example"><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--filled t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--outline t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--outline t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--outline t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><div class="t-stepper t-stepper--medium"><div class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-remove t-stepper__minus-icon"><path fill="currentColor" d="M4 11h16v2H4v-2z"></path></svg></div><input type="tel" value="3" class="t-stepper__input t-stepper__input--normal t-stepper__input--medium" inputMode="numeric"/><div class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add t-stepper__plus-icon"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Steps 步骤条</h1><p class="tdesign-mobile-demo-header__summary">用于任务步骤展示或任务进度展示</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--process t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带可自定义此处内容步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"><div class="t-image t-image--square" style="width:100%"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/steps1.png" alt="图标"/></div></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选项卡状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--error"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 特殊类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直自定义步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div></div></div><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle" style="width:100%"><span class="t-button__content"> <!-- -->下一步</span></button></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">纯展示步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直自定义步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="font-size:22px" color="rgba(0, 0, 0, .4)"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">辅助信息</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div></div></div><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle" style="width:100%"><span class="t-button__content"> <!-- -->下一步</span></button></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">纯展示步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive t-steps--readonly"><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">步骤展示</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选项卡状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--error"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--horizontal t-steps--positive"><div class="t-step-item t-step-item--horizontal t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--horizontal">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--error"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--error"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--error t-step-item__title--horizontal">当前步骤</div><div class="t-step-item__description t-step-item__description--error t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--error t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--error t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--horizontal t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--horizontal t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--horizontal"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--horizontal t-step-item__content--horizontal t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--horizontal">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--horizontal">辅助信息</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--horizontal"></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `"<div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带序号步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--process">2</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">3</div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__circle t-step-item__circle--default">4</div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带图标步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--finish"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--process"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--default t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__icon t-step-item__icon--default"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-cart" style="font-size:20px"><path fill="currentColor" d="M0 1h4.76l.55 2h18.08l-3.67 11H7.78l-.5 2H22v2H4.72l1.25-4.99L3.24 3H0V1zm7.76 11h10.52l2.33-7H5.85l1.91 7zM4 21a2 2 0 114 0 2 2 0 01-4 0zm14 0a2 2 0 114 0 2 2 0 01-4 0z"></path></svg></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直简略步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">垂直带可自定义此处内容步骤条</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-mobile-block"><div class="t-steps t-steps--vertical t-steps--positive"><div class="t-step-item t-step-item--vertical t-step-item--finish"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--finish"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--finish t-step-item__title--vertical">已完成</div><div class="t-step-item__description t-step-item__description--finish t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--finish t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--finish t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--process"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--process"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--process t-step-item__title--vertical">当前步骤</div><div class="t-step-item__description t-step-item__description--process t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--process t-step-item__extra--vertical"><div class="t-image t-image--square" style="width:100%"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/steps1.png" alt="图标"/></div></div></div><div class="t-step-item t-step-item__line t-step-item__line--process t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div><div class="t-step-item t-step-item__line t-step-item__line--default t-step-item__line--vertical t-step-item__line--dot t-step-item__line--positive"></div></div><div class="t-step-item t-step-item--vertical t-step-item--default"><div class="t-step-item__anchor t-step-item__anchor--vertical"><div class="t-step-item__dot t-step-item__dot--default"></div></div><div class="t-step-item__content t-step-item__content--vertical t-step-item__content--vertical t-step-item__content--last"><div class="t-step-item__title t-step-item__title--default t-step-item__title--vertical">未完成</div><div class="t-step-item__description t-step-item__description--default t-step-item__description--vertical">可自定义此处内容</div><div class="t-step-item__extra t-step-item__extra--default t-step-item__extra--vertical"></div></div></div></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"<div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle custom-common-button"><span class="t-button__content"> <!-- -->基础吸顶</span></button></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"<div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle custom-button custom-common-button"><span class="t-button__content"> <!-- -->指定容器</span></button></div></div></div>"`;