vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/DevToolWindow/index.vue

@@ -0,0 +1,1051 @@
+<template>
+  <view
+    v-if="open"
+    :style="{ zIndex: zIndex }"
+    :class="`dev-tool-window dev-tool-window-${theme}`"
+  >
+    <view class="dev-tool-window-bg"></view>
+    <Tabs
+      v-model="activeTab"
+      :items="items"
+      :scroll-left="tabScrollLeft"
+      @close="onCloseWindow"
+      @scroll="debounceScrollTabs"
+      @change="onChangeTabs"
+    >
+      <!-- 额外内容占位 -->
+    </Tabs>
+    <swiper
+      class="dev-tool-window-container"
+      :current="activeTab"
+      @change="onChangeSwiper"
+    >
+      <swiper-item>
+        <ConsoleList
+          v-if="swiperShow(0)"
+          :currentConsoleType="currentConsoleType"
+          :consoleList="consoleList"
+          :sourceFileServers="sourceFileServers"
+          :mode="mode"
+          :useDevSource="useDevSource"
+          :zIndex="zIndex + 1"
+          v-model="searchConsole"
+          @choose="onConsoleChoose"
+          @search="onSearchConsole"
+          @run="onRunJS"
+        />
+      </swiper-item>
+      <swiper-item>
+        <Connection v-if="swiperShow(1)" :netWorkStatus="netWorkStatus" />
+      </swiper-item>
+      <swiper-item>
+        <NetworkList
+          v-if="swiperShow(2)"
+          :currentNetworkType="currentNetworkType"
+          :networkList="networkList"
+          :zIndex="zIndex + 1"
+          v-model="searchNetwork"
+          @choose="onNetworkChoose"
+          @search="onSearchNetwork"
+        />
+      </swiper-item>
+      <swiper-item>
+        <UploadList
+          v-if="swiperShow(3)"
+          :currentUploadType="currentUploadType"
+          :uploadList="uploadList"
+          :zIndex="zIndex + 1"
+          v-model="searchUpload"
+          @choose="onUploadChoose"
+          @search="onSearchUpload"
+        />
+      </swiper-item>
+      <swiper-item>
+        <WebSocket
+          v-if="swiperShow(4)"
+          :wsList="wsList"
+          :currentWebSocketType="currentWebSocketType"
+          :zIndex="zIndex + 1"
+          v-model="searchWs"
+          @choose="onWebSocketChoose"
+          @search="onSearchWs"
+        />
+      </swiper-item>
+      <swiper-item>
+        <RouteList
+          v-if="swiperShow(5)"
+          :routeList="routeList"
+          v-model="searchRoute"
+          @goTo="onGoTo"
+          @search="onSearchRoute"
+          @routeRefresh="onRouteRefresh"
+        />
+      </swiper-item>
+      <swiper-item>
+        <UniEvent
+          v-if="swiperShow(6)"
+          :eventList="eventList"
+          :eventCount="eventCount"
+          :mode="mode"
+          :useDevSource="useDevSource"
+          :sourceFileServers="sourceFileServers"
+          :zIndex="zIndex + 1"
+          @clear="onUniEventClear"
+        />
+      </swiper-item>
+      <swiper-item>
+        <CaptureScreen
+          v-if="swiperShow(7)"
+          :captureScreenList="captureScreenList"
+          @clear="onCaptureScreenClear"
+        />
+      </swiper-item>
+      <swiper-item>
+        <StorageList
+          v-if="swiperShow(8)"
+          :storage-list.sync="storageList"
+          v-model="searchStorage"
+          @choose="onStorageChoose"
+          @remove="onStorageRemove"
+          @diff-value="onChangeStorage"
+          @search="onSearchStorage"
+        />
+      </swiper-item>
+      <swiper-item>
+        <VuexList
+          v-if="swiperShow(9)"
+          :vuexList.sync="vuexList"
+          @diff-value="onChangeVuex"
+        />
+      </swiper-item>
+      <swiper-item>
+        <PiniaList
+          v-if="swiperShow(10)"
+          :pinia-list.sync="piniaList"
+          @diff-value="onChangePinia"
+        />
+      </swiper-item>
+      <swiper-item>
+        <WindowInfo v-if="swiperShow(11)" :windowInfo="windowInfo" />
+      </swiper-item>
+      <swiper-item>
+        <DeviceInfo v-if="swiperShow(12)" :deviceInfo="deviceInfo" />
+      </swiper-item>
+      <swiper-item>
+        <SystemInfo v-if="swiperShow(13)" :systemInfo="systemInfo" />
+      </swiper-item>
+      <swiper-item>
+        <AppInfo v-if="swiperShow(14)" :appInfo="appInfo" />
+      </swiper-item>
+      <swiper-item>
+        <SettingList
+          v-if="swiperShow(15)"
+          :devToolVisible="devToolVisible"
+          :sizeFormat="sizeFormat"
+          :theme="theme"
+          @showDevButton="onShowDevButton"
+          @restartDevTool="onRestartDevTool"
+          @restartApp="onRestartApp"
+          @exportLog="onExportLog"
+          @screenshot="onScreenshot"
+          @clearCache="onClearCache"
+          @destroyDevTool="onDestroyDevTool"
+          @changeTheme="onChangeTheme"
+        />
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import Tabs from '../Tabs/index.vue';
+import ConsoleList from '../ConsoleList/index.vue';
+import NetworkList from '../NetworkList/index.vue';
+import Connection from '../Connection/index.vue';
+import StorageList from '../StorageList/index.vue';
+import RouteList from '../RouteList/index.vue';
+import SettingList from '../SettingList/index.vue';
+import VuexList from '../VuexList/index.vue';
+import PiniaList from '../PiniaList/index.vue';
+import SystemInfo from '../SystemInfo/index.vue';
+import DeviceInfo from '../DeviceInfo/index.vue';
+import WindowInfo from '../WindowInfo/index.vue';
+import WebSocket from '../WebSocket/index.vue';
+import UploadList from '../UploadList/index.vue';
+import UniEvent from '../UniEvent/index.vue';
+import AppInfo from '../AppInfo/index.vue';
+import CaptureScreen from '../CaptureScreen/index.vue';
+import {
+  DEV_BUTTON_SHOW_OR_HIDE,
+  DEV_CONSOLE_CLEAR,
+  DEV_DESTROY,
+  DEV_EXPORT_LOG,
+  DEV_LOG_CACHE_CLEAR,
+  DEV_NETWORK_CLEAR,
+  DEV_PAGE_JUMP,
+  DEV_PINIA_CHANGE,
+  DEV_RESTART_APP,
+  DEV_RESTART_DEBUGGER,
+  DEV_ROUTE_REFRESH,
+  DEV_STORAGE_ADD,
+  DEV_STORAGE_CLEAR,
+  DEV_STORAGE_REFRESH,
+  DEV_STORAGE_REMOVE,
+  DEV_STORAGE_UPDATE,
+  DEV_UPLOAD_CLEAR,
+  DEV_VUEX_CHANGE,
+  DEV_WEBSOCKET_CLEAR,
+  DEV_APP_MESSAGE,
+  DEV_UNI_EVENT_CLEAR,
+  DEV_RUN_JS,
+  DEV_CAPTURE_SCREEN_CLEAR,
+} from '../../const';
+import { debounce, hightLight } from '../../utils/index';
+import { eventBus } from '../../core';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
+
+export default {
+  components: {
+    Tabs,
+    ConsoleList,
+    NetworkList,
+    Connection,
+    StorageList,
+    RouteList,
+    SettingList,
+    VuexList,
+    PiniaList,
+    SystemInfo,
+    DeviceInfo,
+    WindowInfo,
+    WebSocket,
+    UploadList,
+    UniEvent,
+    AppInfo,
+    CaptureScreen,
+  },
+  emits: ['close', 'sendMessage'],
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    useDevSource: {
+      type: Boolean,
+      default: false,
+    },
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  data() {
+    return {
+      // 标签页配置
+      items: [
+        { key: 'Console', label: 'Console', value: 'Console', index: 0 },
+        {
+          key: 'Connection',
+          label: 'Connection',
+          value: 'Connection',
+          index: 1,
+        },
+        { key: 'Network', label: 'Network', value: 'NetWork', index: 2 },
+        { key: 'Upload', label: 'Upload', value: 'Upload', index: 3 },
+        { key: 'WebSocket', label: 'WebSocket', value: 'WebSocket', index: 4 },
+        { key: 'Route', label: 'Route', value: 'Route', index: 5 },
+        { key: 'UniEvent', label: 'UniEvent', value: 'UniEvent', index: 6 },
+        {
+          key: 'CaptureScreen',
+          label: 'CaptureScreen',
+          value: 'CaptureScreen',
+          index: 7,
+        },
+        { key: 'Storage', label: 'Storage', value: 'Storage', index: 8 },
+        { key: 'Vuex', label: 'Vuex', value: 'Vuex', index: 9 },
+        { key: 'Pinia', label: 'Pinia', value: 'Pinia', index: 10 },
+        { key: 'Window', label: 'Window', value: 'Window', index: 11 },
+        { key: 'Device', label: 'Device', value: 'Device', index: 12 },
+        { key: 'System', label: 'System', value: 'System', index: 13 },
+        { key: 'AppInfo', label: 'AppInfo', value: 'AppInfo', index: 14 },
+        { key: 'Setting', label: 'Setting', value: 'Setting', index: 15 },
+      ],
+      // 备份数据
+      backup: {
+        consoleList: [],
+        networkList: [],
+        storageList: [],
+        wsList: [],
+        uploadList: [],
+        routeList: [],
+        eventList: [],
+        runJSList: [],
+      },
+      // 响应式数据
+      consoleList: [],
+      networkList: [],
+      uploadList: [],
+      storageList: [],
+      routeList: [],
+      wsList: [],
+      vuexList: {},
+      piniaList: {},
+      systemInfo: {},
+      deviceInfo: {},
+      windowInfo: {},
+      eventList: [],
+      eventCount: null,
+      appInfo: {},
+      captureScreenList: [],
+      netWorkStatus: {},
+      sizeFormat: '',
+      devToolVisible: true,
+      activeTab: 0,
+      tabScrollLeft: 0,
+      currentConsoleType: 'all',
+      currentNetworkType: 'all',
+      currentUploadType: 'all',
+      currentWebSocketType: 'all',
+      searchConsole: '',
+      searchNetwork: '',
+      searchUpload: '',
+      searchWs: '',
+      searchRoute: '',
+      searchStorage: '',
+      isActive: false,
+      theme: 'light',
+    };
+  },
+  computed: {
+    // 计算属性保持不变
+  },
+  watch: {
+    // 监听数据变化
+    data: {
+      handler(newVal) {
+        if (this.open && this.isActive) {
+          this.listenPostMessage(newVal);
+        }
+      },
+      deep: true,
+    },
+    open(newVal) {
+      if (newVal && this.data) {
+        this.listenPostMessage(this.data);
+      }
+    },
+  },
+  created() {
+    this.isActive = true;
+    // 初始化事件监听
+    eventBus.on(DEV_APP_MESSAGE, this.listenPostMessage);
+  },
+  mounted() {
+    // 初始化开发工具信息
+    const devToolInfo = getDevToolInfo();
+    if (devToolInfo) {
+      this.activeTab = devToolInfo.activeTab || 0;
+      this.currentConsoleType = devToolInfo.currentConsoleType || 'all';
+      this.currentNetworkType = devToolInfo.currentNetworkType || 'all';
+      this.currentWebSocketType = devToolInfo.currentWebSocketType || 'all';
+      this.tabScrollLeft = devToolInfo.tabScrollLeft || 0;
+      this.theme = devToolInfo.theme || 'light';
+    }
+    if (this.props?.data) {
+      this.listenPostMessage(this.props.data);
+    }
+    uni.onThemeChange((res) => {
+      this.theme = res.theme;
+    });
+  },
+
+  onUnload() {
+    this.isActive = false;
+    eventBus.off(DEV_APP_MESSAGE, this.listenPostMessage);
+  },
+  onShow() {
+    this.isActive = true;
+  },
+  onHide() {
+    this.isActive = false;
+    setDevToolInfo({
+      devToolWindowVisible: false,
+    });
+  },
+  methods: {
+    // 控制swiper显示
+    swiperShow(index) {
+      return (
+        index === this.activeTab - 1 ||
+        index === this.activeTab ||
+        index === this.activeTab + 1
+      );
+    },
+    // 监听消息
+    listenPostMessage(data) {
+      if (!this.open) return;
+
+      if (!this.isActive) return;
+
+      this.devToolVisible = data.devToolVisible ?? false;
+
+      if (data.consoleList) {
+        this.consoleList = [...(data.consoleList ?? [])]
+          .filter((item) => {
+            if (this.currentConsoleType === 'all') return item;
+            if (this.currentConsoleType !== 'clear') {
+              return item.type === this.currentConsoleType;
+            }
+            return item;
+          })
+          .filter((item) => {
+            return (
+              item.args?.some(
+                (arg) =>
+                  arg.type === 'string' &&
+                  arg.value?.includes?.(this.searchConsole),
+              ) ||
+              item.position.includes(this.searchConsole) ||
+              (item?.stack && item.stack.includes(this.searchConsole))
+            );
+          })
+          .map((item) => ({
+            ...item,
+            position: hightLight(item.position, this.searchConsole),
+            stack: hightLight(item.stack, this.searchConsole),
+            args: item.args.map((arg) => {
+              if (arg.type === 'string') {
+                return {
+                  type: 'string',
+                  value: hightLight(arg.value, this.searchConsole),
+                };
+              }
+              return arg;
+            }),
+          }));
+        this.backup.consoleList = [...data.consoleList];
+      }
+
+      if (data.networkList) {
+        this.networkList = [...(data.networkList ?? [])]
+          .filter((item) => {
+            if (this.currentNetworkType === 'all') return item;
+            if (this.currentNetworkType !== 'clear') {
+              return item.method === this.currentNetworkType;
+            }
+            return item;
+          })
+          .filter((item) => item?.url?.includes(this.searchNetwork))
+          .map((item) => ({
+            ...item,
+            url: hightLight(item.url, this.searchNetwork),
+          }));
+
+        this.backup.networkList = [...data.networkList];
+      }
+
+      if (data.uploadList) {
+        this.uploadList = [...(data.uploadList ?? [])]
+          .filter((item) => {
+            if (this.currentUploadType === 'all') return item;
+            if (this.currentUploadType !== 'clear') {
+              return item.status === this.currentUploadType;
+            }
+            return item;
+          })
+          .filter((item) => item.url?.includes(this.searchUpload))
+          .map((item) => ({
+            ...item,
+            url: hightLight(item.url, this.searchUpload),
+          }));
+        this.backup.uploadList = [...data.uploadList];
+      }
+
+      if (data.storageList) {
+        this.storageList = [...(data.storageList ?? [])]
+          .filter((item) => item._oldKey.includes(this.searchStorage))
+          .map((item) => ({
+            ...item,
+            _oldKey: hightLight(item._oldKey, this.searchStorage),
+          }));
+        this.backup.storageList = [...data.storageList];
+      }
+
+      if (data.wsList) {
+        this.wsList = [...(data.wsList ?? [])]
+          .filter((item) => {
+            if (this.currentWebSocketType === 'all') return item;
+            return item.readyState === this.currentWebSocketType;
+          })
+          .filter((item) => item.url.includes(this.searchWs))
+          .map((item) => ({
+            ...item,
+            url: hightLight(item.url, this.searchWs),
+          }));
+        this.backup.wsList = [...data.wsList];
+      }
+
+      if (data.routeList) {
+        this.routeList = [...(data.routeList ?? [])]
+          .filter(
+            (item) =>
+              item.path.includes(this.searchRoute) ||
+              (item.name && item.name.includes(this.searchRoute)),
+          )
+          .map((item) => ({
+            ...item,
+            name: hightLight(item.name, this.searchRoute),
+            path: hightLight(item.path, this.searchRoute),
+          }));
+        this.backup.routeList = [...data.routeList];
+      }
+
+      if (data.eventList) {
+        this.eventList = [...data.eventList];
+      }
+
+      if (data.eventCount) {
+        this.eventCount = { ...data.eventCount };
+      }
+
+      if (data.vuexList) {
+        this.vuexList = data.vuexList;
+      }
+
+      if (data.piniaList) {
+        this.piniaList = data.piniaList;
+      }
+
+      if (data.systemInfo) {
+        this.systemInfo = data.systemInfo;
+      }
+
+      if (data.deviceInfo) {
+        this.deviceInfo = data.deviceInfo;
+      }
+
+      if (data.windowInfo) {
+        this.windowInfo = data.windowInfo;
+      }
+
+      if (data.netWorkStatus) {
+        this.netWorkStatus = data.netWorkStatus;
+      }
+
+      if (data.sizeFormat) {
+        this.sizeFormat = data.sizeFormat;
+      }
+
+      if (data.appInfo) {
+        this.appInfo = data.appInfo;
+      }
+
+      if (data.captureScreenList) {
+        this.captureScreenList = data.captureScreenList;
+      }
+    },
+    // 发送消息
+    basicSendMessage(message) {
+      this.$emit('sendMessage', message);
+    },
+    // 设置窗口信息
+    setWindowInfo() {
+      setDevToolInfo({
+        activeTab: this.activeTab,
+        currentConsoleType: this.currentConsoleType,
+        currentNetworkType: this.currentNetworkType,
+        currentWebSocketType: this.currentWebSocketType,
+        tabScrollLeft: this.tabScrollLeft,
+      });
+    },
+    // 防抖设置窗口信息
+    debounceSetWindowInfo: debounce(function () {
+      this.setWindowInfo();
+    }, 200),
+    // 关闭窗口
+    onCloseWindow() {
+      this.$emit('close');
+      this.setWindowInfo();
+    },
+    // 切换标签
+    onChangeTabs() {
+      this.setWindowInfo();
+    },
+    // 切换swiper
+    onChangeSwiper({ detail }) {
+      this.activeTab = detail.current;
+      this.setWindowInfo();
+    },
+    // 滚动标签
+    onScrollTabs(e) {
+      this.tabScrollLeft = e.detail.scrollLeft;
+      this.debounceSetWindowInfo();
+    },
+    // 防抖滚动标签
+    debounceScrollTabs: debounce(function (e) {
+      this.onScrollTabs(e);
+    }, 200),
+    // 控制台选择
+    onConsoleChoose(type) {
+      if (type === 'clear') {
+        this.consoleList = [];
+        this.backup.consoleList = [];
+        this.basicSendMessage({
+          type: DEV_CONSOLE_CLEAR,
+          data: {},
+        });
+        return;
+      } else if (type === 'all') {
+        this.currentConsoleType = type;
+        this.consoleList = this.backup.consoleList;
+      } else {
+        this.currentConsoleType = type;
+        this.consoleList = this.backup.consoleList.filter(
+          (item) => item.type === type,
+        );
+      }
+      this.setWindowInfo();
+    },
+    // 运行JS
+    onRunJS(code) {
+      this.basicSendMessage({
+        type: DEV_RUN_JS,
+        data: { code },
+      });
+    },
+    // 搜索控制台
+    onSearchConsole(value) {
+      this.searchConsole = value;
+      this.consoleList = this.backup.consoleList
+        .filter((item) => {
+          return (
+            item.args.some(
+              (arg) => arg.type === 'string' && arg.value.includes(value),
+            ) ||
+            item.position.includes(value) ||
+            (item?.stack && item.stack.includes(value))
+          );
+        })
+        .map((item) => ({
+          ...item,
+          position: hightLight(item.position, value),
+          stack: hightLight(item.stack, value),
+          args: item.args.map((arg) => {
+            if (arg.type === 'string') {
+              return {
+                type: 'string',
+                value: hightLight(arg.value, value),
+              };
+            }
+            return arg;
+          }),
+        }));
+    },
+    // 网络选择
+    onNetworkChoose(type) {
+      if (type === 'clear') {
+        this.networkList = [];
+        this.backup.networkList = [];
+        this.basicSendMessage({
+          type: DEV_NETWORK_CLEAR,
+          data: {},
+        });
+        return;
+      } else if (type === 'all') {
+        this.currentNetworkType = type;
+        this.networkList = this.backup.networkList;
+      } else if (type === 'error') {
+        this.currentNetworkType = type;
+        this.networkList = this.backup.networkList.filter((item) => {
+          return (
+            item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '')
+          );
+        });
+      } else {
+        this.currentNetworkType = type;
+        this.networkList = this.backup.networkList.filter(
+          (item) => item.method === type,
+        );
+      }
+      this.setWindowInfo();
+    },
+    // 搜索网络
+    onSearchNetwork(value) {
+      this.searchNetwork = value;
+      this.networkList = this.backup.networkList
+        .filter((item) => {
+          if (this.currentNetworkType === 'all') return item;
+          if (this.currentNetworkType !== 'clear') {
+            return item.method === this.currentNetworkType;
+          }
+          return item;
+        })
+        .filter((item) => item?.url?.includes(value))
+        .map((item) => ({
+          ...item,
+          url: hightLight(item.url, value),
+        }));
+    },
+    // 上传选择
+    onUploadChoose(type) {
+      if (type === 'clear') {
+        this.uploadList = [];
+        this.backup.uploadList = [];
+        this.basicSendMessage({
+          type: DEV_UPLOAD_CLEAR,
+          data: {},
+        });
+        return;
+      } else if (type === 'all') {
+        this.currentUploadType = type;
+        this.uploadList = this.backup.uploadList;
+      } else {
+        this.currentUploadType = type;
+        this.uploadList = this.backup.uploadList.filter(
+          (item) => item.status === type,
+        );
+      }
+    },
+    // 搜索上传
+    onSearchUpload(value) {
+      this.searchUpload = value;
+      this.uploadList = this.backup.uploadList
+        .filter((item) => {
+          if (this.currentUploadType === 'all') return item;
+          if (this.currentUploadType !== 'clear') {
+            return item.status === this.currentUploadType;
+          }
+          return item;
+        })
+        .filter((item) => item.url?.includes(value))
+        .map((item) => ({
+          ...item,
+          url: hightLight(item.url, value),
+        }));
+    },
+    // WebSocket选择
+    onWebSocketChoose(type) {
+      if (type === 'clear') {
+        this.wsList = [];
+        this.backup.wsList = [];
+        this.basicSendMessage({
+          type: DEV_WEBSOCKET_CLEAR,
+          data: {},
+        });
+        return;
+      } else if (type === 'all') {
+        this.currentWebSocketType = type;
+        this.wsList = this.backup.wsList;
+      } else {
+        this.currentWebSocketType = type;
+        this.wsList = this.backup.wsList.filter(
+          (item) => item.readyState === type,
+        );
+      }
+      this.setWindowInfo();
+    },
+    // 搜索WebSocket
+    onSearchWs(value) {
+      this.searchWs = value;
+      this.wsList = this.backup.wsList
+        .filter((item) => {
+          if (this.currentWebSocketType === 'all') return item;
+          return item.readyState === this.currentWebSocketType;
+        })
+        .filter((item) => item.url.includes(value))
+        .map((item) => ({
+          ...item,
+          url: hightLight(item.url, value),
+        }));
+    },
+    // 存储选择
+    onStorageChoose(type) {
+      if (type === 'clear') {
+        this.backup.storageList = [];
+        this.storageList = [];
+        this.basicSendMessage({
+          type: DEV_STORAGE_CLEAR,
+          data: {},
+        });
+      } else if (type === 'refresh') {
+        this.basicSendMessage({
+          type: DEV_STORAGE_REFRESH,
+          data: {},
+        });
+      } else if (type === 'add') {
+        const key = '_new_' + Date.now();
+        const newItem = {
+          key,
+          _oldKey: key,
+          value: JSON.stringify(''),
+        };
+        this.backup.storageList.unshift(newItem);
+        this.storageList.unshift(newItem);
+        this.basicSendMessage({
+          type: DEV_STORAGE_ADD,
+          data: {
+            key,
+            value: JSON.stringify(''),
+          },
+        });
+      }
+    },
+    // 移除存储
+    onStorageRemove(key) {
+      this.backup.storageList = this.backup.storageList.filter(
+        (item) => item.key !== key,
+      );
+      this.storageList = this.backup.storageList;
+      this.basicSendMessage({
+        type: DEV_STORAGE_REMOVE,
+        data: { key },
+      });
+    },
+    // 更改存储
+    onChangeStorage(data) {
+      this.basicSendMessage({
+        type: DEV_STORAGE_UPDATE,
+        data,
+      });
+    },
+    // 搜索存储
+    onSearchStorage(value) {
+      this.searchStorage = value;
+      this.storageList = this.backup.storageList
+        .filter((item) => item._oldKey.includes(value))
+        .map((item) => ({
+          ...item,
+          _oldKey: hightLight(item._oldKey, value),
+        }));
+    },
+    // 清空UniEvent
+    onUniEventClear() {
+      this.eventList = [];
+      this.eventCount = {
+        on: 0,
+        once: 0,
+        emit: 0,
+        off: 0,
+      };
+      this.basicSendMessage({
+        type: DEV_UNI_EVENT_CLEAR,
+        data: {},
+      });
+    },
+    // 清空截图
+    onCaptureScreenClear() {
+      this.captureScreenList = [];
+      this.basicSendMessage({
+        type: DEV_CAPTURE_SCREEN_CLEAR,
+        data: {},
+      });
+    },
+    // 跳转页面
+    onGoTo(page) {
+      this.basicSendMessage({
+        type: DEV_PAGE_JUMP,
+        data: {
+          path: '/' + page.path,
+          type: page.type,
+        },
+      });
+    },
+    // 刷新路由
+    onRouteRefresh() {
+      this.basicSendMessage({
+        type: DEV_ROUTE_REFRESH,
+        data: {},
+      });
+    },
+    // 搜索路由
+    onSearchRoute(value) {
+      this.searchRoute = value;
+      this.routeList = this.backup.routeList
+        .filter(
+          (item) =>
+            item.path.includes(value) ||
+            (item.name && item.name.includes(value)),
+        )
+        .map((item) => ({
+          ...item,
+          name: hightLight(item.name, this.searchRoute),
+          path: hightLight(item.path, this.searchRoute),
+        }));
+    },
+    // 显示开发按钮
+    onShowDevButton(show) {
+      this.basicSendMessage({
+        type: DEV_BUTTON_SHOW_OR_HIDE,
+        data: { show },
+      });
+    },
+    // 重启开发工具
+    onRestartDevTool() {
+      this.basicSendMessage({
+        type: DEV_RESTART_DEBUGGER,
+        data: {},
+      });
+    },
+    // 重启应用
+    onRestartApp() {
+      this.basicSendMessage({
+        type: DEV_RESTART_APP,
+        data: {},
+      });
+    },
+    // 导出日志
+    onExportLog(exports) {
+      this.basicSendMessage({
+        type: DEV_EXPORT_LOG,
+        data: { ...exports },
+      });
+    },
+    // 截图
+    onScreenshot() {
+      this.basicSendMessage({
+        type: 'dev-tool-hide-screenshot',
+        data: {},
+      });
+    },
+    // 清空缓存
+    onClearCache() {
+      this.basicSendMessage({
+        type: DEV_LOG_CACHE_CLEAR,
+        data: {},
+      });
+    },
+    // 销毁开发工具
+    onDestroyDevTool() {
+      this.basicSendMessage({
+        type: DEV_DESTROY,
+        data: {},
+      });
+    },
+    onChangeTheme(t) {
+      this.theme = t;
+      setDevToolInfo({
+        theme: t,
+      });
+    },
+    // 更改Vuex
+    onChangeVuex(value) {
+      this.basicSendMessage({
+        type: DEV_VUEX_CHANGE,
+        data: value,
+      });
+    },
+    // 更改Pinia
+    onChangePinia(value) {
+      this.basicSendMessage({
+        type: DEV_PINIA_CHANGE,
+        data: value,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dev-tool-window {
+  --dev-tool-main-color: #9254de;
+  --dev-tool-normal-bg-color: #f9f9f9;
+  --dev-tool-warn-color: #ffa940;
+  --dev-tool-warn-bg-color: #fff7e6;
+  --dev-tool-error-color: #ff4d4f;
+  --dev-tool-error-bg-color: #fff1f0;
+  --dev-tool-success-color: #bae637;
+  --dev-tool-success-bg-color: #fcffe6;
+
+  --dev-tool-base-font-size: 12px;
+  --dev-tool-tag-font-size: 10px;
+  --dev-tool-tips-font-size: 10px;
+  -webkit-tap-highlight-color: transparent;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  /* #ifdef H5 */
+  padding: 50px 0;
+  /* #endif */
+
+  /* #ifdef MP-WEIXIN */
+  /* padding-bottom:30px; */
+  /* #endif */
+
+  width: 100vw;
+  height: 100vh;
+  font-size: 14px;
+  color: var(--dev-tool-text-color);
+  box-sizing: border-box;
+  transition: color 0.3s;
+}
+
+.dev-tool-window-light {
+  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
+  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
+
+  --dev-tool-text-color: #000;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-info-color: #9c9c9c;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-nil-color: #020201;
+  --dev-tool-string-color: #888888;
+  --dev-tool-number-color: #1d8ce0;
+  --dev-tool-boolean-color: #1d8ce0;
+  --dev-tool-symbol-color: bisque;
+}
+.dev-tool-window-dart {
+  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
+  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
+
+  --dev-tool-text-color: #fff;
+  --dev-tool-border-color: #3d3d3d;
+
+  --dev-tool-log-color: #f9f9f9;
+}
+
+.dev-tool-window-bg {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--dev-tool-bg-color);
+  backdrop-filter: blur(6px);
+  transition: background-color 0.3s;
+}
+.dev-tool-window-container {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+.dev-tool-window-container ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.dev-tool-window-container ::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.dev-tool-window::after {
+  content: '';
+}
+</style>