fix(新手引导): 新建超级管理员用户-首次加载会出现两次新手引导弹窗

This commit is contained in:
lan-yonghui 2023-07-04 16:26:15 +08:00 committed by 刘瑞斌
parent fbc23ebfcb
commit 6e336d34c0
2 changed files with 159 additions and 157 deletions

View File

@ -43,12 +43,8 @@ export default {
localStorage.setItem("resetGuide", 'true')
localStorage.setItem("guide", 'false')
localStorage.removeItem('step')
if(this.$route.path.includes('project')){
this.$router.push('/project/home')
this.$router.go(0);
}else{
this.$router.push('/project/home')
}
break;
case "novice":
this.$refs.sideMenu.toggle(2);
@ -62,170 +58,26 @@ export default {
if (res.data.length > 0 && res.data[0].guideStep) {
localStorage.setItem('step', res.data[0].guideStep)
localStorage.setItem("noviceStatus", res.data[0].status)
if(localStorage.getItem("resetGuide") !== 'true'){
localStorage.setItem('guide',res.data[0].guideStep > 0 ? 'true' : 'false')
}
} else {
localStorage.setItem('guide','false')
localStorage.removeItem('step')
}
let microApps = JSON.parse(sessionStorage.getItem("micro_apps"));
if(localStorage.getItem("guide") === 'false' && microApps && microApps['project']) {
let step = localStorage.getItem("step") && localStorage.getItem("resetGuide") !== 'true' ?
localStorage.getItem("step") : "1"
localStorage.setItem("step", step)
if(step !== '3'){
if(this.$route.path.includes('/project/home')){
this.initStepAll()
}else{
if(!this.$route.path.includes('/project/home')){
this.initStep()
}
}
}
})
},
initStepAll() {
const _this = this
_this.$nextTick(() => {
const tour = _this.$shepherd({
useModalOverlay: true,
exitOnEsc: false,
keyboardNavigation: false,
defaultStepOptions: {
scrollTo: {
behavior: 'smooth',
block: 'center'
},
canClickTarget: false,
//
modalOverlayOpeningPadding: 0,
//
modalOverlayOpeningRadius: 4
}
})
tour.addSteps([
{
attachTo: {
element: document.querySelector('.shepherd-workspace'),
on: 'bottom-start'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = true
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, null, 2)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step1.title"),
text: _this.$t("shepherd.step1.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-menu'),
on: 'right'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, '/project/home', 3)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step2.title"),
text: _this.$t("shepherd.step2.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-project'),
on: 'bottom-end'
},
classes: "custom-width",
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, null, 4)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step3.title"),
text: _this.$t("shepherd.step3.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-project-menu'),
on: 'bottom-start'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, '/project/home', 5)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step4.title"),
text: _this.$t("shepherd.step4.text")
},
{
arrow:true,
modalOverlayOpeningPadding: 8,
attachTo: {
element: document.querySelector('.shepherd-project-name'),
on: 'right'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, false)
},
classes: 'close-btn',
text: _this.$t("shepherd.know")
}
],
title: _this.$t("shepherd.step5.title"),
text: _this.$t("shepherd.step5.text")
}
])
tour.start()
})
},
initStep() {
const _this = this
_this.$nextTick(() => {

View File

@ -170,8 +170,13 @@ export default {
},
mounted() {
this.$refs.introduction.resVisible = false
if(localStorage.getItem("guide") === 'false' && localStorage.getItem("step") === '3') {
let microApps = JSON.parse(sessionStorage.getItem("micro_apps"));
if(localStorage.getItem("guide") === 'false' && microApps && microApps['project']) {
if(localStorage.getItem("step") === '3'){
this.initStep()
}else{
this.initStepAll()
}
}
},
methods: {
@ -187,6 +192,151 @@ export default {
edit() {
this.$refs.editProject.edit(this.project);
},
initStepAll() {
const _this = this
_this.$nextTick(() => {
const tour = _this.$shepherd({
useModalOverlay: true,
exitOnEsc: false,
keyboardNavigation: false,
defaultStepOptions: {
scrollTo: {
behavior: 'smooth',
block: 'center'
},
canClickTarget: false,
//
modalOverlayOpeningPadding: 0,
//
modalOverlayOpeningRadius: 4
}
})
tour.addSteps([
{
attachTo: {
element: document.querySelector('.shepherd-workspace'),
on: 'bottom-start'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = true
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, null, 2)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step1.title"),
text: _this.$t("shepherd.step1.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-menu'),
on: 'right'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, '/project/home', 3)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step2.title"),
text: _this.$t("shepherd.step2.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-project'),
on: 'bottom-end'
},
classes: "custom-width",
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, null, 4)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step3.title"),
text: _this.$t("shepherd.step3.text")
},
{
attachTo: {
element: document.querySelector('.shepherd-project-menu'),
on: 'bottom-start'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, true)
},
classes: 'close-btn',
text: _this.$t("shepherd.exit")
},
{
action: function() {
return _this.gotoNext(this, '/project/home', 5)
},
classes: 'shep-btn',
text: _this.$t("shepherd.next")
}
],
title: _this.$t("shepherd.step4.title"),
text: _this.$t("shepherd.step4.text")
},
{
arrow:true,
modalOverlayOpeningPadding: 8,
attachTo: {
element: document.querySelector('.shepherd-project-name'),
on: 'right'
},
buttons: [
{
action: function() {
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
return _this.gotoCancel(this, false)
},
classes: 'close-btn',
text: _this.$t("shepherd.know")
}
],
title: _this.$t("shepherd.step5.title"),
text: _this.$t("shepherd.step5.text")
}
])
tour.start()
})
},
initStep() {
const _this = this
_this.$nextTick(() => {