From e8fe16bd8e104cc457b5c445b2ade09dd284e9e3 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Mon, 29 Jan 2024 17:21:49 +0800
Subject: [PATCH] chore(tour): split demo (#2893)

---
 .../src/exhibition/pages/tour/basic.vue       |  19 ++
 .../src/exhibition/pages/tour/content.vue     |  43 +++
 .../src/exhibition/pages/tour/custom.vue      |  31 ++
 .../src/exhibition/pages/tour/index.vue       | 266 ++--------------
 .../src/exhibition/pages/tour/position.vue    |  39 +++
 .../src/exhibition/pages/tour/step.vue        |  43 +++
 src/packages/__VUE/tour/demo.vue              | 284 ------------------
 src/packages/__VUE/tour/demo/basic.vue        |  19 ++
 src/packages/__VUE/tour/demo/content.vue      |  43 +++
 src/packages/__VUE/tour/demo/custom.vue       |  31 ++
 src/packages/__VUE/tour/demo/index.vue        |  43 +++
 src/packages/__VUE/tour/demo/position.vue     |  39 +++
 src/packages/__VUE/tour/demo/step.vue         |  43 +++
 src/packages/__VUE/tour/doc.en-US.md          | 248 +--------------
 src/packages/__VUE/tour/doc.md                | 254 +---------------
 src/packages/__VUE/tour/doc.taro.md           | 266 +---------------
 16 files changed, 453 insertions(+), 1258 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/tour/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/tour/content.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/tour/custom.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/tour/position.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/tour/step.vue
 delete mode 100644 src/packages/__VUE/tour/demo.vue
 create mode 100644 src/packages/__VUE/tour/demo/basic.vue
 create mode 100644 src/packages/__VUE/tour/demo/content.vue
 create mode 100644 src/packages/__VUE/tour/demo/custom.vue
 create mode 100644 src/packages/__VUE/tour/demo/index.vue
 create mode 100644 src/packages/__VUE/tour/demo/position.vue
 create mode 100644 src/packages/__VUE/tour/demo/step.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/basic.vue
new file mode 100644
index 0000000000..201245b7e6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/basic.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour1" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+  <nut-tour v-model="show" :steps="steps" type="tile" location="bottom-end"></nut-tour>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour1'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/content.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/content.vue
new file mode 100644
index 0000000000..0cd96df764
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/content.vue
@@ -0,0 +1,43 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour4" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    type="tile"
+    theme="dark"
+    location="bottom-end"
+    :offset="[8, 8]"
+    :close-on-click-overlay="false"
+  >
+    <div class="tour-demo-custom-content">
+      <div>NutUI 4.x 已发布，欢迎体验</div>
+      <nut-divider direction="vertical" />
+      <div @click="show = false">知道了</div>
+    </div>
+  </nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref(false);
+const steps = ref([
+  {
+    target: 'tour4'
+  }
+]);
+</script>
+
+<style>
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/custom.vue
new file mode 100644
index 0000000000..a907a33e8f
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/custom.vue
@@ -0,0 +1,31 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour2" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    location="bottom-end"
+    type="tile"
+    bg-color="#f00"
+    theme="dark"
+    :offset="[0, 0]"
+    :mask-width="50"
+    :mask-height="50"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour2'
+  }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
index cdb3182e6a..171671a183 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
@@ -1,245 +1,43 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell title="点击试试">
-      <template #link>
-        <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
-      </template>
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-tour
-      v-model="state.showTour3"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps3"
-      type="tile"
-      location="bottom-end"
-    ></nut-tour>
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <h2>自定义样式</h2>
+    <h2>{{ t('position') }}</h2>
+    <Position />
 
-    <nut-cell title="点击试试">
-      <template #link>
-        <nut-switch id="target5" v-model="state.switchValue" @click="showTourHandle" />
-      </template>
-    </nut-cell>
+    <h2>{{ t('content') }}</h2>
+    <Content />
 
