From 0e5440efa4d1f1af86505d120e9f2a6c7e5fa72c Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Fri, 15 Jul 2022 11:50:13 +0800
Subject: [PATCH 01/15] =?UTF-8?q?feat(timeline):=20=E6=96=B0=E5=A2=9Etimel?=
 =?UTF-8?q?ine=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/site.config.mjs                      |  8 ++-
 src/_util/renderTNode.ts                  |  6 +-
 src/index.ts                              |  1 +
 src/time-line/defaultProps.ts             | 12 ++++
 src/time-line/time-line.md                | 27 ++++++++
 src/time-line/type.ts                     | 62 +++++++++++++++++++
 src/timeline/Timeline.tsx                 | 75 +++++++++++++++++++++++
 src/timeline/TimelineContext.ts           | 10 +++
 src/timeline/TimelineItem.tsx             | 58 ++++++++++++++++++
 src/timeline/__tests__/time-line.test.tsx |  4 ++
 src/timeline/_example/base.jsx            | 11 ++++
 src/timeline/_example/reverse.jsx         | 15 +++++
 src/timeline/defaultProps.ts              | 12 ++++
 src/timeline/index.ts                     |  9 +++
 src/timeline/style/css.js                 |  1 +
 src/timeline/style/index.js               |  1 +
 src/timeline/timeline.md                  | 25 ++++++++
 src/timeline/type.ts                      | 50 +++++++++++++++
 18 files changed, 383 insertions(+), 4 deletions(-)
 create mode 100644 src/time-line/defaultProps.ts
 create mode 100644 src/time-line/time-line.md
 create mode 100644 src/time-line/type.ts
 create mode 100644 src/timeline/Timeline.tsx
 create mode 100644 src/timeline/TimelineContext.ts
 create mode 100644 src/timeline/TimelineItem.tsx
 create mode 100644 src/timeline/__tests__/time-line.test.tsx
 create mode 100644 src/timeline/_example/base.jsx
 create mode 100644 src/timeline/_example/reverse.jsx
 create mode 100644 src/timeline/defaultProps.ts
 create mode 100644 src/timeline/index.ts
 create mode 100644 src/timeline/style/css.js
 create mode 100644 src/timeline/style/index.js
 create mode 100644 src/timeline/timeline.md
 create mode 100644 src/timeline/type.ts

diff --git a/site/site.config.mjs b/site/site.config.mjs
index 95b2ce272e..21fd26983b 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -323,7 +323,7 @@ export default {
           title: 'Card 卡片',
           name: 'card',
           path: '/react/components/card',
-          component: () => import('tdesign-react/card/card.md')
+          component: () => import('tdesign-react/card/card.md'),
         },
         {
           title: 'Collapse 折叠面板',
@@ -379,6 +379,12 @@ export default {
           path: '/react/components/tag',
           component: () => import('tdesign-react/tag/tag.md'),
         },
+        {
+          title: 'Timeline 时间轴',
+          name: 'timeline',
+          path: '/react/components/timeline',
+          component: () => import('tdesign-react/timeline/timeline.md'),
+        },
         {
           title: 'Tooltip 文字提示',
           name: 'tooltip',
diff --git a/src/_util/renderTNode.ts b/src/_util/renderTNode.ts
index c409441efb..e26e7b98f8 100644
--- a/src/_util/renderTNode.ts
+++ b/src/_util/renderTNode.ts
@@ -1,11 +1,11 @@
-import React from 'react';
 import { TNode } from '../common';
 
 /**
- * 渲染 TNode 类型节点
+ * 渲染 任意 T | () => T 类型节点
+ * 默认类型为TNode
  * @param tnode
  */
-export default function renderTNode(tnode: TNode, defaultNode?: React.ReactNode): React.ReactNode {
+export default function renderTNode<T = TNode>(tnode: T, defaultNode?: T): T {
   if (typeof tnode === 'function') {
     return tnode();
   }
diff --git a/src/index.ts b/src/index.ts
index 529528340d..93abdb0070 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -56,3 +56,4 @@ export * from './range-input';
 export * from './watermark';
 export * from './space';
 export * from './jumper';
+export * from './timeline';
diff --git a/src/time-line/defaultProps.ts b/src/time-line/defaultProps.ts
new file mode 100644
index 0000000000..707af84835
--- /dev/null
+++ b/src/time-line/defaultProps.ts
@@ -0,0 +1,12 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTimeLineProps } from './type';
+
+export const timeLineDefaultProps: TdTimeLineProps = {
+  align: 'right',
+  layout: 'vertical',
+  reverse: false,
+  theme: 'default',
+};
diff --git a/src/time-line/time-line.md b/src/time-line/time-line.md
new file mode 100644
index 0000000000..b2a502ede0
--- /dev/null
+++ b/src/time-line/time-line.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+### TimeLine Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+align | String | right | 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧。可选项：left/right/alternate | N
+layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N
+reverse | Boolean | false | 时间轴是否表现为倒序 | N
+theme | String | default | 步骤条风格。可选项：default/dot | N
+
+### TimeLineItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right | N
+children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+color | String | - | 时间轴颜色 | N
+content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | - | 当前步骤状态：默认状态（未开始）、进行中状态、完成状态。可选项：default/process/finish | N
+time | TNode | - | 时间，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/time-line/type.ts b/src/time-line/type.ts
new file mode 100644
index 0000000000..2c59e68f2c
--- /dev/null
+++ b/src/time-line/type.ts
@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TElement } from '../common';
+
+export interface TdTimeLineProps {
+  /**
+   * 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧
+   * @default right
+   */
+  align?: 'left' | 'right' | 'alternate';
+  /**
+   * 时间轴方向：水平方向、垂直方向
+   * @default vertical
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 时间轴是否表现为倒序
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * 步骤条风格
+   * @default default
+   */
+  theme?: 'default' | 'dot';
+}
+
+export interface TdTimeLineItemProps {
+  /**
+   * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
+   */
+  align?: 'left' | 'right';
+  /**
+   * 描述内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 时间轴颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 描述内容
+   */
+  content?: TNode;
+  /**
+   * 用于自定义时间轴节点元素
+   */
+  dot?: TElement;
+  /**
+   * 当前步骤状态：默认状态（未开始）、进行中状态、完成状态
+   */
+  status?: 'default' | 'process' | 'finish';
+  /**
+   * 时间，可完全自定义
+   */
+  time?: TNode;
+}
diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
new file mode 100644
index 0000000000..5f6e7aaa8d
--- /dev/null
+++ b/src/timeline/Timeline.tsx
@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import React from 'react';
+import { StyledProps } from '../common';
+import useConfig from '../_util/useConfig';
+import TimelineItem from './TimelineItem';
+import { TdTimeLineProps } from './type';
+import TimelineContext from './TimelineContext';
+import forwardRefWithStatics from '../_util/forwardRefWithStatics';
+
+export interface TimelineProps extends TdTimeLineProps, StyledProps {
+  children?: React.ReactNode;
+}
+
+const TimeLine = forwardRefWithStatics(
+  (props: TimelineProps, ref: React.Ref<HTMLUListElement>) => {
+    const { theme = 'default', align, children, className, style, reverse, layout = 'vertical' } = props;
+    const { classPrefix } = useConfig();
+
+    const timelineClassName = classNames(
+      `${classPrefix}-timeline`,
+      {
+        [`${classPrefix}-timeline-reverse`]: reverse,
+        [`${classPrefix}-timeline-${layout}`]: true,
+      },
+      className,
+    );
+
+    const timelineItems = React.Children.toArray(children).filter(
+      (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
+    );
+
+    if (reverse) {
+      timelineItems.reverse();
+    }
+
+    const itemsCounts = React.Children.count(timelineItems);
+
+    // 计算节点模式 CSS 类名
+    const getPositionClassName = (index: number) => {
+      if (align === 'alternate') {
+        return index % 2 === 0 ? `${classPrefix}-timeline-item-left` : `${classPrefix}-timeline-item-right`;
+      }
+      if (align === 'left') {
+        return `${classPrefix}-timeline-item-left`;
+      }
+      if (align === 'right') {
+        return `${classPrefix}-timeline-item-right`;
+      }
+      return '';
+    };
+
+    // 一些固定的class样式名
+    const lastItemClassName = `${classPrefix}-timeline-item--last`;
+
+    return (
+      <TimelineContext.Provider value={{ theme }}>
+        <ul className={timelineClassName} style={style} ref={ref}>
+          {React.Children.map(timelineItems, (ele: React.ReactElement<any>, index) => {
+            const readyClass = index === itemsCounts - 1 ? lastItemClassName : '';
+            return React.cloneElement(ele, {
+              className: classNames([ele.props.className, readyClass, getPositionClassName(index)]),
+            });
+          })}
+        </ul>
+      </TimelineContext.Provider>
+    );
+  },
+  {
+    Item: TimelineItem,
+  },
+);
+
+TimeLine.displayName = 'TimeLine';
+
+export default TimeLine;
diff --git a/src/timeline/TimelineContext.ts b/src/timeline/TimelineContext.ts
new file mode 100644
index 0000000000..47a3564b08
--- /dev/null
+++ b/src/timeline/TimelineContext.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+import { TdTimeLineProps } from './type';
+
+const StepsContext = React.createContext<{
+  theme: TdTimeLineProps['theme'];
+}>({
+  theme: 'default',
+});
+
+export default StepsContext;
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
new file mode 100644
index 0000000000..838b5c9cd2
--- /dev/null
+++ b/src/timeline/TimelineItem.tsx
@@ -0,0 +1,58 @@
+import React, { useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import { TdTimeLineItemProps } from './type';
+import { StyledProps } from '../common';
+import useConfig from '../_util/useConfig';
+import TimelineContext from './TimelineContext';
+import renderTNode from '../_util/renderTNode';
+import Loading from '../loading';
+
+export interface TimeLineItemProps extends TdTimeLineItemProps, StyledProps {
+  children?: React.ReactNode;
+}
+
+const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
+  const { className, style = {}, color, dot, children, status = 'default', label } = props;
+  const { theme } = useContext(TimelineContext);
+  const { classPrefix } = useConfig();
+
+  // 节点类名
+  const itemClassName = classNames(
+    {
+      [`${classPrefix}-timeline-item`]: true,
+    },
+    className,
+  );
+
+  // 连线类名
+  const tailClassName = classNames({
+    [`${classPrefix}-timeline-item__tail`]: true,
+    [`${classPrefix}-timeline-item__tail--theme-${theme}`]: true,
+    [`${classPrefix}-timeline-item__tail--status-${status}`]: true,
+  });
+
+  // 圆圈类名
+  const dotClassName = classNames({
+    [`${classPrefix}-timeline-item__dot`]: true,
+    [`${classPrefix}-timeline-item__dot--custom`]: !!dot,
+    [`${classPrefix}-timeline-item__dot--${status}`]: true,
+  });
+
+  const dotElement = useMemo(() => renderTNode(dot), [dot]);
+
+  return (
+    <li className={itemClassName} style={style}>
+      {label && <div className={`${classPrefix}-timeline-item__label`}>{label}</div>}
+      <div className={tailClassName} />
+      <div className={dotClassName} style={{ borderColor: color }}>
+        {!dotElement && status === 'process' && <Loading size="13px" />}
+        {dotElement}
+      </div>
+      <div className={`${classPrefix}-timeline-item__content`}>{children}</div>
+    </li>
+  );
+};
+
+TimelineItem.displayName = 'TimelineItem';
+
+export default TimelineItem;
diff --git a/src/timeline/__tests__/time-line.test.tsx b/src/timeline/__tests__/time-line.test.tsx
new file mode 100644
index 0000000000..5b4e80e854
--- /dev/null
+++ b/src/timeline/__tests__/time-line.test.tsx
@@ -0,0 +1,4 @@
+import { testExamples } from '@test/utils';
+
+// 测试组件代码 Example 快照
+testExamples(__dirname);
diff --git a/src/timeline/_example/base.jsx b/src/timeline/_example/base.jsx
new file mode 100644
index 0000000000..fa3a2e55f6
--- /dev/null
+++ b/src/timeline/_example/base.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Timeline } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  return (
+    <Timeline>
+      <Timeline.Item>123</Timeline.Item>
+      <Timeline.Item status="process">123</Timeline.Item>
+    </Timeline>
+  );
+}
diff --git a/src/timeline/_example/reverse.jsx b/src/timeline/_example/reverse.jsx
new file mode 100644
index 0000000000..66b5858d0e
--- /dev/null
+++ b/src/timeline/_example/reverse.jsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { Timeline, Switch } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  const [reverse, setReverse] = useState(false);
+  return (
+    <>
+      <Switch value={reverse} onChange={setReverse} />
+      <Timeline reverse={reverse}>
+        <Timeline.Item>123</Timeline.Item>
+        <Timeline.Item status="process">123</Timeline.Item>
+      </Timeline>
+    </>
+  );
+}
diff --git a/src/timeline/defaultProps.ts b/src/timeline/defaultProps.ts
new file mode 100644
index 0000000000..707af84835
--- /dev/null
+++ b/src/timeline/defaultProps.ts
@@ -0,0 +1,12 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTimeLineProps } from './type';
+
+export const timeLineDefaultProps: TdTimeLineProps = {
+  align: 'right',
+  layout: 'vertical',
+  reverse: false,
+  theme: 'default',
+};
diff --git a/src/timeline/index.ts b/src/timeline/index.ts
new file mode 100644
index 0000000000..3789e667e0
--- /dev/null
+++ b/src/timeline/index.ts
@@ -0,0 +1,9 @@
+import _Timeline from './Timeline';
+
+import './style/index.js';
+
+export type { TimelineProps } from './Timeline';
+
+export const Timeline = _Timeline;
+
+export default Timeline;
diff --git a/src/timeline/style/css.js b/src/timeline/style/css.js
new file mode 100644
index 0000000000..6a9a4b1328
--- /dev/null
+++ b/src/timeline/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/timeline/style/index.js b/src/timeline/style/index.js
new file mode 100644
index 0000000000..1c112d2820
--- /dev/null
+++ b/src/timeline/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/web/components/timeline/_index.less';
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
new file mode 100644
index 0000000000..bf55319389
--- /dev/null
+++ b/src/timeline/timeline.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### TimeLine Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+align | String | right | 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧。可选项：left/right/alternate | N
+layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N
+reverse | Boolean | false | 时间轴是否表现为倒序 | N
+theme | String | default | 步骤条风格。可选项：default/dot | N
+
+### TimeLineItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right | N
+color | String | - | 时间轴颜色 | N
+dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | - | 当前步骤状态：默认状态（未开始）、进行中状态、完成状态。可选项：default/process/finish | N
diff --git a/src/timeline/type.ts b/src/timeline/type.ts
new file mode 100644
index 0000000000..249027634b
--- /dev/null
+++ b/src/timeline/type.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TElement } from '../common';
+
+export interface TdTimeLineProps {
+  /**
+   * 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧
+   * @default right
+   */
+  align?: 'left' | 'right' | 'alternate';
+  /**
+   * 时间轴方向：水平方向、垂直方向
+   * @default vertical
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 时间轴是否表现为倒序
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * 步骤条风格
+   * @default default
+   */
+  theme?: 'default' | 'dot';
+}
+
+export interface TdTimeLineItemProps {
+  /**
+   * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
+   */
+  align?: 'left' | 'right';
+  /**
+   * 时间轴颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 用于自定义时间轴节点元素
+   */
+  dot?: TElement;
+  /**
+   * 当前步骤状态：默认状态（未开始）、进行中状态、完成状态
+   */
+  status?: 'default' | 'process' | 'finish';
+}

