github.com/v2pro/plz@v0.0.0-20221028024117-e5f9aec5b631/witch/webroot/ide.html (about)

     1  <script type="text/x-template" id="ide-template">
     2      <div>
     3          <el-menu ref="menu" default-active="1" :collapse="isCollapse"
     4                   style="position:fixed; _position:absolute; top:8px; z-index:999">
     5              <el-menu-item index="1" @click="switchView('log')">
     6                  <i class="el-icon-document"></i>
     7                  <span slot="title">Log</span>
     8              </el-menu-item>
     9              <el-menu-item index="2" @click="switchView('state')">
    10                  <i class="el-icon-share"></i>
    11                  <span slot="title">State</span>
    12              </el-menu-item>
    13              <el-menu-item index="3" @click="switchView('metrics')">
    14                  <i class="el-icon-view"></i>
    15                  <span slot="title">Metrics</span>
    16              </el-menu-item>
    17              <el-menu-item index="4" @click="scrollToTop()">
    18                  <i class="el-icon-upload2"></i>
    19                  <span slot="title">Back</span>
    20              </el-menu-item>
    21          </el-menu>
    22          <div class="main">
    23              <log-viewer v-show="currentView == 'log'"></log-viewer>
    24              <state-viewer ref="stateViewer" v-show="currentView == 'state'"></state-viewer>
    25          </div>
    26      </div>
    27  </script>
    28  <script>
    29      Vue.component('ide', {
    30          template: '#ide-template',
    31          data: function () {
    32              return {
    33                  isCollapse: false,
    34                  currentView: 'log'
    35              }
    36          },
    37          methods: {
    38              switchView: function(view) {
    39                  this.currentView = view;
    40              },
    41              scrollToTop: function() {
    42                  window.scrollTo(0, 0);
    43              }
    44          }
    45      })
    46  </script>