-    <nut-tour
-      v-model="state.showTour1"
-      class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-      :steps="state.steps1"
-      location="bottom-end"
-      type="tile"
-      bg-color="#f00"
-      theme="dark"
-      :offset="[0, 0]"
-      mask-width="50"
-      mask-height="50"
-    ></nut-tour>
-
-    <h2>设置偏移量</h2>
-
-    <nut-cell title="点击试试" @click="state.showTour2 = true">
-      <template #link>
-        <div class="tour-demo-img">
-          <img
-            id="target6"
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            alt=""
-          />
-          <img
-            src="https://img10.360buyimg.com/imagetools/jfs/t1/31842/40/20385/1762/63998e3eE594254bb/98ff51da635ead4a.png"
-            alt=""
-          />
-          <img src="https://storage.jd.com/oss-dev/test/3.2.6/Jdweapp.png" alt="" />
-        </div>
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour2"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps2"
-      type="tile"
-      bg-color="#f00"
-      theme="dark"
-      location="bottom-end"
-      :offset="[8, 8]"
-    ></nut-tour>
-
-    <h2>自定义内容</h2>
-
-    <nut-cell title="点击试试">
-      <template #link>
-        <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour4"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps4"
-      type="tile"
-      theme="dark"
-      location="bottom-end"
-      :offset="[8, 8]"
-    >
-      <view class="tour-demo-custom-content">
-        <view>nutui 4.x 即将发布，敬请期待</view>
-        <nut-divider direction="vertical" />
-        <view @click="state.showTour4 = false">知道了</view>
-      </view>
-    </nut-tour>
-
-    <h2>步骤引导</h2>
-
-    <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
-
-    <nut-tabbar>
-      <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-    </nut-tabbar>
-
-    <nut-tour
-      v-model="state.showTour"
-      class="nut-customword-tour"
-      :steps="state.steps"
-      location="top-start"
-      :offset="[0, 0]"
-      mask-width="60"
-      mask-height="50"
-    ></nut-tour>
+    <h2>{{ t('step') }}</h2>
+    <Step />
   </Demo>
 </template>
 <script setup lang="ts">
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour: false,
-  showTour1: false,
-  showTour2: false,
-  showTour3: false,
-  showTour4: false,
-  offset: [-3, -8],
-  steps: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target1'
-    },
-    {
-      content: '支持一套代码同时开发多端小程序',
-      target: 'target2'
-    },
-    {
-      content: '基于京东APP 10.0 视觉规范',
-      target: 'target3',
-      location: 'top-end'
-    },
-    {
-      content: '支持定制主题，内置 700+ 个主题变量',
-      target: 'target4',
-      location: 'top-end'
-    }
-  ],
-
-  steps1: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target5'
-    }
-  ],
-
-  steps2: [
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target6',
-      popoverOffset: [40, 12],
-      arrowOffset: -36
-    }
-  ],
-
-  steps3: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target7'
-    }
-  ],
-
-  steps4: [
-    {
-      target: 'target8'
-    }
-  ],
-
-  type: 'normal'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Position from './position.vue';
+import Content from './content.vue';
+import Step from './step.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义样式',
+    position: '设置偏移量',
+    content: '自定义内容',
+    step: '步骤引导'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Style',
+    position: 'Custom Offset',
+    content: 'Custom Content',
+    step: 'Steps'
+  }
 });
-
-const showTourHandle = () => {
-  state.showTour1 = true;
-};
 </script>
