vite-uni-dev-tool 0.0.48 → 1.0.0

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

@@ -0,0 +1,338 @@
+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 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.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,
+    backup,
+    buildInfo,
+    currentConsoleType,
+    currentNetworkType,
+    currentNetworkSort,
+    currentTransferType,
+    currentTransferCategory,
+    currentWebSocketType,
+    searchConsole,
+    searchNetwork,
+    searchTransfer,
+    searchWs,
+    searchRoute,
+    searchStorage,
+    activeTab,
+    tabScrollLeft,
+    theme,
+    isFullScreen,
+    windowX,
+    windowY,
+    windowWidth,
+    windowHeight,
+    setIsActive,
+    listenPostMessage,
+  };
+}