From 9d1bc41430a5143f5337347de475117a419e937c Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 19 Aug 2022 11:22:31 +0800
Subject: [PATCH 01/48] feat(guide): init

---
 examples/guide/demos/base.vue |  3 +++
 examples/guide/guide.md       |  9 +++++++++
 site/site.config.mjs          |  6 ++++++
 src/components.ts             |  1 +
 src/guide/guide.tsx           | 20 ++++++++++++++++++++
 src/guide/index.ts            | 12 ++++++++++++
 src/guide/props.ts            | 10 ++++++++++
 src/guide/style/css.js        |  1 +
 src/guide/style/index.js      |  1 +
 src/guide/type.ts             |  9 +++++++++
 src/index.ts                  |  1 +
 test/e2e/guide/guide.spec.js  |  0
 test/unit/guide/demo.test.js  | 10 ++++++++++
 test/unit/guide/index.test.js | 30 ++++++++++++++++++++++++++++++
 14 files changed, 113 insertions(+)
 create mode 100644 examples/guide/demos/base.vue
 create mode 100644 examples/guide/guide.md
 create mode 100644 src/guide/guide.tsx
 create mode 100644 src/guide/index.ts
 create mode 100644 src/guide/props.ts
 create mode 100644 src/guide/style/css.js
 create mode 100644 src/guide/style/index.js
 create mode 100644 src/guide/type.ts
 create mode 100644 test/e2e/guide/guide.spec.js
 create mode 100644 test/unit/guide/demo.test.js
 create mode 100644 test/unit/guide/index.test.js

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
new file mode 100644
index 0000000000..7e3a1a9e8e
--- /dev/null
+++ b/examples/guide/demos/base.vue
@@ -0,0 +1,3 @@
+<template>
+  <t-guide theme="primary">Guide</t-guide>
+</template>
diff --git a/examples/guide/guide.md b/examples/guide/guide.md
new file mode 100644
index 0000000000..f29e217b5b
--- /dev/null
+++ b/examples/guide/guide.md
@@ -0,0 +1,9 @@
+## guide 
+
+::: demo demos/base 默认
+:::
+
+### 属性配置
+| 属性 | 类型 | 默认值 | 必传 | 说明 |
+|-----|-----|-----|-----|-----|
+|-|-|-|-|-|
diff --git a/site/site.config.mjs b/site/site.config.mjs
index 3831ef231f..f9bb3e6692 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -425,6 +425,12 @@ export default {
           path: '/vue-next/components/drawer',
           component: () => import('@/examples/drawer/drawer.md'),
         },
+        {
+          title: 'Guide 引导',
+          name: 'guide',
+          path: '/vue-next/components/guide',
+          component: () => import('@/examples/guide/guide.md'),
+        },
         {
           title: 'Message 全局提示',
           name: 'message',
diff --git a/src/components.ts b/src/components.ts
index 055939f111..80384d2900 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -63,6 +63,7 @@ export * from './watermark';
 export * from './alert';
 export * from './dialog';
 export * from './drawer';
+export * from './guide';
 export * from './loading';
 export * from './message';
 export * from './notification';
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
new file mode 100644
index 0000000000..c42e0bf932
--- /dev/null
+++ b/src/guide/guide.tsx
@@ -0,0 +1,20 @@
+import { computed, defineComponent } from 'vue';
+import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import props from './props';
+
+export default defineComponent({
+  name: 'TGuide',
+  props: { ...props },
+  setup(props) {
+    const renderContent = useContent();
+    const renderTNodeJSX = useTNodeJSX();
+    const COMPONENT_NAME = usePrefixClass('link');
+    const { STATUS, SIZE } = useCommonClassName();
+    const { classPrefix } = useConfig('classPrefix');
+
+    return () => {
+      return <div>guide</div>;
+    };
+  },
+});
diff --git a/src/guide/index.ts b/src/guide/index.ts
new file mode 100644
index 0000000000..255fae2a36
--- /dev/null
+++ b/src/guide/index.ts
@@ -0,0 +1,12 @@
+import _Guide from './Guide';
+import withInstall from '../utils/withInstall';
+import { TdGuideProps } from './type';
+
+import './style';
+
+export * from './type';
+export type GuideProps = TdGuideProps;
+
+export const Guide = withInstall(_Guide);
+
+export default Guide;
diff --git a/src/guide/props.ts b/src/guide/props.ts
new file mode 100644
index 0000000000..bbf7b42de6
--- /dev/null
+++ b/src/guide/props.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdGuideProps } from './type';
+import { PropType } from 'vue';
+
+export default {};
diff --git a/src/guide/style/css.js b/src/guide/style/css.js
new file mode 100644
index 0000000000..6a9a4b1328
--- /dev/null
+++ b/src/guide/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/guide/style/index.js b/src/guide/style/index.js
new file mode 100644
index 0000000000..6ff0f4f84c
--- /dev/null
+++ b/src/guide/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/web/components/guide/_index.less';
diff --git a/src/guide/type.ts b/src/guide/type.ts
new file mode 100644
index 0000000000..b2bdfc1dc5
--- /dev/null
+++ b/src/guide/type.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, SizeEnum } from '../common';
+
+export interface TdGuideProps {}
diff --git a/src/index.ts b/src/index.ts
index 7f726ce235..a20ed35119 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import { App } from 'vue';
 import * as components from './components';
+import Guide from './guide';
 
 export function install(app: App, config?: Record<string, unknown>): void {
   Object.keys(components).forEach((key) => {
diff --git a/test/e2e/guide/guide.spec.js b/test/e2e/guide/guide.spec.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/unit/guide/demo.test.js b/test/unit/guide/demo.test.js
new file mode 100644
index 0000000000..ab290b533a
--- /dev/null
+++ b/test/unit/guide/demo.test.js
@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import demo from '@/examples/guide/demos/base.vue';
+
+// unit test for component in examples.
+describe('Guide', () => {
+  it('base demo works fine', () => {
+    const wrapper = mount(demo);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/test/unit/guide/index.test.js b/test/unit/guide/index.test.js
new file mode 100644
index 0000000000..92569d7f82
--- /dev/null
+++ b/test/unit/guide/index.test.js
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import Guide from '@/src/guide/index.ts';
+
+// every component needs four parts: props/events/slots/functions.
+describe('Guide', () => {
+  // test props api
+  describe(':props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return <Guide></Guide>;
+        },
+      });
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  // test events
+  describe('@event', () => {});
+
+  // test slots
+  describe('<slot>', () => {
+    it('', () => {});
+  });
+
+  // test exposure function
+  describe('function', () => {
+    it('', () => {});
+  });
+});

From 6779ce404f3b9aa688ac1c99ed3a1789a8bf4425 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 19 Aug 2022 16:19:04 +0800
Subject: [PATCH 02/48] feat(guide): init guide src and example

---
 examples/guide/demos/base.vue   |  4 +++-
 examples/guide/demos/guide.vue  | 18 ++++++++++++++++++
 examples/guide/guide.md         | 19 ++++++++++++-------
 examples/guide/usage/index.vue  | 24 ++++++++++++++++++++++++
 examples/guide/usage/props.json | 32 ++++++++++++++++++++++++++++++++
 src/_common                     |  2 +-
 src/guide/guide.tsx             |  2 +-
 src/guide/index.ts              |  2 +-
 8 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 examples/guide/demos/guide.vue
 create mode 100644 examples/guide/usage/index.vue
 create mode 100644 examples/guide/usage/props.json

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index 7e3a1a9e8e..19fac90317 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -1,3 +1,5 @@
 <template>
-  <t-guide theme="primary">Guide</t-guide>
+  <div class="t-loading-demo">
+    <t-loading></t-loading>
+  </div>
 </template>
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
new file mode 100644
index 0000000000..cd1480746f
--- /dev/null
+++ b/examples/guide/demos/guide.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="loading-wrap-demo">
+    <t-guide />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const loading = ref(true);
+</script>
+<style scoped>
+.loading-wrap-demo {
+  width: 170px;
+}
+.loading-wrap-demo .t-button + .t-button {
+  margin-left: 24px;
+}
+</style>
diff --git a/examples/guide/guide.md b/examples/guide/guide.md
index f29e217b5b..137306551b 100644
--- a/examples/guide/guide.md
+++ b/examples/guide/guide.md
@@ -1,9 +1,14 @@
-## guide 
+:: BASE_DOC ::
+## API
+### Loading Props
 
-::: demo demos/base 默认
-:::
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
 
-### 属性配置
-| 属性 | 类型 | 默认值 | 必传 | 说明 |
-|-----|-----|-----|-----|-----|
-|-|-|-|-|-|
+
+### LoadingPlugin
+
+
+
+参数名称 | 参数类型 | 参数默认值 | 参数说明
+-- | -- | -- | --
diff --git a/examples/guide/usage/index.vue b/examples/guide/usage/index.vue
new file mode 100644
index 0000000000..78202bb4e2
--- /dev/null
+++ b/examples/guide/usage/index.vue
@@ -0,0 +1,24 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
+    <template #loading="{ configProps }">
+      <t-guide v-bind="configProps" />
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'loading', value: 'loading' }];
+
+const usageCodeMap = { loading: '<t-loading v-bind="configProps" />' };
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>
diff --git a/examples/guide/usage/props.json b/examples/guide/usage/props.json
new file mode 100644
index 0000000000..1f1bab969a
--- /dev/null
+++ b/examples/guide/usage/props.json
@@ -0,0 +1,32 @@
+[
+  {
+    "name": "indicator",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "inheritColor",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "loading",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "preventScrollThrough",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "showOverlay",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  }
+]
\ No newline at end of file
diff --git a/src/_common b/src/_common
index bdb4da544d..a922a9b68f 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit bdb4da544de4973742f3435ea6fae0e37d742b10
+Subproject commit a922a9b68f0e191f5c8af785d5439089f859172c
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index c42e0bf932..54a0e85d96 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -14,7 +14,7 @@ export default defineComponent({
     const { classPrefix } = useConfig('classPrefix');
 
     return () => {
-      return <div>guide</div>;
+      return <span>guid</span>;
     };
   },
 });
diff --git a/src/guide/index.ts b/src/guide/index.ts
index 255fae2a36..8ee32c75ab 100644
--- a/src/guide/index.ts
+++ b/src/guide/index.ts
@@ -1,4 +1,4 @@
-import _Guide from './Guide';
+import _Guide from './guide';
 import withInstall from '../utils/withInstall';
 import { TdGuideProps } from './type';
 

From 8defb60f31726c7276d4f209b4907faf359ed329 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sun, 21 Aug 2022 18:18:34 +0800
Subject: [PATCH 03/48] feat(guide): guide basic content

---
 examples/guide/demos/guide.vue                |  63 +++-
 examples/guide/guide.en-US.md                 |  53 ++++
 examples/guide/guide.md                       |  47 ++-
 .../guide/usage/{index.vue => index-keep.vue} |   0
 src/_common                                   |   2 +-
 src/guide/const/index.ts                      |   8 +
 src/guide/guide-step-props.ts                 |  69 +++++
 src/guide/guide.tsx                           | 279 +++++++++++++++++-
 src/guide/props.ts                            |  79 ++++-
 src/guide/type.ts                             | 178 ++++++++++-
 src/guide/utils/elementInViewport.ts          |  18 ++
 src/guide/utils/getElmInfo.ts                 |  32 ++
 src/guide/utils/getOffset.ts                  |  52 ++++
 src/guide/utils/getPropValue.ts               |  25 ++
 src/guide/utils/getScrollParent.ts            |  23 ++
 src/guide/utils/getTargetElm.ts               |  11 +
 src/guide/utils/getWindowSize.ts              |  15 +
 src/guide/utils/index.ts                      |   0
 src/guide/utils/isFixed.ts                    |  23 ++
 src/guide/utils/scrollTo.ts                   |  25 ++
 src/guide/utils/setStyle.ts                   |  24 ++
 21 files changed, 1003 insertions(+), 23 deletions(-)
 create mode 100644 examples/guide/guide.en-US.md
 rename examples/guide/usage/{index.vue => index-keep.vue} (100%)
 create mode 100644 src/guide/const/index.ts
 create mode 100644 src/guide/guide-step-props.ts
 create mode 100644 src/guide/utils/elementInViewport.ts
 create mode 100644 src/guide/utils/getElmInfo.ts
 create mode 100644 src/guide/utils/getOffset.ts
 create mode 100644 src/guide/utils/getPropValue.ts
 create mode 100644 src/guide/utils/getScrollParent.ts
 create mode 100644 src/guide/utils/getTargetElm.ts
 create mode 100644 src/guide/utils/getWindowSize.ts
 create mode 100644 src/guide/utils/index.ts
 create mode 100644 src/guide/utils/isFixed.ts
 create mode 100644 src/guide/utils/scrollTo.ts
 create mode 100644 src/guide/utils/setStyle.ts

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index cd1480746f..5028d7ff6d 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -1,18 +1,67 @@
 <template>
-  <div class="loading-wrap-demo">
-    <t-guide />
+  <div class="guide-wrap-demo">
+    <t-button @click="clickNextStep">新手引导</t-button>
+    <div id="guide1" class="guide-item">guide1</div>
+    <div id="guide2" class="guide-item">guide2</div>
+    <div id="guide3" class="guide-item">guide3</div>
+    <div id="guide4" class="guide-item">guide4</div>
+    <t-guide
+      :current="current"
+      :steps="steps"
+      @click-prev-step="clickPrevStep"
+      @click-next-step="clickNextStep"
+      @finish="onFinish"
+    />
   </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 
-const loading = ref(true);
+const current = ref(-1);
+
+const clickPrevStep = () => {
+  current.value -= 1;
+};
+
+const clickNextStep = () => {
+  current.value += 1;
+};
+
+const onFinish = () => {
+  console.log('完成');
+};
+
+const steps = [
+  { element: '#guide1' },
+  { element: '#guide2' },
+  { element: '#guide3' },
+  { element: '#guide4', mode: 'dialog' },
+];
 </script>
 <style scoped>
-.loading-wrap-demo {
-  width: 170px;
+.guide-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: aqua;
 }
-.loading-wrap-demo .t-button + .t-button {
-  margin-left: 24px;
+
+#guide1 {
+  width: 100px;
+  height: 100px;
+}
+
+#guide2 {
+  margin-top: 400px;
+  margin-left: 80%;
+  width: 200px;
+  height: 200px;
+}
+
+#guide3 {
+  margin-top: 1400px;
+  margin-left: 20%;
+  width: 400px;
+  height: 400px;
 }
 </style>