-<style lang="scss">
-.nut-custom-tour {
-  .nut-popover-content {
-    width: auto !important;
-  }
-}
-
-.nut-customword-tour {
-  .nut-tour-content-inner {
-    width: max-content;
-  }
-}
-
-.index-header {
-  display: flex;
-  align-items: center;
-  height: 117px;
-  > img {
-    width: 67px;
-    height: 67px;
-    margin-right: 18px;
-    flex-shrink: 0;
-  }
-  .info {
-    display: flex;
-    flex-direction: column;
-    h1 {
-      margin: 0;
-      height: 48px;
-      font-size: 34px;
-      color: rgba(51, 51, 51, 1);
-    }
-    p {
-      height: 18px;
-      font-size: 12px;
-      color: rgba(154, 155, 157, 1);
-    }
-  }
-}
-
-.nut-customstyle-tour {
-  .nut-tour-mask {
-    border-radius: 50%;
-  }
-}
-
-.tour-demo-img {
-  img {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-  }
-}
-.tour-demo-custom-content {
-  padding: 8px;
-  display: flex;
-  width: max-content;
-  align-items: center;
-
-  .nut-divider {
-    border-color: #fff;
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/position.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/position.vue
new file mode 100644
index 0000000000..a683786e1a
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/position.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-cell title="点击试试" @click="show = true">
+    <template #link>
+      <img id="tour3" :src="url" class="tour-demo-img" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    type="tile"
+    bg-color="#f00"
+    theme="dark"
+    location="bottom-end"
+    :offset="[8, 8]"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const url = 'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour3',
+    popoverOffset: [40, 12],
+    arrowOffset: -36
+  }
+]);
+</script>
+
+<style>
+.tour-demo-img {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/step.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/step.vue
new file mode 100644
index 0000000000..6b364c4155
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/step.vue
@@ -0,0 +1,43 @@
+<template>
+  <nut-tabbar bottom>
+    <nut-tabbar-item id="tour5-1" tab-title="首页"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-2" tab-title="分类"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-3" tab-title="购物车"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-4" tab-title="我的"></nut-tabbar-item>
+  </nut-tabbar>
+  <nut-cell title="点击试试" @click="show = true"></nut-cell>
+  <nut-tour
+    v-model="show"
+    class="nut-custom-tour"
+    :steps="steps"
+    location="top-start"
+    :offset="[0, 0]"
+    :mask-width="60"
+    :mask-height="50"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库，覆盖移动端主流场景',
+    target: 'tour5-1'
+  },
+  {
+    content: '支持一套代码同时开发多端小程序 + H5',
+    target: 'tour5-2'
+  },
+  {
+    content: '基于京东APP 10.0 视觉规范',
+    target: 'tour5-3',
+    location: 'top-end'
+  },
+  {
+    content: '支持定制主题，内置 700+ 个主题变量',
+    target: 'tour5-4',
+    location: 'top-end'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
deleted file mode 100644
index 98696914ea..0000000000
--- a/src/packages/__VUE/tour/demo.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<template>
-  <div class="demo tour-demo">
-    <h2>{{ translate('title') }}</h2>
-
-    <nut-cell :title="translate('tryClick')">
-      <template #link>
-        <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour3"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps3"
-      type="tile"
-      location="bottom-end"
-    ></nut-tour>
-
-    <h2>{{ translate('title1') }}</h2>
-
-    <nut-cell :title="translate('tryClick')">
-      <template #link>
-        <nut-switch id="target5" v-model="state.switchValue" @click="showTourHandle" />
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour1"
-      class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-      :steps="state.steps1"
-      location="bottom-end"
-      type="tile"
-      bg-color="#f00"
-      theme="dark"
-      :offset="[0, 0]"
-      mask-width="50"
-      mask-height="50"
-    ></nut-tour>
-
-    <h2>{{ translate('title2') }}</h2>
-
-    <nut-cell :title="translate('tryClick')" @click="state.showTour2 = true">
-      <template #link>
-        <div class="tour-demo-img">
-          <img
-            id="target6"
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            alt=""
-          />
-          <img
-            src="https://img10.360buyimg.com/imagetools/jfs/t1/31842/40/20385/1762/63998e3eE594254bb/98ff51da635ead4a.png"
-            alt=""
-          />
-          <img src="https://storage.jd.com/oss-dev/test/3.2.6/Jdweapp.png" alt="" />
-        </div>
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour2"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps2"
-      type="tile"
-      bg-color="#f00"
-      theme="dark"
-      location="bottom-end"
-      :offset="[8, 8]"
-    ></nut-tour>
-
-    <h2>{{ translate('title3') }}</h2>
-
-    <nut-cell :title="translate('tryClick')">
-      <template #link>
-        <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
-      </template>
-    </nut-cell>
-
-    <nut-tour
-      v-model="state.showTour4"
-      class="nut-custom-tour nut-customword-tour"
-      :steps="state.steps4"
-      type="tile"
-      theme="dark"
-      location="bottom-end"
-      :offset="[8, 8]"
-      :close-on-click-overlay="false"
-    >
-      <div class="tour-demo-custom-content">
-        <div>nutui 4.x 即将发布，敬请期待</div>
-        <nut-divider direction="vertical" />
-        <div @click="state.showTour4 = false">知道了</div>
-      </div>
-    </nut-tour>
-
-    <h2>{{ translate('title4') }}</h2>
-
-    <nut-cell :title="translate('tryClick')" @click="state.showTour = true"></nut-cell>
-
-    <nut-tabbar :bottom="true">
-      <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-    </nut-tabbar>
-
-    <nut-tour
-      v-model="state.showTour"
-      class="nut-custom-tour"
-      :steps="state.steps"
-      location="top-start"
-      :offset="[0, 0]"
-      mask-width="60"
-      mask-height="50"
-    ></nut-tour>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { StepOptions } from './index.vue';
-
-const translate = useTranslate({
-  'zh-CN': {
-    title: '基础用法',
-    title1: '自定义样式',
-    title2: '设置偏移量',
-    title3: '自定义内容',
-    title4: '步骤引导',
-    tryClick: '点击试试'
-  },
-  'en-US': {
-    title: 'Basic Usage',
-    title1: 'Custom Style',
-    title2: 'Custom Offset',
-    title3: 'Custom Content',
-    title4: 'Steps',
-    tryClick: 'Try Click'
-  }
-});
-
-const state = reactive({
-  switchValue: false,
-  showTour: false,
-  showTour1: false,
-  showTour2: false,
-  showTour3: false,
-  showTour4: false,
-  offset: [-3, -8],
-  steps: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target1'
-    },
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target2'
-    },
-    {
-      content: '基于京东APP 10.0 视觉规范',
-      target: 'target3',
-      location: 'top-end'
-    },
-    {
-      content: '支持定制主题，内置 700+ 个主题变量',
-      target: 'target4',
-      location: 'top-end'
-    }
-  ] as StepOptions[],
-
-  steps1: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target5'
-    }
-  ],
-
-  steps2: [
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target6',
-      popoverOffset: [40, 12],
-      arrowOffset: -36
-    }
-  ],
-
-  steps3: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target7'
-    }
-  ],
-
-  steps4: [
-    {
-      target: 'target8'
-    }
-  ],
-
-  type: 'normal'
-});
-
-setTimeout(() => {
-  state.showTour = true;
-}, 100);
-
-const showTourHandle = () => {
-  state.showTour1 = true;
-};
-</script>
-<style lang="scss">
-.nut-custom-tour {
-  .nut-popover-content {
-    width: auto !important;
-  }
-}
-
-.nut-customword-tour {
-  .nut-tour-content-inner {
-    width: max-content;
-  }
-}
-
-.index-header {
-  display: flex;
-  align-items: center;
-  height: 117px;
-
-  > img {
-    width: 67px;
-    height: 67px;
-    margin-right: 18px;
-    flex-shrink: 0;
-  }
-
-  .info {
-    display: flex;
-    flex-direction: column;
-
-    h1 {
-      margin: 0;
-      height: 48px;
-      font-size: 34px;
-      color: rgba(51, 51, 51, 1);
-    }
-
-    p {
-      height: 18px;
-      font-size: 12px;
-      color: rgba(154, 155, 157, 1);
-    }
-  }
-}
-
-.nut-customstyle-tour {
-  .nut-tour-mask {
-    border-radius: 50%;
-  }
-}
-
-.tour-demo-img {
-  img {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-  }
-}
-
-.tour-demo-custom-content {
-  padding: 8px;
-  display: flex;
-  width: max-content;
-  align-items: center;
-
-  .nut-divider {
-    border-color: #fff;
-  }
-}
-
-.tour-demo {
-  .nut-tabbar-item_icon-box_nav-word {
-    font-size: 14px;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/tour/demo/basic.vue b/src/packages/__VUE/tour/demo/basic.vue
new file mode 100644
index 0000000000..201245b7e6
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/basic.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour1" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+  <nut-tour v-model="show" :steps="steps" type="tile" location="bottom-end"></nut-tour>
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour1'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/tour/demo/content.vue b/src/packages/__VUE/tour/demo/content.vue
new file mode 100644
index 0000000000..0cd96df764
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/content.vue
@@ -0,0 +1,43 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour4" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    type="tile"
+    theme="dark"
+    location="bottom-end"
+    :offset="[8, 8]"
+    :close-on-click-overlay="false"
+  >
+    <div class="tour-demo-custom-content">
+      <div>NutUI 4.x 已发布，欢迎体验</div>
+      <nut-divider direction="vertical" />
+      <div @click="show = false">知道了</div>
+    </div>
+  </nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref(false);
+const steps = ref([
+  {
+    target: 'tour4'
+  }
+]);
+</script>
+
+<style>
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+}
+</style>
diff --git a/src/packages/__VUE/tour/demo/custom.vue b/src/packages/__VUE/tour/demo/custom.vue
new file mode 100644
index 0000000000..a907a33e8f
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/custom.vue
@@ -0,0 +1,31 @@
+<template>
+  <nut-cell title="点击试试">
+    <template #link>
+      <nut-switch id="tour2" v-model="val" @click="show = true" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    location="bottom-end"
+    type="tile"
+    bg-color="#f00"
+    theme="dark"
+    :offset="[0, 0]"
+    :mask-width="50"
+    :mask-height="50"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val = ref(false);
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour2'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/tour/demo/index.vue b/src/packages/__VUE/tour/demo/index.vue
new file mode 100644
index 0000000000..de24a2ad31
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('content') }}</h2>
+    <Content />
+
+    <h2>{{ t('step') }}</h2>
+    <Step />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Position from './position.vue';
+import Content from './content.vue';
+import Step from './step.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义样式',
+    position: '设置偏移量',
+    content: '自定义内容',
+    step: '步骤引导'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Style',
+    position: 'Custom Offset',
+    content: 'Custom Content',
+    step: 'Steps'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/tour/demo/position.vue b/src/packages/__VUE/tour/demo/position.vue
new file mode 100644
index 0000000000..a683786e1a
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/position.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-cell title="点击试试" @click="show = true">
+    <template #link>
+      <img id="tour3" :src="url" class="tour-demo-img" />
+    </template>
+  </nut-cell>
+
+  <nut-tour
+    v-model="show"
+    :steps="steps"
+    type="tile"
+    bg-color="#f00"
+    theme="dark"
+    location="bottom-end"
+    :offset="[8, 8]"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const url = 'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库',
+    target: 'tour3',
+    popoverOffset: [40, 12],
+    arrowOffset: -36
+  }
+]);
+</script>
+
+<style>
+.tour-demo-img {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/packages/__VUE/tour/demo/step.vue b/src/packages/__VUE/tour/demo/step.vue
new file mode 100644
index 0000000000..6b364c4155
--- /dev/null
+++ b/src/packages/__VUE/tour/demo/step.vue
@@ -0,0 +1,43 @@
+<template>
+  <nut-tabbar bottom>
+    <nut-tabbar-item id="tour5-1" tab-title="首页"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-2" tab-title="分类"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-3" tab-title="购物车"></nut-tabbar-item>
+    <nut-tabbar-item id="tour5-4" tab-title="我的"></nut-tabbar-item>
+  </nut-tabbar>
+  <nut-cell title="点击试试" @click="show = true"></nut-cell>
+  <nut-tour
+    v-model="show"
+    class="nut-custom-tour"
+    :steps="steps"
+    location="top-start"
+    :offset="[0, 0]"
+    :mask-width="60"
+    :mask-height="50"
+  ></nut-tour>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const steps = ref([
+  {
+    content: '京东风格的轻量级移动端组件库，覆盖移动端主流场景',
+    target: 'tour5-1'
+  },
+  {
+    content: '支持一套代码同时开发多端小程序 + H5',
+    target: 'tour5-2'
+  },
+  {
+    content: '基于京东APP 10.0 视觉规范',
+    target: 'tour5-3',
+    location: 'top-end'
+  },
+  {
+    content: '支持定制主题，内置 700+ 个主题变量',
+    target: 'tour5-4',
+    location: 'top-end'
+  }
+]);
+</script>
diff --git a/src/packages/__VUE/tour/doc.en-US.md b/src/packages/__VUE/tour/doc.en-US.md
index 963da55f27..84c3259e60 100644
--- a/src/packages/__VUE/tour/doc.en-US.md
+++ b/src/packages/__VUE/tour/doc.en-US.md
@@ -18,265 +18,29 @@ app.use(Tour);
 
 At each step, set the id of the target element, and the Tour component looks up the set id value
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="try click">
-    <template #link>
-      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
-    </template>
-  </nut-cell>
-  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour3: false,
-  steps3: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target7'
-    }
-  ]
-});
-</script>
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour basic
 
 ### Custom Style
 
-Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size, bubble shell layer background color
-
-:::demo
+Through 'mask-width', 'mask-height', 'bg-color' can be configured hollow mask size, bubble shell layer background color
 
-```vue
-<template>
-  <nut-cell title="try click">
-    <template #link>
-      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="state.showTour1"
-    :steps="state.steps1"
-    location="bottom-end"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    :offset="[0, 0]"
-    maskWidth="50"
-    maskHeight="50"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour1: false,
-  steps1: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target5'
-    }
-  ]
-});
-</script>
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour custom
 
 ### Custom Offset
 
 'offset' sets the distance of the hollow mask relative to the target element, 'popoverOffset' sets the offset of the bubble layer
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试" @click="state.showTour2 = true">
-    <template #link>
-      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
-        <img
-          style="width:20px;margin-right:10px"
-          id="target6"
-          src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
-      </div>
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour2"
-    :steps="state.steps2"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour2: false,
-  steps2: [
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target6',
-      popoverOffset: [40, 12],
-      arrowOffset: -36
-    }
-  ]
-});
-</script>
-
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour position
 
 ### Custom Content
 
 Can customize the bubble layer through the slot slot
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour4"
-    :steps="state.steps4"
-    type="tile"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-    :closeOnClickOverlay="false"
-  >
-    <div class="tour-demo-custom-content">
-      <div>nutui 4.x 即将发布，敬请期待</div>
-      <nut-divider direction="vertical" />
-      <div @click="state.showTour4 = false">知道了</div>
-    </div>
-  </nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour4: false,
-  steps4: [
-    {
-      target: 'target8'
-    }
-  ]
-});
-</script>
-
-<style>
-.tour-demo-custom-content {
-  padding: 8px;
-  display: flex;
-  width: max-content;
-  align-items: center;
-}
-.nut-divider {
-  border-color: #fff;
-}
-</style>
-```
-
-:::
+> demo: tour content
 
 ### Steps
 
