vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v3/DevToolWindow/index.vue

@@ -0,0 +1,1116 @@
+<template>
+  <view
+    class="dev-tool-window"
+    v-if="open"
+    :style="{ zIndex: zIndex }"
+    :class="`dev-tool-window dev-tool-window-${theme}`"
+  >
+    <!-- :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"
+          :theme="theme"
+          @showDevButton="onShowDevButton"
+          @restartDevTool="onRestartDevTool"
+          @restartApp="onRestartApp"
+          @exportLog="onExportLog"
+          @screenshot="onScreenshot"
+          @clearCache="onClearCache"
+          @destroyDevTool="onDestroyDevTool"
+          @changeTheme="onChangeTheme"
+        />
+      </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 theme = ref('light');
+
+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;
+    theme.value = devToolInfo?.theme || 'light';
+  }
+  if (props.data) {
+    listenPostMessage(props.data);
+  }
+
+  uni.onThemeChange((res) => {
+    theme.value = res.theme;
+  });
+});
+
+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 onChangeTheme(t: string) {
+  theme.value = t;
+
+  setDevToolInfo({
+    theme: t,
+  });
+}
+
+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 {
+  --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>