oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/page/components/bottomTools.vue

@@ -0,0 +1,933 @@
+<template>
+  <view
+    v-if="isShow"
+    class="bottomTools"
+    :style="{
+      'padding-bottom': pb
+    }"
+  >
+    <!-- Error -->
+    <template v-if="tabTitle == 'Error'">
+      <view class="miniBtn mr warn" @click="emptyLogs('error')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+      <btnTabs :list="errorTypeList" :value="errorTypeIndex" @indexChange="errorTypeIndexChange" />
+    </template>
+
+    <!-- Console -->
+    <template v-if="tabTitle == 'Console'">
+      <view class="miniBtn mr warn" @click="emptyLogs('console')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+      <btnTabs :list="consoleTypeList" :value="consoleTypeListIndex" @indexChange="consoleTypeIndexChange" />
+    </template>
+
+    <!-- Network -->
+    <template v-if="tabTitle == 'Network'">
+      <view class="miniBtn mr warn" @click="emptyLogs('network')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+      <MenuBtn :list="networkFilterType" :value="networkTypeListIndex" @indexChange="networkTypeIndexChange" title="筛选:" />
+      <view class="mr"></view>
+      <RequestSpeedLimit />
+      <view class="mr"></view>
+      <RequestTimeoutMock />
+    </template>
+
+    <!-- Pages -->
+    <template v-if="tabTitle == 'Pages'">
+      <view class="miniBtn mr primary" @click="goPage">
+        <text class="miniBtnText">跳转页面</text>
+      </view>
+    </template>
+
+    <!-- Logs -->
+    <template v-if="tabTitle == 'Logs'">
+      <view class="miniBtn mr warn" @click="emptyLogs('logs')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+    </template>
+
+    <!-- Storage -->
+    <template v-if="tabTitle == 'Storage'">
+      <view class="miniBtn mr warn" @click="emptyLogs('storage')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+      <!-- #ifdef H5 -->
+      <btnTabs :list="storageFilterTypeList" :value="storageTypeListIndex" @indexChange="storageTypeIndexChange" />
+      <!-- #endif -->
+      <view class="miniBtn primary ml" @click="addStorage">
+        <text class="miniBtnText">新增数据+</text>
+      </view>
+    </template>
+
+    <!-- UniBus -->
+    <template v-if="tabTitle == 'UniBus'">
+      <view class="miniBtn mr warn" @click="emptyLogs('UniBus')">
+        <text class="miniBtnText">清空 x</text>
+      </view>
+      <btnTabs :list="busFilterType" :value="busTypeListIndex" @indexChange="busTypeIndexChange" />
+    </template>
+
+    <!-- FileSys -->
+    <template v-if="tabTitle == 'FileSys'">
+      <!-- #ifdef APP-PLUS || MP-WEIXIN -->
+      <view class="fileSysTopRow">
+        <scroll-view scroll-x class="dirList">
+          <view class="dirScrollItem">
+            <text class="dirName" style="color: #999" @click="$emit('goChildDir', '_goIndex_0')">
+              {{ options.fileSysDirType }}
+            </text>
+            <text class="delimiter">/</text>
+            <view v-for="(item, index) in options.fileSysDirList" :key="index" class="dirItem">
+              <text v-if="index != 0" class="delimiter">/</text>
+              <text class="dirName" @click="$emit('goChildDir', '_goIndex_' + (index + 1))">
+                {{ item }}
+              </text>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="miniBtn ml warn fileSysClearBtn" @click="emptyFolder">
+          <text class="miniBtnText">清空 x</text>
+        </view>
+      </view>
+      <view class="fileSysBottomRow">
+        <!-- #ifdef APP-PLUS -->
+        <btnTabs :list="dirTypeList" :value="fileTypeListIndex" @indexChange="$emit('changeFileDirType', dirTypeList[$event].type)" />
+        <view style="width: 20rpx"></view>
+        <!-- #endif -->
+        <view class="miniBtn primary" @click="createDir">
+          <text class="miniBtnText">新建文件(夹)</text>
+        </view>
+      </view>
+      <!-- #endif -->
+    </template>
+
+    <!-- JsRunner -->
+    <template v-if="tabTitle == 'JsRunner'">
+      <view class="jsRunnerTools">
+        <view class="runOptions">
+          <view class="radiusList">
+            <text class="runType">运行环境:</text>
+            <radio-group @change="jsRunType = $event.detail.value" class="radiusList" style="display: flex; flex-direction: row">
+              <view v-for="(item, index) in jsRunTypeList" :key="index" class="radiusItem" @click="jsRunType = item">
+                <radio class="radiusRadio" :value="item" :checked="jsRunType == item" color="#3b82f6" />
+                <text
+                  class="radiusText"
+                  :style="{
+                    color: jsRunType == item ? '#3b82f6' : '#333'
+                  }"
+                >
+                  {{ item }}
+                </text>
+              </view>
+            </radio-group>
+          </view>
+          <view class="hisEmpty" @click="$emit('emptyCodeHis')" v-if="options.codeHisLength > 0">
+            <image class="hisEmptyIcon" src="../static/delete.png" />
+            <text class="hisEmptyText">清空记录</text>
+          </view>
+          <view class="logList" @click="showHisCode">
+            <text class="hisText">历史代码</text>
+            <image class="unfold" src="../static/unfold.png" />
+          </view>
+        </view>
+        <view class="code">
+          <textarea v-model="waitSendCode" class="codeInput" placeholder="js code ..." maxlength="-1" />
+          <view class="codeSend" @click="runJs">
+            <text class="codeSendText">run</text>
+          </view>
+        </view>
+      </view>
+    </template>
+
+    <!-- Vuex -->
+    <template v-if="tabTitle == 'Vuex'">
+      <btnTabs :list="stateTypeList" :value="stateTypeListIndex" @indexChange="stateTypeIndexChange" />
+    </template>
+
+    <codeHisPicker ref="codeHisPicker" />
+  </view>
+</template>
+<script>
+import devCache from '../../core/libs/devCache'
+import appDelDir from './libs/appDelDir'
+import btnTabs from './ui/btnTabs.vue'
+import codeHisPicker from './ui/codeHisPicker.vue'
+import MenuBtn from './ui/menuBtn.vue'
+import RequestSpeedLimit from './ui/requestSpeedLimit.vue'
+import RequestTimeoutMock from './ui/requestTimeoutMock.vue'
+import devUi from '../../core/libs/devUi.js'
+export default {
+  components: {
+    btnTabs,
+    codeHisPicker,
+    MenuBtn,
+    RequestSpeedLimit,
+    RequestTimeoutMock
+  },
+  props: {
+    /**
+     * 列表索引
+     */
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * 当前标题
+     */
+    tabTitle: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 配置项
+     */
+    options: {
+      type: Object,
+      default: () => ({
+        errorFilterType: '',
+        consoleFilterType: '',
+        networkFilterType: '',
+        busFilterType: '',
+        fileSysDirList: [],
+        fileSysDirType: '',
+        storageType: ''
+      })
+    },
+    /**
+     * 是否渲染
+     */
+    isShow: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Vuex变量类型
+     */
+    stateType: {
+      type: String,
+      default: 'vuex'
+    }
+  },
+  data() {
+    const sys = uni.getSystemInfoSync()
+    const safeAreaBottom = (sys.safeArea && sys.safeArea.bottom) || sys.windowHeight
+    const safeBottomPx = Math.max((sys.windowHeight || 0) - safeAreaBottom, 0)
+    // 底部工具栏高度至少覆盖系统安全区，避免被手势横线遮挡。
+    let pb = `${Math.max(safeBottomPx, 8)}px`
+    let jsRunTypeList = []
+    // #ifdef H5
+    jsRunTypeList = ['h5']
+    // #endif
+    // #ifdef APP-PLUS
+    jsRunTypeList = ['webview']
+    // #endif
+    return {
+      /**
+       * 底部边距
+       */
+      pb,
+      /**
+       * 错误类型列表
+       */
+      errorTypeList: [
+        { title: '全部', type: '' },
+        { title: 'error', type: 've' },
+        { title: 'warn', type: 'vw' },
+        { title: 'jsError', type: 'oe' },
+        { title: 'unknown', type: 'n' }
+      ],
+      /**
+       * console过滤类型
+       */
+      consoleTypeList: [
+        { title: '全部', type: '' },
+        { title: 'log', type: 'log' },
+        { title: 'info', type: 'info' },
+        { title: 'warn', type: 'warn' },
+        { title: 'error', type: 'error' }
+      ],
+      /**
+       * 请求过滤类型
+       */
+      networkFilterType: [
+        { title: '全部请求', type: '', msg: '不使用筛选' },
+        { title: '请求失败', type: '请求失败', msg: '仅展示请求失败的记录' },
+        { title: '1s+', type: '1s+', msg: '仅展示响应超过1秒的记录' },
+        { title: '5s+', type: '5s+', msg: '仅展示响应超过5秒的记录' },
+        { title: '10s+', type: '10s+', msg: '仅展示响应超过10秒的记录' },
+        { title: '500KB+', type: '500KB+', msg: '仅展示响应内容超过500KB的记录' },
+        { title: '1MB+', type: '1MB+', msg: '仅展示响应内容超过1MB的记录' },
+        { title: 'get', type: 'get', msg: '仅展示get请求' },
+        { title: 'post', type: 'post', msg: '仅展示post请求' },
+        { title: 'other', type: 'other', msg: '除了get和post的其他请求' }
+      ],
+      /**
+       * uni bus 过滤类型
+       */
+      busFilterType: [
+        { title: '全部', type: '' },
+        { title: 'on', type: 'on' },
+        { title: 'once', type: 'once' },
+        { title: 'emit', type: 'emit' },
+        { title: 'off', type: 'off' }
+      ],
+      /**
+       * 文件类型
+       */
+      dirTypeList: [
+        { title: '_doc', type: 'PRIVATE_DOC' },
+        { title: '_www', type: 'PRIVATE_WWW' },
+        { title: '公共文档', type: 'PUBLIC_DOCUMENTS' },
+        { title: '公共下载', type: 'PUBLIC_DOWNLOADS' }
+      ],
+      /**
+       * 缓存类型
+       */
+      storageFilterTypeList: [
+        { title: 'localStorage', type: 'localStorage' },
+        { title: 'sessionStorage', type: 'sessionStorage' },
+        { title: 'cookie', type: 'cookie' }
+      ],
+      /**
+       * 等待执行的js代码
+       */
+      waitSendCode: '',
+      /**
+       * js运行类型
+       */
+      jsRunType: jsRunTypeList[0],
+      jsRunTypeList,
+      /**
+       * Vuex变量类型
+       */
+      stateTypeList: [
+        { title: 'vuex', type: 'vuex' },
+        { title: 'pinia', type: 'pinia' },
+        { title: 'globalData', type: 'globalData' }
+      ]
+    }
+  },
+  computed: {
+    /**
+     * 错误筛选分类index
+     */
+    errorTypeIndex() {
+      return this.errorTypeList.findIndex((x) => x.type == this.options.errorFilterType)
+    },
+    /**
+     * 日志分类索引
+     */
+    consoleTypeListIndex() {
+      return this.consoleTypeList.findIndex((x) => x.type == this.options.consoleFilterType)
+    },
+    /**
+     * 网络筛选索引
+     */
+    networkTypeListIndex() {
+      return this.networkFilterType.findIndex((x) => x.type == this.options.networkFilterType)
+    },
+    /**
+     * bus分类索引
+     */
+    busTypeListIndex() {
+      return this.busFilterType.findIndex((x) => x.type == this.options.busFilterType)
+    },
+    /**
+     * 文件分类索引
+     */
+    fileTypeListIndex() {
+      return this.dirTypeList.findIndex((x) => x.type == this.options.fileSysDirType)
+    },
+    /**
+     * 缓存类型索引
+     */
+    storageTypeListIndex() {
+      return this.storageFilterTypeList.findIndex((x) => x.type == this.options.storageType)
+    },
+    /**
+     * Vuex变量类型
+     */
+    stateTypeListIndex() {
+      return this.stateTypeList.findIndex((x) => x.type == this.stateType)
+    },
+    panelExtraBottomPx() {
+      let h = 70
+      if (this.tabTitle == 'JsRunner') {
+        h = 210
+      } else if (this.tabTitle == 'FileSys') {
+        h = 120
+      }
+      const safeBottomPx = this.getSafeBottomPx()
+      return `${h + safeBottomPx}px`
+    }
+  },
+  watch: {
+    panelExtraBottomPx: {
+      handler(v) {
+        this.$emit('update:panelExtraBottomPx', v)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getSafeBottomPx() {
+      try {
+        const sys = uni.getSystemInfoSync()
+        const safeAreaBottom = (sys.safeArea && sys.safeArea.bottom) || sys.windowHeight || 0
+        return Math.max((sys.windowHeight || 0) - safeAreaBottom, 0)
+      } catch (e) {
+        return 0
+      }
+    },
+    /**
+     * 过滤类型改变
+     */
+    filterTypeChange(type) {
+      this.$emit('filterTypeChange', type)
+    },
+    /**
+     * 错误类型索引改变
+     */
+    errorTypeIndexChange(e) {
+      this.filterTypeChange(this.errorTypeList[e].type)
+    },
+    /**
+     * 日志分类索引改变
+     */
+    consoleTypeIndexChange(e) {
+      this.filterTypeChange(this.consoleTypeList[e].type)
+    },
+    /**
+     * 网络状态筛选改变事件
+     */
+    networkTypeIndexChange(e) {
+      this.filterTypeChange(this.networkFilterType[e].type)
+    },
+    /**
+     * bus筛选改变事件
+     */
+    busTypeIndexChange(e) {
+      this.filterTypeChange(this.busFilterType[e].type)
+    },
+    /**
+     * 文件分类改变事件
+     */
+    fileTypeIndexChange(e) {
+      this.$emit('changeFileDirType', this.dirTypeList[e].type)
+    },
+    /**
+     * 缓存类型改变事件
+     */
+    storageTypeIndexChange(e) {
+      this.$emit('changeStorageType', this.storageFilterTypeList[e].type)
+    },
+    /**
+     * Vuex变量类型改变事件
+     */
+    stateTypeIndexChange(e) {
+      this.$emit('changeStateType', this.stateTypeList[e].type)
+    },
+    /**
+     * 清空日志
+     */
+    emptyLogs(type) {
+      let that = this
+      let title = {
+        error: '报错记录',
+        console: 'console',
+        network: '请求日志',
+        logs: 'Logs',
+        UniBus: 'UniBus',
+        storage: 'Storage'
+      }
+      // #ifdef H5
+      if (type == 'storage') {
+        title[type] = this.options.storageType
+      }
+      // #endif
+
+      devUi.showModal({
+        title: '警告',
+        content: `是否确认清空${title[type]}全部数据？`,
+        success(e) {
+          if (e.confirm) {
+            devUi.showLoading({
+              title: '处理中...'
+            })
+
+            let ms = 500
+            if (type == 'error') {
+              devCache.clearItem('errorReport')
+            } else if (type == 'console') {
+              uni.$emit('devTools_delConsoleAll')
+            } else if (type == 'network') {
+              uni.$emit('devTools_delNetworkAll')
+            } else if (type == 'logs') {
+              devCache.clearItem('logReport')
+            } else if (type == 'UniBus') {
+              uni.$emit('devTools_delUniBusAll')
+            } else if (type == 'storage') {
+              that.delStorage()
+              ms = 2000
+            }
+
+            setTimeout(() => {
+              that.$emit('getPage')
+            }, ms + 500)
+            setTimeout(() => {
+              devUi.hideLoading()
+              devUi.showToast({
+                title: '清空成功！',
+                icon: 'success'
+              })
+            }, ms)
+          }
+        }
+      })
+    },
+    /**
+     * 清空全部缓存
+     */
+    delStorage() {
+      // #ifdef APP-PLUS
+      let keys = plus.storage.getAllKeys()
+      for (let i = 0; i < keys.length; i++) {
+        const key = String(keys[i])
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        uni.removeStorageSync(key)
+      }
+      // #endif
+
+      // #ifdef H5
+      if (this.options.storageType == 'localStorage') {
+        for (let i = 0; i < localStorage.length; i++) {
+          let key = String(localStorage.key(i))
+          if (key.indexOf('devTools_') == 0) {
+            continue
+          }
+          uni.removeStorageSync(key)
+        }
+      } else if (this.options.storageType == 'sessionStorage') {
+        for (let i = 0; i < sessionStorage.length; i++) {
+          let key = String(sessionStorage.key(i))
+          if (key.indexOf('devTools_') == 0) {
+            continue
+          }
+          sessionStorage.removeItem(key)
+        }
+      } else if (this.options.storageType == 'cookie') {
+        let keys = []
+        document.cookie.split(';').forEach((cookieStr) => {
+          const [name, value] = cookieStr.trim().split('=')
+          keys.push(name)
+        })
+        keys.map((k) => {
+          document.cookie = `${k}=;expires=` + new Date(new Date().getTime() + 200).toGMTString() + ';path=/'
+        })
+      }
+
+      // #endif
+
+      // #ifdef MP
+      let keyList = devCache.get('storage')
+      if (!keyList) keyList = []
+      for (let i = 0; i < keyList.length; i++) {
+        const key = keyList[i]
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        uni.removeStorageSync(key)
+      }
+      // #endif
+    },
+    /**
+     * 清空文件夹
+     */
+    emptyFolder() {
+      let that = this
+      if (that.options.fileSysDirType == 'PRIVATE_WWW') {
+        return devUi.showToast({
+          title: '该目录不可删除',
+          icon: 'none'
+        })
+      }
+      devUi.showModal({
+        title: '提示',
+        content: '是否确认清空全部文件?',
+        success(res) {
+          if (res.confirm) {
+            devUi.showLoading({
+              title: '清空中'
+            })
+            let path = ''
+            switch (that.options.fileSysDirType) {
+              case 'wx':
+                path = wx.env.USER_DATA_PATH
+                break
+              case 'PRIVATE_DOC':
+                path = '_doc'
+                break
+              case 'PUBLIC_DOCUMENTS':
+                path = '_documents'
+                break
+              case 'PUBLIC_DOWNLOADS':
+                path = '_downloads'
+                break
+              default:
+                break
+            }
+            // #ifdef APP-PLUS
+            appDelDir(path + '/', false)
+              .then(() => {
+                devUi.hideLoading()
+                devUi.showToast({
+                  title: '清空成功！',
+                  icon: 'success'
+                })
+                that.$emit('getPage')
+              })
+              .catch(() => {
+                devUi.hideLoading()
+                devUi.showToast({
+                  title: '清空失败！',
+                  icon: 'none'
+                })
+              })
+            // #endif
+            // #ifdef MP-WEIXIN
+            let fs = wx.getFileSystemManager()
+            fs.rmdir({
+              dirPath: path + '/',
+              recursive: true,
+              success() {
+                devUi.hideLoading()
+                devUi.showToast({
+                  title: '清空成功！',
+                  icon: 'success'
+                })
+                that.$emit('getPage')
+              },
+              fail() {
+                devUi.hideLoading()
+                devUi.showToast({
+                  title: '清空失败！',
+                  icon: 'none'
+                })
+              }
+            })
+            // #endif
+          }
+        }
+      })
+    },
+    /**
+     * 创建文件夹
+     */
+    createDir() {
+      let that = this
+      let menu = [
+        {
+          text: '新建文件',
+          click() {
+            that.$emit('editDirName', {
+              isEdit: false,
+              isDir: false
+            })
+          }
+        },
+        {
+          text: '新建文件夹',
+          click() {
+            that.$emit('editDirName', {
+              isEdit: false,
+              isDir: true
+            })
+          }
+        }
+      ]
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click()
+        }
+      })
+    },
+    /**
+     * 新增缓存
+     */
+    addStorage() {
+      uni.$emit('devTools_showAddStorageDialog')
+    },
+    /**
+     * 执行js
+     */
+    runJs() {
+      let that = this
+      if (this.waitSendCode == '') {
+        return devUi.showToast({
+          title: '请先输入需要执行的js代码',
+          icon: 'none'
+        })
+      } else {
+        let code = String(this.waitSendCode)
+        this.$emit('runJs', { code, type: that.jsRunType })
+        this.waitSendCode = ''
+      }
+    },
+    /**
+     * 获取历史代码运行记录
+     */
+    showHisCode() {
+      let that = this
+      let his = devCache.get('codeRunHis')
+      if (!his) his = []
+      if (his.length == 0) {
+        return devUi.showToast({
+          title: '暂无记录！',
+          icon: 'none'
+        })
+      }
+      that.$refs.codeHisPicker.show(his).then((res) => {
+        that.waitSendCode = res
+      })
+    },
+    /**
+     * 跳转指定页面
+     */
+    goPage() {
+      uni.$emit('devTools_showRouteDialog')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bottomTools {
+  position: fixed;
+  z-index: 3;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  border-top: 1px solid rgba(15, 23, 42, 0.1);
+  background-color: #f3f6fb;
+  padding-top: 10rpx;
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  row-gap: 8rpx;
+  box-shadow: 0 -8rpx 18rpx rgba(15, 23, 42, 0.06);
+  .mr {
+    margin-right: 10rpx;
+  }
+  .mt {
+    margin-left: 12rpx;
+  }
+  .ml {
+    margin-left: 10rpx;
+  }
+  .miniBtn {
+    height: 54rpx;
+    border-radius: 14rpx;
+    padding: 0 16rpx;
+    border: 1px solid #d5dde8;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+    &:active {
+      opacity: 0.88;
+    }
+    &.warn {
+      background-color: #fff5f5;
+      border-color: #fca5a5;
+      .miniBtnText {
+        color: #dc2626;
+      }
+      &:active {
+        background-color: #fee2e2;
+      }
+    }
+    &.primary {
+      background-color: #fff;
+      border-color: #d5dde8;
+    }
+    .miniBtnText {
+      font-size: 24rpx;
+      height: 54rpx;
+      line-height: 54rpx;
+      color: #475569;
+    }
+  }
+}
+.dirList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  height: 34rpx;
+  /* #ifndef APP-PLUS */
+  white-space: nowrap;
+  /* #endif */
+  .dirScrollItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 34rpx;
+  }
+  .dirItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .delimiter {
+    color: #999;
+    margin: 0 6rpx;
+    font-size: 24rpx;
+    line-height: 34rpx;
+  }
+  .dirName {
+    color: #333;
+    font-size: 24rpx;
+    line-height: 34rpx;
+    height: 34rpx;
+    padding: 0 6rpx;
+    background-color: rgba(148, 163, 184, 0.12);
+    border-radius: 8rpx;
+  }
+}
+.fileSysTopRow {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+.fileSysClearBtn {
+  flex-shrink: 0;
+}
+.fileSysBottomRow {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.jsRunnerTools {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .runOptions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 10rpx;
+    .radiusList {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .runType {
+        font-size: 24rpx;
+        line-height: 24rpx;
+        color: #333;
+      }
+      .radiusItem {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-left: 10rpx;
+        .radiusText {
+          font-size: 24rpx;
+          line-height: 24rpx;
+          color: #333;
+        }
+        .radiusRadio {
+          transform: scale(0.5);
+        }
+      }
+    }
+    .hisEmpty {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .hisEmptyIcon {
+        width: 16rpx;
+        height: 16rpx;
+      }
+      .hisEmptyText {
+        font-size: 24rpx;
+        margin-left: 5rpx;
+        color: #dc2626;
+      }
+    }
+    .logList {
+      // margin-right: 120rpx;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .hisText {
+        font-size: 24rpx;
+        color: #777;
+        line-height: 24rpx;
+        margin-right: 5rpx;
+      }
+      .unfold {
+        width: 24rpx;
+        height: 24rpx;
+      }
+    }
+  }
+  .code {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .codeInput {
+      width: calc(100% - 120rpx);
+      height: 100rpx;
+      font-size: 24rpx;
+      line-height: 28rpx;
+      color: #333;
+      padding: 10rpx;
+      background-color: #f8fafc;
+      border: 1px solid #e2e8f0;
+      border-radius: 15rpx;
+    }
+    .codeSend {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 15rpx;
+      border: 1px solid #3b82f6;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      .codeSendText {
+        color: #3b82f6;
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+    }
+    .codeSend:active {
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+.menuBtn {
+}
+</style>