-:::demo
-
-```vue
-<template>
-  <nut-tabbar :bottom="true">
-    <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-    <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-    <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-    <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-  </nut-tabbar>
-  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
-  <nut-tour
-    class="nut-custom-tour"
-    v-model="state.showTour"
-    :steps="state.steps"
-    location="top-start"
-    :offset="[0, 0]"
-    maskWidth="60"
-    maskHeight="50"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour: false,
-  steps: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target1'
-    },
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target2'
-    },
-    {
-      content: '基于京东APP 10.0 视觉规范',
-      target: 'target3',
-      location: 'top-end'
-    },
-    {
-      content: '支持定制主题，内置 700+ 个主题变量',
-      target: 'target4',
-      location: 'top-end'
-    }
-  ]
-});
-</script>
-
-<style>
-#app {
-  padding-top: 200px;
-}
-.nut-tabbar-item_icon-box_nav-word {
-  font-size: 14px;
-}
-</style>
-```
-
-:::
+> demo: tour step
 
 ## API
 
diff --git a/src/packages/__VUE/tour/doc.md b/src/packages/__VUE/tour/doc.md
index b96eeceb5e..f179c7638d 100644
--- a/src/packages/__VUE/tour/doc.md
+++ b/src/packages/__VUE/tour/doc.md
@@ -18,265 +18,31 @@ app.use(Tour);
 
 在每一步中设置 `target` 目标元素的 id ，Tour 组件则会根据设置的 id 值进行查找
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
-    </template>
-  </nut-cell>
-  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour3: false,
-  steps3: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target7'
-    }
-  ]
-});
-</script>
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour basic
 
 ### 自定义样式
 
