feat(demo): add 'steps' page (#165) (#284)

* feat(demo): add 'steps' page (#165) * fix: 修复引导页文件名问题 --------- Co-authored-by: jackhoo_98 <[email protected]>
vbenjs · Nov 27, 2023 · a9b2021 · a9b2021
1 parent b376026
commit a9b2021
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 1 deletion.
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -41,6 +41,7 @@
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
     "dayjs": "^1.11.10",
+    "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "mockjs": "^1.1.0",
     "monaco-editor": "^0.44.0",

diff --git a/apps/admin/src/pages/demo/steps/steps.vue b/apps/admin/src/pages/demo/steps/steps.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+
+const steps = [
+  {
+    element: '.app-logo.layout-menu__logo',
+    popover: {
+      title: 'Welcome',
+      description: 'Hello World! 👋',
+    },
+  },
+  {
+    element: `.n-layout-toggle-button`,
+    popover: {
+      title: 'Collapse Button',
+      description: 'This is the menu collapse button.',
+    },
+  },
+  {
+    element: `#userActionElement`,
+    popover: {
+      title: 'User Action',
+      description: 'This is the user function area.',
+    },
+  },
+]
+
+const handleStart = () => {
+  driver({
+    showProgress: true,
+    steps: steps,
+  }).drive()
+}
+</script>
+<template>
+  <VbenCard>
+    <VbenCard title="引导页">
+      用于给用户的指引操作。
+      <a href="https://driverjs.com" target="_blank" rel="noopener noreferrer"
+        >更多用法</a
+      >
+      <template #footer>
+        <VbenButton type="primary" @click="handleStart">开始</VbenButton>
+      </template>
+    </VbenCard>
+  </VbenCard>
+</template>
diff --git a/packages/layouts/src/components/header.vue b/packages/layouts/src/components/header.vue
@@ -83,7 +83,7 @@ const logoWidth = computed(() => (unref(isTopMenu) ? 150 : getMenuWidth.value))
           </VbenSpace>
         </slot>
         <slot name="menu" v-if="!showHeaderBreadcrumb"></slot>
-        <div class="pl-8px pr-8px">
+        <div class="pl-8px pr-8px" id="userActionElement">
           <slot name="buttons">
             <VbenSpace class="p-1" :size="16" align="center">
               <AppSearch v-if="getShowSearch" />

diff --git a/packages/layouts/src/components/setting/components/SettingButtonPosition.vue b/packages/layouts/src/components/setting/components/SettingButtonPosition.vue
@@ -8,6 +8,7 @@ const { contentRef } = useComposables()
 </script>
 <template>
   <VbenAffix
+    id="userActionElement"
     @click="settingDrawerVisible = true"
     :listen-to="contentRef"
     :trigger-top="240"

diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
@@ -71,5 +71,8 @@ export default {
       accountSetting: 'Setting',
     },
     transition: 'Transition',
+    steps: {
+      page: 'Intro page',
+    },
   },
 }
diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
@@ -72,5 +72,8 @@ export default {
       accountSetting: '个人设置',
     },
     transition: '过渡动画',
+    steps: {
+      page: '引导页',
+    },
   },
 }
diff --git a/packages/router/src/routes/modules/steps.ts b/packages/router/src/routes/modules/steps.ts
@@ -0,0 +1,29 @@
+import { LAYOUT } from '../basic'
+
+const steps: RouteRecordItem = {
+  path: '/steps',
+  name: 'StepsDemo',
+  component: LAYOUT,
+  redirect: '/steps/index',
+  meta: {
+    orderNo: 90000,
+    icon: 'whh:paintroll',
+    title: 'routes.demo.steps.page',
+    root: true,
+    hideChildrenInMenu: true,
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'StepsDemoPage',
+      component: () => import('@/pages/demo/steps/steps.vue'),
+      meta: {
+        title: 'routes.demo.steps.page',
+        icon: 'whh:paintroll',
+        hideMenu: true,
+      },
+    },
+  ],
+}
+
+export default steps
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml