feat(demo): added guide page example

Vben
1 parent 4f20d45f
Showing 9 changed files with 140 additions and 37 deletions
CHANGELOG.zh_CN.md
package.json
src/components/registerGlobComp.ts
src/locales/lang/en/routes/demo/setup.ts
src/locales/lang/zh_CN/routes/demo/setup.ts
src/router/menus/modules/demo/setup.ts
src/router/routes/modules/demo/setup.ts
src/views/demo/setup/index.vue
yarn.lock
@@ -10,6 +10,7 @@
 - **CropperAvatar** 新增头像上传组件
 - **Drawer** `useDrawer`新增`closeDrawer`函数
 - **Preview** 新增`createImgPreview`图片预览函数
+- **Setup** 新增引导页示例
  
 ### 🐛 Bug Fixes
  
@@ -32,7 +32,7 @@
     "postinstall": "npm run install:husky"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.0.1",
+    "@iconify/iconify": "^2.0.2",
     "@logicflow/core": "^0.4.14",
     "@logicflow/extension": "^0.4.14",
     "@vueuse/core": "^5.0.3",
@@ -43,6 +43,7 @@
     "cropperjs": "^1.5.12",
     "crypto-js": "^4.0.0",
     "echarts": "^5.1.2",
+    "intro.js": "^4.0.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
@@ -56,19 +57,20 @@
     "vue": "3.0.11",
     "vue-i18n": "9.1.6",
     "vue-json-pretty": "^2.0.2",
-    "vue-router": "^4.0.8",
+    "vue-router": "^4.0.9",
     "vue-types": "^3.0.2",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@iconify/json": "^1.1.356",
+    "@iconify/json": "^1.1.357",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.0",
     "@types/crypto-js": "^4.0.1",
     "@types/fs-extra": "^9.0.11",
     "@types/inquirer": "^7.3.1",
+    "@types/intro.js": "^3.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.3",
     "@types/node": "^15.12.2",
@@ -100,7 +102,7 @@
     "is-ci": "^3.0.0",
     "less": "^4.1.1",
     "lint-staged": "^11.0.0",
-    "postcss": "^8.3.4",
+    "postcss": "^8.3.5",
     "prettier": "^2.3.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
@@ -110,7 +112,7 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "ts-node": "^10.0.0",
-    "typescript": "4.3.2",
+    "typescript": "4.3.3",
     "vite": "2.3.7",
     "vite-plugin-compression": "^0.2.5",
     "vite-plugin-html": "^2.0.7",
