oxy-uni-ui 2.1.0 → 2.1.2

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

@@ -0,0 +1,1824 @@
+<template>
+  <view class="devTools">
+    <view @click.stop ref="panel" class="panel" :style="[panelStyle]">
+      <view class="head">
+        <scroll-view
+          :scroll-x="true"
+          :scroll-y="false"
+          scroll-with-animation
+          :scroll-left="tabScrollLeft"
+          class="tabList showScrollbars"
+          :class="tabList[tabIndex].canRefreshing ? 'tab-with-actions' : ''"
+          :show-scrollbar="false"
+          @scroll="onTabListScroll"
+          @mousedown="onTabMouseDown"
+          @mousemove="onTabMouseMove"
+          @mouseup="onTabMouseUp"
+          @mouseleave="onTabMouseUp"
+          @touchstart="onTabTouchStart"
+          @touchmove="onTabTouchMove"
+          @touchend="onTabTouchEnd"
+          @touchcancel="onTabTouchEnd"
+        >
+          <view class="tabListInner">
+            <view v-for="(item, index) in tabList" :key="index" class="tabItem" @click="onTabClick(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="../static/unfold.png" />
+                <text class="loadAllText">展示全部数据</text>
+                <image class="loadAllFold" src="../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,
+      tabScrollLeft: 0,
+      tabTouchStartX: 0,
+      tabTouchStartLeft: 0,
+      tabTouchDragging: false,
+      tabTouchMoved: false,
+      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)
+  },
+  methods: {
+    onValueViewerShow() {
+      this.isValueViewerOpen = true
+    },
+    onValueViewerHide() {
+      this.isValueViewerOpen = false
+    },
+    onTabClick(index) {
+      if (this.tabTouchMoved) {
+        this.tabTouchMoved = false
+        return
+      }
+      this.tabIndex = index
+    },
+    onTabListScroll(e) {
+      const detail = e && e.detail ? e.detail : null
+      if (!detail || typeof detail.scrollLeft !== 'number') return
+      this.tabScrollLeft = detail.scrollLeft
+    },
+    onTabTouchStart(e) {
+      const point = this.getTabTouchPoint(e)
+      if (!point) return
+      this.tabTouchDragging = true
+      this.tabTouchMoved = false
+      this.tabTouchStartX = point.x
+      this.tabTouchStartLeft = this.tabScrollLeft
+    },
+    onTabTouchMove(e) {
+      if (!this.tabTouchDragging) return
+      const point = this.getTabTouchPoint(e)
+      if (!point) return
+      const deltaX = point.x - this.tabTouchStartX
+      if (Math.abs(deltaX) > 4) {
+        this.tabTouchMoved = true
+      }
+      const nextLeft = this.tabTouchStartLeft - deltaX
+      this.tabScrollLeft = nextLeft > 0 ? nextLeft : 0
+      if (this.tabTouchMoved && e && typeof e.preventDefault == 'function') {
+        e.preventDefault()
+      }
+    },
+    onTabTouchEnd() {
+      this.tabTouchDragging = false
+      if (!this.tabTouchMoved) return
+      setTimeout(() => {
+        this.tabTouchMoved = false
+      }, 0)
+    },
+    onTabMouseDown(e) {
+      if (!e || typeof e.clientX !== 'number') return
+      this.tabTouchDragging = true
+      this.tabTouchMoved = false
+      this.tabTouchStartX = e.clientX
+      this.tabTouchStartLeft = this.tabScrollLeft
+    },
+    onTabMouseMove(e) {
+      if (!this.tabTouchDragging || !e || typeof e.clientX !== 'number') return
+      const deltaX = e.clientX - this.tabTouchStartX
+      if (Math.abs(deltaX) > 2) {
+        this.tabTouchMoved = true
+      }
+      const nextLeft = this.tabTouchStartLeft - deltaX
+      this.tabScrollLeft = nextLeft > 0 ? nextLeft : 0
+      if (this.tabTouchMoved && typeof e.preventDefault == 'function') {
+        e.preventDefault()
+      }
+    },
+    onTabMouseUp() {
+      this.onTabTouchEnd()
+    },
+    getTabTouchPoint(e) {
+      if (!e) return null
+      if (e.touches && e.touches[0]) {
+        return {
+          x: e.touches[0].clientX || e.touches[0].pageX || 0
+        }
+      }
+      if (e.changedTouches && e.changedTouches[0]) {
+        return {
+          x: e.changedTouches[0].clientX || e.changedTouches[0].pageX || 0
+        }
+      }
+      if (e.detail && typeof e.detail.x === 'number') {
+        return {
+          x: e.detail.x
+        }
+      }
+      return null
+    },
+    /**
+     * 加载列表
+     */
+    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);
+        white-space: nowrap;
+        touch-action: pan-x;
+        user-select: none;
+        -webkit-user-select: none;
+        &.tab-with-actions {
+          width: calc(100% - 168rpx);
+        }
+        ::v-deep .uni-scroll-view-content {
+          white-space: nowrap;
+        }
+        .tabListInner {
+          display: inline-block;
+          white-space: nowrap;
+          min-width: 100%;
+        }
+        .tabItem {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          vertical-align: top;
+          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>