From f6d2ec50c2340bb8a9cb30f24f9a7d43ce5595ff Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Sun, 12 Nov 2023 22:59:09 -0800
Subject: [PATCH] docs(guide): [guide] optimize guide docs (#799)

* docs(guide): optimize guide api docs

* docs(guide): optimize guide demo docs
---
 ...vue => arrow-position-composition-api.vue} |  60 ++-
 ...osition.spec.ts => arrow-position.spec.ts} |   2 +-
 ...{arror-position.vue => arrow-position.vue} |  46 +-
 ...pi.vue => basic-usage-composition-api.vue} |  41 +-
 .../{base.spec.ts => basic-usage.spec.ts}     |   2 +-
 .../app/guide/{base.vue => basic-usage.vue}   |  39 +-
 .../pc/app/guide/callback-composition-api.vue |  25 +-
 .../sites/demos/pc/app/guide/callback.vue     |  25 +-
 .../guide/content-step-composition-api.vue    |  30 --
 .../demos/pc/app/guide/content-step.spec.ts   |  15 -
 .../sites/demos/pc/app/guide/content-step.vue |  40 --
 ...poistion-alignmentAxis-composition-api.vue |  90 ----
 .../guide-poistion-alignmentAxis.spec.ts      |  22 -
 .../guide/guide-poistion-alignmentAxis.vue    |  99 -----
 ...ide-poistion-crossAxis-composition-api.vue |  91 ----
 .../guide/guide-poistion-crossAxis.spec.ts    |  22 -
 .../pc/app/guide/guide-poistion-crossAxis.vue | 100 -----
 ...uide-poistion-mainAxis-composition-api.vue |  77 ----
 .../pc/app/guide/guide-poistion-mainAxis.vue  |  85 ----
 ....vue => highlight-box-composition-api.vue} |  63 +--
 ...om-hight.spec.ts => highlight-box.spec.ts} |   2 +-
 .../{dom-hight.vue => highlight-box.vue}      |  61 ++-
 .../app/guide/image-text-composition-api.vue  |   4 +-
 .../sites/demos/pc/app/guide/image-text.vue   |   4 +-
 ...modal-overlay-opening-composition-api.vue} |   0
 ....spec.ts => modal-overlay-opening.spec.ts} |   2 +-
 ...-opening.vue => modal-overlay-opening.vue} |   0
 .../pc/app/guide/offset-composition-api.vue   |  91 ++++
 ...istion-mainAxis.spec.ts => offset.spec.ts} |   4 +-
 examples/sites/demos/pc/app/guide/offset.vue  |  99 +++++
 ...i.vue => only-content-composition-api.vue} |  11 +-
 ...ent-steps.spec.ts => only-content.spec.ts} |   4 +-
 .../{content-steps.vue => only-content.vue}   |  14 +-
 .../pc/app/guide/size-composition-api.vue     |   6 +-
 examples/sites/demos/pc/app/guide/size.vue    |   6 +-
 .../app/guide/title-steps-composition-api.vue |  81 ----
 .../demos/pc/app/guide/title-steps.spec.ts    |  23 -
 .../sites/demos/pc/app/guide/title-steps.vue  |  91 ----
 .../demos/pc/app/guide/webdoc/guide.en.md     |   7 +
 .../sites/demos/pc/app/guide/webdoc/guide.js  | 415 ++++++++----------
 40 files changed, 573 insertions(+), 1326 deletions(-)
 rename examples/sites/demos/pc/app/guide/{arror-position-composition-api.vue => arrow-position-composition-api.vue} (70%)
 rename examples/sites/demos/pc/app/guide/{arror-position.spec.ts => arrow-position.spec.ts} (94%)
 rename examples/sites/demos/pc/app/guide/{arror-position.vue => arrow-position.vue} (72%)
 rename examples/sites/demos/pc/app/guide/{base-composition-api.vue => basic-usage-composition-api.vue} (50%)
 rename examples/sites/demos/pc/app/guide/{base.spec.ts => basic-usage.spec.ts} (96%)
 rename examples/sites/demos/pc/app/guide/{base.vue => basic-usage.vue} (51%)
 delete mode 100644 examples/sites/demos/pc/app/guide/content-step-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/content-step.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/guide/content-step.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-crossAxis-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-mainAxis-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.vue
 rename examples/sites/demos/pc/app/guide/{dom-hight-composition-api.vue => highlight-box-composition-api.vue} (53%)
 rename examples/sites/demos/pc/app/guide/{dom-hight.spec.ts => highlight-box.spec.ts} (95%)
 rename examples/sites/demos/pc/app/guide/{dom-hight.vue => highlight-box.vue} (56%)
 rename examples/sites/demos/pc/app/guide/{set-modal-overlay-opening-composition-api.vue => modal-overlay-opening-composition-api.vue} (100%)
 rename examples/sites/demos/pc/app/guide/{set-modal-overlay-opening.spec.ts => modal-overlay-opening.spec.ts} (89%)
 rename examples/sites/demos/pc/app/guide/{set-modal-overlay-opening.vue => modal-overlay-opening.vue} (100%)
 create mode 100644 examples/sites/demos/pc/app/guide/offset-composition-api.vue
 rename examples/sites/demos/pc/app/guide/{guide-poistion-mainAxis.spec.ts => offset.spec.ts} (85%)
 create mode 100644 examples/sites/demos/pc/app/guide/offset.vue
 rename examples/sites/demos/pc/app/guide/{content-steps-composition-api.vue => only-content-composition-api.vue} (70%)
 rename examples/sites/demos/pc/app/guide/{content-steps.spec.ts => only-content.spec.ts} (93%)
 rename examples/sites/demos/pc/app/guide/{content-steps.vue => only-content.vue} (74%)
 delete mode 100644 examples/sites/demos/pc/app/guide/title-steps-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/guide/title-steps.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/guide/title-steps.vue
 create mode 100644 examples/sites/demos/pc/app/guide/webdoc/guide.en.md

diff --git a/examples/sites/demos/pc/app/guide/arror-position-composition-api.vue b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
similarity index 70%
rename from examples/sites/demos/pc/app/guide/arror-position-composition-api.vue
rename to examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
index df64d3fcc..d2510d440 100644
--- a/examples/sites/demos/pc/app/guide/arror-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
@@ -1,25 +1,23 @@
 <template>
   <div>
-    <div class="guide-content">
-      <tiny-alert
-        class="pos"
-        :closable="false"
-        type="success"
-        size="large"
-        description="提交结果页用于反馈一系列操作任务的处理结果。"
-      >
-      </tiny-alert>
-    </div>
-    <div class="guide-title">
+    <tiny-alert
+      class="demo-guide-arrow-position"
+      :closable="false"
+      type="success"
+      size="large"
+      description="提交结果页用于反馈一系列操作任务的处理结果。"
+    >
+    </tiny-alert>
+    <div>
       <tiny-button plain @click="stepStart1">默认</tiny-button>
       <tiny-button plain @click="stepStart2">上居中</tiny-button>
-      <tiny-button plain @click="stepStart3">右居中</tiny-button>
+      <tiny-button plain @click="stepStart3">左居中</tiny-button>
       <tiny-button plain @click="stepStart4">独立位置上居中</tiny-button>
     </div>
     <tiny-guide :show-step="showStep1" :dom-data="data1"></tiny-guide>
     <tiny-guide :show-step="showStep2" :dom-data="data2" pop-position="top"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="right"></tiny-guide>
-    <tiny-guide :show-step="showStep4" :dom-data="data4"></tiny-guide>
+    <tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="left"></tiny-guide>
+    <tiny-guide :show-step="showStep4" :dom-data="data4" pop-position="left"></tiny-guide>
   </div>
 </template>
 