@@ -128,7 +130,7 @@
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.52.0"
+    "rollup": "^2.52.1"
   },
   "repository": {
     "type": "git",
+import type { App } from 'vue';
 import { Icon } from './Icon';
 import { Button } from './Button';
 import {
@@ -6,8 +7,6 @@ import {
   Input,
 } from 'ant-design-vue';
  
-import { App } from 'vue';
-
 const compList = [Icon, AntButton.Group];
  
 export function registerGlobComp(app: App) {
+export default {
+  page: 'Intro page',
+};
+export default {
+  page: '引导页',
+};
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const setup: MenuModule = {
+  orderNo: 90000,
+  menu: {
+    path: '/setup/index',
+    name: t('routes.demo.setup.page'),
+    tag: {
+      content: 'new',
+    },
+  },
+};
+export default setup;
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const setup: AppRouteModule = {
+  path: '/setup',
+  name: 'SetupDemo',
+  component: LAYOUT,
+  redirect: '/setup/index',
+  meta: {
+    icon: 'simple-icons:about-dot-me',
+    title: t('routes.demo.setup.page'),
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'SetupDemoPage',
+      component: () => import('/@/views/demo/setup/index.vue'),
+      meta: {
+        title: t('routes.demo.setup.page'),
+        icon: 'whh:paintroll',
+      },
+    },
+  ],
+};
+
+export default setup;
+<template>
+  <PageWrapper title="引导页" content="用于给用于指引操作">
+    <a-button type="primary" @click="handleStart">开始</a-button>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import intro from 'intro.js';
+  import 'intro.js/introjs.css';
+
+  export default defineComponent({
+    components: { PageWrapper },
+    setup() {
+      const { prefixVar } = useDesign('');
+
+      function handleStart() {
+        intro()
+          .setOptions({
+            steps: [
+              {
+                title: 'Welcome',
+                intro: 'Hello World! 👋',
+              },
+              {
+                title: 'Collapse Button',
+                element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
+                intro: 'This is the menu collapse button.',
+              },
+              {
+                title: 'User Action',
+                element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
+                intro: 'This is the user function area.',
+              },
+            ],
+          })
+          .start();
+      }
+      return { handleStart };
+    },
+  });
+</script>
@@ -1184,17 +1184,17 @@
   dependencies:
     cross-fetch "^3.0.6"
  
-"@iconify/iconify@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.1.tgz#4927812922d50b378699694b5e72e22a1acc9d2f"
-  integrity sha512-heGCmdiRc58+TQjKPiem8cmNZj7YXDG3TphRVw0UGjsz8/OKgN2ncBPy1kfFIiv5aKhUsij6WVTfOMUS7YgTbA==
+"@iconify/iconify@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.2.tgz#8e8be6c8f20042ab69324bc6db6fc884be98b418"
+  integrity sha512-m3MDKXYRRsrVLZFFUkSaTv9/jTk0sLOlIhlmupj2/VhHnZt0i3ACyUD7rx/Vd5bLvtotrHaT5e/ZOLP7uiFmKQ==
   dependencies:
     cross-fetch "^3.0.6"
  
-"@iconify/json@^1.1.356":
-  version "1.1.356"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.356.tgz#248b25843cf91618dff7ef4494a1b331efd1eb82"
-  integrity sha512-HeG9neoS5oatUTF6zlAAyDNPxbj0NvGDFqzd4wBtqu5mE4/xjhDO+S1obkgqpBrDedgoXDwIFkGx9Mx1HJCnaw==
+"@iconify/json@^1.1.357":
+  version "1.1.357"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.357.tgz#63dd3b358b80a3774e24ce0a136488b819a20dbd"
+  integrity sha512-X4tXnyCKCAKRopGtvQjp3LmPX3TaUUfi2DwD41SQItBp9PbsZXg9+tYJbWjl0+gFFv7ikdzAp+yGIaXuZT/k5g==
  
 "@intlify/core-base@9.1.6":
   version "9.1.6"
@@ -1646,6 +1646,11 @@
     "@types/through" "*"
     rxjs "^6.4.0"
  
+"@types/intro.js@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@types/intro.js/-/intro.js-3.0.1.tgz#2a5272d6ceb715676f496fd0060eedc70d98c6fe"
+  integrity sha512-L4vCKY/4ZFpRgILDHd3oacARWYKYpz3oJfjweoc0ooM+OoM1HEtGRFM0JuNYQNTrgUXe+R4rUyLDYSeSnrmdLw==
+
 "@types/json-schema@^7.0.7":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
@@ -2006,10 +2011,10 @@
     "@vue/compiler-dom" "3.0.11"
     "@vue/shared" "3.0.11"
  
-"@vue/devtools-api@^6.0.0-beta.10":
-  version "6.0.0-beta.10"
-  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.10.tgz#f39da7618cee292e39c7274227c34163e30eb3ca"
-  integrity sha512-nktQYRnIFrh4DdXiCBjHnsHOMZXDIVcP9qlm/DMfxmjJMtpMGrSZCOKP8j7kDhObNHyqlicwoGLd+a4hf4x9ww==
+"@vue/devtools-api@^6.0.0-beta.14":
+  version "6.0.0-beta.14"
+  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.14.tgz#6ed2d6f8d66a9256c9ad04bfff08309ba87b9723"
+  integrity sha512-44fPrrN1cqcs6bFkT0C+yxTM6PZXLbR+ESh1U1j8UD22yO04gXvxH62HApMjLbS3WqJO/iCNC+CYT+evPQh2EQ==
  
 "@vue/devtools-api@^6.0.0-beta.7":
   version "6.0.0-beta.11"
@@ -5863,6 +5868,11 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
  
+intro.js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/intro.js/-/intro.js-4.0.0.tgz#6897f0dc6bb9997f73613ae3c7cd26e16b05a5eb"
+  integrity sha512-IS8+p4rpnWUq2Vd8YRgjR8w9lbyLvT0ptscBqA4iudO68oven39CvxHfxopfwlNUGgmgcyX17DOETof+D90AXA==
+
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@@ -8143,10 +8153,10 @@ postcss@^8.3.0:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
  
-postcss@^8.3.4:
-  version "8.3.4"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.4.tgz#41ece1c43f2f7c74dc7d90144047ce052757b822"
-  integrity sha512-/tZY0PXExXXnNhKv3TOvZAOUYRyuqcCbBm2c17YMDK0PlVII3K7/LKdt3ScHL+hhouddjUWi+1sKDf9xXW+8YA==
+postcss@^8.3.5:
+  version "8.3.5"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
+  integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.23"
@@ -8878,10 +8888,10 @@ rollup-plugin-visualizer@5.5.0:
     source-map "^0.7.3"
     yargs "^16.2.0"
  
-rollup@^2.38.5, rollup@^2.43.1, rollup@^2.51.2, rollup@^2.52.0:
-  version "2.52.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.52.0.tgz#9df3de6028fae79569a985942b81110205a5a411"
-  integrity sha512-lSkBDGsVoXjqaBf7dsHwxBJz+p+hJEP72P+LOitA0yVs+Nzxj76FidkZE2thrmhjwGqLYiJo39opi7mAfaQ/Vg==
+rollup@^2.38.5, rollup@^2.43.1, rollup@^2.51.2, rollup@^2.52.1:
+  version "2.52.1"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz#dd1cc178d70cf35c48d943fc06fdc32d546e6876"
+  integrity sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==
   optionalDependencies:
     fsevents "~2.3.2"
  
@@ -10079,10 +10089,10 @@ typescript-vscode-sh-plugin@^0.6.14:
   resolved "https://registry.npmjs.org/typescript-vscode-sh-plugin/-/typescript-vscode-sh-plugin-0.6.14.tgz#a81031b502f6346a26ea49ce082438c3e353bb38"
   integrity sha512-AkNlRBbI6K7gk29O92qthNSvc6jjmNQ6isVXoYxkFwPa8D04tIv2SOPd+sd+mNpso4tNdL2gy7nVtrd5yFqvlA==
  
-typescript@4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
-  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
+typescript@4.3.3:
+  version "4.3.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.3.tgz#5401db69bd3203daf1851a1a74d199cb3112c11a"
+  integrity sha512-rUvLW0WtF7PF2b9yenwWUi9Da9euvDRhmH7BLyBG4DCFfOJ850LGNknmRpp8Z8kXNUPObdZQEfKOiHtXuQHHKA==
  
 uglify-js@^3.1.4:
   version "3.13.3"
@@ -10859,12 +10869,12 @@ vue-json-pretty@^2.0.2:
   resolved "https://registry.npmjs.com/vue-json-pretty/-/vue-json-pretty-2.0.2.tgz#cb8f559af15ea3a2ee53b2742672c7791826d6a3"
   integrity sha512-Vn7SX3XR9cfvGRNoTDNID89GmvVUMb7/fLUX3C3n0Qptga0N7hp7Zwspui1I1XN5pE+PeoVghCSYty+bi8KnjA==
  
-vue-router@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz#55d4290a3122444edbc91a3cd2492bb1d0cef494"
-  integrity sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA==
+vue-router@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.9.tgz#248496941b79c4c1010f6ebfcf235cd4267d85da"
+  integrity sha512-i3IaZJ57YeMbRHQlqKyXdUMr5NzTCcJkn3f8u38TsZjYWtGcd3IX2zRd3389SCOwuRf11mgfHAyngR6FVDE9og==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.10"
+    "@vue/devtools-api" "^6.0.0-beta.14"
  
 vue-tsc@^0.1.7:
   version "0.1.7"