diff --git a/package.json b/package.json index e0b26ee9432..d103beadfd0 100644 --- a/package.json +++ b/package.json @@ -82,9 +82,9 @@ "cropperjs": "^1.5.13", "crypto-js": "^4.1.1", "dayjs": "^1.11.9", + "driver.js": "^1.3.0", "echarts": "^5.4.2", "exceljs": "^4.3.0", - "intro.js": "^7.0.1", "lodash-es": "^4.17.21", "mockjs": "^1.1.0", "nprogress": "^0.2.0", @@ -116,7 +116,6 @@ "@purge-icons/generated": "^0.9.0", "@types/codemirror": "^5.60.8", "@types/crypto-js": "^4.1.1", - "@types/intro.js": "^5.1.1", "@types/lodash-es": "^4.17.7", "@types/mockjs": "^1.0.7", "@types/nprogress": "^0.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51d6b223a47..d73b7ce0370 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,15 +53,15 @@ importers: dayjs: specifier: ^1.11.9 version: 1.11.9 + driver.js: + specifier: ^1.3.0 + version: 1.3.0 echarts: specifier: ^5.4.2 version: 5.4.2 exceljs: specifier: ^4.3.0 version: 4.3.0 - intro.js: - specifier: ^7.0.1 - version: 7.0.1 lodash-es: specifier: ^4.17.21 version: 4.17.21 @@ -150,9 +150,6 @@ importers: '@types/crypto-js': specifier: ^4.1.1 version: 4.1.1 - '@types/intro.js': - specifier: ^5.1.1 - version: 5.1.1 '@types/lodash-es': specifier: ^4.17.7 version: 4.17.7 @@ -230,7 +227,7 @@ importers: version: 1.2.1 vite: specifier: ^4.4.0 - version: 4.4.0(@types/node@20.4.0)(less@4.1.3)(sass@1.63.6) + version: 4.4.0(@types/node@20.4.0) vite-plugin-mock: specifier: ^2.9.6 version: 2.9.6(mockjs@1.1.0)(rollup@2.79.1)(vite@4.4.0) @@ -2519,10 +2516,6 @@ packages: /@types/http-errors@2.0.1: resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==} - /@types/intro.js@5.1.1: - resolution: {integrity: sha512-gxrfhzwHeCZI8PoucIVRCe5cX0j29YYB1YLIfPb87HN1HiAhrl0CGMFuYPzo6Gvn5diAPCHF6XW2SR+Lqxexlg==} - dev: true - /@types/istanbul-lib-coverage@2.0.4: resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==} dev: false @@ -3664,7 +3657,7 @@ packages: /axios@1.4.0: resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==} dependencies: - follow-redirects: 1.15.2(debug@4.3.4) + follow-redirects: 1.15.2 form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -4994,6 +4987,10 @@ packages: engines: {node: '>=12'} dev: true + /driver.js@1.3.0: + resolution: {integrity: sha512-ilUkVc5iMIYfMd8FdWy8n5Wv//gsJuRP+lo8QfWpwP9c0UGOgD7P9nVQMZwcdW84aqAZHHUHrV7GgiopAN6HUQ==} + dev: false + /duplexer2@0.1.4: resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==} dependencies: @@ -5844,6 +5841,16 @@ packages: resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} dev: true + /follow-redirects@1.15.2: + resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + /follow-redirects@1.15.2(debug@4.3.4): resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} engines: {node: '>=4.0'} @@ -5854,6 +5861,7 @@ packages: optional: true dependencies: debug: 4.3.4 + dev: true /for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} @@ -6599,10 +6607,6 @@ packages: side-channel: 1.0.4 dev: true - /intro.js@7.0.1: - resolution: {integrity: sha512-1oqz6aOz9cGQ3CrtVYhCSo6AkjnXUn302kcIWLaZ3TI4kKssRXDwDSz4VRoGcfC1jN+WfaSJXRBrITz+QVEBzg==} - dev: false - /ip@1.1.8: resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==} dev: true @@ -11653,7 +11657,7 @@ packages: fast-glob: 3.3.0 mockjs: 1.1.0 path-to-regexp: 6.2.1 - vite: 4.4.0(@types/node@20.4.0)(less@4.1.3)(sass@1.63.6) + vite: 4.4.0(@types/node@20.4.0) transitivePeerDependencies: - rollup - supports-color @@ -11692,6 +11696,42 @@ packages: - supports-color dev: true + /vite@4.4.0(@types/node@20.4.0): + resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.4.0 + esbuild: 0.18.11 + postcss: 8.4.24 + rollup: 3.26.1 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.4.0(@types/node@20.4.0)(less@4.1.3)(sass@1.63.6): resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/views/demo/setup/index.vue b/src/views/demo/setup/index.vue index 17d254f2e57..fbd38f1e3e4 100644 --- a/src/views/demo/setup/index.vue +++ b/src/views/demo/setup/index.vue @@ -7,8 +7,8 @@ import { defineComponent } from 'vue'; import { PageWrapper } from '/@/components/Page'; import { useDesign } from '/@/hooks/web/useDesign'; - import intro from 'intro.js'; - import 'intro.js/minified/introjs.min.css'; + import { driver } from 'driver.js'; + import 'driver.js/dist/driver.css'; export default defineComponent({ components: { PageWrapper }, @@ -16,26 +16,31 @@ const { prefixVar } = useDesign(''); function handleStart() { - intro() - .setOptions({ - steps: [ - { + driver({ + showProgress: true, + steps: [ + { + popover: { title: 'Welcome', - intro: 'Hello World! 👋', + description: 'Hello World! 👋', }, - { + }, + { + element: `.${prefixVar}-layout-header-trigger`, + popover: { title: 'Collapse Button', - element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!, - intro: 'This is the menu collapse button.', + description: 'This is the menu collapse button.', }, - { + }, + { + element: `.${prefixVar}-layout-header-action`, + popover: { title: 'User Action', - element: document.querySelector(`.${prefixVar}-layout-header-action`)!, - intro: 'This is the user function area.', + description: 'This is the user function area.', }, - ], - }) - .start(); + }, + ], + }).drive(); } return { handleStart }; },