diff --git a/framework/sdk-parent/frontend/src/components/guide/Guidance.vue b/framework/sdk-parent/frontend/src/components/guide/Guidance.vue index 2cb9a0fc26..0416570950 100644 --- a/framework/sdk-parent/frontend/src/components/guide/Guidance.vue +++ b/framework/sdk-parent/frontend/src/components/guide/Guidance.vue @@ -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') - } + this.$router.push('/project/home') + this.$router.go(0); 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(() => { diff --git a/project-management/frontend/src/business/home/ProjectHome.vue b/project-management/frontend/src/business/home/ProjectHome.vue index 1ae9887c9d..d99a2ed5f6 100644 --- a/project-management/frontend/src/business/home/ProjectHome.vue +++ b/project-management/frontend/src/business/home/ProjectHome.vue @@ -170,8 +170,13 @@ export default { }, mounted() { this.$refs.introduction.resVisible = false - if(localStorage.getItem("guide") === 'false' && localStorage.getItem("step") === '3') { - this.initStep() + 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(() => {