From 4ba264e00de24a0557ca9b41c0d12a5576cdbb9e Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 31 Oct 2023 10:07:21 +0800 Subject: [PATCH] perf: use driver.js --- package.json | 3 +-- src/hooks/web/useGuide.ts | 49 +++++++++++++++++++++++++++++++++++++++ src/hooks/web/useIntro.ts | 47 ------------------------------------- tsconfig.json | 1 - 4 files changed, 50 insertions(+), 50 deletions(-) create mode 100644 src/hooks/web/useGuide.ts delete mode 100644 src/hooks/web/useIntro.ts diff --git a/package.json b/package.json index 5c8e8abb..fb0f23ad 100644 --- a/package.json +++ b/package.json @@ -44,12 +44,12 @@ "crypto-js": "^4.2.0", "dayjs": "^1.11.10", "diagram-js": "^12.6.0", + "driver.js": "^1.3.0", "echarts": "^5.4.3", "echarts-wordcloud": "^2.1.0", "element-plus": "2.4.1", "fast-xml-parser": "^4.3.2", "highlight.js": "^11.9.0", - "intro.js": "^7.2.0", "jsencrypt": "^3.3.2", "lodash-es": "^4.17.21", "min-dash": "^4.1.1", @@ -77,7 +77,6 @@ "@iconify/json": "^2.2.135", "@intlify/unplugin-vue-i18n": "^1.4.0", "@purge-icons/generated": "^0.9.0", - "@types/intro.js": "^5.1.3", "@types/lodash-es": "^4.17.10", "@types/node": "^20.8.9", "@types/nprogress": "^0.2.2", diff --git a/src/hooks/web/useGuide.ts b/src/hooks/web/useGuide.ts new file mode 100644 index 00000000..7fd2fb09 --- /dev/null +++ b/src/hooks/web/useGuide.ts @@ -0,0 +1,49 @@ +import { Config, driver } from 'driver.js' +import 'driver.js/dist/driver.css' +import { useDesign } from '@/hooks/web/useDesign' +import { useI18n } from '@/hooks/web/useI18n' + +const { t } = useI18n() + +const { variables } = useDesign() + +export const useGuide = (options?: Config) => { + const driverObj = driver( + options || { + showProgress: true, + nextBtnText: t('common.nextLabel'), + prevBtnText: t('common.prevLabel'), + doneBtnText: t('common.doneLabel'), + steps: [ + { + element: `#${variables.namespace}-menu`, + popover: { + title: t('common.menu'), + description: t('common.menuDes'), + side: 'right' + } + }, + { + element: `#${variables.namespace}-tool-header`, + popover: { + title: t('common.tool'), + description: t('common.toolDes'), + side: 'left' + } + }, + { + element: `#${variables.namespace}-tags-view`, + popover: { + title: t('common.tagsView'), + description: t('common.tagsViewDes'), + side: 'bottom' + } + } + ] + } + ) + + return { + ...driverObj + } +} diff --git a/src/hooks/web/useIntro.ts b/src/hooks/web/useIntro.ts deleted file mode 100644 index 7fe00845..00000000 --- a/src/hooks/web/useIntro.ts +++ /dev/null @@ -1,47 +0,0 @@ -import introJs from 'intro.js' -import { IntroJs, Step, Options } from 'intro.js' -import 'intro.js/introjs.css' - -import { useDesign } from '@/hooks/web/useDesign' - -export const useIntro = (setps?: Step[], options?: Options) => { - const { t } = useI18n() - - const { variables } = useDesign() - - const defaultSetps: Step[] = setps || [ - { - element: `#${variables.namespace}-menu`, - title: t('common.menu'), - intro: t('common.menuDes'), - position: 'right' - }, - { - element: `#${variables.namespace}-tool-header`, - title: t('common.tool'), - intro: t('common.toolDes'), - position: 'left' - }, - { - element: `#${variables.namespace}-tags-view`, - title: t('common.tagsView'), - intro: t('common.tagsViewDes'), - position: 'bottom' - } - ] - - const defaultOptions: Options = options || { - prevLabel: t('common.prevLabel'), - nextLabel: t('common.nextLabel'), - skipLabel: t('common.skipLabel'), - doneLabel: t('common.doneLabel') - } - - const introRef: IntroJs = introJs() - - introRef.addSteps(defaultSetps).setOptions(defaultOptions) - - return { - introRef - } -} diff --git a/tsconfig.json b/tsconfig.json index 1ee23774..182852ac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,6 @@ "@intlify/unplugin-vue-i18n/types", "vite/client", "element-plus/global", - "@types/intro.js", "@types/qrcode", "vite-plugin-svg-icons/client" ],