feat(demo): added guide page example

Vben

2021-06-17 d196340d270d2becbf2cc81b7d4f09273381bd09

feat(demo): added guide page example

 CHANGELOG.zh_CN.md

@@ -10,6 +10,7 @@
- **CropperAvatar** 新增头像上传组件
- **Drawer** `useDrawer`新增`closeDrawer`函数
- **Preview** 新增`createImgPreview`图片预览函数
- **Setup** 新增引导页示例

### 🐛 Bug Fixes


 package.json

@@ -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",

 src/components/registerGlobComp.ts

@@ -1,3 +1,4 @@
import type { App } from 'vue';
import { Icon } from './Icon';
import { Button } from './Button';
import {
@@ -5,8 +6,6 @@
  Button as AntButton,
  Input,
} from 'ant-design-vue';

import { App } from 'vue';

const compList = [Icon, AntButton.Group];


 src/locales/lang/en/routes/demo/setup.ts

New file
@@ -0,0 +1,3 @@
export default {
  page: 'Intro page',
};

 src/locales/lang/zh_CN/routes/demo/setup.ts

New file
@@ -0,0 +1,3 @@
export default {
  page: '引导页',
};

 src/router/menus/modules/demo/setup.ts

New file
@@ -0,0 +1,14 @@
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;

 src/router/routes/modules/demo/setup.ts

New file
@@ -0,0 +1,28 @@
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;

 src/views/demo/setup/index.vue

New file
@@ -0,0 +1,43 @@
<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>

 yarn.lock

@@ -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 @@
    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 @@
    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 @@
    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 @@
  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 @@
  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"