feat(example): add guide page

vbenjs · Jul 18, 2020 · e13d12b · e13d12b
1 parent b329a9a
commit e13d12b
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "crypto-js": "^3.3.0",
+    "driver.js": "^0.9.8",
     "echarts": "^4.8.0",
     "intersection-observer": "^0.11.0",
     "mockjs": "^1.1.0",

diff --git a/src/hooks/core/useDriver.ts b/src/hooks/core/useDriver.ts
@@ -0,0 +1,19 @@
+import Driver from 'driver.js';
+import 'driver.js/dist/driver.min.css';
+
+export function useStepsDriver(steps: Driver.Step[]) {
+  const driver = new Driver({
+    doneBtnText: '完成', // Text on the final button
+    closeBtnText: '关闭', // Text on the close button for this step
+    stageBackground: 'rgba(255, 255, 255,0.4)', // Background color for the staged behind highlighted element
+    nextBtnText: '下一步', // Next button text for this step
+    prevBtnText: '上一步', // Previous button text for this step
+  });
+
+  function startDriver(e: Event) {
+    e.stopPropagation();
+    driver.defineSteps(steps);
+    driver.start();
+  }
+  return { startDriver };
+}
diff --git a/src/layouts/default/LayoutHeader.vue b/src/layouts/default/LayoutHeader.vue
@@ -71,7 +71,11 @@
             <div class={`${prefixCls}__action`}>
               <Tooltip>
                 <template slot="title">刷新</template>
-                <div class={`${prefixCls}__action-item`} onClick={refreshPage}>
+                <div
+                  class={`${prefixCls}__action-item`}
+                  onClick={refreshPage}
+                  id="elem-driver-action-refresh"
+                >
                   <Icon type="redo" class={`${prefixCls}__action-icon`} />
                 </div>
               </Tooltip>

diff --git a/src/layouts/default/LayoutSideBar.vue b/src/layouts/default/LayoutSideBar.vue
@@ -154,7 +154,8 @@
             ref={sideRef}
             onBreakpoint={handleBreakpoint}
           >
-            <SideBarTrigger slot="trigger" />
+            <SideBarTrigger slot="trigger" id="elem-driver-trigger" />
+
             <LayoutMenu theme={theme} />
             <div
               class={[`${prefixCls}__dargbar`, !hasDrag ? 'hide' : '']}

diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
@@ -55,7 +55,7 @@
         return (
           <Layout class={prefixCls}>
             {isShowMixHeader && <LayoutHeader />}
-            <SettingButton class={`${prefixCls}__setting-btn`} />
+            <SettingButton class={`${prefixCls}__setting-btn`} id="elem-driver-setting-btn" />
             <Layout>
               {!unref(getFullContent) && showMenu && menuMode !== MenuModeEnum.HORIZONTAL && (
                 <LayoutSideBar />

diff --git a/src/router/menus/dashboard.ts b/src/router/menus/dashboard.ts
@@ -17,5 +17,9 @@ export default {
       path: '/welcome',
       name: '欢迎页',
     },
+    {
+      path: '/driver',
+      name: '引导页',
+    },
   ],
 } as NormMenuItem;
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
@@ -43,6 +43,14 @@ const routes: RouteConfigEx[] = [
       title: '工作台',
     },
   },
+  {
+    path: '/driver',
+    name: 'DriverIndex',
+    component: () => createAsyncComponent(import('@/views/dashboard/driver/index.vue')),
+    meta: {
+      title: '引导页',
+    },
+  },
 ];
 
 export default {

diff --git a/src/views/dashboard/driver/index.vue b/src/views/dashboard/driver/index.vue
@@ -0,0 +1,49 @@
+<script lang="tsx">
+  import { defineComponent } from 'compatible-vue';
+  import { Button } from 'ant-design-vue';
+  import { useStepsDriver } from '@/hooks/core/useDriver';
+
+  export default defineComponent({
+    name: 'DriverIndex',
+    setup() {
+      const { startDriver } = useStepsDriver([
+        {
+          element: '#elem-driver-trigger',
+          popover: {
+            title: '收起菜单栏',
+            description: '',
+          },
+        },
+        {
+          element: '#elem-driver-action-refresh',
+          popover: {
+            title: '刷新页面',
+            description: '',
+          },
+        },
+        {
+          element: '#elem-driver-setting-btn',
+          popover: {
+            title: '更改系统配置',
+            description: '',
+            position: 'left',
+          },
+        },
+      ]);
+
+      return () => (
+        <div>
+          <div id="start-driver" class="m-4">
+            本demo是基于
+            <a href="https://github.com/kamranahmedse/driver.js" target="_blank">
+              driver.js.
+            </a>
+          </div>
+          <Button onClick={startDriver} class="m-4">
+            开始引导
+          </Button>
+        </div>
+      );
+    },
+  });
+</script>
diff --git a/yarn.lock b/yarn.lock
@@ -4924,6 +4924,11 @@ dotenv@^8.2.0:
   resolved "https://registry.npm.taobao.org/dotenv/download/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha1-l+YZJZradQ7qPk6j4mvO6lQksWo=
 
+driver.js@^0.9.8:
+  version "0.9.8"
+  resolved "https://registry.npm.taobao.org/driver.js/download/driver.js-0.9.8.tgz#4b327f4537b1c9b9fb19419de86174be821ae32a"
+  integrity sha1-SzJ/RTexybn7GUGd6GF0voIa4yo=
+
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"