vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/DevToolWindow/index.vue

@@ -1,1053 +0,0 @@
-<template>
-  <view class="dev-tool-window" v-if="open">
-    <!-- :style="{
-      height: `${systemInfo?.safeArea?.height}px`
-    }" -->
-    <view class="dev-tool-window-bg"></view>
-    <Tabs
-      v-model="activeTab"
-      :items="items"
-      :scroll-left="tabScrollLeft"
-      @close="onCloseWindow"
-      @scroll="debounceScrollTabs"
-      @change="onChangeTabs"
-    >
-      <!-- <template #extra>
-        <view style="margin-left: 6px">{{ sizeFormat }}</view>
-      </template> -->
-    </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)"
-          v-model:storage-list="storageList"
-          v-model="searchStorage"
-          @choose="onStorageChoose"
-          @remove="onStorageRemove"
-          @diff-value="onChangeStorage"
-          @search="onSearchStorage"
-        />
-      </swiper-item>
-      <swiper-item>
-        <VuexList
-          v-if="swiperShow(9)"
-          v-model:vuexList="vuexList"
-          @diff-value="onChangeVuex"
-        />
-      </swiper-item>
-      <swiper-item>
-        <PiniaList
-          v-if="swiperShow(10)"
-          v-model:pinia-list="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"
-          @showDevButton="onShowDevButton"
-          @restartDevTool="onRestartDevTool"
-          @restartApp="onRestartApp"
-          @exportLog="onExportLog"
-          @screenshot="onScreenshot"
-          @clearCache="onClearCache"
-          @destroyDevTool="onDestroyDevTool"
-        />
-      </swiper-item>
-    </swiper>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
-import { ref, onMounted } from 'vue';
-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 type { DevTool } from '../../type';
-import { eventBus } from '../../core';
-import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-
-const 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,
-  },
-];
-
-const backup: {
-  consoleList: DevTool.ConsoleItem[];
-  networkList: DevTool.NetworkItem[];
-  storageList: DevTool.StorageItem[];
-  wsList: DevTool.WS[];
-  uploadList: DevTool.UploadItem[];
-  routeList: DevTool.Page[];
-  eventList: DevTool.EventItem[];
-  runJSList: DevTool.RunJSItem[];
-} = {
-  consoleList: [],
-  networkList: [],
-  storageList: [],
-  wsList: [],
-  uploadList: [],
-  routeList: [],
-  eventList: [],
-  runJSList: [],
-};
-const consoleList = ref<DevTool.ConsoleItem[]>([]);
-const networkList = ref<DevTool.NetworkItem[]>([]);
-const uploadList = ref<DevTool.UploadItem[]>([]);
-const storageList = ref<DevTool.StorageItem[]>([]);
-const routeList = ref<DevTool.Page[]>([]);
-const wsList = ref<DevTool.WS[]>([]);
-const vuexList = ref<Record<string, any>>({});
-const piniaList = ref<Record<string, any>>({});
-const systemInfo = ref<Record<string, any>>({});
-const deviceInfo = ref<Record<string, any>>({});
-const windowInfo = ref<Record<string, any>>({});
-const eventList = ref<DevTool.EventItem[]>([]);
-const eventCount = ref<DevTool.EventCount>();
-const appInfo = ref<Record<string, any>>({});
-const captureScreenList = ref<DevTool.CaptureScreenItem[]>([]);
-
-const netWorkStatus = ref<{
-  isConnected?: boolean;
-  networkType?: string;
-}>({});
-const sizeFormat = ref('');
-
-const devToolVisible = ref(true);
-
-const activeTab = ref(0);
-const tabScrollLeft = ref(0);
-const currentConsoleType = ref('all');
-const currentNetworkType = ref('all');
-const currentUploadType = ref('all');
-const currentWebSocketType = ref('all');
-
-const searchConsole = ref('');
-const searchNetwork = ref('');
-const searchUpload = ref('');
-const searchWs = ref('');
-const searchRoute = ref('');
-const searchStorage = ref('');
-
-const props = withDefaults(
-  defineProps<{
-    open?: boolean;
-    data?: DevTool.WindowData;
-    sourceFileServers?: string[];
-    mode?: string;
-    useDevSource?: boolean;
-    zIndex?: number;
-  }>(),
-  {
-    zIndex: 1000,
-  },
-);
-
-const emits = defineEmits<{
-  (e: 'close'): void;
-  (e: 'sendMessage', data: { type: string; data: Record<string, any> }): void;
-}>();
-
-function swiperShow(index: number) {
-  const show =
-    index == activeTab.value - 1 ||
-    index == activeTab.value ||
-    index == activeTab.value + 1;
-  return show;
-}
-
-const listenPostMessage = (data: DevTool.WindowData) => {
-  if (!props.open) return;
-  if (!isActive) return;
-  devToolVisible.value = data.devToolVisible ?? false;
-
-  if (data.consoleList) {
-    consoleList.value = [...(data.consoleList ?? [])]
-      .filter((item) => {
-        if (currentConsoleType.value === 'all') return item;
-        if (currentConsoleType.value !== 'clear') {
-          return item.type === currentConsoleType.value;
-        }
-        return item;
-      })
-      .filter((item) => {
-        return (
-          item.args?.some(
-            (arg) =>
-              arg.type === 'string' &&
-              arg.value?.includes?.(searchConsole.value),
-          ) ||
-          item.position.includes(searchConsole.value) ||
-          item?.stack?.includes(searchConsole.value)
-        );
-      })
-      ?.map((item) => {
-        return {
-          ...item,
-          position: hightLight(item.position, searchConsole.value),
-          stack: hightLight(item.stack, searchConsole.value),
-          args: item.args.map((arg) => {
-            if (arg.type === 'string') {
-              return {
-                type: 'string',
-                value: hightLight(arg.value, searchConsole.value),
-              };
-            }
-            return arg;
-          }),
-        };
-      });
-
-    backup.consoleList = [...data.consoleList];
-  }
-
-  if (data.networkList) {
-    networkList.value = [...(data.networkList ?? [])]
-      .filter((item) => {
-        if (currentNetworkType.value === 'all') return item;
-        if (currentNetworkType.value !== 'clear') {
-          return item.method === currentNetworkType.value;
-        }
-        return item;
-      })
-      ?.filter((item) => item?.url?.includes(searchNetwork.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchNetwork.value),
-        };
-      });
-
-    backup.networkList = [...data.networkList];
-  }
-
-  if (data.uploadList) {
-    uploadList.value = [...(data.uploadList ?? [])]
-      .filter((item) => {
-        if (currentUploadType.value === 'all') return item;
-        if (currentUploadType.value !== 'clear') {
-          return item.status === currentUploadType.value;
-        }
-        return item;
-      })
-      .filter((item) => {
-        return item.url?.includes(searchUpload.value);
-      })
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchUpload.value),
-        };
-      });
-    backup.uploadList = [...data.uploadList];
-  }
-
-  if (data.storageList) {
-    storageList.value = [...(data.storageList ?? [])]
-      ?.filter((item) => item._oldKey.includes(searchStorage.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          _oldKey: hightLight(item._oldKey, searchStorage.value),
-        };
-      });
-    backup.storageList = [...data.storageList];
-  }
-
-  if (data.wsList) {
-    wsList.value = [...(data.wsList ?? [])]
-      .filter((item) => {
-        if (currentWebSocketType.value === 'all') return item;
-        return item.readyState === currentWebSocketType.value;
-      })
-      .filter((item) => item.url.includes(searchWs.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchWs.value),
-        };
-      });
-    backup.wsList = [...data.wsList];
-  }
-
-  if (data.routeList) {
-    routeList.value = [...(data.routeList ?? [])]
-      ?.filter(
-        (item) =>
-          item.path.includes(searchRoute.value) ||
-          item.name?.includes(searchRoute.value),
-      )
-      ?.map((item) => {
-        return {
-          ...item,
-          name: hightLight(item.name, searchRoute.value),
-          path: hightLight(item.path, searchRoute.value),
-        };
-      });
-    backup.routeList = [...data.routeList];
-  }
-  if (data.eventList) {
-    eventList.value = [...data.eventList];
-  }
-
-  if (data.eventCount) {
-    eventCount.value = { ...data.eventCount };
-  }
-
-  if (data.vuexList) {
-    vuexList.value = data.vuexList;
-  }
-
-  if (data.piniaList) {
-    piniaList.value = data.piniaList;
-  }
-
-  if (data.systemInfo) {
-    systemInfo.value = data.systemInfo;
-  }
-
-  if (data.deviceInfo) {
-    deviceInfo.value = data.deviceInfo;
-  }
-  if (data.windowInfo) {
-    windowInfo.value = data.windowInfo;
-  }
-
-  if (data.netWorkStatus) {
-    netWorkStatus.value = data.netWorkStatus;
-  }
-
-  if (data.sizeFormat) {
-    sizeFormat.value = data.sizeFormat;
-  }
-
-  if (data.appInfo) {
-    appInfo.value = data.appInfo;
-  }
-
-  if (data.captureScreenList) {
-    captureScreenList.value = data.captureScreenList;
-  }
-};
-
-let isActive = false;
-onMounted(() => {
-  const devToolInfo = getDevToolInfo();
-
-  if (devToolInfo) {
-    activeTab.value = devToolInfo?.activeTab || 0;
-    currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
-    currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
-    tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
-  }
-  if (props.data) {
-    listenPostMessage(props.data);
-  }
-});
-
-onLoad(() => {
-  isActive = true;
-  eventBus.on(DEV_APP_MESSAGE, listenPostMessage);
-});
-onUnload(() => {
-  isActive = false;
-  eventBus.off(DEV_APP_MESSAGE, listenPostMessage);
-});
-
-onShow(() => {
-  isActive = true;
-});
-onHide(() => {
-  isActive = false;
-
-  setDevToolInfo({
-    devToolWindowVisible: false,
-  });
-});
-
-/** 发送消息给 uniapp */
-function basicSendMessage(message: {
-  type: string;
-  data: Record<string, any>;
-}) {
-  emits('sendMessage', message);
-}
-
-function setWindowInfo() {
-  setDevToolInfo({
-    activeTab: activeTab.value,
-    currentConsoleType: currentConsoleType.value,
-    currentNetworkType: currentNetworkType.value,
-    currentWebSocketType: currentWebSocketType.value,
-    tabScrollLeft: tabScrollLeft.value,
-  });
-}
-
-const debounceSetWindowInfo = debounce(setWindowInfo, 200);
-
-function onCloseWindow() {
-  emits('close');
-  setWindowInfo();
-}
-function onChangeTabs() {
-  setWindowInfo();
-}
-
-function onChangeSwiper({
-  detail,
-}: {
-  detail: { current: number; source: any };
-}) {
-  activeTab.value = detail.current;
-  setWindowInfo();
-}
-
-function onScrollTabs(e: any) {
-  tabScrollLeft.value = e.detail.scrollLeft;
-  debounceSetWindowInfo();
-}
-
-const debounceScrollTabs = debounce(onScrollTabs, 200);
-
-function onConsoleChoose(
-  type: 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear',
-) {
-  if (type === 'clear') {
-    consoleList.value = [];
-    backup.consoleList = [];
-    basicSendMessage({
-      type: DEV_CONSOLE_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentConsoleType.value = type;
-    consoleList.value = backup.consoleList;
-  } else {
-    currentConsoleType.value = type;
-    consoleList.value = backup.consoleList.filter((item) => item.type === type);
-  }
-  setWindowInfo();
-}
-
-function onRunJS(code: string) {
-  basicSendMessage({
-    type: DEV_RUN_JS,
-    data: {
-      code,
-    },
-  });
-}
-
-function onSearchConsole(value: string) {
-  consoleList.value = backup.consoleList
-    .filter((item) => {
-      return (
-        item.args.some(
-          (arg) => arg.type === 'string' && arg.value.includes(value),
-        ) ||
-        item.position.includes(value) ||
-        item?.stack?.includes(value)
-      );
-    })
-    ?.map((item) => {
-      return {
-        ...item,
-        position: hightLight(item.position, searchConsole.value),
-        stack: hightLight(item.stack, searchConsole.value),
-        args: item.args.map((arg) => {
-          if (arg.type === 'string') {
-            return {
-              type: 'string',
-              value: hightLight(arg.value, value),
-            };
-          }
-          return arg;
-        }),
-      };
-    });
-}
-
-function onNetworkChoose(type: string) {
-  if (type === 'clear') {
-    networkList.value = [];
-    backup.networkList = [];
-    basicSendMessage({
-      type: DEV_NETWORK_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList;
-  } else if (type === 'error') {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList.filter((item) => {
-      return item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '');
-    });
-  } else {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList.filter(
-      (item) => item.method === type,
-    );
-  }
-
-  setWindowInfo();
-}
-
-function onSearchNetwork(value: string) {
-  networkList.value = backup.networkList
-    .filter((item) => {
-      if (currentNetworkType.value === 'all') return item;
-      if (currentNetworkType.value !== 'clear') {
-        return item.method === currentNetworkType.value;
-      }
-      return item;
-    })
-    ?.filter((item) => item?.url?.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
-}
-
-function onUploadChoose(type: string) {
-  if (type === 'clear') {
-    uploadList.value = [];
-    backup.uploadList = [];
-    basicSendMessage({
-      type: DEV_UPLOAD_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentUploadType.value = type;
-    uploadList.value = backup.uploadList;
-  } else {
-    currentUploadType.value = type;
-    uploadList.value = backup.uploadList.filter((item) => item.status === type);
-  }
-}
-
-function onSearchUpload(value: string) {
-  uploadList.value = backup.uploadList
-    .filter((item) => {
-      if (currentUploadType.value === 'all') return item;
-      if (currentUploadType.value !== 'clear') {
-        return item.status === currentUploadType.value;
-      }
-      return item;
-    })
-    .filter((item) => {
-      return item.url?.includes(value);
-    })
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
-}
-
-function onWebSocketChoose(type: string) {
-  if (type === 'clear') {
-    wsList.value = [];
-    backup.wsList = [];
-    basicSendMessage({
-      type: DEV_WEBSOCKET_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentWebSocketType.value = type;
-    wsList.value = backup.wsList;
-  } else {
-    currentWebSocketType.value = type;
-    wsList.value = backup.wsList.filter((item) => item.readyState === type);
-  }
-  setWindowInfo();
-}
-
-function onSearchWs(value: string) {
-  wsList.value = backup.wsList
-    .filter((item) => {
-      if (currentWebSocketType.value === 'all') return item;
-      return item.readyState === currentWebSocketType.value;
-    })
-    .filter((item) => item.url.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
-}
-
-function onStorageChoose(type: string) {
-  if (type === 'clear') {
-    backup.storageList = [];
-    storageList.value = [];
-    basicSendMessage({
-      type: DEV_STORAGE_CLEAR,
-      data: {},
-    });
-  } else if (type === 'refresh') {
-    basicSendMessage({
-      type: DEV_STORAGE_REFRESH,
-      data: {},
-    });
-  } else if (type === 'add') {
-    const key = '_new_' + Date.now();
-    const newItem = {
-      key,
-      _oldKey: key,
-      value: JSON.stringify(''),
-    };
-    backup.storageList.unshift(newItem);
-    storageList.value.unshift(newItem);
-    basicSendMessage({
-      type: DEV_STORAGE_ADD,
-      data: {
-        key,
-        value: JSON.stringify(''),
-      },
-    });
-  }
-}
-
-function onStorageRemove(key: string) {
-  backup.storageList = backup.storageList.filter((item) => item.key !== key);
-  storageList.value = backup.storageList;
-  basicSendMessage({
-    type: DEV_STORAGE_REMOVE,
-    data: { key },
-  });
-}
-
-function onChangeStorage(data: DevTool.StorageItem) {
-  basicSendMessage({
-    type: DEV_STORAGE_UPDATE,
-    data,
-  });
-}
-
-function onSearchStorage(value: string) {
-  storageList.value = backup.storageList
-    .filter((item) => item._oldKey.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        _oldKey: hightLight(item._oldKey, value),
-      };
-    });
-}
-
-function onUniEventClear() {
-  eventList.value = [];
-  eventCount.value = {
-    on: 0,
-    once: 0,
-    emit: 0,
-    off: 0,
-  };
-  basicSendMessage({
-    type: DEV_UNI_EVENT_CLEAR,
-    data: {},
-  });
-}
-
-function onCaptureScreenClear() {
-  captureScreenList.value = [];
-  basicSendMessage({
-    type: DEV_CAPTURE_SCREEN_CLEAR,
-    data: {},
-  });
-}
-
-function onGoTo(page: DevTool.Page) {
-  basicSendMessage({
-    type: DEV_PAGE_JUMP,
-    data: {
-      path: '/' + page.path,
-      type: page.type,
-    },
-  });
-}
-
-function onRouteRefresh() {
-  basicSendMessage({
-    type: DEV_ROUTE_REFRESH,
-    data: {},
-  });
-}
-
-function onSearchRoute(value: string) {
-  routeList.value = backup.routeList
-    ?.filter((item) => item.path.includes(value) || item.name?.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        name: hightLight(item.name, searchRoute.value),
-        path: hightLight(item.path, searchRoute.value),
-      };
-    });
-}
-
-function onShowDevButton(show: boolean) {
-  basicSendMessage({
-    type: DEV_BUTTON_SHOW_OR_HIDE,
-    data: {
-      show,
-    },
-  });
-}
-
-function onRestartDevTool() {
-  basicSendMessage({
-    type: DEV_RESTART_DEBUGGER,
-    data: {},
-  });
-}
-
-function onRestartApp() {
-  basicSendMessage({
-    type: DEV_RESTART_APP,
-    data: {},
-  });
-}
-
-function onExportLog(exports: {
-  exportLog: boolean;
-  exportNetwork: boolean;
-  exportStorage: boolean;
-}) {
-  basicSendMessage({
-    type: DEV_EXPORT_LOG,
-    data: {
-      ...exports,
-    },
-  });
-}
-
-function onScreenshot() {
-  basicSendMessage({
-    type: 'dev-tool-hide-screenshot',
-    data: {},
-  });
-}
-
-function onClearCache() {
-  basicSendMessage({
-    type: DEV_LOG_CACHE_CLEAR,
-    data: {},
-  });
-}
-
-function onDestroyDevTool() {
-  basicSendMessage({
-    type: DEV_DESTROY,
-    data: {},
-  });
-}
-
-function onChangeVuex(value: Record<string, any>) {
-  basicSendMessage({
-    type: DEV_VUEX_CHANGE,
-    data: value,
-  });
-}
-
-function onChangePinia(value: Record<string, any>) {
-  basicSendMessage({
-    type: DEV_PINIA_CHANGE,
-    data: value,
-  });
-}
-</script>
-
-<style scoped>
-.dev-tool-window {
-  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;
-  box-sizing: border-box;
-}
-.dev-tool-window .dev-tool-window-bg {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(6px);
-}
-.dev-tool-window .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>