feat(debug): support tour guide

weexteam · Jan 31, 2019 · 60e0c80 · 60e0c80
1 parent e3f2bdf
commit 60e0c80
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 18 deletions.
diff --git a/packages/@weex/plugins/debug/frontend/src/components/navbar/navbar.html b/packages/@weex/plugins/debug/frontend/src/components/navbar/navbar.html
@@ -13,7 +13,7 @@
       </span>
       环境设置
     </b-nav-item>
-    <b-nav-item class="wx-navbar-item operate" @click="toggleHelpSetting()" :class="{'active': helpSetting}">
+    <b-nav-item class="wx-navbar-item operate" @click="toggleHelpSetting" :class="{'active': helpSetting}">
       <span class="iconfont icon-bangzhu">
 
       </span>

diff --git a/packages/@weex/plugins/debug/frontend/src/components/navbar/navbar.ts b/packages/@weex/plugins/debug/frontend/src/components/navbar/navbar.ts
@@ -46,8 +46,6 @@ export class NavbarComponent extends Vue {
   }
 
   toggleHelpSetting () {
-    if (!this.helpSetting) {
-      this.$store.commit(types.UPDATE_HELP_SETTING, !this.helpSetting)
-    }
+    this.$store.commit(types.UPDATE_HELP_SETTING, !this.helpSetting)
   }
 }
diff --git a/packages/@weex/plugins/debug/frontend/src/sass/vtour.scss b/packages/@weex/plugins/debug/frontend/src/sass/vtour.scss
@@ -1,5 +1,5 @@
 .v-tour {
-  z-index: 10;
+  z-index: 20;
   .v-step__arrow[data-v-570be51d] {
     border-color:#fe7329;
   }

diff --git a/packages/@weex/plugins/debug/frontend/src/store/mutations.ts b/packages/@weex/plugins/debug/frontend/src/store/mutations.ts
@@ -11,6 +11,7 @@ const mutations: MutationTree<State> = {
     state.environmentSetting = value
   },
   [types.UPDATE_HELP_SETTING] (state: State, value: string) {
+    console.log('here', value)
     state.helpSetting = value
   }
 }

diff --git a/packages/@weex/plugins/debug/frontend/src/views/weex/weex.html b/packages/@weex/plugins/debug/frontend/src/views/weex/weex.html
@@ -1,4 +1,5 @@
 <div class="wx-debug-weex-content">
+  <div data-v-step="5"></div>
   <div class="wx-debug-weex-advance" :class="{'active': environmentSetting}">
     <div class="title">
       <span class="iconfont icon-gaojishezhi">
@@ -17,7 +18,7 @@
           </small>
         </div>
         <input v-model="workerjs" type="text" placeholder="http://">
-        <span class="iconfont icon-mock" title="mock 文件" @click="toggleEditor('workerjs')"></span>
+        <span class="iconfont icon-mock" title="mock 文件" @click="toggleEditor('workerjs')"  data-v-step="6"></span>
       </div>
       <div class="col">
         <div class="label">
@@ -52,8 +53,8 @@
     </div>
     <div class="row">
       <div class="button-group">
-          <b-button variant="outline-success" size="sm" @click="activeWeexEnvironmentSetting()">更改设置</b-button>
-          <b-button variant="outline-danger" size="sm" @click="cleanWeexEnvironmentSetting()">重置</b-button>
+          <b-button variant="outline-success" size="sm" @click="activeWeexEnvironmentSetting()" data-v-step="7">更改设置</b-button>
+          <b-button variant="outline-danger" size="sm" @click="cleanWeexEnvironmentSetting()" data-v-step="8">重置</b-button>
       </div>
     </div>
   </div>
@@ -62,22 +63,22 @@
 
       <div class="wx-debug-weex-row">
         <div class="wx-debug-weex-col navigation">
-          <input v-model="sourcejs" type="text" class="bundleurl" placeholder="http://" @keyup.enter="navigator(sourcejs)" :disabled="!isSandbox">
+          <input v-model="sourcejs" type="text" class="bundleurl" placeholder="http://" @keyup.enter="navigator(sourcejs)" :disabled="!isSandbox" data-v-step="4">
           <span class="iconfont icon-huifu" @click="restore($event)" title="恢复"></span>
-          <span class="iconfont icon-icon" @click="reload($event)" title="刷新"></span>
+          <span class="iconfont icon-icon" @click="reload($event)" title="刷新" data-v-step="3"></span>
         </div>
         <div class="wx-debug-weex-col info">
           <div class="label">App Info</div>
           <span :title="userAgent">{{userAgent}}</span>
         </div>
         <div class="wx-debug-weex-col switch">
           <div class="label">JS Debug</div>
-          <toggle-button :value="remoteDebugStatus" @change="handleRemoteDebug($event)" color="#f37327" :sync="true" :width="50" :height="24"
+          <toggle-button data-v-step="1" :value="remoteDebugStatus" @change="handleRemoteDebug($event)" color="#f37327" :sync="true" :width="50" :height="24"
             :labels="true" />
         </div>
         <div class="wx-debug-weex-col select">
           <div class="label">LogLevel</div>
-          <b-form-select v-model="logLevelSelected" :options="logLevelOptions" size="sm" class="wx-debug-weex-select"></b-form-select>
+          <b-form-select v-model="logLevelSelected" data-v-step="2" :options="logLevelOptions" size="sm" class="wx-debug-weex-select"></b-form-select>
         </div>
       </div>
       <div class="wx-debug-weex-row">