-通过 `maskWidth`、`maskHeight`、`bgColor` 可配置镂空遮罩的大小、气泡弹层背景色
-
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="state.showTour1"
-    :steps="state.steps1"
-    location="bottom-end"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    :offset="[0, 0]"
-    maskWidth="50"
-    maskHeight="50"
-  ></nut-tour>
-</template>
+通过 `mask-width`、`mask-height`、`bg-color` 可配置镂空遮罩的大小、气泡弹层背景色
 
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour1: false,
-  steps1: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target5'
-    }
-  ]
-});
-</script>
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour custom
 
 ### 设置偏移量
 
 `offset` 可设置镂空遮罩层相对于目标元素的距离，`popoverOffset` 可设置气泡层的偏移量
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试" @click="state.showTour2 = true">
-    <template #link>
-      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
-        <img
-          style="width:20px;margin-right:10px"
-          id="target6"
-          src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
-      </div>
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour2"
-    :steps="state.steps2"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour2: false,
-  steps2: [
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target6',
-      popoverOffset: [40, 12],
-      arrowOffset: -36
-    }
-  ]
-});
-</script>
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour position
 
 ### 自定义内容
 
 通过 slot 插槽可自定义气泡层内容
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour4"
-    :steps="state.steps4"
-    type="tile"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-    :closeOnClickOverlay="false"
-  >
-    <div class="tour-demo-custom-content">
-      <div>nutui 4.x 即将发布，敬请期待</div>
-      <nut-divider direction="vertical" />
-      <div @click="state.showTour4 = false">知道了</div>
-    </div>
-  </nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour4: false,
-  steps4: [
-    {
-      target: 'target8'
-    }
-  ]
-});
-</script>
-
-<style>
-.tour-demo-custom-content {
-  padding: 8px;
-  display: flex;
-  width: max-content;
-  align-items: center;
-}
-.nut-divider {
-  border-color: #fff;
-}
-</style>
-```
-
-:::
+> demo: tour content
 
 ### 步骤引导
 
 属性 `type` 设置为 `step` 可以进行步骤操作。属性 `Steps` 数组中的每一项代表每步的内容
 
-:::demo
-
-```vue
-<template>
-  <nut-tabbar :bottom="true">
-    <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-    <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-    <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-    <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-  </nut-tabbar>
-  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
-  <nut-tour
-    class="nut-custom-tour"
-    v-model="state.showTour"
-    :steps="state.steps"
-    location="top-start"
-    :offset="[0, 0]"
-    maskWidth="60"
-    maskHeight="50"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour: false,
-  steps: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target1'
-    },
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target2'
-    },
-    {
-      content: '基于京东APP 10.0 视觉规范',
-      target: 'target3',
-      location: 'top-end'
-    },
-    {
-      content: '支持定制主题，内置 700+ 个主题变量',
-      target: 'target4',
-      location: 'top-end'
-    }
-  ]
-});
-</script>
-<style>
-#app {
-  padding-top: 200px;
-}
-.nut-tabbar-item_icon-box_nav-word {
-  font-size: 14px;
-}
-</style>
-```
-
-:::
+> demo: tour step
 
 ## API
 
@@ -290,12 +56,12 @@ const state = reactive({
 | offset | 镂空遮罩相对于目标元素的偏移量 | [number, number] | `[8, 10]` |
 | current | 类型为 `step` 时，默认展示第几步 | number | `0` |
 | custom-class | 自定义 class 值 | string | '' |
-| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | 'bottom' |
-| next-step-Txt | 下一步按钮文案 | string | `'下一步'` |
-| prev-step-Txt | 上一步按钮文案 | string | `'上一步' ` |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `bottom` |
+| next-step-Txt | 下一步按钮文案 | string | `下一步` |
+| prev-step-Txt | 上一步按钮文案 | string | `上一步` |
 | complete-txt | 完成按钮文案 | string | `'完成'` |
 | mask | 是否显示镂空遮罩 | boolean | `true` |
-| bg-color | 自定义背景色 | boolean | `''` |
+| bg-color | 自定义背景色 | boolean | - |
 | theme | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'light'` |
 | mask-width | 镂空遮罩层宽度 | number \| string | '' |
 | mask-height | 镂空遮罩层高度 | number \| string | '' |