From dfccbeceda50685c56dac0dea06a998fe5ea56b3 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Fri, 15 Jul 2022 17:46:38 +0800
Subject: [PATCH 02/15] =?UTF-8?q?feat(timeline):=20=E6=9B=B4=E6=96=B0API?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=20&=20=E5=AE=9E=E7=8E=B0=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/time-line/defaultProps.ts       | 12 ------
 src/time-line/time-line.md          | 27 -------------
 src/time-line/type.ts               | 62 -----------------------------
 src/timeline/Timeline.tsx           | 29 +++++++-------
 src/timeline/TimelineContext.ts     |  4 ++
 src/timeline/TimelineItem.tsx       | 15 +++----
 src/timeline/_example/customDot.jsx | 12 ++++++
 src/timeline/timeline.md            |  4 +-
 src/timeline/type.ts                | 14 ++++++-
 9 files changed, 55 insertions(+), 124 deletions(-)
 delete mode 100644 src/time-line/defaultProps.ts
 delete mode 100644 src/time-line/time-line.md
 delete mode 100644 src/time-line/type.ts
 create mode 100644 src/timeline/_example/customDot.jsx

diff --git a/src/time-line/defaultProps.ts b/src/time-line/defaultProps.ts
deleted file mode 100644
index 707af84835..0000000000
--- a/src/time-line/defaultProps.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { TdTimeLineProps } from './type';
-
-export const timeLineDefaultProps: TdTimeLineProps = {
-  align: 'right',
-  layout: 'vertical',
-  reverse: false,
-  theme: 'default',
-};
diff --git a/src/time-line/time-line.md b/src/time-line/time-line.md
deleted file mode 100644
index b2a502ede0..0000000000
--- a/src/time-line/time-line.md
+++ /dev/null
@@ -1,27 +0,0 @@
-:: BASE_DOC ::
-
-## API
-### TimeLine Props
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | right | 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧。可选项：left/right/alternate | N
-layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N
-reverse | Boolean | false | 时间轴是否表现为倒序 | N
-theme | String | default | 步骤条风格。可选项：default/dot | N
-
-### TimeLineItem Props
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right | N
-children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-color | String | - | 时间轴颜色 | N
-content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | - | 当前步骤状态：默认状态（未开始）、进行中状态、完成状态。可选项：default/process/finish | N
-time | TNode | - | 时间，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/time-line/type.ts b/src/time-line/type.ts
deleted file mode 100644
index 2c59e68f2c..0000000000
--- a/src/time-line/type.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { TNode, TElement } from '../common';
-
-export interface TdTimeLineProps {
-  /**
-   * 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧
-   * @default right
-   */
-  align?: 'left' | 'right' | 'alternate';
-  /**
-   * 时间轴方向：水平方向、垂直方向
-   * @default vertical
-   */
-  layout?: 'horizontal' | 'vertical';
-  /**
-   * 时间轴是否表现为倒序
-   * @default false
-   */
-  reverse?: boolean;
-  /**
-   * 步骤条风格
-   * @default default
-   */
-  theme?: 'default' | 'dot';
-}
-
-export interface TdTimeLineItemProps {
-  /**
-   * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
-   */
-  align?: 'left' | 'right';
-  /**
-   * 描述内容，同 content
-   */
-  children?: TNode;
-  /**
-   * 时间轴颜色
-   * @default ''
-   */
-  color?: string;
-  /**
-   * 描述内容
-   */
-  content?: TNode;
-  /**
-   * 用于自定义时间轴节点元素
-   */
-  dot?: TElement;
-  /**
-   * 当前步骤状态：默认状态（未开始）、进行中状态、完成状态
-   */
-  status?: 'default' | 'process' | 'finish';
-  /**
-   * 时间，可完全自定义
-   */
-  time?: TNode;
-}
diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 5f6e7aaa8d..92a848b412 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -11,9 +11,9 @@ export interface TimelineProps extends TdTimeLineProps, StyledProps {
   children?: React.ReactNode;
 }
 
