feat: add guide component

site/site.config.mjs

@@ -432,6 +432,12 @@ export default {
           path: '/vue-next/components/drawer',
           component: () => import('tdesign-vue-next/drawer/drawer.md'),
         },
+        {
+          title: 'Guide 引导',
+          name: 'guide',
+          path: '/vue-next/components/guide',
+          component: () => import('tdesign-vue-next/guide/guide.md'),
+        },
         {
           title: 'Message 全局提示',
           name: 'message',

src/components.ts

@@ -64,6 +64,7 @@ export * from './rate';
 export * from './alert';
 export * from './dialog';
 export * from './drawer';
+export * from './guide';
 export * from './loading';
 export * from './message';
 export * from './notification';

src/guide/_example/base.vue

@@ -0,0 +1,138 @@
+<template>
+  <t-row justify="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        @change="handleChange"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    body: '新手引导的说明文案',
+    placement: 'bottom-right',
+  },
+  {
+    element: '.label-field',
+    title: '新手引导标题',
+    body: '新手引导的说明文案',
+    placement: 'bottom',
+  },
+  {
+    element: '.action',
+    title: '新手引导标题',
+    body: '新手引导的说明文案',
+    placement: 'right',
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
+};
+
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>

src/guide/_example/custom-popup.vue

@@ -0,0 +1,142 @@
+<template>
+  <t-row justify="center">
+    <t-button @click="handleClick">新手引导</t-button>
+    <t-drawer v-model:visible="visible" header="演示新手引导" size="60%" :show-overlay="false" destroy-on-close>
+      <template #footer>
+        <t-button @click="visible = false"> 关闭抽屉 </t-button>
+      </template>
+      <div class="guide-container">
+        <div class="main-title">
+          <div class="title-major">Guide 用户引导</div>
+          <div class="title-sub">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</div>
+        </div>
+        <div class="field label-field-1">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <div class="field label-field-2">
+          <div class="label">Label</div>
+          <t-input placeholder="请输入内容" />
+        </div>
+        <t-row class="action">
+          <t-button>确定</t-button>
+          <t-button theme="default" variant="base">取消</t-button>
+        </t-row>
+      </div>
+
+      <t-guide
+        v-model="current"
+        :steps="steps"
+        @change="handleChange"
+        @prev-step-click="handlePrevStepClick"
+        @next-step-click="handleNextStepClick"
+        @finish="handleFinish"
+        @skip="handleSkip"
+      />
+    </t-drawer>
+  </t-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import MyPopup from './my-popup.vue';
+
+const visible = ref(false);
+const current = ref(-1);
+
+const steps = [
+  {
+    element: '.main-title',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-right',
+    content: MyPopup,
+  },
+  {
+    element: '.label-field-1',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom',
+    content: MyPopup,
+  },
+  {
+    element: '.label-field-2',
+    title: '新手引导标题',
+    description: '新手引导的说明文案',
+    placement: 'bottom-left',
+    content: MyPopup,
+  },
+];
+
+const handleClick = () => {
+  visible.value = true;
+  setTimeout(() => {
+    current.value = 0;
+  }, 800);
+};
+
+const handleChange = (current, { e, total }) => {
+  console.log(current, e, total);
+};
+
+const handlePrevStepClick = ({ e, prev, current, total }) => {
+  console.log(e, prev, current, total);
+};
+
+const handleNextStepClick = ({ e, next, current, total }) => {
+  console.log(e, next, current, total);
+};
+
+const handleFinish = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+
+const handleSkip = ({ e, current, total }) => {
+  visible.value = false;
+  console.log(e, current, total);
+};
+</script>
+
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button {
+  margin-right: 10px;
+}
+</style>

src/guide/_example/dialog-body.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="dialog-body">
+    <img class="dialog-img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+    <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style>
+.dialog-img {
+  width: 100%;
+}
+
+p {
+  margin-top: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+</style>