diff --git a/src/packages/__VUE/tour/doc.taro.md b/src/packages/__VUE/tour/doc.taro.md
index 720b01a7e7..8f61820907 100644
--- a/src/packages/__VUE/tour/doc.taro.md
+++ b/src/packages/__VUE/tour/doc.taro.md
@@ -18,273 +18,31 @@ app.use(Tour);
 
 在每一步中设置 `target` 目标元素的 id ，Tour 组件则会根据设置的 id 值进行查找
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
-    </template>
-  </nut-cell>
-  <nut-tour v-model="state.showTour3" :steps="state.steps3" type="tile" location="bottom-end"></nut-tour>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour3: false,
-  steps3: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target7'
-    }
-  ]
-});
-</script>
-
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour basic exhibition
 
 ### 自定义样式
 
-通过 `maskWidth`、`maskHeight`、`bgColor` 可配置镂空遮罩的大小、气泡弹层背景色
-
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target5" v-model="state.switchValue" @click="state.showTour1 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-    v-model="state.showTour1"
-    :steps="state.steps1"
-    location="bottom-end"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    :offset="[0, 0]"
-    maskWidth="50"
-    maskHeight="50"
-  ></nut-tour>
-</template>
+通过 `mask-width`、`mask-height`、`bg-color` 可配置镂空遮罩的大小、气泡弹层背景色
 
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour1: false,
-  steps1: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target5'
-    }
-  ]
-});
-</script>
-
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour custom exhibition
 
 ### 设置偏移量
 
 `offset` 可设置镂空遮罩层相对于目标元素的距离，`popoverOffset` 可设置气泡层的偏移量
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试" @click="state.showTour2 = true">
-    <template #link>
-      <div class="tour-demo-img" v-for="i in [1, 2, 3]">
-        <img
-          style="width:20px;height:20px;margin-right:10px"
-          id="target6"
-          src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
-      </div>
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour2"
-    :steps="state.steps2"
-    type="tile"
-    bgColor="#f00"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour2: false,
-  steps2: [
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target6',
-      popoverOffset: [40, 12],
-      arrowOffset: -36
-    }
-  ]
-});
-</script>
-
-<style>
-.nut-tour-content-inner {
-  white-space: nowrap;
-}
-</style>
-```
-
-:::
+> demo: tour position exhibition
 
 ### 自定义内容
 
 通过 slot 插槽可自定义气泡层内容
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试">
-    <template #link>
-      <nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
-    </template>
-  </nut-cell>
-
-  <nut-tour
-    v-model="state.showTour4"
-    :steps="state.steps4"
-    type="tile"
-    theme="dark"
-    location="bottom-end"
-    :offset="[8, 8]"
-    :closeOnClickOverlay="false"
-  >
-    <div class="tour-demo-custom-content">
-      <div>nutui 4.x 即将发布，敬请期待</div>
-      <nut-divider direction="vertical" />
-      <div @click="state.showTour4 = false">知道了</div>
-    </div>
-  </nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  switchValue: false,
-  showTour4: false,
-  steps4: [
-    {
-      target: 'target8'
-    }
-  ]
-});
-</script>
-<style>
-.tour-demo-custom-content {
-  padding: 8px;
-  display: flex;
-  width: max-content;
-  align-items: center;
-}
-.nut-divider {
-  border-color: #fff;
-}
-</style>
-```
-
-:::
+> demo: tour content exhibition
 
 ### 步骤引导
 
 属性 `type` 设置为 `step` 可以进行步骤操作。属性 `Steps` 数组中的每一项代表每步的内容
 
