vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/DevTool/components/DevToolWindow/hooks/useDevToolData.ts

@@ -1,387 +1,411 @@
-import { shallowRef, reactive, ref } from 'vue';
-import type { DevTool } from '../../../../../type';
-
-import { hightLight } from '../../../../../utils/index';
-import { calcLineStartAndEnd, calcNetworkTimeline } from './dataUtils';
-
-export function useDevToolData(props: any) {
-  const consoleList = shallowRef<DevTool.ConsoleItem[]>([]);
-  const networkList = shallowRef<DevTool.NetworkItem[]>([]);
-  const transferList = shallowRef<DevTool.TransferItem[]>([]);
-  const storageList = shallowRef<DevTool.StorageItem[]>([]);
-  const routeList = shallowRef<DevTool.Page[]>([]);
-  const wsList = shallowRef<DevTool.WS[]>([]);
-  const vuexList = shallowRef<Record<string, any>>({});
-  const piniaList = shallowRef<Record<string, any>>({});
-
-  const elEventList = shallowRef<DevTool.ElEventItem[]>([]);
-  const uniEventList = shallowRef<DevTool.UniEventItem[]>([]);
-  const eventCount = shallowRef<DevTool.EventCount>();
-  const screenList = shallowRef<DevTool.ScreenItem[]>([]);
-  const interceptNetworkList = shallowRef<DevTool.NetworkItem[]>([]);
-  const scanCodeList = shallowRef<DevTool.ScanCodeItem[]>([]);
-  const nfcList = shallowRef<DevTool.NFCItem[]>([]);
-
-  const netWorkStatus = ref<{ isConnected?: boolean; networkType?: string }>(
-    {},
-  );
-  const sizeFormat = shallowRef('');
-  const devToolVisible = shallowRef(true);
-  const cacheInterceptConfig = shallowRef(true);
-  const cacheNetworkLog = shallowRef(false);
-  const cacheConsoleLog = shallowRef(false);
-  const useTransition = shallowRef(true);
-  const baseFontSize = shallowRef(12);
-  const tagFontSize = shallowRef(10);
-  const tipsFontSize = shallowRef(10);
-  const fontFamily = shallowRef('');
-  const fontWeight = shallowRef('normal');
-  const performanceVisible = shallowRef(false);
-  const performanceShowFps = shallowRef(true);
-  const performanceShowCpu = shallowRef(true);
-  const barrageVisible = shallowRef(true);
-  const barrageShowWhenOpen = shallowRef(false);
-  const barrageMaxTracks = shallowRef(10);
-  const barrageTrackHeight = shallowRef(36);
-  const barrageStartTop = shallowRef(40);
-  const barrageDuration = shallowRef(6);
-  const barrageMaxLength = shallowRef(100);
-  const barrageTypes = shallowRef([
-    'log',
-    'info',
-    'warn',
-    'error',
-    'network',
-    'transfer',
-    'websocket',
-  ]);
-
-  // 窗口管理状态
-  const isFullScreen = ref(true);
-  const windowX = ref(10);
-  const windowY = ref(100);
-  const windowWidth = ref(375);
-  const windowHeight = ref(450);
-
-  const backup = {
-    consoleList: [] as DevTool.ConsoleItem[],
-    networkList: [] as DevTool.NetworkItem[],
-    storageList: [] as DevTool.StorageItem[],
-    wsList: [] as DevTool.WS[],
-    transferList: [] as DevTool.TransferItem[],
-    routeList: [] as DevTool.Page[],
-    uniEventList: [] as DevTool.UniEventItem[],
-  };
-
-  const buildInfo = reactive({
-    devToolVersion: '0.0.0',
-    devToolBuildTime: '',
-    devToolGit: '',
-  });
-
-  // 搜索和过滤相关的状态（部分可能需要放在这里以便在 listenPostMessage 中使用）
-  const currentConsoleType = shallowRef('all');
-  const currentNetworkType = shallowRef('all');
-  const currentNetworkSort = shallowRef<1 | -1>(1);
-  const currentTransferCategory = shallowRef('all');
-  const currentTransferType = shallowRef('all');
-  const currentWebSocketType = shallowRef('all');
-  const searchConsole = shallowRef('');
-  const searchNetwork = shallowRef('');
-  const searchTransfer = shallowRef('');
-  const searchWs = shallowRef('');
-  const searchRoute = shallowRef('');
-  const searchStorage = shallowRef('');
-
-  const activeTab = shallowRef(1);
-  const tabScrollLeft = shallowRef(0);
-  const theme = shallowRef('light');
-  let isActive = false;
-
-  const setIsActive = (value: boolean) => {
-    isActive = value;
-  };
-
-  const listenPostMessage = (data: DevTool.WindowData) => {
-    if (!props.open) return;
-    if (!isActive) return;
-
-    if (data.devToolVisible !== undefined)
-      devToolVisible.value = data.devToolVisible;
-    if (data.cacheInterceptConfig !== undefined)
-      cacheInterceptConfig.value = data.cacheInterceptConfig;
-    if (data.cacheNetworkLog !== undefined)
-      cacheNetworkLog.value = data.cacheNetworkLog;
-    if (data.cacheConsoleLog !== undefined)
-      cacheConsoleLog.value = data.cacheConsoleLog;
-    if (data.useTransition !== undefined)
-      useTransition.value = data.useTransition;
-    if (data.baseFontSize !== undefined) baseFontSize.value = data.baseFontSize;
-    if (data.tagFontSize !== undefined) tagFontSize.value = data.tagFontSize;
-    if (data.tipsFontSize !== undefined) tipsFontSize.value = data.tipsFontSize;
-    if (data.fontFamily !== undefined) fontFamily.value = data.fontFamily;
-    if (data.fontWeight !== undefined) fontWeight.value = data.fontWeight;
-    if (data.performanceVisible !== undefined)
-      performanceVisible.value = data.performanceVisible;
-    if (data.performanceShowFps !== undefined)
-      performanceShowFps.value = data.performanceShowFps;
-    if (data.performanceShowCpu !== undefined)
-      performanceShowCpu.value = data.performanceShowCpu;
-    if (data.barrageVisible !== undefined)
-      barrageVisible.value = data.barrageVisible;
-    if (data.barrageShowWhenOpen !== undefined)
-      barrageShowWhenOpen.value = data.barrageShowWhenOpen;
-    if (data.barrageMaxTracks !== undefined)
-      barrageMaxTracks.value = data.barrageMaxTracks;
-    if (data.barrageTrackHeight !== undefined)
-      barrageTrackHeight.value = data.barrageTrackHeight;
-    if (data.barrageStartTop !== undefined)
-      barrageStartTop.value = data.barrageStartTop;
-    if (data.barrageDuration !== undefined)
-      barrageDuration.value = data.barrageDuration;
-    if (data.barrageMaxLength !== undefined)
-      barrageMaxLength.value = data.barrageMaxLength;
-    if (data.barrageTypes !== undefined) {
-      if (Array.isArray(data.barrageTypes)) {
-        barrageTypes.value = data.barrageTypes;
-      } else {
-        // 如果收到了非数组（如诡异的循环引用字符串），打印个警告并忽略
-        console.warn(
-          '[DevTool] Received invalid barrageTypes:',
-          data.barrageTypes,
-        );
-      }
-    }
-
-    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) {
-      const { startTime, endTime } = calcLineStartAndEnd(data.networkList);
-      const list = calcNetworkTimeline(data.networkList, startTime, endTime);
-
-      networkList.value = list
-        .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),
-          };
-        })
-        ?.sort((a, b) => {
-          if (currentNetworkSort.value === 1) {
-            return b.startTime - a.startTime;
-          } else {
-            return a.startTime - b.startTime;
-          }
-        });
-
-      backup.networkList = [...data.networkList];
-    }
-
-    if (data.transferList) {
-      transferList.value = [...(data.transferList ?? [])]
-        .filter((item) => {
-          const typeMatch =
-            currentTransferCategory.value === 'all' ||
-            item.type === currentTransferCategory.value;
-          const statusMatch =
-            currentTransferType.value === 'all' ||
-            item.status === currentTransferType.value;
-
-          if (currentTransferType.value === 'clear') return true;
-
-          return typeMatch && statusMatch;
-        })
-        .filter((item) => {
-          return item.url?.includes(searchTransfer.value);
-        })
-        ?.map((item) => {
-          return {
-            ...item,
-            url: hightLight(item.url, searchTransfer.value),
-          };
-        }) as any;
-      backup.transferList = [...data.transferList];
-    }
-
-    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,
-            _highlightUrl: 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.elEventList) elEventList.value = [...data.elEventList];
-    if (data.uniEventList) uniEventList.value = [...data.uniEventList];
-    if (data.eventCount) eventCount.value = { ...data.eventCount };
-    if (data.vuexList) vuexList.value = data.vuexList;
-    if (data.piniaList) piniaList.value = data.piniaList;
-    if (data.netWorkStatus) netWorkStatus.value = data.netWorkStatus;
-    if (data.sizeFormat) sizeFormat.value = data.sizeFormat;
-    if (data.screenList) screenList.value = [...data.screenList];
-    if (data.interceptNetworkMap) {
-      interceptNetworkList.value = Array.from(
-        data.interceptNetworkMap.values(),
-      );
-    }
-
-    if (data.devToolVersion || data.devToolBuildTime || data.devToolGit) {
-      Object.assign(buildInfo, {
-        devToolVersion: data.devToolVersion,
-        devToolBuildTime: data.devToolBuildTime,
-        devToolGit: data.devToolGit,
-      });
-    }
-
-    if (data.scanCodeList) scanCodeList.value = [...data.scanCodeList];
-    if (data.nfcList) nfcList.value = [...data.nfcList];
-  };
-
-  return {
-    consoleList,
-    networkList,
-    transferList,
-    storageList,
-    routeList,
-    wsList,
-    vuexList,
-    piniaList,
-    elEventList,
-    uniEventList,
-    eventCount,
-    screenList,
-    interceptNetworkList,
-    scanCodeList,
-    nfcList,
-    netWorkStatus,
-    sizeFormat,
-    devToolVisible,
-    cacheInterceptConfig,
-    cacheNetworkLog,
-    cacheConsoleLog,
-    useTransition,
-    baseFontSize,
-    tagFontSize,
-    tipsFontSize,
-    fontFamily,
-    fontWeight,
-    performanceVisible,
-    performanceShowFps,
-    performanceShowCpu,
-    barrageVisible,
-    barrageShowWhenOpen,
-    barrageMaxTracks,
-    barrageTrackHeight,
-    barrageStartTop,
-    barrageDuration,
-    barrageMaxLength,
-    barrageTypes,
-    backup,
-    buildInfo,
-    currentConsoleType,
-    currentNetworkType,
-    currentNetworkSort,
-    currentTransferType,
-    currentTransferCategory,
-    currentWebSocketType,
-    searchConsole,
-    searchNetwork,
-    searchTransfer,
-    searchWs,
-    searchRoute,
-    searchStorage,
-    activeTab,
-    tabScrollLeft,
-    theme,
-    isFullScreen,
-    windowX,
-    windowY,
-    windowWidth,
-    windowHeight,
-    setIsActive,
-    listenPostMessage,
-  };
-}
+import { shallowRef, reactive, ref } from 'vue';
+import type { DevTool } from '../../../../../type';
+
+import { hightLight } from '../../../../../utils/index';
+import { calcLineStartAndEnd, calcNetworkTimeline } from './dataUtils';
+
+export interface DevToolWindowProps {
+  open?: boolean;
+  data?: DevTool.WindowData;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+  zIndex?: number;
+  contentHeight: number;
+  customStyle?: Record<string, string | number>;
+  origin?: { x: number; y: number };
+}
+
+export function useDevToolData(props: DevToolWindowProps) {
+  const consoleList = shallowRef<DevTool.ConsoleItem[]>([]);
+  const networkList = shallowRef<DevTool.NetworkItem[]>([]);
+  const transferList = shallowRef<DevTool.TransferItem[]>([]);
+  const storageList = shallowRef<DevTool.StorageItem[]>([]);
+  const routeList = shallowRef<DevTool.Page[]>([]);
+  const wsList = shallowRef<DevTool.WS[]>([]);
+  const vuexList = shallowRef<Record<string, any>>({});
+  const piniaList = shallowRef<Record<string, any>>({});
+
+  const elEventList = shallowRef<DevTool.ElEventItem[]>([]);
+  const uniEventList = shallowRef<DevTool.UniEventItem[]>([]);
+  const eventCount = shallowRef<DevTool.EventCount>();
+  const screenList = shallowRef<DevTool.ScreenItem[]>([]);
+  const interceptNetworkList = shallowRef<DevTool.NetworkItem[]>([]);
+  const scanCodeList = shallowRef<DevTool.ScanCodeItem[]>([]);
+  const nfcList = shallowRef<DevTool.NFCItem[]>([]);
+
+  const netWorkStatus = ref<{ isConnected?: boolean; networkType?: string }>(
+    {},
+  );
+  const sizeFormat = shallowRef('');
+  const devToolVisible = shallowRef(true);
+  const cacheInterceptConfig = shallowRef(true);
+  const cacheNetworkLog = shallowRef(false);
+  const cacheConsoleLog = shallowRef(false);
+  const useTransition = shallowRef(true);
+  const baseFontSize = shallowRef(12);
+  const tagFontSize = shallowRef(10);
+  const tipsFontSize = shallowRef(10);
+  const fontFamily = shallowRef('');
+  const fontWeight = shallowRef('normal');
+  const performanceVisible = shallowRef(false);
+  const performanceShowFps = shallowRef(true);
+  const performanceShowCpu = shallowRef(true);
+  const barrageVisible = shallowRef(true);
+  const barrageShowWhenOpen = shallowRef(false);
+  const barrageMaxTracks = shallowRef(10);
+  const barrageTrackHeight = shallowRef(36);
+  const barrageStartTop = shallowRef(40);
+  const barrageDuration = shallowRef(6);
+  const barrageMaxLength = shallowRef(100);
+  const barrageAllowDrag = shallowRef(true);
+  const barrageTypes = shallowRef([
+    'log',
+    'info',
+    'warn',
+    'error',
+    'network',
+    'transfer',
+    'websocket',
+  ]);
+
+  // 窗口管理状态
+  const isFullScreen = ref(true);
+  const windowX = ref(10);
+  const windowY = ref(100);
+  const windowWidth = ref(375);
+  const windowHeight = ref(450);
+
+  const backup = {
+    consoleList: [] as DevTool.ConsoleItem[],
+    networkList: [] as DevTool.NetworkItem[],
+    storageList: [] as DevTool.StorageItem[],
+    wsList: [] as DevTool.WS[],
+    transferList: [] as DevTool.TransferItem[],
+    routeList: [] as DevTool.Page[],
+    uniEventList: [] as DevTool.UniEventItem[],
+  };
+
+  const buildInfo = reactive({
+    devToolVersion: '0.0.0',
+    devToolBuildTime: '',
+    devToolGit: '',
+  });
+
+  // 搜索和过滤相关的状态（部分可能需要放在这里以便在 listenPostMessage 中使用）
+  const currentConsoleType = shallowRef('all');
+  const currentNetworkType = shallowRef('all');
+  const currentNetworkSort = shallowRef<1 | -1>(1);
+  const currentTransferCategory = shallowRef('all');
+  const currentTransferType = shallowRef('all');
+  const currentWebSocketType = shallowRef('all');
+  const searchConsole = shallowRef('');
+  const searchNetwork = shallowRef('');
+  const searchTransfer = shallowRef('');
+  const searchWs = shallowRef('');
+  const searchRoute = shallowRef('');
+  const searchStorage = shallowRef('');
+
+  const activeTab = shallowRef(1);
+  const tabScrollLeft = shallowRef(0);
+  const theme = shallowRef('light');
+  let isActive = false;
+
+  const setIsActive = (value: boolean) => {
+    isActive = value;
+  };
+
+  const listenPostMessage = (data: DevTool.WindowData) => {
+    if (!props.open) return;
+    if (!isActive) return;
+
+    if (data.devToolVisible !== undefined)
+      devToolVisible.value = data.devToolVisible;
+    if (data.cacheInterceptConfig !== undefined)
+      cacheInterceptConfig.value = data.cacheInterceptConfig;
+    if (data.cacheNetworkLog !== undefined)
+      cacheNetworkLog.value = data.cacheNetworkLog;
+    if (data.cacheConsoleLog !== undefined)
+      cacheConsoleLog.value = data.cacheConsoleLog;
+    if (data.useTransition !== undefined)
+      useTransition.value = data.useTransition;
+    if (data.baseFontSize !== undefined) baseFontSize.value = data.baseFontSize;
+    if (data.tagFontSize !== undefined) tagFontSize.value = data.tagFontSize;
+    if (data.tipsFontSize !== undefined) tipsFontSize.value = data.tipsFontSize;
+    if (data.fontFamily !== undefined) fontFamily.value = data.fontFamily;
+    if (data.fontWeight !== undefined) fontWeight.value = data.fontWeight;
+    if (data.performanceVisible !== undefined)
+      performanceVisible.value = data.performanceVisible;
+    if (data.performanceShowFps !== undefined)
+      performanceShowFps.value = data.performanceShowFps;
+    if (data.performanceShowCpu !== undefined)
+      performanceShowCpu.value = data.performanceShowCpu;
+    if (data.barrageVisible !== undefined)
+      barrageVisible.value = data.barrageVisible;
+    if (data.barrageShowWhenOpen !== undefined)
+      barrageShowWhenOpen.value = data.barrageShowWhenOpen;
+    if (data.barrageMaxTracks !== undefined)
+      barrageMaxTracks.value = data.barrageMaxTracks;
+    if (data.barrageTrackHeight !== undefined)
+      barrageTrackHeight.value = data.barrageTrackHeight;
+    if (data.barrageStartTop !== undefined)
+      barrageStartTop.value = data.barrageStartTop;
+    if (data.barrageDuration !== undefined)
+      barrageDuration.value = data.barrageDuration;
+    if (data.barrageMaxLength !== undefined)
+      barrageMaxLength.value = data.barrageMaxLength;
+    if (data.barrageAllowDrag !== undefined)
+      barrageAllowDrag.value = data.barrageAllowDrag;
+    if (data.barrageTypes !== undefined) {
+      if (Array.isArray(data.barrageTypes)) {
+        barrageTypes.value = data.barrageTypes;
+      } else {
+        // 如果收到了非数组（如诡异的循环引用字符串），打印个警告并忽略
+        console.warn(
+          '[DevTool] Received invalid barrageTypes:',
+          data.barrageTypes,
+        );
+      }
+    }
+
+    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) => {
+          const content =
+            item.args
+              ?.map((arg) => (arg.type === 'string' ? arg.value : ''))
+              .join('') || '';
+          return (
+            content.includes(searchConsole.value) ||
+            item.position.includes(searchConsole.value) ||
+            (item.stack && item.stack.includes(searchConsole.value))
+          );
+        })
+        ?.map((item) => {
+          return {
+            ...item,
+            _positionHtml: hightLight(item.position, searchConsole.value),
+            _stackHtml: item.stack
+              ? hightLight(item.stack, searchConsole.value)
+              : '',
+            args: item.args.map((arg) => {
+              if (arg.type === 'string') {
+                return {
+                  ...arg,
+                  _valueHtml: hightLight(
+                    arg.value as string,
+                    searchConsole.value,
+                  ),
+                };
+              }
+              return arg;
+            }),
+          };
+        });
+
+      backup.consoleList = [...data.consoleList];
+    }
+
+    if (data.networkList) {
+      const { startTime, endTime } = calcLineStartAndEnd(data.networkList);
+      const list = calcNetworkTimeline(data.networkList, startTime, endTime);
+
+      networkList.value = list
+        .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),
+          };
+        })
+        ?.sort((a, b) => {
+          if (currentNetworkSort.value === 1) {
+            return b.startTime - a.startTime;
+          } else {
+            return a.startTime - b.startTime;
+          }
+        });
+
+      backup.networkList = [...data.networkList];
+    }
+
+    if (data.transferList) {
+      transferList.value = [...(data.transferList ?? [])]
+        .filter((item) => {
+          const typeMatch =
+            currentTransferCategory.value === 'all' ||
+            item.type === currentTransferCategory.value;
+          const statusMatch =
+            currentTransferType.value === 'all' ||
+            item.status === currentTransferType.value;
+
+          if (currentTransferType.value === 'clear') return true;
+
+          return typeMatch && statusMatch;
+        })
+        .filter((item) => {
+          return item.url?.includes(searchTransfer.value);
+        })
+        ?.map((item) => {
+          return {
+            ...item,
+            url: hightLight(item.url, searchTransfer.value),
+          };
+        }) as any;
+      backup.transferList = [...data.transferList];
+    }
+
+    if (data.storageList) {
+      storageList.value = [...(data.storageList ?? [])]
+        ?.filter(
+          (item) => item._oldKey && item._oldKey.includes(searchStorage.value),
+        )
+        ?.map((item) => {
+          const oldKey = item._oldKey || '';
+          return {
+            ...item,
+            _oldKey: hightLight(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,
+            _highlightUrl: 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.elEventList) elEventList.value = [...data.elEventList];
+    if (data.uniEventList) uniEventList.value = [...data.uniEventList];
+    if (data.eventCount) eventCount.value = { ...data.eventCount };
+    if (data.vuexList) vuexList.value = data.vuexList;
+    if (data.piniaList) piniaList.value = data.piniaList;
+    if (data.netWorkStatus) netWorkStatus.value = data.netWorkStatus;
+    if (data.sizeFormat) sizeFormat.value = data.sizeFormat;
+    if (data.screenList) screenList.value = [...data.screenList];
+    if (data.interceptNetworkMap) {
+      interceptNetworkList.value = Array.from(
+        data.interceptNetworkMap.values(),
+      );
+    }
+
+    if (data.devToolVersion || data.devToolBuildTime || data.devToolGit) {
+      Object.assign(buildInfo, {
+        devToolVersion: data.devToolVersion,
+        devToolBuildTime: data.devToolBuildTime,
+        devToolGit: data.devToolGit,
+      });
+    }
+
+    if (data.scanCodeList) scanCodeList.value = [...data.scanCodeList];
+    if (data.nfcList) nfcList.value = [...data.nfcList];
+  };
+
+  return {
+    consoleList,
+    networkList,
+    transferList,
+    storageList,
+    routeList,
+    wsList,
+    vuexList,
+    piniaList,
+    elEventList,
+    uniEventList,
+    eventCount,
+    screenList,
+    interceptNetworkList,
+    scanCodeList,
+    nfcList,
+    netWorkStatus,
+    sizeFormat,
+    devToolVisible,
+    cacheInterceptConfig,
+    cacheNetworkLog,
+    cacheConsoleLog,
+    useTransition,
+    baseFontSize,
+    tagFontSize,
+    tipsFontSize,
+    fontFamily,
+    fontWeight,
+    performanceVisible,
+    performanceShowFps,
+    performanceShowCpu,
+    barrageVisible,
+    barrageShowWhenOpen,
+    barrageMaxTracks,
+    barrageTrackHeight,
+    barrageStartTop,
+    barrageDuration,
+    barrageMaxLength,
+    barrageAllowDrag,
+    barrageTypes,
+    backup,
+    buildInfo,
+    currentConsoleType,
+    currentNetworkType,
+    currentNetworkSort,
+    currentTransferType,
+    currentTransferCategory,
+    currentWebSocketType,
+    searchConsole,
+    searchNetwork,
+    searchTransfer,
+    searchWs,
+    searchRoute,
+    searchStorage,
+    activeTab,
+    tabScrollLeft,
+    theme,
+    isFullScreen,
+    windowX,
+    windowY,
+    windowWidth,
+    windowHeight,
+    setIsActive,
+    listenPostMessage,
+  };
+}