@@ -35,11 +33,11 @@ const data1 = ref([
   {
     title: '新手引导标题1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.pos',
+    domElement: '.demo-guide-arrow-position',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
@@ -48,11 +46,11 @@ const data2 = ref([
   {
     title: '新手引导标题2',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.pos',
+    domElement: '.demo-guide-arrow-position',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
@@ -61,11 +59,11 @@ const data3 = ref([
   {
     title: '新手引导标题3',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.pos',
+    domElement: '.demo-guide-arrow-position',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
@@ -75,11 +73,11 @@ const data4 = ref([
     popPosition: 'top',
     title: '新手引导标题4',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.pos',
+    domElement: '.demo-guide-arrow-position',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
@@ -103,13 +101,7 @@ function stepStart4() {
 </script>
 
 <style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 20px;
-  width: 600px;
-}
-.guide-content {
-  width: 600px;
+.demo-guide-arrow-position {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/guide/arror-position.spec.ts b/examples/sites/demos/pc/app/guide/arrow-position.spec.ts
similarity index 94%
rename from examples/sites/demos/pc/app/guide/arror-position.spec.ts
rename to examples/sites/demos/pc/app/guide/arrow-position.spec.ts
index 1267db61c..076b139de 100644
--- a/examples/sites/demos/pc/app/guide/arror-position.spec.ts
+++ b/examples/sites/demos/pc/app/guide/arrow-position.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('引导框箭头距离', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#arror-position')
+  await page.goto('guide#arrow-position')
 
   const guide = page.locator('body > .tiny-guide')
   const arrow = guide.locator('.shepherd-arrow')
diff --git a/examples/sites/demos/pc/app/guide/arror-position.vue b/examples/sites/demos/pc/app/guide/arrow-position.vue
similarity index 72%
rename from examples/sites/demos/pc/app/guide/arror-position.vue
rename to examples/sites/demos/pc/app/guide/arrow-position.vue
index 843270e80..80a78b341 100644
--- a/examples/sites/demos/pc/app/guide/arror-position.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position.vue
@@ -1,17 +1,23 @@
 <template>
   <div>
-    <tiny-alert class="pos" :closable="false" type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+    <tiny-alert
+      class="demo-guide-arrow-position"
+      :closable="false"
+      type="success"
+      size="large"
+      description="提交结果页用于反馈一系列操作任务的处理结果。"
+    >
     </tiny-alert>
-    <div class="guide-title">
+    <div>
       <tiny-button plain @click="stepStart1">默认</tiny-button>
       <tiny-button plain @click="stepStart2">上居中</tiny-button>
-      <tiny-button plain @click="stepStart3">右居中</tiny-button>
+      <tiny-button plain @click="stepStart3">左居中</tiny-button>
       <tiny-button plain @click="stepStart4">独立位置上居中</tiny-button>
     </div>
     <tiny-guide :show-step="showStep1" :dom-data="data1"></tiny-guide>
     <tiny-guide :show-step="showStep2" :dom-data="data2" pop-position="top"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="right"></tiny-guide>
-    <tiny-guide :show-step="showStep4" :dom-data="data4"></tiny-guide>
+    <tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="left"></tiny-guide>
+    <tiny-guide :show-step="showStep4" :dom-data="data4" pop-position="left"></tiny-guide>
   </div>
 </template>
 
@@ -34,11 +40,11 @@ export default {
         {
           title: '新手引导标题1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.pos',
+          domElement: '.demo-guide-arrow-position',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
@@ -47,11 +53,11 @@ export default {
         {
           title: '新手引导标题2',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.pos',
+          domElement: '.demo-guide-arrow-position',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
@@ -60,11 +66,11 @@ export default {
         {
           title: '新手引导标题3',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.pos',
+          domElement: '.demo-guide-arrow-position',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
@@ -74,11 +80,11 @@ export default {
           popPosition: 'top',
           title: '新手引导标题4',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.pos',
+          domElement: '.demo-guide-arrow-position',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
@@ -103,9 +109,7 @@ export default {
 </script>
 
 <style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 20px;
+.demo-guide-arrow-position {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/guide/base-composition-api.vue b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
similarity index 50%
rename from examples/sites/demos/pc/app/guide/base-composition-api.vue
rename to examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
index 624e3539a..833027978 100644
--- a/examples/sites/demos/pc/app/guide/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
@@ -1,17 +1,18 @@
 <template>
   <div>
-    <tiny-guide :show-step="showStep" :dom-data="domData" light-class="activeDom"></tiny-guide>
-    <div class="base-content">
-      <tiny-button plain class="guide-box1" @click="stepStart">基础新手引导开始</tiny-button>
+    <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+    <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
+    <div>
+      <tiny-button plain class="guide-box1">基础新手引导</tiny-button>
       <tiny-button plain class="guide-box2">带滚动条新手引导</tiny-button>
-      <tiny-button plain class="guide-box3">带滚动条无标题新手引导</tiny-button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
+import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
@@ -30,21 +31,6 @@ const domData = ref([
     title: '新手引导标题2',
     text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
     domElement: '.guide-box2',
-    button: [
-      {
-        text: '上一步',
-        action: 'back',
-        secondary: true
-      },
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  },
-  {
-    text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
-    domElement: '.guide-box3',
     button: [
       {
         text: '上一步',
@@ -55,22 +41,11 @@ const domData = ref([
         text: '完成',
         action: 'complete'
       }
-    ],
-    classes: 'only-content'
+    ]
   }
 ])
 
-onMounted(() => {
-  showStep.value = !showStep.value
-})
-
 function stepStart() {
   showStep.value = !showStep.value
 }
 </script>
-
-<style scoped>
-.base-content {
-  width: 100%;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/base.spec.ts b/examples/sites/demos/pc/app/guide/basic-usage.spec.ts
similarity index 96%
rename from examples/sites/demos/pc/app/guide/base.spec.ts
rename to examples/sites/demos/pc/app/guide/basic-usage.spec.ts
index 8a30a68d3..cbaf0bebe 100644
--- a/examples/sites/demos/pc/app/guide/base.spec.ts
+++ b/examples/sites/demos/pc/app/guide/basic-usage.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#base')
+  await page.goto('guide#basic-usage')
 
   const activeDom = await page.getByRole('button', { name: '基础新手引导开始' })
   const step1 = page.getByRole('heading', { name: '新手引导标题1' })
diff --git a/examples/sites/demos/pc/app/guide/base.vue b/examples/sites/demos/pc/app/guide/basic-usage.vue
similarity index 51%
rename from examples/sites/demos/pc/app/guide/base.vue
rename to examples/sites/demos/pc/app/guide/basic-usage.vue
index 8586007a6..b8669d3de 100644
--- a/examples/sites/demos/pc/app/guide/base.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage.vue
@@ -1,21 +1,23 @@
 <template>
   <div>
-    <tiny-guide :show-step="showStep" :dom-data="domData" light-class="activeDom"></tiny-guide>
-    <div class="base-content">
-      <tiny-button plain class="guide-box1" @click="stepStart">基础新手引导开始</tiny-button>
+    <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+    <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
+    <div>
+      <tiny-button plain class="guide-box1">基础新手引导</tiny-button>
       <tiny-button plain class="guide-box2">带滚动条新手引导</tiny-button>
-      <tiny-button plain class="guide-box3">带滚动条无标题新手引导</tiny-button>
     </div>
   </div>
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { Guide, Button, Divider } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGuide: Guide,
-    TinyButton: Button
+    TinyButton: Button,
+    TinyDivider: Divider
   },
   data() {
     return {
@@ -47,22 +49,6 @@ export default {
               action: 'next'
             }
           ]
-        },
-        {
-          text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
-          domElement: '.guide-box3',
-          button: [
-            {
-              text: '上一步',
-              action: 'back',
-              secondary: true
-            },
-            {
-              text: '完成',
-              action: 'complete'
-            }
-          ],
-          classes: 'only-content'
         }
       ]
     }
@@ -71,15 +57,6 @@ export default {
     stepStart() {
       this.showStep = !this.showStep
     }
-  },
-  mounted() {
-    this.showStep = !this.showStep
   }
 }
 </script>
-
-<style scoped>
-.base-content {
-  width: 100%;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/callback-composition-api.vue b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
index 25f9d1f7b..e5389638a 100644
--- a/examples/sites/demos/pc/app/guide/callback-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
@@ -1,12 +1,13 @@
 <template>
-  <div>
-    <div class="callback-content">我是{{ label }}</div>
-    <tiny-button plain class="e1" @click="stepStart">展示之前回调</tiny-button>
-    <tiny-button plain class="e2">展示回调</tiny-button>
-    <tiny-button plain class="e3">隐藏之前回调</tiny-button>
-    <tiny-button plain class="e4">隐藏回调</tiny-button>
-    <tiny-button plain class="e5">关闭取消回调</tiny-button>
-    <tiny-button plain class="e6">销毁/完成回调</tiny-button>
+  <div class="demo-guide-callback">
+    <p>当前事件回调：{{ label }}</p>
+    <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
+    <tiny-button plain class="e2">展示的回调</tiny-button>
+    <tiny-button plain class="e3">隐藏前的回调</tiny-button>
+    <br>
+    <tiny-button plain class="e4">隐藏的回调</tiny-button>
+    <tiny-button plain class="e5">关闭的回调</tiny-button>
+    <tiny-button plain class="e6">完成/销毁的回调</tiny-button>
 
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
@@ -142,8 +143,10 @@ function stepStart() {
 }
 </script>
 
-<style scoped>
-.callback-content {
-  margin-bottom: 20px;
+<style scoped lang="less">
+.demo-guide-callback {
+  & > * {
+    margin-bottom: 12px;
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/guide/callback.vue b/examples/sites/demos/pc/app/guide/callback.vue
index 72e5fbc06..fceb77455 100644
--- a/examples/sites/demos/pc/app/guide/callback.vue
+++ b/examples/sites/demos/pc/app/guide/callback.vue
@@ -1,12 +1,13 @@
 <template>
-  <div>
-    <div class="callback-content">我是{{ label }}</div>
-    <tiny-button plain class="e1" @click="stepStart">展示之前回调</tiny-button>
-    <tiny-button plain class="e2">展示回调</tiny-button>
-    <tiny-button plain class="e3">隐藏之前回调</tiny-button>
-    <tiny-button plain class="e4">隐藏回调</tiny-button>
-    <tiny-button plain class="e5">关闭取消回调</tiny-button>
-    <tiny-button plain class="e6">销毁/完成回调</tiny-button>
+  <div class="demo-guide-callback">
+    <p>当前事件回调：{{ label }}</p>
+    <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
+    <tiny-button plain class="e2">展示的回调</tiny-button>
+    <tiny-button plain class="e3">隐藏前的回调</tiny-button>
+    <br>
+    <tiny-button plain class="e4">隐藏的回调</tiny-button>
+    <tiny-button plain class="e5">关闭的回调</tiny-button>
+    <tiny-button plain class="e6">完成/销毁的回调</tiny-button>
 
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
@@ -152,8 +153,10 @@ export default {
 }
 </script>
 
-<style scoped>
-.callback-content {
-  margin-bottom: 20px;
+<style scoped lang="less">
+.demo-guide-callback {
+  & > * {
+    margin-bottom: 12px;
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/guide/content-step-composition-api.vue b/examples/sites/demos/pc/app/guide/content-step-composition-api.vue
deleted file mode 100644
index d7416fe45..000000000
--- a/examples/sites/demos/pc/app/guide/content-step-composition-api.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <tiny-button plain class="box" @click="stepStart">新手引导</tiny-button>
-    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
-
-const showStep = ref(false)
-const domData = ref([
-  {
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
-    domElement: '.box',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ],
-    classes: 'only-content'
-  }
-])
-
-function stepStart() {
-  showStep.value = !showStep.value
-}
-</script>
diff --git a/examples/sites/demos/pc/app/guide/content-step.spec.ts b/examples/sites/demos/pc/app/guide/content-step.spec.ts
deleted file mode 100644
index 28417862b..000000000
--- a/examples/sites/demos/pc/app/guide/content-step.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('纯段落用户引导', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#content-step')
-
-  const showBtn = page.getByRole('button', { name: '新手引导' })
-  const nextBtn = page.getByRole('button', { name: '下一步' })
-  const guide = page.getByRole('dialog')
-
-  await showBtn.click()
-  await expect(guide).toBeVisible()
-  await expect(guide).toHaveClass(/only-content/)
-  await expect(guide.locator('.shepherd-text')).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/guide/content-step.vue b/examples/sites/demos/pc/app/guide/content-step.vue
deleted file mode 100644
index 3858dfc6e..000000000
--- a/examples/sites/demos/pc/app/guide/content-step.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <tiny-button plain class="box" @click="stepStart">新手引导</tiny-button>
-    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
-  </div>
-</template>
-
-<script>
-import { Guide, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGuide: Guide,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      showStep: false,
-      domData: [
-        {
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
-          domElement: '.box',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ],
-          classes: 'only-content'
-        }
-      ]
-    }
-  },
-  methods: {
-    stepStart() {
-      this.showStep = !this.showStep
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis-composition-api.vue b/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis-composition-api.vue
deleted file mode 100644
index 9e69fdd26..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis-composition-api.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div>
-    <div class="guide-title">
-      <tiny-button plain @click="stepStart1">新手引导1</tiny-button>
-      <tiny-button plain @click="stepStart2">新手引导2</tiny-button>
-      <tiny-button plain @click="stepStart3">新手引导3</tiny-button>
-    </div>
-    <div class="guide-content">
-      <tiny-input class="a1" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="a2" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="a3" v-model="input" placeholder="请输入内容"></tiny-input>
-    </div>
-    <tiny-guide :show-step="showStep1" :dom-data="adata1" :alignment-axis="10" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="adata2" :alignment-axis="20" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="adata3" :alignment-axis="50" :pop-position="popPosition"></tiny-guide>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton, Input as TinyInput } from '@opentiny/vue'
-
-const showStep1 = ref(false)
-const showStep2 = ref(false)
-const showStep3 = ref(false)
-const input = ref('')
-const popPosition = ref('top-end')
-const adata1 = ref([
-  {
-    title: '新手引导标题1',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.a1',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const adata2 = ref([
-  {
-    title: '新手引导标题2',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.a2',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const adata3 = ref([
-  {
-    title: '新手引导标题3',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.a3',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-
-function stepStart1() {
-  showStep1.value = !showStep1.value
-}
-
-function stepStart2() {
-  showStep2.value = !showStep2.value
-}
-
-function stepStart3() {
-  showStep3.value = !showStep3.value
-}
-</script>
-
-<style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-}
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.spec.ts b/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.spec.ts
deleted file mode 100644
index 12303d327..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('引导框对齐轴距离', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#guide-poistion-alignmentAxis')
-
-  const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
-  const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
-  const guide = page.getByRole('dialog')
-  const arrow = guide.locator('.shepherd-arrow')
-
-  // 引导1 偏移量10
-  await guideBtn1.click()
-  await expect(guide).toBeVisible()
-  await expect(arrow).toHaveCSS('left', '383.5px')
-
-  // 引导2 偏移量20
-  await page.getByRole('button', { name: 'Close Tour' }).click()
-  await guideBtn2.click()
-  await expect(guide).toBeVisible()
-  await expect(arrow).toHaveCSS('left', '393.5px')
-})
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.vue b/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.vue
deleted file mode 100644
index 740e50b70..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-alignmentAxis.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <div class="guide-title">
-      <tiny-button plain @click="stepStart1">新手引导1</tiny-button>
-      <tiny-button plain @click="stepStart2">新手引导2</tiny-button>
-      <tiny-button plain @click="stepStart3">新手引导3</tiny-button>
-    </div>
-    <div class="guide-content">
-      <tiny-input class="a1" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="a2" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="a3" v-model="input" placeholder="请输入内容"></tiny-input>
-    </div>
-    <tiny-guide :show-step="showStep1" :dom-data="adata1" :alignment-axis="10" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="adata2" :alignment-axis="20" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="adata3" :alignment-axis="50" :pop-position="popPosition"></tiny-guide>
-  </div>
-</template>
-
-<script>
-import { Guide, Button, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGuide: Guide,
-    TinyButton: Button,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      showStep1: false,
-      showStep2: false,
-      showStep3: false,
-      input: '',
-      popPosition: 'top-end',
-      adata1: [
-        {
-          title: '新手引导标题1',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.a1',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      adata2: [
-        {
-          title: '新手引导标题2',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.a2',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      adata3: [
-        {
-          title: '新手引导标题3',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.a3',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    stepStart1() {
-      this.showStep1 = !this.showStep1
-    },
-    stepStart2() {
-      this.showStep2 = !this.showStep2
-    },
-    stepStart3() {
-      this.showStep3 = !this.showStep3
-    }
-  }
-}
-</script>
-
-<style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-}
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis-composition-api.vue b/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis-composition-api.vue
deleted file mode 100644
index 2aa421514..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis-composition-api.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div>
-    <div class="guide-title">
-      <tiny-button plain @click="stepStart1">新手引导1</tiny-button>
-      <tiny-button plain @click="stepStart2">新手引导2</tiny-button>
-      <tiny-button plain @click="stepStart3">新手引导3</tiny-button>
-    </div>
-    <div class="guide-content">
-      <tiny-input class="c1" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="c2" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="c3" v-model="input" placeholder="请输入内容"></tiny-input>
-    </div>
-    <tiny-guide :show-step="showStep1" :dom-data="cdata1" :cross-axis="10" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="cdata2" :cross-axis="20" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="cdata3" :cross-axis="50" :pop-position="popPosition"></tiny-guide>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton, Input as TinyInput } from '@opentiny/vue'
-
-const showStep1 = ref(false)
-const showStep2 = ref(false)
-const showStep3 = ref(false)
-const input = ref('')
-const popPosition = ref('top-end')
-const cdata1 = ref([
-  {
-    title: '新手引导标题1',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.c1',
-    classes: 'active',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const cdata2 = ref([
-  {
-    title: '新手引导标题2',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.c2',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const cdata3 = ref([
-  {
-    title: '新手引导标题3',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.c3',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-
-function stepStart1() {
-  showStep1.value = !showStep1.value
-}
-
-function stepStart2() {
-  showStep2.value = !showStep2.value
-}
-
-function stepStart3() {
-  showStep3.value = !showStep3.value
-}
-</script>
-
-<style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-}
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.spec.ts b/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.spec.ts
deleted file mode 100644
index 74c75c0ad..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('引导框横轴距离', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#guide-poistion-crossAxis')
-
-  const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
-  const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
-  const guide = page.getByRole('dialog')
-  const arrow = guide.locator('.shepherd-arrow')
-
-  // 引导1 距离10
-  await guideBtn1.click()
-  await expect(guide).toBeVisible()
-  await expect(arrow).toHaveCSS('left', '363.5px')
-
-  // 引导2 距离20
-  await page.getByRole('button', { name: 'Close Tour' }).click()
-  await guideBtn2.click()
-  await expect(guide).toBeVisible()
-  await expect(arrow).toHaveCSS('left', '353.5px')
-})
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.vue b/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.vue
deleted file mode 100644
index e04bd70dd..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-crossAxis.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <div class="guide-title">
-      <tiny-button plain @click="stepStart1">新手引导1</tiny-button>
-      <tiny-button plain @click="stepStart2">新手引导2</tiny-button>
-      <tiny-button plain @click="stepStart3">新手引导3</tiny-button>
-    </div>
-    <div class="guide-content">
-      <tiny-input class="c1" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="c2" v-model="input" placeholder="请输入内容"></tiny-input>
-      <tiny-input class="c3" v-model="input" placeholder="请输入内容"></tiny-input>
-    </div>
-    <tiny-guide :show-step="showStep1" :dom-data="cdata1" :cross-axis="10" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="cdata2" :cross-axis="20" :pop-position="popPosition"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="cdata3" :cross-axis="50" :pop-position="popPosition"></tiny-guide>
-  </div>
-</template>
-
-<script>
-import { Guide, Button, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGuide: Guide,
-    TinyButton: Button,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      showStep1: false,
-      showStep2: false,
-      showStep3: false,
-      input: '',
-      popPosition: 'top-end',
-      cdata1: [
-        {
-          title: '新手引导标题1',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.c1',
-          classes: 'active',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      cdata2: [
-        {
-          title: '新手引导标题2',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.c2',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      cdata3: [
-        {
-          title: '新手引导标题3',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.c3',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    stepStart1() {
-      this.showStep1 = !this.showStep1
-    },
-    stepStart2() {
-      this.showStep2 = !this.showStep2
-    },
-    stepStart3() {
-      this.showStep3 = !this.showStep3
-    }
-  }
-}
-</script>
-
-<style scoped>
-.guide-title {
-  display: flex;
-  justify-content: space-around;
-}
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis-composition-api.vue b/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis-composition-api.vue
deleted file mode 100644
index d877b6ef3..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis-composition-api.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="guide-content">
-    <tiny-button plain class="m1" @click="stepStart1">新手引导1</tiny-button>
-    <tiny-button plain class="m2" @click="stepStart2">新手引导2</tiny-button>
-    <tiny-button plain class="m3" @click="stepStart3">新手引导3</tiny-button>
-    <tiny-guide :show-step="showStep1" :dom-data="m1"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="m2" :main-axis="50"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="m3" :main-axis="100"></tiny-guide>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
-
-const showStep1 = ref(false)
-const showStep2 = ref(false)
-const showStep3 = ref(false)
-const m1 = ref([
-  {
-    title: '新手引导标题1',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.m1',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const m2 = ref([
-  {
-    title: '新手引导标题2',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.m2',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-const m3 = ref([
-  {
-    title: '新手引导标题3',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.m3',
-    button: [
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  }
-])
-
-function stepStart1() {
-  showStep1.value = !showStep1.value
-}
-
-function stepStart2() {
-  showStep2.value = !showStep2.value
-}
-
-function stepStart3() {
-  showStep3.value = !showStep3.value
-}
-</script>
-
-<style scoped>
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.vue b/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.vue
deleted file mode 100644
index eeaca0e08..000000000
--- a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="guide-content">
-    <tiny-button plain class="m1" @click="stepStart1">新手引导1</tiny-button>
-    <tiny-button plain class="m2" @click="stepStart2">新手引导2</tiny-button>
-    <tiny-button plain class="m3" @click="stepStart3">新手引导3</tiny-button>
-    <tiny-guide :show-step="showStep1" :dom-data="m1"></tiny-guide>
-    <tiny-guide :show-step="showStep2" :dom-data="m2" :main-axis="50"></tiny-guide>
-    <tiny-guide :show-step="showStep3" :dom-data="m3" :main-axis="100"></tiny-guide>
-  </div>
-</template>
-
-<script>
-import { Guide, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGuide: Guide,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      showStep1: false,
-      showStep2: false,
-      showStep3: false,
-      m1: [
-        {
-          title: '新手引导标题1',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.m1',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      m2: [
-        {
-          title: '新手引导标题2',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.m2',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ],
-      m3: [
-        {
-          title: '新手引导标题3',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.m3',
-          button: [
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    stepStart1() {
-      this.showStep1 = !this.showStep1
-    },
-    stepStart2() {
-      this.showStep2 = !this.showStep2
-    },
-    stepStart3() {
-      this.showStep3 = !this.showStep3
-    }
-  }
-}
-</script>
-
-<style scoped>
-.guide-content {
-  display: flex;
-  justify-content: space-around;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/dom-hight-composition-api.vue b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
similarity index 53%
rename from examples/sites/demos/pc/app/guide/dom-hight-composition-api.vue
rename to examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
index c6fbe8289..fbfaf3ea1 100644
--- a/examples/sites/demos/pc/app/guide/dom-hight-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
@@ -1,14 +1,17 @@
 <template>
-  <div class="tiny-hight-content">
-    <tiny-guide :show-step="showStep" :dom-data="domData">
+  <div>
+    <tiny-guide :show-step="showStep" :dom-data="domData" pop-position="top">
       <template #main>
-        <tiny-button plain @click="stepStart">引导</tiny-button>
-        <tiny-button plain class="hight1">新手引导1</tiny-button>
-        <tiny-button plain class="hight2">新手引导2</tiny-button>
-        <tiny-button plain class="hight3">新手引导3</tiny-button>
-        <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
-        <div class="hight11 tiny-hight-content-item">
-          <tiny-alert type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
+        <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+        <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+        <div>
+          <tiny-button plain class="hight1">新手引导1</tiny-button>
+          <tiny-button plain class="hight2">新手引导2</tiny-button>
+          <tiny-button plain class="hight3">新手引导3</tiny-button>
+        </div>
+        <div>
+          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
+          <tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
             <tiny-button size="mini" type="primary">继续提交</tiny-button>
             <tiny-button size="mini">取消操作</tiny-button>
           </tiny-alert>
@@ -20,16 +23,20 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Alert as TinyAlert, Button as TinyButton } from '@opentiny/vue'
+import {
+  Guide as TinyGuide,
+  Alert as TinyAlert,
+  Button as TinyButton,
+  Divider as TinyDivider
+} from '@opentiny/vue'
 
 const showStep = ref(false)
-const value = ref(false)
 const domData = ref([
   {
     title: '新手引导标题',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.hight1',
-    hightBox: ['.hight11', '.hight3', '.hight4'],
+    hightBox: ['.hight3', '.hight4', '.hight5'],
     button: [
       {
         text: '下一步',
@@ -42,6 +49,11 @@ const domData = ref([
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.hight2',
     button: [
+      {
+        text: '上一步',
+        action: 'back',
+        secondary: true
+      },
       {
         text: '下一步',
         action: 'next'
@@ -52,33 +64,22 @@ const domData = ref([
     title: '新手引导标题',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.hight3',
-    hightBox: ['.hight11'],
+    hightBox: ['.hight5'],
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '上一步',
+        action: 'back',
+        secondary: true
+      },
+      {
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
 ])
 
 function stepStart() {
-  value.value = !value.value
   showStep.value = !showStep.value
 }
 </script>
-
-<style scoped>
-.tiny-hight-content {
-  height: 500px;
-}
-
-.tiny-hight-content-item {
-  margin-top: 200px;
-}
-
-.hight4 {
-  width: auto;
-  height: 36px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/dom-hight.spec.ts b/examples/sites/demos/pc/app/guide/highlight-box.spec.ts
similarity index 95%
rename from examples/sites/demos/pc/app/guide/dom-hight.spec.ts
rename to examples/sites/demos/pc/app/guide/highlight-box.spec.ts
index e412561fe..1f68db11e 100644
--- a/examples/sites/demos/pc/app/guide/dom-hight.spec.ts
+++ b/examples/sites/demos/pc/app/guide/highlight-box.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('高亮多处', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#dom-hight')
+  await page.goto('guide#highlight-box')
 
   const showBtn = page.getByRole('button', { name: '引导', exact: true })
   const step1 = page.getByRole('button', { name: '新手引导1' })
diff --git a/examples/sites/demos/pc/app/guide/dom-hight.vue b/examples/sites/demos/pc/app/guide/highlight-box.vue
similarity index 56%
rename from examples/sites/demos/pc/app/guide/dom-hight.vue
rename to examples/sites/demos/pc/app/guide/highlight-box.vue
index eba0d3471..740212b2c 100644
--- a/examples/sites/demos/pc/app/guide/dom-hight.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box.vue
@@ -1,14 +1,17 @@
 <template>
-  <div class="tiny-hight-content">
-    <tiny-guide :show-step="showStep" :dom-data="domData">
+  <div>
+    <tiny-guide :show-step="showStep" :dom-data="domData" pop-position="top">
       <template #main>
-        <tiny-button plain @click="stepStart">引导</tiny-button>
-        <tiny-button plain class="hight1">新手引导1</tiny-button>
-        <tiny-button plain class="hight2">新手引导2</tiny-button>
-        <tiny-button plain class="hight3">新手引导3</tiny-button>
-        <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
-        <div class="hight11 tiny-hight-content-item">
-          <tiny-alert type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
+        <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+        <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+        <div>
+          <tiny-button plain class="hight1">新手引导1</tiny-button>
+          <tiny-button plain class="hight2">新手引导2</tiny-button>
+          <tiny-button plain class="hight3">新手引导3</tiny-button>
+        </div>
+        <div>
+          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
+          <tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
             <tiny-button size="mini" type="primary">继续提交</tiny-button>
             <tiny-button size="mini">取消操作</tiny-button>
           </tiny-alert>
@@ -19,24 +22,24 @@
 </template>
 
 <script>
-import { Guide, Alert, Button } from '@opentiny/vue'
+import { Guide, Alert, Button, Divider } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGuide: Guide,
     TinyAlert: Alert,
-    TinyButton: Button
+    TinyButton: Button,
+    TinyDivider: Divider
   },
   data() {
     return {
       showStep: false,
-      value: false,
       domData: [
         {
           title: '新手引导标题',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.hight1',
-          hightBox: ['.hight11', '.hight3', '.hight4'],
+          hightBox: ['.hight5', '.hight3', '.hight4'],
           button: [
             {
               text: '下一步',
@@ -49,6 +52,11 @@ export default {
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.hight2',
           button: [
+            {
+              text: '上一步',
+              action: 'back',
+              secondary: true
+            },
             {
               text: '下一步',
               action: 'next'
@@ -59,11 +67,16 @@ export default {
           title: '新手引导标题',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.hight3',
-          hightBox: ['.hight11'],
+          hightBox: ['.hight5'],
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '上一步',
+              action: 'back',
+              secondary: true
+            },
+            {
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
@@ -72,24 +85,8 @@ export default {
   },
   methods: {
     stepStart() {
-      this.value = !this.value
       this.showStep = !this.showStep
     }
   }
 }
 </script>
-
-<style scoped>
-.tiny-hight-content {
-  height: 500px;
-}
-
-.tiny-hight-content-item {
-  margin-top: 200px;
-}
-
-.hight4 {
-  width: auto;
-  height: 36px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/image-text-composition-api.vue b/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
index 5c05e9fc7..80974a95d 100644
--- a/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
@@ -18,8 +18,8 @@ const domData = ref([
     domElement: '.btn1',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
diff --git a/examples/sites/demos/pc/app/guide/image-text.vue b/examples/sites/demos/pc/app/guide/image-text.vue
index 34936ccdd..3dcd25c58 100644
--- a/examples/sites/demos/pc/app/guide/image-text.vue
+++ b/examples/sites/demos/pc/app/guide/image-text.vue
@@ -24,8 +24,8 @@ export default {
           domElement: '.btn1',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
diff --git a/examples/sites/demos/pc/app/guide/set-modal-overlay-opening-composition-api.vue b/examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue
similarity index 100%
rename from examples/sites/demos/pc/app/guide/set-modal-overlay-opening-composition-api.vue
rename to examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue
diff --git a/examples/sites/demos/pc/app/guide/set-modal-overlay-opening.spec.ts b/examples/sites/demos/pc/app/guide/modal-overlay-opening.spec.ts
similarity index 89%
rename from examples/sites/demos/pc/app/guide/set-modal-overlay-opening.spec.ts
rename to examples/sites/demos/pc/app/guide/modal-overlay-opening.spec.ts
index 73197ed24..b7a7e815a 100644
--- a/examples/sites/demos/pc/app/guide/set-modal-overlay-opening.spec.ts
+++ b/examples/sites/demos/pc/app/guide/modal-overlay-opening.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('在模态叠加层开口周围添加的填充量', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#set-modal-overlay-opening')
+  await page.goto('guide#modal-overlay-opening')
 
   const showBtn = page.getByRole('button', { name: '新手引导' })
   const guide = page.getByRole('dialog')
diff --git a/examples/sites/demos/pc/app/guide/set-modal-overlay-opening.vue b/examples/sites/demos/pc/app/guide/modal-overlay-opening.vue
similarity index 100%
rename from examples/sites/demos/pc/app/guide/set-modal-overlay-opening.vue
rename to examples/sites/demos/pc/app/guide/modal-overlay-opening.vue
diff --git a/examples/sites/demos/pc/app/guide/offset-composition-api.vue b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
new file mode 100644
index 000000000..5cc4201e8
--- /dev/null
+++ b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
+    <tiny-button plain @click="stepStartDefault">默认</tiny-button>
+    <tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
+    <tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
+    <tiny-button plain @click="stepStartAlignmentAxis">对齐轴偏移 50px</tiny-button>
+    <tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
+    <tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
+    <tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
+    <tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Guide as TinyGuide, Button as TinyButton, Alert as TinyAlert } from '@opentiny/vue'
+
+const showStepDefault = ref(false)
+const showStepMainAxis = ref(false)
+const showStepCrossAxis = ref(false)
+const showStepAlignmentAxis = ref(false)
+const domDataDefault = ref([
+  {
+    title: '新手引导标题1',
+    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+    domElement: '.demo-guide-offset',
+    button: [
+      {
+        text: '完成',
+        action: 'complete'
+      }
+    ]
+  }
+])
+const domDataMainAxis = ref([
+  {
+    title: '新手引导标题2',
+    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+    domElement: '.demo-guide-offset',
+    button: [
+      {
+        text: '完成',
+        action: 'complete'
+      }
+    ]
+  }
+])
+const domDataCrossAxis = ref([
+  {
+    title: '新手引导标题3',
+    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+    domElement: '.demo-guide-offset',
+    button: [
+      {
+        text: '完成',
+        action: 'complete'
+      }
+    ]
+  }
+])
+const domDataAlignmentAxis = ref([
+  {
+    title: '新手引导标题4',
+    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+    domElement: '.demo-guide-offset',
+    button: [
+      {
+        text: '完成',
+        action: 'complete'
+      }
+    ]
+  }
+])
+
+function stepStartDefault() {
+  showStepDefault.value = !showStepDefault.value
+}
+
+function stepStartMainAxis() {
+  showStepMainAxis.value = !showStepMainAxis.value
+}
+
+function stepStartCrossAxis() {
+  showStepCrossAxis.value = !showStepCrossAxis.value
+}
+
+function stepStartAlignmentAxis() {
+  showStepAlignmentAxis.value = !showStepAlignmentAxis.value
+}
+</script>
diff --git a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.spec.ts b/examples/sites/demos/pc/app/guide/offset.spec.ts
similarity index 85%
rename from examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.spec.ts
rename to examples/sites/demos/pc/app/guide/offset.spec.ts
index 794c0e00a..8a49d2aa6 100644
--- a/examples/sites/demos/pc/app/guide/guide-poistion-mainAxis.spec.ts
+++ b/examples/sites/demos/pc/app/guide/offset.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('引导框主轴（纵轴）距离', async ({ page }) => {
+test('引导框偏移量', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#guide-poistion-mainAxis')
+  await page.goto('guide#offset')
 
   const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
   const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
diff --git a/examples/sites/demos/pc/app/guide/offset.vue b/examples/sites/demos/pc/app/guide/offset.vue
new file mode 100644
index 000000000..62dbb4330
--- /dev/null
+++ b/examples/sites/demos/pc/app/guide/offset.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
+    <tiny-button plain @click="stepStartDefault">默认</tiny-button>
+    <tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
+    <tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
+    <tiny-button plain @click="stepStartAlignmentAxis">对齐轴偏移 50px</tiny-button>
+    <tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
+    <tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
+    <tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
+    <tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
+  </div>
+</template>
+
+<script>
+import { Guide, Button, Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGuide: Guide,
+    TinyButton: Button,
+    TinyAlert: Alert
+  },
+  data() {
+    return {
+      showStepDefault: false,
+      showStepMainAxis: false,
+      showStepCrossAxis: false,
+      showStepAlignmentAxis: false,
+      domDataDefault: [
+        {
+          title: '新手引导标题1',
+          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+          domElement: '.demo-guide-offset',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ],
+      domDataMainAxis: [
+        {
+          title: '新手引导标题2',
+          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+          domElement: '.demo-guide-offset',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ],
+      domDataCrossAxis: [
+        {
+          title: '新手引导标题3',
+          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+          domElement: '.demo-guide-offset',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ],
+      domDataAlignmentAxis: [
+        {
+          title: '新手引导标题4',
+          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
+          domElement: '.demo-guide-offset',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    stepStartDefault() {
+      this.showStepDefault = !this.showStepDefault
+    },
+    stepStartMainAxis() {
+      this.showStepMainAxis = !this.showStepMainAxis
+    },
+    stepStartCrossAxis() {
+      this.showStepCrossAxis = !this.showStepCrossAxis
+    },
+    stepStartAlignmentAxis() {
+      this.showStepAlignmentAxis = !this.showStepAlignmentAxis
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/guide/content-steps-composition-api.vue b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
similarity index 70%
rename from examples/sites/demos/pc/app/guide/content-steps-composition-api.vue
rename to examples/sites/demos/pc/app/guide/only-content-composition-api.vue
index b38a493f8..c37808f72 100644
--- a/examples/sites/demos/pc/app/guide/content-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
@@ -1,15 +1,18 @@
 <template>
   <div>
-    <tiny-button plain @click="stepStart">新手引导开始</tiny-button>
-    <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
-    <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+    <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+    <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+    <div>
+      <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
+      <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+    </div>
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
diff --git a/examples/sites/demos/pc/app/guide/content-steps.spec.ts b/examples/sites/demos/pc/app/guide/only-content.spec.ts
similarity index 93%
rename from examples/sites/demos/pc/app/guide/content-steps.spec.ts
rename to examples/sites/demos/pc/app/guide/only-content.spec.ts
index b2dd91037..775cca822 100644
--- a/examples/sites/demos/pc/app/guide/content-steps.spec.ts
+++ b/examples/sites/demos/pc/app/guide/only-content.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('多步骤纯段落用户引导', async ({ page }) => {
+test('纯段落用户引导', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#content-steps')
+  await page.goto('guide#only-content')
 
   const showBtn = page.getByRole('button', { name: '新手引导开始' })
   const nextBtn = page.getByRole('button', { name: '下一步' })
diff --git a/examples/sites/demos/pc/app/guide/content-steps.vue b/examples/sites/demos/pc/app/guide/only-content.vue
similarity index 74%
rename from examples/sites/demos/pc/app/guide/content-steps.vue
rename to examples/sites/demos/pc/app/guide/only-content.vue
index 94212cce4..e5bf17443 100644
--- a/examples/sites/demos/pc/app/guide/content-steps.vue
+++ b/examples/sites/demos/pc/app/guide/only-content.vue
@@ -1,19 +1,23 @@
 <template>
   <div>
-    <tiny-button plain @click="stepStart">新手引导开始</tiny-button>
-    <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
-    <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+    <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
+    <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
+    <div>
+      <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
+      <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+    </div>
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { Guide, Button, Divider } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGuide: Guide,
-    TinyButton: Button
+    TinyButton: Button,
+    TinyDivider: Divider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/size-composition-api.vue b/examples/sites/demos/pc/app/guide/size-composition-api.vue
index 49ab369ec..7d85eefe7 100644
--- a/examples/sites/demos/pc/app/guide/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/size-composition-api.vue
@@ -6,7 +6,6 @@
       :dom-data="domData"
       width="300"
       height="200"
-      :modal-overlay-opening-paddin="size"
     ></tiny-guide>
   </div>
 </template>
@@ -15,7 +14,6 @@
 import { ref } from 'vue'
 import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
 
-const size = ref(10)
 const showStep = ref(false)
 const domData = ref([
   {
@@ -24,8 +22,8 @@ const domData = ref([
     domElement: '.h1',
     button: [
       {
-        text: '下一步',
-        action: 'next'
+        text: '完成',
+        action: 'complete'
       }
     ]
   }
diff --git a/examples/sites/demos/pc/app/guide/size.vue b/examples/sites/demos/pc/app/guide/size.vue
index 4ee6a42da..69d19a599 100644
--- a/examples/sites/demos/pc/app/guide/size.vue
+++ b/examples/sites/demos/pc/app/guide/size.vue
@@ -6,7 +6,6 @@
       :dom-data="domData"
       width="300"
       height="200"
-      :modal-overlay-opening-paddin="size"
     ></tiny-guide>
   </div>
 </template>
@@ -21,7 +20,6 @@ export default {
   },
   data() {
     return {
-      size: 10,
       showStep: false,
       domData: [
         {
@@ -30,8 +28,8 @@ export default {
           domElement: '.h1',
           button: [
             {
-              text: '下一步',
-              action: 'next'
+              text: '完成',
+              action: 'complete'
             }
           ]
         }
diff --git a/examples/sites/demos/pc/app/guide/title-steps-composition-api.vue b/examples/sites/demos/pc/app/guide/title-steps-composition-api.vue
deleted file mode 100644
index 679bd7f00..000000000
--- a/examples/sites/demos/pc/app/guide/title-steps-composition-api.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="guide-content">
-    <tiny-button @click="stepStart">多步骤新手引导开始</tiny-button>
-    <br />
-    <tiny-button plain class="guide1-title-steps">新手引导1</tiny-button>
-    <br />
-    <tiny-button plain class="guide2-title-steps">新手引导2</tiny-button>
-    <br />
-    <tiny-button plain class="guide3-title-steps">新手引导3</tiny-button>
-    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
-
-const showStep = ref(false)
-const domData = ref([
-  {
-    title: '新手引导标题1',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.guide1-title-steps',
-    button: [
-      {
-        text: '下一步',
-        action: 'next',
-        classes: 'step'
-      }
-    ]
-  },
-  {
-    title: '新手引导标题2',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.guide2-title-steps',
-    button: [
-      {
-        text: '上一步',
-        action: 'back',
-        secondary: true
-      },
-      {
-        text: '下一步',
-        action: 'next'
-      }
-    ]
-  },
-  {
-    title: '新手引导标题3',
-    text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-    domElement: '.guide3-title-steps',
-    button: [
-      {
-        text: '上一步',
-        action: 'back',
-        secondary: true
-      },
-      {
-        text: '立即体验',
-        action: 'complete',
-        secondary: true
-      },
-      {
-        text: '完成',
-        action: 'complete'
-      }
-    ]
-  }
-])
-
-function stepStart() {
-  showStep.value = !showStep.value
-}
-</script>
-
-<style scoped>
-.guide-content {
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/title-steps.spec.ts b/examples/sites/demos/pc/app/guide/title-steps.spec.ts
deleted file mode 100644
index 0c5180865..000000000
--- a/examples/sites/demos/pc/app/guide/title-steps.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('通过添加多个类名实现用户引导', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('guide#title-steps')
-
-  const showBtn = page.getByRole('button', { name: '多步骤新手引导开始' })
-  const step1 = page.getByRole('heading', { name: '新手引导标题1' })
-  const step2 = page.getByRole('heading', { name: '新手引导标题2' })
-  const step3 = page.getByRole('dialog').locator('div').nth(2)
-  const next = page.getByRole('button', { name: '下一步' })
-  const complate = page.getByRole('button', { name: '完成' })
-  const closeBtn = page.getByRole('button', { name: 'Close Tour' })
-
-  await showBtn.click()
-  await expect(step1).toBeVisible()
-  await next.click()
-  await expect(step2).toBeVisible()
-  await next.click()
-  await expect(step3).toBeVisible()
-  await complate.click()
-  await expect(step3).toBeHidden()
-})
diff --git a/examples/sites/demos/pc/app/guide/title-steps.vue b/examples/sites/demos/pc/app/guide/title-steps.vue
deleted file mode 100644
index b27337d33..000000000
--- a/examples/sites/demos/pc/app/guide/title-steps.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="guide-content">
-    <tiny-button @click="stepStart">多步骤新手引导开始</tiny-button>
-    <br />
-    <tiny-button plain class="guide1-title-steps">新手引导1</tiny-button>
-    <br />
-    <tiny-button plain class="guide2-title-steps">新手引导2</tiny-button>
-    <br />
-    <tiny-button plain class="guide3-title-steps">新手引导3</tiny-button>
-    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
-  </div>
-</template>
-
-<script>
-import { Guide, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGuide: Guide,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      showStep: false,
-      domData: [
-        {
-          title: '新手引导标题1',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.guide1-title-steps',
-          button: [
-            {
-              text: '下一步',
-              action: 'next',
-              classes: 'step'
-            }
-          ]
-        },
-        {
-          title: '新手引导标题2',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.guide2-title-steps',
-          button: [
-            {
-              text: '上一步',
-              action: 'back',
-              secondary: true
-            },
-            {
-              text: '下一步',
-              action: 'next'
-            }
-          ]
-        },
-        {
-          title: '新手引导标题3',
-          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
-          domElement: '.guide3-title-steps',
-          button: [
-            {
-              text: '上一步',
-              action: 'back',
-              secondary: true
-            },
-            {
-              text: '立即体验',
-              action: 'complete',
-              secondary: true
-            },
-            {
-              text: '完成',
-              action: 'complete'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    stepStart() {
-      this.showStep = !this.showStep
-    }
-  }
-}
-</script>
-
-<style scoped>
-.guide-content {
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/guide/webdoc/guide.en.md b/examples/sites/demos/pc/app/guide/webdoc/guide.en.md
new file mode 100644
index 000000000..6ca2dbe85
--- /dev/null
+++ b/examples/sites/demos/pc/app/guide/webdoc/guide.en.md
@@ -0,0 +1,7 @@
+---
+title: Guide
+---
+
+# Guide
+
+<div>Guide</div>
diff --git a/examples/sites/demos/pc/app/guide/webdoc/guide.js b/examples/sites/demos/pc/app/guide/webdoc/guide.js
index 0042b2202..ff9641df9 100644
--- a/examples/sites/demos/pc/app/guide/webdoc/guide.js
+++ b/examples/sites/demos/pc/app/guide/webdoc/guide.js
@@ -3,76 +3,58 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'base',
+      'demoId': 'basic-usage',
       'name': { 'zh-CN': '基础用法', 'en-US': '' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': '' },
-      'codeFiles': ['base.vue']
-    },
-    {
-      'demoId': 'arror-position',
-      'name': { 'zh-CN': '引导框箭头距离', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>pop-position</code> 属性设置箭头方向。<br>该属性的可选值为 <code>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</code> <br>若存在多个步骤，需要单独给每个步骤设置不同的展示位置，可以在 <code>dom-data</code> 里面添加 <code>popPosition</code> 属性并赋值，若存在单独设置的箭头方向，则会覆盖全局的箭头方向</p>\n',
+        'zh-CN': '<p>通过 <code>dom-data</code> 设置每一个步骤要显示的内容，<code>show-step</code> 设置为 <code>true</code> 即可开启指引。<code>dom-data</code> 详细配置可参考 <a href="#IDomData">IDomData</a> 类型。</p>',
         'en-US': ''
       },
-      'codeFiles': ['arror-position.vue']
+      'codeFiles': ['basic-usage.vue']
     },
     {
-      'demoId': 'callback',
-      'name': { 'zh-CN': '窗口的事件回调', 'en-US': '' },
+      'demoId': 'arrow-position',
+      'name': { 'zh-CN': '箭头位置', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p>窗口的事件回调<br>在 <code>dom-data<code> 中使用：<br> <code>beforeShow</code> ：展示前回调<br> <code>show</code> ：展示回调<br> <code>beforeHide</code> ：隐藏前回调<br> <code>hide</code> ：隐藏回调<br> <code>cancel</code> ：关闭取消回调<br> <code>complete</code> ：完成回调<br>  <code>destroy</code> ：销毁回调</p>',
+        'zh-CN': `
+          <p>通过 <code>pop-position</code> 属性设置箭头位置，该属性的可选值可参考 <a href="#IPosition">IPosition</a> 类型。</p>
+          <p>若存在多个步骤，需要单独给每个步骤设置不同的展示位置，可以在 <code>dom-data</code> 里面添加 <code>popPosition</code> 属性并赋值，若存在单独设置的箭头位置，则会覆盖全局的箭头位置。</p>
+        `,
         'en-US': ''
       },
-      'codeFiles': ['callback.vue']
+      'codeFiles': ['arrow-position.vue']
     },
     {
-      'demoId': 'content-step',
+      'demoId': 'only-content',
       'name': { 'zh-CN': '纯段落用户引导', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n', 'en-US': '' },
-      'codeFiles': ['content-step.vue']
+      'desc': {
+        'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导。</p>',
+        'en-US': ''
+      },
+      'codeFiles': ['only-content.vue']
     },
     {
-      'demoId': 'content-steps',
-      'name': { 'zh-CN': '多步骤纯段落用户引导', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n', 'en-US': '' },
-      'codeFiles': ['content-steps.vue']
-    },
-    {
-      'demoId': 'dom-hight',
+      'demoId': 'highlight-box',
       'name': { 'zh-CN': '高亮多处', 'en-US': '' },
       'desc': {
-        'zh-CN': '<p>在 <code>dom-data</code> 里面通过 <code>hightBox</code>属性添加需要高亮的元素</p>\n',
+        'zh-CN': '<p>在 <code>dom-data</code> 里面通过 <code>hightBox</code> 属性添加需要高亮的元素。</p>',
         'en-US': ''
       },
-      'codeFiles': ['dom-hight.vue']
+      'codeFiles': ['highlight-box.vue']
     },
     {
-      'demoId': 'guide-poistion-mainAxis',
-      'name': { 'zh-CN': '引导框主轴（纵轴）距离', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过设置 <code>main-axis</code> 大小来设置主轴（纵轴）距离</p>\n', 'en-US': '' },
-      'codeFiles': ['guide-poistion-mainAxis.vue']
-    },
-    {
-      'demoId': 'guide-poistion-crossAxis',
-      'name': { 'zh-CN': '引导框横轴距离', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过设置 <code>cross-axis</code> 大小来设置横轴距离</p>\n', 'en-US': '' },
-      'codeFiles': ['guide-poistion-crossAxis.vue']
-    },
-    {
-      'demoId': 'guide-poistion-alignmentAxis',
-      'name': { 'zh-CN': '引导框对齐轴距离', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过设置 <code>alignment-axis</code> 大小来设置对齐轴距离</p>\n', 'en-US': '' },
-      'codeFiles': ['guide-poistion-alignmentAxis.vue']
+      'demoId': 'offset',
+      'name': { 'zh-CN': '引导框偏移量', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>main-axis</code> / <code>cross-axis</code> / <code>alignment-axis</code> 设置纵轴、横轴和对齐轴的偏移量。</p>',
+        'en-US': ''
+      },
+      'codeFiles': ['offset.vue']
     },
     {
       'demoId': 'image-text',
       'name': { 'zh-CN': '图文结合用户引导', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p>可以在插槽里面添加任何 <code>html</code> 或通过 <code>dom-data</code> 里面的 <code>text</code> 属性实现图文结合用户引导</p>\n',
+        'zh-CN': '<p>可以在插槽里面添加任何 <code>html</code> 或通过 <code>dom-data</code> 里面的 <code>text</code> 属性实现图文结合用户引导。</p>',
         'en-US': ''
       },
       'codeFiles': ['image-text.vue']
@@ -80,111 +62,150 @@ export default {
     {
       'demoId': 'size',
       'name': { 'zh-CN': '自定义宽高', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过添加 <code>width</code>和 <code>height</code>来自定义宽高</p>\n', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>通过添加 <code>width</code> 和 <code>height</code> 来自定义宽高。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['size.vue']
     },
     {
-      'demoId': 'title-steps',
-      'name': { 'zh-CN': '通过添加多个类名实现用户引导', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>详细用法参考如下示例</p>\n', 'en-US': '' },
-      'codeFiles': ['title-steps.vue']
-    },
-    {
-      'demoId': 'set-modal-overlay-opening',
+      'demoId': 'modal-overlay-opening',
       'name': { 'zh-CN': '设置模态叠加层开口', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p><code>modal-overlay-opening-padding</code> ：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮范围<br><p><code>modal-overlay-opening-radius</code> ：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮圆角</p>\n',
+        'zh-CN': `
+          <p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围；</p>
+          <p><code>modal-overlay-opening-radius</code>：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮圆角。</p>
+        `,
         'en-US': ''
       },
-      'codeFiles': ['set-modal-overlay-opening.vue']
+      'codeFiles': ['modal-overlay-opening.vue']
+    },
+    {
+      'demoId': 'callback',
+      'name': { 'zh-CN': '事件回调', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>事件回调在 <code>dom-data</code> 中使用，详情可参考 <a href="#IDomData">IDomData</a> 类型。</p>',
+        'en-US': ''
+      },
+      'codeFiles': ['callback.vue']
     }
   ],
   apis: [
     {
       'name': 'guide',
       'type': 'component',
-      'properties': [
+      'props': [
         {
-          'name': 'arrow',
-          'type': 'boolean ',
-          'defaultValue': 'true',
-          'desc': { 'zh-CN': '是否显示工具提示的箭头', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'pop-position',
-          'type': 'string ',
-          'defaultValue': 'bottom',
+          'name': 'alignment-axis',
+          'type': 'number',
+          'defaultValue': '0',
           'desc': {
-            'zh-CN':
-              '引导框箭头距离，该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end',
+            'zh-CN': '设置引导框对齐轴距离',
             'en-US': ''
           },
-          'demoId': 'arror-position'
+          'demoId': 'offset'
         },
         {
-          'name': 'dom-data',
-          'type': 'Array ',
-          'defaultValue': '[]',
-          'desc': { 'zh-CN': '用户引导参数', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'main-axis',
-          'type': 'number ',
-          'defaultValue': '18',
-          'desc': { 'zh-CN': '设置引导框主轴（纵轴）距离', 'en-US': '' },
-          'demoId': 'guide-poistion-mainAxis'
+          'name': 'arrow',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示工具提示的箭头',
+            'en-US': ''
+          },
+          'demoId': 'basic-usage'
         },
         {
           'name': 'cross-axis',
-          'type': 'number ',
+          'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '设置引导框横轴距离', 'en-US': '' },
-          'demoId': 'guide-poistion-crossAxis'
+          'desc': {
+            'zh-CN': '设置引导框横轴距离',
+            'en-US': ''
+          },
+          'demoId': 'offset'
         },
         {
-          'name': 'alignment-axis',
-          'type': 'number ',
-          'defaultValue': '0',
-          'desc': { 'zh-CN': '设置引导框对齐轴距离', 'en-US': '' },
-          'demoId': 'guide-poistion-alignmentAxis'
-        },
-        {
-          'name': 'width',
-          'type': 'number ',
-          'defaultValue': '510',
-          'desc': { 'zh-CN': '设置引导框宽度', 'en-US': '' },
-          'demoId': 'size'
+          'name': 'dom-data',
+          'type': 'IDomData[]',
+          'typeAnchorName': 'IDomData',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '用户引导参数',
+            'en-US': ''
+          },
+          'demoId': 'basic-usage'
         },
         {
           'name': 'height',
-          'type': 'number ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置引导框高度', 'en-US': '' },
+          'type': 'number',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '设置引导框高度',
+            'en-US': ''
+          },
           'demoId': 'size'
         },
+        {
+          'name': 'light-class',
+          'type': 'string',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的类名',
+            'en-US': ''
+          },
+          'demoId': ''
+        },
+        {
+          'name': 'main-axis',
+          'type': 'number',
+          'defaultValue': '18',
+          'desc': {
+            'zh-CN': '设置引导框主轴（纵轴）距离',
+            'en-US': ''
+          },
+          'demoId': 'offset'
+        },
         {
           'name': 'modal-overlay-opening-padding',
-          'type': 'number ',
+          'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '在模态叠加层开口周围添加的填充量', 'en-US': '' },
-          'demoId': 'set-modal-overlay-opening'
+          'desc': {
+            'zh-CN': '在模态叠加层开口周围添加的填充量',
+            'en-US': ''
+          },
+          'demoId': 'modal-overlay-opening'
         },
         {
           'name': 'modal-overlay-opening-radius',
-          'type': 'number ',
+          'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '在模态叠加层开口周围添加的边界半径量', 'en-US': '' },
-          'demoId': 'set-modal-overlay-opening'
+          'desc': {
+            'zh-CN': '在模态叠加层开口周围添加的边界半径量',
+            'en-US': ''
+          },
+          'demoId': 'modal-overlay-opening'
         },
         {
-          'name': 'light-class',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的额外类', 'en-US': '' },
-          'demoId': 'activeDom'
+          'name': 'pop-position',
+          'type': 'IPosition',
+          'typeAnchorName': 'IPosition',
+          'defaultValue': '\'bottom\'',
+          'desc': {
+            'zh-CN': '引导框箭头位置，该属性的可选值可参考 IPosition 类型',
+            'en-US': ''
+          },
+          'demoId': 'arrow-position'
+        },
+        {
+          'name': 'width',
+          'type': 'number',
+          'defaultValue': '510',
+          'desc': {
+            'zh-CN': '设置引导框宽度',
+            'en-US': ''
+          },
+          'demoId': 'size'
         }
       ],
       'events': [],
@@ -193,127 +214,67 @@ export default {
           'name': 'main',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置引导框内容', 'en-US': '' },
-          'demoId': 'dom-hight'
-        }
-      ],
-      'domData-attrs': [
-        {
-          'name': 'title',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '表示需要设置的头部标题名', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'text',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '表示需要填入的内容区（可以是一个 html）', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'domElement',
-          'type': 'string ',
-          'defaultValue': '',
           'desc': {
-            'zh-CN': '表示需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）',
+            'zh-CN': '设置引导框内容',
             'en-US': ''
           },
-          'demoId': 'base'
-        },
-        {
-          'name': 'hightBox',
-          'type': 'Array ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '添加需要高亮的元素的类名', 'en-US': '' },
-          'demoId': 'dom-hight'
-        },
-        {
-          'name': 'classes',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '要添加到步骤的内容元素的一串额外类', 'en-US': '' },
-          'demoId': 'guide-poistion-crossAxis'
-        },
-        {
-          'name': 'beforeShow',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '展示前回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'beforeHide',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '隐藏前回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'hide',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '隐藏回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'cancel',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '关闭取消回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'destroy',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '销毁回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'complete',
-          'type': 'Fnction ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '完成回调', 'en-US': '' },
-          'demoId': 'callback'
-        },
-        {
-          'name': 'button',
-          'type': 'Array ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '表示需要设置的按钮组', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'button.text',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '表示需要设置的按钮名', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'button.action',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': "表示需要执行的步骤，包含'next(下一步)、back(返回)、complete(完成)'", 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'button.classes',
-          'type': 'string ',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '表示可以为按钮设置的样式类名', 'en-US': '' },
-          'demoId': 'title-steps'
-        },
-        {
-          'name': 'button.secondary',
-          'type': 'boolean ',
-          'defaultValue': 'false',
-          'desc': { 'zh-CN': '表示为按钮设置透明样式', 'en-US': '' },
-          'demoId': 'content-steps'
+          'demoId': 'highlight-box'
         }
       ]
     }
+  ],
+  'types': [
+    {
+      name: 'IDomData',
+      type: 'interface',
+      code: `
+interface IDomData {
+  // 指引的标题
+  title: string
+  // 指引的内容（可以是 html）
+  text: string
+  // 需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）
+  domElement: string
+  // 添加需要高亮的元素的类名
+  hightBox: string[]
+  // 要添加到步骤的内容元素的一串类名
+  classes: string
+
+  // 展示前的回调函数
+  beforeShow: () => void
+  // 隐藏前的回调函数
+  beforeHide: () => void
+  // 显示的回调函数
+  show: () => void
+  // 隐藏的回调函数
+  hide: () => void
+  // 关闭的回调函数
+  cancel: () => void
+  //销毁的回调函数
+  destroy: () => void
+  // 完成的回调函数
+  completey: () => void
+
+  // 需要设置的按钮组
+  button: {
+    // 按钮名
+    text: string
+    // 需要执行的步骤，包含 next(下一步)、back(返回)、complete(完成)
+    action: 'next' | 'back' | 'complete'
+    // 按钮的类名
+    classes: string
+    // 是否是次要按钮
+    secondary: boolean
+  }[]
+}
+      `
+    },
+    {
+      name: 'IPosition',
+      type: 'type',
+      code: `
+type IPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
+    }
   ]
 }