From b0850139f285c63c1e6fe98dc3ff45bf9290c45d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Wed, 2 Nov 2022 16:25:28 +0800
Subject: [PATCH] [new component] Next tour (#37867)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: init

* feat: update

* feat: upate

* feat: update

* feat: update

* feat: init

* feat: init

* feat: init

* feat: update

* feat: update

* feat: update

* feat: update rc-tour

* feat: init component

* feat: init component

* chore: update pck

* doc: update doc

* doc: update reviewer

* doc: update reviewer

* doc: update reviewer

* feat: update reviewer

* feat: update reviewer

* feat: update doc

* feat: update deme

* feat: update demo doc

* feat: update demo

* feat: update demo

* feat: update style

* feat: update dom & style

* feat: update dome

* feat: update dome

* docs: update demo

* feat: update doc

* feat: update dome

* feat: add locale

* doc: update locale

* doc: add test

* feat: add test case

* feat: add test case

* feat: update package

* feat: update ts

* feat: update ts

* feat: update snapshots

* feat: update demo

* feat: update demo

* feat: update demo

* feat: edit maxSize

* feat: edit maxSize

* feat: update lint

* feat: update lint

* feat: update style reviewer

* feat: update style

* feat: merge next

* feat: add locale

* feat: reset bundleSize

* feat: change maxSize

* feat: update test coverage

* feat: update test coverage

* feat: add type

* chore: simplify en locale

* feat: update

* feat: update test snap

* docs: demo update

* chore: adjust style

* chore: adjust style

* chore: bump rc-tour

* Update package.json

* feat: update package

* feat: update package

* feat: update cover

* docs: update api

* docs: update overview snap

* feat: update token

* feat: delete repeat ts

* feat: remove finishButtonProps

* chore: update demo

* feat: tour style

* test: fix lint

* chore: code clean

Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
---
 .../__snapshots__/index.test.ts.snap          |   1 +
 components/dropdown/style/index.tsx           |   4 +-
 components/index.tsx                          |   2 +
 components/locale-provider/index.tsx          |   2 +
 components/locale/en_US.tsx                   |   5 +
 components/locale/zh_CN.tsx                   |   5 +
 components/locale/zh_HK.tsx                   |   5 +
 components/locale/zh_TW.tsx                   |   5 +
 components/style/placementArrow.tsx           |   2 +-
 components/theme/interface.ts                 |   2 +
 .../__snapshots__/demo-extend.test.ts.snap    | 162 +++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 162 +++++++++++
 .../__snapshots__/index.test.tsx.snap         |  61 +++++
 components/tour/__tests__/demo-extend.test.ts |   3 +
 components/tour/__tests__/demo.test.ts        |   3 +
 components/tour/__tests__/image.test.ts       |   5 +
 components/tour/__tests__/index.test.tsx      | 257 ++++++++++++++++++
 components/tour/demo/basic.md                 |  75 +++++
 components/tour/demo/non-modal.md             |  75 +++++
 components/tour/demo/placement.md             |  58 ++++
 components/tour/index.en-US.md                |  41 +++
 components/tour/index.tsx                     |  53 ++++
 components/tour/index.zh-CN.md                |  42 +++
 components/tour/interface.ts                  |  28 ++
 components/tour/panelRender.tsx               | 128 +++++++++
 components/tour/style/index.tsx               | 235 ++++++++++++++++
 package.json                                  |   3 +-
 tests/__snapshots__/index.test.ts.snap        |   1 +
 28 files changed, 1421 insertions(+), 4 deletions(-)
 create mode 100644 components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
 create mode 100644 components/tour/__tests__/__snapshots__/demo.test.ts.snap
 create mode 100644 components/tour/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 components/tour/__tests__/demo-extend.test.ts
 create mode 100644 components/tour/__tests__/demo.test.ts
 create mode 100644 components/tour/__tests__/image.test.ts
 create mode 100644 components/tour/__tests__/index.test.tsx
 create mode 100644 components/tour/demo/basic.md
 create mode 100644 components/tour/demo/non-modal.md
 create mode 100644 components/tour/demo/placement.md
 create mode 100644 components/tour/index.en-US.md
 create mode 100644 components/tour/index.tsx
 create mode 100644 components/tour/index.zh-CN.md
 create mode 100644 components/tour/interface.ts
 create mode 100644 components/tour/panelRender.tsx
 create mode 100644 components/tour/style/index.tsx

diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap
index 5518a69fe8..6f3eff4e71 100644
--- a/components/__tests__/__snapshots__/index.test.ts.snap
+++ b/components/__tests__/__snapshots__/index.test.ts.snap
@@ -59,6 +59,7 @@ Array [
   "TimePicker",
   "Timeline",
   "Tooltip",
+  "Tour",
   "Transfer",
   "Tree",
   "TreeSelect",
diff --git a/components/dropdown/style/index.tsx b/components/dropdown/style/index.tsx
index 7a19fc8a6a..839aa02b4b 100644
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@@ -67,7 +67,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
         // A placeholder out of dropdown visible range to avoid close when user moving
         '&::before': {
           position: 'absolute',
-          insetBlock: -dropdownArrowDistance + sizePopupArrow,
+          insetBlock: -dropdownArrowDistance + sizePopupArrow / 2,
           // insetInlineStart: -7, // FIXME: Seems not work for hidden element
           zIndex: -9999,
           opacity: 0.0001,
@@ -449,7 +449,7 @@ export default genComponentStyleHook(
     const dropdownToken = mergeToken<DropdownToken>(token, {
       menuCls: `${componentCls}-menu`,
       rootPrefixCls,
-      dropdownArrowDistance: sizePopupArrow + marginXXS,
+      dropdownArrowDistance: sizePopupArrow / 2 + marginXXS,
       dropdownArrowOffset,
       dropdownPaddingVertical,
       dropdownEdgeChildPadding: paddingXXS,
diff --git a/components/index.tsx b/components/index.tsx
index 20b8a314bd..c4ecfa53a7 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -133,6 +133,8 @@ export { default as Timeline } from './timeline';
 export type { TimelineItemProps, TimelineProps } from './timeline';
 export { default as Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
+export { default as Tour } from './tour';
+export type { TourProps, TourStepProps } from './tour/interface';
 export { default as Transfer } from './transfer';
 export type { TransferProps } from './transfer';
 export { default as Tree } from './tree';
diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx
index 9da6efbc32..779ccdd06f 100644
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@@ -4,6 +4,7 @@ import warning from '../_util/warning';
 import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
 import type { TransferLocale as TransferLocaleForEmpty } from '../empty';
 import type { ModalLocale } from '../modal/locale';
+import type { TourLocale } from '../tour/interface';
 import { changeConfirmLocale } from '../modal/locale';
 import type { PaginationLocale } from '../pagination/Pagination';
 import type { PopconfirmLocale } from '../popconfirm/PurePanel';
@@ -23,6 +24,7 @@ export interface Locale {
   Calendar?: Record<string, any>;
   Table?: TableLocale;
   Modal?: ModalLocale;
+  Tour?: TourLocale;
   Popconfirm?: PopconfirmLocale;
   Transfer?: TransferLocale;
   Select?: Record<string, any>;
diff --git a/components/locale/en_US.tsx b/components/locale/en_US.tsx
index 6b91199db5..e05ece5f76 100644
--- a/components/locale/en_US.tsx
+++ b/components/locale/en_US.tsx
@@ -35,6 +35,11 @@ const localeValues: Locale = {
     triggerAsc: 'Click to sort ascending',
     cancelSort: 'Click to cancel sorting',
   },
+  Tour: {
+    Next: 'Next',
+    Previous: 'Previous',
+    Finish: 'Finish',
+  },
   Modal: {
     okText: 'OK',
     cancelText: 'Cancel',
diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx
index 4750fb6c16..6d155dde0a 100644
--- a/components/locale/zh_CN.tsx
+++ b/components/locale/zh_CN.tsx
@@ -40,6 +40,11 @@ const localeValues: Locale = {
     cancelText: '取消',
     justOkText: '知道了',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '结束导览',
+  },
   Popconfirm: {
     cancelText: '取消',
     okText: '确定',
diff --git a/components/locale/zh_HK.tsx b/components/locale/zh_HK.tsx
index d8eb4800e3..ce06aa9440 100644
--- a/components/locale/zh_HK.tsx
+++ b/components/locale/zh_HK.tsx
@@ -37,6 +37,11 @@ const localeValues: Locale = {
     cancelText: '取消',
     justOkText: '知道了',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '結束導覽',
+  },
   Popconfirm: {
     okText: '確定',
     cancelText: '取消',
diff --git a/components/locale/zh_TW.tsx b/components/locale/zh_TW.tsx
index 07ca16f0e5..d6cf310308 100644
--- a/components/locale/zh_TW.tsx
+++ b/components/locale/zh_TW.tsx
@@ -37,6 +37,11 @@ const localeValues: Locale = {
     cancelText: '取消',
     justOkText: '知道了',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '結束導覽',
+  },
   Popconfirm: {
     okText: '確定',
     cancelText: '取消',
diff --git a/components/style/placementArrow.tsx b/components/style/placementArrow.tsx
index f211cb8994..ae626eec31 100644
--- a/components/style/placementArrow.tsx
+++ b/components/style/placementArrow.tsx
@@ -56,7 +56,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
     borderRadiusOuter,
     limitVerticalRadius,
   });
-  const dropdownArrowDistance = sizePopupArrow + marginXXS;
+  const dropdownArrowDistance = sizePopupArrow / 2 + marginXXS;
 
   return {
     [componentCls]: {
diff --git a/components/theme/interface.ts b/components/theme/interface.ts
index 3a1adf7815..eb8b900140 100644
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@@ -46,6 +46,7 @@ import type { ComponentToken as TooltipComponentToken } from '../tooltip/style';
 import type { ComponentToken as TransferComponentToken } from '../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../upload/style';
+import type { ComponentToken as TourComponentToken } from '../tour/style';
 
 export const PresetColors = [
   'blue',
@@ -133,6 +134,7 @@ export interface ComponentTokenMap {
   Table?: TableComponentToken;
   Space?: SpaceComponentToken;
   Progress?: ProgressComponentToken;
+  Tour?: TourComponentToken;
 }
 
 export type OverrideToken = {
diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 0000000000..5d1a74c7df
--- /dev/null
+++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tour/demo/basic.md extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/tour/demo/non-modal.md extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin non-modal Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/tour/demo/placement.md extend context correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Begin Tour
+  </span>
+</button>
+`;
diff --git a/components/tour/__tests__/__snapshots__/demo.test.ts.snap b/components/tour/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000000..83a9c68f06
--- /dev/null
+++ b/components/tour/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tour/demo/basic.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/tour/demo/non-modal.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin non-modal Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/tour/demo/placement.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Begin Tour
+  </span>
+</button>
+`;
diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..00d7865d66
--- /dev/null
+++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tour Primary 1`] = `
+<button
+  disabled=""
+  type="button"
+>
+  Cover
+</button>
+`;
+
+exports[`Tour basic 1`] = `
+<div>
+  <button
+    type="button"
+  >
+    Show
+  </button>
+  <button
+    disabled=""
+    type="button"
+  >
+    Cover
+  </button>
+  <button
+    disabled=""
+    type="button"
+  >
+    Placement
+  </button>
+</div>
+`;
+
+exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
+
+exports[`Tour single 1`] = `
+<button
+  disabled=""
+  type="button"
+>
+  Cover
+</button>
+`;
+
+exports[`Tour steps is empty 1`] = `
+<button
+  disabled=""
+  type="button"
+>
+  Cover
+</button>
+`;
+
+exports[`Tour steps props stepRender 1`] = `
+<button
+  disabled=""
+  type="button"
+>
+  Cover
+</button>
+`;
diff --git a/components/tour/__tests__/demo-extend.test.ts b/components/tour/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000000..f8acbed237
--- /dev/null
+++ b/components/tour/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('tour');
diff --git a/components/tour/__tests__/demo.test.ts b/components/tour/__tests__/demo.test.ts
new file mode 100644
index 0000000000..1e1d4eb491
--- /dev/null
+++ b/components/tour/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('tour');
diff --git a/components/tour/__tests__/image.test.ts b/components/tour/__tests__/image.test.ts
new file mode 100644
index 0000000000..4268c7ab94
--- /dev/null
+++ b/components/tour/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Tooltip tour', () => {
+  imageDemoTest('tour');
+});
diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx
new file mode 100644
index 0000000000..ebaf3795e9
--- /dev/null
+++ b/components/tour/__tests__/index.test.tsx
@@ -0,0 +1,257 @@
+import React, { useRef, useEffect } from 'react';
+import Tour from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, screen } from '../../../tests/utils';
+
+describe('Tour', () => {
+  mountTest(Tour);
+  rtlTest(Tour);
+
+  it('single', () => {
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>();
+      return (
+        <>
+          <button disabled ref={coverBtnRef} type="button">
+            Cover
+          </button>
+
+          <Tour
+            steps={[
+              {
+                title: 'cover title',
+                description: 'cover description.',
+                target: () => coverBtnRef.current,
+              },
+            ]}
+          />
+        </>
+      );
+    };
+    const { getByText, container } = render(<App />);
+    expect(getByText('cover title')).toBeTruthy();
+    expect(getByText('cover description.')).toBeTruthy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('steps is empty', () => {
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>();
+      return (
+        <>
+          <button disabled ref={coverBtnRef} type="button">
+            Cover
+          </button>
+          <Tour steps={[]} />
+          <Tour />
+        </>
+      );
+    };
+    const { container } = render(<App />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('steps props stepRender', () => {
+    const onClickMock = jest.fn();
+    const stepRenderMock = jest.fn();
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>();
+      return (
+        <>
+          <button disabled ref={coverBtnRef} type="button">
+            Cover
+          </button>
+          <Tour
+            type="default"
+            stepRender={stepRenderMock}
+            steps={[
+              {
+                title: 'With Cover',
+                nextButtonProps: {
+                  onClick: onClickMock,
+                },
+              },
+              {
+                title: 'With Cover',
+                nextButtonProps: {
+                  onClick: onClickMock,
+                },
+                prevButtonProps: {
+                  onClick: onClickMock,
+                },
+              },
+              {
+                title: 'With Cover',
+                prevButtonProps: {
+                  onClick: onClickMock,
+                },
+                nextButtonProps: {
+                  onClick: onClickMock,
+                },
+              },
+            ]}
+          />
+        </>
+      );
+    };
+    const { container } = render(<App />);
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
+    expect(onClickMock).toHaveBeenCalledTimes(5);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('button props onClick', () => {
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>();
+      const [btnName, steBtnName] = React.useState<string>('defaultBtn');
+      return (
+        <>
+          <span id="btnName">{btnName}</span>
+          <button disabled ref={coverBtnRef} type="button">
+            target
+          </button>
+
+          <Tour
+            steps={[
+              {
+                title: '',
+                description: '',
+                target: () => coverBtnRef.current,
+                nextButtonProps: {
+                  onClick: () => steBtnName('nextButton'),
+                },
+              },
+              {
+                title: '',
+                target: () => coverBtnRef.current,
+                prevButtonProps: {
+                  onClick: () => steBtnName('prevButton'),
+                },
+                nextButtonProps: {
+                  onClick: () => steBtnName('finishButton'),
+                },
+              },
+            ]}
+          />
+        </>
+      );
+    };
+    const { container } = render(<App />);
+    expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn');
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(container.querySelector('#btnName')).toHaveTextContent('nextButton');
+    fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    expect(container.querySelector('#btnName')).toHaveTextContent('prevButton');
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
+    expect(container.querySelector('#btnName')).toHaveTextContent('finishButton');
+  });
+
+  it('Primary', () => {
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>();
+      return (
+        <>
+          <button disabled ref={coverBtnRef} type="button">
+            Cover
+          </button>
+
+          <Tour
+            type="primary"
+            steps={[
+              {
+                title: 'primary title',
+                description: 'primary description.',
+                target: () => coverBtnRef.current,
+              },
+            ]}
+          />
+        </>
+      );
+    };
+    const { getByText, container } = render(<App />);
+    expect(getByText('primary description.')).toBeTruthy();
+    expect(document.querySelector('.ant-tour')).toHaveClass('ant-tour-primary');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('basic', () => {
+    const App: React.FC = () => {
+      const coverBtnRef = useRef<any>(null);
+      const placementBtnRef = useRef<any>(null);
+
+      const [show, setShow] = React.useState<boolean | undefined>();
+
+      useEffect(() => {
+        if (show === false) {
+          setShow(true);
+        }
+      }, [show]);
+
+      return (
+        <>
+          <div>
+            <button
+              type="button"
+              onClick={() => {
+                setShow(false);
+              }}
+            >
+              Show
+            </button>
+            <button disabled ref={coverBtnRef} type="button">
+              Cover
+            </button>
+            <button disabled ref={placementBtnRef} type="button">
+              Placement
+            </button>
+          </div>
+
+          {show && (
+            <Tour
+              steps={[
+                {
+                  title: 'Show in Center',
+                  description: 'Here is the content of Tour.',
+                  target: null,
+                },
+                {
+                  title: 'With Cover',
+                  description: 'Here is the content of Tour.',
+                  target: () => coverBtnRef.current,
+                  cover: (
+                    <img
+                      alt="tour.png"
+                      src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
+                    />
+                  ),
+                },
+                {
+                  title: 'Adjust Placement',
+                  description: 'Here is the content of Tour which show on the right.',
+                  placement: 'right',
+                  target: () => placementBtnRef.current,
+                },
+              ]}
+            />
+          )}
+        </>
+      );
+    };
+    const { getByText, container } = render(<App />);
+    fireEvent.click(screen.getByRole('button', { name: 'Show' }));
+    expect(getByText('Show in Center')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(getByText('Here is the content of Tour.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(getByText('Adjust Placement')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
+    expect(document.querySelector('.rc-tour')).toBeFalsy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/components/tour/demo/basic.md b/components/tour/demo/basic.md
new file mode 100644
index 0000000000..0b5329d1a0
--- /dev/null
+++ b/components/tour/demo/basic.md
@@ -0,0 +1,75 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The most basic usage.
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { Button, Divider, Space, Tour } from 'antd';
+import type { TourProps } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+
+const App: React.FC = () => {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Upload File',
+      description: 'Put your files here.',
+      cover: (
+        <img
+          alt="tour.png"
+          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
+        />
+      ),
+      target: () => ref1.current,
+    },
+    {
+      title: 'Save',
+      description: 'Save your changes.',
+      target: () => ref2.current,
+    },
+    {
+      title: 'Other Actions',
+      description: 'Click to see other actions.',
+      target: () => ref3.current,
+    },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Begin Tour
+      </Button>
+
+      <Divider />
+
+      <Space>
+        <Button ref={ref1}> Upload</Button>
+        <Button ref={ref2} type="primary">
+          Save
+        </Button>
+        <Button ref={ref3} icon={<EllipsisOutlined />} />
+      </Space>
+
+      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
+    </>
+  );
+};
+
+export default App;
+```
diff --git a/components/tour/demo/non-modal.md b/components/tour/demo/non-modal.md
new file mode 100644
index 0000000000..4df1444a1a
--- /dev/null
+++ b/components/tour/demo/non-modal.md
@@ -0,0 +1,75 @@
+---
+order: 1
+title:
+  zh-CN: 非模态
+  en-US: Non-modal
+---
+
+## zh-CN
+
+使用 `mask={false}` 可以将引导变为非模态，同时为了强调引导本身，建议与 `type="primary"` 组合使用。
+
+## en-US
+
+Use `mask={false}` to make Tour non-modal. At the meantime it is recommended to use with `type="primary"` to emphasize the guide itself.
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { Button, Divider, Space, Tour } from 'antd';
+import type { TourProps } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+
+const App: React.FC = () => {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Upload File',
+      description: 'Put your files here.',
+      cover: (
+        <img
+          alt="tour.png"
+          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
+        />
+      ),
+      target: () => ref1.current,
+    },
+    {
+      title: 'Save',
+      description: 'Save your changes.',
+      target: () => ref2.current,
+    },
+    {
+      title: 'Other Actions',
+      description: 'Click to see other actions.',
+      target: () => ref3.current,
+    },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Begin non-modal Tour
+      </Button>
+
+      <Divider />
+
+      <Space>
+        <Button ref={ref1}> Upload</Button>
+        <Button ref={ref2} type="primary">
+          Save
+        </Button>
+        <Button ref={ref3} icon={<EllipsisOutlined />} />
+      </Space>
+
+      <Tour open={open} onClose={() => setOpen(false)} mask={false} type="primary" steps={steps} />
+    </>
+  );
+};
+
+export default App;
+```
diff --git a/components/tour/demo/placement.md b/components/tour/demo/placement.md
new file mode 100644
index 0000000000..d58e430c07
--- /dev/null
+++ b/components/tour/demo/placement.md
@@ -0,0 +1,58 @@
+---
+order: 2
+title:
+  zh-CN: 位置
+  en-US: Placement
+---
+
+## zh-CN
+
+改变引导相对于目标的位置，共有 12 种位置可供选择。当 `target={null}` 时引导将会展示在正中央。
+
+## en-US
+
+Change the placement of the guide relative to the target, there are 12 placements available. When `target={null}` the guide will show in the center.
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { Button, Tour } from 'antd';
+import type { TourProps } from 'antd';
+
+const App: React.FC = () => {
+  const ref = useRef(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Center',
+      description: 'Displayed in the center of screen.',
+      target: null,
+    },
+    {
+      title: 'Right',
+      description: 'On the right of target.',
+      placement: 'right',
+      target: () => ref.current,
+    },
+    {
+      title: 'Top',
+      description: 'On the top of target.',
+      placement: 'top',
+      target: () => ref.current,
+    },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)} ref={ref}>
+        Begin Tour
+      </Button>
+
+      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
+    </>
+  );
+};
+
+export default App;
+```
diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md
new file mode 100644
index 0000000000..c07e4145b2
--- /dev/null
+++ b/components/tour/index.en-US.md
@@ -0,0 +1,41 @@
+---
+category: Components
+subtitle: Walk Through
+type: Data Entry
+title: Tour
+cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
+---
+
+A popup component for guiding users through a product. Available since `5.0.0`.
+
+## When To Use
+
+Use when you want to guide users through a product.
+
+## API
+
+### Tour
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| arrow | Whether to show the arrow, including the configuration whether to point to the center of the elemen | `boolean`\|`{ pointAtCenter: boolean}` | `true` |  |
+| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| onClose | Callback function on shutdown | `Function` | - |  |
+| mask | Whether to enable masking | `boolean` | `true` |  |
+| type | Type, affects the background color and text color | `default` `primary` | `default` |  |
+
+### TourStep
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| target | Get the element the guide card points to. Empty makes it show in center of screen | `() => HTMLElement` `HTMLElement` | - |  |
+| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean` `{ pointAtCenter: boolean}` | `true` |  |
+| cover | Displayed pictures or videos | `ReactNode` | - |  |
+| title | title | `ReactNode` | - |  |
+| description | description | `ReactNode` | - |  |
+| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| onClose | Callback function on shutdown | `Function` | - |  |
+| mask | Whether to enable masking, the default follows the `mask` property of Tour | `boolean` | `true` |  |
+| type | Type, affects the background color and text color | `default` `primary` | `default` |  |
+| nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - |  |
+| prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - |  |
diff --git a/components/tour/index.tsx b/components/tour/index.tsx
new file mode 100644
index 0000000000..d03ed8a286
--- /dev/null
+++ b/components/tour/index.tsx
@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import RCTour from '@rc-component/tour';
+import classNames from 'classnames';
+import panelRender from './panelRender';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useStyle from './style';
+import type { TourProps, TourStepProps } from './interface';
+
+const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    steps,
+    current,
+    type,
+    rootClassName,
+    ...restProps
+  } = props;
+  const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
+  const prefixCls = getPrefixCls('tour', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const customClassName = classNames(
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    {
+      [`${prefixCls}-primary`]: type === 'primary',
+    },
+    hashId,
+    rootClassName,
+  );
+
+  const mergedRenderPanel = (stepProps: TourStepProps, stepCurrent: number) =>
+    panelRender(stepProps, stepCurrent, type);
+
+  return wrapSSR(
+    <RCTour
+      {...restProps}
+      rootClassName={customClassName}
+      prefixCls={prefixCls}
+      steps={steps}
+      current={current}
+      renderPanel={mergedRenderPanel}
+    />,
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Tour.displayName = 'Tour';
+}
+
+export default Tour;
diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md
new file mode 100644
index 0000000000..71563fe60f
--- /dev/null
+++ b/components/tour/index.zh-CN.md
@@ -0,0 +1,42 @@
+---
+category: Components
+subtitle: 漫游式引导
+type: 数据展示
+title: Tour
+cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
+---
+
+用于分步引导用户了解产品功能的气泡组件。自 `5.0.0` 版本开始提供该组件。
+
+## 何时使用
+
+常用于引导用户了解产品功能。
+
+## API
+
+### Tour
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` |  |
+| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| onClose | 关闭引导时的回调函数 | `Function` | - |  |
+| onFinish | 引导完成时的回调 | `Function` | - |  |
+| mask | 是否启用蒙层 | `boolean` | `true` |  |
+| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |
+
+### TourStep 引导步骤卡片
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - |  |
+| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` |  |
+| cover | 展示的图片或者视频 | `ReactNode` | - |  |
+| title | 标题 | `ReactNode` | - |  |
+| description | 主要描述部分 | `ReactNode` | - |  |
+| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |  |  |
+| onClose | 关闭引导时的回调函数 | `Function` | - |  |
+| mask | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean` | `true` |  |
+| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |
+| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
+| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
diff --git a/components/tour/interface.ts b/components/tour/interface.ts
new file mode 100644
index 0000000000..0831e51e8b
--- /dev/null
+++ b/components/tour/interface.ts
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type {
+  TourProps as RCTourProps,
+  TourStepProps as RCTourStepProps,
+} from '@rc-component/tour';
+
+export type TourProps = Omit<RCTourProps, 'renderPanel'> & {
+  steps?: TourStepProps[];
+  className?: string;
+  prefixCls?: string;
+  current?: number;
+  stepRender?: (current: number, total: number) => ReactNode;
+  type?: 'default' | 'primary'; //	default	类型，影响底色与文字颜色
+};
+
+export interface TourStepProps extends RCTourStepProps {
+  cover?: ReactNode; // 展示的图片或者视频
+  nextButtonProps?: { children?: ReactNode; onClick?: () => void };
+  prevButtonProps?: { children?: ReactNode; onClick?: () => void };
+  stepRender?: (current: number, total: number) => ReactNode;
+  type?: 'default' | 'primary'; //	default	类型，影响底色与文字颜色
+}
+
+export interface TourLocale {
+  Next: string;
+  Previous: string;
+  Finish: string;
+}
diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx
new file mode 100644
index 0000000000..e0fe53e4ff
--- /dev/null
+++ b/components/tour/panelRender.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import type { TourStepProps } from './interface';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import Button from '../button';
+import type { ButtonProps } from '../button';
+import defaultLocale from '../locale/en_US';
+
+const panelRender: (
+  step: TourStepProps,
+  current: number,
+  type: TourStepProps['type'],
+) => ReactNode = (props: TourStepProps, current: number, type) => {
+  const {
+    prefixCls,
+    total = 1,
+    title,
+    onClose,
+    onPrev,
+    onNext,
+    onFinish,
+    cover,
+    description,
+    nextButtonProps,
+    prevButtonProps,
+    stepRender,
+  } = props;
+
+  const isLastStep = current === total - 1;
+
+  const prevBtnClick = () => {
+    onPrev?.();
+    if (typeof prevButtonProps?.onClick === 'function') {
+      prevButtonProps?.onClick();
+    }
+  };
+
+  const nextBtnClick = () => {
+    onNext?.();
+    if (isLastStep) {
+      onFinish?.();
+    }
+    if (typeof nextButtonProps?.onClick === 'function') {
+      nextButtonProps?.onClick();
+    }
+  };
+
+  let headerNode: ReactNode;
+  if (title) {
+    headerNode = (
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-title`}>{title}</div>
+      </div>
+    );
+  }
+
+  let descriptionNode: ReactNode;
+  if (description) {
+    descriptionNode = <div className={`${prefixCls}-description`}>{description}</div>;
+  }
+
+  let coverNode: ReactNode;
+  if (cover) {
+    coverNode = <div className={`${prefixCls}-cover`}>{cover}</div>;
+  }
+
+  const mergedSlickNode =
+    (typeof stepRender === 'function' && stepRender(current, total)) ||
+    [...Array.from({ length: total }).keys()].map((stepItem, index) => (
+      <span
+        key={stepItem}
+        className={classNames(
+          index === current && `${prefixCls}-slider-active`,
+          `${prefixCls}-slider`,
+        )}
+      />
+    ));
+  const slickNode: ReactNode = total > 1 ? mergedSlickNode : null;
+
+  const mainBtnType = type === 'primary' ? 'default' : 'primary';
+  const secondaryBtnProps: ButtonProps = {
+    type: 'default',
+    ghost: type === 'primary',
+  };
+
+  return (
+    <LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
+      {contextLocale => (
+        <>
+          <CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
+          {coverNode}
+          {headerNode}
+          {descriptionNode}
+          <div className={`${prefixCls}-footer`}>
+            <div className={`${prefixCls}-sliders`}>{slickNode}</div>
+            <div className={`${prefixCls}-buttons`}>
+              {current !== 0 ? (
+                <Button
+                  {...secondaryBtnProps}
+                  {...prevButtonProps}
+                  onClick={prevBtnClick}
+                  size="small"
+                  className={`${prefixCls}-prev-btn`}
+                >
+                  {prevButtonProps?.children ?? contextLocale.Previous}
+                </Button>
+              ) : null}
+              <Button
+                type={mainBtnType}
+                {...nextButtonProps}
+                onClick={nextBtnClick}
+                size="small"
+                className={`${prefixCls}-next-btn`}
+              >
+                {nextButtonProps?.children ??
+                  (isLastStep ? contextLocale.Finish : contextLocale.Next)}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </LocaleReceiver>
+  );
+};
+
+export default panelRender;
diff --git a/components/tour/style/index.tsx b/components/tour/style/index.tsx
new file mode 100644
index 0000000000..f98e242ce7
--- /dev/null
+++ b/components/tour/style/index.tsx
@@ -0,0 +1,235 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { FullToken, GenerateStyle } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
+import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
+
+export interface ComponentToken {}
+
+interface TourToken extends FullToken<'Tour'> {
+  tourZIndexPopup: number;
+  sliderWidth: number;
+  sliderHeight: number;
+  tourBorderRadius: number;
+  tourCloseSize: number;
+}
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle<TourToken> = token => {
+  const {
+    componentCls,
+    lineHeight,
+    padding,
+    paddingXS,
+    borderRadius,
+    borderRadiusXS,
+    colorPrimary,
+    colorText,
+    colorFill,
+    sliderHeight,
+    sliderWidth,
+    boxShadow,
+    tourZIndexPopup,
+    fontSize,
+    colorBgContainer,
+    fontWeightStrong,
+    marginXS,
+    colorTextLightSolid,
+    tourBorderRadius,
+    colorWhite,
+    colorBgTextHover,
+    tourCloseSize,
+  } = token;
+
+  return [
+    {
+      [componentCls]: {
+        ...resetComponent(token),
+
+        color: colorText,
+        position: 'absolute',
+        zIndex: tourZIndexPopup,
+        display: 'block',
+        visibility: 'visible',
+        fontSize,
+        lineHeight,
+        width: 520,
+        '--antd-arrow-background-color': colorBgContainer,
+
+        [`&${componentCls}-hidden`]: {
+          display: 'none',
+        },
+
+        // ============================= panel content ===========================
+        [`${componentCls}-content`]: {
+          position: 'relative',
+        },
+        [`${componentCls}-inner`]: {
+          textAlign: 'start',
+          textDecoration: 'none',
+          borderRadius: tourBorderRadius,
+          boxShadow,
+          position: 'relative',
+          backgroundColor: colorBgContainer,
+          border: 'none',
+          backgroundClip: 'padding-box',
+
+          [`${componentCls}-close`]: {
+            position: 'absolute',
+            top: padding,
+            insetInlineEnd: padding,
+            color: token.colorIcon,
+            outline: 'none',
+            width: tourCloseSize,
+            height: tourCloseSize,
+            borderRadius: token.borderRadiusSM,
+            transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+
+            '&:hover': {
+              color: token.colorIconHover,
+              backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
+            },
+          },
+
+          [`${componentCls}-cover`]: {
+            textAlign: 'center',
+            padding: `${padding + tourCloseSize + paddingXS}px ${padding}px 0`,
+            img: {
+              width: '100%',
+            },
+          },
+          [`${componentCls}-header`]: {
+            padding: `${padding}px ${padding}px ${paddingXS}px`,
+
+            [`${componentCls}-title`]: {
+              lineHeight,
+              fontSize,
+              fontWeight: fontWeightStrong,
+            },
+          },
+
+          [`${componentCls}-description`]: {
+            padding: `0 ${padding}px`,
+            lineHeight,
+            wordWrap: 'break-word',
+          },
+
+          [`${componentCls}-footer`]: {
+            padding: `${paddingXS}px ${padding}px ${padding}px`,
+            textAlign: 'end',
+            borderRadius: `0 0 ${borderRadiusXS}px ${borderRadiusXS}px`,
+            display: 'flex',
+            justifyContent: 'space-between',
+
+            [`${componentCls}-sliders`]: {
+              display: 'inline-block',
+
+              [`${componentCls}-slider`]: {
+                width: `${sliderWidth}px`,
+                height: `${sliderHeight}px`,
+                display: 'inline-block',
+                borderRadius: '50%',
+                background: colorFill,
+                marginInlineEnd: sliderHeight,
+
+                '&-active': {
+                  background: colorPrimary,
+                },
+              },
+            },
+            [`${componentCls}-buttons button`]: {
+              marginInlineStart: marginXS,
+            },
+          },
+        },
+
+        // ============================= primary type ===========================
+        [`&${componentCls}-primary`]: {
+          '--antd-arrow-background-color': colorPrimary,
+          [`${componentCls}-inner`]: {
+            color: colorTextLightSolid,
+            textAlign: 'start',
+            textDecoration: 'none',
+            backgroundColor: colorPrimary,
+            borderRadius,
+            boxShadow,
+
+            [`${componentCls}-close`]: {
+              color: colorTextLightSolid,
+            },
+
+            [`${componentCls}-sliders`]: {
+              [`${componentCls}-slider`]: {
+                background: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+
+                '&-active': {
+                  background: colorTextLightSolid,
+                },
+              },
+            },
+
+            [`${componentCls}-prev-btn`]: {
+              color: colorTextLightSolid,
+              borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+
+              '&:hover': {
+                backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+                borderColor: 'transparent',
+              },
+            },
+
+            [`${componentCls}-next-btn`]: {
+              color: colorPrimary,
+              borderColor: 'transparent',
+              background: colorWhite,
+
+              '&:hover': {
+                background: new TinyColor(colorBgTextHover).onBackground(colorWhite).toRgbString(),
+              },
+            },
+          },
+        },
+      },
+
+      // Limit left and right placement radius
+      [[
+        `&-placement-left`,
+        `&-placement-leftTop`,
+        `&-placement-leftBottom`,
+        `&-placement-right`,
+        `&-placement-rightTop`,
+        `&-placement-rightBottom`,
+      ].join(',')]: {
+        [`${componentCls}-inner`]: {
+          borderRadius:
+            tourBorderRadius > MAX_VERTICAL_CONTENT_RADIUS
+              ? MAX_VERTICAL_CONTENT_RADIUS
+              : tourBorderRadius,
+        },
+      },
+    },
+    // Arrow Style
+    getArrowStyle<TourToken>(token, {
+      colorBg: 'var(--antd-arrow-background-color)',
+      showArrowCls: '',
+      contentRadius: tourBorderRadius,
+      limitVerticalRadius: true,
+    }),
+  ];
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Tour', token => {
+  const { borderRadiusLG, fontSize, lineHeight } = token;
+  const TourToken = mergeToken<TourToken>(token, {
+    tourZIndexPopup: token.zIndexPopupBase + 70,
+    sliderWidth: 6,
+    sliderHeight: 6,
+    tourBorderRadius: borderRadiusLG,
+    tourCloseSize: fontSize * lineHeight,
+  });
+  return [genBaseStyle(TourToken)];
+});
diff --git a/package.json b/package.json
index eae8158417..7955288ecf 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "@ant-design/react-slick": "~0.29.1",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
+    "@rc-component/tour": "~1.0.0-9",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
@@ -314,7 +315,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "375 kB"
+      "maxSize": "377 kB"
     }
   ],
   "tnpm": {
diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
index 88ac0395dc..0e698d0368 100644
--- a/tests/__snapshots__/index.test.ts.snap
+++ b/tests/__snapshots__/index.test.ts.snap
@@ -59,6 +59,7 @@ Array [
   "TimePicker",
   "Timeline",
   "Tooltip",
+  "Tour",
   "Transfer",
   "Tree",
   "TreeSelect",