packages/@weex/plugins/debug/frontend/src/views/weex/weex.html

<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">

      </span>
      {{$t('weexDebugPage.environmentSetting')}}
    </div>
    <div class="row">
      <div class="col">
        <div class="label">
          <span>
              WorkerJS
          </span>
          <small v-html="$t('weexDebugPage.workerJsDesc')"></small>
        </div>
        <input v-model="workerjs" type="text" placeholder="http://">
        <span class="iconfont icon-mock" :title="$t('weexDebugPage.mockTips')" @click="toggleEditor('workerjs')"  data-v-step="6"></span>
      </div>
      <div class="col">
        <div class="label">
            <span>JSService</span>
            <small v-html="$t('weexDebugPage.jsServiceDesc')"></small>
        </div>
        <input v-model="jsservice" type="text" placeholder="http://">
        <span class="iconfont icon-mock" :title="$t('weexDebugPage.mockTips')" @click="toggleEditor('jsservice')"></span>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="label">
          <span>DependenceJS</span>
          <small v-html="$t('weexDebugPage.dependenceJsDesc')"></small>
        </div>
        <input v-model="dependencejs" type="text" placeholder="http://">
        <span class="iconfont icon-mock" :title="$t('weexDebugPage.mockTips')" @click="toggleEditor('dependencejs')"></span>
      </div>
      <div class="col">
        <div class="label">
          <span>
              JSFramework
          </span>
          <small v-html="$t('weexDebugPage.jsFrameworkDesc')"></small>
        </div>
        <input v-model="jsframework" type="text" placeholder="http://">
        <span class="iconfont icon-mock" :title="$t('weexDebugPage.mockTips')" @click="toggleEditor('jsframework')"></span>
      </div>
    </div>
    <div class="row">
      <div class="button-group">
          <b-button variant="outline-success" size="sm" @click="activeWeexEnvironmentSetting()" data-v-step="7">{{$t('weexDebugPage.environmentSettingOkDesc')}}</b-button>
          <b-button variant="outline-danger" size="sm" @click="cleanWeexEnvironmentSetting()" data-v-step="8">{{$t('weexDebugPage.environmentSettingCancelDesc')}}</b-button>
      </div>
    </div>
  </div>
  <div class="wx-debug-weex-menu">
    <div class="wx-debug-weex-container" fluid>

      <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" data-v-step="4">
          <span class="iconfont icon-huifu" @click="restore($event)" :title="$t('weexDebugPage.restoreDesc')"></span>
          <span class="iconfont icon-icon" @click="reload($event)" :title="$t('weexDebugPage.reloadDesc')" data-v-step="3"></span>
        </div>
        <div class="wx-debug-weex-col info">
          <div class="label">{{$t('weexDebugPage.appInfo')}}</div>
          <span :title="userAgent">{{userAgent}}</span>
        </div>
        <div class="wx-debug-weex-col switch">
          <div class="label">{{$t('weexDebugPage.jsDebug')}}</div>
          <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">{{$t('weexDebugPage.logLevel')}}</div>
          <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">
        <div class="wx-debug-weex-col navigation-button">
          <div class="navigation-selection">
            <div class="text">{{historyLatestUrl}}</div>
            <div class="navigation-selection-items">
              <li v-for="(item, index) in historys" :key="index" @click="navigator(item.url, item.env)" :title="item.url">{{item.url}}
                <span>{{item.times > 99 ? '99+': item.times}}</span>
              </li>
            </div>
            <span class="iconfont icon-xiala"></span>
          </div>
          <b-button variant="outline-danger" size="sm" @click="cleanHistory()">{{$t('weexDebugPage.clearHistory')}}</b-button>
        </div>
        <div class="wx-debug-weex-col info">
          <div class="label" :title="appVersion">{{$t('weexDebugPage.sdkVersion')}}</div>
          <span>{{appVersion}}
          </span>
        </div>
        <div class="switch wx-debug-weex-col">
          <div class="label">{{$t('weexDebugPage.network')}}</div>
          <toggle-button :value="networkStatus" @change="handleNetwork($event)" color="#f37327" :width="50" :height="24" :sync="true"
            :labels="true" />
        </div>
        <div class="wx-debug-weex-col select">
          <div class="label">{{$t('weexDebugPage.elementMode')}}</div>
          <b-form-select v-model="elementModeSelected" :options="elementModeOptions" size="sm" class="wx-debug-weex-select"></b-form-select>
        </div>
      </div>
    </div>
  </div>
  <div class="wx-debug-weex-inspector">
    <b-embed type="iframe" aspect="none" :src="inspectorUrl"></b-embed>
  </div>
  <b-modal hide-backdrop v-model="modalShow" size="lg" hide-footer hide-title class="wx-debug-weex-modal">
      <div>
        <monacoeditor
        v-if="editorShow" 
        height = "500"
        theme = "vs"
        :srcPath = "editorSrcPath"
        :code="mockCode"
        :editorOptions="editorOptions"
        @mounted="onMounted"
        ></monacoeditor>
        <div class="footer">
            <div class="button-group">
                <b-button variant="outline-success" size="sm" @click="mockFile(mockCode)">{{$t('weexDebugPage.generatorFile')}}</b-button>
            </div>
          </div>
      </div>
    </b-modal>
    <b-modal hide-backdrop v-model="bundlesModalShow" id="bundle" size="lg" hide-footer hide-title class="wx-debug-weex-modal">
      <div class="bundle-list">
        <div v-if="bundles.length === 0" class="nopage">{{$t('weexDebugPage.noPages')}}</div>
        <a class="bundle-item" target="_blank" :href="item.output" v-for="(item, index) in bundles" :key="index">
          <qrcode :value="item.output" :title="item.output" :size="100"></qrcode>
          <div class="bundle-title">
            {{item.entry.slice(item.entry.lastIndexOf('/') + 1)}}
          </div>
        </a>
      </div>
    </b-modal>
    <v-tour name="miniappTour" :steps="steps" :options="tourOptions" :callbacks="tourCallBack"></v-tour>
</div>