-:::demo
-
-```vue
-<template>
-  <nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>
-
-  <nut-tabbar :bottom="true">
-    <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-    <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-    <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-    <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-  </nut-tabbar>
-
-  <nut-tour
-    class="nut-customword-tour"
-    v-model="state.showTour"
-    :steps="state.steps"
-    location="top-start"
-    :offset="[0, 0]"
-    maskWidth="60"
-    maskHeight="50"
-  ></nut-tour>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  showTour: false,
-  steps: [
-    {
-      content: '70+ 高质量组件，覆盖移动端主流场景',
-      target: 'target1'
-    },
-    {
-      content: '支持一套代码同时开发多端小程序+H5',
-      target: 'target2'
-    },
-    {
-      content: '基于京东APP 10.0 视觉规范',
-      target: 'target3',
-      location: 'top-end'
-    },
-    {
-      content: '支持定制主题，内置 700+ 个主题变量',
-      target: 'target4',
-      location: 'top-end'
-    }
-  ]
-});
-</script>
-<style>
-page {
-  padding-top: 200px;
-}
-.nut-tour-content {
-  display: block;
-  width: 200px;
-}
-.nut-tabbar-item_icon-box_nav-word {
-  font-size: 14px;
-}
-</style>
-```
-
-:::
+> demo: tour step exhibition
 
 ## API
 
@@ -298,15 +56,15 @@ page {
 | offset | 镂空遮罩相对于目标元素的偏移量 | [number, number] | `[8, 10]` |
 | current | 类型为 `step` 时，默认展示第几步 | number | `0` |
 | custom-class | 自定义 class 值 | string | '' |
-| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'bottom'` |
-| next-step-Txt | 下一步按钮文案 | string | `'下一步'` |
-| prev-step-Txt | 上一步按钮文案 | string | `'上一步'` |
+| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `bottom` |
+| next-step-Txt | 下一步按钮文案 | string | `下一步` |
+| prev-step-Txt | 上一步按钮文案 | string | `上一步` |
 | complete-txt | 完成按钮文案 | string | `'完成'` |
 | mask | 是否显示镂空遮罩 | boolean | `true` |
-| bg-color | 自定义背景色 | boolean | '' |
+| bg-color | 自定义背景色 | boolean | - |
 | theme | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover) | string | `'light'` |
-| mask-width | 镂空遮罩层宽度 | number \|string | '' |
-| mask-height | 镂空遮罩层高度 | number \|string | '' |
+| mask-width | 镂空遮罩层宽度 | number \| string | '' |
+| mask-height | 镂空遮罩层高度 | number \| string | '' |
 | close-on-click-overlay | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover) | Boolean | `true` |
 | show-prev-step | 是否展示上一步按钮 | boolean | `true` |
 | show-title-bar | 是否展示标题栏 | boolean | `false` |