@@ -131,4 +132,5 @@
           </div>
       </div>
     </b-modal>
+    <v-tour name="miniappTour" :steps="steps" :callbacks="tourCallBack"></v-tour>
 </div>
diff --git a/packages/@weex/plugins/debug/frontend/src/views/weex/weex.scss b/packages/@weex/plugins/debug/frontend/src/views/weex/weex.scss
@@ -11,18 +11,24 @@
   align-items: center;
   z-index: 1030;
   border-left: 1px solid #ddd;
+  [data-v-step="5"] {
+    position: absolute;
+    top: 0;
+    right: 150px;
+    width: 0;
+    height:0;
+  }
 }
 .wx-debug-weex-advance {
   height: 0;
-  overflow: hidden;
   width: 100%;
-  z-index: 999;
   background: #fff;
   padding: 0 20px;
   transition: all .2s ease;
   box-shadow: -1px -4px 15px 1px #ddd inset;
+  z-index: 1;
   &.active {
-    height: 270px;
+    height: 280px;
   }
   .button-group {
     display: flex;
@@ -107,16 +113,16 @@
   background: #f9f9f9;
   position: relative;
   display: flex;
-  z-index: 999;
+  z-index: 9;
 }
 .wx-debug-weex-inspector {
   width: 100%;
   flex: 1;
   display: flex;
-  background: url(../../assets/img/ajax.gif) center center no-repeat;
+  background: url(../../assets/img/ajax.gif) center center no-repeat #f0f0f0;
   background-size: 50px;
   margin-bottom: 40px;
-  z-index: 2;
+  z-index: 10;
 }
 .wx-debug-weex-setting {
   margin: 10px 0px;

diff --git a/packages/@weex/plugins/debug/frontend/src/views/weex/weex.ts b/packages/@weex/plugins/debug/frontend/src/views/weex/weex.ts
@@ -29,6 +29,7 @@ const Module = namespace('weex')
 })
 export class WeexComponent extends Vue {
   @State('webSocketHost') webSocketHost
+  @State('helpSetting') helpSetting
   @State('environmentSetting') environmentSetting
   @Module.Action('updateForm') updateForm
   @Module.Action('cleanEnvironment') cleanEnvironment
@@ -72,6 +73,60 @@ export class WeexComponent extends Vue {
     { value: 'warn', text: 'Warn' },
     { value: 'error', text: 'Error' }
   ]
+  tourCallBack: any = {
+    onNextStep: this.customNextStepCallback,
+    onPreviousStep: this.customPreStepCallback,
+    onStop: this.customStopCallback
+  }
+  steps: any = [
+    {
+      target: '[data-v-step="1"]',  // We're using document.querySelector() under the hood
+      content: `点击这里可以控制<strong>JS Debug</strong>开关，开启后即可开始JS调试!`
+    },
+    {
+      target: '[data-v-step="2"]',
+      content: '点击这里可以选择Log日志等级'
+    },
+    {
+      target: '[data-v-step="3"]',
+      content: '进入调试页面后点击这里可以刷新Weex页面'
+    },
+    {
+      target: '[data-v-step="4"]',
+      content: '在这里可以输入你本地想访问的JSBundle文件，回车键跳转',
+      params: {
+        placement: 'bottom'
+      }
+    },
+    {
+      target: '[data-v-step="5"]',
+      content: '点击这里可以针对Weex运行环境进行配置',
+      params: {
+        placement: 'bottom'
+      }
+    },
+    {
+      target: '[data-v-step="6"]',
+      content: '点击这里可以对文件进行Mock替换',
+      params: {
+        placement: 'bottom'
+      }
+    },
+    {
+      target: '[data-v-step="7"]',
+      content: '点击这里可以让环境配置生效',
+      params: {
+        placement: 'bottom'
+      }
+    },
+    {
+      target: '[data-v-step="8"]',
+      content: '点击这里重置环境',
+      params: {
+        placement: 'bottom'
+      }
+    }
+  ]
   historyLatestUrl: string = ''
   appVersion: string = ''
   userAgent: string = ''
@@ -145,9 +200,22 @@ export class WeexComponent extends Vue {
   set jsservice (value: string) {
     this.updateWeexEnvironment('jsservice', value)
   }
+
+  @Watch('helpSetting')
+  test (n, o) {
+    if (n) {
+      this.$tours['miniappTour'].start()
+    } else {
+      this.$tours['miniappTour'].stop()
+    }
+  }
+
   mounted () {
     this.initWebSocket()
     this.$store.commit(types.UPDATE_CHANNEL_ID, this.channelId)
+    if (!localStorage.getItem('hasBeenTour')) {
+      this.$store.commit(types.UPDATE_HELP_SETTING, true)
+    }
   }
 
   destroyed () {
@@ -399,4 +467,22 @@ export class WeexComponent extends Vue {
       this.editorShow = true
     }, 200)
   }
+
+  customNextStepCallback (currentStep) {
+    if (currentStep === 4) {
+      this.$store.commit(types.UPDATE_ENVIRONMENT_SETTING, true)
+    }
+  }
+
+  customPreStepCallback (currentStep) {
+    // if (currentStep === 5) {
+    //   this.$store.commit(types.UPDATE_ENVIRONMENT_SETTING, true)
+    // }
+  }
+
+  customStopCallback () {
+    localStorage.setItem('hasBeenTour', 'true')
+    this.$store.commit(types.UPDATE_ENVIRONMENT_SETTING, false)
+    this.$store.commit(types.UPDATE_HELP_SETTING, false)
+  }
 }