twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 08:27:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: use intro.js replace driver.js

Browse Source
This commit is contained in:
xiaoxian521 2022-11-18 19:54:08 +08:00
parent 2235d9d7a8
commit 867ef87a34
4 changed files with 71 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -45,11 +45,11 @@
"china-area-data": "^5.0.1",
"cropperjs": "^1.5.12",
"dayjs": "^1.11.5",
"driver.js": "^0.9.8",
"echarts": "^5.4.0",
"el-table-infinite-scroll": "^3.0.1",
"element-plus": "^2.2.21",
"element-plus": "^2.2.22",
"element-resize-detector": "^1.2.4",
"intro.js": "^6.0.0",
"js-cookie": "^3.0.1",
"jsbarcode": "^3.11.5",
"lodash": "^4.17.21",
@ -98,6 +98,7 @@
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
"@pureadmin/theme": "^2.4.0",
"@types/element-resize-detector": "1.1.3",
"@types/intro.js": "^5.1.0",
"@types/js-cookie": "^3.0.1",
"@types/lodash": "^4.14.180",
"@types/lodash-es": "^4.17.6",

49
pnpm-lock.yaml generated
View File

@ -24,6 +24,7 @@ specifiers:
"@pureadmin/theme": ^2.4.0
"@pureadmin/utils": ^1.6.5
"@types/element-resize-detector": 1.1.3
"@types/intro.js": ^5.1.0
"@types/js-cookie": ^3.0.1
"@types/lodash": ^4.14.180
"@types/lodash-es": ^4.17.6
@ -52,16 +53,16 @@ specifiers:
cropperjs: ^1.5.12
cssnano: ^5.1.14
dayjs: ^1.11.5
driver.js: ^0.9.8
echarts: ^5.4.0
el-table-infinite-scroll: ^3.0.1
element-plus: ^2.2.21
element-plus: ^2.2.22
element-resize-detector: ^1.2.4
eslint: ^8.8.0
eslint-plugin-prettier: ^4.0.0
eslint-plugin-vue: ^9.7.0
font-awesome: ^4.7.0
husky: ^7.0.4
intro.js: ^6.0.0
js-cookie: ^3.0.1
jsbarcode: ^3.11.5
lint-staged: 11.1.2
@ -130,8 +131,8 @@ dependencies:
"@logicflow/core": 1.1.31
"@logicflow/extension": 1.1.31
"@pureadmin/components": 1.1.0_vue@3.2.45
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
"@pureadmin/table": 1.2.0_element-plus@2.2.21
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.22
"@pureadmin/table": 1.2.0_element-plus@2.2.22
"@pureadmin/utils": 1.6.6_aotapuqn7htzdjltsyimavekky
"@vueuse/core": 9.5.0_vue@3.2.45
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
@ -142,11 +143,11 @@ dependencies:
china-area-data: 5.0.1
cropperjs: 1.5.12
dayjs: 1.11.6
driver.js: 0.9.8
echarts: 5.4.0
el-table-infinite-scroll: 3.0.1
element-plus: 2.2.21_vue@3.2.45
element-plus: 2.2.22_vue@3.2.45
element-resize-detector: 1.2.4
intro.js: 6.0.0
js-cookie: 3.0.1
jsbarcode: 3.11.5
lodash: 4.17.21
@ -195,6 +196,7 @@ devDependencies:
"@intlify/vite-plugin-vue-i18n": 6.0.3_vite@3.1.8+vue-i18n@9.2.2
"@pureadmin/theme": 2.4.0
"@types/element-resize-detector": 1.1.3
"@types/intro.js": 5.1.0
"@types/js-cookie": 3.0.2
"@types/lodash": 4.14.189
"@types/lodash-es": 4.17.6
@ -1364,7 +1366,7 @@ packages:
vue: 3.2.45
dev: false
/@pureadmin/descriptions/1.1.1_element-plus@2.2.21:
/@pureadmin/descriptions/1.1.1_element-plus@2.2.22:
resolution:
{
integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==
@ -1373,11 +1375,11 @@ packages:
element-plus: ^2.0.0
dependencies:
"@element-plus/icons-vue": 2.0.10_vue@3.2.45
element-plus: 2.2.21_vue@3.2.45
element-plus: 2.2.22_vue@3.2.45
vue: 3.2.45
dev: false
/@pureadmin/table/1.2.0_element-plus@2.2.21:
/@pureadmin/table/1.2.0_element-plus@2.2.22:
resolution:
{
integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
@ -1385,7 +1387,7 @@ packages:
peerDependencies:
element-plus: ^2.0.0
dependencies:
element-plus: 2.2.21_vue@3.2.45
element-plus: 2.2.22_vue@3.2.45
vue: 3.2.45
dev: false
@ -1520,6 +1522,13 @@ packages:
}
dev: false
/@types/intro.js/5.1.0:
resolution:
{
integrity: sha512-XHkD6t7f3bn8B2//kOlznRzmk15KvsRkFpY6i8em/eDphblQ8QHbCiW+6OPjX7CxI0aVNVJK6Yamb2h2KMmFdA==
}
dev: true
/@types/js-cookie/3.0.2:
resolution:
{
@ -3952,13 +3961,6 @@ packages:
unidragger: 2.4.0
dev: false
/driver.js/0.9.8:
resolution:
{
integrity: sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q==
}
dev: false
/echarts/5.4.0:
resolution:
{
@ -3983,7 +3985,7 @@ packages:
}
dependencies:
core-js: 3.26.1
element-plus: 2.2.21_vue@3.2.45
element-plus: 2.2.22_vue@3.2.45
vue: 3.2.45
transitivePeerDependencies:
- "@vue/composition-api"
@ -3996,10 +3998,10 @@ packages:
}
dev: true
/element-plus/2.2.21_vue@3.2.45:
/element-plus/2.2.22_vue@3.2.45:
resolution:
{
integrity: sha512-wZUePoXZ1zuCkzENK/8mn+mekuLJ9OoGYiudjUujzCf+T8HfOQl+TKQStwOkGBNk93fK8e9YdFIty4jH4AX6dg==
integrity: sha512-gg2g2WOMNpWf0wGesymUvTV0VZDF/4khQKroSNeCV/vWJ/cqssPYdtqfGxTiFRt/f+JpyFkV7O1mo0yzMCzrBg==
}
peerDependencies:
vue: ^3.2.0
@ -5463,6 +5465,13 @@ packages:
}
dev: true
/intro.js/6.0.0:
resolution:
{
integrity: sha512-ZUiR6BoLSvPSlLG0boewnWVgji1fE1gBvP/pyw5pgCKXEDQz1mMeUxarggClPNs71UTq364LwSk9zxz17A9gaQ==
}
dev: false
/is-arrayish/0.2.1:
resolution:
{

6
src/style/dark.scss
View File

@ -170,6 +170,12 @@ html.dark {
}
}
/* intro.js */
.introjs-tooltip-title,
.introjs-tooltiptext {
color: var(--el-color-primary);
}
/* element-plus */
.el-table__cell {
background: var(--el-bg-color);

98
src/views/guide/index.vue
View File

@ -1,62 +1,42 @@
<script setup lang="ts">
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import intro from "intro.js";
import "intro.js/minified/introjs.min.css";
defineOptions({
name: "Guide"
});
const steps = [
{
element: "#header-notice",
popover: {
title: "消息通知",
description: "你可以在这里查看管理员发送的消息",
position: "left"
}
},
{
element: "#header-translation",
popover: {
title: "国际化",
description: "你可以在这里进行语言切换",
position: "left"
}
},
{
element: ".set-icon",
popover: {
title: "项目配置",
description: "你可以在这里查看项目配置",
position: "left"
}
},
{
element: ".tags-view",
popover: {
title: "多标签页",
description: "这里是你访问过的页面的历史",
position: "buttom"
}
}
];
const driver = new Driver({
className: "scoped-class",
animate: true,
opacity: 0.75,
padding: 0,
allowClose: true,
overlayClickNext: false,
doneBtnText: "完成",
closeBtnText: "关闭",
nextBtnText: "下一步",
prevBtnText: "上一步"
});
const guide = () => {
driver.defineSteps(steps);
driver.start();
intro()
.setOptions({
steps: [
{
element: document.querySelector("#header-notice"),
title: "消息通知",
intro: "您可以在这里查看管理员发送的消息",
position: "left"
},
{
element: document.querySelector("#header-translation"),
title: "国际化",
intro: "您可以在这里进行语言切换",
position: "left"
},
{
element: document.querySelector(".set-icon"),
title: "项目配置",
intro: "您可以在这里查看项目配置",
position: "left"
},
{
element: document.querySelector(".tags-view"),
title: "多标签页",
intro: "这里是您访问过的页面的历史",
position: "bottom"
}
]
})
.start();
};
</script>
@ -69,20 +49,8 @@ const guide = () => {
</span>
</div>
</template>
<el-button
type="primary"
style="margin-top: 10px"
@click.prevent.stop="guide"
>
<el-button type="primary" class="mt-[10px]" @click="guide">
打开引导页
</el-button>
</el-card>
</template>
<style>
div#driver-highlighted-element-stage,
div#driver-page-overlay {
background: transparent !important;
outline: 5000px solid rgba(0, 0, 0, 0.75);
}
</style>