oxy-uni-ui 2.1.1 → 2.1.2

package/devTools/page/components/bottomTools.vue

@@ -0,0 +1,1046 @@
+<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="@/devTools/page/static/delete.png"
+            />
+            <text class="hisEmptyText">清空记录</text>
+          </view>
+          <view
+            class="logList"
+            @click="showHisCode"
+          >
+            <text class="hisText">历史代码</text>
+            <image
+              class="unfold"
+              src="@/devTools/page/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>