-const TimeLine = forwardRefWithStatics(
+const Timeline = forwardRefWithStatics(
   (props: TimelineProps, ref: React.Ref<HTMLUListElement>) => {
-    const { theme = 'default', align, children, className, style, reverse, layout = 'vertical' } = props;
+    const { theme = 'default', align, children, className, style, reverse = false, layout = 'vertical' } = props;
     const { classPrefix } = useConfig();
 
     const timelineClassName = classNames(
@@ -28,6 +28,8 @@ const TimeLine = forwardRefWithStatics(
     const timelineItems = React.Children.toArray(children).filter(
       (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
     );
+    // 获取所有子节点类型
+    const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props.status || 'default');
 
     if (reverse) {
       timelineItems.reverse();
@@ -49,18 +51,17 @@ const TimeLine = forwardRefWithStatics(
       return '';
     };
 
-    // 一些固定的class样式名
-    const lastItemClassName = `${classPrefix}-timeline-item--last`;
-
     return (
-      <TimelineContext.Provider value={{ theme }}>
+      <TimelineContext.Provider value={{ theme, reverse, itemsStatus }}>
         <ul className={timelineClassName} style={style} ref={ref}>
-          {React.Children.map(timelineItems, (ele: React.ReactElement<any>, index) => {
-            const readyClass = index === itemsCounts - 1 ? lastItemClassName : '';
-            return React.cloneElement(ele, {
-              className: classNames([ele.props.className, readyClass, getPositionClassName(index)]),
-            });
-          })}
+          {React.Children.map(timelineItems, (ele: JSX.Element, index) =>
+            React.cloneElement(ele, {
+              index,
+              className: classNames([ele.props.className, getPositionClassName(index)], {
+                [`${classPrefix}-timeline-item--last`]: index === itemsCounts - 1,
+              }),
+            }),
+          )}
         </ul>
       </TimelineContext.Provider>
     );
@@ -70,6 +71,6 @@ const TimeLine = forwardRefWithStatics(
   },
 );
 
-TimeLine.displayName = 'TimeLine';
+Timeline.displayName = 'Timeline';
 
-export default TimeLine;
+export default Timeline;
diff --git a/src/timeline/TimelineContext.ts b/src/timeline/TimelineContext.ts
index 47a3564b08..4898e40147 100644
--- a/src/timeline/TimelineContext.ts
+++ b/src/timeline/TimelineContext.ts
@@ -3,8 +3,12 @@ import { TdTimeLineProps } from './type';
 
 const StepsContext = React.createContext<{
   theme: TdTimeLineProps['theme'];
+  reverse: TdTimeLineProps['reverse'];
+  itemsStatus: string[];
 }>({
   theme: 'default',
+  reverse: false,
+  itemsStatus: [],
 });
 
 export default StepsContext;
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 838b5c9cd2..7626f5e238 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -9,13 +9,16 @@ import Loading from '../loading';
 
 export interface TimeLineItemProps extends TdTimeLineItemProps, StyledProps {
   children?: React.ReactNode;
+  index?: number;
 }
 
 const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
-  const { className, style = {}, color, dot, children, status = 'default', label } = props;
-  const { theme } = useContext(TimelineContext);
+  const { className, style = {}, color, dot, children, index, status = 'default', time } = props;
+  const { theme, reverse, itemsStatus } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
 
+  const dotElement = useMemo(() => renderTNode(dot), [dot]);
+
   // 节点类名
   const itemClassName = classNames(
     {
@@ -28,21 +31,19 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   const tailClassName = classNames({
     [`${classPrefix}-timeline-item__tail`]: true,
     [`${classPrefix}-timeline-item__tail--theme-${theme}`]: true,
-    [`${classPrefix}-timeline-item__tail--status-${status}`]: true,
+    [`${classPrefix}-timeline-item__tail--status-${reverse ? itemsStatus[index] : status}`]: true,
   });
 
   // 圆圈类名
   const dotClassName = classNames({
     [`${classPrefix}-timeline-item__dot`]: true,
-    [`${classPrefix}-timeline-item__dot--custom`]: !!dot,
+    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement,
     [`${classPrefix}-timeline-item__dot--${status}`]: true,
   });
 
-  const dotElement = useMemo(() => renderTNode(dot), [dot]);
-
   return (
     <li className={itemClassName} style={style}>
-      {label && <div className={`${classPrefix}-timeline-item__label`}>{label}</div>}
+      {time && <div className={`${classPrefix}-timeline-item__time`}>{time}</div>}
       <div className={tailClassName} />
       <div className={dotClassName} style={{ borderColor: color }}>
         {!dotElement && status === 'process' && <Loading size="13px" />}
diff --git a/src/timeline/_example/customDot.jsx b/src/timeline/_example/customDot.jsx
new file mode 100644
index 0000000000..2191f8d1a2
--- /dev/null
+++ b/src/timeline/_example/customDot.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Timeline } from 'tdesign-react';
+import { CheckCircleFilledIcon } from 'tdesign-icons-react';
+
+export default function BasicTimeLine() {
+  return (
+    <Timeline>
+      <Timeline.Item dot={<CheckCircleFilledIcon size={'medium'} />}>123</Timeline.Item>
+      <Timeline.Item status="process">123</Timeline.Item>
+    </Timeline>
+  );
+}
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
index bf55319389..b2a502ede0 100644
--- a/src/timeline/timeline.md
+++ b/src/timeline/timeline.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### TimeLine Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -20,6 +19,9 @@ theme | String | default | 步骤条风格。可选项：default/dot | N
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right | N
+children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 color | String | - | 时间轴颜色 | N
+content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | 当前步骤状态：默认状态（未开始）、进行中状态、完成状态。可选项：default/process/finish | N
+time | TNode | - | 时间，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/timeline/type.ts b/src/timeline/type.ts
index 249027634b..2c59e68f2c 100644
--- a/src/timeline/type.ts
+++ b/src/timeline/type.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TElement } from '../common';
+import { TNode, TElement } from '../common';
 
 export interface TdTimeLineProps {
   /**
@@ -34,11 +34,19 @@ export interface TdTimeLineItemProps {
    * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
    */
   align?: 'left' | 'right';
+  /**
+   * 描述内容，同 content
+   */
+  children?: TNode;
   /**
    * 时间轴颜色
    * @default ''
    */
   color?: string;
+  /**
+   * 描述内容
+   */
+  content?: TNode;
   /**
    * 用于自定义时间轴节点元素
    */
@@ -47,4 +55,8 @@ export interface TdTimeLineItemProps {
    * 当前步骤状态：默认状态（未开始）、进行中状态、完成状态
    */
   status?: 'default' | 'process' | 'finish';
+  /**
+   * 时间，可完全自定义
+   */
+  time?: TNode;
 }

From dc4989588b8ffe18ee7cdcd772f426a827e199a3 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 18 Jul 2022 20:25:23 +0800
Subject: [PATCH 03/15] =?UTF-8?q?feat(timeline):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20&=20=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_util/renderTNode.ts                 |  6 +++--
 src/timeline/Timeline.tsx                | 31 ++++++++++++++++--------
 src/timeline/TimelineItem.tsx            | 10 +++++---
 src/timeline/_example/base.jsx           | 17 ++++++++-----
 src/timeline/_example/customDot.jsx      |  6 ++---
 src/timeline/_example/customTimeNode.jsx | 30 +++++++++++++++++++++++
 src/timeline/_example/horizontal.jsx     | 16 ++++++++++++
 7 files changed, 91 insertions(+), 25 deletions(-)
 create mode 100644 src/timeline/_example/customTimeNode.jsx
 create mode 100644 src/timeline/_example/horizontal.jsx

diff --git a/src/_util/renderTNode.ts b/src/_util/renderTNode.ts
index e26e7b98f8..7c9baf2cad 100644
--- a/src/_util/renderTNode.ts
+++ b/src/_util/renderTNode.ts
@@ -1,14 +1,16 @@
 import { TNode } from '../common';
 
+type RenderType<T> = T extends () => infer P ? P : T;
+
 /**
  * 渲染 任意 T | () => T 类型节点
  * 默认类型为TNode
  * @param tnode
  */
-export default function renderTNode<T = TNode>(tnode: T, defaultNode?: T): T {
+export default function renderTNode<T = TNode>(tnode: T, defaultNode?: T): RenderType<T> {
   if (typeof tnode === 'function') {
     return tnode();
   }
 
-  return tnode || defaultNode;
+  return tnode || (typeof defaultNode === 'function' ? defaultNode() : defaultNode);
 }
diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 92a848b412..32ca0e922a 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -13,23 +13,23 @@ export interface TimelineProps extends TdTimeLineProps, StyledProps {
 
 const Timeline = forwardRefWithStatics(
   (props: TimelineProps, ref: React.Ref<HTMLUListElement>) => {
-    const { theme = 'default', align, children, className, style, reverse = false, layout = 'vertical' } = props;
-    const { classPrefix } = useConfig();
-
-    const timelineClassName = classNames(
-      `${classPrefix}-timeline`,
-      {
-        [`${classPrefix}-timeline-reverse`]: reverse,
-        [`${classPrefix}-timeline-${layout}`]: true,
-      },
+    const {
+      theme = 'default',
+      align = 'left',
+      children,
       className,
-    );
+      style,
+      reverse = false,
+      layout = 'vertical',
+    } = props;
+    const { classPrefix } = useConfig();
 
     const timelineItems = React.Children.toArray(children).filter(
       (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
     );
     // 获取所有子节点类型
     const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props.status || 'default');
+    const hasTimeItem = timelineItems.some((item: React.ReactElement<any>) => !!item?.props?.time);
 
     if (reverse) {
       timelineItems.reverse();
@@ -37,6 +37,17 @@ const Timeline = forwardRefWithStatics(
 
     const itemsCounts = React.Children.count(timelineItems);
 
+    const timelineClassName = classNames(
+      `${classPrefix}-timeline`,
+      {
+        [`${classPrefix}-timeline-${align}`]: true,
+        [`${classPrefix}-timeline-reverse`]: reverse,
+        [`${classPrefix}-timeline-${layout}`]: true,
+        [`${classPrefix}-timeline-time`]: hasTimeItem,
+      },
+      className,
+    );
+
     // 计算节点模式 CSS 类名
     const getPositionClassName = (index: number) => {
       if (align === 'alternate') {
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 7626f5e238..f1f485ffc3 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -44,10 +44,12 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   return (
     <li className={itemClassName} style={style}>
       {time && <div className={`${classPrefix}-timeline-item__time`}>{time}</div>}
-      <div className={tailClassName} />
-      <div className={dotClassName} style={{ borderColor: color }}>
-        {!dotElement && status === 'process' && <Loading size="13px" />}
-        {dotElement}
+      <div className={`${classPrefix}-timeline-item__wrapper`}>
+        <div className={dotClassName} style={{ borderColor: color }}>
+          {!dotElement && status === 'process' && <Loading size="12px" />}
+          {dotElement}
+        </div>
+        <div className={tailClassName} />
       </div>
       <div className={`${classPrefix}-timeline-item__content`}>{children}</div>
     </li>
diff --git a/src/timeline/_example/base.jsx b/src/timeline/_example/base.jsx
index fa3a2e55f6..921b5ffb93 100644
--- a/src/timeline/_example/base.jsx
+++ b/src/timeline/_example/base.jsx
@@ -1,11 +1,16 @@
-import React from 'react';
-import { Timeline } from 'tdesign-react';
+import React, { useState } from 'react';
+import { Timeline, Space, Switch } from 'tdesign-react';
 
 export default function BasicTimeLine() {
+  const [reverse, setReverse] = useState(false);
+
   return (
-    <Timeline>
-      <Timeline.Item>123</Timeline.Item>
-      <Timeline.Item status="process">123</Timeline.Item>
-    </Timeline>
+    <Space direction="vertical">
+      Reverse <Switch value={reverse} onChange={setReverse} />
+      <Timeline reverse={reverse}>
+        <Timeline.Item>2022-07-16开始</Timeline.Item>
+        <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
+      </Timeline>
+    </Space>
   );
 }
diff --git a/src/timeline/_example/customDot.jsx b/src/timeline/_example/customDot.jsx
index 2191f8d1a2..89dcfe1170 100644
--- a/src/timeline/_example/customDot.jsx
+++ b/src/timeline/_example/customDot.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { Timeline } from 'tdesign-react';
 import { CheckCircleFilledIcon } from 'tdesign-icons-react';
 
-export default function BasicTimeLine() {
+export default function CustomNodeTimeLine() {
   return (
     <Timeline>
-      <Timeline.Item dot={<CheckCircleFilledIcon size={'medium'} />}>123</Timeline.Item>
-      <Timeline.Item status="process">123</Timeline.Item>
+      <Timeline.Item dot={<CheckCircleFilledIcon size={'medium'} />}>自定义节点</Timeline.Item>
+      <Timeline.Item status="process">进行中</Timeline.Item>
     </Timeline>
   );
 }
diff --git a/src/timeline/_example/customTimeNode.jsx b/src/timeline/_example/customTimeNode.jsx
new file mode 100644
index 0000000000..3def52f293
--- /dev/null
+++ b/src/timeline/_example/customTimeNode.jsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Radio } from 'tdesign-react';
+
+export default function CustomNodeTimeLine() {
+  const [theme, setTheme] = useState('default');
+  const [align, setAlign] = useState('left');
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Space>
+        <h4>自定义轴线样式</h4>
+        <Radio.Group value={theme} onChange={setTheme}>
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="dot">dot</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space>
+        <h4>对齐方式</h4>
+        <Radio.Group value={align} onChange={setAlign}>
+          <Radio.Button value="left">left</Radio.Button>
+          <Radio.Button value="alternate">alternate</Radio.Button>
+          <Radio.Button value="right">right</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline theme={theme} align={align}>
+        <Timeline.Item time="2022-07-16">开始创建</Timeline.Item>
+        <Timeline.Item time="2022-07-18">完成80%</Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/horizontal.jsx b/src/timeline/_example/horizontal.jsx
new file mode 100644
index 0000000000..232ce6a05a
--- /dev/null
+++ b/src/timeline/_example/horizontal.jsx
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Switch } from 'tdesign-react';
+
+export default function HorizontalTimeLine() {
+  const [reverse, setReverse] = useState(false);
+
+  return (
+    <Space direction="vertical">
+      Reverse <Switch value={reverse} onChange={setReverse} />
+      <Timeline layout="horizontal" reverse={reverse}>
+        <Timeline.Item>2022-07-16开始</Timeline.Item>
+        <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}

From c719c86785573e1813c30d0d36829ce3e1e7ca3c Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Sun, 24 Jul 2022 12:50:28 +0800
Subject: [PATCH 04/15] =?UTF-8?q?feat(timeline):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=20&=20=E6=9B=B4=E6=96=B0=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/timeline/Timeline.tsx                | 31 +++++++++++-------------
 src/timeline/TimelineItem.tsx            | 16 +++++++++---
 src/timeline/_example/base.jsx           | 26 +++++++++++++++++---
 src/timeline/_example/customDot.jsx      |  5 +++-
 src/timeline/_example/customTimeNode.jsx | 30 -----------------------
 src/timeline/_example/horizontal.jsx     | 26 +++++++++++++++++---
 src/timeline/_example/reverse.jsx        | 15 ------------
 src/timeline/timeline.md                 |  5 ++--
 src/timeline/type.ts                     |  6 ++---
 src/timeline/useAlign.ts                 | 24 ++++++++++++++++++
 10 files changed, 105 insertions(+), 79 deletions(-)
 delete mode 100644 src/timeline/_example/customTimeNode.jsx
 delete mode 100644 src/timeline/_example/reverse.jsx
 create mode 100644 src/timeline/useAlign.ts

diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 32ca0e922a..9596385172 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -6,6 +6,7 @@ import TimelineItem from './TimelineItem';
 import { TdTimeLineProps } from './type';
 import TimelineContext from './TimelineContext';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
+import { useAlign } from './useAlign';
 
 export interface TimelineProps extends TdTimeLineProps, StyledProps {
   children?: React.ReactNode;
@@ -13,16 +14,9 @@ export interface TimelineProps extends TdTimeLineProps, StyledProps {
 
 const Timeline = forwardRefWithStatics(
   (props: TimelineProps, ref: React.Ref<HTMLUListElement>) => {
-    const {
-      theme = 'default',
-      align = 'left',
-      children,
-      className,
-      style,
-      reverse = false,
-      layout = 'vertical',
-    } = props;
+    const { theme = 'default', align, children, className, style, reverse = false, layout = 'vertical' } = props;
     const { classPrefix } = useConfig();
+    const renderAlign = useAlign(align, layout);
 
     const timelineItems = React.Children.toArray(children).filter(
       (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
@@ -40,7 +34,7 @@ const Timeline = forwardRefWithStatics(
     const timelineClassName = classNames(
       `${classPrefix}-timeline`,
       {
-        [`${classPrefix}-timeline-${align}`]: true,
+        [`${classPrefix}-timeline-${renderAlign}`]: true,
         [`${classPrefix}-timeline-reverse`]: reverse,
         [`${classPrefix}-timeline-${layout}`]: true,
         [`${classPrefix}-timeline-time`]: hasTimeItem,
@@ -50,14 +44,17 @@ const Timeline = forwardRefWithStatics(
 
     // 计算节点模式 CSS 类名
     const getPositionClassName = (index: number) => {
-      if (align === 'alternate') {
-        return index % 2 === 0 ? `${classPrefix}-timeline-item-left` : `${classPrefix}-timeline-item-right`;
+      // 横向布局 以及 纵向布局对应为不同的样式名
+      const left = layout === 'horizontal' ? 'top' : 'left';
+      const right = layout === 'horizontal' ? 'bottom' : 'right';
+      if (renderAlign === 'alternate') {
+        return index % 2 === 0 ? `${classPrefix}-timeline-item-${left}` : `${classPrefix}-timeline-item-${right}`;
       }
-      if (align === 'left') {
-        return `${classPrefix}-timeline-item-left`;
+      if (renderAlign === 'left' || renderAlign === 'top') {
+        return `${classPrefix}-timeline-item-${left}`;
       }
-      if (align === 'right') {
-        return `${classPrefix}-timeline-item-right`;
+      if (renderAlign === 'right' || renderAlign === 'bottom') {
+        return `${classPrefix}-timeline-item-${right}`;
       }
       return '';
     };
@@ -68,7 +65,7 @@ const Timeline = forwardRefWithStatics(
           {React.Children.map(timelineItems, (ele: JSX.Element, index) =>
             React.cloneElement(ele, {
               index,
-              className: classNames([ele.props.className, getPositionClassName(index)], {
+              className: classNames([ele?.props?.className, getPositionClassName(index)], {
                 [`${classPrefix}-timeline-item--last`]: index === itemsCounts - 1,
               }),
             }),
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index f1f485ffc3..629682d461 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -17,7 +17,15 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   const { theme, reverse, itemsStatus } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
 
-  const dotElement = useMemo(() => renderTNode(dot), [dot]);
+  const dotElement = useMemo(() => {
+    const ele = renderTNode(dot);
+    return (
+      ele &&
+      React.cloneElement(ele, {
+        className: classNames(ele?.props?.className, `${classPrefix}-timeline-item__dot-content`),
+      })
+    );
+  }, [dot, classPrefix]);
 
   // 节点类名
   const itemClassName = classNames(
@@ -37,7 +45,7 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   // 圆圈类名
   const dotClassName = classNames({
     [`${classPrefix}-timeline-item__dot`]: true,
-    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement,
+    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement || (!dotElement && status === 'process'),
     [`${classPrefix}-timeline-item__dot--${status}`]: true,
   });
 
@@ -46,7 +54,9 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
       {time && <div className={`${classPrefix}-timeline-item__time`}>{time}</div>}
       <div className={`${classPrefix}-timeline-item__wrapper`}>
         <div className={dotClassName} style={{ borderColor: color }}>
-          {!dotElement && status === 'process' && <Loading size="12px" />}
+          {!dotElement && status === 'process' && (
+            <Loading size="12px" className={`${classPrefix}-timeline-item__dot-content`} />
+          )}
           {dotElement}
         </div>
         <div className={tailClassName} />
diff --git a/src/timeline/_example/base.jsx b/src/timeline/_example/base.jsx
index 921b5ffb93..b6d98421b3 100644
--- a/src/timeline/_example/base.jsx
+++ b/src/timeline/_example/base.jsx
@@ -1,14 +1,32 @@
 import React, { useState } from 'react';
-import { Timeline, Space, Switch } from 'tdesign-react';
+import { Timeline, Space, Switch, Radio } from 'tdesign-react';
 
 export default function BasicTimeLine() {
   const [reverse, setReverse] = useState(false);
-
+  const [theme, setTheme] = useState('default');
+  const [align, setAlign] = useState('left');
   return (
     <Space direction="vertical">
       Reverse <Switch value={reverse} onChange={setReverse} />
-      <Timeline reverse={reverse}>
-        <Timeline.Item>2022-07-16开始</Timeline.Item>
+      <Space>
+        <h4>自定义轴线样式</h4>
+        <Radio.Group value={theme} onChange={setTheme}>
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="dot">dot</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space>
+        <h4>对齐方式</h4>
+        <Radio.Group value={align} onChange={setAlign}>
+          <Radio.Button value="left">left</Radio.Button>
+          <Radio.Button value="alternate">alternate</Radio.Button>
+          <Radio.Button value="right">right</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline reverse={reverse} theme={theme} align={align}>
+        <Timeline.Item time="2022-07-16">2022-07-16开始</Timeline.Item>
+        <Timeline.Item time="2022-07-17">2022-07-17 进度30%</Timeline.Item>
+        <Timeline.Item time="2022-07-18">2022-07-18 进度40%</Timeline.Item>
         <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
       </Timeline>
     </Space>
diff --git a/src/timeline/_example/customDot.jsx b/src/timeline/_example/customDot.jsx
index 89dcfe1170..f566befe22 100644
--- a/src/timeline/_example/customDot.jsx
+++ b/src/timeline/_example/customDot.jsx
@@ -6,7 +6,10 @@ export default function CustomNodeTimeLine() {
   return (
     <Timeline>
       <Timeline.Item dot={<CheckCircleFilledIcon size={'medium'} />}>自定义节点</Timeline.Item>
-      <Timeline.Item status="process">进行中</Timeline.Item>
+      <Timeline.Item>2022-07-16开始</Timeline.Item>
+      <Timeline.Item>2022-07-17 进度30%</Timeline.Item>
+      <Timeline.Item>2022-07-18 进度40%</Timeline.Item>
+      <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
     </Timeline>
   );
 }
diff --git a/src/timeline/_example/customTimeNode.jsx b/src/timeline/_example/customTimeNode.jsx
deleted file mode 100644
index 3def52f293..0000000000
--- a/src/timeline/_example/customTimeNode.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import { Timeline, Space, Radio } from 'tdesign-react';
-
-export default function CustomNodeTimeLine() {
-  const [theme, setTheme] = useState('default');
-  const [align, setAlign] = useState('left');
-  return (
-    <Space direction="vertical" style={{ width: '100%' }}>
-      <Space>
-        <h4>自定义轴线样式</h4>
-        <Radio.Group value={theme} onChange={setTheme}>
-          <Radio.Button value="default">默认</Radio.Button>
-          <Radio.Button value="dot">dot</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Space>
-        <h4>对齐方式</h4>
-        <Radio.Group value={align} onChange={setAlign}>
-          <Radio.Button value="left">left</Radio.Button>
-          <Radio.Button value="alternate">alternate</Radio.Button>
-          <Radio.Button value="right">right</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Timeline theme={theme} align={align}>
-        <Timeline.Item time="2022-07-16">开始创建</Timeline.Item>
-        <Timeline.Item time="2022-07-18">完成80%</Timeline.Item>
-      </Timeline>
-    </Space>
-  );
-}
diff --git a/src/timeline/_example/horizontal.jsx b/src/timeline/_example/horizontal.jsx
index 232ce6a05a..1dec1be3f3 100644
--- a/src/timeline/_example/horizontal.jsx
+++ b/src/timeline/_example/horizontal.jsx
@@ -1,14 +1,32 @@
 import React, { useState } from 'react';
-import { Timeline, Space, Switch } from 'tdesign-react';
+import { Timeline, Space, Switch, Radio } from 'tdesign-react';
 
 export default function HorizontalTimeLine() {
   const [reverse, setReverse] = useState(false);
-
+  const [theme, setTheme] = useState('default');
+  const [align, setAlign] = useState('top');
   return (
     <Space direction="vertical">
       Reverse <Switch value={reverse} onChange={setReverse} />
-      <Timeline layout="horizontal" reverse={reverse}>
-        <Timeline.Item>2022-07-16开始</Timeline.Item>
+      <Space>
+        <h4>自定义轴线样式</h4>
+        <Radio.Group value={theme} onChange={setTheme}>
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="dot">dot</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space>
+        <h4>对齐方式</h4>
+        <Radio.Group value={align} onChange={setAlign}>
+          <Radio.Button value="top">top</Radio.Button>
+          <Radio.Button value="alternate">alternate</Radio.Button>
+          <Radio.Button value="bottom">bottom</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline layout="horizontal" reverse={reverse} align={align} theme={theme}>
+        <Timeline.Item time="2022-07-16">2022-07-16开始</Timeline.Item>
+        <Timeline.Item time="2022-07-17">2022-07-17 进度30%</Timeline.Item>
+        <Timeline.Item time="2022-07-18">2022-07-18 进度40%</Timeline.Item>
         <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
       </Timeline>
     </Space>
diff --git a/src/timeline/_example/reverse.jsx b/src/timeline/_example/reverse.jsx
deleted file mode 100644
index 66b5858d0e..0000000000
--- a/src/timeline/_example/reverse.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import { Timeline, Switch } from 'tdesign-react';
-
-export default function BasicTimeLine() {
-  const [reverse, setReverse] = useState(false);
-  return (
-    <>
-      <Switch value={reverse} onChange={setReverse} />
-      <Timeline reverse={reverse}>
-        <Timeline.Item>123</Timeline.Item>
-        <Timeline.Item status="process">123</Timeline.Item>
-      </Timeline>
-    </>
-  );
-}
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
index b2a502ede0..0477d31b65 100644
--- a/src/timeline/timeline.md
+++ b/src/timeline/timeline.md
@@ -1,13 +1,14 @@
 :: BASE_DOC ::
 
 ## API
+
 ### TimeLine Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | right | 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧。可选项：left/right/alternate | N
+align | String | right | 时间信息放在时间轴的位置。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N
 layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N
 reverse | Boolean | false | 时间轴是否表现为倒序 | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
@@ -18,7 +19,7 @@ theme | String | default | 步骤条风格。可选项：default/dot | N
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right | N
+align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right/top/bottom | N
 children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 color | String | - | 时间轴颜色 | N
 content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/timeline/type.ts b/src/timeline/type.ts
index 2c59e68f2c..963bcb2412 100644
--- a/src/timeline/type.ts
+++ b/src/timeline/type.ts
@@ -8,10 +8,10 @@ import { TNode, TElement } from '../common';
 
 export interface TdTimeLineProps {
   /**
-   * 时间信息放在时间轴的位置：左侧、右侧或两侧，默认信息在时间轴右侧
+   * 时间信息放在时间轴的位置。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧
    * @default right
    */
-  align?: 'left' | 'right' | 'alternate';
+  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
   /**
    * 时间轴方向：水平方向、垂直方向
    * @default vertical
@@ -33,7 +33,7 @@ export interface TdTimeLineItemProps {
   /**
    * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
    */
-  align?: 'left' | 'right';
+  align?: 'left' | 'right' | 'top' | 'bottom';
   /**
    * 描述内容，同 content
    */
diff --git a/src/timeline/useAlign.ts b/src/timeline/useAlign.ts
new file mode 100644
index 0000000000..45fd9f6fa5
--- /dev/null
+++ b/src/timeline/useAlign.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import log from '../_common/js/log';
+
+const DefaultAlign = {
+  vertical: ['left', 'right'],
+  horizontal: ['top', 'bottom'],
+};
+
+export const useAlign = (align = 'left', layout = 'vertical') =>
+  useMemo(() => {
+    let renderAlign = 'left';
+    if (layout === 'vertical') {
+      const index = DefaultAlign.horizontal.indexOf(align);
+      const isError = index !== -1;
+      isError && log.warn('Timeline', 'If layout is vertical, align should be "left","alternate" or "right" ');
+      renderAlign = isError ? DefaultAlign.vertical[index] : align;
+    } else {
+      const index = DefaultAlign.vertical.indexOf(align);
+      const isError = index !== -1;
+      isError && log.warn('Timeline', 'If layout is horizontal, align should be "top","alternate" or "bottom" ');
+      renderAlign = isError ? DefaultAlign.horizontal[index] : align;
+    }
+    return renderAlign;
+  }, [align, layout]);

From 2f2b356d7a0aefc2317dea050a96a586f04c6c19 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 25 Jul 2022 08:59:19 +0800
Subject: [PATCH 05/15] =?UTF-8?q?feat(timeline):=20=E4=BC=98=E5=8C=96item?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E9=80=BB=E8=BE=91=20&=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/timeline/Timeline.tsx                     | 21 ++------------
 src/timeline/TimelineContext.ts               |  3 ++
 src/timeline/TimelineItem.tsx                 | 29 +++++++++++++++++--
 .../{time-line.test.tsx => timeline.test.tsx} |  0
 src/timeline/_example/base.jsx                |  4 ++-
 5 files changed, 34 insertions(+), 23 deletions(-)
 rename src/timeline/__tests__/{time-line.test.tsx => timeline.test.tsx} (100%)

diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 9596385172..2f8b2c1336 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -42,30 +42,13 @@ const Timeline = forwardRefWithStatics(
       className,
     );
 
-    // 计算节点模式 CSS 类名
-    const getPositionClassName = (index: number) => {
-      // 横向布局 以及 纵向布局对应为不同的样式名
-      const left = layout === 'horizontal' ? 'top' : 'left';
-      const right = layout === 'horizontal' ? 'bottom' : 'right';
-      if (renderAlign === 'alternate') {
-        return index % 2 === 0 ? `${classPrefix}-timeline-item-${left}` : `${classPrefix}-timeline-item-${right}`;
-      }
-      if (renderAlign === 'left' || renderAlign === 'top') {
-        return `${classPrefix}-timeline-item-${left}`;
-      }
-      if (renderAlign === 'right' || renderAlign === 'bottom') {
-        return `${classPrefix}-timeline-item-${right}`;
-      }
-      return '';
-    };
-
     return (
-      <TimelineContext.Provider value={{ theme, reverse, itemsStatus }}>
+      <TimelineContext.Provider value={{ theme, reverse, itemsStatus, layout, globalAlign: align }}>
         <ul className={timelineClassName} style={style} ref={ref}>
           {React.Children.map(timelineItems, (ele: JSX.Element, index) =>
             React.cloneElement(ele, {
               index,
-              className: classNames([ele?.props?.className, getPositionClassName(index)], {
+              className: classNames([ele?.props?.className], {
                 [`${classPrefix}-timeline-item--last`]: index === itemsCounts - 1,
               }),
             }),
diff --git a/src/timeline/TimelineContext.ts b/src/timeline/TimelineContext.ts
index 4898e40147..f59d04b1cb 100644
--- a/src/timeline/TimelineContext.ts
+++ b/src/timeline/TimelineContext.ts
@@ -5,10 +5,13 @@ const StepsContext = React.createContext<{
   theme: TdTimeLineProps['theme'];
   reverse: TdTimeLineProps['reverse'];
   itemsStatus: string[];
+  layout: TdTimeLineProps['layout'];
+  globalAlign?: TdTimeLineProps['align'];
 }>({
   theme: 'default',
   reverse: false,
   itemsStatus: [],
+  layout: 'vertical',
 });
 
 export default StepsContext;
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 629682d461..6f659574be 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -6,6 +6,7 @@ import useConfig from '../_util/useConfig';
 import TimelineContext from './TimelineContext';
 import renderTNode from '../_util/renderTNode';
 import Loading from '../loading';
+import { useAlign } from './useAlign';
 
 export interface TimeLineItemProps extends TdTimeLineItemProps, StyledProps {
   children?: React.ReactNode;
@@ -13,9 +14,30 @@ export interface TimeLineItemProps extends TdTimeLineItemProps, StyledProps {
 }
 
 const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
-  const { className, style = {}, color, dot, children, index, status = 'default', time } = props;
-  const { theme, reverse, itemsStatus } = useContext(TimelineContext);
+  const { className, style = {}, color, dot, children, index, status = 'default', time, content, align } = props;
+  const { theme, reverse, itemsStatus, layout, globalAlign } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
+  const renderAlign = useAlign(globalAlign, layout);
+
+  // 计算节点模式 CSS 类名
+  const getPositionClassName = (index: number) => {
+    // 横向布局 以及 纵向布局对应为不同的样式名
+    const left = layout === 'horizontal' ? 'top' : 'left';
+    const right = layout === 'horizontal' ? 'bottom' : 'right';
+    // 单独设置则单独生效
+    if (renderAlign === 'alternate') {
+      return align || index % 2 === 0
+        ? `${classPrefix}-timeline-item-${left}`
+        : `${classPrefix}-timeline-item-${right}`;
+    }
+    if (renderAlign === 'left' || renderAlign === 'top') {
+      return `${classPrefix}-timeline-item-${left}`;
+    }
+    if (renderAlign === 'right' || renderAlign === 'bottom') {
+      return `${classPrefix}-timeline-item-${right}`;
+    }
+    return '';
+  };
 
   const dotElement = useMemo(() => {
     const ele = renderTNode(dot);
@@ -31,6 +53,7 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   const itemClassName = classNames(
     {
       [`${classPrefix}-timeline-item`]: true,
+      [`${getPositionClassName(index)}`]: true,
     },
     className,
   );
@@ -61,7 +84,7 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
         </div>
         <div className={tailClassName} />
       </div>
-      <div className={`${classPrefix}-timeline-item__content`}>{children}</div>
+      <div className={`${classPrefix}-timeline-item__content`}>{content || children}</div>
     </li>
   );
 };
diff --git a/src/timeline/__tests__/time-line.test.tsx b/src/timeline/__tests__/timeline.test.tsx
similarity index 100%
rename from src/timeline/__tests__/time-line.test.tsx
rename to src/timeline/__tests__/timeline.test.tsx
diff --git a/src/timeline/_example/base.jsx b/src/timeline/_example/base.jsx
index b6d98421b3..19a88b94c8 100644
--- a/src/timeline/_example/base.jsx
+++ b/src/timeline/_example/base.jsx
@@ -25,7 +25,9 @@ export default function BasicTimeLine() {
       </Space>
       <Timeline reverse={reverse} theme={theme} align={align}>
         <Timeline.Item time="2022-07-16">2022-07-16开始</Timeline.Item>
-        <Timeline.Item time="2022-07-17">2022-07-17 进度30%</Timeline.Item>
+        <Timeline.Item time="2022-07-17" align="left">
+          2022-07-17 进度30%
+        </Timeline.Item>
         <Timeline.Item time="2022-07-18">2022-07-18 进度40%</Timeline.Item>
         <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
       </Timeline>

From 8f9f9ed3891cb76eacc96f21b103c354452e2fcb Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Fri, 29 Jul 2022 09:39:30 +0800
Subject: [PATCH 06/15] feat(timeline): submit timeline submodule info

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index f61f654542..320a40018e 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit f61f654542d87605a1dedc55680ca55adefa554a
+Subproject commit 320a40018e32754b98405e6b2621a3815b86a85c

From f135d01ae78511be0242ebe2e957f5942448f9c1 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Fri, 29 Jul 2022 09:42:01 +0800
Subject: [PATCH 07/15] test(timeline): update timeline snapshot

---
 .../__snapshots__/timeline.test.tsx.snap      | 724 ++++++++++++++++++
 test/ssr/__snapshots__/ssr.test.js.snap       |   6 +
 2 files changed, 730 insertions(+)
 create mode 100644 src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap

diff --git a/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap b/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap
new file mode 100644
index 0000000000..d0c74a80ae
--- /dev/null
+++ b/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap
@@ -0,0 +1,724 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`base.jsx 1`] = `
+<DocumentFragment>
+  <div
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
+  >
+    <div
+      class="t-space-item"
+    >
+      Reverse 
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <button
+        class="t-switch t-size-m"
+        role="switch"
+        type="button"
+      >
+        <span
+          class="t-switch__handle"
+        />
+        <div
+          class="t-switch__content"
+        />
+      </button>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <h4>
+            自定义轴线样式
+          </h4>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-radio-group t-size-m t-radio-group__outline"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                checked=""
+                class="t-radio-button__former"
+                type="radio"
+                value="default"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                默认
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="dot"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                dot
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <h4>
+            对齐方式
+          </h4>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-radio-group t-size-m t-radio-group__outline"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                checked=""
+                class="t-radio-button__former"
+                type="radio"
+                value="left"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                left
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="alternate"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                alternate
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="right"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                right
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <ul
+        class="t-timeline t-timeline-left t-timeline-vertical t-timeline-time"
+      >
+        <li
+          class="t-timeline-item t-timeline-item-left"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-16
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-16开始
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-left"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-17
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-17 进度30%
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-left"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-18
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-18 进度40%
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-left t-timeline-item--last"
+        >
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process"
+            >
+              <div
+                class="t-loading t-loading--center t-timeline-item__dot-content"
+                style="font-size: 12px;"
+              >
+                <svg
+                  class="t-loading__gradient t-icon-loading"
+                  height="1em"
+                  version="1.1"
+                  viewBox="0 0 14 14"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <foreignobject
+                    height="12"
+                    width="12"
+                    x="1"
+                    y="1"
+                  >
+                    <div
+                      class="t-loading__gradient-conic"
+                    />
+                  </foreignobject>
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-18完成
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`customDot.jsx 1`] = `
+<DocumentFragment>
+  <ul
+    class="t-timeline t-timeline-left t-timeline-vertical"
+  >
+    <li
+      class="t-timeline-item t-timeline-item-left"
+    >
+      <div
+        class="t-timeline-item__wrapper"
+      >
+        <div
+          class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default"
+        >
+          <svg
+            class="t-icon t-icon-check-circle-filled t-timeline-item__dot-content t-size-m"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+        />
+      </div>
+      <div
+        class="t-timeline-item__content"
+      >
+        自定义节点
+      </div>
+    </li>
+    <li
+      class="t-timeline-item t-timeline-item-left"
+    >
+      <div
+        class="t-timeline-item__wrapper"
+      >
+        <div
+          class="t-timeline-item__dot t-timeline-item__dot--default"
+        />
+        <div
+          class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+        />
+      </div>
+      <div
+        class="t-timeline-item__content"
+      >
+        2022-07-16开始
+      </div>
+    </li>
+    <li
+      class="t-timeline-item t-timeline-item-left"
+    >
+      <div
+        class="t-timeline-item__wrapper"
+      >
+        <div
+          class="t-timeline-item__dot t-timeline-item__dot--default"
+        />
+        <div
+          class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+        />
+      </div>
+      <div
+        class="t-timeline-item__content"
+      >
+        2022-07-17 进度30%
+      </div>
+    </li>
+    <li
+      class="t-timeline-item t-timeline-item-left"
+    >
+      <div
+        class="t-timeline-item__wrapper"
+      >
+        <div
+          class="t-timeline-item__dot t-timeline-item__dot--default"
+        />
+        <div
+          class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+        />
+      </div>
+      <div
+        class="t-timeline-item__content"
+      >
+        2022-07-18 进度40%
+      </div>
+    </li>
+    <li
+      class="t-timeline-item t-timeline-item-left t-timeline-item--last"
+    >
+      <div
+        class="t-timeline-item__wrapper"
+      >
+        <div
+          class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process"
+        >
+          <div
+            class="t-loading t-loading--center t-timeline-item__dot-content"
+            style="font-size: 12px;"
+          >
+            <svg
+              class="t-loading__gradient t-icon-loading"
+              height="1em"
+              version="1.1"
+              viewBox="0 0 14 14"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <foreignobject
+                height="12"
+                width="12"
+                x="1"
+                y="1"
+              >
+                <div
+                  class="t-loading__gradient-conic"
+                />
+              </foreignobject>
+            </svg>
+          </div>
+        </div>
+        <div
+          class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process"
+        />
+      </div>
+      <div
+        class="t-timeline-item__content"
+      >
+        2022-07-18完成
+      </div>
+    </li>
+  </ul>
+</DocumentFragment>
+`;
+
+exports[`horizontal.jsx 1`] = `
+<DocumentFragment>
+  <div
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
+  >
+    <div
+      class="t-space-item"
+    >
+      Reverse 
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <button
+        class="t-switch t-size-m"
+        role="switch"
+        type="button"
+      >
+        <span
+          class="t-switch__handle"
+        />
+        <div
+          class="t-switch__content"
+        />
+      </button>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <h4>
+            自定义轴线样式
+          </h4>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-radio-group t-size-m t-radio-group__outline"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                checked=""
+                class="t-radio-button__former"
+                type="radio"
+                value="default"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                默认
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="dot"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                dot
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <h4>
+            对齐方式
+          </h4>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-radio-group t-size-m t-radio-group__outline"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                checked=""
+                class="t-radio-button__former"
+                type="radio"
+                value="top"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                top
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="alternate"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                alternate
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="bottom"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                bottom
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <ul
+        class="t-timeline t-timeline-top t-timeline-horizontal t-timeline-time"
+      >
+        <li
+          class="t-timeline-item t-timeline-item-top"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-16
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-16开始
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-top"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-17
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-17 进度30%
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-top"
+        >
+          <div
+            class="t-timeline-item__time"
+          >
+            2022-07-18
+          </div>
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--default"
+            />
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-18 进度40%
+          </div>
+        </li>
+        <li
+          class="t-timeline-item t-timeline-item-top t-timeline-item--last"
+        >
+          <div
+            class="t-timeline-item__wrapper"
+          >
+            <div
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process"
+            >
+              <div
+                class="t-loading t-loading--center t-timeline-item__dot-content"
+                style="font-size: 12px;"
+              >
+                <svg
+                  class="t-loading__gradient t-icon-loading"
+                  height="1em"
+                  version="1.1"
+                  viewBox="0 0 14 14"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <foreignobject
+                    height="12"
+                    width="12"
+                    x="1"
+                    y="1"
+                  >
+                    <div
+                      class="t-loading__gradient-conic"
+                    />
+                  </foreignobject>
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process"
+            />
+          </div>
+          <div
+            class="t-timeline-item__content"
+          >
+            2022-07-18完成
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 3c3ebb0224..90f1ef68da 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -902,6 +902,12 @@ exports[`ssr snapshot test renders ./src/time-picker/_example/show-steps.jsx cor
 
 exports[`ssr snapshot test renders ./src/time-picker/_example/twelve-hour-meridian.jsx correctly 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-popup__reference t-time-picker__group t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"select time\\" class=\\"t-input__inner\\" value=\\"\\" readonly=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div>"`;
 
+exports[`ssr snapshot test renders ./src/timeline/_example/base.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\">Reverse </div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>自定义轴线样式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">默认</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"dot\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">dot</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"left\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">left</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"alternate\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">alternate</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"right\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">right</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-time\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__time\\">2022-07-16</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-16开始</div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__time\\">2022-07-17</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-17 进度30%</div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__time\\">2022-07-18</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18 进度40%</div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process\\"><div class=\\"t-loading t-loading--center t-timeline-item__dot-content\\" style=\\"font-size:12px\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18完成</div></li></ul></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/timeline/_example/customDot.jsx correctly 1`] = `"<ul class=\\"t-timeline t-timeline-left t-timeline-vertical\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled t-timeline-item__dot-content t-size-m\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">自定义节点</div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-16开始</div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-17 进度30%</div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18 进度40%</div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process\\"><div class=\\"t-loading t-loading--center t-timeline-item__dot-content\\" style=\\"font-size:12px\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18完成</div></li></ul>"`;
+
+exports[`ssr snapshot test renders ./src/timeline/_example/horizontal.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\">Reverse </div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>自定义轴线样式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">默认</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"dot\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">dot</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"top\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">top</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"alternate\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">alternate</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"bottom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">bottom</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-top t-timeline-horizontal t-timeline-time\\"><li class=\\"t-timeline-item t-timeline-item-top\\"><div class=\\"t-timeline-item__time\\">2022-07-16</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-16开始</div></li><li class=\\"t-timeline-item t-timeline-item-top\\"><div class=\\"t-timeline-item__time\\">2022-07-17</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-17 进度30%</div></li><li class=\\"t-timeline-item t-timeline-item-top\\"><div class=\\"t-timeline-item__time\\">2022-07-18</div><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-default\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18 进度40%</div></li><li class=\\"t-timeline-item t-timeline-item-top t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--process\\"><div class=\\"t-loading t-loading--center t-timeline-item__dot-content\\" style=\\"font-size:12px\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default t-timeline-item__tail--status-process\\"></div></div><div class=\\"t-timeline-item__content\\">2022-07-18完成</div></li></ul></div></div>"`;
+
 exports[`ssr snapshot test renders ./src/tooltip/_example/arrow.jsx correctly 1`] = `"<div class=\\"t-popup__reference\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">默认文字提示</span></button></div>"`;
 
 exports[`ssr snapshot test renders ./src/tooltip/_example/base.jsx correctly 1`] = `"<div style=\\"margin:0 auto;width:500px;height:260px;position:relative\\" data-reactroot=\\"\\"><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;top:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">top</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;top:0;left:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">top-left</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;top:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">top-right</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;bottom:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">bottom</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;bottom:0;left:70px;width:120px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">bottom-left</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;bottom:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">bottom-right</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;left:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">left</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;left:0;top:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">left-top</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;left:0;bottom:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">left-bottom</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;right:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">right</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;right:0;top:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">right-top</span></button></div><div class=\\"t-popup__reference\\"><button style=\\"position:absolute;right:0;bottom:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">right-bottom</span></button></div></div>"`;

From 9a0b575f03e16671fcfcc320167df05a038e84cd Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Fri, 29 Jul 2022 09:55:03 +0800
Subject: [PATCH 08/15] chore(timeline): update timeline submodule info

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 320a40018e..295e00b0b8 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 320a40018e32754b98405e6b2621a3815b86a85c
+Subproject commit 295e00b0b842eb37630ebd17fe77a562f17e03c1

From ac5ffdb2997572aabfb0fea56f865e8401b4f9ad Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Thu, 4 Aug 2022 17:30:24 +0800
Subject: [PATCH 09/15] feat(timeline): merge master & fix path error

---
 src/_common                   | 2 +-
 src/timeline/Timeline.tsx     | 2 +-
 src/timeline/TimelineItem.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/_common b/src/_common
index 295e00b0b8..d2d878e8cb 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 295e00b0b842eb37630ebd17fe77a562f17e03c1
+Subproject commit d2d878e8cb64cb110f383a6177d3af99f372811b
diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 2f8b2c1336..7019bd8534 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import TimelineItem from './TimelineItem';
 import { TdTimeLineProps } from './type';
 import TimelineContext from './TimelineContext';
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 6f659574be..37f8e575a4 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { TdTimeLineItemProps } from './type';
 import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
+import useConfig from '../hooks/useConfig';
 import TimelineContext from './TimelineContext';
 import renderTNode from '../_util/renderTNode';
 import Loading from '../loading';

From 10b80518250336e2e48da7dfc9be1b11198141b4 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 15 Aug 2022 11:34:52 +0800
Subject: [PATCH 10/15] refactor(timeline): refactor timeline component with
 new props and style

---
 src/timeline/Timeline.tsx               | 26 +++++++++----
 src/timeline/TimelineContext.ts         | 12 +++---
 src/timeline/TimelineItem.tsx           | 50 +++++++++++++++++--------
 src/timeline/_example/base.jsx          | 36 ------------------
 src/timeline/_example/base.tsx          | 24 ++++++++++++
 src/timeline/_example/customContent.tsx | 30 +++++++++++++++
 src/timeline/_example/customDot.jsx     | 15 --------
 src/timeline/_example/customDot.tsx     | 33 ++++++++++++++++
 src/timeline/_example/horizontal.jsx    | 34 -----------------
 src/timeline/_example/layout.tsx        | 41 ++++++++++++++++++++
 src/timeline/_example/loading.tsx       | 23 ++++++++++++
 src/timeline/_example/reverse.tsx       | 21 +++++++++++
 src/timeline/_example/theme.tsx         | 25 +++++++++++++
 src/timeline/defaultProps.ts            |  9 +++--
 src/timeline/timeline.md                | 14 +++----
 src/timeline/type.ts                    | 39 ++++++++++---------
 16 files changed, 291 insertions(+), 141 deletions(-)
 delete mode 100644 src/timeline/_example/base.jsx
 create mode 100644 src/timeline/_example/base.tsx
 create mode 100644 src/timeline/_example/customContent.tsx
 delete mode 100644 src/timeline/_example/customDot.jsx
 create mode 100644 src/timeline/_example/customDot.tsx
 delete mode 100644 src/timeline/_example/horizontal.jsx
 create mode 100644 src/timeline/_example/layout.tsx
 create mode 100644 src/timeline/_example/loading.tsx
 create mode 100644 src/timeline/_example/reverse.tsx
 create mode 100644 src/timeline/_example/theme.tsx

diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 7019bd8534..48ee7d80c5 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -3,27 +3,36 @@ import React from 'react';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';
 import TimelineItem from './TimelineItem';
-import { TdTimeLineProps } from './type';
+import { TdTimelineProps } from './type';
 import TimelineContext from './TimelineContext';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import { useAlign } from './useAlign';
 
-export interface TimelineProps extends TdTimeLineProps, StyledProps {
+export interface TimelineProps extends TdTimelineProps, StyledProps {
   children?: React.ReactNode;
 }
 
 const Timeline = forwardRefWithStatics(
   (props: TimelineProps, ref: React.Ref<HTMLUListElement>) => {
-    const { theme = 'default', align, children, className, style, reverse = false, layout = 'vertical' } = props;
+    const {
+      theme = 'default',
+      labelAlign = 'left',
+      children,
+      className,
+      style,
+      reverse = false,
+      layout = 'vertical',
+      mode = 'alternate',
+    } = props;
     const { classPrefix } = useConfig();
-    const renderAlign = useAlign(align, layout);
+    const renderAlign = useAlign(labelAlign, layout);
 
     const timelineItems = React.Children.toArray(children).filter(
       (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
     );
     // 获取所有子节点类型
-    const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props.status || 'default');
-    const hasTimeItem = timelineItems.some((item: React.ReactElement<any>) => !!item?.props?.time);
+    const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props.dotColor || 'default');
+    const hasLabelItem = timelineItems.some((item: React.ReactElement<any>) => !!item?.props?.label);
 
     if (reverse) {
       timelineItems.reverse();
@@ -37,13 +46,14 @@ const Timeline = forwardRefWithStatics(
         [`${classPrefix}-timeline-${renderAlign}`]: true,
         [`${classPrefix}-timeline-reverse`]: reverse,
         [`${classPrefix}-timeline-${layout}`]: true,
-        [`${classPrefix}-timeline-time`]: hasTimeItem,
+        [`${classPrefix}-timeline-label`]: hasLabelItem,
+        [`${classPrefix}-timeline-label--${mode}`]: true,
       },
       className,
     );
 
     return (
-      <TimelineContext.Provider value={{ theme, reverse, itemsStatus, layout, globalAlign: align }}>
+      <TimelineContext.Provider value={{ theme, reverse, itemsStatus, layout, globalAlign: labelAlign, mode }}>
         <ul className={timelineClassName} style={style} ref={ref}>
           {React.Children.map(timelineItems, (ele: JSX.Element, index) =>
             React.cloneElement(ele, {
diff --git a/src/timeline/TimelineContext.ts b/src/timeline/TimelineContext.ts
index f59d04b1cb..9b34b03406 100644
--- a/src/timeline/TimelineContext.ts
+++ b/src/timeline/TimelineContext.ts
@@ -1,17 +1,19 @@
 import React from 'react';
-import { TdTimeLineProps } from './type';
+import { TdTimelineProps } from './type';
 
 const StepsContext = React.createContext<{
-  theme: TdTimeLineProps['theme'];
-  reverse: TdTimeLineProps['reverse'];
+  theme: TdTimelineProps['theme'];
+  reverse: TdTimelineProps['reverse'];
   itemsStatus: string[];
-  layout: TdTimeLineProps['layout'];
-  globalAlign?: TdTimeLineProps['align'];
+  layout: TdTimelineProps['layout'];
+  globalAlign?: TdTimelineProps['labelAlign'];
+  mode?: TdTimelineProps['mode'];
 }>({
   theme: 'default',
   reverse: false,
   itemsStatus: [],
   layout: 'vertical',
+  mode: 'alternate',
 });
 
 export default StepsContext;
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 37f8e575a4..42715a452e 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -1,21 +1,34 @@
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
-import { TdTimeLineItemProps } from './type';
+import { TdTimelineItemProps } from './type';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';
 import TimelineContext from './TimelineContext';
 import renderTNode from '../_util/renderTNode';
-import Loading from '../loading';
 import { useAlign } from './useAlign';
+import Loading from '../loading';
 
-export interface TimeLineItemProps extends TdTimeLineItemProps, StyledProps {
+export interface TimelineItemProps extends TdTimelineItemProps, StyledProps {
   children?: React.ReactNode;
   index?: number;
 }
 
-const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
-  const { className, style = {}, color, dot, children, index, status = 'default', time, content, align } = props;
-  const { theme, reverse, itemsStatus, layout, globalAlign } = useContext(TimelineContext);
+const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error'];
+
+const TimelineItem: React.FC<TimelineItemProps> = (props) => {
+  const {
+    className,
+    style = {},
+    dot,
+    dotColor = 'default',
+    labelAlign,
+    children,
+    index,
+    content,
+    label,
+    loading = false,
+  } = props;
+  const { theme, reverse, itemsStatus, layout, globalAlign, mode } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
   const renderAlign = useAlign(globalAlign, layout);
 
@@ -26,7 +39,7 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
     const right = layout === 'horizontal' ? 'bottom' : 'right';
     // 单独设置则单独生效
     if (renderAlign === 'alternate') {
-      return align || index % 2 === 0
+      return labelAlign || index % 2 === 0
         ? `${classPrefix}-timeline-item-${left}`
         : `${classPrefix}-timeline-item-${right}`;
     }
@@ -62,29 +75,34 @@ const TimelineItem: React.FC<TimeLineItemProps> = (props) => {
   const tailClassName = classNames({
     [`${classPrefix}-timeline-item__tail`]: true,
     [`${classPrefix}-timeline-item__tail--theme-${theme}`]: true,
-    [`${classPrefix}-timeline-item__tail--status-${reverse ? itemsStatus[index] : status}`]: true,
+    [`${classPrefix}-timeline-item__tail--status-${itemsStatus[index]}`]: reverse,
   });
 
   // 圆圈类名
   const dotClassName = classNames({
     [`${classPrefix}-timeline-item__dot`]: true,
-    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement || (!dotElement && status === 'process'),
-    [`${classPrefix}-timeline-item__dot--${status}`]: true,
+    [`${classPrefix}-timeline-item__dot--custom`]: !!dotElement || (!dotElement && loading),
+    [`${classPrefix}-timeline-item__dot--${dotColor}`]: DefaultTheme.includes(dotColor),
+  });
+
+  const labelClassName = classNames(`${classPrefix}-timeline-item__label`, {
+    [`${classPrefix}-timeline-item__label--${mode}`]: true,
   });
 
   return (
     <li className={itemClassName} style={style}>
-      {time && <div className={`${classPrefix}-timeline-item__time`}>{time}</div>}
+      {mode === 'alternate' && label && <div className={labelClassName}>{label}</div>}
       <div className={`${classPrefix}-timeline-item__wrapper`}>
-        <div className={dotClassName} style={{ borderColor: color }}>
-          {!dotElement && status === 'process' && (
-            <Loading size="12px" className={`${classPrefix}-timeline-item__dot-content`} />
-          )}
+        <div className={dotClassName} style={{ borderColor: !DefaultTheme.includes(dotColor) && dotColor }}>
+          {!dotElement && loading && <Loading size="12px" className={`${classPrefix}-timeline-item__dot-content`} />}
           {dotElement}
         </div>
         <div className={tailClassName} />
       </div>
-      <div className={`${classPrefix}-timeline-item__content`}>{content || children}</div>
+      <div className={`${classPrefix}-timeline-item__content`}>
+        {content || children}
+        {mode === 'same' && label && <div className={labelClassName}>{label}</div>}
+      </div>
     </li>
   );
 };
diff --git a/src/timeline/_example/base.jsx b/src/timeline/_example/base.jsx
deleted file mode 100644
index 19a88b94c8..0000000000
--- a/src/timeline/_example/base.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import { Timeline, Space, Switch, Radio } from 'tdesign-react';
-
-export default function BasicTimeLine() {
-  const [reverse, setReverse] = useState(false);
-  const [theme, setTheme] = useState('default');
-  const [align, setAlign] = useState('left');
-  return (
-    <Space direction="vertical">
-      Reverse <Switch value={reverse} onChange={setReverse} />
-      <Space>
-        <h4>自定义轴线样式</h4>
-        <Radio.Group value={theme} onChange={setTheme}>
-          <Radio.Button value="default">默认</Radio.Button>
-          <Radio.Button value="dot">dot</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Space>
-        <h4>对齐方式</h4>
-        <Radio.Group value={align} onChange={setAlign}>
-          <Radio.Button value="left">left</Radio.Button>
-          <Radio.Button value="alternate">alternate</Radio.Button>
-          <Radio.Button value="right">right</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Timeline reverse={reverse} theme={theme} align={align}>
-        <Timeline.Item time="2022-07-16">2022-07-16开始</Timeline.Item>
-        <Timeline.Item time="2022-07-17" align="left">
-          2022-07-17 进度30%
-        </Timeline.Item>
-        <Timeline.Item time="2022-07-18">2022-07-18 进度40%</Timeline.Item>
-        <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
-      </Timeline>
-    </Space>
-  );
-}
diff --git a/src/timeline/_example/base.tsx b/src/timeline/_example/base.tsx
new file mode 100644
index 0000000000..41fb046392
--- /dev/null
+++ b/src/timeline/_example/base.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Radio } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  const [direction, setDirection] = useState<'vertical' | 'horizontal'>('vertical');
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <h4>时间轴方向</h4>
+        <Radio.Group value={direction} onChange={(v) => setDirection(v as any)}>
+          <Radio.Button value="vertical">垂直时间轴</Radio.Button>
+          <Radio.Button value="horizontal">水平时间轴</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline layout={direction} mode="same">
+        <Timeline.Item label="2022-01-01">事件一</Timeline.Item>
+        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
+        <Timeline.Item label="2022-03-01">事件三</Timeline.Item>
+        <Timeline.Item label="2022-04-01">事件四</Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/customContent.tsx b/src/timeline/_example/customContent.tsx
new file mode 100644
index 0000000000..717f599530
--- /dev/null
+++ b/src/timeline/_example/customContent.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Timeline } from 'tdesign-react';
+
+const CommonStyle = {
+  fontSize: 12,
+  color: 'rgba(0,0,0,.6)',
+};
+
+export default function BasicTimeLine() {
+  return (
+    <Timeline mode="same">
+      <Timeline.Item label="2022-01-01">
+        <div>事件一</div>
+        <div style={CommonStyle}>事件一自定义内容</div>
+      </Timeline.Item>
+      <Timeline.Item label="2022-02-01">
+        <div>事件二</div>
+        <div style={CommonStyle}>事件二自定义内容</div>
+      </Timeline.Item>
+      <Timeline.Item label="2022-03-01">
+        <div>事件三</div>
+        <div style={CommonStyle}>事件三自定义内容</div>
+      </Timeline.Item>
+      <Timeline.Item label="2022-04-01">
+        <div>事件四</div>
+        <div style={CommonStyle}>事件四自定义内容</div>
+      </Timeline.Item>
+    </Timeline>
+  );
+}
diff --git a/src/timeline/_example/customDot.jsx b/src/timeline/_example/customDot.jsx
deleted file mode 100644
index f566befe22..0000000000
--- a/src/timeline/_example/customDot.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { Timeline } from 'tdesign-react';
-import { CheckCircleFilledIcon } from 'tdesign-icons-react';
-
-export default function CustomNodeTimeLine() {
-  return (
-    <Timeline>
-      <Timeline.Item dot={<CheckCircleFilledIcon size={'medium'} />}>自定义节点</Timeline.Item>
-      <Timeline.Item>2022-07-16开始</Timeline.Item>
-      <Timeline.Item>2022-07-17 进度30%</Timeline.Item>
-      <Timeline.Item>2022-07-18 进度40%</Timeline.Item>
-      <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
-    </Timeline>
-  );
-}
diff --git a/src/timeline/_example/customDot.tsx b/src/timeline/_example/customDot.tsx
new file mode 100644
index 0000000000..18bf204a93
--- /dev/null
+++ b/src/timeline/_example/customDot.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Radio } from 'tdesign-react';
+import { TipsIcon, UserIcon, HeartIcon, HomeIcon } from 'tdesign-icons-react';
+
+export default function BasicTimeLine() {
+  const [dot, setDot] = useState<'default' | 'dot'>('default');
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <h4>时间轴样式</h4>
+        <Radio.Group value={dot} onChange={(v) => setDot(v as any)}>
+          <Radio.Button value="default">默认样式</Radio.Button>
+          <Radio.Button value="dot">Dot样式</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline mode="same" theme={dot}>
+        <Timeline.Item label="2022-01-01" dot={<TipsIcon size="medium" color="#0052D9" />}>
+          事件一
+        </Timeline.Item>
+        <Timeline.Item label="2022-02-01" dot={<UserIcon size="medium" color="#0052D9" />}>
+          事件二
+        </Timeline.Item>
+        <Timeline.Item label="2022-03-01" dot={<HeartIcon size="medium" color="#0052D9" />}>
+          事件三
+        </Timeline.Item>
+        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="medium" color="#0052D9" />}>
+          事件四
+        </Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/horizontal.jsx b/src/timeline/_example/horizontal.jsx
deleted file mode 100644
index 1dec1be3f3..0000000000
--- a/src/timeline/_example/horizontal.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import { Timeline, Space, Switch, Radio } from 'tdesign-react';
-
-export default function HorizontalTimeLine() {
-  const [reverse, setReverse] = useState(false);
-  const [theme, setTheme] = useState('default');
-  const [align, setAlign] = useState('top');
-  return (
-    <Space direction="vertical">
-      Reverse <Switch value={reverse} onChange={setReverse} />
-      <Space>
-        <h4>自定义轴线样式</h4>
-        <Radio.Group value={theme} onChange={setTheme}>
-          <Radio.Button value="default">默认</Radio.Button>
-          <Radio.Button value="dot">dot</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Space>
-        <h4>对齐方式</h4>
-        <Radio.Group value={align} onChange={setAlign}>
-          <Radio.Button value="top">top</Radio.Button>
-          <Radio.Button value="alternate">alternate</Radio.Button>
-          <Radio.Button value="bottom">bottom</Radio.Button>
-        </Radio.Group>
-      </Space>
-      <Timeline layout="horizontal" reverse={reverse} align={align} theme={theme}>
-        <Timeline.Item time="2022-07-16">2022-07-16开始</Timeline.Item>
-        <Timeline.Item time="2022-07-17">2022-07-17 进度30%</Timeline.Item>
-        <Timeline.Item time="2022-07-18">2022-07-18 进度40%</Timeline.Item>
-        <Timeline.Item status="process">2022-07-18完成</Timeline.Item>
-      </Timeline>
-    </Space>
-  );
-}
diff --git a/src/timeline/_example/layout.tsx b/src/timeline/_example/layout.tsx
new file mode 100644
index 0000000000..9256ccfa80
--- /dev/null
+++ b/src/timeline/_example/layout.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Radio } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  const [direction, setDirection] = useState<'left' | 'right' | 'alternate'>('left');
+  const [mode, setMode] = useState<'same' | 'alternate'>('same');
+  const [layout, setLayout] = useState<'vertical' | 'horizontal'>('vertical');
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <h4>时间轴方向</h4>
+        <Radio.Group value={layout} onChange={(v) => setLayout(v as any)}>
+          <Radio.Button value="vertical">垂直时间轴</Radio.Button>
+          <Radio.Button value="horizontal">水平时间轴</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space>
+        <h4>对齐方式</h4>
+        <Radio.Group value={direction} onChange={(v) => setDirection(v as any)}>
+          <Radio.Button value="left">左对齐</Radio.Button>
+          <Radio.Button value="alternate">交错对齐</Radio.Button>
+          <Radio.Button value="right">右对齐</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Space>
+        <h4>label对齐方式</h4>
+        <Radio.Group value={mode} onChange={(v) => setMode(v as any)}>
+          <Radio.Button value="same">同侧</Radio.Button>
+          <Radio.Button value="alternate">交错</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Timeline layout={layout} labelAlign={direction} mode={mode}>
+        <Timeline.Item label="2022-01-01">事件一</Timeline.Item>
+        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
+        <Timeline.Item label="2022-03-01">事件三</Timeline.Item>
+        <Timeline.Item label="2022-04-01">事件四</Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/loading.tsx b/src/timeline/_example/loading.tsx
new file mode 100644
index 0000000000..e130600631
--- /dev/null
+++ b/src/timeline/_example/loading.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Switch } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <h4>加载中</h4>
+        <Switch value={loading} onChange={(v) => setLoading(v as boolean)}></Switch>
+      </Space>
+      <Timeline mode="same">
+        <Timeline.Item label="2022-01-01">事件一</Timeline.Item>
+        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
+        <Timeline.Item label="2022-03-01">事件三</Timeline.Item>
+        <Timeline.Item label="2022-04-01" loading={loading}>
+          事件四
+        </Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/reverse.tsx b/src/timeline/_example/reverse.tsx
new file mode 100644
index 0000000000..f220bcff3d
--- /dev/null
+++ b/src/timeline/_example/reverse.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Timeline, Space, Switch } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  const [reverse, setReverse] = useState(false);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <h4>是否倒序</h4>
+        <Switch value={reverse} onChange={(v) => setReverse(v as boolean)}></Switch>
+      </Space>
+      <Timeline mode="same" reverse={reverse}>
+        <Timeline.Item label="2022-01-01">事件一</Timeline.Item>
+        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
+        <Timeline.Item label="2022-03-01">事件三</Timeline.Item>
+        <Timeline.Item label="2022-04-01">事件四</Timeline.Item>
+      </Timeline>
+    </Space>
+  );
+}
diff --git a/src/timeline/_example/theme.tsx b/src/timeline/_example/theme.tsx
new file mode 100644
index 0000000000..b1050d52ad
--- /dev/null
+++ b/src/timeline/_example/theme.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Timeline } from 'tdesign-react';
+
+export default function BasicTimeLine() {
+  return (
+    <Timeline mode="same">
+      <Timeline.Item label="2022-01-01" dotColor="primary">
+        已完成的时间
+      </Timeline.Item>
+      <Timeline.Item label="2022-02-01" dotColor="success">
+        成功的时间
+      </Timeline.Item>
+      <Timeline.Item label="2022-03-01" dotColor="error">
+        危险时间
+      </Timeline.Item>
+      <Timeline.Item label="2022-04-01" dotColor="warning">
+        告警事件
+      </Timeline.Item>
+      <Timeline.Item label="2022-05-01">默认的时间</Timeline.Item>
+      <Timeline.Item label="2022-06-01" dotColor="yellowgreen">
+        自定义主题色
+      </Timeline.Item>
+    </Timeline>
+  );
+}
diff --git a/src/timeline/defaultProps.ts b/src/timeline/defaultProps.ts
index 707af84835..ec10cdd4a7 100644
--- a/src/timeline/defaultProps.ts
+++ b/src/timeline/defaultProps.ts
@@ -2,11 +2,14 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdTimeLineProps } from './type';
+import { TdTimelineProps, TdTimelineItemProps } from './type';
 
-export const timeLineDefaultProps: TdTimeLineProps = {
-  align: 'right',
+export const timeLineDefaultProps: TdTimelineProps = {
+  labelAlign: 'right',
   layout: 'vertical',
+  mode: 'alternate',
   reverse: false,
   theme: 'default',
 };
+
+export const timeLineItemDefaultProps: TdTimelineItemProps = { dotColor: 'default' };
diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md
index 0477d31b65..ce4061182b 100644
--- a/src/timeline/timeline.md
+++ b/src/timeline/timeline.md
@@ -2,27 +2,27 @@
 
 ## API
 
-### TimeLine Props
+### Timeline Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | right | 时间信息放在时间轴的位置。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N
+labelAlign | String | right | 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N
 layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N
+mode | String | alternate | 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧。可选项：alternate/same | N
 reverse | Boolean | false | 时间轴是否表现为倒序 | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
 
-### TimeLineItem Props
+### TimelineItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | - | 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`。可选项：left/right/top/bottom | N
 children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-color | String | - | 时间轴颜色 | N
 content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | - | 当前步骤状态：默认状态（未开始）、进行中状态、完成状态。可选项：default/process/finish | N
-time | TNode | - | 时间，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+dotColor | String | default | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。可选项：primary/warning/error/default。TS 类型：`string` | N
+label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`。可选项：left/right/top/bottom | N
diff --git a/src/timeline/type.ts b/src/timeline/type.ts
index 963bcb2412..3cbb188e9c 100644
--- a/src/timeline/type.ts
+++ b/src/timeline/type.ts
@@ -6,17 +6,22 @@
 
 import { TNode, TElement } from '../common';
 
-export interface TdTimeLineProps {
+export interface TdTimelineProps {
   /**
-   * 时间信息放在时间轴的位置。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧
+   * 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧
    * @default right
    */
-  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
+  labelAlign?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
   /**
    * 时间轴方向：水平方向、垂直方向
    * @default vertical
    */
   layout?: 'horizontal' | 'vertical';
+  /**
+   * 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧
+   * @default alternate
+   */
+  mode?: 'alternate' | 'same';
   /**
    * 时间轴是否表现为倒序
    * @default false
@@ -29,20 +34,11 @@ export interface TdTimeLineProps {
   theme?: 'default' | 'dot';
 }
 
-export interface TdTimeLineItemProps {
-  /**
-   * 时间信息相对于时间轴的位置，优先级高于 `TimeLine.align`
-   */
-  align?: 'left' | 'right' | 'top' | 'bottom';
+export interface TdTimelineItemProps {
   /**
    * 描述内容，同 content
    */
   children?: TNode;
-  /**
-   * 时间轴颜色
-   * @default ''
-   */
-  color?: string;
   /**
    * 描述内容
    */
@@ -52,11 +48,20 @@ export interface TdTimeLineItemProps {
    */
   dot?: TElement;
   /**
-   * 当前步骤状态：默认状态（未开始）、进行中状态、完成状态
+   * 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.
+   * @default default
+   */
+  dotColor?: string;
+  /**
+   * 标签文本内容，可完全自定义
+   */
+  label?: TNode;
+  /**
+   * 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`
    */
-  status?: 'default' | 'process' | 'finish';
+  labelAlign?: 'left' | 'right' | 'top' | 'bottom';
   /**
-   * 时间，可完全自定义
+   * 是否处在加载状态
    */
-  time?: TNode;
+  loading?: boolean;
 }

From d7f1ff007b65a56a6391665fa822bf1fa2ba7927 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 15 Aug 2022 11:43:59 +0800
Subject: [PATCH 11/15] test(timeline): update timeline examples

---
 src/timeline/_example/customContent.tsx | 2 +-
 src/timeline/_example/customDot.tsx     | 2 +-
 src/timeline/_example/layout.tsx        | 2 +-
 src/timeline/_example/loading.tsx       | 2 +-
 src/timeline/_example/reverse.tsx       | 2 +-
 src/timeline/_example/theme.tsx         | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/timeline/_example/customContent.tsx b/src/timeline/_example/customContent.tsx
index 717f599530..a80b4aeab6 100644
--- a/src/timeline/_example/customContent.tsx
+++ b/src/timeline/_example/customContent.tsx
@@ -6,7 +6,7 @@ const CommonStyle = {
   color: 'rgba(0,0,0,.6)',
 };
 
-export default function BasicTimeLine() {
+export default function CustomContentTimeLine() {
   return (
     <Timeline mode="same">
       <Timeline.Item label="2022-01-01">
diff --git a/src/timeline/_example/customDot.tsx b/src/timeline/_example/customDot.tsx
index 18bf204a93..3d3a64bcfa 100644
--- a/src/timeline/_example/customDot.tsx
+++ b/src/timeline/_example/customDot.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Timeline, Space, Radio } from 'tdesign-react';
 import { TipsIcon, UserIcon, HeartIcon, HomeIcon } from 'tdesign-icons-react';
 
-export default function BasicTimeLine() {
+export default function CustomDotTimeLine() {
   const [dot, setDot] = useState<'default' | 'dot'>('default');
 
   return (
diff --git a/src/timeline/_example/layout.tsx b/src/timeline/_example/layout.tsx
index 9256ccfa80..0bd362bc39 100644
--- a/src/timeline/_example/layout.tsx
+++ b/src/timeline/_example/layout.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Timeline, Space, Radio } from 'tdesign-react';
 
-export default function BasicTimeLine() {
+export default function LayoutTimeLine() {
   const [direction, setDirection] = useState<'left' | 'right' | 'alternate'>('left');
   const [mode, setMode] = useState<'same' | 'alternate'>('same');
   const [layout, setLayout] = useState<'vertical' | 'horizontal'>('vertical');
diff --git a/src/timeline/_example/loading.tsx b/src/timeline/_example/loading.tsx
index e130600631..6e25c82253 100644
--- a/src/timeline/_example/loading.tsx
+++ b/src/timeline/_example/loading.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Timeline, Space, Switch } from 'tdesign-react';
 
-export default function BasicTimeLine() {
+export default function LoadingTimeLine() {
   const [loading, setLoading] = useState(false);
 
   return (
diff --git a/src/timeline/_example/reverse.tsx b/src/timeline/_example/reverse.tsx
index f220bcff3d..0c6853b748 100644
--- a/src/timeline/_example/reverse.tsx
+++ b/src/timeline/_example/reverse.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Timeline, Space, Switch } from 'tdesign-react';
 
-export default function BasicTimeLine() {
+export default function ReverseTimeLine() {
   const [reverse, setReverse] = useState(false);
 
   return (
diff --git a/src/timeline/_example/theme.tsx b/src/timeline/_example/theme.tsx
index b1050d52ad..9f5642d184 100644
--- a/src/timeline/_example/theme.tsx
+++ b/src/timeline/_example/theme.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Timeline } from 'tdesign-react';
 
-export default function BasicTimeLine() {
+export default function ThemeTimeLine() {
   return (
     <Timeline mode="same">
       <Timeline.Item label="2022-01-01" dotColor="primary">

From 53418f030ac3a68606ed606540ca2bd01777be83 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 15 Aug 2022 14:48:40 +0800
Subject: [PATCH 12/15] feat: merge develop

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 8e5657ab31..0346fa3797 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 8e5657ab31dbdd524b69f51f03a4f5aacb426962
+Subproject commit 0346fa37972ebbbe0d25d0d986d2788e4c555b7a

From d6fc0b9d7cfd668eb0dd76cbfb9e269f9b1449c0 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Tue, 16 Aug 2022 09:00:57 +0800
Subject: [PATCH 13/15] feat: update test snapshot

---
 test/ssr/__snapshots__/ssr.test.js.snap | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 1d3caee7c0..4ff652bdf9 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -490,6 +490,20 @@ exports[`ssr snapshot test renders ./src/layout/_example/combine.jsx correctly 1
 
 exports[`ssr snapshot test renders ./src/layout/_example/top.jsx correctly 1`] = `"<div class=\\"t-layout\\" data-reactroot=\\"\\"><header class=\\"t-layout__header\\"><div class=\\"t-head-menu t-menu--light\\"><div class=\\"t-head-menu__inner\\"><div class=\\"t-menu__logo\\"><img width=\\"136\\" src=\\"https://www.tencent.com/img/index/menu_logo_hover.png\\" alt=\\"logo\\"/></div><ul class=\\"t-menu\\"><li class=\\"t-menu__item t-is-active t-menu__item--plain\\"><span class=\\"t-menu__content\\">已选内容</span></li><li class=\\"t-menu__item t-menu__item--plain\\"><span class=\\"t-menu__content\\">菜单内容一</span></li><li class=\\"t-menu__item t-menu__item--plain\\"><span class=\\"t-menu__content\\">菜单内容二</span></li><li class=\\"t-menu__item t-is-disabled t-menu__item--plain\\"><span class=\\"t-menu__content\\">菜单内容三</span></li></ul><div class=\\"t-menu__operations\\"><div class=\\"t-menu__operations\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-search t-menu__operations-icon\\"><path fill=\\"currentColor\\" d=\\"M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z\\" fill-opacity=\\"0.9\\"></path></svg><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-notification-filled t-menu__operations-icon\\"><path fill=\\"currentColor\\" d=\\"M8.5 2.03V1h-1v1.03a4.5 4.5 0 00-4 4.47V11l-.9 1.2a.5.5 0 00.4.8h2.55a2.5 2.5 0 004.9 0H13a.5.5 0 00.4-.8l-.9-1.2V6.5a4.5 4.5 0 00-4-4.47z\\" fill-opacity=\\"0.9\\"></path></svg><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-home t-menu__operations-icon\\"><path fill=\\"currentColor\\" d=\\"M6 11v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M7.65 1.65c.2-.2.5-.2.7 0l6.5 6.5-.7.7L13 7.71v5.79a1 1 0 01-1 1H4a1 1 0 01-1-1V7.7L1.85 8.86l-.7-.7 6.5-6.5zM8 2.7l-4 4v6.79h8V6.7l-4-4z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div></header><main class=\\"t-layout__content\\"><div>Content</div></main><footer class=\\"t-layout__footer\\">Copyright @ 2019-2020 Tencent. All Rights Reserved</footer></div>"`;
 
+exports[`ssr snapshot test renders ./src/link/_example/base.jsx correctly 1`] = `"<a class=\\"t-link t-link--theme-default t-link--hover-underline\\">查看链接</a>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/disabled.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-is-disabled\\">查看链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-is-disabled t-is-underline\\">查看链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-is-disabled\\">查看链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-is-disabled\\">查看链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-is-disabled\\">查看链接<span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/hover.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-link--hover-underline\\">跳转链接</a></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-link--hover-color\\">跳转链接</a></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-is-underline t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-is-underline t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-is-underline t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-is-underline t-link--hover-color\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-is-underline t-link--hover-color\\">跳转链接</a></div></div></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/icon.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-link--hover-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-link\\"><path fill=\\"currentColor\\" d=\\"M6.23 11.89l2.12-2.12.71.7-2.12 2.13A2.5 2.5 0 013.4 9.06l2.13-2.12.7.7-2.12 2.13a1.5 1.5 0 002.12 2.12zM10.47 9.06l-.7-.7 2.12-2.13a1.5 1.5 0 10-2.12-2.12L7.65 6.23l-.71-.7L9.06 3.4a2.5 2.5 0 013.54 3.54l-2.13 2.12z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9.06 6.23L6.23 9.06l.71.7 2.83-2.82-.7-.7z\\" fill-opacity=\\"0.9\\"></path></svg></span>跳转链接</a></div><div class=\\"t-space-item\\"><a target=\\"_self\\" href=\\"https://tdesign.tencent.com/\\" class=\\"t-link t-link--theme-primary t-is-underline t-link--hover-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-link\\"><path fill=\\"currentColor\\" d=\\"M6.23 11.89l2.12-2.12.71.7-2.12 2.13A2.5 2.5 0 013.4 9.06l2.13-2.12.7.7-2.12 2.13a1.5 1.5 0 002.12 2.12zM10.47 9.06l-.7-.7 2.12-2.13a1.5 1.5 0 10-2.12-2.12L7.65 6.23l-.71-.7L9.06 3.4a2.5 2.5 0 013.54 3.54l-2.13 2.12z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9.06 6.23L6.23 9.06l.71.7 2.83-2.82-.7-.7z\\" fill-opacity=\\"0.9\\"></path></svg></span>跳转链接</a></div><div class=\\"t-space-item\\"><a target=\\"_self\\" href=\\"https://tdesign.tencent.com/\\" class=\\"t-link t-link--theme-danger t-is-underline t-link--hover-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span>跳转链接</a></div><div class=\\"t-space-item\\"><a target=\\"_self\\" class=\\"t-link t-link--theme-warning t-is-disabled t-is-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span>跳转链接</a></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/size.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-size-s t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-size-s t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-size-s t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-size-s t-is-disabled\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-size-s t-link--hover-underline\\">跳转链接<span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-is-disabled\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-link--hover-underline\\">跳转链接<span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-size-l t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-size-l t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-size-l t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-size-l t-is-disabled\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-size-l t-link--hover-underline\\">跳转链接<span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/theme.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-link--hover-underline\\">跳转链接</a></div></div>"`;
+
+exports[`ssr snapshot test renders ./src/link/_example/underline.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-default t-is-underline t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-primary t-is-underline t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-danger t-is-underline t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-warning t-is-underline t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a class=\\"t-link t-link--theme-success t-is-underline t-link--hover-underline\\">跳转链接</a></div></div>"`;
+
 exports[`ssr snapshot test renders ./src/list/_example/asyncLoading.jsx correctly 1`] = `"<div class=\\"t-radio-group t-size-l t-radio-group__outline\\"><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"load-more\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载更多</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"loading\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载中</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"loading-custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">自定义加载更多</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载完成</span></label></div><div style=\\"margin-bottom:16px\\"></div><div class=\\"t-list\\"><ul class=\\"t-list__inner\\"><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li></ul></div>"`;
 
 exports[`ssr snapshot test renders ./src/list/_example/base.jsx correctly 1`] = `"<div class=\\"t-list\\"><ul class=\\"t-list__inner\\"><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li><li class=\\"t-list-item\\"><div class=\\"t-list-item-main\\">列表内容列表内容列表内容</div></li></ul></div>"`;

From 8a530630b84b76e68bad263365838e4e5354c30d Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Wed, 17 Aug 2022 11:53:26 +0800
Subject: [PATCH 14/15] feat: update submodule

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 47eeb106c0..7b351c819c 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 47eeb106c00b813a6808698ae876559eb394cf85
+Subproject commit 7b351c819cdf75d1a03fb99137362a7d0a73acd9

From e692cf7ad7bd485e79c3bd2de612dd30a1e3e6cf Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Mon, 22 Aug 2022 08:57:30 +0800
Subject: [PATCH 15/15] feat(timeline): set default theme is primary & update
 examples

---
 src/timeline/Timeline.tsx                     |   2 +-
 src/timeline/TimelineItem.tsx                 |   2 +-
 .../__snapshots__/timeline.test.tsx.snap      | 146 +++++++++---------
 src/timeline/_example/base.tsx                |   4 +-
 src/timeline/_example/customDot.tsx           |  14 +-
 src/timeline/_example/layout.tsx              |  14 +-
 test/ssr/__snapshots__/ssr.test.js.snap       |  14 +-
 7 files changed, 99 insertions(+), 97 deletions(-)

diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 48ee7d80c5..5aa2664ca4 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -31,7 +31,7 @@ const Timeline = forwardRefWithStatics(
       (child: JSX.Element) => child.type.displayName === TimelineItem.displayName,
     );
     // 获取所有子节点类型
-    const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props.dotColor || 'default');
+    const itemsStatus = React.Children.map(timelineItems, (child: JSX.Element) => child.props?.dotColor || 'primary');
     const hasLabelItem = timelineItems.some((item: React.ReactElement<any>) => !!item?.props?.label);
 
     if (reverse) {
diff --git a/src/timeline/TimelineItem.tsx b/src/timeline/TimelineItem.tsx
index 42715a452e..600be13d68 100644
--- a/src/timeline/TimelineItem.tsx
+++ b/src/timeline/TimelineItem.tsx
@@ -20,7 +20,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     className,
     style = {},
     dot,
-    dotColor = 'default',
+    dotColor = 'primary',
     labelAlign,
     children,
     index,
diff --git a/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap b/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap
index bbf0d252f0..1ccba3f712 100644
--- a/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap
+++ b/src/timeline/__tests__/__snapshots__/timeline.test.tsx.snap
@@ -27,36 +27,36 @@ exports[`base.tsx 1`] = `
             class="t-radio-group t-size-m t-radio-group__outline"
           >
             <label
-              class="t-radio-button t-is-checked"
+              class="t-radio t-is-checked"
             >
               <input
                 checked=""
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="vertical"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 垂直时间轴
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="horizontal"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 水平时间轴
               </span>
@@ -78,7 +78,7 @@ exports[`base.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -102,7 +102,7 @@ exports[`base.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -126,7 +126,7 @@ exports[`base.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -150,7 +150,7 @@ exports[`base.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -185,7 +185,7 @@ exports[`customContent.tsx 1`] = `
         class="t-timeline-item__wrapper"
       >
         <div
-          class="t-timeline-item__dot t-timeline-item__dot--default"
+          class="t-timeline-item__dot t-timeline-item__dot--primary"
         />
         <div
           class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -216,7 +216,7 @@ exports[`customContent.tsx 1`] = `
         class="t-timeline-item__wrapper"
       >
         <div
-          class="t-timeline-item__dot t-timeline-item__dot--default"
+          class="t-timeline-item__dot t-timeline-item__dot--primary"
         />
         <div
           class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -247,7 +247,7 @@ exports[`customContent.tsx 1`] = `
         class="t-timeline-item__wrapper"
       >
         <div
-          class="t-timeline-item__dot t-timeline-item__dot--default"
+          class="t-timeline-item__dot t-timeline-item__dot--primary"
         />
         <div
           class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -278,7 +278,7 @@ exports[`customContent.tsx 1`] = `
         class="t-timeline-item__wrapper"
       >
         <div
-          class="t-timeline-item__dot t-timeline-item__dot--default"
+          class="t-timeline-item__dot t-timeline-item__dot--primary"
         />
         <div
           class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -333,36 +333,36 @@ exports[`customDot.tsx 1`] = `
             class="t-radio-group t-size-m t-radio-group__outline"
           >
             <label
-              class="t-radio-button t-is-checked"
+              class="t-radio t-is-checked"
             >
               <input
                 checked=""
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="default"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 默认样式
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="dot"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 Dot样式
               </span>
@@ -384,11 +384,11 @@ exports[`customDot.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary"
             >
               <svg
                 class="t-icon t-icon-tips t-timeline-item__dot-content t-size-m"
-                color="#0052D9"
+                color="var(--td-brand-color)"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
@@ -423,11 +423,11 @@ exports[`customDot.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary"
             >
               <svg
                 class="t-icon t-icon-user t-timeline-item__dot-content t-size-m"
-                color="#0052D9"
+                color="var(--td-brand-color)"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
@@ -462,11 +462,11 @@ exports[`customDot.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary"
             >
               <svg
                 class="t-icon t-icon-heart t-timeline-item__dot-content t-size-m"
-                color="#0052D9"
+                color="var(--td-brand-color)"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
@@ -501,11 +501,11 @@ exports[`customDot.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary"
             >
               <svg
                 class="t-icon t-icon-home t-timeline-item__dot-content t-size-m"
-                color="#0052D9"
+                color="var(--td-brand-color)"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
@@ -571,36 +571,36 @@ exports[`layout.tsx 1`] = `
             class="t-radio-group t-size-m t-radio-group__outline"
           >
             <label
-              class="t-radio-button t-is-checked"
+              class="t-radio t-is-checked"
             >
               <input
                 checked=""
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="vertical"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 垂直时间轴
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="horizontal"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 水平时间轴
               </span>
@@ -630,53 +630,53 @@ exports[`layout.tsx 1`] = `
             class="t-radio-group t-size-m t-radio-group__outline"
           >
             <label
-              class="t-radio-button t-is-checked"
+              class="t-radio t-is-checked"
             >
               <input
                 checked=""
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="left"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 左对齐
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="alternate"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 交错对齐
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="right"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 右对齐
               </span>
@@ -706,36 +706,36 @@ exports[`layout.tsx 1`] = `
             class="t-radio-group t-size-m t-radio-group__outline"
           >
             <label
-              class="t-radio-button t-is-checked"
+              class="t-radio t-is-checked"
             >
               <input
                 checked=""
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="same"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 同侧
               </span>
             </label>
             <label
-              class="t-radio-button"
+              class="t-radio"
             >
               <input
-                class="t-radio-button__former"
+                class="t-radio__former"
                 type="radio"
                 value="alternate"
               />
               <span
-                class="t-radio-button__input"
+                class="t-radio__input"
               />
               <span
-                class="t-radio-button__label"
+                class="t-radio__label"
               >
                 交错
               </span>
@@ -757,7 +757,7 @@ exports[`layout.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -781,7 +781,7 @@ exports[`layout.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -805,7 +805,7 @@ exports[`layout.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -829,7 +829,7 @@ exports[`layout.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -903,7 +903,7 @@ exports[`loading.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -927,7 +927,7 @@ exports[`loading.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -951,7 +951,7 @@ exports[`loading.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -975,7 +975,7 @@ exports[`loading.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -1049,7 +1049,7 @@ exports[`reverse.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -1073,7 +1073,7 @@ exports[`reverse.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -1097,7 +1097,7 @@ exports[`reverse.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -1121,7 +1121,7 @@ exports[`reverse.tsx 1`] = `
             class="t-timeline-item__wrapper"
           >
             <div
-              class="t-timeline-item__dot t-timeline-item__dot--default"
+              class="t-timeline-item__dot t-timeline-item__dot--primary"
             />
             <div
               class="t-timeline-item__tail t-timeline-item__tail--theme-default"
@@ -1252,7 +1252,7 @@ exports[`theme.tsx 1`] = `
         class="t-timeline-item__wrapper"
       >
         <div
-          class="t-timeline-item__dot t-timeline-item__dot--default"
+          class="t-timeline-item__dot t-timeline-item__dot--primary"
         />
         <div
           class="t-timeline-item__tail t-timeline-item__tail--theme-default"
diff --git a/src/timeline/_example/base.tsx b/src/timeline/_example/base.tsx
index 41fb046392..55e6e01b87 100644
--- a/src/timeline/_example/base.tsx
+++ b/src/timeline/_example/base.tsx
@@ -9,8 +9,8 @@ export default function BasicTimeLine() {
       <Space>
         <h4>时间轴方向</h4>
         <Radio.Group value={direction} onChange={(v) => setDirection(v as any)}>
-          <Radio.Button value="vertical">垂直时间轴</Radio.Button>
-          <Radio.Button value="horizontal">水平时间轴</Radio.Button>
+          <Radio value="vertical">垂直时间轴</Radio>
+          <Radio value="horizontal">水平时间轴</Radio>
         </Radio.Group>
       </Space>
       <Timeline layout={direction} mode="same">
diff --git a/src/timeline/_example/customDot.tsx b/src/timeline/_example/customDot.tsx
index 3d3a64bcfa..6e215cf8f4 100644
--- a/src/timeline/_example/customDot.tsx
+++ b/src/timeline/_example/customDot.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Timeline, Space, Radio } from 'tdesign-react';
 import { TipsIcon, UserIcon, HeartIcon, HomeIcon } from 'tdesign-icons-react';
 
+const color = 'var(--td-brand-color)';
+
 export default function CustomDotTimeLine() {
   const [dot, setDot] = useState<'default' | 'dot'>('default');
 
@@ -10,21 +12,21 @@ export default function CustomDotTimeLine() {
       <Space>
         <h4>时间轴样式</h4>
         <Radio.Group value={dot} onChange={(v) => setDot(v as any)}>
-          <Radio.Button value="default">默认样式</Radio.Button>
-          <Radio.Button value="dot">Dot样式</Radio.Button>
+          <Radio value="default">默认样式</Radio>
+          <Radio value="dot">Dot样式</Radio>
         </Radio.Group>
       </Space>
       <Timeline mode="same" theme={dot}>
-        <Timeline.Item label="2022-01-01" dot={<TipsIcon size="medium" color="#0052D9" />}>
+        <Timeline.Item label="2022-01-01" dot={<TipsIcon size="medium" color={color} />}>
           事件一
         </Timeline.Item>
-        <Timeline.Item label="2022-02-01" dot={<UserIcon size="medium" color="#0052D9" />}>
+        <Timeline.Item label="2022-02-01" dot={<UserIcon size="medium" color={color} />}>
           事件二
         </Timeline.Item>
-        <Timeline.Item label="2022-03-01" dot={<HeartIcon size="medium" color="#0052D9" />}>
+        <Timeline.Item label="2022-03-01" dot={<HeartIcon size="medium" color={color} />}>
           事件三
         </Timeline.Item>
-        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="medium" color="#0052D9" />}>
+        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="medium" color={color} />}>
           事件四
         </Timeline.Item>
       </Timeline>
diff --git a/src/timeline/_example/layout.tsx b/src/timeline/_example/layout.tsx
index 0bd362bc39..489eda4c9d 100644
--- a/src/timeline/_example/layout.tsx
+++ b/src/timeline/_example/layout.tsx
@@ -11,23 +11,23 @@ export default function LayoutTimeLine() {
       <Space>
         <h4>时间轴方向</h4>
         <Radio.Group value={layout} onChange={(v) => setLayout(v as any)}>
-          <Radio.Button value="vertical">垂直时间轴</Radio.Button>
-          <Radio.Button value="horizontal">水平时间轴</Radio.Button>
+          <Radio value="vertical">垂直时间轴</Radio>
+          <Radio value="horizontal">水平时间轴</Radio>
         </Radio.Group>
       </Space>
       <Space>
         <h4>对齐方式</h4>
         <Radio.Group value={direction} onChange={(v) => setDirection(v as any)}>
-          <Radio.Button value="left">左对齐</Radio.Button>
-          <Radio.Button value="alternate">交错对齐</Radio.Button>
-          <Radio.Button value="right">右对齐</Radio.Button>
+          <Radio value="left">左对齐</Radio>
+          <Radio value="alternate">交错对齐</Radio>
+          <Radio value="right">右对齐</Radio>
         </Radio.Group>
       </Space>
       <Space>
         <h4>label对齐方式</h4>
         <Radio.Group value={mode} onChange={(v) => setMode(v as any)}>
-          <Radio.Button value="same">同侧</Radio.Button>
-          <Radio.Button value="alternate">交错</Radio.Button>
+          <Radio value="same">同侧</Radio>
+          <Radio value="alternate">交错</Radio>
         </Radio.Group>
       </Space>
       <Timeline layout={layout} labelAlign={direction} mode={mode}>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index c303587471..c5b541a0e4 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -972,19 +972,19 @@ exports[`ssr snapshot test renders ./src/time-picker/_example/show-steps.jsx cor
 
 exports[`ssr snapshot test renders ./src/time-picker/_example/twelve-hour-meridian.jsx correctly 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-time-picker__group t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"select time\\" class=\\"t-input__inner\\" value=\\"\\" readonly=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/base.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴方向</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"vertical\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">垂直时间轴</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"horizontal\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">水平时间轴</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/base.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴方向</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" checked=\\"\\" value=\\"vertical\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">垂直时间轴</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"horizontal\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">水平时间轴</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/customContent.tsx correctly 1`] = `"<ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件一</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件一自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件二</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件二自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件三</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件三自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件四</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件四自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/customContent.tsx correctly 1`] = `"<ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件一</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件一自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件二</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件二自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件三</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件三自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\"><div>事件四</div><div style=\\"font-size:12px;color:rgba(0,0,0,.6)\\">事件四自定义内容</div><div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/customDot.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴样式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">默认样式</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"dot\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">Dot样式</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-tips t-timeline-item__dot-content t-size-m\\" color=\\"#0052D9\\"><path fill=\\"currentColor\\" d=\\"M8 1c-1.38 0-2.63.55-3.53 1.47a4.96 4.96 0 000 7.06c.3.32.65.58 1.03.8V12a1 1 0 001 1h3a1 1 0 001-1v-1.67A4.96 4.96 0 0013 6a5 5 0 00-5-5zM5.18 3.17a4 4 0 115.65 5.65v.01c-.3.3-.66.55-1.05.75l-.28.14V12h-3V9.72l-.28-.14A3.96 3.96 0 014 6c0-1.1.44-2.1 1.17-2.82zM5.5 14v1h5v-1h-5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user t-timeline-item__dot-content t-size-m\\" color=\\"#0052D9\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart t-timeline-item__dot-content t-size-m\\" color=\\"#0052D9\\"><path fill=\\"currentColor\\" d=\\"M8 5.86l1.06-.98a2.35 2.35 0 013.25 3.4L8 12.57l-4.31-4.3a2.35 2.35 0 013.25-3.4L8 5.86zm-.39-1.72a3.35 3.35 0 00-4.63 4.84l4.87 4.87a.2.2 0 00.3 0l4.87-4.87a3.35 3.35 0 00-4.63-4.84L8 4.5l-.39-.36z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--default\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-home t-timeline-item__dot-content t-size-m\\" color=\\"#0052D9\\"><path fill=\\"currentColor\\" d=\\"M6 11v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M7.65 1.65c.2-.2.5-.2.7 0l6.5 6.5-.7.7L13 7.71v5.79a1 1 0 01-1 1H4a1 1 0 01-1-1V7.7L1.85 8.86l-.7-.7 6.5-6.5zM8 2.7l-4 4v6.79h8V6.7l-4-4z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/customDot.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴样式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">默认样式</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"dot\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">Dot样式</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-tips t-timeline-item__dot-content t-size-m\\" color=\\"var(--td-brand-color)\\"><path fill=\\"currentColor\\" d=\\"M8 1c-1.38 0-2.63.55-3.53 1.47a4.96 4.96 0 000 7.06c.3.32.65.58 1.03.8V12a1 1 0 001 1h3a1 1 0 001-1v-1.67A4.96 4.96 0 0013 6a5 5 0 00-5-5zM5.18 3.17a4 4 0 115.65 5.65v.01c-.3.3-.66.55-1.05.75l-.28.14V12h-3V9.72l-.28-.14A3.96 3.96 0 014 6c0-1.1.44-2.1 1.17-2.82zM5.5 14v1h5v-1h-5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user t-timeline-item__dot-content t-size-m\\" color=\\"var(--td-brand-color)\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart t-timeline-item__dot-content t-size-m\\" color=\\"var(--td-brand-color)\\"><path fill=\\"currentColor\\" d=\\"M8 5.86l1.06-.98a2.35 2.35 0 013.25 3.4L8 12.57l-4.31-4.3a2.35 2.35 0 013.25-3.4L8 5.86zm-.39-1.72a3.35 3.35 0 00-4.63 4.84l4.87 4.87a.2.2 0 00.3 0l4.87-4.87a3.35 3.35 0 00-4.63-4.84L8 4.5l-.39-.36z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--custom t-timeline-item__dot--primary\\" style=\\"border-color:\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-home t-timeline-item__dot-content t-size-m\\" color=\\"var(--td-brand-color)\\"><path fill=\\"currentColor\\" d=\\"M6 11v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M7.65 1.65c.2-.2.5-.2.7 0l6.5 6.5-.7.7L13 7.71v5.79a1 1 0 01-1 1H4a1 1 0 01-1-1V7.7L1.85 8.86l-.7-.7 6.5-6.5zM8 2.7l-4 4v6.79h8V6.7l-4-4z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/layout.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴方向</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"vertical\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">垂直时间轴</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"horizontal\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">水平时间轴</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"left\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">左对齐</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"alternate\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">交错对齐</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"right\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">右对齐</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>label对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" checked=\\"\\" value=\\"same\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">同侧</span></label><label class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" value=\\"alternate\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">交错</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/layout.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>时间轴方向</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" checked=\\"\\" value=\\"vertical\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">垂直时间轴</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"horizontal\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">水平时间轴</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" checked=\\"\\" value=\\"left\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">左对齐</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"alternate\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">交错对齐</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"right\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">右对齐</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>label对齐方式</h4></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" checked=\\"\\" value=\\"same\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">同侧</span></label><label class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" value=\\"alternate\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">交错</span></label></div></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/loading.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>加载中</h4></div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/loading.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>加载中</h4></div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/reverse.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>是否倒序</h4></div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/reverse.tsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><h4>是否倒序</h4></div><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div></div></div><div class=\\"t-space-item\\"><ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件一<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件二<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件三<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">事件四<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li></ul></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/timeline/_example/theme.tsx correctly 1`] = `"<ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">已完成的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--success\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">成功的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--error\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">危险时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--warning\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">告警事件<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--default\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">默认的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-05-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot\\" style=\\"border-color:yellowgreen\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">自定义主题色<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-06-01</div></div></li></ul>"`;
+exports[`ssr snapshot test renders ./src/timeline/_example/theme.tsx correctly 1`] = `"<ul class=\\"t-timeline t-timeline-left t-timeline-vertical t-timeline-label t-timeline-label--same\\"><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">已完成的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-01-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--success\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">成功的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-02-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--error\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">危险时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-03-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--warning\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">告警事件<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-04-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot t-timeline-item__dot--primary\\" style=\\"border-color:\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">默认的时间<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-05-01</div></div></li><li class=\\"t-timeline-item t-timeline-item-left t-timeline-item--last\\"><div class=\\"t-timeline-item__wrapper\\"><div class=\\"t-timeline-item__dot\\" style=\\"border-color:yellowgreen\\"></div><div class=\\"t-timeline-item__tail t-timeline-item__tail--theme-default\\"></div></div><div class=\\"t-timeline-item__content\\">自定义主题色<div class=\\"t-timeline-item__label t-timeline-item__label--same\\">2022-06-01</div></div></li></ul>"`;
 
 exports[`ssr snapshot test renders ./src/tooltip/_example/arrow.jsx correctly 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">默认文字提示</span></button>"`;