oxy-uni-ui 2.1.0 → 2.1.2

package/devTools/page/components/main.vue

@@ -0,0 +1,1867 @@
+<template>
+  <view class="devTools">
+    <view
+      @click.stop
+      ref="panel"
+      class="panel"
+      :style="[panelStyle]"
+    >
+      <view class="head">
+        <scroll-view
+          :scroll-x="true"
+          class="tabList showScrollbars"
+          :class="tabList[tabIndex].canRefreshing ? 'tab-with-actions' : ''"
+          :show-scrollbar="false"
+        >
+          <view style="display: flex; flex-direction: row">
+            <view
+              v-for="(item, index) in tabList"
+              :key="index"
+              class="tabItem"
+              @click="tabIndex = index"
+            >
+              <view class="tabTextWrap">
+                <text
+                  class="tabText"
+                  :class="index == tabIndex ? 'active' : ''"
+                >
+                  {{ item.title }}
+                </text>
+                <text
+                  class="tabDesc"
+                  :class="index == tabIndex ? 'active' : ''"
+                >
+                  {{ item.desc }}
+                </text>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="headActions">
+          <view
+            v-if="tabList[tabIndex].canRefreshing"
+            class="headRefresh"
+            @click="getPage(true)"
+          >
+            <view class="line"></view>
+            <text
+              class="headRefreshIcon"
+              :class="tabList[tabIndex].isRefreshing ? 'refreshing' : ''"
+            >
+              &#8635;
+            </text>
+          </view>
+          <view
+            class="close"
+            @click="$devTools.hide()"
+          >
+            <view class="line"></view>
+            <text class="icon">×</text>
+          </view>
+        </view>
+      </view>
+
+      <mobileSwiperScroll
+        :scrollHeight="listHeight"
+        :tabIndex="tabIndex"
+        :tabList="tabList"
+        @tabIndexChange="tabIndex = $event"
+        ref="mobileSwiperScroll"
+      >
+        <template #default="{ item, index }">
+          <template v-if="item.title == 'Tools'">
+            <cell>
+              <tools
+                ref="tools"
+                @goOpenRequest="$refs.sendRequest.show()"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Error'">
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <errorItem
+                :item="_item"
+                :key="_index"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Console'">
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <consoleItem
+                :item="_item"
+                :key="_index"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Network'">
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <networkItem
+                :item="_item"
+                :key="_index"
+                @goSendRequest="$refs.sendRequest.show($event, true)"
+                @goOpenRequest="$refs.sendRequest.show($event)"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Storage'">
+            <cell>
+              <storageList ref="storageList" />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Pages'">
+            <cell>
+              <subTitleBar
+                :isOpen="item.isShowPages"
+                title="当前页面栈"
+                @click="pagesShowChange('isShowPages')"
+              />
+            </cell>
+            <cell>
+              <pages
+                ref="pages"
+                :isShow="item.isShowPages"
+              />
+            </cell>
+            <cell>
+              <view class="cellDivisionLine"></view>
+            </cell>
+            <cell>
+              <subTitleBar
+                :isOpen="item.isShowRouteList"
+                title="全部路由"
+                @click="pagesShowChange('isShowRouteList')"
+              />
+            </cell>
+            <template v-if="item.isShowRouteList">
+              <cell
+                v-for="_item in item.routeList"
+                :key="_item.path"
+              >
+                <routeItem :item="_item" />
+              </cell>
+            </template>
+            <cell>
+              <view class="cellDivisionLine"></view>
+            </cell>
+          </template>
+          <template v-if="item.title == 'Vuex'">
+            <cell>
+              <vuexList
+                ref="vuexList"
+                :stateType="tabList[tabList.findIndex((x) => x.title == 'Vuex')].stateType"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Logs'">
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <logItem
+                :item="_item"
+                :key="_index"
+              />
+            </cell>
+          </template>
+          <template v-if="item.title == 'Info'">
+            <cell>
+              <infoList ref="infoList" />
+            </cell>
+          </template>
+          <template v-if="item.title == 'UniBus'">
+            <cell>
+              <subTitleBar
+                :isOpen="item.isShowCount"
+                title="事件统计"
+                @click="pagesShowChange('isShowCount')"
+              />
+            </cell>
+            <template v-if="item.isShowCount">
+              <cell
+                v-for="_item in item.countList"
+                :key="_item.e"
+              >
+                <view
+                  class="eventItem"
+                >
+                  <view class="eventHead">
+                    <text class="eventName">name: {{ _item.e }}</text>
+                    <view
+                      class="eventActionBtn"
+                      @click.stop="busCountMenu(_item)"
+                    >
+                      <text class="eventActionText">更多</text>
+                    </view>
+                  </view>
+                  <view class="eventCount">
+                    <text
+                      v-if="item.filterType == '' || item.filterType == 'on'"
+                      class="eventCountItem"
+                    >
+                      on: {{ _item.on }}
+                    </text>
+                    <text
+                      v-if="item.filterType == '' || item.filterType == 'emit'"
+                      class="eventCountItem"
+                    >
+                      emit: {{ _item.emit }}
+                    </text>
+                    <text
+                      v-if="item.filterType == '' || item.filterType == 'once'"
+                      class="eventCountItem"
+                    >
+                      once: {{ _item.once }}
+                    </text>
+                    <text
+                      v-if="item.filterType == '' || item.filterType == 'off'"
+                      class="eventCountItem"
+                    >
+                      off: {{ _item.off }}
+                    </text>
+                  </view>
+                </view>
+              </cell>
+            </template>
+            <cell>
+              <view class="cellDivisionLine"></view>
+            </cell>
+            <cell>
+              <subTitleBar
+                :isOpen="item.isShowLog"
+                title="执行记录"
+                @click="pagesShowChange('isShowLog')"
+              />
+            </cell>
+            <template v-if="item.isShowLog">
+              <cell
+                v-for="(_item, _index) in item.logList"
+                :key="_index"
+              >
+                <view
+                  class="eventLogItem"
+                >
+                  <text class="logText">{{ _item.e }}</text>
+                  <view class="eventLogFoot">
+                    <text class="logTime">{{ _item.date }}</text>
+                    <view
+                      class="eventActionBtn"
+                      @click.stop="busLogMenu(_item)"
+                    >
+                      <text class="eventActionText">更多</text>
+                    </view>
+                  </view>
+                </view>
+              </cell>
+            </template>
+            <cell>
+              <view class="cellDivisionLine"></view>
+            </cell>
+          </template>
+          <template v-if="item.title == 'FileSys'">
+            <!-- #ifdef APP-PLUS || MP-WEIXIN -->
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <fileSysItem
+                :item="_item"
+                :key="_index"
+                :dirType="item.dirType"
+                :dirList="item.dirList"
+                @goChildDir="goChildDir"
+                @getPage="getPage"
+                @editDirName="editDirName"
+                @openEditFileDialog="($event) => $refs.textFileEditDialog.show($event)"
+              />
+            </cell>
+            <cell v-if="item.data.length == 0 || (item.data.length == 1 && item.data[0].type == 'back')">
+              <view class="devEmpty">
+                <text class="devEmptyText">空空如也</text>
+              </view>
+            </cell>
+            <!-- #endif -->
+            <!-- #ifndef APP-PLUS || MP-WEIXIN -->
+            <cell>
+              <view class="listCenterView">
+                <text class="listCenterText">该平台无FileSys文件管理</text>
+              </view>
+            </cell>
+            <!-- #endif -->
+          </template>
+          <template v-if="item.title == 'Setting'">
+            <cell>
+              <settingView ref="settingView" />
+            </cell>
+          </template>
+
+          <template v-if="item.title == 'JsRunner'">
+            <!-- #ifdef APP-PLUS || H5 -->
+            <cell
+              v-for="(_item, _index) in item.data"
+              :key="_index"
+            >
+              <jsRunnerItem
+                :item="_item"
+                :key="_index"
+              />
+            </cell>
+            <cell v-if="item.data.length == 0">
+              <view class="devEmpty">
+                <text class="devEmptyText">动态执行JS代码</text>
+              </view>
+            </cell>
+            <!-- #endif -->
+            <!-- #ifndef APP-PLUS || H5 -->
+            <cell>
+              <view class="listCenterView">
+                <text class="listCenterText">该平台不支持该功能</text>
+              </view>
+            </cell>
+            <!-- #endif -->
+          </template>
+
+          <template v-if="item.isLongList">
+            <cell v-if="!item.isLoadAll && item.data.length == 30">
+              <view
+                class="loadAll"
+                @click="showListAll"
+              >
+                <image
+                  class="loadAllFold"
+                  src="@/devTools/page/static/unfold.png"
+                />
+                <text class="loadAllText">展示全部数据</text>
+                <image
+                  class="loadAllFold"
+                  src="@/devTools/page/static/unfold.png"
+                />
+              </view>
+            </cell>
+
+            <cell v-if="item.type == 'success' && item.data.length == 0">
+              <view class="devEmpty">
+                <text class="devEmptyText">空空如也</text>
+              </view>
+            </cell>
+
+            <cell v-if="(item.type == 'loading' || item.type == 'loading') && item.data.length == 0">
+              <view class="devEmpty">
+                <text class="devEmptyText">加载中</text>
+              </view>
+            </cell>
+          </template>
+
+          <cell>
+            <view
+              :style="{
+                height: bottomToolsExtraBottomPx,
+              }"
+            ></view>
+          </cell>
+        </template>
+      </mobileSwiperScroll>
+    </view>
+
+    <bottomTools
+      :tabIndex="tabIndex"
+      :tabTitle="tabTitle"
+      :options="bottomToolsOptions"
+      :isShow="isShowBottomTools && !isValueViewerOpen"
+      @update:panelExtraBottomPx="bottomToolsExtraBottomPx = $event"
+      :stateType="tabList[tabList.findIndex((x) => x.title == 'Vuex')].stateType"
+      @filterTypeChange="onFilterTypeChange"
+      @goChildDir="goChildDir"
+      @changeFileDirType="changeFileDirType"
+      @changeStorageType="changeStorageType"
+      @editDirName="editDirName"
+      @getPage="getPage"
+      @runJs="runJs"
+      @emptyCodeHis="emptyCodeHis"
+      @changeStateType="changeStateType"
+    />
+
+    <editDialog ref="editDialog" />
+
+    <sendRequest ref="sendRequest" />
+
+    <textFileEditDialog
+      ref="textFileEditDialog"
+      @getPage="getPage"
+    />
+
+    <createDir
+      ref="createDir"
+      :dirList="fileSysTab.dirList"
+      :dirType="fileSysTab.dirType"
+      @getPage="getPage"
+    />
+
+    <addStorage
+      :storageType="storageTab.storageType"
+      @getPage="getPage"
+    />
+
+    <routeDialog />
+    <DevToolsUiHost />
+  </view>
+</template>
+<script>
+import init from "../../index";
+import consoleItem from "./listItem/consoleItem.vue";
+import infoList from "./listItem/infoList.vue";
+import storageList from "./listItem/storageList.vue";
+import tools from "./listItem/tools.vue";
+import vuexList from "./listItem/vuexList.vue";
+import animationControl from "./mixins/animationControl";
+import { timeFormat, timeFromNow } from "../../core/libs/timeFormat";
+import devCache from "../../core/libs/devCache";
+import networkItem from "./listItem/networkItem.vue";
+import pages from "./listItem/pages.vue";
+import logItem from "./listItem/logItem.vue";
+import errorItem from "./listItem/errorItem.vue";
+import mobileSwiperScroll from "./ui/mobileSwiperScroll.vue";
+import subTitleBar from "./ui/subTitleBar.vue";
+import sendRequest from "./dialog/sendRequest.vue";
+import bottomTools from "./bottomTools.vue";
+import dirReader from "./libs/dirReader";
+import fileSysItem from "./listItem/fileSysItem.vue";
+import fileSize from "./libs/fileSize";
+import textFileEditDialog from "./dialog/textFileEditDialog.vue";
+import createDir from "./dialog/createDir.vue";
+import editDialog from "./dialog/editDialog.vue";
+import addStorage from "./dialog/addStorage.vue";
+import settingView from "./listItem/setting.vue";
+import mp from "./mixins/mp";
+import jsRunnerItem from "./listItem/jsRunnerItem.vue";
+import routeItem from "./listItem/routeItem.vue";
+import routeDialog from "./dialog/routeDialog.vue";
+import pageLinkList from "../../core/libs/pageLinkList.js";
+import devUi from "../../core/libs/devUi.js";
+import DevToolsUiHost from "../../components/DevToolsUiHost.vue";
+import h5Cell from "./ui/h5Cell.vue";
+
+export default {
+  mixins: [animationControl, mp],
+  components: {
+    mobileSwiperScroll,
+    consoleItem,
+    storageList,
+    vuexList,
+    tools,
+    infoList,
+    networkItem,
+    pages,
+    logItem,
+    errorItem,
+    subTitleBar,
+    sendRequest,
+    bottomTools,
+    fileSysItem,
+    textFileEditDialog,
+    createDir,
+    editDialog,
+    addStorage,
+    settingView,
+    jsRunnerItem,
+    routeItem,
+    routeDialog,
+    DevToolsUiHost,
+    cell: h5Cell,
+  },
+  data() {
+    return {
+      tabLoading: true,
+      isValueViewerOpen: false,
+      bottomToolsExtraBottomPx: "80px",
+      tabIndex: 0,
+      tabList: [
+        {
+          title: "Pages", //标题
+          desc: "页面路由",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          hasLoad: false,
+          isShowPages: true, //是否展示页面堆栈列表
+          isShowBottomTools: true, //显示底部工具栏
+          isShowRouteList: false, // 是否显示路由列表
+          routeList: [], //全部路由列表
+        },
+        {
+          title: "Error", //标题
+          desc: "异常告警",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          hasLoad: false,
+          isLongList: true, // 是否长列表
+          isLoadAll: false, //是否加载全部
+          filterType: "", //过滤类型
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Console", //标题
+          desc: "日志输出",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          hasLoad: false,
+          isLongList: true, // 是否长列表
+          isLoadAll: false, //是否加载全部
+          filterType: "", //过滤类型
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Network", //标题
+          desc: "请求抓包",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          hasLoad: false,
+          isLongList: true, // 是否长列表
+          isLoadAll: false, //是否加载全部
+          filterType: "", //过滤类型
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Storage", //标题
+          desc: "本地缓存",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          hasLoad: false,
+          storageType: "localStorage", //缓存类型默认为localStorage
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Vuex", //标题
+          desc: "状态管理",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          hasLoad: false,
+          stateType: "vuex", //全局变量类型 vuex pinia globalData
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Logs", //标题
+          desc: "运行日志",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          page: 0, //当前页码
+          hasLoad: false,
+          isLoadAll: false, //是否加载全部
+          isLongList: true, // 是否长列表
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "Info", //标题
+          desc: "设备信息",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          hasLoad: false,
+        },
+        {
+          title: "UniBus", //标题
+          desc: "事件总线",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          isShowCount: true,
+          countList: [],
+          isShowLog: false,
+          logList: [],
+          filterType: "", //过滤类型
+          hasLoad: false,
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "FileSys", //标题
+          desc: "文件系统",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          // #ifdef APP-PLUS
+          dirType: "PRIVATE_DOC", //文件类型 wx, PRIVATE_WWW, PRIVATE_DOC PUBLIC_DOCUMENTS PUBLIC_DOWNLOADS
+          // #endif
+          // #ifdef MP
+          dirType: "wx", //文件类型 wx, PRIVATE_WWW, PRIVATE_DOC
+          // #endif
+          data: [], //文件列表
+          dirList: [], //目录列表
+          hasLoad: false,
+          isShowBottomTools: true, //显示底部工具栏
+        },
+        {
+          title: "JsRunner", //标题
+          desc: "执行脚本",
+          canRefreshing: false, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          hasLoad: false,
+          // #ifdef APP-PLUS || H5
+          isShowBottomTools: true, //显示底部工具栏
+          // #endif
+        },
+        {
+          title: "Tools", //标题
+          desc: "常用工具",
+          hasLoad: false,
+        },
+        {
+          title: "Setting", //标题
+          desc: "面板配置",
+          canRefreshing: true, //是否允许下拉刷新
+          isRefreshing: false, //下拉刷新状态
+          refreshType: "waitPullUp", //刷新状态 'waitPullUp','waitRelease','refreshing'
+          type: "init", //列表状态
+          data: [], //数据条数
+          page: 0, //当前页码
+          hasLoad: false,
+        },
+      ],
+    };
+  },
+  watch: {
+    /**
+     * 监听tab改变事件
+     */
+    tabIndex(index) {
+      this.isValueViewerOpen = false;
+      const currentTab = this.tabList[index];
+      if (!currentTab) return;
+      // 这些 tab 在部分平台会随切换被销毁，回到该 tab 时需要强制刷新。
+      if (currentTab.title == "Storage" || currentTab.title == "Vuex" || currentTab.title == "Info" || currentTab.title == "Setting") {
+        this.getPage();
+        return;
+      }
+      if (!currentTab.hasLoad) {
+        this.getPage();
+      }
+    },
+  },
+  computed: {
+    /**
+     * 挂载dev对象
+     */
+    $devTools() {
+      return init;
+    },
+    fileSysTab() {
+      let tab = this.tabList.find((x) => x.title == "FileSys");
+      if (!tab) {
+        tab = { dirList: [], dirType: "" };
+      }
+      return tab;
+    },
+    storageTab() {
+      let tab = this.tabList.find((x) => x.title == "Storage");
+      if (!tab) {
+        tab = { storageType: "localStorage" };
+      }
+      return tab;
+    },
+    /**
+     * 面板高度
+     */
+    panelHeight() {
+      return Math.ceil(this.windowInfo.system.windowHeight * 0.6);
+    },
+    /**
+     * 滚动列表的高度
+     */
+    listHeight() {
+      return this.panelHeight - uni.upx2px(80) - 1;
+    },
+    /**
+     * 当前tab栏的标题
+     */
+    tabTitle() {
+      return this.tabList[this.tabIndex].title;
+    },
+    /**
+     * 获取底部栏需要的参数
+     */
+    bottomToolsOptions() {
+      let that = this;
+      const getTabItemByTitle = (title) => {
+        let i = that.tabList.findIndex((x) => x.title == title);
+        return that.tabList[i];
+      };
+      return {
+        errorFilterType: getTabItemByTitle("Error").filterType,
+        consoleFilterType: getTabItemByTitle("Console").filterType,
+        networkFilterType: getTabItemByTitle("Network").filterType,
+        busFilterType: getTabItemByTitle("UniBus").filterType,
+        fileSysDirList: getTabItemByTitle("FileSys").dirList,
+        fileSysDirType: getTabItemByTitle("FileSys").dirType,
+        storageType: getTabItemByTitle("Storage").storageType,
+        codeHisLength: getTabItemByTitle("JsRunner").data.length,
+      };
+    },
+    /**
+     * 是否显示底部工具栏
+     */
+    isShowBottomTools() {
+      // [1, 2, 3, 4, 5, 7, 9, 10].indexOf(tabIndex) != -1
+      let item = this.tabList[this.tabIndex];
+      return item.isShowBottomTools === true;
+    },
+    /**
+     * 面板样式
+     */
+    panelStyle() {
+      return {
+        height: this.panelHeight + "px",
+        "--devtools-panel-top": `calc(100vh - ${this.panelHeight}px)`,
+        "--devtools-panel-height": `${this.panelHeight}px`,
+        borderRadius: '24rpx 24rpx 0 0',
+        // #ifdef APP-PLUS
+        // APP-PLUS 的原动画逻辑不再用于弹窗模式
+        // #endif
+      }
+    },
+  },
+  mounted() {
+    let that = this;
+    this.getPage();
+
+    uni.$on("devTools_valueViewer_show", that.onValueViewerShow);
+    uni.$on("devTools_valueViewer_hide", that.onValueViewerHide);
+
+    // ! 刷新当前列表
+    uni.$on("devTools_listGetPage", () => {
+      that.getPage();
+    });
+
+    // ! 删除指定请求记录
+    uni.$on("devTools_delNetworkItemById", (id) => {
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Network");
+      let i = that.tabList[tabIndex].data.findIndex((x) => x.id == id);
+      if (i != -1) {
+        that.tabList[tabIndex].data.splice(i, 1);
+      }
+    });
+
+    // ! 删除日志
+    uni.$on("devTools_delLog", (item) => {
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Logs");
+      let i = that.tabList[tabIndex].data.findIndex((x) => x.date == item.date && x.t == item.t);
+      if (i != -1) {
+        that.tabList[tabIndex].data.splice(i, 1);
+      }
+    });
+
+    // ! 删除错误记录
+    uni.$on("devTools_delError", (item) => {
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Error");
+      let i = that.tabList[tabIndex].data.findIndex(
+        (x) => x.type == item.type && x.t == item.t && x.m == item.m && x.tr == item.tr && x.p == item.p
+      );
+      if (i != -1) {
+        that.tabList[tabIndex].data.splice(i, 1);
+      }
+    });
+
+    // ! 删除打印日志
+    uni.$on("devTools_delConsoleItem", (item) => {
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Console");
+      let i = that.tabList[tabIndex].data.findIndex((x) => {
+        let t = JSON.stringify(x.list);
+        return t == JSON.stringify(item.list) && x.time == item.time && x.page == item.page && x.type == item.type;
+      });
+      if (i != -1) {
+        that.tabList[tabIndex].data.splice(i, 1);
+      }
+    });
+
+    // !初始化Vuex，自动推断全局变量类型
+    let vIndex = that.tabList.findIndex((x) => x.title == "Vuex");
+    let vType = "globalData";
+    if (that.$store) {
+      vType = "vuex";
+    } else if (uni.Pinia || that.$pinia) {
+      vType = "pinia";
+    }
+    // console.log("vType", vType);
+    that.tabList[vIndex].stateType = vType;
+  },
+  beforeUnmount() {
+    uni.$off("devTools_valueViewer_show", this.onValueViewerShow);
+    uni.$off("devTools_valueViewer_hide", this.onValueViewerHide);
+  },
+  beforeDestroy() {
+    uni.$off("devTools_valueViewer_show", this.onValueViewerShow);
+    uni.$off("devTools_valueViewer_hide", this.onValueViewerHide);
+  },
+  methods: {
+    onValueViewerShow() {
+      this.isValueViewerOpen = true;
+    },
+    onValueViewerHide() {
+      this.isValueViewerOpen = false;
+    },
+    /**
+     * 加载列表
+     */
+    async getPage(notifySuccess = false) {
+      let that = this;
+      const index = Number(that.tabIndex);
+      let item = that.tabList[index];
+      if (item.isRefreshing) return;
+
+      await that.awaitNextTick();
+      // 等待渲染期间若已切换到其他 tab，放弃本次刷新，避免状态错乱。
+      if (index !== Number(that.tabIndex)) {
+        return;
+      }
+
+      if (item.title == "Storage") {
+        await that.refreshStorage({
+          notifySuccess,
+        });
+      } else if (item.title == "Vuex") {
+        await that.refreshVuex({
+          notifySuccess,
+        });
+      } else if (item.title == "Info") {
+        await that.refreshInfo({
+          notifySuccess,
+        });
+      } else if (item.title == "Pages") {
+        await that.getPages({
+          notifySuccess,
+        });
+      } else if (item.title == "Console") {
+        await that.getConsole({
+          notifySuccess,
+        });
+      } else if (item.title == "Network") {
+        await that.getNetwork({
+          notifySuccess,
+        });
+      } else if (item.title == "Logs") {
+        await that.getLogs({
+          notifySuccess,
+        });
+      } else if (item.title == "Error") {
+        await that.getError({
+          notifySuccess,
+        });
+      } else if (item.title == "UniBus") {
+        await that.getUniBus({
+          notifySuccess,
+        });
+      } else if (item.title == "FileSys") {
+        await that.getDirList({
+          notifySuccess,
+        });
+      } else if (item.title == "Setting") {
+        await that.refreshSetting({
+          notifySuccess,
+        });
+      }
+      that.tabList[index].hasLoad = true;
+    },
+    /**
+     * 等待渲染完成
+     */
+    awaitNextTick() {
+      let that = this;
+      return new Promise((yes) => {
+        // #ifdef APP-PLUS
+        setTimeout(() => {
+          yes();
+        }, 16);
+        // #endif
+        // #ifndef APP-PLUS
+        that.$nextTick(() => {
+          yes();
+        });
+        // #endif
+      });
+    },
+    /**
+     * 统一刷新收尾
+     */
+    finishRefresh(tabIndex, options = {}) {
+      const tab = this.tabList[tabIndex];
+      if (!tab) return;
+      const success = options.success !== false;
+      const notifySuccess = options.notifySuccess === true;
+      tab.isRefreshing = false;
+      tab.refreshType = success ? "success" : "error";
+      if (options.updateType) {
+        tab.type = success ? "success" : "error";
+      }
+      if (success && notifySuccess) {
+        devUi.showToast({
+          icon: "success",
+          title: "刷新成功",
+        });
+      }
+      setTimeout(() => {
+        if (tab.refreshType != "refreshing") {
+          tab.refreshType = "waitRelease";
+        }
+      }, 120);
+    },
+    /**
+     * 刷新setting数据
+     */
+    async refreshSetting(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Setting");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        const settingRef = that.$refs.settingView;
+        if (settingRef && typeof settingRef.getPage == "function") {
+          await settingRef.getPage();
+        }
+        that.finishRefresh(tabIndex, {
+          updateType: true,
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("refreshSetting error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+          updateType: true,
+        });
+      }
+    },
+    /**
+     * 隐藏弹窗
+     */
+    hide() {
+      init.hide();
+    },
+    /**
+     * 刷新缓存数据
+     */
+    async refreshStorage(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Storage");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        const storageRef = that.$refs.storageList;
+        if (!storageRef || typeof storageRef.getData != "function") {
+          that.finishRefresh(tabIndex, {
+            success: false,
+          });
+          return;
+        }
+        await storageRef.getData(that.tabList[tabIndex].storageType);
+        that.finishRefresh(tabIndex, {
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("refreshStorage error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+        });
+      }
+    },
+    /**
+     * 刷新vuex数据
+     */
+    async refreshVuex(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Vuex");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        await that.awaitNextTick();
+        const vuexRef = that.$refs.vuexList;
+        if (!vuexRef || typeof vuexRef.getData != "function") {
+          that.finishRefresh(tabIndex, {
+            success: false,
+          });
+          return;
+        }
+        await vuexRef.getData();
+        that.finishRefresh(tabIndex, {
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("refreshVuex error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+        });
+      }
+    },
+    /**
+     * 刷新pages
+     */
+    async getPages(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Pages");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        const pagesRef = that.$refs.pages;
+        if (pagesRef && typeof pagesRef.getData == "function") {
+          await pagesRef.getData();
+        }
+        that.tabList[tabIndex].routeList = pageLinkList.getAllRoutes();
+        that.finishRefresh(tabIndex, {
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("getPages error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+        });
+      }
+    },
+    /**
+     * 改变pages列表展示状态
+     */
+    pagesShowChange(key) {
+      this.tabList[this.tabIndex][key] = !this.tabList[this.tabIndex][key];
+    },
+    /**
+     * 刷新info
+     */
+    async refreshInfo(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Info");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        const infoRef = that.$refs.infoList;
+        if (infoRef && typeof infoRef.getData == "function") {
+          await infoRef.getData();
+        }
+        that.finishRefresh(tabIndex, {
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("refreshInfo error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+        });
+      }
+    },
+    /**
+     * 加载数据
+     */
+    async getConsole(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Console");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+      let data = devCache.get("console");
+      if (!data) data = [];
+      data = data.map((item) => {
+        // item.date = timeFormat(item.time);
+        item.date = timeFromNow(item.time);
+        return item;
+      });
+      let filterType = that.tabList[tabIndex].filterType;
+      if (filterType != "") {
+        data = data.filter((x) => x.type == filterType);
+      }
+      if (data.length > 30 && that.tabList[tabIndex].isLongList && !that.tabList[tabIndex].isLoadAll) {
+        data.splice(30, data.length - 1);
+      }
+      that.tabList[tabIndex].data = data;
+      that.finishRefresh(tabIndex, {
+        updateType: true,
+        notifySuccess,
+      });
+    },
+    /**
+     * 加载请求数据
+     */
+    async getNetwork(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Network");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+
+      let data = devCache.get("request");
+      if (!data) data = [];
+      data = data.map((item) => {
+        item.date = timeFromNow(item.sendTime);
+        return item;
+      });
+      let filterType = that.tabList[tabIndex].filterType;
+      if (filterType != "") {
+        if (filterType == "请求失败") {
+          data = data.filter((x) => x.type == 2 || (x.type == 1 && x.responseStatus != 200));
+        } else if (filterType == "其他") {
+          data = data.filter((x) => x.method != "get" && x.method != "post");
+        } else if (filterType == "1s+") {
+          data = data.filter((x) => x.type != 0 && x.useTime > 1);
+        } else if (filterType == "5s+") {
+          data = data.filter((x) => x.type != 0 && x.useTime > 5);
+        } else if (filterType == "10s+") {
+          data = data.filter((x) => x.type != 0 && x.useTime > 10);
+        } else if (filterType == "get") {
+          data = data.filter((x) => x.method.toLocaleLowerCase() == "get");
+        } else if (filterType == "post") {
+          data = data.filter((x) => x.method.toLocaleLowerCase() == "post");
+        } else if (filterType == "500KB+") {
+          data = data.filter((x) => x.type == 1 && x.responseBodySize > 1024 * 500);
+        } else if (filterType == "1MB+") {
+          data = data.filter((x) => x.type == 1 && x.responseBodySize > 1024 * 1024);
+        } else {
+          data = data.filter((x) => x.method == filterType);
+        }
+      }
+      console.log("data", data);
+      if (data.length > 30 && that.tabList[tabIndex].isLongList && !that.tabList[tabIndex].isLoadAll) {
+        data.splice(30, data.length - 1);
+      }
+      that.tabList[tabIndex].data = data;
+      that.finishRefresh(tabIndex, {
+        updateType: true,
+        notifySuccess,
+      });
+    },
+    /**
+     * 获取日志
+     */
+    async getLogs(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Logs");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+      let data = devCache.get("logReport");
+      if (!data) data = [];
+      data = data.map((x) => {
+        x.date = timeFromNow(x.t);
+        return x;
+      });
+      if (data.length > 30 && that.tabList[tabIndex].isLongList && !that.tabList[tabIndex].isLoadAll) {
+        data.splice(30, data.length - 1);
+      }
+      that.tabList[tabIndex].data = data;
+      that.finishRefresh(tabIndex, {
+        updateType: true,
+        notifySuccess,
+      });
+    },
+    /**
+     * 获取错误列表
+     */
+    async getError(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Error");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+      let data = devCache.get("errorReport");
+      if (!data) data = [];
+      data = data.map((x) => {
+        x.date = timeFromNow(x.t);
+        return x;
+      });
+      let filterType = that.tabList[tabIndex].filterType;
+      if (filterType != "") {
+        data = data.filter((x) => x.type == filterType);
+      }
+      if (data.length > 30 && that.tabList[tabIndex].isLongList && !that.tabList[tabIndex].isLoadAll) {
+        data.splice(30, data.length - 1);
+      }
+      that.tabList[tabIndex].data = data;
+      that.finishRefresh(tabIndex, {
+        updateType: true,
+        notifySuccess,
+      });
+    },
+    /**
+     * 加载全部列表
+     */
+    showListAll() {
+      let that = this;
+      that.tabList[that.tabIndex].isLoadAll = true;
+      that.tabList[that.tabIndex].data = [];
+      that.tabList[that.tabIndex].type = "loading";
+      that.getPage();
+    },
+    /**
+     * 加载eventBus日志列表
+     */
+    async getUniBus(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "UniBus");
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      const notifySuccess = options.notifySuccess === true;
+
+      let logList = devCache.get("uniBus");
+      if (!logList) logList = [];
+
+      let busCount = devCache.get("busCount");
+      if (!busCount) busCount = [];
+
+      logList = logList.map((x) => {
+        x.date = timeFormat(x.t);
+        return x;
+      });
+
+      let filterType = that.tabList[tabIndex].filterType;
+      if (filterType != "") {
+        logList = logList.filter((x) => x.e.indexOf(`${filterType}>`) == 0);
+      }
+      that.tabList[tabIndex].logList = logList;
+      that.tabList[tabIndex].countList = busCount;
+      that.finishRefresh(tabIndex, {
+        notifySuccess,
+      });
+    },
+    /**
+     * 长按BUS事件
+     */
+    busCountMenu(item) {
+      let that = this;
+
+      let menu = [
+        {
+          text: `复制名称`,
+          click() {
+            that.copyToClipboard(item.e);
+          },
+        },
+        {
+          text: `复制完整日志`,
+          click() {
+            that.copyToClipboard(JSON.stringify(item));
+          },
+        },
+      ];
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+    /**
+     * 长按BUS log事件
+     */
+    busLogMenu(item) {
+      let that = this;
+      let menu = [
+        {
+          text: `复制名称`,
+          click() {
+            that.copyToClipboard(item.e);
+          },
+        },
+        {
+          text: `复制完整日志`,
+          click() {
+            that.copyToClipboard(JSON.stringify(item));
+          },
+        },
+      ];
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+    /**
+     * 列表过滤类型改变事件
+     */
+    onFilterTypeChange(type) {
+      this.tabList[this.tabIndex].filterType = type;
+      this.getPage();
+    },
+    /**
+     * 加载文件列表
+     */
+    async getDirList(options = {}) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "FileSys");
+      // #ifndef APP-PLUS || MP-WEIXIN
+      if (1) return;
+      // #endif
+
+      that.tabList[tabIndex].isRefreshing = true;
+      that.tabList[tabIndex].refreshType = "refreshing";
+      that.tabList[tabIndex].type = "loading";
+      const notifySuccess = options.notifySuccess === true;
+      try {
+        let path = "";
+        let data = [];
+        // #ifdef APP-PLUS
+        if (that.tabList[tabIndex].dirType == "PRIVATE_DOC") {
+          path = "_doc";
+        } else if (that.tabList[tabIndex].dirType == "PRIVATE_WWW") {
+          path = "_www";
+        } else if (that.tabList[tabIndex].dirType == "PUBLIC_DOCUMENTS") {
+          path = "_documents";
+        } else if (that.tabList[tabIndex].dirType == "PUBLIC_DOWNLOADS") {
+          path = "_downloads";
+        }
+
+        if (that.tabList[tabIndex].dirList) {
+          that.tabList[tabIndex].dirList.forEach((item) => {
+            path = path + "/" + item;
+          });
+        }
+
+        data = await dirReader.getDirFileList(path);
+
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        let fs = wx.getFileSystemManager();
+        path = wx.env.USER_DATA_PATH;
+        if (that.tabList[tabIndex].dirList) {
+          that.tabList[tabIndex].dirList.forEach((item) => {
+            path = path + "/" + item;
+          });
+        }
+        let fileList = [];
+        let dirList = [];
+        let list = fs.readdirSync(path + "/");
+        for (let i = 0; i < list.length; i++) {
+          let name = list[i];
+          let stats = fs.statSync(path + "/" + name);
+          let row = {
+            type: stats.isFile() ? "file" : "dir",
+            size: stats.size,
+            time: stats.lastModifiedTime,
+            name,
+            fileType: name.split(".").pop(),
+          };
+          if (stats.isFile()) {
+            fileList.push(row);
+          } else {
+            dirList.push(row);
+          }
+        }
+        data = [...dirList, ...fileList];
+        // #endif
+
+        data = data.map((x) => {
+          x.date = timeFormat(x.time, "yyyy-mm-dd hh:MM");
+          x.sizeText = fileSize.getByteSize(x.size);
+          x.icon = x.type == "dir" ? dirReader.getDirIcon() : dirReader.getFileIcon(x.fileType);
+          return x;
+        });
+
+        if (that.tabList[tabIndex].dirList.length > 0) {
+          data.unshift({
+            type: "back",
+            name: "返回上一级",
+          });
+        }
+
+        that.tabList[tabIndex].data = data;
+        that.finishRefresh(tabIndex, {
+          updateType: true,
+          notifySuccess,
+        });
+      } catch (error) {
+        console.log("getDirList error", error);
+        that.finishRefresh(tabIndex, {
+          success: false,
+          updateType: true,
+        });
+      }
+    },
+    /**
+     * 打开文件夹
+     */
+    goChildDir(dirName) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "FileSys");
+      if (typeof dirName == "string" && dirName.indexOf("_goIndex_") == 0) {
+        let i = Number(dirName.replace("_goIndex_", ""));
+        that.tabList[tabIndex].dirList.splice(i, 99999);
+      } else if (dirName == "__back__") {
+        if (that.tabList[tabIndex].dirList.length > 0) {
+          that.tabList[tabIndex].dirList.splice(that.tabList[tabIndex].dirList.length - 1, 1);
+        }
+      } else {
+        that.tabList[tabIndex].dirList.push(dirName);
+      }
+      that.getPage();
+    },
+    /**
+     * 更改文件管理器地址
+     */
+    changeFileDirType(type) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "FileSys");
+      this.tabList[tabIndex].dirType = type;
+      this.tabList[tabIndex].dirList = [];
+      this.tabList[tabIndex].data = [];
+      this.getPage();
+    },
+    /**
+     * 编辑文件夹或创建文件夹
+     */
+    editDirName(options) {
+      this.$refs.createDir.show(options);
+    },
+    /**
+     * 更改缓存类型
+     */
+    changeStorageType(type) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Storage");
+      this.tabList[tabIndex].storageType = type;
+      this.getPage();
+    },
+    /**
+     * 运行js代码
+     */
+    runJs({ code, type }) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "JsRunner");
+      let id = new Date().getTime() + "_" + Math.random();
+      this.tabList[tabIndex].data.push({
+        id,
+        code,
+        result: "",
+        isEnd: false,
+      });
+      let logIndex = this.tabList[tabIndex].data.findIndex((x) => x.id == id);
+      let context;
+      try {
+        // #ifdef H5
+        context = window;
+        // #endif
+        // #ifdef APP-PLUS
+        context = globalThis;
+        // #endif
+      } catch (error) {}
+      let result = undefined;
+      uni.hideKeyboard();
+      if (type == "h5") {
+        try {
+          let fun = ("ev" + "__混淆__" + "al").replace("__混淆__", "");
+          if (context && context[fun]) {
+            result = context[fun](code);
+          } else {
+            result = "当前环境不支持运行js!";
+          }
+        } catch (error) {
+          if (error && error.message) {
+            result = error.message;
+          }
+        }
+      } else {
+        setTimeout(() => {
+          try {
+            uni.$once("devTools_jsRunnerCallback", (result) => {
+              console.log("result", result);
+              this.$set(this.tabList[this.tabIndex].data[logIndex], "result", result);
+              this.$set(this.tabList[this.tabIndex].data[logIndex], "isEnd", true);
+              this.$refs.mobileSwiperScroll.scrollToBottom();
+            });
+            uni.$emit("devTools_jsRunner", code);
+          } catch (error) {}
+        }, 1);
+      }
+
+      let his = devCache.get("codeRunHis");
+      if (!his) his = [];
+      let i = his.indexOf(code);
+      if (i > -1) {
+        his.splice(i, 1);
+      }
+      his.unshift(code);
+      if (his.length > 100) {
+        his.splice(100, 9999999);
+      }
+      devCache.set("codeRunHis", his);
+
+      this.$set(this.tabList[this.tabIndex].data[logIndex], "result", result);
+      this.$set(this.tabList[this.tabIndex].data[logIndex], "isEnd", true);
+      this.$refs.mobileSwiperScroll.scrollToBottom();
+    },
+    /**
+     * 清空js运行记录
+     */
+    emptyCodeHis() {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "JsRunner");
+      devUi.showToast({
+        title: "清空成功！",
+        icon: "success",
+      });
+      that.tabList[tabIndex].data = [];
+    },
+    /**
+     * Vuex变量类型改变事件
+     */
+    changeStateType(type) {
+      let that = this;
+      let tabIndex = that.tabList.findIndex((x) => x.title == "Vuex");
+      this.tabList[tabIndex].stateType = type;
+      this.getPage();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/* #ifndef APP-PLUS */
+view,
+text {
+  box-sizing: border-box;
+}
+/* #endif */
+
+.devTools {
+  /* #ifdef APP-PLUS */
+  flex: 1;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: 100vh;
+  /* #endif */
+  width: 100%;
+  position: relative;
+  .panel {
+    position: fixed;
+    z-index: 2;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    color: #333;
+    box-shadow: 0 -12rpx 42rpx rgba(2, 6, 23, 0.2);
+    /* #ifdef APP-PLUS */
+    border-radius: 20rpx 20rpx 0 0;
+    /* #endif */
+    .head {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      height: 80rpx;
+      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+      background-color: #fff;
+      .tabList {
+        height: 80rpx;
+        width: calc(100% - 84rpx);
+        display: flex;
+        flex-direction: row;
+        background: #fff;
+        border-bottom: 1px solid rgba(15, 23, 42, 0.05);
+        /* #ifndef APP-PLUS */
+        white-space: nowrap;
+        /* #endif */
+        &.tab-with-actions {
+          width: calc(100% - 168rpx);
+        }
+        .uni-scroll-view-content {
+          display: flex !important;
+          flex-direction: row !important;
+        }
+        .tabItem {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          height: 80rpx;
+          padding: 0 20rpx;
+          /* #ifndef APP-PLUS */
+          min-width: 90rpx;
+          /* #endif */
+          position: relative;
+          .tabTextWrap {
+            height: 80rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-width: 96rpx;
+          }
+          .tabText {
+            display: block;
+            white-space: nowrap;
+            font-size: 24rpx;
+            color: #6b7280;
+            line-height: 30rpx;
+            padding: 0 10rpx;
+            border-radius: 8rpx;
+          }
+          .tabText.active {
+            font-size: 24rpx;
+            color: #3b82f6;
+            font-weight: 400;
+          }
+          .tabDesc {
+            display: block;
+            white-space: nowrap;
+            font-size: 17rpx;
+            line-height: 22rpx;
+            color: #94a3b8;
+          }
+          .tabDesc.active {
+            color: #3b82f6;
+          }
+        }
+      }
+      .headActions {
+        height: 80rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+      .headRefresh {
+        height: 80rpx;
+        width: 84rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        .line {
+          position: absolute;
+          left: 0;
+          height: 40rpx;
+          width: 1px;
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+        .headRefreshIcon {
+          font-size: 38rpx;
+          line-height: 38rpx;
+          color: #3b82f6;
+        }
+        .headRefreshIcon.refreshing {
+          color: #93c5fd;
+        }
+      }
+      .close {
+        height: 80rpx;
+        width: 84rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        .icon {
+          font-size: 44rpx;
+          line-height: 44rpx;
+          text-align: center;
+          color: #ef4444;
+        }
+        .line {
+          position: absolute;
+          left: 0;
+          height: 40rpx;
+          width: 1px;
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+  }
+}
+.cellDivisionLine {
+  height: 0;
+  width: 100%;
+  background-color: transparent;
+}
+.loadAll:active {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.loadAll {
+  width: 100%;
+  height: 80rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  .loadAllFold {
+    width: 30rpx;
+    height: 30rpx;
+  }
+  .loadAllText {
+    font-size: 26rpx;
+    color: #333;
+    margin: 0 10rpx;
+  }
+}
+.devEmpty {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 240rpx;
+  width: 100%;
+  .devEmptyText {
+    font-size: 24rpx;
+    color: #64748b;
+    line-height: 34rpx;
+    background: #f8fafc;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 999rpx;
+    padding: 8rpx 20rpx;
+  }
+}
+.eventItem {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 40rpx);
+  box-sizing: border-box;
+  margin-left: 20rpx;
+  margin-top: 10rpx;
+  padding: 14rpx 16rpx;
+  border-radius: 16rpx;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: #fff;
+  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  .eventName {
+    font-size: 22rpx;
+    color: #0f172a;
+  }
+  .eventHead {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10rpx;
+  }
+  .eventCount {
+    margin-top: 8rpx;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .eventCountItem {
+      width: 170rpx;
+      /* #ifndef APP-PLUS */
+      max-width: 170rpx;
+      /* #endif */
+      font-size: 20rpx;
+      color: #334155;
+      line-height: 28rpx;
+    }
+  }
+}
+.eventLogItem {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 40rpx);
+  box-sizing: border-box;
+  margin-left: 20rpx;
+  margin-top: 10rpx;
+  padding: 14rpx 16rpx;
+  border-radius: 16rpx;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: #fff;
+  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  .logText {
+    font-size: 22rpx;
+    color: #0f172a;
+    line-height: 30rpx;
+  }
+  .logTime {
+    font-size: 20rpx;
+    color: #64748b;
+    line-height: 28rpx;
+  }
+  .eventLogFoot {
+    margin-top: 6rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10rpx;
+  }
+}
+.eventActionBtn {
+  height: 40rpx;
+  border-radius: 999rpx;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  padding: 0 14rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  &:active {
+    background: #f1f5f9;
+  }
+  .eventActionText {
+    font-size: 20rpx;
+    line-height: 20rpx;
+    color: #334155;
+  }
+}
+.listCenterView {
+  width: 100%;
+  /* #ifndef APP-PLUS */
+  min-height: 200rpx;
+  /* #endif */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  .listCenterText {
+    font-size: 24rpx;
+    color: #64748b;
+    background: #f8fafc;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 999rpx;
+    padding: 8rpx 20rpx;
+  }
+}
+</style>