diff --git a/examples/guide/guide.en-US.md b/examples/guide/guide.en-US.md
new file mode 100644
index 0000000000..7e8a3032f5
--- /dev/null
+++ b/examples/guide/guide.en-US.md
@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+
+### Guide Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+counter | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+current | Number | - | `v-model` and `v-model:current` is supported | N
+defaultCurrent | Number | - | uncontrolled property | N
+finishButtonProps | Object | { content: '完成', theme: 'primary' } | Typescript：`ButtonProps` | N
+hideCounter | Boolean | false | \- | N
+hidePrev | Boolean | false | \- | N
+hideSkip | Boolean | false | \- | N
+initialNum | Number | 0 | \- | N
+mask | Boolean | true | \- | N
+mode | String | popup | options：popup/dialog | N
+nextButtonProps | Object | { content: '下一步', theme: 'primary' } | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+prevButtonProps | Object | { content: '上一步', theme: 'primary' } | Typescript：`ButtonProps` | N
+skipButtonProps | Object | { content: '跳过', theme: 'default' } | Typescript：`ButtonProps` | N
+steps | Array | - | Typescript：`Array<TdGuideStepProps>` | N
+onChange | Function |  | Typescript：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+onClickNextStep | Function |  | Typescript：`( next: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+onClickPrevStep | Function |  | Typescript：`( prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+onFinish | Function |  | Typescript：`( current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+onSkip | Function |  | Typescript：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+
+### Guide Events
+
+name | params | description
+-- | -- | --
+change | `(current: number, total: number, context?: { e?: MouseEvent })` | \-
+click-next-step | `( next: number, current: number, total: number, context?: { e?: MouseEvent })` | \-
+click-prev-step | `( prev: number, current: number, total: number, context?: { e?: MouseEvent })` | \-
+finish | `( current: number, total: number, context?: { e?: MouseEvent })` | \-
+skip | `(current: number, total: number, context?: { e?: MouseEvent })` | \-
+
+### GuideStep Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+children | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+description | String | - | \- | N
+element | String / Function | - | required。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | Y
+nextButtonProps | Object | - | Typescript：`ButtonProps` | N
+offset | Array | - | Typescript：`Array<string | number>` | N
+placement | String | top | Typescript：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+prevButtonProps | Object | - | Typescript：`ButtonProps` | N
+skipButtonProps | Object | - | Typescript：`ButtonProps` | N
+stepOverlayClass | String | - | \- | N
+title | String | - | \- | N
diff --git a/examples/guide/guide.md b/examples/guide/guide.md
index 137306551b..89ddcbf51d 100644
--- a/examples/guide/guide.md
+++ b/examples/guide/guide.md
@@ -1,14 +1,51 @@
 :: BASE_DOC ::
 ## API
-### Loading Props
+### Guide Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+counter | Slot / Function | - | 用于自定义渲染计数部分。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+current | Number | - | 当前步骤，即整个引导的进度。。支持语法糖 `v-model` 或 `v-model:current` | N
+defaultCurrent | Number | - | 当前步骤，即整个引导的进度。。非受控属性 | N
+finishButtonProps | Object | { content: '完成', theme: 'primary' } | 透传 完成 的全部属性。TS 类型：`ButtonProps` | N
+hideCounter | Boolean | false | 是否隐藏计数 | N
+hidePrev | Boolean | false | 是否隐藏上一步按钮 | N
+hideSkip | Boolean | false | 是否隐藏跳过按钮 | N
+initialNum | Number | 0 | 起始序号 | N
+mask | Boolean | true | 是否出现遮罩层 | N
+mode | String | popup | 引导框的类型。可选项：popup/dialog | N
+nextButtonProps | Object | { content: '下一步', theme: 'primary' } | 透传 下一步按钮 的全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+prevButtonProps | Object | { content: '上一步', theme: 'primary' } | 透传 上一步按钮 的全部属性。TS 类型：`ButtonProps` | N
+skipButtonProps | Object | { content: '跳过', theme: 'default' } | 透传 跳过按钮 的全部属性。TS 类型：`ButtonProps` | N
+steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。。TS 类型：`Array<TdGuideStepProps>` | N
+onChange | Function |  | TS 类型：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
+onClickNextStep | Function |  | TS 类型：`( next: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击下一步时触发 | N
+onClickPrevStep | Function |  | TS 类型：`( prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击上一步时触发 | N
+onFinish | Function |  | TS 类型：`( current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击完成按钮时触发 | N
+onSkip | Function |  | TS 类型：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击跳过按钮时触发 | N
 
+### Guide Events
 
-### LoadingPlugin
+名称 | 参数 | 描述
+-- | -- | --
+change | `(current: number, total: number, context?: { e?: MouseEvent })` | 当前步骤发生变化时触发
+click-next-step | `( next: number, current: number, total: number, context?: { e?: MouseEvent })` | 点击下一步时触发
+click-prev-step | `( prev: number, current: number, total: number, context?: { e?: MouseEvent })` | 点击上一步时触发
+finish | `( current: number, total: number, context?: { e?: MouseEvent })` | 点击完成按钮时触发
+skip | `(current: number, total: number, context?: { e?: MouseEvent })` | 点击跳过按钮时触发
 
+### GuideStep Props
 
-
-参数名称 | 参数类型 | 参数默认值 | 参数说明
--- | -- | -- | --
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+children | String / Slot / Function | - | 自定义内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+content | String / Slot / Function | - | 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+description | String | - | 当前步骤的描述内容 | N
+element | String / Function | - | 必需。高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | Y
+nextButtonProps | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
+offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']。TS 类型：`Array<string | number>` | N
+placement | String | top | 引导框相对于高亮元素出现的位置。TS 类型：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+prevButtonProps | Object | - | 用于自定义当前引导框的上一步按钮的内容。TS 类型：`ButtonProps` | N
+skipButtonProps | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
+stepOverlayClass | String | - | 覆盖引导框的类名 | N
+title | String | - | 当前步骤的标题内容 | N
diff --git a/examples/guide/usage/index.vue b/examples/guide/usage/index-keep.vue
similarity index 100%
rename from examples/guide/usage/index.vue
rename to examples/guide/usage/index-keep.vue
diff --git a/src/_common b/src/_common
index a922a9b68f..3eeba5e0b7 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit a922a9b68f0e191f5c8af785d5439089f859172c
+Subproject commit 3eeba5e0b7d40420090e6a8e973d61f7ff672236
diff --git a/src/guide/const/index.ts b/src/guide/const/index.ts
new file mode 100644
index 0000000000..078b26fe7f
--- /dev/null
+++ b/src/guide/const/index.ts
@@ -0,0 +1,8 @@
+import { CrossProps } from '../type';
+
+export const defalutCrossProps: CrossProps = {
+  mask: true,
+  mode: 'popup',
+};
+
+export const tooltipZIndex = 999999;
diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts
new file mode 100644
index 0000000000..07b3d1844d
--- /dev/null
+++ b/src/guide/guide-step-props.ts
@@ -0,0 +1,69 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdGuideStepProps } from '../guide/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 自定义内容，同 content */
+  children: {
+    type: [String, Function] as PropType<TdGuideStepProps['children']>,
+  },
+  /** 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效） */
+  content: {
+    type: [String, Function] as PropType<TdGuideStepProps['content']>,
+  },
+  /** 当前步骤的描述内容 */
+  description: {
+    type: String,
+    default: '',
+  },
+  /** 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign') */
+  element: {
+    type: [String, Function] as PropType<TdGuideStepProps['element']>,
+    required: true,
+  },
+  /** 当期步骤引导框的类型 */
+  mode: {
+    type: String as PropType<TdGuideStepProps['mode']>,
+    default: 'popup' as TdGuideStepProps['mode'],
+    validator(val: TdGuideStepProps['mode']): boolean {
+      if (!val) return true;
+      return ['popup', 'dialog'].includes(val);
+    },
+  },
+  /** 用于自定义当前引导框的下一步按钮的内容 */
+  nextButtonProps: {
+    type: Object as PropType<TdGuideStepProps['nextButtonProps']>,
+  },
+  /** 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px'] */
+  offset: {
+    type: Array as PropType<TdGuideStepProps['offset']>,
+  },
+  /** 引导框相对于高亮元素出现的位置 */
+  placement: {
+    type: String,
+    default: 'top',
+  },
+  /** 用于自定义当前引导框的上一步按钮的内容 */
+  prevButtonProps: {
+    type: Object as PropType<TdGuideStepProps['prevButtonProps']>,
+  },
+  /** 用于自定义当前步骤引导框的跳过按钮的内容 */
+  skipButtonProps: {
+    type: Object as PropType<TdGuideStepProps['skipButtonProps']>,
+  },
+  /** 覆盖引导框的类名 */
+  stepOverlayClass: {
+    type: String,
+    default: '',
+  },
+  /** 当前步骤的标题内容 */
+  title: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 54a0e85d96..c13abaaa21 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -1,20 +1,285 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch } from 'vue';
+
+import props from './props';
+import setStyle from './utils/setStyle';
+import getScrollParent from './utils/getScrollParent';
+import getOffset from './utils/getOffset';
+import getTargetElm from './utils/getTargetElm';
+import scrollTo from './utils/scrollTo';
+
+import TransferDom from '../utils/transfer-dom';
+
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
-import props from './props';
+import useDefaultValue from '../hooks/useDefaultValue';
+
+import Button from '../button';
+import Popup from '../popup';
+import Dialog from '../dialog';
+
+import { TdGuideProps, TdGuideStepProps, CrossProps } from './type';
+import { defalutCrossProps, tooltipZIndex } from './const';
 
 export default defineComponent({
   name: 'TGuide',
-  props: { ...props },
+  directives: {
+    TransferDom,
+  },
+  props,
   setup(props) {
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
-    const COMPONENT_NAME = usePrefixClass('link');
-    const { STATUS, SIZE } = useCommonClassName();
-    const { classPrefix } = useConfig('classPrefix');
+
+    const classPrefix = usePrefixClass();
+    const COMPONENT_NAME = usePrefixClass('guide');
+    const { SIZE } = useCommonClassName();
+
+    const { current, hideCounter, hidePrev, hideSkip, steps } = toRefs(props);
+
+    const [innerCurrent, setInnerCurrent] = useDefaultValue(current, props.defaultCurrent, props.onChange, 'current');
+
+    // 覆盖层，用于覆盖所有元素
+    // const overlayLayer = ref<JSX.Element>();
+    // 高亮层，用于高亮元素
+    // const highlightLayer = ref<JSX.Element>();
+    // 覆盖层，用于覆盖所有元素
+    const overlayLayerRef = ref<HTMLElement>();
+    // 高亮层，用于高亮元素
+    const highlightLayerRef = ref<HTMLElement>();
+    // 提示层，用于高亮元素
+    const referenceLayerRef = ref<HTMLElement>();
+    // 当前高亮的元素
+    const currentHighlightLayerElm = ref<HTMLElement>();
+    // 下一个高亮的元素
+    const nextHighlightLayerElm = ref<HTMLElement>();
+    // dialog ref
+    const dialogRef = ref<HTMLElement>();
+    // 是否开始展示
+    const actived = ref<boolean>(false);
+    // 当前步骤的信息
+    const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
+
+    // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
+    const getCurrentCrossProps = (propsName: keyof CrossProps) =>
+      currentStepInfo.value[propsName] || props[propsName] || defalutCrossProps[propsName];
+    // 当前是否为 popup
+    const isPopup = computed(() => getCurrentCrossProps('mode') === 'popup');
+
+    // 滑动到元素位置
+    const scrollParentToElement = (element: HTMLElement) => {
+      const parent = getScrollParent(element);
+      if (parent === document.body) return;
+      parent.scrollTop = element.offsetTop - parent.offsetTop;
+    };
+
+    // 设置高亮层的位置
+    const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
+      const elementPosition = getOffset(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+      setStyle(highlighLayer, {
+        width: `${elementPosition.width}px`,
+        height: `${elementPosition.height}px`,
+        top: `${elementPosition.top}px`,
+        left: `${elementPosition.left}px`,
+      });
+    };
+
+    const showPopupGuide = () => {
+      const currentElement = getTargetElm(currentStepInfo.value.element);
+      nextHighlightLayerElm.value = currentElement;
+      nextTick(() => {
+        scrollParentToElement(nextHighlightLayerElm.value);
+        setHighlightLayerPosition(highlightLayerRef.value);
+        setHighlightLayerPosition(referenceLayerRef.value);
+        scrollTo(nextHighlightLayerElm.value);
+        currentHighlightLayerElm.value = currentElement;
+      });
+    };
+
+    const destoryTooltipElm = () => {
+      referenceLayerRef.value?.parentNode.removeChild(referenceLayerRef.value);
+      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
+      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
+    };
+
+    const showGuide = () => {
+      if (isPopup.value) {
+        showPopupGuide();
+      } else {
+        destoryTooltipElm();
+      }
+    };
+
+    const handleSkip = () => {
+      actived.value = false;
+      setInnerCurrent(-1);
+      destoryTooltipElm();
+      props.onSkip?.();
+    };
+    const handlePrev = () => {
+      setInnerCurrent(innerCurrent.value - 1);
+      props.onClickPrevStep?.();
+    };
+    const handleNext = () => {
+      setInnerCurrent(innerCurrent.value + 1);
+      props.onClickNextStep?.();
+    };
+    const handleFinish = () => {
+      actived.value = false;
+      setInnerCurrent(-1);
+      destoryTooltipElm();
+      props.onFinish?.();
+    };
+
+    watch(innerCurrent, (val) => {
+      if (val >= 0 && val < steps.value.length) {
+        actived.value = true;
+        showGuide();
+      } else {
+        console.info('当前引导的步骤', val + 1);
+      }
+    });
 
     return () => {
-      return <span>guid</span>;
+      const renderOverlayLayer = () => (
+        <div ref={overlayLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__overlay`} />
+      );
+
+      const renderHighlightLayer = () => (
+        <div ref={highlightLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__highlight`} />
+      );
+
+      const renderCounter = () => {
+        const stepsLength = props.steps.length;
+        const popupDefaultCounter = (
+          <div class={`${COMPONENT_NAME.value}__counter`}>
+            <span>
+              {innerCurrent.value + 1}/{stepsLength}
+            </span>
+          </div>
+        );
+        const dialogDefaultCounter = (
+          <div class={`${COMPONENT_NAME.value}__counter`}>
+            {props.steps.map((_, i) => (
+              <span
+                class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
+              ></span>
+            ))}
+          </div>
+        );
+        return <>{!hideCounter.value && (isPopup.value ? popupDefaultCounter : dialogDefaultCounter)}</>;
+      };
+
+      const renderAction = (mode: TdGuideProps['mode']) => {
+        const stepsLength = props.steps.length;
+        const isLast = innerCurrent.value === stepsLength - 1;
+        const isFirst = innerCurrent.value === 0;
+        const buttonSize = mode === 'popup' ? 'small' : 'medium';
+        return (
+          <div class={`${COMPONENT_NAME.value}__action`}>
+            {!hideSkip.value && !isLast && (
+              <Button
+                class={`${COMPONENT_NAME.value}__skip`}
+                theme="default"
+                size={buttonSize}
+                variant="base"
+                onClick={handleSkip}
+              >
+                跳过
+              </Button>
+            )}
+            {!hidePrev.value && !isFirst && (
+              <Button
+                class={`${COMPONENT_NAME.value}__prev`}
+                theme="primary"
+                size={buttonSize}
+                variant="base"
+                onClick={handlePrev}
+              >
+                上一步
+              </Button>
+            )}
+            {!isLast && (
+              <Button
+                class={`${COMPONENT_NAME.value}__next`}
+                theme="primary"
+                size={buttonSize}
+                variant="base"
+                onClick={handleNext}
+              >
+                下一步
+              </Button>
+            )}
+            {isLast && (
+              <Button
+                class={`${COMPONENT_NAME.value}__finish`}
+                theme="primary"
+                size={buttonSize}
+                variant="base"
+                onClick={handleFinish}
+              >
+                完成
+              </Button>
+            )}
+          </div>
+        );
+      };
+
+      const renderPopupContent = () => {
+        const title = <div class={`${COMPONENT_NAME.value}__title`}>标题</div>;
+        const desc = <div class={`${COMPONENT_NAME.value}__desc`}>描述</div>;
+        const action = (
+          <div class={`${COMPONENT_NAME.value}__footer--popup`}>
+            {renderCounter()}
+            {renderAction('popup')}
+          </div>
+        );
+
+        return (
+          <div class={`${COMPONENT_NAME.value}__tooltip`}>
+            {title}
+            {desc}
+            {action}
+          </div>
+        );
+      };
+
+      const renderReferenceLayer = () => (
+        <Popup visible={true} v-slots={{ content: renderPopupContent }} show-arrow zIndex={tooltipZIndex}>
+          <div ref={referenceLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__reference`} />
+        </Popup>
+      );
+
+      const renderPopupGuide = () => {
+        return (
+          <>
+            {renderOverlayLayer()}
+            {renderHighlightLayer()}
+            {renderReferenceLayer()}
+          </>
+        );
+      };
+
+      const renderDialogGuide = () => {
+        // todo 类型 infer
+        return (
+          <Dialog
+            ref={dialogRef}
+            visible={true}
+            showOverlay={getCurrentCrossProps('mask') as boolean}
+            footer={false}
+            closeBtn={false}
+            zIndex={tooltipZIndex}
+          >
+            <p>This is a dialog</p>
+            <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
+              {renderCounter()}
+              {renderAction('dialog')}
+            </div>
+          </Dialog>
+        );
+      };
+
+      return actived.value && (getCurrentCrossProps('mode') === 'popup' ? renderPopupGuide() : renderDialogGuide());
     };
   },
 });
diff --git a/src/guide/props.ts b/src/guide/props.ts
index bbf7b42de6..9c27cdee81 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -7,4 +7,81 @@
 import { TdGuideProps } from './type';
 import { PropType } from 'vue';
 
-export default {};
+export default {
+  /** 用于自定义渲染计数部分 */
+  counter: {
+    type: Function as PropType<TdGuideProps['counter']>,
+  },
+  /** 当前步骤，即整个引导的进度。 */
+  current: {
+    type: Number,
+    default: undefined,
+  },
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  /** 当前步骤，即整个引导的进度。，非受控属性 */
+  defaultCurrent: {
+    type: Number,
+  },
+  /** 透传 完成 的全部属性 */
+  finishButtonProps: {
+    type: Object as PropType<TdGuideProps['finishButtonProps']>,
+    default: { content: '完成', theme: 'primary' },
+  },
+  /** 是否隐藏计数 */
+  hideCounter: Boolean,
+  /** 是否隐藏上一步按钮 */
+  hidePrev: Boolean,
+  /** 是否隐藏跳过按钮 */
+  hideSkip: Boolean,
+  /** 起始序号 */
+  initialNum: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否出现遮罩层 */
+  mask: {
+    type: Boolean,
+    default: true,
+  },
+  /** 引导框的类型 */
+  mode: {
+    type: String as PropType<TdGuideProps['mode']>,
+    default: 'popup' as TdGuideProps['mode'],
+    validator(val: TdGuideProps['mode']): boolean {
+      if (!val) return true;
+      return ['popup', 'dialog'].includes(val);
+    },
+  },
+  /** 透传 下一步按钮 的全部属性 */
+  nextButtonProps: {
+    type: Object as PropType<TdGuideProps['nextButtonProps']>,
+    default: { content: '下一步', theme: 'primary' },
+  },
+  /** 透传 上一步按钮 的全部属性 */
+  prevButtonProps: {
+    type: Object as PropType<TdGuideProps['prevButtonProps']>,
+    default: { content: '上一步', theme: 'primary' },
+  },
+  /** 透传 跳过按钮 的全部属性 */
+  skipButtonProps: {
+    type: Object as PropType<TdGuideProps['skipButtonProps']>,
+    default: { content: '跳过', theme: 'default' },
+  },
+  /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。 */
+  steps: {
+    type: Array as PropType<TdGuideProps['steps']>,
+  },
+  /** 当前步骤发生变化时触发 */
+  onChange: Function as PropType<TdGuideProps['onChange']>,
+  /** 点击下一步时触发 */
+  onClickNextStep: Function as PropType<TdGuideProps['onClickNextStep']>,
+  /** 点击上一步时触发 */
+  onClickPrevStep: Function as PropType<TdGuideProps['onClickPrevStep']>,
+  /** 点击完成按钮时触发 */
+  onFinish: Function as PropType<TdGuideProps['onFinish']>,
+  /** 点击跳过按钮时触发 */
+  onSkip: Function as PropType<TdGuideProps['onSkip']>,
+};
diff --git a/src/guide/type.ts b/src/guide/type.ts
index b2bdfc1dc5..044634cb67 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -4,6 +4,180 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, SizeEnum } from '../common';
+import { ButtonProps } from '../button';
+import { TNode, AttachNode } from '../common';
 
-export interface TdGuideProps {}
+export interface TdGuideProps {
+  /**
+   * 用于自定义渲染计数部分
+   */
+  counter?: TNode;
+  /**
+   * 当前步骤，即整个引导的进度。
+   */
+  current?: number;
+  /**
+   * 当前步骤，即整个引导的进度。，非受控属性
+   */
+  defaultCurrent?: number;
+  /**
+   * 当前步骤，即整个引导的进度。
+   */
+  modelValue?: number;
+  /**
+   * 透传 完成 的全部属性
+   * @default{ content: '完成', theme: 'primary' }
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 是否隐藏计数
+   * @default false
+   */
+  hideCounter?: boolean;
+  /**
+   * 是否隐藏上一步按钮
+   * @default false
+   */
+  hidePrev?: boolean;
+  /**
+   * 是否隐藏跳过按钮
+   * @default false
+   */
+  hideSkip?: boolean;
+  /**
+   * 起始序号
+   * @default 0
+   */
+  initialNum?: number;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  mask?: boolean;
+  /**
+   * 引导框的类型
+   * @default popup
+   */
+  mode?: 'popup' | 'dialog';
+  /**
+   * 透传 下一步按钮 的全部属性
+   * @default{ content: '下一步', theme: 'primary' }
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 透传 上一步按钮 的全部属性
+   * @default{ content: '上一步', theme: 'primary' }
+   */
+  prevButtonProps?: ButtonProps;
+  /**
+   * 透传 跳过按钮 的全部属性
+   * @default { content: '跳过', theme: 'default' }
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。
+   */
+  steps?: Array<TdGuideStepProps>;
+  /**
+   * 当前步骤发生变化时触发
+   */
+  onChange?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+  /**
+   * 点击下一步时触发
+   */
+  onClickNextStep?: (next: number, current: number, total: number, context?: { e?: MouseEvent }) => void;
+  /**
+   * 点击上一步时触发
+   */
+  onClickPrevStep?: (prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void;
+  /**
+   * 点击完成按钮时触发
+   */
+  onFinish?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+  /**
+   * 点击跳过按钮时触发
+   */
+  onSkip?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+}
+
+export interface TdGuideStepProps {
+  /**
+   * 自定义内容，同 content
+   */
+  children?: string | TNode;
+  /**
+   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）
+   */
+  content?: string | TNode;
+  /**
+   * 当前步骤的描述内容
+   * @default ''
+   */
+  description?: string;
+  /**
+   * 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')
+   */
+  element: AttachNode;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  mask?: boolean;
+  /**
+   * 当前步骤引导框的类型
+   * @default popup
+   */
+  mode?: 'popup' | 'dialog';
+  /**
+   * 用于自定义当前引导框的下一步按钮的内容
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 引导框相对于高亮元素出现的位置
+   * @default top
+   */
+  placement?: StepPopupPlacement | StepDialogPlacement;
+  /**
+   * 用于自定义当前引导框的上一步按钮的内容
+   */
+  prevButtonProps?: ButtonProps;
+  /**
+   * 用于自定义当前步骤引导框的跳过按钮的内容
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 覆盖引导框的类名
+   * @default ''
+   */
+  stepOverlayClass?: string;
+  /**
+   * 当前步骤的标题内容
+   * @default ''
+   */
+  title?: string;
+}
+
+export type StepPopupPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom';
+
+export type StepDialogPlacement = 'top' | 'center';
+
+export type CrossProps = Pick<
+  TdGuideStepProps,
+  'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'mask'
+>;
diff --git a/src/guide/utils/elementInViewport.ts b/src/guide/utils/elementInViewport.ts
new file mode 100644
index 0000000000..8a0fd47677
--- /dev/null
+++ b/src/guide/utils/elementInViewport.ts
@@ -0,0 +1,18 @@
+/**
+ * Check to see if the element is in the viewport or not
+ * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+ *
+ * @api private
+ * @method _elementInViewport
+ * @param {Object} el
+ */
+export default function elementInViewport(el) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom + 80 <= window.innerHeight && // add 80 to get the text right
+    rect.right <= window.innerWidth
+  );
+}
diff --git a/src/guide/utils/getElmInfo.ts b/src/guide/utils/getElmInfo.ts
new file mode 100644
index 0000000000..b9c73b4203
--- /dev/null
+++ b/src/guide/utils/getElmInfo.ts
@@ -0,0 +1,32 @@
+/**
+ * 获取元素在页面中为位置信息
+ * @param element：
+ * @returns {top: number, left: number}
+ */
+export function elmPosition(element: HTMLElement) {
+  const { body } = document;
+  const docEl = document.documentElement;
+  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+  const x = element.getBoundingClientRect();
+
+  return {
+    top: x.top + scrollTop - element.clientTop,
+    left: x.left + scrollLeft - element.clientLeft,
+  };
+}
+
+/**
+ * 获取元素本身的宽高
+ * @param element
+ * @returns
+ */
+export function elmRect(element: HTMLElement) {
+  const x = element.getBoundingClientRect();
+
+  return {
+    width: x.width,
+    height: x.height,
+  };
+}
diff --git a/src/guide/utils/getOffset.ts b/src/guide/utils/getOffset.ts
new file mode 100644
index 0000000000..60ef0311a2
--- /dev/null
+++ b/src/guide/utils/getOffset.ts
@@ -0,0 +1,52 @@
+import getPropValue from './getPropValue';
+import isFixed from './isFixed';
+
+/**
+ * Get an element position on the page relative to another element (or body)
+ * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
+ *
+ * @api private
+ * @method getOffset
+ * @param {Object} element
+ * @param {Object} relativeEl
+ * @returns Element's position info
+ */
+export default function getOffset(element: any, relativeEl: any) {
+  const { body } = document;
+  const docEl = document.documentElement;
+  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+  relativeEl = relativeEl || body;
+
+  const x = element.getBoundingClientRect();
+  const xr = relativeEl.getBoundingClientRect();
+  const relativeElPosition = getPropValue(relativeEl, 'position');
+
+  const obj = {
+    width: x.width,
+    height: x.height,
+  };
+
+  if (
+    (relativeEl.tagName.toLowerCase() !== 'body' && relativeElPosition === 'relative') ||
+    relativeElPosition === 'sticky'
+  ) {
+    // when the container of our target element is _not_ body and has either "relative" or "sticky" position, we should not
+    // consider the scroll position but we need to include the relative x/y of the container element
+    return Object.assign(obj, {
+      top: x.top - xr.top,
+      left: x.left - xr.left,
+    });
+  }
+  if (isFixed(element)) {
+    return Object.assign(obj, {
+      top: x.top,
+      left: x.left,
+    });
+  }
+  return Object.assign(obj, {
+    top: x.top + scrollTop,
+    left: x.left + scrollLeft,
+  });
+}
diff --git a/src/guide/utils/getPropValue.ts b/src/guide/utils/getPropValue.ts
new file mode 100644
index 0000000000..d2840c6e46
--- /dev/null
+++ b/src/guide/utils/getPropValue.ts
@@ -0,0 +1,25 @@
+/**
+ * Get an element CSS property on the page
+ *
+ * @api private
+ * @method _getPropValue
+ * @param {Object} element
+ * @param {String} propName
+ * @returns string property value
+ */
+export default function getPropValue(element: any, propName: any) {
+  let propValue = '';
+  if (element.currentStyle) {
+    // IE
+    propValue = element.currentStyle[propName];
+  } else if (document.defaultView && document.defaultView.getComputedStyle) {
+    // Others
+    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
+  }
+
+  // Prevent exception in IE
+  if (propValue && propValue.toLowerCase) {
+    return propValue.toLowerCase();
+  }
+  return propValue;
+}
diff --git a/src/guide/utils/getScrollParent.ts b/src/guide/utils/getScrollParent.ts
new file mode 100644
index 0000000000..8af95f7dcf
--- /dev/null
+++ b/src/guide/utils/getScrollParent.ts
@@ -0,0 +1,23 @@
+/**
+ * Find the nearest scrollable parent
+ * @param Element element
+ * @return Element
+ */
+export default function getScrollParent(element: any) {
+  let style = window.getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(auto|scroll)/;
+
+  if (style.position === 'fixed') return document.body;
+
+  for (let parent = element; parent.parentElement; ) {
+    parent = parent.parentElement;
+    style = window.getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+  }
+
+  return document.body;
+}
diff --git a/src/guide/utils/getTargetElm.ts b/src/guide/utils/getTargetElm.ts
new file mode 100644
index 0000000000..89371422cf
--- /dev/null
+++ b/src/guide/utils/getTargetElm.ts
@@ -0,0 +1,11 @@
+export default function getTargetElm(targetElm: unknown): HTMLElement {
+  if (typeof targetElm === 'string') {
+    const targetElement = document.querySelector(targetElm);
+    if (targetElement) {
+      return targetElement as HTMLElement;
+    }
+    throw new Error('There is no element with given selector.');
+  } else {
+    return document.body;
+  }
+}
diff --git a/src/guide/utils/getWindowSize.ts b/src/guide/utils/getWindowSize.ts
new file mode 100644
index 0000000000..fb757c4ef9
--- /dev/null
+++ b/src/guide/utils/getWindowSize.ts
@@ -0,0 +1,15 @@
+/**
+ * Provides a cross-browser way to get the screen dimensions
+ * via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
+ *
+ * @api private
+ * @method _getWinSize
+ * @returns {Object} width and height attributes
+ */
+export default function getWinSize() {
+  if (window.innerWidth !== undefined) {
+    return { width: window.innerWidth, height: window.innerHeight };
+  }
+  const D = document.documentElement;
+  return { width: D.clientWidth, height: D.clientHeight };
+}
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/guide/utils/isFixed.ts b/src/guide/utils/isFixed.ts
new file mode 100644
index 0000000000..99f0f9317c
--- /dev/null
+++ b/src/guide/utils/isFixed.ts
@@ -0,0 +1,23 @@
+import getPropValue from './getPropValue';
+
+/**
+ * Checks to see if target element (or parents) position is fixed or not
+ *
+ * @api private
+ * @method _isFixed
+ * @param {Object} element
+ * @returns Boolean
+ */
+export default function isFixed(element: any): Boolean {
+  const p = element.parentNode;
+
+  if (!p || p.nodeName === 'HTML') {
+    return false;
+  }
+
+  if (getPropValue(element, 'position') === 'fixed') {
+    return true;
+  }
+
+  return isFixed(p);
+}
diff --git a/src/guide/utils/scrollTo.ts b/src/guide/utils/scrollTo.ts
new file mode 100644
index 0000000000..122c9ec660
--- /dev/null
+++ b/src/guide/utils/scrollTo.ts
@@ -0,0 +1,25 @@
+import getWindowSize from './getWindowSize';
+import elementInViewport from './elementInViewport';
+
+/**
+ * To change the scroll of `window` after highlighting an element
+ *
+ * @api private
+ * @param {Object} element
+ */
+export default function scrollTo(element) {
+  const rect = element.getBoundingClientRect();
+
+  if (!elementInViewport(element)) {
+    const winHeight = getWindowSize().height;
+    const top = rect.bottom - (rect.bottom - rect.top);
+
+    if (top < 0 || element.clientHeight > winHeight) {
+      window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2)); // 30px padding from edge to look nice
+
+      // Scroll down
+    } else {
+      window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2)); // 30px padding from edge to look nice
+    }
+  }
+}
diff --git a/src/guide/utils/setStyle.ts b/src/guide/utils/setStyle.ts
new file mode 100644
index 0000000000..c68a4aaf02
--- /dev/null
+++ b/src/guide/utils/setStyle.ts
@@ -0,0 +1,24 @@
+/**
+ * Sets the style of an DOM element
+ *
+ * @param {Object} element
+ * @param {Object|string} style
+ * @return null
+ */
+export default function setStyle(element: any, style: any) {
+  let cssText = '';
+
+  if (element.style.cssText) {
+    cssText += element.style.cssText;
+  }
+
+  if (typeof style === 'string') {
+    cssText += style;
+  } else {
+    for (const rule in style) {
+      cssText += `${rule}:${style[rule]};`;
+    }
+  }
+
+  element.style.cssText = cssText;
+}

From cbd49e4467c9175127bd0395e32eff045b093ca9 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sun, 21 Aug 2022 20:03:55 +0800
Subject: [PATCH 04/48] feat(guide): event params and current

---
 examples/guide/demos/guide.vue | 56 +++++++++++++++++++++++-----------
 src/guide/guide.tsx            | 50 +++++++++++++++++++-----------
 2 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 5028d7ff6d..955105f14c 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -1,42 +1,55 @@
 <template>
   <div class="guide-wrap-demo">
-    <t-button @click="clickNextStep">新手引导</t-button>
+    <t-button @click="handelStart">新手引导</t-button>
     <div id="guide1" class="guide-item">guide1</div>
     <div id="guide2" class="guide-item">guide2</div>
     <div id="guide3" class="guide-item">guide3</div>
     <div id="guide4" class="guide-item">guide4</div>
     <t-guide
-      :current="current"
+      v-model="current"
       :steps="steps"
-      @click-prev-step="clickPrevStep"
-      @click-next-step="clickNextStep"
-      @finish="onFinish"
+      @change="handleChange"
+      @click-prev-step="handelClickPrevStep"
+      @click-next-step="handleClickNextStep"
+      @finish="handleFinish"
+      @skip="handleSkip"
     />
   </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 
+const steps = [
+  { element: '#guide1' },
+  { element: '#guide2', mode: 'dialog' },
+  { element: '#guide3' },
+  { element: '#guide4' },
+];
+
 const current = ref(-1);
 
-const clickPrevStep = () => {
-  current.value -= 1;
+const handelStart = () => {
+  current.value = 0;
 };
 
-const clickNextStep = () => {
-  current.value += 1;
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
 };
 
-const onFinish = () => {
-  console.log('完成');
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
 };
 
-const steps = [
-  { element: '#guide1' },
-  { element: '#guide2' },
-  { element: '#guide3' },
-  { element: '#guide4', mode: 'dialog' },
-];
+const handleFinish = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  console.log(current, total, context);
+};
 </script>
 <style scoped>
 .guide-item {
@@ -52,13 +65,20 @@ const steps = [
 }
 
 #guide2 {
+  margin-top: 200px;
+  margin-left: 20%;
+  width: 160px;
+  height: 160px;
+}
+
+#guide3 {
   margin-top: 400px;
   margin-left: 80%;
   width: 200px;
   height: 200px;
 }
 
-#guide3 {
+#guide4 {
   margin-top: 1400px;
   margin-left: 20%;
   width: 400px;
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index c13abaaa21..2d0aea6b90 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -11,7 +11,7 @@ import TransferDom from '../utils/transfer-dom';
 
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
-import useDefaultValue from '../hooks/useDefaultValue';
+import useVModel from '../hooks/useVModel';
 
 import Button from '../button';
 import Popup from '../popup';
@@ -25,7 +25,7 @@ export default defineComponent({
   directives: {
     TransferDom,
   },
-  props,
+  props: { ...props },
   setup(props) {
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
@@ -34,9 +34,9 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('guide');
     const { SIZE } = useCommonClassName();
 
-    const { current, hideCounter, hidePrev, hideSkip, steps } = toRefs(props);
+    const { current, modelValue, hideCounter, hidePrev, hideSkip, steps } = toRefs(props);
 
-    const [innerCurrent, setInnerCurrent] = useDefaultValue(current, props.defaultCurrent, props.onChange, 'current');
+    const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, props.onChange);
 
     // 覆盖层，用于覆盖所有元素
     // const overlayLayer = ref<JSX.Element>();
@@ -56,6 +56,8 @@ export default defineComponent({
     const dialogRef = ref<HTMLElement>();
     // 是否开始展示
     const actived = ref<boolean>(false);
+    // 步骤总数
+    const stepsTotal = computed(() => steps.value.length);
     // 当前步骤的信息
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
 
@@ -109,25 +111,28 @@ export default defineComponent({
       }
     };
 
-    const handleSkip = () => {
+    const handleSkip = (e: MouseEvent) => {
       actived.value = false;
-      setInnerCurrent(-1);
+      setInnerCurrent(-1, stepsTotal.value - 1, { e });
       destoryTooltipElm();
-      props.onSkip?.();
+      props.onSkip?.(-1, stepsTotal.value, { e });
     };
-    const handlePrev = () => {
-      setInnerCurrent(innerCurrent.value - 1);
-      props.onClickPrevStep?.();
+
+    const handlePrev = (e: MouseEvent) => {
+      setInnerCurrent(innerCurrent.value - 1, stepsTotal.value - 1, { e });
+      props.onClickPrevStep?.(innerCurrent.value, innerCurrent.value - 1, stepsTotal.value, { e });
     };
-    const handleNext = () => {
-      setInnerCurrent(innerCurrent.value + 1);
-      props.onClickNextStep?.();
+
+    const handleNext = (e: MouseEvent) => {
+      setInnerCurrent(innerCurrent.value + 1, stepsTotal.value - 1, { e });
+      props.onClickNextStep?.(innerCurrent.value, innerCurrent.value + 1, stepsTotal.value, { e });
     };
-    const handleFinish = () => {
+
+    const handleFinish = (e: MouseEvent) => {
       actived.value = false;
-      setInnerCurrent(-1);
+      setInnerCurrent(-1, stepsTotal.value - 1, { e });
       destoryTooltipElm();
-      props.onFinish?.();
+      props.onFinish?.(-1, stepsTotal.value - 1, { e });
     };
 
     watch(innerCurrent, (val) => {
@@ -135,7 +140,18 @@ export default defineComponent({
         actived.value = true;
         showGuide();
       } else {
-        console.info('当前引导的步骤', val + 1);
+        actived.value = false;
+        console.info('当前引导的步骤', val);
+      }
+    });
+
+    onMounted(() => {
+      if (innerCurrent.value >= 0 && innerCurrent.value < stepsTotal.value) {
+        actived.value = true;
+        showGuide();
+      } else {
+        actived.value = false;
+        console.info('当前引导的步骤', innerCurrent.value);
       }
     });
 

From 0423c6fca83d8f47809c08dbc6311038702e81f4 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sun, 21 Aug 2022 20:47:07 +0800
Subject: [PATCH 05/48] feat(guide): action button props

---
 examples/guide/demos/guide.vue | 25 +++++++++++++---
 src/_common                    |  2 +-
 src/guide/guide.tsx            | 52 +++++++++++++++++++++-------------
 3 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 955105f14c..af71582773 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -8,6 +8,7 @@
     <t-guide
       v-model="current"
       :steps="steps"
+      :finish-button-props="{ content: '自定义完成' }"
       @change="handleChange"
       @click-prev-step="handelClickPrevStep"
       @click-next-step="handleClickNextStep"
@@ -20,10 +21,26 @@
 import { ref } from 'vue';
 
 const steps = [
-  { element: '#guide1' },
-  { element: '#guide2', mode: 'dialog' },
-  { element: '#guide3' },
-  { element: '#guide4' },
+  {
+    element: '#guide1',
+    title: '新手引导标题',
+    description: '新手引导的说明文案。',
+    nextButtonProps: { content: '自定义下一步', theme: 'success' },
+  },
+  {
+    element: '#guide2',
+    title: '新手引导标题',
+    description: '新手引导的说明文案。',
+    mode: 'dialog',
+    prevButtonProps: { content: '自定义上一步', theme: 'success' },
+  },
+  {
+    element: '#guide3',
+    title: '新手引导标题',
+    description: '新手引导的说明文案。',
+    skipButtonProps: { content: '自定义跳过', variant: 'outline' },
+  },
+  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。' },
 ];
 
 const current = ref(-1);
diff --git a/src/_common b/src/_common
index 3eeba5e0b7..64657e710f 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 3eeba5e0b7d40420090e6a8e973d61f7ff672236
+Subproject commit 64657e710f6c91422b80582588f476056c3508b2
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 2d0aea6b90..25b57b4228 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -13,11 +13,11 @@ import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfi
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 import useVModel from '../hooks/useVModel';
 
-import Button from '../button';
+import Button, { TdButtonProps } from '../button';
 import Popup from '../popup';
 import Dialog from '../dialog';
 
-import { TdGuideProps, TdGuideStepProps, CrossProps } from './type';
+import { TdGuideProps, TdGuideStepProps, CrossProps, StepDialogPlacement } from './type';
 import { defalutCrossProps, tooltipZIndex } from './const';
 
 export default defineComponent({
@@ -199,9 +199,8 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleSkip}
-              >
-                跳过
-              </Button>
+                {...(getCurrentCrossProps('skipButtonProps') as TdButtonProps)}
+              />
             )}
             {!hidePrev.value && !isFirst && (
               <Button
@@ -210,9 +209,8 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handlePrev}
-              >
-                上一步
-              </Button>
+                {...(getCurrentCrossProps('prevButtonProps') as TdButtonProps)}
+              />
             )}
             {!isLast && (
               <Button
@@ -221,9 +219,8 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleNext}
-              >
-                下一步
-              </Button>
+                {...(getCurrentCrossProps('nextButtonProps') as TdButtonProps)}
+              />
             )}
             {isLast && (
               <Button
@@ -232,17 +229,25 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleFinish}
-              >
-                完成
-              </Button>
+                {...(props.finishButtonProps as TdButtonProps)}
+              />
             )}
           </div>
         );
       };
 
+      const renderTooltipBody = () => {
+        const title = <div class={`${COMPONENT_NAME.value}__title`}>{currentStepInfo.value.title}</div>;
+        const desc = <div class={`${COMPONENT_NAME.value}__desc`}>{currentStepInfo.value.description}</div>;
+        return (
+          <>
+            {title}
+            {desc}
+          </>
+        );
+      };
+
       const renderPopupContent = () => {
-        const title = <div class={`${COMPONENT_NAME.value}__title`}>标题</div>;
-        const desc = <div class={`${COMPONENT_NAME.value}__desc`}>描述</div>;
         const action = (
           <div class={`${COMPONENT_NAME.value}__footer--popup`}>
             {renderCounter()}
@@ -252,15 +257,21 @@ export default defineComponent({
 
         return (
           <div class={`${COMPONENT_NAME.value}__tooltip`}>
-            {title}
-            {desc}
+            {renderTooltipBody()}
             {action}
           </div>
         );
       };
 
       const renderReferenceLayer = () => (
-        <Popup visible={true} v-slots={{ content: renderPopupContent }} show-arrow zIndex={tooltipZIndex}>
+        <Popup
+          visible={true}
+          v-slots={{ content: renderPopupContent }}
+          show-arrow
+          zIndex={tooltipZIndex}
+          overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
+          placement={currentStepInfo.value.placement}
+        >
           <div ref={referenceLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__reference`} />
         </Popup>
       );
@@ -285,8 +296,9 @@ export default defineComponent({
             footer={false}
             closeBtn={false}
             zIndex={tooltipZIndex}
+            placement={currentStepInfo.value.placement as StepDialogPlacement}
           >
-            <p>This is a dialog</p>
+            {renderTooltipBody()}
             <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
               {renderCounter()}
               {renderAction('dialog')}

From 401739d1082e9ad7376f82d9cba5befc33a7fb16 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sun, 21 Aug 2022 21:10:46 +0800
Subject: [PATCH 06/48] feat(guide): mask props

---
 examples/guide/demos/guide.vue | 16 +++++++++++++---
 src/_common                    |  2 +-
 src/guide/guide.tsx            | 11 +++++++----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index af71582773..8624804f22 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -5,6 +5,7 @@
     <div id="guide2" class="guide-item">guide2</div>
     <div id="guide3" class="guide-item">guide3</div>
     <div id="guide4" class="guide-item">guide4</div>
+    <div id="guide5" class="guide-item">guide5</div>
     <t-guide
       v-model="current"
       :steps="steps"
@@ -31,16 +32,18 @@ const steps = [
     element: '#guide2',
     title: '新手引导标题',
     description: '新手引导的说明文案。',
-    mode: 'dialog',
     prevButtonProps: { content: '自定义上一步', theme: 'success' },
   },
   {
     element: '#guide3',
     title: '新手引导标题',
     description: '新手引导的说明文案。',
+    mode: 'dialog',
     skipButtonProps: { content: '自定义跳过', variant: 'outline' },
   },
-  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。' },
+
+  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false },
+  { element: '#guide5', title: '新手引导标题', description: '新手引导的说明文案。' },
 ];
 
 const current = ref(-1);
@@ -96,8 +99,15 @@ const handleSkip = (current, total, context) => {
 }
 
 #guide4 {
+  margin-top: 600px;
+  margin-left: 10%;
+  width: 300px;
+  height: 300px;
+}
+
+#guide5 {
   margin-top: 1400px;
-  margin-left: 20%;
+  margin-left: 50%;
   width: 400px;
   height: 400px;
 }
diff --git a/src/_common b/src/_common
index 64657e710f..3e10d09c78 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 64657e710f6c91422b80582588f476056c3508b2
+Subproject commit 3e10d09c78b53f889443222197c7d911beb5c12b
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 25b57b4228..f0908e850d 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
 
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = (propsName: keyof CrossProps) =>
-      currentStepInfo.value[propsName] || props[propsName] || defalutCrossProps[propsName];
+      currentStepInfo.value[propsName] ?? props[propsName] ?? defalutCrossProps[propsName];
     // 当前是否为 popup
     const isPopup = computed(() => getCurrentCrossProps('mode') === 'popup');
 
@@ -160,9 +160,12 @@ export default defineComponent({
         <div ref={overlayLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__overlay`} />
       );
 
-      const renderHighlightLayer = () => (
-        <div ref={highlightLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__highlight`} />
-      );
+      const renderHighlightLayer = () => {
+        const highlightClass = `${COMPONENT_NAME.value}__highlight`;
+        const isMask = getCurrentCrossProps('mask');
+        const classes = [highlightClass, `${highlightClass}--${isMask ? 'mask' : 'nomask'}`];
+        return <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} />;
+      };
 
       const renderCounter = () => {
         const stepsLength = props.steps.length;

From 44070515c9c16b77b537de505fd12b67c55c5520 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sun, 21 Aug 2022 21:29:52 +0800
Subject: [PATCH 07/48] feat(guide): counter slots

---
 examples/guide/demos/guide.vue |  7 +++++--
 src/guide/guide.tsx            | 27 ++++++++++++++++-----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 8624804f22..91d4f2aa7e 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -15,7 +15,9 @@
       @click-next-step="handleClickNextStep"
       @finish="handleFinish"
       @skip="handleSkip"
-    />
+    >
+      <template #counter="{ current, total }"> {{ current }}/{{ total }} </template>
+    </t-guide>
   </div>
 </template>
 <script setup>
@@ -27,6 +29,7 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案。',
     nextButtonProps: { content: '自定义下一步', theme: 'success' },
+    placement: 'right',
   },
   {
     element: '#guide2',
@@ -42,7 +45,7 @@ const steps = [
     skipButtonProps: { content: '自定义跳过', variant: 'outline' },
   },
 
-  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false },
+  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false, placement: 'bottom' },
   { element: '#guide5', title: '新手引导标题', description: '新手引导的说明文案。' },
 ];
 
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index f0908e850d..fa213e3941 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -168,29 +168,34 @@ export default defineComponent({
       };
 
       const renderCounter = () => {
-        const stepsLength = props.steps.length;
+        const popupSlotCounter = renderTNodeJSX('counter', {
+          params: { total: stepsTotal.value, current: innerCurrent.value },
+        });
+
         const popupDefaultCounter = (
           <div class={`${COMPONENT_NAME.value}__counter`}>
-            <span>
-              {innerCurrent.value + 1}/{stepsLength}
-            </span>
+            {popupSlotCounter || (
+              <span>
+                {innerCurrent.value + 1}/{stepsTotal.value}
+              </span>
+            )}
           </div>
         );
         const dialogDefaultCounter = (
           <div class={`${COMPONENT_NAME.value}__counter`}>
-            {props.steps.map((_, i) => (
-              <span
-                class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
-              ></span>
-            ))}
+            {popupSlotCounter ||
+              props.steps.map((_, i) => (
+                <span
+                  class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
+                ></span>
+              ))}
           </div>
         );
         return <>{!hideCounter.value && (isPopup.value ? popupDefaultCounter : dialogDefaultCounter)}</>;
       };
 
       const renderAction = (mode: TdGuideProps['mode']) => {
-        const stepsLength = props.steps.length;
-        const isLast = innerCurrent.value === stepsLength - 1;
+        const isLast = innerCurrent.value === stepsTotal.value - 1;
         const isFirst = innerCurrent.value === 0;
         const buttonSize = mode === 'popup' ? 'small' : 'medium';
         return (

From 1ec36e8710406d0362f0982546bdd62813ff4d4e Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 22 Aug 2022 14:19:50 +0800
Subject: [PATCH 08/48] feat(guide): guide dialog mode

---
 .vscode/settings.json          |   2 +-
 examples/guide/demos/guide.vue |   2 +-
 src/_common                    |   2 +-
 src/guide/guide.tsx            | 109 +++++++++++++++++++++++++--------
 src/guide/type.ts              |   5 ++
 src/guide/utils/scrollTo.ts    |   2 +-
 6 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a6a2fd5fdb..0e6b698cbf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,7 +7,7 @@
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascriptreact]": {
     "editor.formatOnSave": true,
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 91d4f2aa7e..05800632d5 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -40,7 +40,7 @@ const steps = [
   {
     element: '#guide3',
     title: '新手引导标题',
-    description: '新手引导的说明文案。',
+    description: '此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。',
     mode: 'dialog',
     skipButtonProps: { content: '自定义跳过', variant: 'outline' },
   },
diff --git a/src/_common b/src/_common
index 3e10d09c78..d3b4169001 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 3e10d09c78b53f889443222197c7d911beb5c12b
+Subproject commit d3b41690015e05b406ce6c6a5fbb6121b5d29976
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index fa213e3941..7b8c325fa5 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -8,6 +8,7 @@ import getTargetElm from './utils/getTargetElm';
 import scrollTo from './utils/scrollTo';
 
 import TransferDom from '../utils/transfer-dom';
+import { addClass, removeClass } from '../utils/dom';
 
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
@@ -32,6 +33,7 @@ export default defineComponent({
 
     const classPrefix = usePrefixClass();
     const COMPONENT_NAME = usePrefixClass('guide');
+    const LOCK_CLASS = usePrefixClass('guide--lock');
     const { SIZE } = useCommonClassName();
 
     const { current, modelValue, hideCounter, hidePrev, hideSkip, steps } = toRefs(props);
@@ -53,13 +55,14 @@ export default defineComponent({
     // 下一个高亮的元素
     const nextHighlightLayerElm = ref<HTMLElement>();
     // dialog ref
-    const dialogRef = ref<HTMLElement>();
+    const dialogTooltipRef = ref<HTMLElement>();
     // 是否开始展示
     const actived = ref<boolean>(false);
     // 步骤总数
     const stepsTotal = computed(() => steps.value.length);
     // 当前步骤的信息
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
+    const scrollCache: number[] = [];
 
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = (propsName: keyof CrossProps) =>
@@ -77,6 +80,12 @@ export default defineComponent({
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
       const elementPosition = getOffset(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+      if (!isPopup.value) {
+        const _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft;
+        const _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+        elementPosition.left += _scrollLeft;
+        elementPosition.top += _scrollTop;
+      }
       setStyle(highlighLayer, {
         width: `${elementPosition.width}px`,
         height: `${elementPosition.height}px`,
@@ -99,22 +108,44 @@ export default defineComponent({
 
     const destoryTooltipElm = () => {
       referenceLayerRef.value?.parentNode.removeChild(referenceLayerRef.value);
-      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
-      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
+    };
+
+    const showDialogGuide = () => {
+      nextTick(() => {
+        const currentElement = dialogTooltipRef.value;
+        nextHighlightLayerElm.value = currentElement;
+        scrollParentToElement(nextHighlightLayerElm.value);
+        setHighlightLayerPosition(highlightLayerRef.value);
+        scrollTo(nextHighlightLayerElm.value);
+        currentHighlightLayerElm.value = currentElement;
+      });
+    };
+
+    const destoryDialogTooltipElm = () => {
+      dialogTooltipRef.value?.parentNode.removeChild(dialogTooltipRef.value);
     };
 
     const showGuide = () => {
       if (isPopup.value) {
+        destoryDialogTooltipElm();
         showPopupGuide();
       } else {
         destoryTooltipElm();
+        showDialogGuide();
       }
     };
 
+    const destoryGuide = () => {
+      destoryTooltipElm();
+      destoryDialogTooltipElm();
+      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
+      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
+    };
+
     const handleSkip = (e: MouseEvent) => {
       actived.value = false;
       setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      destoryTooltipElm();
+      destoryGuide();
       props.onSkip?.(-1, stepsTotal.value, { e });
     };
 
@@ -131,16 +162,20 @@ export default defineComponent({
     const handleFinish = (e: MouseEvent) => {
       actived.value = false;
       setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      destoryTooltipElm();
+      destoryGuide();
       props.onFinish?.(-1, stepsTotal.value - 1, { e });
     };
 
     watch(innerCurrent, (val) => {
       if (val >= 0 && val < steps.value.length) {
-        actived.value = true;
+        if (!actived.value) {
+          actived.value = true;
+          addClass(document.body, LOCK_CLASS.value);
+        }
         showGuide();
       } else {
         actived.value = false;
+        removeClass(document.body, LOCK_CLASS.value);
         console.info('当前引导的步骤', val);
       }
     });
@@ -285,37 +320,57 @@ export default defineComponent({
       );
 
       const renderPopupGuide = () => {
+        return <>{renderReferenceLayer()}</>;
+      };
+
+      const renderDialogGuide = () => {
         return (
           <>
-            {renderOverlayLayer()}
-            {renderHighlightLayer()}
-            {renderReferenceLayer()}
+            <div v-transfer-dom="body" class={`${COMPONENT_NAME.value}__dialog`}>
+              <div
+                ref={dialogTooltipRef}
+                class={[`${COMPONENT_NAME.value}__reference`, `${COMPONENT_NAME.value}__reference--dialog`]}
+              >
+                {renderTooltipBody()}
+                <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
+                  {renderCounter()}
+                  {renderAction('dialog')}
+                </div>
+              </div>
+            </div>
           </>
         );
+        // todo 类型 infer
+        // return (
+        //   <Dialog
+        //     ref={dialogRef}
+        //     visible={true}
+        //     showOverlay={getCurrentCrossProps('mask') as boolean}
+        //     footer={false}
+        //     closeBtn={false}
+        //     zIndex={tooltipZIndex}
+        //     placement={currentStepInfo.value.placement as StepDialogPlacement}
+        //   >
+        //     {renderTooltipBody()}
+        //     <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
+        //       {renderCounter()}
+        //       {renderAction('dialog')}
+        //     </div>
+        //   </Dialog>
+        // );
       };
 
-      const renderDialogGuide = () => {
-        // todo 类型 infer
+      const renderGuide = () => {
         return (
-          <Dialog
-            ref={dialogRef}
-            visible={true}
-            showOverlay={getCurrentCrossProps('mask') as boolean}
-            footer={false}
-            closeBtn={false}
-            zIndex={tooltipZIndex}
-            placement={currentStepInfo.value.placement as StepDialogPlacement}
-          >
-            {renderTooltipBody()}
-            <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
-              {renderCounter()}
-              {renderAction('dialog')}
-            </div>
-          </Dialog>
+          <>
+            {renderOverlayLayer()}
+            {renderHighlightLayer()}
+            {getCurrentCrossProps('mode') === 'popup' ? renderPopupGuide() : renderDialogGuide()}
+          </>
         );
       };
 
-      return actived.value && (getCurrentCrossProps('mode') === 'popup' ? renderPopupGuide() : renderDialogGuide());
+      return <>{actived.value && renderGuide()}</>;
     };
   },
 });
diff --git a/src/guide/type.ts b/src/guide/type.ts
index 044634cb67..cf680b7488 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -181,3 +181,8 @@ export type CrossProps = Pick<
   TdGuideStepProps,
   'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'mask'
 >;
+
+export type ScrollTo = {
+  x: number;
+  y: number;
+};
diff --git a/src/guide/utils/scrollTo.ts b/src/guide/utils/scrollTo.ts
index 122c9ec660..ceef4f3e52 100644
--- a/src/guide/utils/scrollTo.ts
+++ b/src/guide/utils/scrollTo.ts
@@ -7,7 +7,7 @@ import elementInViewport from './elementInViewport';
  * @api private
  * @param {Object} element
  */
-export default function scrollTo(element) {
+export default function scrollTo(element: HTMLElement) {
   const rect = element.getBoundingClientRect();
 
   if (!elementInViewport(element)) {

From ad59e587ffb7f6ab390765d59111a7d52d03ba12 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 22 Aug 2022 17:20:13 +0800
Subject: [PATCH 09/48] feat(guide): guide dialog

---
 examples/guide/demos/guide.vue |  7 +++-
 src/_common                    |  2 +-
 src/guide/guide.tsx            | 63 ++++++++++++++++------------------
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 05800632d5..0b914b86ef 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -16,12 +16,13 @@
       @finish="handleFinish"
       @skip="handleSkip"
     >
-      <template #counter="{ current, total }"> {{ current }}/{{ total }} </template>
+      <template #counter="{ total }"> {{ current }}/{{ total }} </template>
     </t-guide>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue';
+import Base from './base.vue';
 
 const steps = [
   {
@@ -36,13 +37,17 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案。',
     prevButtonProps: { content: '自定义上一步', theme: 'success' },
+    content: Base,
   },
   {
     element: '#guide3',
     title: '新手引导标题',
     description: '此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。',
     mode: 'dialog',
+    // mask: false,
+    // placement: 'center',
     skipButtonProps: { content: '自定义跳过', variant: 'outline' },
+    content: '自定义内容',
   },
 
   { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false, placement: 'bottom' },
diff --git a/src/_common b/src/_common
index d3b4169001..354df8b741 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit d3b41690015e05b406ce6c6a5fbb6121b5d29976
+Subproject commit 354df8b7410d9db01e81a26250bc60000316d8d7
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 7b8c325fa5..4a5a5bf454 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -40,10 +40,6 @@ export default defineComponent({
 
     const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, props.onChange);
 
-    // 覆盖层，用于覆盖所有元素
-    // const overlayLayer = ref<JSX.Element>();
-    // 高亮层，用于高亮元素
-    // const highlightLayer = ref<JSX.Element>();
     // 覆盖层，用于覆盖所有元素
     const overlayLayerRef = ref<HTMLElement>();
     // 高亮层，用于高亮元素
@@ -282,12 +278,23 @@ export default defineComponent({
       const renderTooltipBody = () => {
         const title = <div class={`${COMPONENT_NAME.value}__title`}>{currentStepInfo.value.title}</div>;
         const desc = <div class={`${COMPONENT_NAME.value}__desc`}>{currentStepInfo.value.description}</div>;
-        return (
-          <>
-            {title}
-            {desc}
-          </>
-        );
+        const { content } = currentStepInfo.value;
+        let renderBody;
+        if (content) {
+          if (typeof content === 'string') {
+            renderBody = content;
+          } else {
+            renderBody = h(currentStepInfo.value.content);
+          }
+        } else {
+          renderBody = (
+            <>
+              {title}
+              {desc}
+            </>
+          );
+        }
+        return renderBody;
       };
 
       const renderPopupContent = () => {
@@ -324,13 +331,21 @@ export default defineComponent({
       };
 
       const renderDialogGuide = () => {
+        const wrapperClasses = [
+          `${COMPONENT_NAME.value}__wrapper`,
+          { [`${COMPONENT_NAME.value}__wrapper--center`]: currentStepInfo.value.placement === 'center' },
+        ];
+        const dialogClasses = [
+          `${COMPONENT_NAME.value}__reference`,
+          `${COMPONENT_NAME.value}__dialog`,
+          {
+            [currentStepInfo.value.stepOverlayClass]: !!currentStepInfo.value.stepOverlayClass,
+          },
+        ];
         return (
           <>
-            <div v-transfer-dom="body" class={`${COMPONENT_NAME.value}__dialog`}>
-              <div
-                ref={dialogTooltipRef}
-                class={[`${COMPONENT_NAME.value}__reference`, `${COMPONENT_NAME.value}__reference--dialog`]}
-              >
+            <div v-transfer-dom="body" class={wrapperClasses}>
+              <div ref={dialogTooltipRef} class={dialogClasses}>
                 {renderTooltipBody()}
                 <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
                   {renderCounter()}
@@ -340,24 +355,6 @@ export default defineComponent({
             </div>
           </>
         );
-        // todo 类型 infer
-        // return (
-        //   <Dialog
-        //     ref={dialogRef}
-        //     visible={true}
-        //     showOverlay={getCurrentCrossProps('mask') as boolean}
-        //     footer={false}
-        //     closeBtn={false}
-        //     zIndex={tooltipZIndex}
-        //     placement={currentStepInfo.value.placement as StepDialogPlacement}
-        //   >
-        //     {renderTooltipBody()}
-        //     <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
-        //       {renderCounter()}
-        //       {renderAction('dialog')}
-        //     </div>
-        //   </Dialog>
-        // );
       };
 
       const renderGuide = () => {

From 6547d2b66d1dfe965135060611df1905602195bd Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 22 Aug 2022 21:06:47 +0800
Subject: [PATCH 10/48] feat(guide): guide dialog nomask

---
 src/_common         | 2 +-
 src/guide/guide.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 354df8b741..11e82c133d 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 354df8b7410d9db01e81a26250bc60000316d8d7
+Subproject commit 11e82c133d25d22f11d775c8b0cd03dc4e376858
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 4a5a5bf454..9e9ae13645 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -339,6 +339,7 @@ export default defineComponent({
           `${COMPONENT_NAME.value}__reference`,
           `${COMPONENT_NAME.value}__dialog`,
           {
+            [`${COMPONENT_NAME.value}__dialog--nomask`]: !getCurrentCrossProps('mask'),
             [currentStepInfo.value.stepOverlayClass]: !!currentStepInfo.value.stepOverlayClass,
           },
         ];

From 6dfe5c6d5f497d027c1c46c422ee1ecd14f4e63e Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 22 Aug 2022 22:40:33 +0800
Subject: [PATCH 11/48] feat(guide): popup step content

---
 examples/guide/demos/base.vue  |  7 ++++
 examples/guide/demos/guide.vue |  2 +-
 src/guide/guide-step.tsx       | 19 +++++++++++
 src/guide/guide.tsx            | 60 +++++++++++++++++-----------------
 4 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 src/guide/guide-step.tsx

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index 19fac90317..410aa91eb6 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="t-loading-demo">
     <t-loading></t-loading>
+    <div class="desc">我是自定义的 popup 内容</div>
   </div>
 </template>
+
+<style>
+.desc {
+  color: #ffff;
+}
+</style>
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 0b914b86ef..a038474997 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -37,7 +37,7 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案。',
     prevButtonProps: { content: '自定义上一步', theme: 'success' },
-    content: Base,
+    // content: (h) => h(Base),
   },
   {
     element: '#guide3',
diff --git a/src/guide/guide-step.tsx b/src/guide/guide-step.tsx
new file mode 100644
index 0000000000..dfdbe2ac3d
--- /dev/null
+++ b/src/guide/guide-step.tsx
@@ -0,0 +1,19 @@
+import { defineComponent, onMounted, onUnmounted, ref, Fragment, Text, watch, PropType, VNode, Teleport } from 'vue';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { TdGuideStepProps } from './type';
+
+export const GuidePopupStepContent = defineComponent({
+  props: { content: [String, Function] as PropType<TdGuideStepProps['content']> },
+  setup() {
+    const renderTNodeJSX = useTNodeJSX();
+    const el = ref(null);
+
+    onMounted(() => {
+      const { parentNode } = el.value;
+      parentNode.parentNode.appendChild(el.value);
+      parentNode.parentNode.removeChild(parentNode);
+    });
+
+    return () => <div ref={el}>{renderTNodeJSX('content', 'default')}</div>;
+  },
+});
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 9e9ae13645..0b48ed0642 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -21,6 +21,8 @@ import Dialog from '../dialog';
 import { TdGuideProps, TdGuideStepProps, CrossProps, StepDialogPlacement } from './type';
 import { defalutCrossProps, tooltipZIndex } from './const';
 
+import { GuidePopupStepContent } from './guide-step';
+
 export default defineComponent({
   name: 'TGuide',
   directives: {
@@ -58,7 +60,6 @@ export default defineComponent({
     const stepsTotal = computed(() => steps.value.length);
     // 当前步骤的信息
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
-    const scrollCache: number[] = [];
 
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = (propsName: keyof CrossProps) =>
@@ -278,23 +279,12 @@ export default defineComponent({
       const renderTooltipBody = () => {
         const title = <div class={`${COMPONENT_NAME.value}__title`}>{currentStepInfo.value.title}</div>;
         const desc = <div class={`${COMPONENT_NAME.value}__desc`}>{currentStepInfo.value.description}</div>;
-        const { content } = currentStepInfo.value;
-        let renderBody;
-        if (content) {
-          if (typeof content === 'string') {
-            renderBody = content;
-          } else {
-            renderBody = h(currentStepInfo.value.content);
-          }
-        } else {
-          renderBody = (
-            <>
-              {title}
-              {desc}
-            </>
-          );
-        }
-        return renderBody;
+        return (
+          <>
+            {title}
+            {desc}
+          </>
+        );
       };
 
       const renderPopupContent = () => {
@@ -313,18 +303,28 @@ export default defineComponent({
         );
       };
 
-      const renderReferenceLayer = () => (
-        <Popup
-          visible={true}
-          v-slots={{ content: renderPopupContent }}
-          show-arrow
-          zIndex={tooltipZIndex}
-          overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
-          placement={currentStepInfo.value.placement}
-        >
-          <div ref={referenceLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__reference`} />
-        </Popup>
-      );
+      const renderReferenceLayer = () => {
+        const { content } = currentStepInfo.value;
+        let renderBody;
+        if (content) {
+          renderBody = () => <GuidePopupStepContent content={content} />;
+        } else {
+          renderBody = renderPopupContent;
+        }
+
+        return (
+          <Popup
+            visible={true}
+            v-slots={{ content: renderBody }}
+            show-arrow={!content}
+            zIndex={tooltipZIndex}
+            overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
+            placement={currentStepInfo.value.placement}
+          >
+            <div ref={referenceLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__reference`} />
+          </Popup>
+        );
+      };
 
       const renderPopupGuide = () => {
         return <>{renderReferenceLayer()}</>;

From 4e6d41a54072cc020aba1953dfacd00a0ba1168e Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 23 Aug 2022 11:38:10 +0800
Subject: [PATCH 12/48] feat(guide): highlighPadding and currentCrossProps type

---
 src/guide/guide-step-props.ts |  4 ++++
 src/guide/guide.tsx           | 22 +++++++++++-----------
 src/guide/props.ts            | 13 +++++++++----
 src/guide/type.ts             | 12 +++++++++++-
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts
index 07b3d1844d..7d6c89c0d2 100644
--- a/src/guide/guide-step-props.ts
+++ b/src/guide/guide-step-props.ts
@@ -26,6 +26,10 @@ export default {
     type: [String, Function] as PropType<TdGuideStepProps['element']>,
     required: true,
   },
+  /** 高亮框的 padding */
+  highlightPadding: {
+    type: Number,
+  },
   /** 当期步骤引导框的类型 */
   mode: {
     type: String as PropType<TdGuideStepProps['mode']>,
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 0b48ed0642..1f57229a00 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -62,11 +62,10 @@ export default defineComponent({
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
 
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
-    const getCurrentCrossProps = (propsName: keyof CrossProps) =>
+    const getCurrentCrossProps = <Key extends keyof CrossProps>(propsName: Key) =>
       currentStepInfo.value[propsName] ?? props[propsName] ?? defalutCrossProps[propsName];
     // 当前是否为 popup
     const isPopup = computed(() => getCurrentCrossProps('mode') === 'popup');
-
     // 滑动到元素位置
     const scrollParentToElement = (element: HTMLElement) => {
       const parent = getScrollParent(element);
@@ -83,11 +82,12 @@ export default defineComponent({
         elementPosition.left += _scrollLeft;
         elementPosition.top += _scrollTop;
       }
+      const highlightPadding = getCurrentCrossProps('highlightPadding');
       setStyle(highlighLayer, {
-        width: `${elementPosition.width}px`,
-        height: `${elementPosition.height}px`,
-        top: `${elementPosition.top}px`,
-        left: `${elementPosition.left}px`,
+        width: `${elementPosition.width + highlightPadding}px`,
+        height: `${elementPosition.height + highlightPadding}px`,
+        top: `${elementPosition.top - highlightPadding / 2}px`,
+        left: `${elementPosition.left - highlightPadding / 2}px`,
       });
     };
 
@@ -239,7 +239,7 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleSkip}
-                {...(getCurrentCrossProps('skipButtonProps') as TdButtonProps)}
+                {...getCurrentCrossProps('skipButtonProps')}
               />
             )}
             {!hidePrev.value && !isFirst && (
@@ -249,7 +249,7 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handlePrev}
-                {...(getCurrentCrossProps('prevButtonProps') as TdButtonProps)}
+                {...getCurrentCrossProps('prevButtonProps')}
               />
             )}
             {!isLast && (
@@ -259,7 +259,7 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleNext}
-                {...(getCurrentCrossProps('nextButtonProps') as TdButtonProps)}
+                {...getCurrentCrossProps('nextButtonProps')}
               />
             )}
             {isLast && (
@@ -269,7 +269,7 @@ export default defineComponent({
                 size={buttonSize}
                 variant="base"
                 onClick={handleFinish}
-                {...(props.finishButtonProps as TdButtonProps)}
+                {...props.finishButtonProps}
               />
             )}
           </div>
@@ -363,7 +363,7 @@ export default defineComponent({
           <>
             {renderOverlayLayer()}
             {renderHighlightLayer()}
-            {getCurrentCrossProps('mode') === 'popup' ? renderPopupGuide() : renderDialogGuide()}
+            {isPopup.value ? renderPopupGuide() : renderDialogGuide()}
           </>
         );
       };
diff --git a/src/guide/props.ts b/src/guide/props.ts
index 9c27cdee81..a05840f17b 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -28,7 +28,7 @@ export default {
   /** 透传 完成 的全部属性 */
   finishButtonProps: {
     type: Object as PropType<TdGuideProps['finishButtonProps']>,
-    default: { content: '完成', theme: 'primary' },
+    default: { content: '完成', theme: 'primary' } as TdGuideProps['skipButtonProps'],
   },
   /** 是否隐藏计数 */
   hideCounter: Boolean,
@@ -36,6 +36,11 @@ export default {
   hidePrev: Boolean,
   /** 是否隐藏跳过按钮 */
   hideSkip: Boolean,
+  /** 高亮框的 padding */
+  highlightPadding: {
+    type: Number,
+    default: 4,
+  },
   /** 起始序号 */
   initialNum: {
     type: Number,
@@ -58,17 +63,17 @@ export default {
   /** 透传 下一步按钮 的全部属性 */
   nextButtonProps: {
     type: Object as PropType<TdGuideProps['nextButtonProps']>,
-    default: { content: '下一步', theme: 'primary' },
+    default: { content: '下一步', theme: 'primary' } as TdGuideProps['skipButtonProps'],
   },
   /** 透传 上一步按钮 的全部属性 */
   prevButtonProps: {
     type: Object as PropType<TdGuideProps['prevButtonProps']>,
-    default: { content: '上一步', theme: 'primary' },
+    default: { content: '上一步', theme: 'primary' } as TdGuideProps['skipButtonProps'],
   },
   /** 透传 跳过按钮 的全部属性 */
   skipButtonProps: {
     type: Object as PropType<TdGuideProps['skipButtonProps']>,
-    default: { content: '跳过', theme: 'default' },
+    default: { content: '跳过', theme: 'default' } as TdGuideProps['skipButtonProps'],
   },
   /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。 */
   steps: {
diff --git a/src/guide/type.ts b/src/guide/type.ts
index cf680b7488..37c0ecb0ed 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -49,6 +49,11 @@ export interface TdGuideProps {
    * @default 0
    */
   initialNum?: number;
+  /**
+   * 高亮框的 padding
+   * @default 2
+   */
+  highlightPadding?: number;
   /**
    * 是否出现遮罩层
    * @default true
@@ -118,6 +123,11 @@ export interface TdGuideStepProps {
    * 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')
    */
   element: AttachNode;
+  /**
+   * 高亮框的 padding
+   * @default 2
+   */
+  highlightPadding?: number;
   /**
    * 是否出现遮罩层
    * @default true
@@ -179,7 +189,7 @@ export type StepDialogPlacement = 'top' | 'center';
 
 export type CrossProps = Pick<
   TdGuideStepProps,
-  'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'mask'
+  'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'mask' | 'highlightPadding'
 >;
 
 export type ScrollTo = {

From ab93cf487eb9e8a1025322bf9f03ade7a77a7907 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 26 Aug 2022 19:33:15 +0800
Subject: [PATCH 13/48] feat(guide): mask change to showOverlay

---
 src/guide/const/index.ts      |  2 +-
 src/guide/guide-step-props.ts |  5 +++++
 src/guide/guide.tsx           |  4 ++--
 src/guide/props.ts            | 10 +++++-----
 src/guide/type.ts             | 22 +++++++++++-----------
 5 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/guide/const/index.ts b/src/guide/const/index.ts
index 078b26fe7f..bc948ee6fe 100644
--- a/src/guide/const/index.ts
+++ b/src/guide/const/index.ts
@@ -1,7 +1,7 @@
 import { CrossProps } from '../type';
 
 export const defalutCrossProps: CrossProps = {
-  mask: true,
+  showOverlay: true,
   mode: 'popup',
 };
 
diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts
index 7d6c89c0d2..b7850b6b4f 100644
--- a/src/guide/guide-step-props.ts
+++ b/src/guide/guide-step-props.ts
@@ -56,6 +56,11 @@ export default {
   prevButtonProps: {
     type: Object as PropType<TdGuideStepProps['prevButtonProps']>,
   },
+  /** 是否出现遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
   /** 用于自定义当前步骤引导框的跳过按钮的内容 */
   skipButtonProps: {
     type: Object as PropType<TdGuideStepProps['skipButtonProps']>,
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 1f57229a00..298756b18f 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -194,8 +194,8 @@ export default defineComponent({
 
       const renderHighlightLayer = () => {
         const highlightClass = `${COMPONENT_NAME.value}__highlight`;
-        const isMask = getCurrentCrossProps('mask');
-        const classes = [highlightClass, `${highlightClass}--${isMask ? 'mask' : 'nomask'}`];
+        const showOverlay = getCurrentCrossProps('showOverlay');
+        const classes = [highlightClass, `${highlightClass}--${showOverlay ? 'mask' : 'nomask'}`];
         return <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} />;
       };
 
diff --git a/src/guide/props.ts b/src/guide/props.ts
index a05840f17b..f5a4024223 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -46,11 +46,6 @@ export default {
     type: Number,
     default: 0,
   },
-  /** 是否出现遮罩层 */
-  mask: {
-    type: Boolean,
-    default: true,
-  },
   /** 引导框的类型 */
   mode: {
     type: String as PropType<TdGuideProps['mode']>,
@@ -70,6 +65,11 @@ export default {
     type: Object as PropType<TdGuideProps['prevButtonProps']>,
     default: { content: '上一步', theme: 'primary' } as TdGuideProps['skipButtonProps'],
   },
+  /** 是否出现遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
   /** 透传 跳过按钮 的全部属性 */
   skipButtonProps: {
     type: Object as PropType<TdGuideProps['skipButtonProps']>,
diff --git a/src/guide/type.ts b/src/guide/type.ts
index 37c0ecb0ed..db876bbb33 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -54,11 +54,6 @@ export interface TdGuideProps {
    * @default 2
    */
   highlightPadding?: number;
-  /**
-   * 是否出现遮罩层
-   * @default true
-   */
-  mask?: boolean;
   /**
    * 引导框的类型
    * @default popup
@@ -74,6 +69,11 @@ export interface TdGuideProps {
    * @default{ content: '上一步', theme: 'primary' }
    */
   prevButtonProps?: ButtonProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
   /**
    * 透传 跳过按钮 的全部属性
    * @default { content: '跳过', theme: 'default' }
@@ -128,11 +128,6 @@ export interface TdGuideStepProps {
    * @default 2
    */
   highlightPadding?: number;
-  /**
-   * 是否出现遮罩层
-   * @default true
-   */
-  mask?: boolean;
   /**
    * 当前步骤引导框的类型
    * @default popup
@@ -155,6 +150,11 @@ export interface TdGuideStepProps {
    * 用于自定义当前引导框的上一步按钮的内容
    */
   prevButtonProps?: ButtonProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
   /**
    * 用于自定义当前步骤引导框的跳过按钮的内容
    */
@@ -189,7 +189,7 @@ export type StepDialogPlacement = 'top' | 'center';
 
 export type CrossProps = Pick<
   TdGuideStepProps,
-  'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'mask' | 'highlightPadding'
+  'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'showOverlay' | 'highlightPadding'
 >;
 
 export type ScrollTo = {

From d4c1b4265a0924156693bb0e79189526ac317f6b Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 26 Aug 2022 20:39:45 +0800
Subject: [PATCH 14/48] feat(guide): support highlightContent

---
 examples/guide/demos/guide.vue            |  5 +++--
 examples/guide/demos/highlightContent.vue | 18 ++++++++++++++++++
 src/guide/guide-step-props.ts             |  6 ++++++
 src/guide/guide-step.tsx                  |  9 +++++++++
 src/guide/guide.tsx                       | 17 +++++++++++++----
 src/guide/type.ts                         |  6 +++++-
 6 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 examples/guide/demos/highlightContent.vue

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index a038474997..274e33149f 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -23,6 +23,7 @@
 <script setup>
 import { ref } from 'vue';
 import Base from './base.vue';
+import HighlightContent from './highlightContent.vue';
 
 const steps = [
   {
@@ -37,7 +38,7 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案。',
     prevButtonProps: { content: '自定义上一步', theme: 'success' },
-    // content: (h) => h(Base),
+    highlightContent: (h) => h(HighlightContent),
   },
   {
     element: '#guide3',
@@ -51,7 +52,7 @@ const steps = [
   },
 
   { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false, placement: 'bottom' },
-  { element: '#guide5', title: '新手引导标题', description: '新手引导的说明文案。' },
+  { element: '#guide5', title: '新手引导标题', description: '新手引导的说明文案。', content: (h) => h(Base) },
 ];
 
 const current = ref(-1);
diff --git a/examples/guide/demos/highlightContent.vue b/examples/guide/demos/highlightContent.vue
new file mode 100644
index 0000000000..ce252f99fc
--- /dev/null
+++ b/examples/guide/demos/highlightContent.vue
@@ -0,0 +1,18 @@
+<template>
+  <!-- <div class="highligh"></div>
+   -->
+  <img
+    class="highligh"
+    src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
+    alt=""
+    srcset=""
+  />
+</template>
+
+<style>
+.highligh {
+  width: 200px;
+  border-end-start-radius: 50%;
+  border-top-right-radius: 50%;
+}
+</style>
diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts
index b7850b6b4f..40057aebd5 100644
--- a/src/guide/guide-step-props.ts
+++ b/src/guide/guide-step-props.ts
@@ -26,6 +26,12 @@ export default {
     type: [String, Function] as PropType<TdGuideStepProps['element']>,
     required: true,
   },
+  /**
+   * 用户定义高亮框(仅当 mode 为 popup 时生效)
+   */
+  highlightContent: {
+    type: [String, Function] as PropType<TdGuideStepProps['highlightContent']>,
+  },
   /** 高亮框的 padding */
   highlightPadding: {
     type: Number,
diff --git a/src/guide/guide-step.tsx b/src/guide/guide-step.tsx
index dfdbe2ac3d..de63633aca 100644
--- a/src/guide/guide-step.tsx
+++ b/src/guide/guide-step.tsx
@@ -17,3 +17,12 @@ export const GuidePopupStepContent = defineComponent({
     return () => <div ref={el}>{renderTNodeJSX('content', 'default')}</div>;
   },
 });
+
+export const GuideStepHighlightContent = defineComponent({
+  props: { highlightContent: [String, Function] as PropType<TdGuideStepProps['highlightContent']> },
+  setup() {
+    const renderTNodeJSX = useTNodeJSX();
+
+    return () => renderTNodeJSX('highlightContent', 'default');
+  },
+});
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 298756b18f..e0fac26647 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -10,7 +10,7 @@ import scrollTo from './utils/scrollTo';
 import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
 
-import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
+import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 import useVModel from '../hooks/useVModel';
 
@@ -21,7 +21,7 @@ import Dialog from '../dialog';
 import { TdGuideProps, TdGuideStepProps, CrossProps, StepDialogPlacement } from './type';
 import { defalutCrossProps, tooltipZIndex } from './const';
 
-import { GuidePopupStepContent } from './guide-step';
+import { GuidePopupStepContent, GuideStepHighlightContent } from './guide-step';
 
 export default defineComponent({
   name: 'TGuide',
@@ -76,6 +76,7 @@ export default defineComponent({
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
       const elementPosition = getOffset(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+
       if (!isPopup.value) {
         const _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft;
         const _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
@@ -196,7 +197,15 @@ export default defineComponent({
         const highlightClass = `${COMPONENT_NAME.value}__highlight`;
         const showOverlay = getCurrentCrossProps('showOverlay');
         const classes = [highlightClass, `${highlightClass}--${showOverlay ? 'mask' : 'nomask'}`];
-        return <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} />;
+        const { highlightContent } = currentStepInfo.value;
+
+        return highlightContent ? (
+          <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass}>
+            <GuideStepHighlightContent class={classes} highlightContent={highlightContent} />
+          </div>
+        ) : (
+          <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} />
+        );
       };
 
       const renderCounter = () => {
@@ -339,7 +348,7 @@ export default defineComponent({
           `${COMPONENT_NAME.value}__reference`,
           `${COMPONENT_NAME.value}__dialog`,
           {
-            [`${COMPONENT_NAME.value}__dialog--nomask`]: !getCurrentCrossProps('mask'),
+            [`${COMPONENT_NAME.value}__dialog--nomask`]: !getCurrentCrossProps('showOverlay'),
             [currentStepInfo.value.stepOverlayClass]: !!currentStepInfo.value.stepOverlayClass,
           },
         ];
diff --git a/src/guide/type.ts b/src/guide/type.ts
index db876bbb33..6e250c4cb9 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -111,7 +111,7 @@ export interface TdGuideStepProps {
    */
   children?: string | TNode;
   /**
-   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）
+   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效
    */
   content?: string | TNode;
   /**
@@ -123,6 +123,10 @@ export interface TdGuideStepProps {
    * 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')
    */
   element: AttachNode;
+  /**
+   * 用户定义高亮框(仅当 mode 为 popup 时生效)
+   */
+  highlightContent?: string | TNode;
   /**
    * 高亮框的 padding
    * @default 2

From b16b26d9ed8331125a5348578cdb0209fd114564 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 26 Aug 2022 20:50:53 +0800
Subject: [PATCH 15/48] feat(guide): support zIndex

---
 src/guide/guide.tsx | 23 +++++++++++++++--------
 src/guide/props.ts  |  5 +++++
 src/guide/type.ts   |  5 +++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index e0fac26647..7468e5d785 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -19,7 +19,7 @@ import Popup from '../popup';
 import Dialog from '../dialog';
 
 import { TdGuideProps, TdGuideStepProps, CrossProps, StepDialogPlacement } from './type';
-import { defalutCrossProps, tooltipZIndex } from './const';
+import { defalutCrossProps } from './const';
 
 import { GuidePopupStepContent, GuideStepHighlightContent } from './guide-step';
 
@@ -38,7 +38,7 @@ export default defineComponent({
     const LOCK_CLASS = usePrefixClass('guide--lock');
     const { SIZE } = useCommonClassName();
 
-    const { current, modelValue, hideCounter, hidePrev, hideSkip, steps } = toRefs(props);
+    const { current, modelValue, hideCounter, hidePrev, hideSkip, steps, zIndex } = toRefs(props);
 
     const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, props.onChange);
 
@@ -190,21 +190,27 @@ export default defineComponent({
 
     return () => {
       const renderOverlayLayer = () => (
-        <div ref={overlayLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__overlay`} />
+        <div
+          ref={overlayLayerRef}
+          v-transfer-dom="body"
+          class={`${COMPONENT_NAME.value}__overlay`}
+          style={{ zIndex: zIndex.value - 2 }}
+        />
       );
 
       const renderHighlightLayer = () => {
+        const style = { zIndex: zIndex.value - 1 };
         const highlightClass = `${COMPONENT_NAME.value}__highlight`;
         const showOverlay = getCurrentCrossProps('showOverlay');
         const classes = [highlightClass, `${highlightClass}--${showOverlay ? 'mask' : 'nomask'}`];
         const { highlightContent } = currentStepInfo.value;
 
         return highlightContent ? (
-          <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass}>
-            <GuideStepHighlightContent class={classes} highlightContent={highlightContent} />
+          <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass} style={style}>
+            <GuideStepHighlightContent class={classes} highlightContent={highlightContent} style={style} />
           </div>
         ) : (
-          <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} />
+          <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} style={style} />
         );
       };
 
@@ -326,7 +332,7 @@ export default defineComponent({
             visible={true}
             v-slots={{ content: renderBody }}
             show-arrow={!content}
-            zIndex={tooltipZIndex}
+            zIndex={zIndex.value}
             overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
             placement={currentStepInfo.value.placement}
           >
@@ -340,6 +346,7 @@ export default defineComponent({
       };
 
       const renderDialogGuide = () => {
+        const style = { zIndex: zIndex.value };
         const wrapperClasses = [
           `${COMPONENT_NAME.value}__wrapper`,
           { [`${COMPONENT_NAME.value}__wrapper--center`]: currentStepInfo.value.placement === 'center' },
@@ -354,7 +361,7 @@ export default defineComponent({
         ];
         return (
           <>
-            <div v-transfer-dom="body" class={wrapperClasses}>
+            <div v-transfer-dom="body" class={wrapperClasses} style={style}>
               <div ref={dialogTooltipRef} class={dialogClasses}>
                 {renderTooltipBody()}
                 <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
diff --git a/src/guide/props.ts b/src/guide/props.ts
index f5a4024223..5ac05d1275 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -79,6 +79,11 @@ export default {
   steps: {
     type: Array as PropType<TdGuideProps['steps']>,
   },
+  /** 提示框的层级 */
+  zIndex: {
+    type: Number,
+    default: 999999,
+  },
   /** 当前步骤发生变化时触发 */
   onChange: Function as PropType<TdGuideProps['onChange']>,
   /** 点击下一步时触发 */
diff --git a/src/guide/type.ts b/src/guide/type.ts
index 6e250c4cb9..b829d6947e 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -173,6 +173,11 @@ export interface TdGuideStepProps {
    * @default ''
    */
   title?: string;
+  /**
+   * 提示框的层级
+   * @default 999999
+   */
+  zIndex?: number;
 }
 
 export type StepPopupPlacement =

From caf1643a3986cab39b43bb263e008ad9be52e1fd Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sat, 27 Aug 2022 11:23:25 +0800
Subject: [PATCH 16/48] feat(guide): unified counter style

---
 examples/guide/demos/guide.vue |  2 +-
 src/_common                    |  2 +-
 src/guide/guide.tsx            | 43 +++++++++++++++++++---------------
 src/guide/props.ts             |  2 +-
 src/guide/utils/scrollTo.ts    | 14 +++++------
 5 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 274e33149f..b59cc0ae3e 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -16,7 +16,7 @@
       @finish="handleFinish"
       @skip="handleSkip"
     >
-      <template #counter="{ total }"> {{ current }}/{{ total }} </template>
+      <!-- <template #counter="{ total }"> {{ current }}/{{ total }} </template> -->
     </t-guide>
   </div>
 </template>
diff --git a/src/_common b/src/_common
index 11e82c133d..0a23114bad 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 11e82c133d25d22f11d775c8b0cd03dc4e376858
+Subproject commit 0a23114baddbce68c8b2178c7b58ac73189013f8
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 7468e5d785..d41d51ebe7 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -85,10 +85,10 @@ export default defineComponent({
       }
       const highlightPadding = getCurrentCrossProps('highlightPadding');
       setStyle(highlighLayer, {
-        width: `${elementPosition.width + highlightPadding}px`,
-        height: `${elementPosition.height + highlightPadding}px`,
-        top: `${elementPosition.top - highlightPadding / 2}px`,
-        left: `${elementPosition.left - highlightPadding / 2}px`,
+        width: `${elementPosition.width + highlightPadding * 2}px`,
+        height: `${elementPosition.height + highlightPadding * 2}px`,
+        top: `${elementPosition.top - highlightPadding}px`,
+        left: `${elementPosition.left - highlightPadding}px`,
       });
     };
 
@@ -200,9 +200,12 @@ export default defineComponent({
 
       const renderHighlightLayer = () => {
         const style = { zIndex: zIndex.value - 1 };
-        const highlightClass = `${COMPONENT_NAME.value}__highlight`;
+        const highlightClass = [
+          `${COMPONENT_NAME.value}__highlight`,
+          `${COMPONENT_NAME.value}__highlight--${isPopup.value ? 'popup' : 'dialog'}`,
+        ];
         const showOverlay = getCurrentCrossProps('showOverlay');
-        const classes = [highlightClass, `${highlightClass}--${showOverlay ? 'mask' : 'nomask'}`];
+        const classes = [...highlightClass, `${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
         const { highlightContent } = currentStepInfo.value;
 
         return highlightContent ? (
@@ -228,17 +231,17 @@ export default defineComponent({
             )}
           </div>
         );
-        const dialogDefaultCounter = (
-          <div class={`${COMPONENT_NAME.value}__counter`}>
-            {popupSlotCounter ||
-              props.steps.map((_, i) => (
-                <span
-                  class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
-                ></span>
-              ))}
-          </div>
-        );
-        return <>{!hideCounter.value && (isPopup.value ? popupDefaultCounter : dialogDefaultCounter)}</>;
+        // const dialogDefaultCounter = (
+        //   <div class={`${COMPONENT_NAME.value}__counter`}>
+        //     {popupSlotCounter ||
+        //       props.steps.map((_, i) => (
+        //         <span
+        //           class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
+        //         ></span>
+        //       ))}
+        //   </div>
+        // );
+        return <>{!hideCounter.value && popupDefaultCounter}</>;
       };
 
       const renderAction = (mode: TdGuideProps['mode']) => {
@@ -303,8 +306,9 @@ export default defineComponent({
       };
 
       const renderPopupContent = () => {
+        const footerClasses = [`${COMPONENT_NAME.value}__footer`, `${COMPONENT_NAME.value}__footer--popup`];
         const action = (
-          <div class={`${COMPONENT_NAME.value}__footer--popup`}>
+          <div class={footerClasses}>
             {renderCounter()}
             {renderAction('popup')}
           </div>
@@ -359,12 +363,13 @@ export default defineComponent({
             [currentStepInfo.value.stepOverlayClass]: !!currentStepInfo.value.stepOverlayClass,
           },
         ];
+        const footerClasses = [`${COMPONENT_NAME.value}__footer`, `${COMPONENT_NAME.value}__footer--popup`];
         return (
           <>
             <div v-transfer-dom="body" class={wrapperClasses} style={style}>
               <div ref={dialogTooltipRef} class={dialogClasses}>
                 {renderTooltipBody()}
-                <div class={`${COMPONENT_NAME.value}__footer--dialog`}>
+                <div class={footerClasses}>
                   {renderCounter()}
                   {renderAction('dialog')}
                 </div>
diff --git a/src/guide/props.ts b/src/guide/props.ts
index 5ac05d1275..a0087048a2 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -39,7 +39,7 @@ export default {
   /** 高亮框的 padding */
   highlightPadding: {
     type: Number,
-    default: 4,
+    default: 8,
   },
   /** 起始序号 */
   initialNum: {
diff --git a/src/guide/utils/scrollTo.ts b/src/guide/utils/scrollTo.ts
index ceef4f3e52..65f0c825ef 100644
--- a/src/guide/utils/scrollTo.ts
+++ b/src/guide/utils/scrollTo.ts
@@ -13,13 +13,13 @@ export default function scrollTo(element: HTMLElement) {
   if (!elementInViewport(element)) {
     const winHeight = getWindowSize().height;
     const top = rect.bottom - (rect.bottom - rect.top);
+    window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2));
 
-    if (top < 0 || element.clientHeight > winHeight) {
-      window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2)); // 30px padding from edge to look nice
-
-      // Scroll down
-    } else {
-      window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2)); // 30px padding from edge to look nice
-    }
+    // todo 先暂时保留这里的逻辑
+    // if (top < 0 || element.clientHeight > winHeight) {
+    //   window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2));
+    // } else {
+    //   window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2));
+    // }
   }
 }

From 03126bbd490a8c2e877f6b25905fafa0300de991 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sat, 27 Aug 2022 12:50:29 +0800
Subject: [PATCH 17/48] docs(guide): {content: 'xxx', theme:'xxx'}

---
 examples/guide/guide.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/guide/guide.md b/examples/guide/guide.md
index 89ddcbf51d..40452d8252 100644
--- a/examples/guide/guide.md
+++ b/examples/guide/guide.md
@@ -7,16 +7,16 @@
 counter | Slot / Function | - | 用于自定义渲染计数部分。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 current | Number | - | 当前步骤，即整个引导的进度。。支持语法糖 `v-model` 或 `v-model:current` | N
 defaultCurrent | Number | - | 当前步骤，即整个引导的进度。。非受控属性 | N
-finishButtonProps | Object | { content: '完成', theme: 'primary' } | 透传 完成 的全部属性。TS 类型：`ButtonProps` | N
+finishButtonProps | Object | `{ content: '完成', theme: 'primary' }` | 透传 完成 的全部属性。TS 类型：`ButtonProps` | N
 hideCounter | Boolean | false | 是否隐藏计数 | N
 hidePrev | Boolean | false | 是否隐藏上一步按钮 | N
 hideSkip | Boolean | false | 是否隐藏跳过按钮 | N
 initialNum | Number | 0 | 起始序号 | N
 mask | Boolean | true | 是否出现遮罩层 | N
 mode | String | popup | 引导框的类型。可选项：popup/dialog | N
-nextButtonProps | Object | { content: '下一步', theme: 'primary' } | 透传 下一步按钮 的全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
-prevButtonProps | Object | { content: '上一步', theme: 'primary' } | 透传 上一步按钮 的全部属性。TS 类型：`ButtonProps` | N
-skipButtonProps | Object | { content: '跳过', theme: 'default' } | 透传 跳过按钮 的全部属性。TS 类型：`ButtonProps` | N
+nextButtonProps | Object | `{ content: '下一步', theme: 'primary' }` | 透传 下一步按钮 的全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+prevButtonProps | Object | `{ content: '上一步', theme: 'primary' }` | 透传 上一步按钮 的全部属性。TS 类型：`ButtonProps` | N
+skipButtonProps | Object | `{ content: '跳过', theme: 'default' }` | 透传 跳过按钮 的全部属性。TS 类型：`ButtonProps` | N
 steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。。TS 类型：`Array<TdGuideStepProps>` | N
 onChange | Function |  | TS 类型：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
 onClickNextStep | Function |  | TS 类型：`( next: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击下一步时触发 | N

From ef448a65bf15ce44c00995c656ab182a1d51d992 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Sat, 27 Aug 2022 15:31:09 +0800
Subject: [PATCH 18/48] feat(guide): demos

---
 examples/guide/demos/base.vue         | 138 +++++++++++++++++++++++--
 examples/guide/demos/dialog.vue       | 139 ++++++++++++++++++++++++++
 examples/guide/demos/no-mask.vue      | 139 ++++++++++++++++++++++++++
 examples/guide/demos/popup-dialog.vue | 139 ++++++++++++++++++++++++++
 examples/guide/usage/index-keep.vue   |  24 -----
 examples/guide/usage/props.json       |  32 ------
 src/_common                           |   2 +-
 src/guide/guide.tsx                   |  27 ++---
 8 files changed, 565 insertions(+), 75 deletions(-)
 create mode 100644 examples/guide/demos/dialog.vue
 create mode 100644 examples/guide/demos/no-mask.vue
 create mode 100644 examples/guide/demos/popup-dialog.vue
 delete mode 100644 examples/guide/usage/index-keep.vue
 delete mode 100644 examples/guide/usage/props.json

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index 410aa91eb6..0aa0ee0ad1 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -1,12 +1,138 @@
 <template>
-  <div class="t-loading-demo">
-    <t-loading></t-loading>
-    <div class="desc">我是自定义的 popup 内容</div>
-  </div>
+  <t-row align="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        @change="handleChange"
+        @click-prev-step="handelClickPrevStep"
+        @click-next-step="handleClickNextStep"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
 </template>
 
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    description: '新手引导的说明方案',
+    placement: 'right',
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
+};
+
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
+};
+
+const handleFinish = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+</script>
+
 <style>
-.desc {
-  color: #ffff;
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
 }
 </style>
diff --git a/examples/guide/demos/dialog.vue b/examples/guide/demos/dialog.vue
new file mode 100644
index 0000000000..f293b447bd
--- /dev/null
+++ b/examples/guide/demos/dialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <t-row align="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        mode="dialog"
+        @change="handleChange"
+        @click-prev-step="handelClickPrevStep"
+        @click-next-step="handleClickNextStep"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    description: '新手引导的说明方案',
+    placement: 'right',
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
+};
+
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
+};
+
+const handleFinish = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/guide/demos/no-mask.vue b/examples/guide/demos/no-mask.vue
new file mode 100644
index 0000000000..1e49ebbaa1
--- /dev/null
+++ b/examples/guide/demos/no-mask.vue
@@ -0,0 +1,139 @@
+<template>
+  <t-row align="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        :show-overlay="false"
+        @change="handleChange"
+        @click-prev-step="handelClickPrevStep"
+        @click-next-step="handleClickNextStep"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    description: '新手引导的说明方案',
+    placement: 'right',
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
+};
+
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
+};
+
+const handleFinish = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/guide/demos/popup-dialog.vue b/examples/guide/demos/popup-dialog.vue
new file mode 100644
index 0000000000..9287628f75
--- /dev/null
+++ b/examples/guide/demos/popup-dialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <t-row align="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        @change="handleChange"
+        @click-prev-step="handelClickPrevStep"
+        @click-next-step="handleClickNextStep"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+    mode: 'dialog',
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    description: '新手引导的说明方案',
+    placement: 'right',
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
+};
+
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
+};
+
+const handleFinish = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/guide/usage/index-keep.vue b/examples/guide/usage/index-keep.vue
deleted file mode 100644
index 78202bb4e2..0000000000
--- a/examples/guide/usage/index-keep.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
-<template>
-  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
-    <template #loading="{ configProps }">
-      <t-guide v-bind="configProps" />
-    </template>
-  </base-usage>
-</template>
-
-<script setup lang="jsx">
-/* eslint-disable */
-import { ref, onMounted } from 'vue';
-import configJson from './props.json';
-
-const configList = ref(configJson);
-const panelList = [{ label: 'loading', value: 'loading' }];
-
-const usageCodeMap = { loading: '<t-loading v-bind="configProps" />' };
-const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
-
-function onPanelChange(panel) {
-  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
-}
-</script>
diff --git a/examples/guide/usage/props.json b/examples/guide/usage/props.json
deleted file mode 100644
index 1f1bab969a..0000000000
--- a/examples/guide/usage/props.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "name": "indicator",
-    "type": "Boolean",
-    "defaultValue": true,
-    "options": []
-  },
-  {
-    "name": "inheritColor",
-    "type": "Boolean",
-    "defaultValue": false,
-    "options": []
-  },
-  {
-    "name": "loading",
-    "type": "Boolean",
-    "defaultValue": true,
-    "options": []
-  },
-  {
-    "name": "preventScrollThrough",
-    "type": "Boolean",
-    "defaultValue": true,
-    "options": []
-  },
-  {
-    "name": "showOverlay",
-    "type": "Boolean",
-    "defaultValue": true,
-    "options": []
-  }
-]
\ No newline at end of file
diff --git a/src/_common b/src/_common
index 0a23114bad..51ab9fd5c3 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 0a23114baddbce68c8b2178c7b58ac73189013f8
+Subproject commit 51ab9fd5c3d9ae79c13d051e1e67d87ede35869f
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index d41d51ebe7..e4e99a49b3 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -9,6 +9,7 @@ import scrollTo from './utils/scrollTo';
 
 import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
+import isFixed from './utils/isFixed';
 
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
@@ -52,6 +53,8 @@ export default defineComponent({
     const currentHighlightLayerElm = ref<HTMLElement>();
     // 下一个高亮的元素
     const nextHighlightLayerElm = ref<HTMLElement>();
+    // dialog wrapper ref
+    const dialogWrapperRef = ref<HTMLElement>();
     // dialog ref
     const dialogTooltipRef = ref<HTMLElement>();
     // 是否开始展示
@@ -60,6 +63,8 @@ export default defineComponent({
     const stepsTotal = computed(() => steps.value.length);
     // 当前步骤的信息
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
+    // 当前元素位置状态
+    const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
 
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = <Key extends keyof CrossProps>(propsName: Key) =>
@@ -138,6 +143,7 @@ export default defineComponent({
       destoryDialogTooltipElm();
       highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
       overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
+      dialogWrapperRef.value?.parentNode.removeChild(dialogWrapperRef.value);
     };
 
     const handleSkip = (e: MouseEvent) => {
@@ -203,6 +209,7 @@ export default defineComponent({
         const highlightClass = [
           `${COMPONENT_NAME.value}__highlight`,
           `${COMPONENT_NAME.value}__highlight--${isPopup.value ? 'popup' : 'dialog'}`,
+          `${COMPONENT_NAME.value}--${currentElmIsFixed.value && isPopup.value ? 'fixed' : 'absolute'}`,
         ];
         const showOverlay = getCurrentCrossProps('showOverlay');
         const classes = [...highlightClass, `${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
@@ -231,16 +238,6 @@ export default defineComponent({
             )}
           </div>
         );
-        // const dialogDefaultCounter = (
-        //   <div class={`${COMPONENT_NAME.value}__counter`}>
-        //     {popupSlotCounter ||
-        //       props.steps.map((_, i) => (
-        //         <span
-        //           class={`${COMPONENT_NAME.value}__counter--${innerCurrent.value === i ? 'active' : 'default'}`}
-        //         ></span>
-        //       ))}
-        //   </div>
-        // );
         return <>{!hideCounter.value && popupDefaultCounter}</>;
       };
 
@@ -331,6 +328,11 @@ export default defineComponent({
           renderBody = renderPopupContent;
         }
 
+        const classes = [
+          `${COMPONENT_NAME.value}__reference`,
+          `${COMPONENT_NAME.value}--${currentElmIsFixed.value ? 'fixed' : 'absolute'}`,
+        ];
+
         return (
           <Popup
             visible={true}
@@ -340,7 +342,7 @@ export default defineComponent({
             overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
             placement={currentStepInfo.value.placement}
           >
-            <div ref={referenceLayerRef} v-transfer-dom="body" class={`${COMPONENT_NAME.value}__reference`} />
+            <div ref={referenceLayerRef} v-transfer-dom="body" class={classes} />
           </Popup>
         );
       };
@@ -357,6 +359,7 @@ export default defineComponent({
         ];
         const dialogClasses = [
           `${COMPONENT_NAME.value}__reference`,
+          `${COMPONENT_NAME.value}--absolute`,
           `${COMPONENT_NAME.value}__dialog`,
           {
             [`${COMPONENT_NAME.value}__dialog--nomask`]: !getCurrentCrossProps('showOverlay'),
@@ -366,7 +369,7 @@ export default defineComponent({
         const footerClasses = [`${COMPONENT_NAME.value}__footer`, `${COMPONENT_NAME.value}__footer--popup`];
         return (
           <>
-            <div v-transfer-dom="body" class={wrapperClasses} style={style}>
+            <div ref={dialogWrapperRef} v-transfer-dom="body" class={wrapperClasses} style={style}>
               <div ref={dialogTooltipRef} class={dialogClasses}>
                 {renderTooltipBody()}
                 <div class={footerClasses}>

From 1e3f1529afc188777ed1f3e188cb2a2ed2270c92 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 29 Aug 2022 20:28:49 +0800
Subject: [PATCH 19/48] feat(guide): optimization

---
 examples/guide/guide.md               |   4 +-
 src/guide/const/index.ts              |   2 -
 src/guide/guide.tsx                   | 119 ++++++++++++--------------
 src/guide/utils/elementInViewport.ts  |  17 +---
 src/guide/utils/getElmCssPropValue.ts |  13 +++
 src/guide/utils/getElmInfo.ts         |  32 -------
 src/guide/utils/getOffset.ts          |  52 -----------
 src/guide/utils/getPropValue.ts       |  25 ------
 src/guide/utils/getRelativePositon.ts |  36 ++++++++
 src/guide/utils/getScrollParent.ts    |  13 +--
 src/guide/utils/getTargetElm.ts       |  17 +++-
 src/guide/utils/getWindowScroll.ts    |   8 ++
 src/guide/utils/getWindowSize.ts      |  12 +--
 src/guide/utils/index.ts              |  19 ++++
 src/guide/utils/isFixed.ts            |  16 +---
 src/guide/utils/removeElm.ts          |   3 +
 src/guide/utils/scrollTo.ts           |  12 +--
 src/guide/utils/setStyle.ts           |   9 +-
 18 files changed, 168 insertions(+), 241 deletions(-)
 create mode 100644 src/guide/utils/getElmCssPropValue.ts
 delete mode 100644 src/guide/utils/getElmInfo.ts
 delete mode 100644 src/guide/utils/getOffset.ts
 delete mode 100644 src/guide/utils/getPropValue.ts
 create mode 100644 src/guide/utils/getRelativePositon.ts
 create mode 100644 src/guide/utils/getWindowScroll.ts
 create mode 100644 src/guide/utils/removeElm.ts

diff --git a/examples/guide/guide.md b/examples/guide/guide.md
index 40452d8252..7da6b47089 100644
--- a/examples/guide/guide.md
+++ b/examples/guide/guide.md
@@ -5,8 +5,8 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 counter | Slot / Function | - | 用于自定义渲染计数部分。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-current | Number | - | 当前步骤，即整个引导的进度。。支持语法糖 `v-model` 或 `v-model:current` | N
-defaultCurrent | Number | - | 当前步骤，即整个引导的进度。。非受控属性 | N
+current | Number | - | 当前步骤，即整个引导的进度。支持语法糖 `v-model` 或 `v-model:current` | N
+defaultCurrent | Number | - | 当前步骤，即整个引导的进度。非受控属性 | N
 finishButtonProps | Object | `{ content: '完成', theme: 'primary' }` | 透传 完成 的全部属性。TS 类型：`ButtonProps` | N
 hideCounter | Boolean | false | 是否隐藏计数 | N
 hidePrev | Boolean | false | 是否隐藏上一步按钮 | N
diff --git a/src/guide/const/index.ts b/src/guide/const/index.ts
index bc948ee6fe..2f13a3961e 100644
--- a/src/guide/const/index.ts
+++ b/src/guide/const/index.ts
@@ -4,5 +4,3 @@ export const defalutCrossProps: CrossProps = {
   showOverlay: true,
   mode: 'popup',
 };
-
-export const tooltipZIndex = 999999;
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index e4e99a49b3..0499f4e1cd 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -1,46 +1,42 @@
-import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch } from 'vue';
+import { defineComponent, computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
 
 import props from './props';
-import setStyle from './utils/setStyle';
-import getScrollParent from './utils/getScrollParent';
-import getOffset from './utils/getOffset';
-import getTargetElm from './utils/getTargetElm';
-import scrollTo from './utils/scrollTo';
+
+import { TdGuideProps, CrossProps } from './type';
+import { defalutCrossProps } from './const';
+import {
+  setStyle,
+  scrollToParentVisibleArea,
+  getRelativePositon,
+  getTargetElm,
+  scrollTo,
+  isFixed,
+  getWindowScroll,
+  removeElm,
+} from './utils';
 
 import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
-import isFixed from './utils/isFixed';
 
-import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
-import { useContent, useTNodeJSX } from '../hooks/tnode';
 import useVModel from '../hooks/useVModel';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useConfig';
 
-import Button, { TdButtonProps } from '../button';
+import Button from '../button';
 import Popup from '../popup';
-import Dialog from '../dialog';
-
-import { TdGuideProps, TdGuideStepProps, CrossProps, StepDialogPlacement } from './type';
-import { defalutCrossProps } from './const';
 
 import { GuidePopupStepContent, GuideStepHighlightContent } from './guide-step';
 
 export default defineComponent({
   name: 'TGuide',
-  directives: {
-    TransferDom,
-  },
-  props: { ...props },
+  directives: { TransferDom },
+  props,
   setup(props) {
-    const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
-
-    const classPrefix = usePrefixClass();
     const COMPONENT_NAME = usePrefixClass('guide');
     const LOCK_CLASS = usePrefixClass('guide--lock');
-    const { SIZE } = useCommonClassName();
 
     const { current, modelValue, hideCounter, hidePrev, hideSkip, steps, zIndex } = toRefs(props);
-
     const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, props.onChange);
 
     // 覆盖层，用于覆盖所有元素
@@ -63,45 +59,40 @@ export default defineComponent({
     const stepsTotal = computed(() => steps.value.length);
     // 当前步骤的信息
     const currentStepInfo = computed(() => steps.value[innerCurrent.value]);
+    // 当前是否为 popup
+    const isPopup = computed(() => getCurrentCrossProps('mode') === 'popup');
     // 当前元素位置状态
     const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
-
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = <Key extends keyof CrossProps>(propsName: Key) =>
       currentStepInfo.value[propsName] ?? props[propsName] ?? defalutCrossProps[propsName];
-    // 当前是否为 popup
-    const isPopup = computed(() => getCurrentCrossProps('mode') === 'popup');
-    // 滑动到元素位置
-    const scrollParentToElement = (element: HTMLElement) => {
-      const parent = getScrollParent(element);
-      if (parent === document.body) return;
-      parent.scrollTop = element.offsetTop - parent.offsetTop;
-    };
 
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
-      const elementPosition = getOffset(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+      let { top, left } = getRelativePositon(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+      const { width, height } = nextHighlightLayerElm.value.getBoundingClientRect();
 
       if (!isPopup.value) {
-        const _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft;
-        const _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
-        elementPosition.left += _scrollLeft;
-        elementPosition.top += _scrollTop;
+        const { scrollTop, scrollLeft } = getWindowScroll();
+        top += scrollTop;
+        left += scrollLeft;
       }
+
       const highlightPadding = getCurrentCrossProps('highlightPadding');
       setStyle(highlighLayer, {
-        width: `${elementPosition.width + highlightPadding * 2}px`,
-        height: `${elementPosition.height + highlightPadding * 2}px`,
-        top: `${elementPosition.top - highlightPadding}px`,
-        left: `${elementPosition.left - highlightPadding}px`,
+        width: `${width + highlightPadding * 2}px`,
+        height: `${height + highlightPadding * 2}px`,
+        top: `${top - highlightPadding}px`,
+        left: `${left - highlightPadding}px`,
       });
     };
 
     const showPopupGuide = () => {
       const currentElement = getTargetElm(currentStepInfo.value.element);
       nextHighlightLayerElm.value = currentElement;
+
       nextTick(() => {
-        scrollParentToElement(nextHighlightLayerElm.value);
+        scrollToParentVisibleArea(nextHighlightLayerElm.value);
         setHighlightLayerPosition(highlightLayerRef.value);
         setHighlightLayerPosition(referenceLayerRef.value);
         scrollTo(nextHighlightLayerElm.value);
@@ -110,14 +101,14 @@ export default defineComponent({
     };
 
     const destoryTooltipElm = () => {
-      referenceLayerRef.value?.parentNode.removeChild(referenceLayerRef.value);
+      removeElm(referenceLayerRef.value);
     };
 
     const showDialogGuide = () => {
       nextTick(() => {
         const currentElement = dialogTooltipRef.value;
         nextHighlightLayerElm.value = currentElement;
-        scrollParentToElement(nextHighlightLayerElm.value);
+        scrollToParentVisibleArea(nextHighlightLayerElm.value);
         setHighlightLayerPosition(highlightLayerRef.value);
         scrollTo(nextHighlightLayerElm.value);
         currentHighlightLayerElm.value = currentElement;
@@ -125,7 +116,7 @@ export default defineComponent({
     };
 
     const destoryDialogTooltipElm = () => {
-      dialogTooltipRef.value?.parentNode.removeChild(dialogTooltipRef.value);
+      removeElm(dialogTooltipRef.value);
     };
 
     const showGuide = () => {
@@ -141,15 +132,15 @@ export default defineComponent({
     const destoryGuide = () => {
       destoryTooltipElm();
       destoryDialogTooltipElm();
-      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
-      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
-      dialogWrapperRef.value?.parentNode.removeChild(dialogWrapperRef.value);
+      removeElm(highlightLayerRef.value);
+      removeElm(overlayLayerRef.value);
+      removeElm(dialogWrapperRef.value);
+      removeClass(document.body, LOCK_CLASS.value);
     };
 
     const handleSkip = (e: MouseEvent) => {
       actived.value = false;
       setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      destoryGuide();
       props.onSkip?.(-1, stepsTotal.value, { e });
     };
 
@@ -166,32 +157,30 @@ export default defineComponent({
     const handleFinish = (e: MouseEvent) => {
       actived.value = false;
       setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      destoryGuide();
       props.onFinish?.(-1, stepsTotal.value - 1, { e });
     };
 
-    watch(innerCurrent, (val) => {
-      if (val >= 0 && val < steps.value.length) {
+    const initGuide = () => {
+      if (innerCurrent.value >= 0 && innerCurrent.value < steps.value.length) {
         if (!actived.value) {
           actived.value = true;
           addClass(document.body, LOCK_CLASS.value);
         }
         showGuide();
+      }
+    };
+
+    watch(innerCurrent, (val) => {
+      if (val >= 0 && val < steps.value.length) {
+        initGuide();
       } else {
         actived.value = false;
-        removeClass(document.body, LOCK_CLASS.value);
-        console.info('当前引导的步骤', val);
+        destoryGuide();
       }
     });
 
     onMounted(() => {
-      if (innerCurrent.value >= 0 && innerCurrent.value < stepsTotal.value) {
-        actived.value = true;
-        showGuide();
-      } else {
-        actived.value = false;
-        console.info('当前引导的步骤', innerCurrent.value);
-      }
+      initGuide();
     });
 
     return () => {
@@ -245,6 +234,7 @@ export default defineComponent({
         const isLast = innerCurrent.value === stepsTotal.value - 1;
         const isFirst = innerCurrent.value === 0;
         const buttonSize = mode === 'popup' ? 'small' : 'medium';
+
         return (
           <div class={`${COMPONENT_NAME.value}__action`}>
             {!hideSkip.value && !isLast && (
@@ -294,6 +284,7 @@ export default defineComponent({
       const renderTooltipBody = () => {
         const title = <div class={`${COMPONENT_NAME.value}__title`}>{currentStepInfo.value.title}</div>;
         const desc = <div class={`${COMPONENT_NAME.value}__desc`}>{currentStepInfo.value.description}</div>;
+
         return (
           <>
             {title}
@@ -319,7 +310,7 @@ export default defineComponent({
         );
       };
 
-      const renderReferenceLayer = () => {
+      const renderPopupGuide = () => {
         const { content } = currentStepInfo.value;
         let renderBody;
         if (content) {
@@ -347,10 +338,6 @@ export default defineComponent({
         );
       };
 
-      const renderPopupGuide = () => {
-        return <>{renderReferenceLayer()}</>;
-      };
-
       const renderDialogGuide = () => {
         const style = { zIndex: zIndex.value };
         const wrapperClasses = [
diff --git a/src/guide/utils/elementInViewport.ts b/src/guide/utils/elementInViewport.ts
index 8a0fd47677..b1ff283664 100644
--- a/src/guide/utils/elementInViewport.ts
+++ b/src/guide/utils/elementInViewport.ts
@@ -1,18 +1,9 @@
 /**
- * Check to see if the element is in the viewport or not
+ * 检查元素是否在视图
  * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
- *
- * @api private
- * @method _elementInViewport
- * @param {Object} el
  */
-export default function elementInViewport(el) {
-  const rect = el.getBoundingClientRect();
+export default function elementInViewport(elm: HTMLElement) {
+  const rect = elm.getBoundingClientRect();
 
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom + 80 <= window.innerHeight && // add 80 to get the text right
-    rect.right <= window.innerWidth
-  );
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom + 80 <= window.innerHeight && rect.right <= window.innerWidth;
 }
diff --git a/src/guide/utils/getElmCssPropValue.ts b/src/guide/utils/getElmCssPropValue.ts
new file mode 100644
index 0000000000..b36a197a65
--- /dev/null
+++ b/src/guide/utils/getElmCssPropValue.ts
@@ -0,0 +1,13 @@
+export default function getElmCssPropValue(element: HTMLElement, propName: string) {
+  let propValue = '';
+
+  if (document.defaultView && document.defaultView.getComputedStyle) {
+    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
+  }
+
+  if (propValue && propValue.toLowerCase) {
+    return propValue.toLowerCase();
+  }
+
+  return propValue;
+}
diff --git a/src/guide/utils/getElmInfo.ts b/src/guide/utils/getElmInfo.ts
deleted file mode 100644
index b9c73b4203..0000000000
--- a/src/guide/utils/getElmInfo.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * 获取元素在页面中为位置信息
- * @param element：
- * @returns {top: number, left: number}
- */
-export function elmPosition(element: HTMLElement) {
-  const { body } = document;
-  const docEl = document.documentElement;
-  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-  const x = element.getBoundingClientRect();
-
-  return {
-    top: x.top + scrollTop - element.clientTop,
-    left: x.left + scrollLeft - element.clientLeft,
-  };
-}
-
-/**
- * 获取元素本身的宽高
- * @param element
- * @returns
- */
-export function elmRect(element: HTMLElement) {
-  const x = element.getBoundingClientRect();
-
-  return {
-    width: x.width,
-    height: x.height,
-  };
-}
diff --git a/src/guide/utils/getOffset.ts b/src/guide/utils/getOffset.ts
deleted file mode 100644
index 60ef0311a2..0000000000
--- a/src/guide/utils/getOffset.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import getPropValue from './getPropValue';
-import isFixed from './isFixed';
-
-/**
- * Get an element position on the page relative to another element (or body)
- * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
- *
- * @api private
- * @method getOffset
- * @param {Object} element
- * @param {Object} relativeEl
- * @returns Element's position info
- */
-export default function getOffset(element: any, relativeEl: any) {
-  const { body } = document;
-  const docEl = document.documentElement;
-  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-  relativeEl = relativeEl || body;
-
-  const x = element.getBoundingClientRect();
-  const xr = relativeEl.getBoundingClientRect();
-  const relativeElPosition = getPropValue(relativeEl, 'position');
-
-  const obj = {
-    width: x.width,
-    height: x.height,
-  };
-
-  if (
-    (relativeEl.tagName.toLowerCase() !== 'body' && relativeElPosition === 'relative') ||
-    relativeElPosition === 'sticky'
-  ) {
-    // when the container of our target element is _not_ body and has either "relative" or "sticky" position, we should not
-    // consider the scroll position but we need to include the relative x/y of the container element
-    return Object.assign(obj, {
-      top: x.top - xr.top,
-      left: x.left - xr.left,
-    });
-  }
-  if (isFixed(element)) {
-    return Object.assign(obj, {
-      top: x.top,
-      left: x.left,
-    });
-  }
-  return Object.assign(obj, {
-    top: x.top + scrollTop,
-    left: x.left + scrollLeft,
-  });
-}
diff --git a/src/guide/utils/getPropValue.ts b/src/guide/utils/getPropValue.ts
deleted file mode 100644
index d2840c6e46..0000000000
--- a/src/guide/utils/getPropValue.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Get an element CSS property on the page
- *
- * @api private
- * @method _getPropValue
- * @param {Object} element
- * @param {String} propName
- * @returns string property value
- */
-export default function getPropValue(element: any, propName: any) {
-  let propValue = '';
-  if (element.currentStyle) {
-    // IE
-    propValue = element.currentStyle[propName];
-  } else if (document.defaultView && document.defaultView.getComputedStyle) {
-    // Others
-    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
-  }
-
-  // Prevent exception in IE
-  if (propValue && propValue.toLowerCase) {
-    return propValue.toLowerCase();
-  }
-  return propValue;
-}
diff --git a/src/guide/utils/getRelativePositon.ts b/src/guide/utils/getRelativePositon.ts
new file mode 100644
index 0000000000..1fa911351a
--- /dev/null
+++ b/src/guide/utils/getRelativePositon.ts
@@ -0,0 +1,36 @@
+import getElmCssPropValue from './getElmCssPropValue';
+import isFixed from './isFixed';
+import getWindowScroll from './getWindowScroll';
+
+/**
+ * 获取元素相对于另一个元素的位置（或者说相对于 body）
+ * 感谢 `meouw`: http://stackoverflow.com/a/442474/375966
+ */
+export default function getRelativePositon(elm: HTMLElement, relativeElm: HTMLElement = document.body) {
+  const { scrollTop, scrollLeft } = getWindowScroll();
+  const { top: elmTop, left: elmLeft } = elm.getBoundingClientRect();
+  const { top: relElmTop, left: relElmLeft } = relativeElm.getBoundingClientRect();
+  const relativeElmPosition = getElmCssPropValue(relativeElm, 'position');
+
+  if (
+    (relativeElm.tagName.toLowerCase() !== 'body' && relativeElmPosition === 'relative') ||
+    relativeElmPosition === 'sticky'
+  ) {
+    return {
+      top: elmTop - relElmTop,
+      left: elmLeft - relElmLeft,
+    };
+  }
+
+  if (isFixed(elm)) {
+    return {
+      top: elmTop,
+      left: elmLeft,
+    };
+  }
+
+  return {
+    top: elmTop + scrollTop,
+    left: elmLeft + scrollLeft,
+  };
+}
diff --git a/src/guide/utils/getScrollParent.ts b/src/guide/utils/getScrollParent.ts
index 8af95f7dcf..bf54f86ada 100644
--- a/src/guide/utils/getScrollParent.ts
+++ b/src/guide/utils/getScrollParent.ts
@@ -1,9 +1,4 @@
-/**
- * Find the nearest scrollable parent
- * @param Element element
- * @return Element
- */
-export default function getScrollParent(element: any) {
+export function getScrollParent(element: HTMLElement) {
   let style = window.getComputedStyle(element);
   const excludeStaticParent = style.position === 'absolute';
   const overflowRegex = /(auto|scroll)/;
@@ -21,3 +16,9 @@ export default function getScrollParent(element: any) {
 
   return document.body;
 }
+
+export function scrollToParentVisibleArea(element: HTMLElement) {
+  const parent = getScrollParent(element);
+  if (parent === document.body) return;
+  parent.scrollTop = element.offsetTop - parent.offsetTop;
+}
diff --git a/src/guide/utils/getTargetElm.ts b/src/guide/utils/getTargetElm.ts
index 89371422cf..faea347f74 100644
--- a/src/guide/utils/getTargetElm.ts
+++ b/src/guide/utils/getTargetElm.ts
@@ -1,10 +1,19 @@
-export default function getTargetElm(targetElm: unknown): HTMLElement {
-  if (typeof targetElm === 'string') {
-    const targetElement = document.querySelector(targetElm);
+type fn = () => HTMLElement;
+
+export default function getTargetElm(elm: string | fn): HTMLElement {
+  if (elm) {
+    let targetElement: HTMLElement = null;
+    if (typeof elm === 'string') {
+      targetElement = document.querySelector(elm);
+    } else if (typeof elm === 'function') {
+      targetElement = elm();
+    } else {
+      throw new Error('elm should be string or function');
+    }
     if (targetElement) {
       return targetElement as HTMLElement;
     }
-    throw new Error('There is no element with given selector.');
+    throw new Error('There is no element with given.');
   } else {
     return document.body;
   }
diff --git a/src/guide/utils/getWindowScroll.ts b/src/guide/utils/getWindowScroll.ts
new file mode 100644
index 0000000000..a4c7dc6d39
--- /dev/null
+++ b/src/guide/utils/getWindowScroll.ts
@@ -0,0 +1,8 @@
+export default function getWindowScroll() {
+  const { body } = document;
+  const docElm = document.documentElement;
+  const scrollTop = window.pageYOffset || docElm.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docElm.scrollLeft || body.scrollLeft;
+
+  return { scrollTop, scrollLeft };
+}
diff --git a/src/guide/utils/getWindowSize.ts b/src/guide/utils/getWindowSize.ts
index fb757c4ef9..b767decbc8 100644
--- a/src/guide/utils/getWindowSize.ts
+++ b/src/guide/utils/getWindowSize.ts
@@ -1,15 +1,7 @@
-/**
- * Provides a cross-browser way to get the screen dimensions
- * via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
- *
- * @api private
- * @method _getWinSize
- * @returns {Object} width and height attributes
- */
 export default function getWinSize() {
   if (window.innerWidth !== undefined) {
     return { width: window.innerWidth, height: window.innerHeight };
   }
-  const D = document.documentElement;
-  return { width: D.clientWidth, height: D.clientHeight };
+  const doc = document.documentElement;
+  return { width: doc.clientWidth, height: doc.clientHeight };
 }
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index e69de29bb2..01cab735e4 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -0,0 +1,19 @@
+import setStyle from './setStyle';
+import { scrollToParentVisibleArea } from './getScrollParent';
+import getRelativePositon from './getRelativePositon';
+import getTargetElm from './getTargetElm';
+import scrollTo from './scrollTo';
+import isFixed from './isFixed';
+import getWindowScroll from './getWindowScroll';
+import removeElm from './removeElm';
+
+export {
+  setStyle,
+  scrollToParentVisibleArea,
+  getRelativePositon,
+  getTargetElm,
+  scrollTo,
+  isFixed,
+  getWindowScroll,
+  removeElm,
+};
diff --git a/src/guide/utils/isFixed.ts b/src/guide/utils/isFixed.ts
index 99f0f9317c..9e54d954b9 100644
--- a/src/guide/utils/isFixed.ts
+++ b/src/guide/utils/isFixed.ts
@@ -1,21 +1,13 @@
-import getPropValue from './getPropValue';
+import getElmCssPropValue from './getElmCssPropValue';
 
-/**
- * Checks to see if target element (or parents) position is fixed or not
- *
- * @api private
- * @method _isFixed
- * @param {Object} element
- * @returns Boolean
- */
-export default function isFixed(element: any): Boolean {
-  const p = element.parentNode;
+export default function isFixed(element: HTMLElement): Boolean {
+  const p = element.parentNode as HTMLElement;
 
   if (!p || p.nodeName === 'HTML') {
     return false;
   }
 
-  if (getPropValue(element, 'position') === 'fixed') {
+  if (getElmCssPropValue(element, 'position') === 'fixed') {
     return true;
   }
 
diff --git a/src/guide/utils/removeElm.ts b/src/guide/utils/removeElm.ts
new file mode 100644
index 0000000000..76a6d24ef6
--- /dev/null
+++ b/src/guide/utils/removeElm.ts
@@ -0,0 +1,3 @@
+export default function removeElm(elm: HTMLElement) {
+  elm?.parentNode.removeChild(elm);
+}
diff --git a/src/guide/utils/scrollTo.ts b/src/guide/utils/scrollTo.ts
index 65f0c825ef..13117e55cb 100644
--- a/src/guide/utils/scrollTo.ts
+++ b/src/guide/utils/scrollTo.ts
@@ -1,16 +1,10 @@
 import getWindowSize from './getWindowSize';
 import elementInViewport from './elementInViewport';
 
-/**
- * To change the scroll of `window` after highlighting an element
- *
- * @api private
- * @param {Object} element
- */
-export default function scrollTo(element: HTMLElement) {
-  const rect = element.getBoundingClientRect();
+export default function scrollTo(elm: HTMLElement) {
+  const rect = elm.getBoundingClientRect();
 
-  if (!elementInViewport(element)) {
+  if (!elementInViewport(elm)) {
     const winHeight = getWindowSize().height;
     const top = rect.bottom - (rect.bottom - rect.top);
     window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2));
diff --git a/src/guide/utils/setStyle.ts b/src/guide/utils/setStyle.ts
index c68a4aaf02..2c7d981ea2 100644
--- a/src/guide/utils/setStyle.ts
+++ b/src/guide/utils/setStyle.ts
@@ -1,11 +1,4 @@
-/**
- * Sets the style of an DOM element
- *
- * @param {Object} element
- * @param {Object|string} style
- * @return null
- */
-export default function setStyle(element: any, style: any) {
+export default function setStyle(element: HTMLElement, style: Record<string, any> | string) {
   let cssText = '';
 
   if (element.style.cssText) {

From 1ab5bd706433326f9ae362ab344b30c8dfb0dcde Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 29 Aug 2022 20:54:19 +0800
Subject: [PATCH 20/48] feat(guide): add custom-popup demo

---
 examples/guide/demos/custom-popup.vue | 142 ++++++++++++++++++++++++++
 examples/guide/demos/my-popup.vue     |  45 ++++++++
 src/_common                           |   2 +-
 3 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 examples/guide/demos/custom-popup.vue
 create mode 100644 examples/guide/demos/my-popup.vue

diff --git a/examples/guide/demos/custom-popup.vue b/examples/guide/demos/custom-popup.vue
new file mode 100644
index 0000000000..25bd289af6
--- /dev/null
+++ b/examples/guide/demos/custom-popup.vue
@@ -0,0 +1,142 @@
+<template>
+  <t-row align="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        @change="handleChange"
+        @click-prev-step="handelClickPrevStep"
+        @click-next-step="handleClickNextStep"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import MyPopup from './my-popup.vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+    content: (h) => h(MyPopup),
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+    content: (h) => h(MyPopup),
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    description: '新手引导的说明方案',
+    placement: 'right',
+    content: (h) => h(MyPopup),
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, total, context) => {
+  console.log(current, total, context);
+};
+
+const handelClickPrevStep = (prev, current, total, context) => {
+  console.log(prev, current, total, context);
+};
+
+const handleClickNextStep = (next, current, total, context) => {
+  console.log(next, current, total, context);
+};
+
+const handleFinish = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+
+const handleSkip = (current, total, context) => {
+  visible.value = false;
+  console.log(current, total, context);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/guide/demos/my-popup.vue b/examples/guide/demos/my-popup.vue
new file mode 100644
index 0000000000..625297959d
--- /dev/null
+++ b/examples/guide/demos/my-popup.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="my-popup">
+    <ArrowUpIcon class="pop-icon" />
+    <p class="popup-desc">自定义的图形或说明文案，用来解释或指导该功能使用。</p>
+    <div class="popup-action">
+      <t-button class="action-skip" theme="default" size="small"> 跳过 </t-button>
+      <t-button theme="primary" size="small"> 下一步 </t-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ArrowUpIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style>
+.my-popup {
+  width: 240px;
+}
+
+.pop-icon {
+  margin-top: 10px;
+  color: white;
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.popup-desc {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 20px;
+}
+
+.popup-action {
+  margin-top: 10px;
+  text-align: right;
+}
+
+.action-skip {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/_common b/src/_common
index 51ab9fd5c3..63f39ebeb0 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 51ab9fd5c3d9ae79c13d051e1e67d87ede35869f
+Subproject commit 63f39ebeb09bbc87ce3e689bd92b42c71ef22a68

From 9424f73e7bdf768da7f1259576b5fc471b230cf0 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 29 Aug 2022 21:28:52 +0800
Subject: [PATCH 21/48] chore(guide): type

---
 src/guide/utils/getTargetElm.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/guide/utils/getTargetElm.ts b/src/guide/utils/getTargetElm.ts
index faea347f74..cd7379892a 100644
--- a/src/guide/utils/getTargetElm.ts
+++ b/src/guide/utils/getTargetElm.ts
@@ -1,12 +1,12 @@
-type fn = () => HTMLElement;
+import { AttachNode } from '../../common';
 
-export default function getTargetElm(elm: string | fn): HTMLElement {
+export default function getTargetElm(elm: AttachNode): HTMLElement {
   if (elm) {
     let targetElement: HTMLElement = null;
     if (typeof elm === 'string') {
       targetElement = document.querySelector(elm);
     } else if (typeof elm === 'function') {
-      targetElement = elm();
+      targetElement = elm() as HTMLElement;
     } else {
       throw new Error('elm should be string or function');
     }

From f8035db2fe2ec6e290543701a064c8700ff0f152 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 13:05:10 +0800
Subject: [PATCH 22/48] feat(guide): refact content and highlighContent

---
 examples/guide/demos/custom-popup.vue | 18 ++++++++---------
 examples/guide/demos/guide.vue        |  2 +-
 examples/guide/demos/my-popup.vue     | 19 ++++++++++++++----
 src/_common                           |  2 +-
 src/guide/guide-step.tsx              | 28 ---------------------------
 src/guide/guide.tsx                   | 18 ++++++++++++-----
 6 files changed, 39 insertions(+), 48 deletions(-)
 delete mode 100644 src/guide/guide-step.tsx

diff --git a/examples/guide/demos/custom-popup.vue b/examples/guide/demos/custom-popup.vue
index 25bd289af6..5bfa163b98 100644
--- a/examples/guide/demos/custom-popup.vue
+++ b/examples/guide/demos/custom-popup.vue
@@ -10,11 +10,11 @@
           <div class="title-major">Guide 用户引导</div>
           <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
         </div>
-        <div class="field label-field">
+        <div class="field label-field-1">
           <div class="label">Label</div>
           <t-input placeholder="请输入内容" />
         </div>
-        <div class="field">
+        <div class="field label-field-2">
           <div class="label">Label</div>
           <t-input placeholder="请输入内容" />
         </div>
@@ -50,21 +50,21 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案',
     placement: 'bottom-right',
-    content: (h) => h(MyPopup),
+    content: MyPopup,
   },
   {
-    element: '.label-field',
+    element: '.label-field-1',
     title: '新手引导标题',
     description: '新手引导的说明文案',
     placement: 'bottom',
-    content: (h) => h(MyPopup),
+    content: MyPopup,
   },
   {
-    element: '.action',
+    element: '.label-field-2',
     title: '新手引导标题',
-    description: '新手引导的说明方案',
-    placement: 'right',
-    content: (h) => h(MyPopup),
+    description: '新手引导的说明文案',
+    placement: 'bottom-left',
+    content: MyPopup,
   },
 ];
 
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index b59cc0ae3e..e54171242d 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -38,7 +38,7 @@ const steps = [
     title: '新手引导标题',
     description: '新手引导的说明文案。',
     prevButtonProps: { content: '自定义上一步', theme: 'success' },
-    highlightContent: (h) => h(HighlightContent),
+    highlightContent: HighlightContent,
   },
   {
     element: '#guide3',
diff --git a/examples/guide/demos/my-popup.vue b/examples/guide/demos/my-popup.vue
index 625297959d..ed55514664 100644
--- a/examples/guide/demos/my-popup.vue
+++ b/examples/guide/demos/my-popup.vue
@@ -3,14 +3,25 @@
     <ArrowUpIcon class="pop-icon" />
     <p class="popup-desc">自定义的图形或说明文案，用来解释或指导该功能使用。</p>
     <div class="popup-action">
-      <t-button class="action-skip" theme="default" size="small"> 跳过 </t-button>
-      <t-button theme="primary" size="small"> 下一步 </t-button>
+      <t-button theme="default" size="small" @click="handleSkip"> 跳过 </t-button>
+      <t-button v-if="current !== 0" theme="primary" size="small" @click="handlePrev"> 上一步 </t-button>
+      <t-button v-if="current + 1 < total" theme="primary" size="small" @click="handleNext"> 下一步 </t-button>
+      <t-button v-if="current + 1 === total" theme="primary" size="small" @click="handleFinish"> 完成 </t-button>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ArrowUpIcon } from 'tdesign-icons-vue-next';
+
+defineProps({
+  handlePrev: Function,
+  handleNext: Function,
+  handleSkip: Function,
+  handleFinish: Function,
+  current: Number,
+  total: Number,
+});
 </script>
 
 <style>
@@ -39,7 +50,7 @@ import { ArrowUpIcon } from 'tdesign-icons-vue-next';
   text-align: right;
 }
 
-.action-skip {
-  margin-right: 8px;
+.popup-action button {
+  margin-left: 8px;
 }
 </style>
diff --git a/src/_common b/src/_common
index 63f39ebeb0..eb16719d77 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 63f39ebeb09bbc87ce3e689bd92b42c71ef22a68
+Subproject commit eb16719d7799764fc3d98880f4409adfc7c1e203
diff --git a/src/guide/guide-step.tsx b/src/guide/guide-step.tsx
deleted file mode 100644
index de63633aca..0000000000
--- a/src/guide/guide-step.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineComponent, onMounted, onUnmounted, ref, Fragment, Text, watch, PropType, VNode, Teleport } from 'vue';
-import { useContent, useTNodeJSX } from '../hooks/tnode';
-import { TdGuideStepProps } from './type';
-
-export const GuidePopupStepContent = defineComponent({
-  props: { content: [String, Function] as PropType<TdGuideStepProps['content']> },
-  setup() {
-    const renderTNodeJSX = useTNodeJSX();
-    const el = ref(null);
-
-    onMounted(() => {
-      const { parentNode } = el.value;
-      parentNode.parentNode.appendChild(el.value);
-      parentNode.parentNode.removeChild(parentNode);
-    });
-
-    return () => <div ref={el}>{renderTNodeJSX('content', 'default')}</div>;
-  },
-});
-
-export const GuideStepHighlightContent = defineComponent({
-  props: { highlightContent: [String, Function] as PropType<TdGuideStepProps['highlightContent']> },
-  setup() {
-    const renderTNodeJSX = useTNodeJSX();
-
-    return () => renderTNodeJSX('highlightContent', 'default');
-  },
-});
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 0499f4e1cd..cee8f903c9 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -25,8 +25,6 @@ import { usePrefixClass } from '../hooks/useConfig';
 import Button from '../button';
 import Popup from '../popup';
 
-import { GuidePopupStepContent, GuideStepHighlightContent } from './guide-step';
-
 export default defineComponent({
   name: 'TGuide',
   directives: { TransferDom },
@@ -178,6 +176,7 @@ export default defineComponent({
         destoryGuide();
       }
     });
+    const aa = ref<HTMLElement>();
 
     onMounted(() => {
       initGuide();
@@ -206,7 +205,7 @@ export default defineComponent({
 
         return highlightContent ? (
           <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass} style={style}>
-            <GuideStepHighlightContent class={classes} highlightContent={highlightContent} style={style} />
+            <highlightContent class={classes} style={style} />
           </div>
         ) : (
           <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} style={style} />
@@ -314,7 +313,15 @@ export default defineComponent({
         const { content } = currentStepInfo.value;
         let renderBody;
         if (content) {
-          renderBody = () => <GuidePopupStepContent content={content} />;
+          const contentProps = {
+            handlePrev,
+            handleNext,
+            handleSkip,
+            handleFinish,
+            current: innerCurrent.value,
+            total: stepsTotal.value,
+          };
+          renderBody = () => <content {...contentProps} />;
         } else {
           renderBody = renderPopupContent;
         }
@@ -330,7 +337,8 @@ export default defineComponent({
             v-slots={{ content: renderBody }}
             show-arrow={!content}
             zIndex={zIndex.value}
-            overlayInnerClassName={currentStepInfo.value.stepOverlayClass}
+            overlayClassName={currentStepInfo.value.stepOverlayClass}
+            overlayInnerClassName={{ [`${COMPONENT_NAME.value}__popup--content`]: !!content }}
             placement={currentStepInfo.value.placement}
           >
             <div ref={referenceLayerRef} v-transfer-dom="body" class={classes} />

From 8741ea474564e51c2fd6370faf9a5c434ea0a368 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 13:13:01 +0800
Subject: [PATCH 23/48] fix(guide): destory dialog wrapper

---
 src/guide/guide.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index cee8f903c9..6f777119f7 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -115,6 +115,7 @@ export default defineComponent({
 
     const destoryDialogTooltipElm = () => {
       removeElm(dialogTooltipRef.value);
+      removeElm(dialogWrapperRef.value);
     };
 
     const showGuide = () => {
@@ -132,7 +133,6 @@ export default defineComponent({
       destoryDialogTooltipElm();
       removeElm(highlightLayerRef.value);
       removeElm(overlayLayerRef.value);
-      removeElm(dialogWrapperRef.value);
       removeClass(document.body, LOCK_CLASS.value);
     };
 
@@ -176,7 +176,6 @@ export default defineComponent({
         destoryGuide();
       }
     });
-    const aa = ref<HTMLElement>();
 
     onMounted(() => {
       initGuide();

From 58e17585a70d9f1de368b6246a2ddcd682f02f5a Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 13:18:32 +0800
Subject: [PATCH 24/48] docs(guide): use justify center

---
 examples/guide/demos/base.vue         | 2 +-
 examples/guide/demos/custom-popup.vue | 2 +-
 examples/guide/demos/dialog.vue       | 2 +-
 examples/guide/demos/no-mask.vue      | 2 +-
 examples/guide/demos/popup-dialog.vue | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index 0aa0ee0ad1..49f11ff8c3 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row align="center">
+  <t-row justify="center">
     <t-button @click="handleClick">新手引导</t-button>
     <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
       <template #footer>
diff --git a/examples/guide/demos/custom-popup.vue b/examples/guide/demos/custom-popup.vue
index 5bfa163b98..608fc7dea4 100644
--- a/examples/guide/demos/custom-popup.vue
+++ b/examples/guide/demos/custom-popup.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row align="center">
+  <t-row justify="center">
     <t-button @click="handleClick">新手引导</t-button>
     <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
       <template #footer>
diff --git a/examples/guide/demos/dialog.vue b/examples/guide/demos/dialog.vue
index f293b447bd..60378c8f62 100644
--- a/examples/guide/demos/dialog.vue
+++ b/examples/guide/demos/dialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row align="center">
+  <t-row justify="center">
     <t-button @click="handleClick">新手引导</t-button>
     <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
       <template #footer>
diff --git a/examples/guide/demos/no-mask.vue b/examples/guide/demos/no-mask.vue
index 1e49ebbaa1..97e8e666d9 100644
--- a/examples/guide/demos/no-mask.vue
+++ b/examples/guide/demos/no-mask.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row align="center">
+  <t-row justify="center">
     <t-button @click="handleClick">新手引导</t-button>
     <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
       <template #footer>
diff --git a/examples/guide/demos/popup-dialog.vue b/examples/guide/demos/popup-dialog.vue
index 9287628f75..fc1a77e32b 100644
--- a/examples/guide/demos/popup-dialog.vue
+++ b/examples/guide/demos/popup-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row align="center">
+  <t-row justify="center">
     <t-button @click="handleClick">新手引导</t-button>
     <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
       <template #footer>

From fd637c7e58d8815a5561f43950cb212e9b848f80 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 15:05:47 +0800
Subject: [PATCH 25/48] test: test init

---
 test/snap/__snapshots__/csr.test.js.snap      | 991 ++++++++++++++++++
 test/snap/__snapshots__/ssr.test.js.snap      |  19 +
 .../guide/__snapshots__/demo.test.js.snap     |  78 ++
 .../guide/{index.test.js => index.test.jsx}   |   4 +-
 4 files changed, 1091 insertions(+), 1 deletion(-)
 create mode 100644 test/unit/guide/__snapshots__/demo.test.js.snap
 rename test/unit/guide/{index.test.js => index.test.jsx} (91%)

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index 57757a176c..f6b64d50ba 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -58535,6 +58535,997 @@ exports[`csr snapshot test > csr test ./examples/grid/demos/valign.vue 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./examples/guide/demos/base.vue 1`] = `
+<div
+  class="t-row t-row--center t-row--top"
+  style="margin-left: 0px; margin-right: 0px;"
+>
+  
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
+  >
+    <!---->
+    <div
+      class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+      style="width: 60%;"
+    >
+      <div
+        class="t-drawer__header"
+      >
+        演示新手引导
+      </div>
+      <!---->
+      <div
+        class="t-drawer__body narrow-scrollbar"
+      >
+        
+        <div
+          class="guide-container"
+        >
+          <div
+            class="main-title"
+          >
+            <div
+              class="title-major"
+            >
+              Guide 用户引导
+            </div>
+            <div
+              class="title-sub"
+            >
+              按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+            </div>
+          </div>
+          <div
+            class="field label-field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-row t-row--start t-row--top action"
+            style="margin-left: 0px; margin-right: 0px;"
+          >
+            
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                确定
+                
+              </span>
+            </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                取消
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+        
+        <!---->
+        
+        
+      </div>
+      <div
+        class="t-drawer__footer"
+      >
+        
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            
+             关闭抽屉 
+            
+          </span>
+        </button>
+        
+      </div>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/custom-popup.vue 1`] = `
+<div
+  class="t-row t-row--center t-row--top"
+  style="margin-left: 0px; margin-right: 0px;"
+>
+  
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
+  >
+    <!---->
+    <div
+      class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+      style="width: 60%;"
+    >
+      <div
+        class="t-drawer__header"
+      >
+        演示新手引导
+      </div>
+      <!---->
+      <div
+        class="t-drawer__body narrow-scrollbar"
+      >
+        
+        <div
+          class="guide-container"
+        >
+          <div
+            class="main-title"
+          >
+            <div
+              class="title-major"
+            >
+              Guide 用户引导
+            </div>
+            <div
+              class="title-sub"
+            >
+              按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+            </div>
+          </div>
+          <div
+            class="field label-field-1"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="field label-field-2"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-row t-row--start t-row--top action"
+            style="margin-left: 0px; margin-right: 0px;"
+          >
+            
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                确定
+                
+              </span>
+            </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                取消
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+        
+        <!---->
+        
+        
+      </div>
+      <div
+        class="t-drawer__footer"
+      >
+        
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            
+             关闭抽屉 
+            
+          </span>
+        </button>
+        
+      </div>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/dialog.vue 1`] = `
+<div
+  class="t-row t-row--center t-row--top"
+  style="margin-left: 0px; margin-right: 0px;"
+>
+  
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
+  >
+    <!---->
+    <div
+      class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+      style="width: 60%;"
+    >
+      <div
+        class="t-drawer__header"
+      >
+        演示新手引导
+      </div>
+      <!---->
+      <div
+        class="t-drawer__body narrow-scrollbar"
+      >
+        
+        <div
+          class="guide-container"
+        >
+          <div
+            class="main-title"
+          >
+            <div
+              class="title-major"
+            >
+              Guide 用户引导
+            </div>
+            <div
+              class="title-sub"
+            >
+              按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+            </div>
+          </div>
+          <div
+            class="field label-field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-row t-row--start t-row--top action"
+            style="margin-left: 0px; margin-right: 0px;"
+          >
+            
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                确定
+                
+              </span>
+            </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                取消
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+        
+        <!---->
+        
+        
+      </div>
+      <div
+        class="t-drawer__footer"
+      >
+        
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            
+             关闭抽屉 
+            
+          </span>
+        </button>
+        
+      </div>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/guide.vue 1`] = `
+<div
+  class="guide-wrap-demo"
+  data-v-6b4c1b5c=""
+>
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-6b4c1b5c=""
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="guide-item"
+    data-v-6b4c1b5c=""
+    id="guide1"
+  >
+    guide1
+  </div>
+  <div
+    class="guide-item"
+    data-v-6b4c1b5c=""
+    id="guide2"
+  >
+    guide2
+  </div>
+  <div
+    class="guide-item"
+    data-v-6b4c1b5c=""
+    id="guide3"
+  >
+    guide3
+  </div>
+  <div
+    class="guide-item"
+    data-v-6b4c1b5c=""
+    id="guide4"
+  >
+    guide4
+  </div>
+  <div
+    class="guide-item"
+    data-v-6b4c1b5c=""
+    id="guide5"
+  >
+    guide5
+  </div>
+  
+  <!---->
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/highlightContent.vue 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- &lt;div class="highligh"&gt;&lt;/div&gt;
+   -->
+  <img
+    alt=""
+    class="highligh"
+    src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
+    srcset=""
+  />
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/my-popup.vue 1`] = `
+<div
+  class="my-popup"
+>
+  <svg
+    class="t-icon t-icon-arrow-up pop-icon"
+    fill="none"
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+  >
+    <path
+      d="M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  <p
+    class="popup-desc"
+  >
+    自定义的图形或说明文案，用来解释或指导该功能使用。
+  </p>
+  <div
+    class="popup-action"
+  >
+    <button
+      class="t-button t-size-s t-button--variant-base t-button--theme-default"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        
+         跳过 
+        
+      </span>
+    </button>
+    <button
+      class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        
+         上一步 
+        
+      </span>
+    </button>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/no-mask.vue 1`] = `
+<div
+  class="t-row t-row--center t-row--top"
+  style="margin-left: 0px; margin-right: 0px;"
+>
+  
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
+  >
+    <!---->
+    <div
+      class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+      style="width: 60%;"
+    >
+      <div
+        class="t-drawer__header"
+      >
+        演示新手引导
+      </div>
+      <!---->
+      <div
+        class="t-drawer__body narrow-scrollbar"
+      >
+        
+        <div
+          class="guide-container"
+        >
+          <div
+            class="main-title"
+          >
+            <div
+              class="title-major"
+            >
+              Guide 用户引导
+            </div>
+            <div
+              class="title-sub"
+            >
+              按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+            </div>
+          </div>
+          <div
+            class="field label-field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-row t-row--start t-row--top action"
+            style="margin-left: 0px; margin-right: 0px;"
+          >
+            
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                确定
+                
+              </span>
+            </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                取消
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+        
+        <!---->
+        
+        
+      </div>
+      <div
+        class="t-drawer__footer"
+      >
+        
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            
+             关闭抽屉 
+            
+          </span>
+        </button>
+        
+      </div>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./examples/guide/demos/popup-dialog.vue 1`] = `
+<div
+  class="t-row t-row--center t-row--top"
+  style="margin-left: 0px; margin-right: 0px;"
+>
+  
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      
+      新手引导
+      
+    </span>
+  </button>
+  <div
+    class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
+  >
+    <!---->
+    <div
+      class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+      style="width: 60%;"
+    >
+      <div
+        class="t-drawer__header"
+      >
+        演示新手引导
+      </div>
+      <!---->
+      <div
+        class="t-drawer__body narrow-scrollbar"
+      >
+        
+        <div
+          class="guide-container"
+        >
+          <div
+            class="main-title"
+          >
+            <div
+              class="title-major"
+            >
+              Guide 用户引导
+            </div>
+            <div
+              class="title-sub"
+            >
+              按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+            </div>
+          </div>
+          <div
+            class="field label-field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="field"
+          >
+            <div
+              class="label"
+            >
+              Label
+            </div>
+            <div
+              class="t-input__wrap"
+            >
+              <div
+                class="t-input"
+              >
+                <!---->
+                <!---->
+                <input
+                  class="t-input__inner"
+                  placeholder="请输入内容"
+                  type="text"
+                />
+                <!---->
+                <!---->
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-row t-row--start t-row--top action"
+            style="margin-left: 0px; margin-right: 0px;"
+          >
+            
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                确定
+                
+              </span>
+            </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                
+                取消
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+        
+        <!---->
+        
+        
+      </div>
+      <div
+        class="t-drawer__footer"
+      >
+        
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            
+             关闭抽屉 
+            
+          </span>
+        </button>
+        
+      </div>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./examples/icon/demos/base.vue 1`] = `
 <div
   class="t-demo-iconfont"
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 6534ffe025..e9560b85be 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -420,6 +420,25 @@ exports[`ssr snapshot test > ssr test ./examples/grid/demos/sort.vue 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test ./examples/grid/demos/valign.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><p>align top</p><div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div><p>align middle</p><div class=\\"t-row t-row--space-around t-row--middle\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div><p>align bottom</p><div class=\\"t-row t-row--space-between t-row--bottom\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div></div>"`;
 
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/base.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/custom-popup.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field-1\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field label-field-2\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/guide.vue 1`] = `"<div class=\\"guide-wrap-demo\\" data-v-6b4c1b5c><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-6b4c1b5c><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div id=\\"guide1\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide1</div><div id=\\"guide2\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide2</div><div id=\\"guide3\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide3</div><div id=\\"guide4\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide4</div><div id=\\"guide5\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide5</div><!--[--><!----><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/highlightContent.vue 1`] = `
+"<!--[--><!-- <div class=\\"highligh\\"></div>
+   --><img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset><!--]-->"
+`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/popup-dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+
 exports[`ssr snapshot test > ssr test ./examples/icon/demos/base.vue 1`] = `"<div class=\\"t-demo-iconfont\\"><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-loading\\" style=\\"color:#999999;\\"><use href=\\"#t-icon-loading\\"></use></svg><svg class=\\"t-icon t-icon-close\\" style=\\"\\"><use href=\\"#t-icon-close\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><br><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-check-circle-filled t-size-s\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled t-size-m\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled t-size-l\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:25px;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:2em;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><br><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:red;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:green;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:orange;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div></div>"`;
 
 exports[`ssr snapshot test > ssr test ./examples/icon/demos/enhanced.vue 1`] = `"<div class=\\"t-demo-iconfont\\"><div><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep t-size-m\\" style=\\"\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep t-size-l\\" style=\\"\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"font-size:25px;\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"font-size:2em;\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg></div><br><div><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"color:red;\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"color:green;\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><svg class=\\"t-icon t-icon-cps-icon-home-sheep\\" style=\\"color:orange;\\"><use href=\\"#cps-icon-home-sheep\\"></use></svg><!-- 引入新 Icon 之后，内置 Icon 依旧有效。name 传入图标名称全称。 --><svg class=\\"t-icon t-icon-t-icon-home\\" style=\\"\\"><use href=\\"#t-icon-home\\"></use></svg></div></div>"`;
diff --git a/test/unit/guide/__snapshots__/demo.test.js.snap b/test/unit/guide/__snapshots__/demo.test.js.snap
new file mode 100644
index 0000000000..0f7c80081f
--- /dev/null
+++ b/test/unit/guide/__snapshots__/demo.test.js.snap
@@ -0,0 +1,78 @@
+// Vitest Snapshot v1
+
+exports[`Guide > base demo works fine 1`] = `
+<t-row
+  justify="center"
+>
+  <t-button>
+    新手引导
+  </t-button>
+  <t-drawer
+    destroy-on-close=""
+    header="演示新手引导"
+    show-overlay="false"
+    size="60%"
+    visible="false"
+  >
+    <div
+      class="guide-container"
+    >
+      <div
+        class="main-title"
+      >
+        <div
+          class="title-major"
+        >
+          Guide 用户引导
+        </div>
+        <div
+          class="title-sub"
+        >
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </div>
+      </div>
+      <div
+        class="field label-field"
+      >
+        <div
+          class="label"
+        >
+          Label
+        </div>
+        <t-input
+          placeholder="请输入内容"
+        />
+      </div>
+      <div
+        class="field"
+      >
+        <div
+          class="label"
+        >
+          Label
+        </div>
+        <t-input
+          placeholder="请输入内容"
+        />
+      </div>
+      <t-row
+        class="action"
+      >
+        <t-button>
+          确定
+        </t-button>
+        <t-button
+          theme="default"
+          variant="base"
+        >
+          取消
+        </t-button>
+      </t-row>
+    </div>
+    <t-guide
+      modelvalue="-1"
+      steps="[object Object],[object Object],[object Object]"
+    />
+  </t-drawer>
+</t-row>
+`;
diff --git a/test/unit/guide/index.test.js b/test/unit/guide/index.test.jsx
similarity index 91%
rename from test/unit/guide/index.test.js
rename to test/unit/guide/index.test.jsx
index 92569d7f82..89aa5d3316 100644
--- a/test/unit/guide/index.test.js
+++ b/test/unit/guide/index.test.jsx
@@ -16,7 +16,9 @@ describe('Guide', () => {
   });
 
   // test events
-  describe('@event', () => {});
+  describe('@event', () => {
+    it('', () => {});
+  });
 
   // test slots
   describe('<slot>', () => {

From bee50c1690365149fb06c063982d2c5c67f105ec Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 15:17:10 +0800
Subject: [PATCH 26/48] chore(guide): update common commit

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

diff --git a/src/_common b/src/_common
index eb16719d77..ec2c24cb0b 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit eb16719d7799764fc3d98880f4409adfc7c1e203
+Subproject commit ec2c24cb0b4bebf5c3c22fe2b6956b69f8d0ca30

From 540a285453e7810bebed83f9c8f600546711facc Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 15:39:31 +0800
Subject: [PATCH 27/48] fix(guide): spell error

---
 examples/guide/demos/base.vue                 |  4 ++--
 examples/guide/demos/custom-popup.vue         |  4 ++--
 examples/guide/demos/dialog.vue               |  4 ++--
 examples/guide/demos/guide.vue                |  4 ++--
 examples/guide/demos/no-mask.vue              |  4 ++--
 examples/guide/demos/popup-dialog.vue         |  4 ++--
 src/guide/const/index.ts                      |  2 +-
 src/guide/guide.tsx                           | 24 +++++++++----------
 ...ativePositon.ts => getRelativePosition.ts} |  2 +-
 src/guide/utils/index.ts                      |  4 ++--
 10 files changed, 28 insertions(+), 28 deletions(-)
 rename src/guide/utils/{getRelativePositon.ts => getRelativePosition.ts} (90%)

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index 49f11ff8c3..f7ca4ef490 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -28,7 +28,7 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handelClickPrevStep"
+        @click-prev-step="handleClickPrevStep"
         @click-next-step="handleClickNextStep"
         @finish="handleFinish"
         @skip="handleSkip"
@@ -75,7 +75,7 @@ const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
 
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/examples/guide/demos/custom-popup.vue b/examples/guide/demos/custom-popup.vue
index 608fc7dea4..2527112bcc 100644
--- a/examples/guide/demos/custom-popup.vue
+++ b/examples/guide/demos/custom-popup.vue
@@ -28,7 +28,7 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handelClickPrevStep"
+        @click-prev-step="handleClickPrevStep"
         @click-next-step="handleClickNextStep"
         @finish="handleFinish"
         @skip="handleSkip"
@@ -79,7 +79,7 @@ const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
 
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/examples/guide/demos/dialog.vue b/examples/guide/demos/dialog.vue
index 60378c8f62..f8b21249e6 100644
--- a/examples/guide/demos/dialog.vue
+++ b/examples/guide/demos/dialog.vue
@@ -29,7 +29,7 @@
         :steps="steps"
         mode="dialog"
         @change="handleChange"
-        @click-prev-step="handelClickPrevStep"
+        @click-prev-step="handleClickPrevStep"
         @click-next-step="handleClickNextStep"
         @finish="handleFinish"
         @skip="handleSkip"
@@ -76,7 +76,7 @@ const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
 
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index e54171242d..3b380715b3 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -11,7 +11,7 @@
       :steps="steps"
       :finish-button-props="{ content: '自定义完成' }"
       @change="handleChange"
-      @click-prev-step="handelClickPrevStep"
+      @click-prev-step="handleClickPrevStep"
       @click-next-step="handleClickNextStep"
       @finish="handleFinish"
       @skip="handleSkip"
@@ -64,7 +64,7 @@ const handelStart = () => {
 const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/examples/guide/demos/no-mask.vue b/examples/guide/demos/no-mask.vue
index 97e8e666d9..69d3024b76 100644
--- a/examples/guide/demos/no-mask.vue
+++ b/examples/guide/demos/no-mask.vue
@@ -29,7 +29,7 @@
         :steps="steps"
         :show-overlay="false"
         @change="handleChange"
-        @click-prev-step="handelClickPrevStep"
+        @click-prev-step="handleClickPrevStep"
         @click-next-step="handleClickNextStep"
         @finish="handleFinish"
         @skip="handleSkip"
@@ -76,7 +76,7 @@ const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
 
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/examples/guide/demos/popup-dialog.vue b/examples/guide/demos/popup-dialog.vue
index fc1a77e32b..3f25d96e4b 100644
--- a/examples/guide/demos/popup-dialog.vue
+++ b/examples/guide/demos/popup-dialog.vue
@@ -28,7 +28,7 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handelClickPrevStep"
+        @click-prev-step="handleClickPrevStep"
         @click-next-step="handleClickNextStep"
         @finish="handleFinish"
         @skip="handleSkip"
@@ -76,7 +76,7 @@ const handleChange = (current, total, context) => {
   console.log(current, total, context);
 };
 
-const handelClickPrevStep = (prev, current, total, context) => {
+const handleClickPrevStep = (prev, current, total, context) => {
   console.log(prev, current, total, context);
 };
 
diff --git a/src/guide/const/index.ts b/src/guide/const/index.ts
index 2f13a3961e..a2749526c6 100644
--- a/src/guide/const/index.ts
+++ b/src/guide/const/index.ts
@@ -1,6 +1,6 @@
 import { CrossProps } from '../type';
 
-export const defalutCrossProps: CrossProps = {
+export const defaultCrossProps: CrossProps = {
   showOverlay: true,
   mode: 'popup',
 };
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 6f777119f7..f86c27e38a 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -3,11 +3,11 @@ import { defineComponent, computed, nextTick, onMounted, ref, toRefs, watch } fr
 import props from './props';
 
 import { TdGuideProps, CrossProps } from './type';
-import { defalutCrossProps } from './const';
+import { defaultCrossProps } from './const';
 import {
   setStyle,
   scrollToParentVisibleArea,
-  getRelativePositon,
+  getRelativePosition,
   getTargetElm,
   scrollTo,
   isFixed,
@@ -63,11 +63,11 @@ export default defineComponent({
     const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
     const getCurrentCrossProps = <Key extends keyof CrossProps>(propsName: Key) =>
-      currentStepInfo.value[propsName] ?? props[propsName] ?? defalutCrossProps[propsName];
+      currentStepInfo.value[propsName] ?? props[propsName] ?? defaultCrossProps[propsName];
 
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
-      let { top, left } = getRelativePositon(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
+      let { top, left } = getRelativePosition(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
       const { width, height } = nextHighlightLayerElm.value.getBoundingClientRect();
 
       if (!isPopup.value) {
@@ -98,7 +98,7 @@ export default defineComponent({
       });
     };
 
-    const destoryTooltipElm = () => {
+    const destroyTooltipElm = () => {
       removeElm(referenceLayerRef.value);
     };
 
@@ -113,24 +113,24 @@ export default defineComponent({
       });
     };
 
-    const destoryDialogTooltipElm = () => {
+    const destroyDialogTooltipElm = () => {
       removeElm(dialogTooltipRef.value);
       removeElm(dialogWrapperRef.value);
     };
 
     const showGuide = () => {
       if (isPopup.value) {
-        destoryDialogTooltipElm();
+        destroyDialogTooltipElm();
         showPopupGuide();
       } else {
-        destoryTooltipElm();
+        destroyTooltipElm();
         showDialogGuide();
       }
     };
 
-    const destoryGuide = () => {
-      destoryTooltipElm();
-      destoryDialogTooltipElm();
+    const destroyGuide = () => {
+      destroyTooltipElm();
+      destroyDialogTooltipElm();
       removeElm(highlightLayerRef.value);
       removeElm(overlayLayerRef.value);
       removeClass(document.body, LOCK_CLASS.value);
@@ -173,7 +173,7 @@ export default defineComponent({
         initGuide();
       } else {
         actived.value = false;
-        destoryGuide();
+        destroyGuide();
       }
     });
 
diff --git a/src/guide/utils/getRelativePositon.ts b/src/guide/utils/getRelativePosition.ts
similarity index 90%
rename from src/guide/utils/getRelativePositon.ts
rename to src/guide/utils/getRelativePosition.ts
index 1fa911351a..9cca63087f 100644
--- a/src/guide/utils/getRelativePositon.ts
+++ b/src/guide/utils/getRelativePosition.ts
@@ -6,7 +6,7 @@ import getWindowScroll from './getWindowScroll';
  * 获取元素相对于另一个元素的位置（或者说相对于 body）
  * 感谢 `meouw`: http://stackoverflow.com/a/442474/375966
  */
-export default function getRelativePositon(elm: HTMLElement, relativeElm: HTMLElement = document.body) {
+export default function getRelativePosition(elm: HTMLElement, relativeElm: HTMLElement = document.body) {
   const { scrollTop, scrollLeft } = getWindowScroll();
   const { top: elmTop, left: elmLeft } = elm.getBoundingClientRect();
   const { top: relElmTop, left: relElmLeft } = relativeElm.getBoundingClientRect();
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index 01cab735e4..1d5a5f49d0 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -1,6 +1,6 @@
 import setStyle from './setStyle';
 import { scrollToParentVisibleArea } from './getScrollParent';
-import getRelativePositon from './getRelativePositon';
+import getRelativePosition from './getRelativePosition';
 import getTargetElm from './getTargetElm';
 import scrollTo from './scrollTo';
 import isFixed from './isFixed';
@@ -10,7 +10,7 @@ import removeElm from './removeElm';
 export {
   setStyle,
   scrollToParentVisibleArea,
-  getRelativePositon,
+  getRelativePosition,
   getTargetElm,
   scrollTo,
   isFixed,

From a191bff846a068c11b78401378e0da04d9f6c326 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 15:41:37 +0800
Subject: [PATCH 28/48] test: update snap

---
 test/snap/__snapshots__/csr.test.js.snap | 30 ++++++++++++++++--------
 test/snap/__snapshots__/ssr.test.js.snap | 10 ++++----
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index d35b1ab072..e4a5313bb8 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -58879,7 +58879,7 @@ exports[`csr snapshot test > csr test ./examples/grid/demos/valign.vue 1`] = `
 
 exports[`csr snapshot test > csr test ./examples/guide/demos/base.vue 1`] = `
 <div
-  class="t-row t-row--center t-row--top"
+  class="t-row t-row--center t-row--align-top"
   style="margin-left: 0px; margin-right: 0px;"
 >
   
@@ -58955,6 +58955,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/base.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
@@ -58983,12 +58984,13 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/base.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
           </div>
           <div
-            class="t-row t-row--start t-row--top action"
+            class="t-row t-row--start t-row--align-top action"
             style="margin-left: 0px; margin-right: 0px;"
           >
             
@@ -59051,7 +59053,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/base.vue 1`] = `
 
 exports[`csr snapshot test > csr test ./examples/guide/demos/custom-popup.vue 1`] = `
 <div
-  class="t-row t-row--center t-row--top"
+  class="t-row t-row--center t-row--align-top"
   style="margin-left: 0px; margin-right: 0px;"
 >
   
@@ -59127,6 +59129,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/custom-popup.vue 1`
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
@@ -59155,12 +59158,13 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/custom-popup.vue 1`
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
           </div>
           <div
-            class="t-row t-row--start t-row--top action"
+            class="t-row t-row--start t-row--align-top action"
             style="margin-left: 0px; margin-right: 0px;"
           >
             
@@ -59223,7 +59227,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/custom-popup.vue 1`
 
 exports[`csr snapshot test > csr test ./examples/guide/demos/dialog.vue 1`] = `
 <div
-  class="t-row t-row--center t-row--top"
+  class="t-row t-row--center t-row--align-top"
   style="margin-left: 0px; margin-right: 0px;"
 >
   
@@ -59299,6 +59303,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/dialog.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
@@ -59327,12 +59332,13 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/dialog.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
           </div>
           <div
-            class="t-row t-row--start t-row--top action"
+            class="t-row t-row--start t-row--align-top action"
             style="margin-left: 0px; margin-right: 0px;"
           >
             
@@ -59526,7 +59532,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/my-popup.vue 1`] =
 
 exports[`csr snapshot test > csr test ./examples/guide/demos/no-mask.vue 1`] = `
 <div
-  class="t-row t-row--center t-row--top"
+  class="t-row t-row--center t-row--align-top"
   style="margin-left: 0px; margin-right: 0px;"
 >
   
@@ -59602,6 +59608,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/no-mask.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
@@ -59630,12 +59637,13 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/no-mask.vue 1`] = `
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
           </div>
           <div
-            class="t-row t-row--start t-row--top action"
+            class="t-row t-row--start t-row--align-top action"
             style="margin-left: 0px; margin-right: 0px;"
           >
             
@@ -59698,7 +59706,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/no-mask.vue 1`] = `
 
 exports[`csr snapshot test > csr test ./examples/guide/demos/popup-dialog.vue 1`] = `
 <div
-  class="t-row t-row--center t-row--top"
+  class="t-row t-row--center t-row--align-top"
   style="margin-left: 0px; margin-right: 0px;"
 >
   
@@ -59774,6 +59782,7 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/popup-dialog.vue 1`
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
@@ -59802,12 +59811,13 @@ exports[`csr snapshot test > csr test ./examples/guide/demos/popup-dialog.vue 1`
                 <!---->
                 <!---->
                 <!---->
+                <!---->
               </div>
               <!---->
             </div>
           </div>
           <div
-            class="t-row t-row--start t-row--top action"
+            class="t-row t-row--start t-row--align-top action"
             style="margin-left: 0px; margin-right: 0px;"
           >
             
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 9ec2b36a96..c7b870a672 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -420,11 +420,11 @@ exports[`ssr snapshot test > ssr test ./examples/grid/demos/sort.vue 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test ./examples/grid/demos/valign.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><p>align top</p><div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div><p>align middle</p><div class=\\"t-row t-row--space-around t-row--align-middle\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div><p>align bottom</p><div class=\\"t-row t-row--space-between t-row--align-bottom\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div></div>"`;
 
-exports[`ssr snapshot test > ssr test ./examples/guide/demos/base.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/base.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./examples/guide/demos/custom-popup.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field-1\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field label-field-2\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/custom-popup.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field-1\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field label-field-2\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./examples/guide/demos/dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./examples/guide/demos/guide.vue 1`] = `"<div class=\\"guide-wrap-demo\\" data-v-6b4c1b5c><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-6b4c1b5c><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div id=\\"guide1\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide1</div><div id=\\"guide2\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide2</div><div id=\\"guide3\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide3</div><div id=\\"guide4\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide4</div><div id=\\"guide5\\" class=\\"guide-item\\" data-v-6b4c1b5c>guide5</div><!--[--><!----><!--]--></div>"`;
 
@@ -435,9 +435,9 @@ exports[`ssr snapshot test > ssr test ./examples/guide/demos/highlightContent.vu
 
 exports[`ssr snapshot test > ssr test ./examples/guide/demos/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
 
-exports[`ssr snapshot test > ssr test ./examples/guide/demos/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./examples/guide/demos/popup-dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./examples/guide/demos/popup-dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./examples/icon/demos/base.vue 1`] = `"<div class=\\"t-demo-iconfont\\"><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-loading\\" style=\\"color:#999999;\\"><use href=\\"#t-icon-loading\\"></use></svg><svg class=\\"t-icon t-icon-close\\" style=\\"\\"><use href=\\"#t-icon-close\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><br><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-check-circle-filled t-size-s\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled t-size-m\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled t-size-l\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:25px;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:2em;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><br><div class=\\"t-demo-row\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:red;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:green;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:orange;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div></div>"`;
 

From 16ffeedd1f3b5606269794bbdccf081e91ef0ac1 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 15:47:00 +0800
Subject: [PATCH 29/48] chore(guide): spell error

---
 examples/guide/demos/guide.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
index 3b380715b3..0a9d33dbd2 100644
--- a/examples/guide/demos/guide.vue
+++ b/examples/guide/demos/guide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="guide-wrap-demo">
-    <t-button @click="handelStart">新手引导</t-button>
+    <t-button @click="handleStart">新手引导</t-button>
     <div id="guide1" class="guide-item">guide1</div>
     <div id="guide2" class="guide-item">guide2</div>
     <div id="guide3" class="guide-item">guide3</div>
@@ -57,7 +57,7 @@ const steps = [
 
 const current = ref(-1);
 
-const handelStart = () => {
+const handleStart = () => {
   current.value = 0;
 };
 

From 50d71e73d8fcc6c51f00326f777df69932da978d Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 16:23:02 +0800
Subject: [PATCH 30/48] fix(guide): dialog padding should invalid

---
 src/guide/guide.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index f86c27e38a..4520707097 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -68,20 +68,25 @@ export default defineComponent({
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
       let { top, left } = getRelativePosition(nextHighlightLayerElm.value, currentHighlightLayerElm.value);
-      const { width, height } = nextHighlightLayerElm.value.getBoundingClientRect();
+      let { width, height } = nextHighlightLayerElm.value.getBoundingClientRect();
+      const highlightPadding = getCurrentCrossProps('highlightPadding');
 
-      if (!isPopup.value) {
+      if (isPopup.value) {
+        width += highlightPadding * 2;
+        height += highlightPadding * 2;
+        top -= highlightPadding;
+        left -= highlightPadding;
+      } else {
         const { scrollTop, scrollLeft } = getWindowScroll();
         top += scrollTop;
         left += scrollLeft;
       }
 
-      const highlightPadding = getCurrentCrossProps('highlightPadding');
       setStyle(highlighLayer, {
-        width: `${width + highlightPadding * 2}px`,
-        height: `${height + highlightPadding * 2}px`,
-        top: `${top - highlightPadding}px`,
-        left: `${left - highlightPadding}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        top: `${top}px`,
+        left: `${left}px`,
       });
     };
 

From 188e0e74521293b095fea3fe85532640d852d506 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 16:50:35 +0800
Subject: [PATCH 31/48] fix(guide): highlightContent only in popup

---
 src/guide/guide.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 4520707097..139b2bec39 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -207,7 +207,7 @@ export default defineComponent({
         const classes = [...highlightClass, `${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
         const { highlightContent } = currentStepInfo.value;
 
-        return highlightContent ? (
+        return highlightContent && isPopup.value ? (
           <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass} style={style}>
             <highlightContent class={classes} style={style} />
           </div>

From 41d89c8c54c81670d6524209a42994ca4f70164e Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 Aug 2022 20:25:07 +0800
Subject: [PATCH 32/48] feat(guide): change props name and steps desc change to
 body

---
 examples/guide/demos/base.vue         |  30 +++----
 examples/guide/demos/custom-popup.vue |  24 ++---
 examples/guide/demos/dialog-body.vue  |  23 +++++
 examples/guide/demos/dialog.vue       |  31 +++----
 examples/guide/demos/guide.vue        | 123 --------------------------
 examples/guide/demos/no-mask.vue      |  30 +++----
 examples/guide/demos/popup-dialog.vue |  31 +++----
 examples/guide/guide.en-US.md         |  40 +++++----
 examples/guide/guide.md               |  39 ++++----
 src/guide/const/index.ts              |   6 --
 src/guide/guide-step-props.ts         |  22 ++---
 src/guide/guide.tsx                   |  49 +++++++---
 src/guide/props.ts                    |  29 +++---
 src/guide/type.ts                     |  82 ++++++++---------
 14 files changed, 235 insertions(+), 324 deletions(-)
 create mode 100644 examples/guide/demos/dialog-body.vue
 delete mode 100644 examples/guide/demos/guide.vue
 delete mode 100644 src/guide/const/index.ts

diff --git a/examples/guide/demos/base.vue b/examples/guide/demos/base.vue
index f7ca4ef490..def36c5cf1 100644
--- a/examples/guide/demos/base.vue
+++ b/examples/guide/demos/base.vue
@@ -28,8 +28,8 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handleClickPrevStep"
-        @click-next-step="handleClickNextStep"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
         @finish="handleFinish"
         @skip="handleSkip"
       />
@@ -47,19 +47,19 @@ const steps = [
   {
     element: '.main-title',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: '新手引导的说明文案',
     placement: 'bottom-right',
   },
   {
     element: '.label-field',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: '新手引导的说明文案',
     placement: 'bottom',
   },
   {
     element: '.action',
     title: '新手引导标题',
-    description: '新手引导的说明方案',
+    body: '新手引导的说明文案',
     placement: 'right',
   },
 ];
@@ -71,26 +71,26 @@ const handleClick = () => {
   }, 800);
 };
 
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
 };
 
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
 };
 
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
 };
 
-const handleFinish = (current, total, context) => {
+const handleFinish = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 
-const handleSkip = (current, total, context) => {
+const handleSkip = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 </script>
 
diff --git a/examples/guide/demos/custom-popup.vue b/examples/guide/demos/custom-popup.vue
index 2527112bcc..abfcdb9dae 100644
--- a/examples/guide/demos/custom-popup.vue
+++ b/examples/guide/demos/custom-popup.vue
@@ -28,8 +28,8 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handleClickPrevStep"
-        @click-next-step="handleClickNextStep"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
         @finish="handleFinish"
         @skip="handleSkip"
       />
@@ -75,26 +75,26 @@ const handleClick = () => {
   }, 800);
 };
 
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
 };
 
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
 };
 
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
 };
 
-const handleFinish = (current, total, context) => {
+const handleFinish = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 
-const handleSkip = (current, total, context) => {
+const handleSkip = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 </script>
 
diff --git a/examples/guide/demos/dialog-body.vue b/examples/guide/demos/dialog-body.vue
new file mode 100644
index 0000000000..49c0f88a8c
--- /dev/null
+++ b/examples/guide/demos/dialog-body.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="dialog-body">
+    <img class="dialog-img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+    <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style>
+.dialog-img {
+  width: 100%;
+}
+
+p {
+  margin-top: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+</style>
diff --git a/examples/guide/demos/dialog.vue b/examples/guide/demos/dialog.vue
index f8b21249e6..f79e68c124 100644
--- a/examples/guide/demos/dialog.vue
+++ b/examples/guide/demos/dialog.vue
@@ -29,8 +29,8 @@
         :steps="steps"
         mode="dialog"
         @change="handleChange"
-        @click-prev-step="handleClickPrevStep"
-        @click-next-step="handleClickNextStep"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
         @finish="handleFinish"
         @skip="handleSkip"
       />
@@ -40,6 +40,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import DialogBody from './dialog-body.vue';
 
 const visible = ref(false);
 const current = ref(-1);
@@ -48,19 +49,19 @@ const steps = [
   {
     element: '.main-title',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: DialogBody,
     placement: 'bottom-right',
   },
   {
     element: '.label-field',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: DialogBody,
     placement: 'bottom',
   },
   {
     element: '.action',
     title: '新手引导标题',
-    description: '新手引导的说明方案',
+    body: DialogBody,
     placement: 'right',
   },
 ];
@@ -72,26 +73,26 @@ const handleClick = () => {
   }, 800);
 };
 
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
 };
 
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
 };
 
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
 };
 
-const handleFinish = (current, total, context) => {
+const handleFinish = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 
-const handleSkip = (current, total, context) => {
+const handleSkip = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 </script>
 
diff --git a/examples/guide/demos/guide.vue b/examples/guide/demos/guide.vue
deleted file mode 100644
index 0a9d33dbd2..0000000000
--- a/examples/guide/demos/guide.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <div class="guide-wrap-demo">
-    <t-button @click="handleStart">新手引导</t-button>
-    <div id="guide1" class="guide-item">guide1</div>
-    <div id="guide2" class="guide-item">guide2</div>
-    <div id="guide3" class="guide-item">guide3</div>
-    <div id="guide4" class="guide-item">guide4</div>
-    <div id="guide5" class="guide-item">guide5</div>
-    <t-guide
-      v-model="current"
-      :steps="steps"
-      :finish-button-props="{ content: '自定义完成' }"
-      @change="handleChange"
-      @click-prev-step="handleClickPrevStep"
-      @click-next-step="handleClickNextStep"
-      @finish="handleFinish"
-      @skip="handleSkip"
-    >
-      <!-- <template #counter="{ total }"> {{ current }}/{{ total }} </template> -->
-    </t-guide>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import Base from './base.vue';
-import HighlightContent from './highlightContent.vue';
-
-const steps = [
-  {
-    element: '#guide1',
-    title: '新手引导标题',
-    description: '新手引导的说明文案。',
-    nextButtonProps: { content: '自定义下一步', theme: 'success' },
-    placement: 'right',
-  },
-  {
-    element: '#guide2',
-    title: '新手引导标题',
-    description: '新手引导的说明文案。',
-    prevButtonProps: { content: '自定义上一步', theme: 'success' },
-    highlightContent: HighlightContent,
-  },
-  {
-    element: '#guide3',
-    title: '新手引导标题',
-    description: '此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。',
-    mode: 'dialog',
-    // mask: false,
-    // placement: 'center',
-    skipButtonProps: { content: '自定义跳过', variant: 'outline' },
-    content: '自定义内容',
-  },
-
-  { element: '#guide4', title: '新手引导标题', description: '新手引导的说明文案。', mask: false, placement: 'bottom' },
-  { element: '#guide5', title: '新手引导标题', description: '新手引导的说明文案。', content: (h) => h(Base) },
-];
-
-const current = ref(-1);
-
-const handleStart = () => {
-  current.value = 0;
-};
-
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
-};
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
-};
-
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
-};
-
-const handleFinish = (current, total, context) => {
-  console.log(current, total, context);
-};
-
-const handleSkip = (current, total, context) => {
-  console.log(current, total, context);
-};
-</script>
-<style scoped>
-.guide-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: aqua;
-}
-
-#guide1 {
-  width: 100px;
-  height: 100px;
-}
-
-#guide2 {
-  margin-top: 200px;
-  margin-left: 20%;
-  width: 160px;
-  height: 160px;
-}
-
-#guide3 {
-  margin-top: 400px;
-  margin-left: 80%;
-  width: 200px;
-  height: 200px;
-}
-
-#guide4 {
-  margin-top: 600px;
-  margin-left: 10%;
-  width: 300px;
-  height: 300px;
-}
-
-#guide5 {
-  margin-top: 1400px;
-  margin-left: 50%;
-  width: 400px;
-  height: 400px;
-}
-</style>
diff --git a/examples/guide/demos/no-mask.vue b/examples/guide/demos/no-mask.vue
index 69d3024b76..61fd75ff5f 100644
--- a/examples/guide/demos/no-mask.vue
+++ b/examples/guide/demos/no-mask.vue
@@ -29,8 +29,8 @@
         :steps="steps"
         :show-overlay="false"
         @change="handleChange"
-        @click-prev-step="handleClickPrevStep"
-        @click-next-step="handleClickNextStep"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
         @finish="handleFinish"
         @skip="handleSkip"
       />
@@ -48,19 +48,19 @@ const steps = [
   {
     element: '.main-title',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: '新手引导的说明文案',
     placement: 'bottom-right',
   },
   {
     element: '.label-field',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: '新手引导的说明文案',
     placement: 'bottom',
   },
   {
     element: '.action',
     title: '新手引导标题',
-    description: '新手引导的说明方案',
+    body: '新手引导的说明文案',
     placement: 'right',
   },
 ];
@@ -72,26 +72,26 @@ const handleClick = () => {
   }, 800);
 };
 
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
 };
 
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
 };
 
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
 };
 
-const handleFinish = (current, total, context) => {
+const handleFinish = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 
-const handleSkip = (current, total, context) => {
+const handleSkip = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 </script>
 
diff --git a/examples/guide/demos/popup-dialog.vue b/examples/guide/demos/popup-dialog.vue
index 3f25d96e4b..86f1b7d902 100644
--- a/examples/guide/demos/popup-dialog.vue
+++ b/examples/guide/demos/popup-dialog.vue
@@ -28,8 +28,8 @@
         v-model="current"
         :steps="steps"
         @change="handleChange"
-        @click-prev-step="handleClickPrevStep"
-        @click-next-step="handleClickNextStep"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
         @finish="handleFinish"
         @skip="handleSkip"
       />
@@ -39,6 +39,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import DialogBody from './dialog-body.vue';
 
 const visible = ref(false);
 const current = ref(-1);
@@ -47,20 +48,20 @@ const steps = [
   {
     element: '.main-title',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: '新手引导的说明文案',
     placement: 'bottom-right',
   },
   {
     element: '.label-field',
     title: '新手引导标题',
-    description: '新手引导的说明文案',
+    body: DialogBody,
     placement: 'bottom',
     mode: 'dialog',
   },
   {
     element: '.action',
     title: '新手引导标题',
-    description: '新手引导的说明方案',
+    body: '新手引导的说明文案',
     placement: 'right',
   },
 ];
@@ -72,26 +73,26 @@ const handleClick = () => {
   }, 800);
 };
 
-const handleChange = (current, total, context) => {
-  console.log(current, total, context);
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
 };
 
-const handleClickPrevStep = (prev, current, total, context) => {
-  console.log(prev, current, total, context);
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
 };
 
-const handleClickNextStep = (next, current, total, context) => {
-  console.log(next, current, total, context);
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
 };
 
-const handleFinish = (current, total, context) => {
+const handleFinish = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 
-const handleSkip = (current, total, context) => {
+const handleSkip = ({ e, current, total }) => {
   visible.value = false;
-  console.log(current, total, context);
+  console.log(e, current, total);
 };
 </script>
 
diff --git a/examples/guide/guide.en-US.md b/examples/guide/guide.en-US.md
index 7e8a3032f5..b10ffb17bc 100644
--- a/examples/guide/guide.en-US.md
+++ b/examples/guide/guide.en-US.md
@@ -1,53 +1,57 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Guide Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 counter | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-current | Number | - | `v-model` and `v-model:current` is supported | N
-defaultCurrent | Number | - | uncontrolled property | N
+current | Number | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | `v-model` and `v-model:current` is supported | N
+defaultCurrent | Number | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | uncontrolled property | N
 finishButtonProps | Object | { content: '完成', theme: 'primary' } | Typescript：`ButtonProps` | N
 hideCounter | Boolean | false | \- | N
 hidePrev | Boolean | false | \- | N
 hideSkip | Boolean | false | \- | N
-initialNum | Number | 0 | \- | N
-mask | Boolean | true | \- | N
+highlightPadding | Number | 8 | \- | N
 mode | String | popup | options：popup/dialog | N
 nextButtonProps | Object | { content: '下一步', theme: 'primary' } | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
 prevButtonProps | Object | { content: '上一步', theme: 'primary' } | Typescript：`ButtonProps` | N
+showOverlay | Boolean | true | \- | N
 skipButtonProps | Object | { content: '跳过', theme: 'default' } | Typescript：`ButtonProps` | N
 steps | Array | - | Typescript：`Array<TdGuideStepProps>` | N
-onChange | Function |  | Typescript：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
-onClickNextStep | Function |  | Typescript：`( next: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
-onClickPrevStep | Function |  | Typescript：`( prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
-onFinish | Function |  | Typescript：`( current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
-onSkip | Function |  | Typescript：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/> | N
+zIndex | Number | 999999 | \- | N
+onChange | Function |  | Typescript：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/> | N
+onFinish | Function |  | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> | N
+onNextStepClick | Function |  | Typescript：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/> | N
+onPrevStepClick | Function |  | Typescript：`(context: { e: MouseEvent, prev: number, current: number, total: number  }) => void`<br/> | N
+onSkip | Function |  | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> | N
 
 ### Guide Events
 
 name | params | description
 -- | -- | --
-change | `(current: number, total: number, context?: { e?: MouseEvent })` | \-
-click-next-step | `( next: number, current: number, total: number, context?: { e?: MouseEvent })` | \-
-click-prev-step | `( prev: number, current: number, total: number, context?: { e?: MouseEvent })` | \-
-finish | `( current: number, total: number, context?: { e?: MouseEvent })` | \-
-skip | `(current: number, total: number, context?: { e?: MouseEvent })` | \-
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | \-
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | \-
+prev-step-click | `(context: { e: MouseEvent, prev: number, current: number, total: number  })` | \-
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | \-
 
 ### GuideStep Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+body | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 children | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-description | String | - | \- | N
+content | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 element | String / Function | - | required。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | Y
+highlightContent | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+highlightPadding | Number | - | \- | N
+mode | String | - | options：popup/dialog | N
 nextButtonProps | Object | - | Typescript：`ButtonProps` | N
 offset | Array | - | Typescript：`Array<string | number>` | N
-placement | String | top | Typescript：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+placement | String | 'top' | Typescript：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
 prevButtonProps | Object | - | Typescript：`ButtonProps` | N
+showOverlay | Boolean | true | \- | N
 skipButtonProps | Object | - | Typescript：`ButtonProps` | N
 stepOverlayClass | String | - | \- | N
 title | String | - | \- | N
diff --git a/examples/guide/guide.md b/examples/guide/guide.md
index 7da6b47089..2b2a8368d5 100644
--- a/examples/guide/guide.md
+++ b/examples/guide/guide.md
@@ -5,47 +5,52 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 counter | Slot / Function | - | 用于自定义渲染计数部分。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-current | Number | - | 当前步骤，即整个引导的进度。支持语法糖 `v-model` 或 `v-model:current` | N
-defaultCurrent | Number | - | 当前步骤，即整个引导的进度。非受控属性 | N
+current | Number | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | 支持语法糖 `v-model` 或 `v-model:current` | N
+defaultCurrent | Number | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 | 非受控属性 | N
 finishButtonProps | Object | `{ content: '完成', theme: 'primary' }` | 透传 完成 的全部属性。TS 类型：`ButtonProps` | N
 hideCounter | Boolean | false | 是否隐藏计数 | N
 hidePrev | Boolean | false | 是否隐藏上一步按钮 | N
 hideSkip | Boolean | false | 是否隐藏跳过按钮 | N
-initialNum | Number | 0 | 起始序号 | N
-mask | Boolean | true | 是否出现遮罩层 | N
+highlightPadding | Number | 8 | 高亮框的内边距 | N
 mode | String | popup | 引导框的类型。可选项：popup/dialog | N
 nextButtonProps | Object | `{ content: '下一步', theme: 'primary' }` | 透传 下一步按钮 的全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
 prevButtonProps | Object | `{ content: '上一步', theme: 'primary' }` | 透传 上一步按钮 的全部属性。TS 类型：`ButtonProps` | N
+showOverlay | Boolean | true | 是否出现遮罩层 | N
 skipButtonProps | Object | `{ content: '跳过', theme: 'default' }` | 透传 跳过按钮 的全部属性。TS 类型：`ButtonProps` | N
 steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。。TS 类型：`Array<TdGuideStepProps>` | N
-onChange | Function |  | TS 类型：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
-onClickNextStep | Function |  | TS 类型：`( next: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击下一步时触发 | N
-onClickPrevStep | Function |  | TS 类型：`( prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击上一步时触发 | N
-onFinish | Function |  | TS 类型：`( current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击完成按钮时触发 | N
-onSkip | Function |  | TS 类型：`(current: number, total: number, context?: { e?: MouseEvent }) => void`<br/>点击跳过按钮时触发 | N
+zIndex | Number | 999999 | 提示框的层级 | N
+onChange | Function |  | TS 类型：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/>当前步骤发生变化时触发 | N
+onFinish | Function |  | TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击完成按钮时触发 | N
+onNextStepClick | Function |  | TS 类型：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/>点击下一步时触发 | N
+onPrevStepClick | Function |  | TS 类型：`(context: { e: MouseEvent, prev: number, current: number, total: number  }) => void`<br/>点击上一步时触发 | N
+onSkip | Function |  | TS 类型：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/>点击跳过按钮时触发 | N
 
 ### Guide Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(current: number, total: number, context?: { e?: MouseEvent })` | 当前步骤发生变化时触发
-click-next-step | `( next: number, current: number, total: number, context?: { e?: MouseEvent })` | 点击下一步时触发
-click-prev-step | `( prev: number, current: number, total: number, context?: { e?: MouseEvent })` | 点击上一步时触发
-finish | `( current: number, total: number, context?: { e?: MouseEvent })` | 点击完成按钮时触发
-skip | `(current: number, total: number, context?: { e?: MouseEvent })` | 点击跳过按钮时触发
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | 当前步骤发生变化时触发
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | 点击完成按钮时触发
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | 点击下一步时触发
+prev-step-click | `(context: { e: MouseEvent, prev: number, current: number, total: number  })` | 点击上一步时触发
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | 点击跳过按钮时触发
 
 ### GuideStep Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+body | String / Slot / Function | - | 当前步骤提示框的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 children | String / Slot / Function | - | 自定义内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-content | String / Slot / Function | - | 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-description | String | - | 当前步骤的描述内容 | N
+content | Slot / Function | - | 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 element | String / Function | - | 必需。高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | Y
+highlightContent | Slot / Function | - | 用户自定义的高亮框 (仅当 `mode` 为 `popup` 时生效)。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+highlightPadding | Number | - | 高亮框的内边距 | N
+mode | String | - | 引导框的类型。可选项：popup/dialog | N
 nextButtonProps | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
 offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']。TS 类型：`Array<string | number>` | N
-placement | String | top | 引导框相对于高亮元素出现的位置。TS 类型：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
+placement | String | 'top' | 引导框相对于高亮元素出现的位置。TS 类型：`StepPopupPlacement | StepDialogPlacement` `type StepPopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'` `type StepDialogPlacement = 'top'|'center' `。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/guide/type.ts) | N
 prevButtonProps | Object | - | 用于自定义当前引导框的上一步按钮的内容。TS 类型：`ButtonProps` | N
+showOverlay | Boolean | true | 是否出现遮罩层 | N
 skipButtonProps | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
 stepOverlayClass | String | - | 覆盖引导框的类名 | N
 title | String | - | 当前步骤的标题内容 | N
diff --git a/src/guide/const/index.ts b/src/guide/const/index.ts
deleted file mode 100644
index a2749526c6..0000000000
--- a/src/guide/const/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CrossProps } from '../type';
-
-export const defaultCrossProps: CrossProps = {
-  showOverlay: true,
-  mode: 'popup',
-};
diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts
index 40057aebd5..6fd5149acc 100644
--- a/src/guide/guide-step-props.ts
+++ b/src/guide/guide-step-props.ts
@@ -8,38 +8,34 @@ import { TdGuideStepProps } from '../guide/type';
 import { PropType } from 'vue';
 
 export default {
+  /** 当前步骤提示框的内容 */
+  body: {
+    type: [String, Function] as PropType<TdGuideStepProps['body']>,
+  },
   /** 自定义内容，同 content */
   children: {
     type: [String, Function] as PropType<TdGuideStepProps['children']>,
   },
   /** 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效） */
   content: {
-    type: [String, Function] as PropType<TdGuideStepProps['content']>,
-  },
-  /** 当前步骤的描述内容 */
-  description: {
-    type: String,
-    default: '',
+    type: Function as PropType<TdGuideStepProps['content']>,
   },
   /** 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign') */
   element: {
     type: [String, Function] as PropType<TdGuideStepProps['element']>,
     required: true,
   },
-  /**
-   * 用户定义高亮框(仅当 mode 为 popup 时生效)
-   */
+  /** 用户自定义的高亮框 (仅当 `mode` 为 `popup` 时生效) */
   highlightContent: {
-    type: [String, Function] as PropType<TdGuideStepProps['highlightContent']>,
+    type: Function as PropType<TdGuideStepProps['highlightContent']>,
   },
-  /** 高亮框的 padding */
+  /** 高亮框的内边距 */
   highlightPadding: {
     type: Number,
   },
-  /** 当期步骤引导框的类型 */
+  /** 引导框的类型 */
   mode: {
     type: String as PropType<TdGuideStepProps['mode']>,
-    default: 'popup' as TdGuideStepProps['mode'],
     validator(val: TdGuideStepProps['mode']): boolean {
       if (!val) return true;
       return ['popup', 'dialog'].includes(val);
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 139b2bec39..e0520c506d 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -2,8 +2,8 @@ import { defineComponent, computed, nextTick, onMounted, ref, toRefs, watch } fr
 
 import props from './props';
 
-import { TdGuideProps, CrossProps } from './type';
-import { defaultCrossProps } from './const';
+import { TdGuideProps, GuideCrossProps } from './type';
+
 import {
   setStyle,
   scrollToParentVisibleArea,
@@ -62,8 +62,8 @@ export default defineComponent({
     // 当前元素位置状态
     const currentElmIsFixed = computed(() => isFixed(currentHighlightLayerElm.value || document.body));
     // 获取当前步骤的所有属性 用户当前步骤设置 > 用户全局设置的 > 默认值
-    const getCurrentCrossProps = <Key extends keyof CrossProps>(propsName: Key) =>
-      currentStepInfo.value[propsName] ?? props[propsName] ?? defaultCrossProps[propsName];
+    const getCurrentCrossProps = <Key extends keyof GuideCrossProps>(propsName: Key) =>
+      currentStepInfo.value[propsName] ?? props[propsName];
 
     // 设置高亮层的位置
     const setHighlightLayerPosition = (highlighLayer: HTMLElement) => {
@@ -142,25 +142,39 @@ export default defineComponent({
     };
 
     const handleSkip = (e: MouseEvent) => {
+      const total = stepsTotal.value;
       actived.value = false;
-      setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      props.onSkip?.(-1, stepsTotal.value, { e });
+      setInnerCurrent(-1, { e, total });
+      props.onSkip?.({ e, current: -1, total });
     };
 
     const handlePrev = (e: MouseEvent) => {
-      setInnerCurrent(innerCurrent.value - 1, stepsTotal.value - 1, { e });
-      props.onClickPrevStep?.(innerCurrent.value, innerCurrent.value - 1, stepsTotal.value, { e });
+      const total = stepsTotal.value;
+      setInnerCurrent(innerCurrent.value - 1, { e, total });
+      props.onPrevStepClick?.({
+        e,
+        prev: innerCurrent.value - 1,
+        current: innerCurrent.value,
+        total,
+      });
     };
 
     const handleNext = (e: MouseEvent) => {
-      setInnerCurrent(innerCurrent.value + 1, stepsTotal.value - 1, { e });
-      props.onClickNextStep?.(innerCurrent.value, innerCurrent.value + 1, stepsTotal.value, { e });
+      const total = stepsTotal.value;
+      setInnerCurrent(innerCurrent.value + 1, { e, total });
+      props.onNextStepClick?.({
+        e,
+        next: innerCurrent.value + 1,
+        current: innerCurrent.value,
+        total,
+      });
     };
 
     const handleFinish = (e: MouseEvent) => {
+      const total = stepsTotal.value;
       actived.value = false;
-      setInnerCurrent(-1, stepsTotal.value - 1, { e });
-      props.onFinish?.(-1, stepsTotal.value - 1, { e });
+      setInnerCurrent(-1, { e, total });
+      props.onFinish?.({ e, current: -1, total });
     };
 
     const initGuide = () => {
@@ -286,7 +300,16 @@ export default defineComponent({
 
       const renderTooltipBody = () => {
         const title = <div class={`${COMPONENT_NAME.value}__title`}>{currentStepInfo.value.title}</div>;
-        const desc = <div class={`${COMPONENT_NAME.value}__desc`}>{currentStepInfo.value.description}</div>;
+        const { body: descBody } = currentStepInfo.value;
+        let renderDesc;
+        if (typeof descBody === 'string') {
+          renderDesc = descBody;
+        } else {
+          renderDesc = <descBody />;
+        }
+        const desc = (
+          <div class={`${COMPONENT_NAME.value}__desc`}>{typeof descBody === 'string' ? descBody : <descBody />}</div>
+        );
 
         return (
           <>
diff --git a/src/guide/props.ts b/src/guide/props.ts
index a0087048a2..45d85477dd 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -7,12 +7,14 @@
 import { TdGuideProps } from './type';
 import { PropType } from 'vue';
 
+import { ButtonProps } from '../button';
+
 export default {
   /** 用于自定义渲染计数部分 */
   counter: {
     type: Function as PropType<TdGuideProps['counter']>,
   },
-  /** 当前步骤，即整个引导的进度。 */
+  /** null */
   current: {
     type: Number,
     default: undefined,
@@ -21,14 +23,14 @@ export default {
     type: Number,
     default: undefined,
   },
-  /** 当前步骤，即整个引导的进度。，非受控属性 */
+  /** null，非受控属性 */
   defaultCurrent: {
     type: Number,
   },
   /** 透传 完成 的全部属性 */
   finishButtonProps: {
     type: Object as PropType<TdGuideProps['finishButtonProps']>,
-    default: { content: '完成', theme: 'primary' } as TdGuideProps['skipButtonProps'],
+    default: { content: '完成', theme: 'primary' } as ButtonProps,
   },
   /** 是否隐藏计数 */
   hideCounter: Boolean,
@@ -36,16 +38,11 @@ export default {
   hidePrev: Boolean,
   /** 是否隐藏跳过按钮 */
   hideSkip: Boolean,
-  /** 高亮框的 padding */
+  /** 高亮框的内边距 */
   highlightPadding: {
     type: Number,
     default: 8,
   },
-  /** 起始序号 */
-  initialNum: {
-    type: Number,
-    default: 0,
-  },
   /** 引导框的类型 */
   mode: {
     type: String as PropType<TdGuideProps['mode']>,
@@ -58,12 +55,12 @@ export default {
   /** 透传 下一步按钮 的全部属性 */
   nextButtonProps: {
     type: Object as PropType<TdGuideProps['nextButtonProps']>,
-    default: { content: '下一步', theme: 'primary' } as TdGuideProps['skipButtonProps'],
+    default: { content: '下一步', theme: 'primary' } as ButtonProps,
   },
   /** 透传 上一步按钮 的全部属性 */
   prevButtonProps: {
     type: Object as PropType<TdGuideProps['prevButtonProps']>,
-    default: { content: '上一步', theme: 'primary' } as TdGuideProps['skipButtonProps'],
+    default: { content: '上一步', theme: 'primary' } as ButtonProps,
   },
   /** 是否出现遮罩层 */
   showOverlay: {
@@ -73,7 +70,7 @@ export default {
   /** 透传 跳过按钮 的全部属性 */
   skipButtonProps: {
     type: Object as PropType<TdGuideProps['skipButtonProps']>,
-    default: { content: '跳过', theme: 'default' } as TdGuideProps['skipButtonProps'],
+    default: { content: '跳过', theme: 'default' } as ButtonProps,
   },
   /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。 */
   steps: {
@@ -86,12 +83,12 @@ export default {
   },
   /** 当前步骤发生变化时触发 */
   onChange: Function as PropType<TdGuideProps['onChange']>,
-  /** 点击下一步时触发 */
-  onClickNextStep: Function as PropType<TdGuideProps['onClickNextStep']>,
-  /** 点击上一步时触发 */
-  onClickPrevStep: Function as PropType<TdGuideProps['onClickPrevStep']>,
   /** 点击完成按钮时触发 */
   onFinish: Function as PropType<TdGuideProps['onFinish']>,
+  /** 点击下一步时触发 */
+  onNextStepClick: Function as PropType<TdGuideProps['onNextStepClick']>,
+  /** 点击上一步时触发 */
+  onPrevStepClick: Function as PropType<TdGuideProps['onPrevStepClick']>,
   /** 点击跳过按钮时触发 */
   onSkip: Function as PropType<TdGuideProps['onSkip']>,
 };
diff --git a/src/guide/type.ts b/src/guide/type.ts
index b829d6947e..2569d034da 100644
--- a/src/guide/type.ts
+++ b/src/guide/type.ts
@@ -13,20 +13,23 @@ export interface TdGuideProps {
    */
   counter?: TNode;
   /**
-   * 当前步骤，即整个引导的进度。
+   * null
+   * @default 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
    */
   current?: number;
   /**
-   * 当前步骤，即整个引导的进度。，非受控属性
+   * null，非受控属性
+   * @default 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
    */
   defaultCurrent?: number;
   /**
-   * 当前步骤，即整个引导的进度。
+   * null
+   * @default 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
    */
   modelValue?: number;
   /**
    * 透传 完成 的全部属性
-   * @default{ content: '完成', theme: 'primary' }
+   * @default { content: '完成', theme: 'primary' }
    */
   finishButtonProps?: ButtonProps;
   /**
@@ -45,13 +48,8 @@ export interface TdGuideProps {
    */
   hideSkip?: boolean;
   /**
-   * 起始序号
-   * @default 0
-   */
-  initialNum?: number;
-  /**
-   * 高亮框的 padding
-   * @default 2
+   * 高亮框的内边距
+   * @default 8
    */
   highlightPadding?: number;
   /**
@@ -61,12 +59,12 @@ export interface TdGuideProps {
   mode?: 'popup' | 'dialog';
   /**
    * 透传 下一步按钮 的全部属性
-   * @default{ content: '下一步', theme: 'primary' }
+   * @default { content: '下一步', theme: 'primary' }
    */
   nextButtonProps?: ButtonProps;
   /**
    * 透传 上一步按钮 的全部属性
-   * @default{ content: '上一步', theme: 'primary' }
+   * @default { content: '上一步', theme: 'primary' }
    */
   prevButtonProps?: ButtonProps;
   /**
@@ -83,58 +81,60 @@ export interface TdGuideProps {
    * 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。
    */
   steps?: Array<TdGuideStepProps>;
+  /**
+   * 提示框的层级
+   * @default 999999
+   */
+  zIndex?: number;
   /**
    * 当前步骤发生变化时触发
    */
-  onChange?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+  onChange?: (current: number, context?: { e: MouseEvent; total: number }) => void;
   /**
-   * 点击下一步时触发
+   * 点击完成按钮时触发
    */
-  onClickNextStep?: (next: number, current: number, total: number, context?: { e?: MouseEvent }) => void;
+  onFinish?: (context: { e: MouseEvent; current: number; total: number }) => void;
   /**
-   * 点击上一步时触发
+   * 点击下一步时触发
    */
-  onClickPrevStep?: (prev: number, current: number, total: number, context?: { e?: MouseEvent }) => void;
+  onNextStepClick?: (context: { e: MouseEvent; next: number; current: number; total: number }) => void;
   /**
-   * 点击完成按钮时触发
+   * 点击上一步时触发
    */
-  onFinish?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+  onPrevStepClick?: (context: { e: MouseEvent; prev: number; current: number; total: number }) => void;
   /**
    * 点击跳过按钮时触发
    */
-  onSkip?: (current: number, total: number, context?: { e?: MouseEvent }) => void;
+  onSkip?: (context: { e: MouseEvent; current: number; total: number }) => void;
 }
 
 export interface TdGuideStepProps {
+  /**
+   * 当前步骤提示框的内容
+   */
+  body?: string | TNode;
   /**
    * 自定义内容，同 content
    */
   children?: string | TNode;
   /**
-   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效
+   * 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效）
    */
-  content?: string | TNode;
-  /**
-   * 当前步骤的描述内容
-   * @default ''
-   */
-  description?: string;
+  content?: TNode;
   /**
    * 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign')
    */
   element: AttachNode;
   /**
-   * 用户定义高亮框(仅当 mode 为 popup 时生效)
+   * 用户自定义的高亮框 (仅当 `mode` 为 `popup` 时生效)
    */
-  highlightContent?: string | TNode;
+  highlightContent?: TNode;
   /**
-   * 高亮框的 padding
-   * @default 2
+   * 高亮框的内边距
    */
   highlightPadding?: number;
   /**
-   * 当前步骤引导框的类型
-   * @default popup
+   * 引导框的类型
    */
   mode?: 'popup' | 'dialog';
   /**
@@ -147,7 +147,7 @@ export interface TdGuideStepProps {
   offset?: Array<string | number>;
   /**
    * 引导框相对于高亮元素出现的位置
-   * @default top
+   * @default 'top'
    */
   placement?: StepPopupPlacement | StepDialogPlacement;
   /**
@@ -173,11 +173,6 @@ export interface TdGuideStepProps {
    * @default ''
    */
   title?: string;
-  /**
-   * 提示框的层级
-   * @default 999999
-   */
-  zIndex?: number;
 }
 
 export type StepPopupPlacement =
@@ -196,12 +191,7 @@ export type StepPopupPlacement =
 
 export type StepDialogPlacement = 'top' | 'center';
 
-export type CrossProps = Pick<
+export type GuideCrossProps = Pick<
   TdGuideStepProps,
   'mode' | 'skipButtonProps' | 'prevButtonProps' | 'nextButtonProps' | 'showOverlay' | 'highlightPadding'
 >;
-
-export type ScrollTo = {
-  x: number;
-  y: number;
-};

From 32faf99e1fd1628c31a04f5e08813a2e42707a4c Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Wed, 31 Aug 2022 14:38:19 +0800
Subject: [PATCH 33/48] chore(guide): update common

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

diff --git a/src/_common b/src/_common
index ec2c24cb0b..7cf618789c 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit ec2c24cb0b4bebf5c3c22fe2b6956b69f8d0ca30
+Subproject commit 7cf618789cc347a1ff781a71df2339e31fd211e8

From b24dd8062fab7e622e4bdb60298eec7f41a807c0 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 2 Sep 2022 12:49:11 +0800
Subject: [PATCH 34/48] feat(guide): prev button use default theme and add
 intro

---
 src/_common        | 2 +-
 src/guide/props.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/_common b/src/_common
index 7cf618789c..9be237f39d 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 7cf618789cc347a1ff781a71df2339e31fd211e8
+Subproject commit 9be237f39dd771f882c52bcdd99b81d444c56405
diff --git a/src/guide/props.ts b/src/guide/props.ts
index 45d85477dd..ff74dee635 100644
--- a/src/guide/props.ts
+++ b/src/guide/props.ts
@@ -60,7 +60,7 @@ export default {
   /** 透传 上一步按钮 的全部属性 */
   prevButtonProps: {
     type: Object as PropType<TdGuideProps['prevButtonProps']>,
-    default: { content: '上一步', theme: 'primary' } as ButtonProps,
+    default: { content: '上一步', theme: 'default' } as ButtonProps,
   },
   /** 是否出现遮罩层 */
   showOverlay: {

From 1dbcd6d15f7602c8fa7938aaf1b12a3dceae1a06 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 2 Sep 2022 12:52:04 +0800
Subject: [PATCH 35/48] revert(guide): revert vscode/settings

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0e6b698cbf..a6a2fd5fdb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,7 +7,7 @@
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "[javascriptreact]": {
     "editor.formatOnSave": true,

From 7686ac8b6d9b236d9123e9c1d7f9adb6188b13f9 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 2 Sep 2022 12:53:52 +0800
Subject: [PATCH 36/48] chore(_common): update _common

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

diff --git a/src/_common b/src/_common
index 9be237f39d..45fbe43cdf 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 9be237f39dd771f882c52bcdd99b81d444c56405
+Subproject commit 45fbe43cdf68f9056a5db0bb86fca8582f07a325

From 7d976c4b8d628be185c3ba904cf7c5fadf71b12f Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 2 Sep 2022 14:34:05 +0800
Subject: [PATCH 37/48] feat(guide): vmp

---
 src/guide/_example/my-popup.vue | 2 +-
 src/guide/guide.tsx             | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/guide/_example/my-popup.vue b/src/guide/_example/my-popup.vue
index ed55514664..4de09d51de 100644
--- a/src/guide/_example/my-popup.vue
+++ b/src/guide/_example/my-popup.vue
@@ -4,7 +4,7 @@
     <p class="popup-desc">自定义的图形或说明文案，用来解释或指导该功能使用。</p>
     <div class="popup-action">
       <t-button theme="default" size="small" @click="handleSkip"> 跳过 </t-button>
-      <t-button v-if="current !== 0" theme="primary" size="small" @click="handlePrev"> 上一步 </t-button>
+      <t-button v-if="current !== 0" theme="default" size="small" @click="handlePrev"> 上一步 </t-button>
       <t-button v-if="current + 1 < total" theme="primary" size="small" @click="handleNext"> 下一步 </t-button>
       <t-button v-if="current + 1 === total" theme="primary" size="small" @click="handleFinish"> 完成 </t-button>
     </div>
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index e0520c506d..2a016e2020 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -35,7 +35,13 @@ export default defineComponent({
     const LOCK_CLASS = usePrefixClass('guide--lock');
 
     const { current, modelValue, hideCounter, hidePrev, hideSkip, steps, zIndex } = toRefs(props);
-    const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, props.onChange);
+    const [innerCurrent, setInnerCurrent] = useVModel(
+      current,
+      modelValue,
+      props.defaultCurrent,
+      props.onChange,
+      'current',
+    );
 
     // 覆盖层，用于覆盖所有元素
     const overlayLayerRef = ref<HTMLElement>();

From 1330ab7050d07f180da12af0d405d8435f92e65d Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Fri, 2 Sep 2022 14:36:03 +0800
Subject: [PATCH 38/48] chore(guide): update snap

---
 .../__snapshots__/index.test.jsx.snap         | 567 +-----------------
 test/snap/__snapshots__/csr.test.js.snap      |   2 +-
 test/snap/__snapshots__/ssr.test.js.snap      |   2 +-
 3 files changed, 24 insertions(+), 547 deletions(-)

diff --git a/src/jumper/__tests__/__snapshots__/index.test.jsx.snap b/src/jumper/__tests__/__snapshots__/index.test.jsx.snap
index d3e6e8ffb3..8c7abe9999 100644
--- a/src/jumper/__tests__/__snapshots__/index.test.jsx.snap
+++ b/src/jumper/__tests__/__snapshots__/index.test.jsx.snap
@@ -1,78 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`Jumper > :props > :disabled 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-is-disabled t-button--shape-square t-button--icon-only t-jumper__prev"
-    disabled=""
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-is-disabled t-button--shape-square t-button--icon-only t-jumper__current"
-    disabled=""
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-is-disabled t-button--shape-square t-button--icon-only t-jumper__next"
-    disabled=""
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
 exports[`Jumper > :props > :disabled, default 1`] = `
 <div
   class="t-jumper"
@@ -569,7 +496,7 @@ exports[`Jumper > :props > :layout:vertical 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :showCurrent 1`] = `
+exports[`Jumper > :props > :showCurrent:false 1`] = `
 <div
   class="t-jumper"
 >
@@ -594,27 +521,7 @@ exports[`Jumper > :props > :showCurrent 1`] = `
     
     
   </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
+  <!---->
   <button
     class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
     type="button"
@@ -639,7 +546,7 @@ exports[`Jumper > :props > :showCurrent 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :showCurrent, default 1`] = `
+exports[`Jumper > :props > :showCurrent:true, default 1`] = `
 <div
   class="t-jumper"
 >
@@ -709,12 +616,12 @@ exports[`Jumper > :props > :showCurrent, default 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :showCurrent, false 1`] = `
+exports[`Jumper > :props > :size:large 1`] = `
 <div
   class="t-jumper"
 >
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
+    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
     type="button"
   >
     
@@ -734,49 +641,20 @@ exports[`Jumper > :props > :showCurrent, false 1`] = `
     
     
   </button>
-  <!---->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :showCurrent, with false 1`] = `
-<div
-  class="t-jumper"
->
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
+    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
     type="button"
   >
     
     <svg
-      class="t-icon t-icon-chevron-left"
+      class="t-icon t-icon-round"
       fill="none"
       height="1em"
       viewBox="0 0 16 16"
       width="1em"
     >
       <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
         fill="currentColor"
         fill-opacity="0.9"
       />
@@ -784,9 +662,8 @@ exports[`Jumper > :props > :showCurrent, with false 1`] = `
     
     
   </button>
-  <!---->
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
+    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
     type="button"
   >
     
@@ -809,7 +686,7 @@ exports[`Jumper > :props > :showCurrent, with false 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :showCurrent:default 1`] = `
+exports[`Jumper > :props > :size:medium, default 1`] = `
 <div
   class="t-jumper"
 >
@@ -879,62 +756,12 @@ exports[`Jumper > :props > :showCurrent:default 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :showCurrent:false 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <!---->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :showCurrent:true, default 1`] = `
+exports[`Jumper > :props > :size:small 1`] = `
 <div
   class="t-jumper"
 >
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
+    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
     type="button"
   >
     
@@ -955,7 +782,7 @@ exports[`Jumper > :props > :showCurrent:true, default 1`] = `
     
   </button>
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
+    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
     type="button"
   >
     
@@ -976,7 +803,7 @@ exports[`Jumper > :props > :showCurrent:true, default 1`] = `
     
   </button>
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
+    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
     type="button"
   >
     
@@ -999,12 +826,12 @@ exports[`Jumper > :props > :showCurrent:true, default 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :size:large 1`] = `
+exports[`Jumper > :props > :variant, default 1`] = `
 <div
   class="t-jumper"
 >
   <button
-    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
+    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
     type="button"
   >
     
@@ -1025,7 +852,7 @@ exports[`Jumper > :props > :size:large 1`] = `
     
   </button>
   <button
-    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
+    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
     type="button"
   >
     
@@ -1046,7 +873,7 @@ exports[`Jumper > :props > :size:large 1`] = `
     
   </button>
   <button
-    class="t-button t-size-l t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
+    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
     type="button"
   >
     
@@ -1069,12 +896,12 @@ exports[`Jumper > :props > :size:large 1`] = `
 </div>
 `;
 
-exports[`Jumper > :props > :size:medium 1`] = `
+exports[`Jumper > :props > :variant:outline 1`] = `
 <div
-  class="t-jumper"
+  class="t-jumper t-jumper--outline"
 >
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
+    class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
     type="button"
   >
     
@@ -1095,287 +922,7 @@ exports[`Jumper > :props > :size:medium 1`] = `
     
   </button>
   <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :size:medium, default 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :size:small 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-s t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :variant, default 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
-
-exports[`Jumper > :props > :variant:outline 1`] = `
-<div
-  class="t-jumper t-jumper--outline"
->
-  <button
-    class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
+    class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
     type="button"
   >
     
@@ -1418,73 +965,3 @@ exports[`Jumper > :props > :variant:outline 1`] = `
   </button>
 </div>
 `;
-
-exports[`Jumper > :props > :variant:text, default 1`] = `
-<div
-  class="t-jumper"
->
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__prev"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-left"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__current"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-round"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M8 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM8 13A5 5 0 108 3a5 5 0 000 10z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-  <button
-    class="t-button t-size-m t-button--variant-text t-button--theme-default t-button--shape-square t-button--icon-only t-jumper__next"
-    type="button"
-  >
-    
-    <svg
-      class="t-icon t-icon-chevron-right"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    
-  </button>
-</div>
-`;
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index ddf9f26183..9c8a679dbc 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -59470,7 +59470,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
       </span>
     </button>
     <button
-      class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+      class="t-button t-size-s t-button--variant-base t-button--theme-default"
       type="button"
     >
       <span
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 3e51d89e06..ce78d5628d 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -433,7 +433,7 @@ exports[`ssr snapshot test > ssr test ./src/guide/_example/highlightContent.vue
    --><img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset><!--]-->"
 `;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/guide/_example/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 

From 1f7bb465d786b49cf7db4424af3c26abcf2bec45 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 5 Sep 2022 14:44:27 +0800
Subject: [PATCH 39/48] feat(guide): some optimization and some change

---
 .../guide/__test__}/index.test.jsx            |  0
 src/guide/_example/highlightContent.vue       |  2 -
 src/guide/guide.tsx                           | 19 +++--
 src/guide/utils/elementInViewport.ts          | 12 ++-
 src/guide/utils/getScrollParent.ts            |  4 +
 src/guide/utils/getWindowSize.ts              |  2 +-
 src/guide/utils/index.ts                      | 12 +--
 src/guide/utils/setStyle.ts                   | 17 ----
 src/index.ts                                  |  1 -
 test/snap/__snapshots__/csr.test.js.snap      | 20 ++---
 test/snap/__snapshots__/ssr.test.js.snap      |  5 +-
 .../guide/__snapshots__/demo.test.js.snap     | 78 -------------------
 test/unit/guide/demo.test.js                  | 10 ---
 13 files changed, 35 insertions(+), 147 deletions(-)
 rename {test/unit/guide => src/guide/__test__}/index.test.jsx (100%)
 delete mode 100644 src/guide/utils/setStyle.ts
 delete mode 100644 test/unit/guide/__snapshots__/demo.test.js.snap
 delete mode 100644 test/unit/guide/demo.test.js

diff --git a/test/unit/guide/index.test.jsx b/src/guide/__test__/index.test.jsx
similarity index 100%
rename from test/unit/guide/index.test.jsx
rename to src/guide/__test__/index.test.jsx
diff --git a/src/guide/_example/highlightContent.vue b/src/guide/_example/highlightContent.vue
index ce252f99fc..cff61bdf90 100644
--- a/src/guide/_example/highlightContent.vue
+++ b/src/guide/_example/highlightContent.vue
@@ -1,6 +1,4 @@
 <template>
-  <!-- <div class="highligh"></div>
-   -->
   <img
     class="highligh"
     src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 2a016e2020..964d56a9ad 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -5,7 +5,6 @@ import props from './props';
 import { TdGuideProps, GuideCrossProps } from './type';
 
 import {
-  setStyle,
   scrollToParentVisibleArea,
   getRelativePosition,
   getTargetElm,
@@ -15,6 +14,8 @@ import {
   removeElm,
 } from './utils';
 
+import setStyle from '../_common/js/utils/set-style';
+
 import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
 
@@ -224,15 +225,19 @@ export default defineComponent({
           `${COMPONENT_NAME.value}--${currentElmIsFixed.value && isPopup.value ? 'fixed' : 'absolute'}`,
         ];
         const showOverlay = getCurrentCrossProps('showOverlay');
-        const classes = [...highlightClass, `${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
+        const maskClass = [`${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
         const { highlightContent } = currentStepInfo.value;
+        const showHightContent = highlightContent && isPopup.value;
 
-        return highlightContent && isPopup.value ? (
-          <div ref={highlightLayerRef} v-transfer-dom="body" class={highlightClass} style={style}>
-            <highlightContent class={classes} style={style} />
+        return (
+          <div
+            ref={highlightLayerRef}
+            v-transfer-dom="body"
+            class={highlightClass.concat(showHightContent ? highlightClass : maskClass)}
+            style={style}
+          >
+            {showHightContent && <highlightContent class={highlightClass.concat(maskClass)} style={style} />}
           </div>
-        ) : (
-          <div ref={highlightLayerRef} v-transfer-dom="body" class={classes} style={style} />
         );
       };
 
diff --git a/src/guide/utils/elementInViewport.ts b/src/guide/utils/elementInViewport.ts
index b1ff283664..fde7b934a7 100644
--- a/src/guide/utils/elementInViewport.ts
+++ b/src/guide/utils/elementInViewport.ts
@@ -2,8 +2,16 @@
  * 检查元素是否在视图
  * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  */
-export default function elementInViewport(elm: HTMLElement) {
+export default function elementInViewport(elm: HTMLElement, parent?: HTMLElement) {
   const rect = elm.getBoundingClientRect();
-
+  if (parent) {
+    const parentRect = parent.getBoundingClientRect();
+    return (
+      rect.top >= parentRect.top &&
+      rect.left >= parentRect.left &&
+      rect.bottom <= parentRect.bottom &&
+      rect.right <= parentRect.right
+    );
+  }
   return rect.top >= 0 && rect.left >= 0 && rect.bottom + 80 <= window.innerHeight && rect.right <= window.innerWidth;
 }
diff --git a/src/guide/utils/getScrollParent.ts b/src/guide/utils/getScrollParent.ts
index bf54f86ada..53b1643bca 100644
--- a/src/guide/utils/getScrollParent.ts
+++ b/src/guide/utils/getScrollParent.ts
@@ -1,3 +1,5 @@
+import elementInViewport from './elementInViewport';
+
 export function getScrollParent(element: HTMLElement) {
   let style = window.getComputedStyle(element);
   const excludeStaticParent = style.position === 'absolute';
@@ -20,5 +22,7 @@ export function getScrollParent(element: HTMLElement) {
 export function scrollToParentVisibleArea(element: HTMLElement) {
   const parent = getScrollParent(element);
   if (parent === document.body) return;
+  // !todo 逻辑待验证
+  if (elementInViewport(element, parent)) return;
   parent.scrollTop = element.offsetTop - parent.offsetTop;
 }
diff --git a/src/guide/utils/getWindowSize.ts b/src/guide/utils/getWindowSize.ts
index b767decbc8..413d148cdf 100644
--- a/src/guide/utils/getWindowSize.ts
+++ b/src/guide/utils/getWindowSize.ts
@@ -1,4 +1,4 @@
-export default function getWinSize() {
+export default function getWindowSize() {
   if (window.innerWidth !== undefined) {
     return { width: window.innerWidth, height: window.innerHeight };
   }
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index 1d5a5f49d0..15bda6a083 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -1,4 +1,3 @@
-import setStyle from './setStyle';
 import { scrollToParentVisibleArea } from './getScrollParent';
 import getRelativePosition from './getRelativePosition';
 import getTargetElm from './getTargetElm';
@@ -7,13 +6,4 @@ import isFixed from './isFixed';
 import getWindowScroll from './getWindowScroll';
 import removeElm from './removeElm';
 
-export {
-  setStyle,
-  scrollToParentVisibleArea,
-  getRelativePosition,
-  getTargetElm,
-  scrollTo,
-  isFixed,
-  getWindowScroll,
-  removeElm,
-};
+export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollTo, isFixed, getWindowScroll, removeElm };
diff --git a/src/guide/utils/setStyle.ts b/src/guide/utils/setStyle.ts
deleted file mode 100644
index 2c7d981ea2..0000000000
--- a/src/guide/utils/setStyle.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function setStyle(element: HTMLElement, style: Record<string, any> | string) {
-  let cssText = '';
-
-  if (element.style.cssText) {
-    cssText += element.style.cssText;
-  }
-
-  if (typeof style === 'string') {
-    cssText += style;
-  } else {
-    for (const rule in style) {
-      cssText += `${rule}:${style[rule]};`;
-    }
-  }
-
-  element.style.cssText = cssText;
-}
diff --git a/src/index.ts b/src/index.ts
index a20ed35119..7f726ce235 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,5 @@
 import { App } from 'vue';
 import * as components from './components';
-import Guide from './guide';
 
 export function install(app: App, config?: Record<string, unknown>): void {
   Object.keys(components).forEach((key) => {
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index 9c8a679dbc..0e919d8d95 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -59416,20 +59416,12 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog-body.vue 1`] =
 `;
 
 exports[`csr snapshot test > csr test ./src/guide/_example/highlightContent.vue 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- &lt;div class="highligh"&gt;&lt;/div&gt;
-   -->
-  <img
-    alt=""
-    class="highligh"
-    src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
-    srcset=""
-  />
-  
-</div>
+<img
+  alt=""
+  class="highligh"
+  src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
+  srcset=""
+/>
 `;
 
 exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index ce78d5628d..3ffb7583ed 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -428,10 +428,7 @@ exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog.vue 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog-body.vue 1`] = `"<div class=\\"dialog-body\\"><img class=\\"dialog-img\\" src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"demo\\"><p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/highlightContent.vue 1`] = `
-"<!--[--><!-- <div class=\\"highligh\\"></div>
-   --><img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset><!--]-->"
-`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/highlightContent.vue 1`] = `"<img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset>"`;
 
 exports[`ssr snapshot test > ssr test ./src/guide/_example/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
 
diff --git a/test/unit/guide/__snapshots__/demo.test.js.snap b/test/unit/guide/__snapshots__/demo.test.js.snap
deleted file mode 100644
index 0f7c80081f..0000000000
--- a/test/unit/guide/__snapshots__/demo.test.js.snap
+++ /dev/null
@@ -1,78 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`Guide > base demo works fine 1`] = `
-<t-row
-  justify="center"
->
-  <t-button>
-    新手引导
-  </t-button>
-  <t-drawer
-    destroy-on-close=""
-    header="演示新手引导"
-    show-overlay="false"
-    size="60%"
-    visible="false"
-  >
-    <div
-      class="guide-container"
-    >
-      <div
-        class="main-title"
-      >
-        <div
-          class="title-major"
-        >
-          Guide 用户引导
-        </div>
-        <div
-          class="title-sub"
-        >
-          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
-        </div>
-      </div>
-      <div
-        class="field label-field"
-      >
-        <div
-          class="label"
-        >
-          Label
-        </div>
-        <t-input
-          placeholder="请输入内容"
-        />
-      </div>
-      <div
-        class="field"
-      >
-        <div
-          class="label"
-        >
-          Label
-        </div>
-        <t-input
-          placeholder="请输入内容"
-        />
-      </div>
-      <t-row
-        class="action"
-      >
-        <t-button>
-          确定
-        </t-button>
-        <t-button
-          theme="default"
-          variant="base"
-        >
-          取消
-        </t-button>
-      </t-row>
-    </div>
-    <t-guide
-      modelvalue="-1"
-      steps="[object Object],[object Object],[object Object]"
-    />
-  </t-drawer>
-</t-row>
-`;
diff --git a/test/unit/guide/demo.test.js b/test/unit/guide/demo.test.js
deleted file mode 100644
index ab290b533a..0000000000
--- a/test/unit/guide/demo.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { mount } from '@vue/test-utils';
-import demo from '@/examples/guide/demos/base.vue';
-
-// unit test for component in examples.
-describe('Guide', () => {
-  it('base demo works fine', () => {
-    const wrapper = mount(demo);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

From 5c340b3d559d59e720594c2c7ffa917bc1f6a033 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 5 Sep 2022 14:54:55 +0800
Subject: [PATCH 40/48] fix(guide): spell error

---
 src/guide/guide.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 964d56a9ad..0aef2307e1 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -227,16 +227,16 @@ export default defineComponent({
         const showOverlay = getCurrentCrossProps('showOverlay');
         const maskClass = [`${COMPONENT_NAME.value}__highlight--${showOverlay ? 'mask' : 'nomask'}`];
         const { highlightContent } = currentStepInfo.value;
-        const showHightContent = highlightContent && isPopup.value;
+        const showHighlightContent = highlightContent && isPopup.value;
 
         return (
           <div
             ref={highlightLayerRef}
             v-transfer-dom="body"
-            class={highlightClass.concat(showHightContent ? highlightClass : maskClass)}
+            class={highlightClass.concat(showHighlightContent ? highlightClass : maskClass)}
             style={style}
           >
-            {showHightContent && <highlightContent class={highlightClass.concat(maskClass)} style={style} />}
+            {showHighlightContent && <highlightContent class={highlightClass.concat(maskClass)} style={style} />}
           </div>
         );
       };

From 4e554f478a3a679824d3c2fa982dd4a99b6f1c94 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 5 Sep 2022 15:58:53 +0800
Subject: [PATCH 41/48] feat(guide): guide css use token

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

diff --git a/src/_common b/src/_common
index 3b7ef8f8a6..8e25593811 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 3b7ef8f8a62e9d74f41d7122dd465d6ba85239e9
+Subproject commit 8e25593811a4c3265aeda7fa4e54801e5ba4311b

From bd1d0a191e7ff96275432297de55daf1c9d47ab2 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 6 Sep 2022 20:22:21 +0800
Subject: [PATCH 42/48] refactor(guide): removeElm change to oneline

---
 src/guide/guide.tsx          | 11 +++++------
 src/guide/utils/index.ts     |  3 +--
 src/guide/utils/removeElm.ts |  3 ---
 3 files changed, 6 insertions(+), 11 deletions(-)
 delete mode 100644 src/guide/utils/removeElm.ts

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 0aef2307e1..075f20296e 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -11,7 +11,6 @@ import {
   scrollTo,
   isFixed,
   getWindowScroll,
-  removeElm,
 } from './utils';
 
 import setStyle from '../_common/js/utils/set-style';
@@ -111,7 +110,7 @@ export default defineComponent({
     };
 
     const destroyTooltipElm = () => {
-      removeElm(referenceLayerRef.value);
+      referenceLayerRef.value?.parentNode.removeChild(referenceLayerRef.value);
     };
 
     const showDialogGuide = () => {
@@ -126,8 +125,8 @@ export default defineComponent({
     };
 
     const destroyDialogTooltipElm = () => {
-      removeElm(dialogTooltipRef.value);
-      removeElm(dialogWrapperRef.value);
+      dialogTooltipRef.value?.parentNode.removeChild(dialogTooltipRef.value);
+      dialogWrapperRef.value?.parentNode.removeChild(dialogWrapperRef.value);
     };
 
     const showGuide = () => {
@@ -143,8 +142,8 @@ export default defineComponent({
     const destroyGuide = () => {
       destroyTooltipElm();
       destroyDialogTooltipElm();
-      removeElm(highlightLayerRef.value);
-      removeElm(overlayLayerRef.value);
+      highlightLayerRef.value?.parentNode.removeChild(highlightLayerRef.value);
+      overlayLayerRef.value?.parentNode.removeChild(overlayLayerRef.value);
       removeClass(document.body, LOCK_CLASS.value);
     };
 
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index 15bda6a083..fc137cc249 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -4,6 +4,5 @@ import getTargetElm from './getTargetElm';
 import scrollTo from './scrollTo';
 import isFixed from './isFixed';
 import getWindowScroll from './getWindowScroll';
-import removeElm from './removeElm';
 
-export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollTo, isFixed, getWindowScroll, removeElm };
+export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollTo, isFixed, getWindowScroll };
diff --git a/src/guide/utils/removeElm.ts b/src/guide/utils/removeElm.ts
deleted file mode 100644
index 76a6d24ef6..0000000000
--- a/src/guide/utils/removeElm.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function removeElm(elm: HTMLElement) {
-  elm?.parentNode.removeChild(elm);
-}

From dbaaf1fb5c18e0435f3d72548da08ab596ea37d8 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 6 Sep 2022 20:56:07 +0800
Subject: [PATCH 43/48] feat(guide): scrollTo use common utils

---
 src/guide/guide.tsx                             | 6 +++---
 src/guide/utils/index.ts                        | 4 ++--
 src/guide/utils/{scrollTo.ts => scrollToElm.ts} | 6 ++++--
 3 files changed, 9 insertions(+), 7 deletions(-)
 rename src/guide/utils/{scrollTo.ts => scrollToElm.ts} (77%)

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index 075f20296e..bc786ea90a 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -8,7 +8,7 @@ import {
   scrollToParentVisibleArea,
   getRelativePosition,
   getTargetElm,
-  scrollTo,
+  scrollToElm,
   isFixed,
   getWindowScroll,
 } from './utils';
@@ -104,7 +104,7 @@ export default defineComponent({
         scrollToParentVisibleArea(nextHighlightLayerElm.value);
         setHighlightLayerPosition(highlightLayerRef.value);
         setHighlightLayerPosition(referenceLayerRef.value);
-        scrollTo(nextHighlightLayerElm.value);
+        scrollToElm(nextHighlightLayerElm.value);
         currentHighlightLayerElm.value = currentElement;
       });
     };
@@ -119,7 +119,7 @@ export default defineComponent({
         nextHighlightLayerElm.value = currentElement;
         scrollToParentVisibleArea(nextHighlightLayerElm.value);
         setHighlightLayerPosition(highlightLayerRef.value);
-        scrollTo(nextHighlightLayerElm.value);
+        scrollToElm(nextHighlightLayerElm.value);
         currentHighlightLayerElm.value = currentElement;
       });
     };
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index fc137cc249..7fc93eca44 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -1,8 +1,8 @@
 import { scrollToParentVisibleArea } from './getScrollParent';
 import getRelativePosition from './getRelativePosition';
 import getTargetElm from './getTargetElm';
-import scrollTo from './scrollTo';
+import scrollToElm from './scrollToElm';
 import isFixed from './isFixed';
 import getWindowScroll from './getWindowScroll';
 
-export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollTo, isFixed, getWindowScroll };
+export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm, isFixed, getWindowScroll };
diff --git a/src/guide/utils/scrollTo.ts b/src/guide/utils/scrollToElm.ts
similarity index 77%
rename from src/guide/utils/scrollTo.ts
rename to src/guide/utils/scrollToElm.ts
index 13117e55cb..759c76b77f 100644
--- a/src/guide/utils/scrollTo.ts
+++ b/src/guide/utils/scrollToElm.ts
@@ -1,13 +1,15 @@
 import getWindowSize from './getWindowSize';
 import elementInViewport from './elementInViewport';
 
-export default function scrollTo(elm: HTMLElement) {
+import { scrollTo } from '../../utils/dom';
+
+export default function scrollToElm(elm: HTMLElement) {
   const rect = elm.getBoundingClientRect();
 
   if (!elementInViewport(elm)) {
     const winHeight = getWindowSize().height;
     const top = rect.bottom - (rect.bottom - rect.top);
-    window.scrollBy(0, rect.top - (winHeight / 2 - rect.height / 2));
+    scrollTo(rect.top - (winHeight / 2 - rect.height / 2), {});
 
     // todo 先暂时保留这里的逻辑
     // if (top < 0 || element.clientHeight > winHeight) {

From 74947442be295f142ada81ece3bfee2bec4452ec Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 6 Sep 2022 21:13:24 +0800
Subject: [PATCH 44/48] docs(guide): example add scoped and css use token

---
 src/guide/_example/base.vue             | 8 ++++----
 src/guide/_example/custom-popup.vue     | 8 ++++----
 src/guide/_example/dialog-body.vue      | 4 ++--
 src/guide/_example/dialog.vue           | 8 ++++----
 src/guide/_example/highlightContent.vue | 2 +-
 src/guide/_example/my-popup.vue         | 2 +-
 src/guide/_example/no-mask.vue          | 8 ++++----
 src/guide/_example/popup-dialog.vue     | 8 ++++----
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/guide/_example/base.vue b/src/guide/_example/base.vue
index def36c5cf1..86a34bc959 100644
--- a/src/guide/_example/base.vue
+++ b/src/guide/_example/base.vue
@@ -94,14 +94,14 @@ const handleSkip = ({ e, current, total }) => {
 };
 </script>
 
-<style>
+<style scoped>
 .guide-container {
   max-width: 600px;
   padding: 40px;
 }
 
 .title-major {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 36px;
   font-weight: 700;
   line-height: 44px;
@@ -109,7 +109,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .title-sub {
   margin-top: 8px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -121,7 +121,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .label {
   margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
diff --git a/src/guide/_example/custom-popup.vue b/src/guide/_example/custom-popup.vue
index abfcdb9dae..726607a923 100644
--- a/src/guide/_example/custom-popup.vue
+++ b/src/guide/_example/custom-popup.vue
@@ -98,14 +98,14 @@ const handleSkip = ({ e, current, total }) => {
 };
 </script>
 
-<style>
+<style scoped>
 .guide-container {
   max-width: 600px;
   padding: 40px;
 }
 
 .title-major {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 36px;
   font-weight: 700;
   line-height: 44px;
@@ -113,7 +113,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .title-sub {
   margin-top: 8px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -125,7 +125,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .label {
   margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
diff --git a/src/guide/_example/dialog-body.vue b/src/guide/_example/dialog-body.vue
index 49c0f88a8c..76f7bb7f6a 100644
--- a/src/guide/_example/dialog-body.vue
+++ b/src/guide/_example/dialog-body.vue
@@ -7,14 +7,14 @@
 
 <script setup></script>
 
-<style>
+<style scoped>
 .dialog-img {
   width: 100%;
 }
 
 p {
   margin-top: 16px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   text-align: left;
diff --git a/src/guide/_example/dialog.vue b/src/guide/_example/dialog.vue
index f79e68c124..8d5746ea06 100644
--- a/src/guide/_example/dialog.vue
+++ b/src/guide/_example/dialog.vue
@@ -96,14 +96,14 @@ const handleSkip = ({ e, current, total }) => {
 };
 </script>
 
-<style>
+<style scoped>
 .guide-container {
   max-width: 600px;
   padding: 40px;
 }
 
 .title-major {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 36px;
   font-weight: 700;
   line-height: 44px;
@@ -111,7 +111,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .title-sub {
   margin-top: 8px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -123,7 +123,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .label {
   margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
diff --git a/src/guide/_example/highlightContent.vue b/src/guide/_example/highlightContent.vue
index cff61bdf90..a91c672d66 100644
--- a/src/guide/_example/highlightContent.vue
+++ b/src/guide/_example/highlightContent.vue
@@ -7,7 +7,7 @@
   />
 </template>
 
-<style>
+<style scoped>
 .highligh {
   width: 200px;
   border-end-start-radius: 50%;
diff --git a/src/guide/_example/my-popup.vue b/src/guide/_example/my-popup.vue
index 4de09d51de..b0ed60cbda 100644
--- a/src/guide/_example/my-popup.vue
+++ b/src/guide/_example/my-popup.vue
@@ -24,7 +24,7 @@ defineProps({
 });
 </script>
 
-<style>
+<style scoped>
 .my-popup {
   width: 240px;
 }
diff --git a/src/guide/_example/no-mask.vue b/src/guide/_example/no-mask.vue
index 61fd75ff5f..5dcff967e8 100644
--- a/src/guide/_example/no-mask.vue
+++ b/src/guide/_example/no-mask.vue
@@ -95,14 +95,14 @@ const handleSkip = ({ e, current, total }) => {
 };
 </script>
 
-<style>
+<style scoped>
 .guide-container {
   max-width: 600px;
   padding: 40px;
 }
 
 .title-major {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 36px;
   font-weight: 700;
   line-height: 44px;
@@ -110,7 +110,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .title-sub {
   margin-top: 8px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -122,7 +122,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .label {
   margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
diff --git a/src/guide/_example/popup-dialog.vue b/src/guide/_example/popup-dialog.vue
index 86f1b7d902..f3783e0f72 100644
--- a/src/guide/_example/popup-dialog.vue
+++ b/src/guide/_example/popup-dialog.vue
@@ -96,14 +96,14 @@ const handleSkip = ({ e, current, total }) => {
 };
 </script>
 
-<style>
+<style scoped>
 .guide-container {
   max-width: 600px;
   padding: 40px;
 }
 
 .title-major {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 36px;
   font-weight: 700;
   line-height: 44px;
@@ -111,7 +111,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .title-sub {
   margin-top: 8px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -123,7 +123,7 @@ const handleSkip = ({ e, current, total }) => {
 
 .label {
   margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;

From 5af3c779b0da78cc86262cefecc2ee3126bca245 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 6 Sep 2022 21:21:23 +0800
Subject: [PATCH 45/48] chore(_common): update _common

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

diff --git a/src/_common b/src/_common
index 8e25593811..21ac269c1a 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 8e25593811a4c3265aeda7fa4e54801e5ba4311b
+Subproject commit 21ac269c1ac2f261c26261355da8cd6c2e2fed36

From 7857b17ba562b8e29b1706b42d52bff3c80cd51f Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Wed, 7 Sep 2022 12:02:33 +0800
Subject: [PATCH 46/48] chore(guide): update snap

---
 test/snap/__snapshots__/csr.test.js.snap | 98 +++++++++++++++++++++++-
 test/snap/__snapshots__/ssr.test.js.snap | 16 ++--
 2 files changed, 105 insertions(+), 9 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index 2a1cbb4009..7dbfeae974 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -61042,11 +61042,13 @@ exports[`csr snapshot test > csr test ./src/grid/_example/valign.vue 1`] = `
 exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
 <div
   class="t-row t-row--center t-row--align-top"
+  data-v-60077dce=""
   style="margin-left: 0px; margin-right: 0px;"
 >
   
   <button
     class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-60077dce=""
     type="button"
   >
     <span
@@ -61059,6 +61061,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
   </button>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    data-v-60077dce=""
     tabindex="0"
   >
     <!---->
@@ -61078,31 +61081,38 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
         
         <div
           class="guide-container"
+          data-v-60077dce=""
         >
           <div
             class="main-title"
+            data-v-60077dce=""
           >
             <div
               class="title-major"
+              data-v-60077dce=""
             >
               Guide 用户引导
             </div>
             <div
               class="title-sub"
+              data-v-60077dce=""
             >
               按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
             </div>
           </div>
           <div
             class="field label-field"
+            data-v-60077dce=""
           >
             <div
               class="label"
+              data-v-60077dce=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-60077dce=""
             >
               <div
                 class="t-input"
@@ -61124,14 +61134,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
           </div>
           <div
             class="field"
+            data-v-60077dce=""
           >
             <div
               class="label"
+              data-v-60077dce=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-60077dce=""
             >
               <div
                 class="t-input"
@@ -61153,11 +61166,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
           </div>
           <div
             class="t-row t-row--start t-row--align-top action"
+            data-v-60077dce=""
             style="margin-left: 0px; margin-right: 0px;"
           >
             
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              data-v-60077dce=""
               type="button"
             >
               <span
@@ -61170,6 +61185,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
             </button>
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              data-v-60077dce=""
               type="button"
             >
               <span
@@ -61194,6 +61210,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
         
         <button
           class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          data-v-60077dce=""
           type="button"
         >
           <span
@@ -61216,11 +61233,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/base.vue 1`] = `
 exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`] = `
 <div
   class="t-row t-row--center t-row--align-top"
+  data-v-2edbaa18=""
   style="margin-left: 0px; margin-right: 0px;"
 >
   
   <button
     class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-2edbaa18=""
     type="button"
   >
     <span
@@ -61233,6 +61252,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
   </button>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    data-v-2edbaa18=""
     tabindex="0"
   >
     <!---->
@@ -61252,31 +61272,38 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
         
         <div
           class="guide-container"
+          data-v-2edbaa18=""
         >
           <div
             class="main-title"
+            data-v-2edbaa18=""
           >
             <div
               class="title-major"
+              data-v-2edbaa18=""
             >
               Guide 用户引导
             </div>
             <div
               class="title-sub"
+              data-v-2edbaa18=""
             >
               按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
             </div>
           </div>
           <div
             class="field label-field-1"
+            data-v-2edbaa18=""
           >
             <div
               class="label"
+              data-v-2edbaa18=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-2edbaa18=""
             >
               <div
                 class="t-input"
@@ -61298,14 +61325,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
           </div>
           <div
             class="field label-field-2"
+            data-v-2edbaa18=""
           >
             <div
               class="label"
+              data-v-2edbaa18=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-2edbaa18=""
             >
               <div
                 class="t-input"
@@ -61327,11 +61357,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
           </div>
           <div
             class="t-row t-row--start t-row--align-top action"
+            data-v-2edbaa18=""
             style="margin-left: 0px; margin-right: 0px;"
           >
             
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              data-v-2edbaa18=""
               type="button"
             >
               <span
@@ -61344,6 +61376,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
             </button>
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              data-v-2edbaa18=""
               type="button"
             >
               <span
@@ -61368,6 +61401,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
         
         <button
           class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          data-v-2edbaa18=""
           type="button"
         >
           <span
@@ -61390,11 +61424,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/custom-popup.vue 1`]
 exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
 <div
   class="t-row t-row--center t-row--align-top"
+  data-v-41d64fe0=""
   style="margin-left: 0px; margin-right: 0px;"
 >
   
   <button
     class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-41d64fe0=""
     type="button"
   >
     <span
@@ -61407,6 +61443,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
   </button>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    data-v-41d64fe0=""
     tabindex="0"
   >
     <!---->
@@ -61426,31 +61463,38 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
         
         <div
           class="guide-container"
+          data-v-41d64fe0=""
         >
           <div
             class="main-title"
+            data-v-41d64fe0=""
           >
             <div
               class="title-major"
+              data-v-41d64fe0=""
             >
               Guide 用户引导
             </div>
             <div
               class="title-sub"
+              data-v-41d64fe0=""
             >
               按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
             </div>
           </div>
           <div
             class="field label-field"
+            data-v-41d64fe0=""
           >
             <div
               class="label"
+              data-v-41d64fe0=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-41d64fe0=""
             >
               <div
                 class="t-input"
@@ -61472,14 +61516,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
           </div>
           <div
             class="field"
+            data-v-41d64fe0=""
           >
             <div
               class="label"
+              data-v-41d64fe0=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-41d64fe0=""
             >
               <div
                 class="t-input"
@@ -61501,11 +61548,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
           </div>
           <div
             class="t-row t-row--start t-row--align-top action"
+            data-v-41d64fe0=""
             style="margin-left: 0px; margin-right: 0px;"
           >
             
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              data-v-41d64fe0=""
               type="button"
             >
               <span
@@ -61518,6 +61567,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
             </button>
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              data-v-41d64fe0=""
               type="button"
             >
               <span
@@ -61542,6 +61592,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
         
         <button
           class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          data-v-41d64fe0=""
           type="button"
         >
           <span
@@ -61564,13 +61615,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/dialog.vue 1`] = `
 exports[`csr snapshot test > csr test ./src/guide/_example/dialog-body.vue 1`] = `
 <div
   class="dialog-body"
+  data-v-354953ef=""
 >
   <img
     alt="demo"
     class="dialog-img"
+    data-v-354953ef=""
     src="https://tdesign.gtimg.com/demo/demo-image-1.png"
   />
-  <p>
+  <p
+    data-v-354953ef=""
+  >
     此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。
   </p>
 </div>
@@ -61580,6 +61635,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/highlightContent.vue
 <img
   alt=""
   class="highligh"
+  data-v-26f0756d=""
   src="https://img1.baidu.com/it/u=196030518,88795458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=687"
   srcset=""
 />
@@ -61588,9 +61644,11 @@ exports[`csr snapshot test > csr test ./src/guide/_example/highlightContent.vue
 exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
 <div
   class="my-popup"
+  data-v-07bb7693=""
 >
   <svg
     class="t-icon t-icon-arrow-up pop-icon"
+    data-v-07bb7693=""
     fill="none"
     height="1em"
     viewBox="0 0 16 16"
@@ -61604,14 +61662,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
   </svg>
   <p
     class="popup-desc"
+    data-v-07bb7693=""
   >
     自定义的图形或说明文案，用来解释或指导该功能使用。
   </p>
   <div
     class="popup-action"
+    data-v-07bb7693=""
   >
     <button
       class="t-button t-size-s t-button--variant-base t-button--theme-default"
+      data-v-07bb7693=""
       type="button"
     >
       <span
@@ -61624,6 +61685,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
     </button>
     <button
       class="t-button t-size-s t-button--variant-base t-button--theme-default"
+      data-v-07bb7693=""
       type="button"
     >
       <span
@@ -61643,11 +61705,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/my-popup.vue 1`] = `
 exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
 <div
   class="t-row t-row--center t-row--align-top"
+  data-v-0b463be0=""
   style="margin-left: 0px; margin-right: 0px;"
 >
   
   <button
     class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-0b463be0=""
     type="button"
   >
     <span
@@ -61660,6 +61724,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
   </button>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    data-v-0b463be0=""
     tabindex="0"
   >
     <!---->
@@ -61679,31 +61744,38 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
         
         <div
           class="guide-container"
+          data-v-0b463be0=""
         >
           <div
             class="main-title"
+            data-v-0b463be0=""
           >
             <div
               class="title-major"
+              data-v-0b463be0=""
             >
               Guide 用户引导
             </div>
             <div
               class="title-sub"
+              data-v-0b463be0=""
             >
               按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
             </div>
           </div>
           <div
             class="field label-field"
+            data-v-0b463be0=""
           >
             <div
               class="label"
+              data-v-0b463be0=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-0b463be0=""
             >
               <div
                 class="t-input"
@@ -61725,14 +61797,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
           </div>
           <div
             class="field"
+            data-v-0b463be0=""
           >
             <div
               class="label"
+              data-v-0b463be0=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-0b463be0=""
             >
               <div
                 class="t-input"
@@ -61754,11 +61829,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
           </div>
           <div
             class="t-row t-row--start t-row--align-top action"
+            data-v-0b463be0=""
             style="margin-left: 0px; margin-right: 0px;"
           >
             
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              data-v-0b463be0=""
               type="button"
             >
               <span
@@ -61771,6 +61848,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
             </button>
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              data-v-0b463be0=""
               type="button"
             >
               <span
@@ -61795,6 +61873,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
         
         <button
           class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          data-v-0b463be0=""
           type="button"
         >
           <span
@@ -61817,11 +61896,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/no-mask.vue 1`] = `
 exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`] = `
 <div
   class="t-row t-row--center t-row--align-top"
+  data-v-fe5de85e=""
   style="margin-left: 0px; margin-right: 0px;"
 >
   
   <button
     class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    data-v-fe5de85e=""
     type="button"
   >
     <span
@@ -61834,6 +61915,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
   </button>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    data-v-fe5de85e=""
     tabindex="0"
   >
     <!---->
@@ -61853,31 +61935,38 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
         
         <div
           class="guide-container"
+          data-v-fe5de85e=""
         >
           <div
             class="main-title"
+            data-v-fe5de85e=""
           >
             <div
               class="title-major"
+              data-v-fe5de85e=""
             >
               Guide 用户引导
             </div>
             <div
               class="title-sub"
+              data-v-fe5de85e=""
             >
               按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
             </div>
           </div>
           <div
             class="field label-field"
+            data-v-fe5de85e=""
           >
             <div
               class="label"
+              data-v-fe5de85e=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-fe5de85e=""
             >
               <div
                 class="t-input"
@@ -61899,14 +61988,17 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
           </div>
           <div
             class="field"
+            data-v-fe5de85e=""
           >
             <div
               class="label"
+              data-v-fe5de85e=""
             >
               Label
             </div>
             <div
               class="t-input__wrap"
+              data-v-fe5de85e=""
             >
               <div
                 class="t-input"
@@ -61928,11 +62020,13 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
           </div>
           <div
             class="t-row t-row--start t-row--align-top action"
+            data-v-fe5de85e=""
             style="margin-left: 0px; margin-right: 0px;"
           >
             
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              data-v-fe5de85e=""
               type="button"
             >
               <span
@@ -61945,6 +62039,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
             </button>
             <button
               class="t-button t-size-m t-button--variant-base t-button--theme-default"
+              data-v-fe5de85e=""
               type="button"
             >
               <span
@@ -61969,6 +62064,7 @@ exports[`csr snapshot test > csr test ./src/guide/_example/popup-dialog.vue 1`]
         
         <button
           class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          data-v-fe5de85e=""
           type="button"
         >
           <span
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 40a30de05f..71bdb32e59 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -422,21 +422,21 @@ exports[`ssr snapshot test > ssr test ./src/grid/_example/sort.vue 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test ./src/grid/_example/valign.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><p>align top</p></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><p>align middle</p></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-row t-row--space-around t-row--align-middle\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><p>align bottom</p></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-row t-row--space-between t-row--align-bottom\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div style=\\"height:100px;\\">col-3</div><!--]--></div><div class=\\"t-col t-col-3\\" style=\\"padding-left:0px;padding-right:0px;\\"><!--[--><div>col-3</div><!--]--></div><!--]--></div></div><!----><!--]--><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/base.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/base.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-60077dce><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-60077dce><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\" data-v-60077dce><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\" data-v-60077dce><div class=\\"main-title\\" data-v-60077dce><div class=\\"title-major\\" data-v-60077dce>Guide 用户引导</div><div class=\\"title-sub\\" data-v-60077dce>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\" data-v-60077dce><div class=\\"label\\" data-v-60077dce>Label</div><div class=\\"t-input__wrap\\" data-v-60077dce><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\" data-v-60077dce><div class=\\"label\\" data-v-60077dce>Label</div><div class=\\"t-input__wrap\\" data-v-60077dce><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-60077dce><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-60077dce><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-60077dce><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-60077dce><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/custom-popup.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field-1\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field label-field-2\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/custom-popup.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-2edbaa18><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-2edbaa18><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\" data-v-2edbaa18><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\" data-v-2edbaa18><div class=\\"main-title\\" data-v-2edbaa18><div class=\\"title-major\\" data-v-2edbaa18>Guide 用户引导</div><div class=\\"title-sub\\" data-v-2edbaa18>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field-1\\" data-v-2edbaa18><div class=\\"label\\" data-v-2edbaa18>Label</div><div class=\\"t-input__wrap\\" data-v-2edbaa18><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field label-field-2\\" data-v-2edbaa18><div class=\\"label\\" data-v-2edbaa18>Label</div><div class=\\"t-input__wrap\\" data-v-2edbaa18><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-2edbaa18><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-2edbaa18><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-2edbaa18><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-2edbaa18><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-41d64fe0><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-41d64fe0><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\" data-v-41d64fe0><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\" data-v-41d64fe0><div class=\\"main-title\\" data-v-41d64fe0><div class=\\"title-major\\" data-v-41d64fe0>Guide 用户引导</div><div class=\\"title-sub\\" data-v-41d64fe0>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\" data-v-41d64fe0><div class=\\"label\\" data-v-41d64fe0>Label</div><div class=\\"t-input__wrap\\" data-v-41d64fe0><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\" data-v-41d64fe0><div class=\\"label\\" data-v-41d64fe0>Label</div><div class=\\"t-input__wrap\\" data-v-41d64fe0><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-41d64fe0><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-41d64fe0><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-41d64fe0><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-41d64fe0><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog-body.vue 1`] = `"<div class=\\"dialog-body\\"><img class=\\"dialog-img\\" src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"demo\\"><p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/dialog-body.vue 1`] = `"<div class=\\"dialog-body\\" data-v-354953ef><img class=\\"dialog-img\\" src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"demo\\" data-v-354953ef><p data-v-354953ef>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/highlightContent.vue 1`] = `"<img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/highlightContent.vue 1`] = `"<img class=\\"highligh\\" src=\\"https://img1.baidu.com/it/u=196030518,88795458&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=687\\" alt srcset data-v-26f0756d>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/my-popup.vue 1`] = `"<div class=\\"my-popup\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\">自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\"><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/my-popup.vue 1`] = `"<div class=\\"my-popup\\" data-v-07bb7693><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-up pop-icon\\" style=\\"\\" data-v-07bb7693><path fill=\\"currentColor\\" d=\\"M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z\\" fill-opacity=\\"0.9\\"></path></svg><p class=\\"popup-desc\\" data-v-07bb7693>自定义的图形或说明文案，用来解释或指导该功能使用。</p><div class=\\"popup-action\\" data-v-07bb7693><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-07bb7693><span class=\\"t-button__text\\"><!--[--> 跳过 <!--]--></span></button><button class=\\"t-button t-size-s t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-07bb7693><span class=\\"t-button__text\\"><!--[--> 上一步 <!--]--></span></button><!--v-if--><!--v-if--></div></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/no-mask.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-0b463be0><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-0b463be0><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\" data-v-0b463be0><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\" data-v-0b463be0><div class=\\"main-title\\" data-v-0b463be0><div class=\\"title-major\\" data-v-0b463be0>Guide 用户引导</div><div class=\\"title-sub\\" data-v-0b463be0>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\" data-v-0b463be0><div class=\\"label\\" data-v-0b463be0>Label</div><div class=\\"t-input__wrap\\" data-v-0b463be0><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\" data-v-0b463be0><div class=\\"label\\" data-v-0b463be0>Label</div><div class=\\"t-input__wrap\\" data-v-0b463be0><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-0b463be0><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-0b463be0><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-0b463be0><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-0b463be0><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/guide/_example/popup-dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\"><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\"><div class=\\"main-title\\"><div class=\\"title-major\\">Guide 用户引导</div><div class=\\"title-sub\\">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\"><div class=\\"label\\">Label</div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\"><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/guide/_example/popup-dialog.vue 1`] = `"<div class=\\"t-row t-row--center t-row--align-top\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-fe5de85e><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-fe5de85e><span class=\\"t-button__text\\"><!--[-->新手引导<!--]--></span></button><div class=\\"t-drawer t-drawer--right t-drawer--without-mask\\" style=\\"\\" tabindex=\\"0\\" data-v-fe5de85e><!----><div class=\\"t-drawer__content-wrapper t-drawer__content-wrapper--right\\" style=\\"width:60%;height:;\\"><div class=\\"t-drawer__header\\">演示新手引导</div><!----><div class=\\"t-drawer__body narrow-scrollbar\\"><!--[--><div class=\\"guide-container\\" data-v-fe5de85e><div class=\\"main-title\\" data-v-fe5de85e><div class=\\"title-major\\" data-v-fe5de85e>Guide 用户引导</div><div class=\\"title-sub\\" data-v-fe5de85e>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div></div><div class=\\"field label-field\\" data-v-fe5de85e><div class=\\"label\\" data-v-fe5de85e>Label</div><div class=\\"t-input__wrap\\" data-v-fe5de85e><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"field\\" data-v-fe5de85e><div class=\\"label\\" data-v-fe5de85e>Label</div><div class=\\"t-input__wrap\\" data-v-fe5de85e><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入内容\\" type=\\"text\\" value><!----><!----><!----><!----></div><!----></div></div><div class=\\"t-row t-row--start t-row--align-top action\\" style=\\"margin-left:0px;margin-right:0px;\\" data-v-fe5de85e><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-fe5de85e><span class=\\"t-button__text\\"><!--[-->确定<!--]--></span></button><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-default\\" type=\\"button\\" data-v-fe5de85e><span class=\\"t-button__text\\"><!--[-->取消<!--]--></span></button><!--]--></div></div><!--[--><!----><!--]--><!--]--></div><div class=\\"t-drawer__footer\\"><!--[--><button class=\\"t-button t-size-m t-button--variant-base t-button--theme-primary\\" type=\\"button\\" data-v-fe5de85e><span class=\\"t-button__text\\"><!--[--> 关闭抽屉 <!--]--></span></button><!--]--></div><!----></div></div><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/icon/_example/base.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;flex-wrap:wrap;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-loading\\" style=\\"color:#999999;\\"><use href=\\"#t-icon-loading\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-close\\" style=\\"\\"><use href=\\"#t-icon-close\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-align-center t-space-horizontal\\" style=\\"gap:16px;flex-wrap:wrap;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled t-size-s\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled t-size-m\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled t-size-l\\" style=\\"\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:25px;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"font-size:2em;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;flex-wrap:wrap;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:red;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:green;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><svg class=\\"t-icon t-icon-check-circle-filled\\" style=\\"color:orange;\\"><use href=\\"#t-icon-check-circle-filled\\"></use></svg></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--]--></div>"`;
 

From c5ad5902158d732ce2df1a31300fb1161f449cd0 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 13 Sep 2022 19:59:16 +0800
Subject: [PATCH 47/48] feat(_common): add guide logo

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

diff --git a/src/_common b/src/_common
index 21ac269c1a..eaaaa97248 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 21ac269c1ac2f261c26261355da8cd6c2e2fed36
+Subproject commit eaaaa972480457e72de12b124f950b1db0f3605a

From 4a91d5a47d0174720651c57d84265ee0a719f805 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Wed, 14 Sep 2022 12:54:42 +0800
Subject: [PATCH 48/48] feat(guide): move shared utils to dom/utils

---
 src/guide/guide.tsx                    | 11 +---
 src/guide/utils/elementInViewport.ts   | 17 ------
 src/guide/utils/getElmCssPropValue.ts  | 13 ----
 src/guide/utils/getRelativePosition.ts |  4 +-
 src/guide/utils/getScrollParent.ts     |  2 +-
 src/guide/utils/getWindowScroll.ts     |  8 ---
 src/guide/utils/getWindowSize.ts       |  7 ---
 src/guide/utils/index.ts               |  4 +-
 src/guide/utils/isFixed.ts             | 15 -----
 src/guide/utils/scrollToElm.ts         |  5 +-
 src/utils/dom.ts                       | 85 ++++++++++++++++++++++++++
 11 files changed, 91 insertions(+), 80 deletions(-)
 delete mode 100644 src/guide/utils/elementInViewport.ts
 delete mode 100644 src/guide/utils/getElmCssPropValue.ts
 delete mode 100644 src/guide/utils/getWindowScroll.ts
 delete mode 100644 src/guide/utils/getWindowSize.ts
 delete mode 100644 src/guide/utils/isFixed.ts

diff --git a/src/guide/guide.tsx b/src/guide/guide.tsx
index bc786ea90a..356feb3499 100644
--- a/src/guide/guide.tsx
+++ b/src/guide/guide.tsx
@@ -4,19 +4,12 @@ import props from './props';
 
 import { TdGuideProps, GuideCrossProps } from './type';
 
-import {
-  scrollToParentVisibleArea,
-  getRelativePosition,
-  getTargetElm,
-  scrollToElm,
-  isFixed,
-  getWindowScroll,
-} from './utils';
+import { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm } from './utils';
 
 import setStyle from '../_common/js/utils/set-style';
 
 import TransferDom from '../utils/transfer-dom';
-import { addClass, removeClass } from '../utils/dom';
+import { addClass, removeClass, isFixed, getWindowScroll } from '../utils/dom';
 
 import useVModel from '../hooks/useVModel';
 import { useTNodeJSX } from '../hooks/tnode';
diff --git a/src/guide/utils/elementInViewport.ts b/src/guide/utils/elementInViewport.ts
deleted file mode 100644
index fde7b934a7..0000000000
--- a/src/guide/utils/elementInViewport.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * 检查元素是否在视图
- * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
- */
-export default function elementInViewport(elm: HTMLElement, parent?: HTMLElement) {
-  const rect = elm.getBoundingClientRect();
-  if (parent) {
-    const parentRect = parent.getBoundingClientRect();
-    return (
-      rect.top >= parentRect.top &&
-      rect.left >= parentRect.left &&
-      rect.bottom <= parentRect.bottom &&
-      rect.right <= parentRect.right
-    );
-  }
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom + 80 <= window.innerHeight && rect.right <= window.innerWidth;
-}
diff --git a/src/guide/utils/getElmCssPropValue.ts b/src/guide/utils/getElmCssPropValue.ts
deleted file mode 100644
index b36a197a65..0000000000
--- a/src/guide/utils/getElmCssPropValue.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function getElmCssPropValue(element: HTMLElement, propName: string) {
-  let propValue = '';
-
-  if (document.defaultView && document.defaultView.getComputedStyle) {
-    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
-  }
-
-  if (propValue && propValue.toLowerCase) {
-    return propValue.toLowerCase();
-  }
-
-  return propValue;
-}
diff --git a/src/guide/utils/getRelativePosition.ts b/src/guide/utils/getRelativePosition.ts
index 9cca63087f..8d9e0f0815 100644
--- a/src/guide/utils/getRelativePosition.ts
+++ b/src/guide/utils/getRelativePosition.ts
@@ -1,6 +1,4 @@
-import getElmCssPropValue from './getElmCssPropValue';
-import isFixed from './isFixed';
-import getWindowScroll from './getWindowScroll';
+import { getElmCssPropValue, isFixed, getWindowScroll } from '../../utils/dom';
 
 /**
  * 获取元素相对于另一个元素的位置（或者说相对于 body）
diff --git a/src/guide/utils/getScrollParent.ts b/src/guide/utils/getScrollParent.ts
index 53b1643bca..7513d124fb 100644
--- a/src/guide/utils/getScrollParent.ts
+++ b/src/guide/utils/getScrollParent.ts
@@ -1,4 +1,4 @@
-import elementInViewport from './elementInViewport';
+import { elementInViewport } from '../../utils/dom';
 
 export function getScrollParent(element: HTMLElement) {
   let style = window.getComputedStyle(element);
diff --git a/src/guide/utils/getWindowScroll.ts b/src/guide/utils/getWindowScroll.ts
deleted file mode 100644
index a4c7dc6d39..0000000000
--- a/src/guide/utils/getWindowScroll.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function getWindowScroll() {
-  const { body } = document;
-  const docElm = document.documentElement;
-  const scrollTop = window.pageYOffset || docElm.scrollTop || body.scrollTop;
-  const scrollLeft = window.pageXOffset || docElm.scrollLeft || body.scrollLeft;
-
-  return { scrollTop, scrollLeft };
-}
diff --git a/src/guide/utils/getWindowSize.ts b/src/guide/utils/getWindowSize.ts
deleted file mode 100644
index 413d148cdf..0000000000
--- a/src/guide/utils/getWindowSize.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function getWindowSize() {
-  if (window.innerWidth !== undefined) {
-    return { width: window.innerWidth, height: window.innerHeight };
-  }
-  const doc = document.documentElement;
-  return { width: doc.clientWidth, height: doc.clientHeight };
-}
diff --git a/src/guide/utils/index.ts b/src/guide/utils/index.ts
index 7fc93eca44..f79a227893 100644
--- a/src/guide/utils/index.ts
+++ b/src/guide/utils/index.ts
@@ -2,7 +2,5 @@ import { scrollToParentVisibleArea } from './getScrollParent';
 import getRelativePosition from './getRelativePosition';
 import getTargetElm from './getTargetElm';
 import scrollToElm from './scrollToElm';
-import isFixed from './isFixed';
-import getWindowScroll from './getWindowScroll';
 
-export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm, isFixed, getWindowScroll };
+export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm };
diff --git a/src/guide/utils/isFixed.ts b/src/guide/utils/isFixed.ts
deleted file mode 100644
index 9e54d954b9..0000000000
--- a/src/guide/utils/isFixed.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import getElmCssPropValue from './getElmCssPropValue';
-
-export default function isFixed(element: HTMLElement): Boolean {
-  const p = element.parentNode as HTMLElement;
-
-  if (!p || p.nodeName === 'HTML') {
-    return false;
-  }
-
-  if (getElmCssPropValue(element, 'position') === 'fixed') {
-    return true;
-  }
-
-  return isFixed(p);
-}
diff --git a/src/guide/utils/scrollToElm.ts b/src/guide/utils/scrollToElm.ts
index 759c76b77f..ba48a94d23 100644
--- a/src/guide/utils/scrollToElm.ts
+++ b/src/guide/utils/scrollToElm.ts
@@ -1,7 +1,4 @@
-import getWindowSize from './getWindowSize';
-import elementInViewport from './elementInViewport';
-
-import { scrollTo } from '../../utils/dom';
+import { getWindowSize, elementInViewport, scrollTo } from '../../utils/dom';
 
 export default function scrollToElm(elm: HTMLElement) {
   const rect = elm.getBoundingClientRect();
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index f6088d4d49..3d0fcf2004 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -287,3 +287,88 @@ export const requestSubmit = (target: HTMLFormElement) => {
   submitter.click();
   target.removeChild(submitter);
 };
+
+/**
+ * 检查元素是否在父元素视图
+ * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+ * @param elm 元素
+ * @param parent
+ * @returns boolean
+ */
+export function elementInViewport(elm: HTMLElement, parent?: HTMLElement): boolean {
+  const rect = elm.getBoundingClientRect();
+  if (parent) {
+    const parentRect = parent.getBoundingClientRect();
+    return (
+      rect.top >= parentRect.top &&
+      rect.left >= parentRect.left &&
+      rect.bottom <= parentRect.bottom &&
+      rect.right <= parentRect.right
+    );
+  }
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom + 80 <= window.innerHeight && rect.right <= window.innerWidth;
+}
+
+/**
+ * 获取元素某个 css 对应的值
+ * @param element 元素
+ * @param propName css 名
+ * @returns string
+ */
+export function getElmCssPropValue(element: HTMLElement, propName: string): string {
+  let propValue = '';
+
+  if (document.defaultView && document.defaultView.getComputedStyle) {
+    propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
+  }
+
+  if (propValue && propValue.toLowerCase) {
+    return propValue.toLowerCase();
+  }
+
+  return propValue;
+}
+
+/**
+ * 判断元素是否处在 position fixed 中
+ * @param element 元素
+ * @returns boolean
+ */
+export function isFixed(element: HTMLElement): boolean {
+  const p = element.parentNode as HTMLElement;
+
+  if (!p || p.nodeName === 'HTML') {
+    return false;
+  }
+
+  if (getElmCssPropValue(element, 'position') === 'fixed') {
+    return true;
+  }
+
+  return isFixed(p);
+}
+
+/**
+ * 获取当前视图滑动的距离
+ * @returns { scrollTop: number, scrollLeft: number }
+ */
+export function getWindowScroll(): { scrollTop: number; scrollLeft: number } {
+  const { body } = document;
+  const docElm = document.documentElement;
+  const scrollTop = window.pageYOffset || docElm.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docElm.scrollLeft || body.scrollLeft;
+
+  return { scrollTop, scrollLeft };
+}
+
+/**
+ * 获取当前视图的大小
+ * @returns { width: number, height: number }
+ */
+export function getWindowSize(): { width: number; height: number } {
+  if (window.innerWidth !== undefined) {
+    return { width: window.innerWidth, height: window.innerHeight };
+  }
+  const doc = document.documentElement;
+  return { width: doc.clientWidth, height: doc.clientHeight };
+}