vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{DevToolWindow → DevTool/components/DevToolWindow}/hooks/useDevToolHandlers.ts

@@ -1,549 +1,629 @@
-import { debounce } from '../../../utils/index';
-import { setDevToolInfo } from '../../../modules/devToolInfo';
-import type { DevTool } from '../../../type';
-import { CMD_TYPE, MSG_TYPE, DEV_CORE_MESSAGE } from '../../../const';
-import { hightLight } from '../../../utils/index';
-
-export function useDevToolHandlers(props: any, emits: any, state: any) {
-  const {
-    activeTab,
-    currentConsoleType,
-    currentNetworkType,
-    currentWebSocketType,
-    currentTransferType,
-    currentTransferCategory,
-    tabScrollLeft,
-    cacheInterceptConfig,
-    useTransition,
-    baseFontSize,
-    tagFontSize,
-    tipsFontSize,
-    fontFamily,
-    fontWeight,
-    cacheNetworkLog,
-    cacheConsoleLog,
-    interceptNetworkList,
-    consoleList,
-    networkList,
-    transferList,
-    wsList,
-    storageList,
-    elEventList,
-    uniEventList,
-    eventCount,
-    screenList,
-    scanCodeList,
-    nfcList,
-    routeList,
-    backup,
-    searchConsole,
-    theme,
-    currentNetworkSort,
-  } = state;
-
-  /** 发送消息给核心模块 */
-  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,
-      theme: theme.value,
-      tabScrollLeft: tabScrollLeft.value,
-      cacheInterceptConfig: cacheInterceptConfig.value,
-      cacheNetworkLog: cacheNetworkLog.value,
-      cacheConsoleLog: cacheConsoleLog.value,
-      useTransition: useTransition.value,
-      baseFontSize: baseFontSize.value,
-      tagFontSize: tagFontSize.value,
-      tipsFontSize: tipsFontSize.value,
-      fontFamily: fontFamily.value,
-      fontWeight: fontWeight.value,
-      interceptNetworkList: interceptNetworkList.value,
-      performanceShowFps: state.performanceShowFps.value,
-      performanceShowCpu: state.performanceShowCpu.value,
-    });
-  }
-
-  const debounceSetWindowInfo = debounce(setWindowInfo, 200);
-
-  function onCloseWindow() {
-    emits('close');
-    setWindowInfo();
-  }
-
-  function onChangeTabs(index: number) {
-    activeTab.value = index;
-    setWindowInfo();
-  }
-
-  function onScrollTabs(e: any) {
-    tabScrollLeft.value = e.detail.scrollLeft;
-    debounceSetWindowInfo();
-  }
-
-  const debounceScrollTabs = debounce(onScrollTabs, 200);
-
-  function onConsoleChoose(type: string) {
-    if (type === 'clear') {
-      consoleList.value = [];
-      backup.consoleList = [];
-      basicSendMessage({ type: CMD_TYPE.CONSOLE_CLEAR, data: {} });
-    } else if (type === 'all') {
-      currentConsoleType.value = type;
-      consoleList.value = backup.consoleList;
-    } else {
-      currentConsoleType.value = type;
-      consoleList.value = backup.consoleList.filter(
-        (item: any) => item.type === type,
-      );
-    }
-    setWindowInfo();
-  }
-
-  function onRunJS(code: string) {
-    basicSendMessage({ type: CMD_TYPE.RUN_JS, data: { code } });
-  }
-
-  function onSearchConsole(value: string) {
-    consoleList.value = backup.consoleList
-      .filter((item: any) => {
-        return (
-          item.args.some(
-            (arg: any) => arg.type === 'string' && arg.value.includes(value),
-          ) ||
-          item.position.includes(value) ||
-          item?.stack?.includes(value)
-        );
-      })
-      ?.map((item: any) => {
-        return {
-          ...item,
-          position: hightLight(item.position, searchConsole.value),
-          stack: hightLight(item.stack, searchConsole.value),
-          args: item.args.map((arg: any) => {
-            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: CMD_TYPE.NETWORK_CLEAR, data: {} });
-    } else if (type === 'all') {
-      currentNetworkType.value = type;
-      networkList.value = backup.networkList;
-    } else if (type === 'error') {
-      currentNetworkType.value = type;
-      networkList.value = backup.networkList.filter((item: any) => {
-        return item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '');
-      });
-    } else {
-      currentNetworkType.value = type;
-      networkList.value = backup.networkList.filter(
-        (item: any) => item.method === type,
-      );
-    }
-    setWindowInfo();
-  }
-
-  function onSearchNetwork(value: string) {
-    networkList.value = backup.networkList
-      .filter((item: any) => {
-        if (currentNetworkType.value === 'all') return item;
-        return item.method === currentNetworkType.value;
-      })
-      ?.filter((item: any) => item?.url?.includes(value))
-      ?.map((item: any) => {
-        return { ...item, url: hightLight(item.url, value) };
-      });
-  }
-
-  function onSortNetwork(sort: -1 | 1) {
-    currentNetworkSort.value = sort;
-    const list = networkList.value.sort((a: any, b: any) => {
-      return sort === 1 ? b.startTime - a.startTime : a.startTime - b.startTime;
-    });
-    networkList.value = [...list];
-  }
-
-  function filterTransferList() {
-    transferList.value = backup.transferList.filter((item: any) => {
-      const typeMatch =
-        currentTransferCategory.value === 'all' ||
-        item.type === currentTransferCategory.value;
-      let statusMatch =
-        currentTransferType.value === 'all' ||
-        item.status === currentTransferType.value;
-
-      if (currentTransferType.value === 'pending') {
-        statusMatch = ['pending', 'uploading', 'downloading'].includes(
-          item.status,
-        );
-      }
-
-      return typeMatch && statusMatch;
-    });
-  }
-
-  function onTransferChoose(type: string) {
-    if (type === 'clear') {
-      transferList.value = [];
-      backup.transferList = [];
-      basicSendMessage({ type: CMD_TYPE.TRANSFER_CLEAR, data: {} });
-    } else {
-      currentTransferType.value = type;
-      filterTransferList();
-    }
-  }
-
-  function onTransferCategoryChoose(category: string) {
-    currentTransferCategory.value = category;
-    filterTransferList();
-  }
-
-  function onSearchTransfer(value: string) {
-    filterTransferList(); // Reset list based on filters first
-    transferList.value = transferList.value
-      .filter((item: any) => item.url?.includes(value))
-      ?.map((item: any) => {
-        return { ...item, url: hightLight(item.url, value) };
-      });
-  }
-
-  function onWebSocketChoose(type: string) {
-    if (type === 'clear') {
-      wsList.value = [];
-      backup.wsList = [];
-      basicSendMessage({ type: CMD_TYPE.WS_CLEAR, data: {} });
-    } else if (type === 'all') {
-      currentWebSocketType.value = type;
-      wsList.value = backup.wsList;
-    } else {
-      currentWebSocketType.value = type;
-      wsList.value = backup.wsList.filter(
-        (item: any) => item.readyState === type,
-      );
-    }
-    setWindowInfo();
-  }
-
-  function onSearchWs(value: string) {
-    wsList.value = backup.wsList
-      .filter((item: any) => {
-        if (currentWebSocketType.value === 'all') return item;
-        return item.readyState === currentWebSocketType.value;
-      })
-      .filter((item: any) => item.url.includes(value))
-      ?.map((item: any) => {
-        return { ...item, url: hightLight(item.url, value) };
-      });
-  }
-
-  function onStorageChoose(type: string) {
-    if (type === 'clear') {
-      backup.storageList = [];
-      storageList.value = [];
-      basicSendMessage({ type: CMD_TYPE.STORAGE_CLEAR, data: {} });
-    } else if (type === 'refresh') {
-      basicSendMessage({ type: CMD_TYPE.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: CMD_TYPE.STORAGE_ADD,
-        data: { key, value: newItem.value },
-      });
-    }
-  }
-
-  function onStorageRemove(key: string) {
-    backup.storageList = backup.storageList.filter(
-      (item: any) => item.key !== key,
-    );
-    storageList.value = backup.storageList;
-    basicSendMessage({ type: CMD_TYPE.STORAGE_REMOVE, data: { key } });
-  }
-
-  function onChangeStorage(data: DevTool.StorageItem) {
-    basicSendMessage({ type: CMD_TYPE.STORAGE_UPDATE, data });
-  }
-
-  function onSearchStorage(value: string) {
-    storageList.value = backup.storageList
-      .filter((item: any) => item._oldKey.includes(value))
-      ?.map((item: any) => {
-        return { ...item, _oldKey: hightLight(item._oldKey, value) };
-      });
-  }
-
-  function onElEventClear() {
-    elEventList.value = [];
-    basicSendMessage({ type: CMD_TYPE.EL_EVENT_CLEAR, data: {} });
-  }
-
-  function onUniEventClear() {
-    uniEventList.value = [];
-    eventCount.value = { on: 0, once: 0, emit: 0, off: 0 };
-    basicSendMessage({ type: CMD_TYPE.UNI_EVENT_CLEAR, data: {} });
-  }
-
-  function onCaptureScreenClear() {
-    screenList.value = [];
-    basicSendMessage({ type: CMD_TYPE.SCREEN_CLEAR, data: {} });
-  }
-
-  function onScanCodeListClear() {
-    scanCodeList.value = [];
-    basicSendMessage({ type: CMD_TYPE.SCAN_CODE_CLEAR, data: {} });
-  }
-
-  function onNfcClear() {
-    nfcList.value = [];
-    basicSendMessage({ type: CMD_TYPE.NFC_CLEAR, data: {} });
-  }
-
-  function onRouteRefresh() {
-    basicSendMessage({ type: CMD_TYPE.ROUTE_REFRESH, data: {} });
-  }
-
-  function onSearchRoute(value: string) {
-    routeList.value = backup.routeList
-      ?.filter(
-        (item: any) => item.path.includes(value) || item.name?.includes(value),
-      )
-      ?.map((item: any) => {
-        return {
-          ...item,
-          name: hightLight(item.name, value),
-          path: hightLight(item.path, value),
-        };
-      });
-  }
-
-  function onShowDevButton(show: boolean) {
-    basicSendMessage({ type: CMD_TYPE.BUTTON_TOGGLE, data: { show } });
-  }
-
-  function onRestartDevTool() {
-    basicSendMessage({ type: CMD_TYPE.RESTART_DEBUGGER, data: {} });
-  }
-
-  function onRestartApp() {
-    basicSendMessage({ type: CMD_TYPE.RESTART_APP, data: {} });
-  }
-
-  function onExportLog(exports: any) {
-    basicSendMessage({ type: CMD_TYPE.EXPORT_LOG, data: { ...exports } });
-  }
-
-  function onScreenshot() {
-    basicSendMessage({ type: 'dev-tool-hide-screenshot', data: {} });
-  }
-
-  function onClearCache() {
-    basicSendMessage({ type: CMD_TYPE.CACHE_CLEAR, data: {} });
-  }
-
-  function onDestroyDevTool() {
-    basicSendMessage({ type: CMD_TYPE.DESTROY, data: {} });
-  }
-
-  function onChangeTheme(t: string) {
-    theme.value = t;
-    setDevToolInfo({ theme: t });
-    emits('changeTheme', t);
-  }
-
-  function onChangeCacheInterceptConfig(value: boolean) {
-    setDevToolInfo({
-      cacheInterceptConfig: value,
-      interceptNetworkList: value ? interceptNetworkList.value : [],
-    });
-    basicSendMessage({
-      type: CMD_TYPE.SET_CACHE_INTERCEPT,
-      data: { cacheInterceptConfig: value },
-    });
-  }
-
-  function onChangeCacheNetworkLog(value: boolean) {
-    setDevToolInfo({
-      cacheNetworkLog: value,
-    });
-    cacheNetworkLog.value = value;
-    basicSendMessage({
-      type: CMD_TYPE.SET_CACHE_NETWORK_LOG,
-      data: { cacheNetworkLog: value },
-    });
-  }
-
-  function onChangeCacheConsoleLog(value: boolean) {
-    setDevToolInfo({
-      cacheConsoleLog: value,
-    });
-    cacheConsoleLog.value = value;
-    basicSendMessage({
-      type: CMD_TYPE.SET_CACHE_CONSOLE_LOG,
-      data: { cacheConsoleLog: value },
-    });
-  }
-
-  function onChangeUseTransition(value: boolean) {
-    useTransition.value = value;
-    setDevToolInfo({
-      useTransition: value,
-    });
-    basicSendMessage({
-      type: CMD_TYPE.SET_TRANSITION,
-      data: { useTransition: value },
-    });
-  }
-
-  function onChangeFontSize(data: {
-    baseFontSize: number;
-    tagFontSize: number;
-    tipsFontSize: number;
-    fontFamily: string;
-    fontWeight: string;
-  }) {
-    baseFontSize.value = data.baseFontSize;
-    tagFontSize.value = data.tagFontSize;
-    tipsFontSize.value = data.tipsFontSize;
-    fontFamily.value = data.fontFamily;
-    fontWeight.value = data.fontWeight;
-    setDevToolInfo(data);
-    basicSendMessage({
-      type: CMD_TYPE.SET_FONT,
-      data,
-    });
-  }
-
-  function onChangePerformance(show: boolean) {
-    state.performanceVisible.value = show;
-    setDevToolInfo({
-      performanceVisible: show,
-    });
-    uni.$emit(DEV_CORE_MESSAGE, { type: MSG_TYPE.PERF_VISIBLE, data: show });
-  }
-
-  function onChangePerformanceShowFps(show: boolean) {
-    state.performanceShowFps.value = show;
-    setDevToolInfo({
-      performanceShowFps: show,
-    });
-    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_FPS', show);
-  }
-
-  function onChangePerformanceShowCpu(show: boolean) {
-    state.performanceShowCpu.value = show;
-    setDevToolInfo({
-      performanceShowCpu: show,
-    });
-    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_CPU', show);
-  }
-
-  function onChangeVuex(value: any) {
-    basicSendMessage({ type: CMD_TYPE.VUEX_CHANGE, data: value });
-  }
-
-  function onChangePinia(value: any) {
-    basicSendMessage({ type: CMD_TYPE.PINIA_CHANGE, data: value });
-  }
-
-  function onClearWebSocketMessage(ws: DevTool.WS) {
-    basicSendMessage({ type: CMD_TYPE.WS_CLEAR_MESSAGE, data: ws });
-  }
-
-  function onSendWebSocket(data: { url: string; message: any }) {
-    basicSendMessage({ type: CMD_TYPE.WS_SEND, data });
-  }
-
-  function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
-    const index = interceptNetworkList.value.findIndex((item: any) => {
-      const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
-      const niKey = `${ni.method?.toUpperCase()}|${ni.url?.split('?')[0]}`;
-      return key === niKey;
-    });
-    const list = [...interceptNetworkList.value];
-    if (index > -1) {
-      list[index] = ni;
-    } else {
-      list.unshift(ni);
-    }
-    setDevToolInfo({
-      cacheInterceptConfig: cacheInterceptConfig.value,
-      interceptNetworkList: cacheInterceptConfig.value ? list : [],
-    });
-    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: [ni] });
-  }
-
-  function onRemoveInterceptConfig(ni: DevTool.NetworkItem) {
-    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: ni });
-  }
-
-  return {
-    onCloseWindow,
-    onChangeTabs,
-    debounceScrollTabs,
-    onConsoleChoose,
-    onRunJS,
-    onSearchConsole,
-    onNetworkChoose,
-    onSearchNetwork,
-    onSortNetwork,
-    onTransferChoose,
-    onTransferCategoryChoose,
-    onSearchTransfer,
-    onWebSocketChoose,
-    onSearchWs,
-    onStorageChoose,
-    onStorageRemove,
-    onChangeStorage,
-    onSearchStorage,
-    onElEventClear,
-    onUniEventClear,
-    onCaptureScreenClear,
-    onScanCodeListClear,
-    onNfcClear,
-    onRouteRefresh,
-    onSearchRoute,
-    onShowDevButton,
-    onRestartDevTool,
-    onRestartApp,
-    onExportLog,
-    onScreenshot,
-    onClearCache,
-    onDestroyDevTool,
-    onChangeTheme,
-    onChangeCacheInterceptConfig,
-    onChangeCacheNetworkLog,
-    onChangeCacheConsoleLog,
-    onChangeUseTransition,
-    onChangeFontSize,
-    onChangeVuex,
-    onChangePinia,
-    onClearWebSocketMessage,
-    onSendWebSocket,
-    onConfirmInterceptConfig,
-    onRemoveInterceptConfig,
-    onChangePerformance,
-    onChangePerformanceShowFps,
-    onChangePerformanceShowCpu,
-    basicSendMessage,
-  };
-}
+import { debounce } from '../../../../../utils/index';
+import { setDevToolInfo } from '../../../../../modules/devToolInfo';
+import type { DevTool } from '../../../../../type';
+import { CMD_TYPE, MSG_TYPE, DEV_CORE_MESSAGE } from '../../../../../const';
+import { hightLight } from '../../../../../utils/index';
+
+export function useDevToolHandlers(props: any, emits: any, state: any) {
+  const {
+    activeTab,
+    currentConsoleType,
+    currentNetworkType,
+    currentWebSocketType,
+    currentTransferType,
+    currentTransferCategory,
+    tabScrollLeft,
+    cacheInterceptConfig,
+    useTransition,
+    baseFontSize,
+    tagFontSize,
+    tipsFontSize,
+    fontFamily,
+    fontWeight,
+    cacheNetworkLog,
+    cacheConsoleLog,
+    interceptNetworkList,
+    consoleList,
+    networkList,
+    transferList,
+    wsList,
+    storageList,
+    elEventList,
+    uniEventList,
+    eventCount,
+    screenList,
+    scanCodeList,
+    nfcList,
+    routeList,
+    backup,
+    searchConsole,
+    theme,
+    currentNetworkSort,
+    barrageVisible,
+    barrageShowWhenOpen,
+  } = state;
+
+  /** 发送消息给核心模块 */
+  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,
+      theme: theme.value,
+      tabScrollLeft: tabScrollLeft.value,
+      cacheInterceptConfig: cacheInterceptConfig.value,
+      cacheNetworkLog: cacheNetworkLog.value,
+      cacheConsoleLog: cacheConsoleLog.value,
+      useTransition: useTransition.value,
+      baseFontSize: baseFontSize.value,
+      tagFontSize: tagFontSize.value,
+      tipsFontSize: tipsFontSize.value,
+      fontFamily: fontFamily.value,
+      fontWeight: fontWeight.value,
+      interceptNetworkList: interceptNetworkList.value,
+      performanceShowFps: state.performanceShowFps.value,
+      performanceShowCpu: state.performanceShowCpu.value,
+      barrageVisible: barrageVisible.value,
+      barrageShowWhenOpen: barrageShowWhenOpen.value,
+    });
+  }
+
+  const debounceSetWindowInfo = debounce(setWindowInfo, 200);
+
+  function onCloseWindow() {
+    emits('close');
+    setWindowInfo();
+  }
+
+  function onChangeTabs(index: number) {
+    activeTab.value = index;
+    setWindowInfo();
+  }
+
+  function onScrollTabs(e: any) {
+    tabScrollLeft.value = e.detail.scrollLeft;
+    debounceSetWindowInfo();
+  }
+
+  const debounceScrollTabs = debounce(onScrollTabs, 200);
+
+  function onConsoleChoose(type: string) {
+    if (type === 'clear') {
+      consoleList.value = [];
+      backup.consoleList = [];
+      basicSendMessage({ type: CMD_TYPE.CONSOLE_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentConsoleType.value = type;
+      consoleList.value = backup.consoleList;
+    } else {
+      currentConsoleType.value = type;
+      consoleList.value = backup.consoleList.filter(
+        (item: any) => item.type === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onRunJS(code: string) {
+    basicSendMessage({ type: CMD_TYPE.RUN_JS, data: { code } });
+  }
+
+  function onSearchConsole(value: string) {
+    consoleList.value = backup.consoleList
+      .filter((item: any) => {
+        return (
+          item.args.some(
+            (arg: any) => arg.type === 'string' && arg.value.includes(value),
+          ) ||
+          item.position.includes(value) ||
+          item?.stack?.includes(value)
+        );
+      })
+      ?.map((item: any) => {
+        return {
+          ...item,
+          position: hightLight(item.position, searchConsole.value),
+          stack: hightLight(item.stack, searchConsole.value),
+          args: item.args.map((arg: any) => {
+            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: CMD_TYPE.NETWORK_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList;
+    } else if (type === 'error') {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList.filter((item: any) => {
+        return item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '');
+      });
+    } else {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList.filter(
+        (item: any) => item.method === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onSearchNetwork(value: string) {
+    networkList.value = backup.networkList
+      .filter((item: any) => {
+        if (currentNetworkType.value === 'all') return item;
+        return item.method === currentNetworkType.value;
+      })
+      ?.filter((item: any) => item?.url?.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onSortNetwork(sort: -1 | 1) {
+    currentNetworkSort.value = sort;
+    const list = networkList.value.sort((a: any, b: any) => {
+      return sort === 1 ? b.startTime - a.startTime : a.startTime - b.startTime;
+    });
+    networkList.value = [...list];
+  }
+
+  function filterTransferList() {
+    transferList.value = backup.transferList.filter((item: any) => {
+      const typeMatch =
+        currentTransferCategory.value === 'all' ||
+        item.type === currentTransferCategory.value;
+      let statusMatch =
+        currentTransferType.value === 'all' ||
+        item.status === currentTransferType.value;
+
+      if (currentTransferType.value === 'pending') {
+        statusMatch = ['pending', 'uploading', 'downloading'].includes(
+          item.status,
+        );
+      }
+
+      return typeMatch && statusMatch;
+    });
+  }
+
+  function onTransferChoose(type: string) {
+    if (type === 'clear') {
+      transferList.value = [];
+      backup.transferList = [];
+      basicSendMessage({ type: CMD_TYPE.TRANSFER_CLEAR, data: {} });
+    } else {
+      currentTransferType.value = type;
+      filterTransferList();
+    }
+  }
+
+  function onTransferCategoryChoose(category: string) {
+    currentTransferCategory.value = category;
+    filterTransferList();
+  }
+
+  function onSearchTransfer(value: string) {
+    filterTransferList(); // Reset list based on filters first
+    transferList.value = transferList.value
+      .filter((item: any) => item.url?.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onWebSocketChoose(type: string) {
+    if (type === 'clear') {
+      wsList.value = [];
+      backup.wsList = [];
+      basicSendMessage({ type: CMD_TYPE.WS_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentWebSocketType.value = type;
+      wsList.value = backup.wsList;
+    } else {
+      currentWebSocketType.value = type;
+      wsList.value = backup.wsList.filter(
+        (item: any) => item.readyState === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onSearchWs(value: string) {
+    wsList.value = backup.wsList
+      .filter((item: any) => {
+        if (currentWebSocketType.value === 'all') return item;
+        return item.readyState === currentWebSocketType.value;
+      })
+      .filter((item: any) => item.url.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onStorageChoose(type: string) {
+    if (type === 'clear') {
+      backup.storageList = [];
+      storageList.value = [];
+      basicSendMessage({ type: CMD_TYPE.STORAGE_CLEAR, data: {} });
+    } else if (type === 'refresh') {
+      basicSendMessage({ type: CMD_TYPE.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: CMD_TYPE.STORAGE_ADD,
+        data: { key, value: newItem.value },
+      });
+    }
+  }
+
+  function onStorageRemove(key: string) {
+    backup.storageList = backup.storageList.filter(
+      (item: any) => item.key !== key,
+    );
+    storageList.value = backup.storageList;
+    basicSendMessage({ type: CMD_TYPE.STORAGE_REMOVE, data: { key } });
+  }
+
+  function onChangeStorage(data: DevTool.StorageItem) {
+    basicSendMessage({ type: CMD_TYPE.STORAGE_UPDATE, data });
+  }
+
+  function onSearchStorage(value: string) {
+    storageList.value = backup.storageList
+      .filter((item: any) => item._oldKey.includes(value))
+      ?.map((item: any) => {
+        return { ...item, _oldKey: hightLight(item._oldKey, value) };
+      });
+  }
+
+  function onElEventClear() {
+    elEventList.value = [];
+    basicSendMessage({ type: CMD_TYPE.EL_EVENT_CLEAR, data: {} });
+  }
+
+  function onUniEventClear() {
+    uniEventList.value = [];
+    eventCount.value = { on: 0, once: 0, emit: 0, off: 0 };
+    basicSendMessage({ type: CMD_TYPE.UNI_EVENT_CLEAR, data: {} });
+  }
+
+  function onCaptureScreenClear() {
+    screenList.value = [];
+    basicSendMessage({ type: CMD_TYPE.SCREEN_CLEAR, data: {} });
+  }
+
+  function onScanCodeListClear() {
+    scanCodeList.value = [];
+    basicSendMessage({ type: CMD_TYPE.SCAN_CODE_CLEAR, data: {} });
+  }
+
+  function onNfcClear() {
+    nfcList.value = [];
+    basicSendMessage({ type: CMD_TYPE.NFC_CLEAR, data: {} });
+  }
+
+  function onRouteRefresh() {
+    basicSendMessage({ type: CMD_TYPE.ROUTE_REFRESH, data: {} });
+  }
+
+  function onSearchRoute(value: string) {
+    routeList.value = backup.routeList
+      ?.filter(
+        (item: any) => item.path.includes(value) || item.name?.includes(value),
+      )
+      ?.map((item: any) => {
+        return {
+          ...item,
+          name: hightLight(item.name, value),
+          path: hightLight(item.path, value),
+        };
+      });
+  }
+
+  function onShowDevButton(show: boolean) {
+    basicSendMessage({ type: CMD_TYPE.BUTTON_TOGGLE, data: { show } });
+  }
+
+  function onRestartDevTool() {
+    basicSendMessage({ type: CMD_TYPE.RESTART_DEBUGGER, data: {} });
+  }
+
+  function onRestartApp() {
+    basicSendMessage({ type: CMD_TYPE.RESTART_APP, data: {} });
+  }
+
+  function onExportLog(exports: any) {
+    basicSendMessage({ type: CMD_TYPE.EXPORT_LOG, data: { ...exports } });
+  }
+
+  function onScreenshot() {
+    basicSendMessage({ type: 'dev-tool-hide-screenshot', data: {} });
+  }
+
+  function onClearCache() {
+    basicSendMessage({ type: CMD_TYPE.CACHE_CLEAR, data: {} });
+  }
+
+  function onDestroyDevTool() {
+    basicSendMessage({ type: CMD_TYPE.DESTROY, data: {} });
+  }
+
+  function onChangeTheme(t: string) {
+    theme.value = t;
+    setDevToolInfo({ theme: t });
+    emits('changeTheme', t);
+  }
+
+  function onChangeCacheInterceptConfig(value: boolean) {
+    setDevToolInfo({
+      cacheInterceptConfig: value,
+      interceptNetworkList: value ? interceptNetworkList.value : [],
+    });
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_INTERCEPT,
+      data: { cacheInterceptConfig: value },
+    });
+  }
+
+  function onChangeCacheNetworkLog(value: boolean) {
+    setDevToolInfo({
+      cacheNetworkLog: value,
+    });
+    cacheNetworkLog.value = value;
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_NETWORK_LOG,
+      data: { cacheNetworkLog: value },
+    });
+  }
+
+  function onChangeCacheConsoleLog(value: boolean) {
+    setDevToolInfo({
+      cacheConsoleLog: value,
+    });
+    cacheConsoleLog.value = value;
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_CONSOLE_LOG,
+      data: { cacheConsoleLog: value },
+    });
+  }
+
+  function onChangeUseTransition(value: boolean) {
+    useTransition.value = value;
+    setDevToolInfo({
+      useTransition: value,
+    });
+    basicSendMessage({
+      type: CMD_TYPE.SET_TRANSITION,
+      data: { useTransition: value },
+    });
+  }
+
+  function onChangeFontSize(data: {
+    baseFontSize: number;
+    tagFontSize: number;
+    tipsFontSize: number;
+    fontFamily: string;
+    fontWeight: string;
+  }) {
+    baseFontSize.value = data.baseFontSize;
+    tagFontSize.value = data.tagFontSize;
+    tipsFontSize.value = data.tipsFontSize;
+    fontFamily.value = data.fontFamily;
+    fontWeight.value = data.fontWeight;
+    setDevToolInfo(data);
+    basicSendMessage({
+      type: CMD_TYPE.SET_FONT,
+      data,
+    });
+  }
+
+  function onChangePerformance(show: boolean) {
+    state.performanceVisible.value = show;
+    setDevToolInfo({
+      performanceVisible: show,
+    });
+    uni.$emit(DEV_CORE_MESSAGE, { type: MSG_TYPE.PERF_VISIBLE, data: show });
+  }
+
+  function onChangePerformanceShowFps(show: boolean) {
+    state.performanceShowFps.value = show;
+    setDevToolInfo({
+      performanceShowFps: show,
+    });
+    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_FPS', show);
+  }
+
+  function onChangePerformanceShowCpu(show: boolean) {
+    state.performanceShowCpu.value = show;
+    setDevToolInfo({
+      performanceShowCpu: show,
+    });
+    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_CPU', show);
+  }
+
+  function onChangeBarrage(show: boolean) {
+    state.barrageVisible.value = show;
+    setDevToolInfo({
+      barrageVisible: show,
+    });
+    basicSendMessage({ type: CMD_TYPE.BARRAGE_TOGGLE, data: { show } });
+    uni.$emit(DEV_CORE_MESSAGE, { type: MSG_TYPE.BARRAGE_VISIBLE, data: show });
+  }
+
+  function onChangeVuex(value: any) {
+    basicSendMessage({ type: CMD_TYPE.VUEX_CHANGE, data: value });
+  }
+
+  function onChangePinia(value: any) {
+    basicSendMessage({ type: CMD_TYPE.PINIA_CHANGE, data: value });
+  }
+
+  function onClearWebSocketMessage(ws: DevTool.WS) {
+    basicSendMessage({ type: CMD_TYPE.WS_CLEAR_MESSAGE, data: ws });
+  }
+
+  function onSendWebSocket(data: { url: string; message: any }) {
+    basicSendMessage({ type: CMD_TYPE.WS_SEND, data });
+  }
+
+  function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
+    const index = interceptNetworkList.value.findIndex((item: any) => {
+      const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
+      const niKey = `${ni.method?.toUpperCase()}|${ni.url?.split('?')[0]}`;
+      return key === niKey;
+    });
+    const list = [...interceptNetworkList.value];
+    if (index > -1) {
+      list[index] = ni;
+    } else {
+      list.unshift(ni);
+    }
+    setDevToolInfo({
+      cacheInterceptConfig: cacheInterceptConfig.value,
+      interceptNetworkList: cacheInterceptConfig.value ? list : [],
+    });
+    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: [ni] });
+  }
+
+  function onRemoveInterceptConfig(ni: DevTool.NetworkItem) {
+    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: ni });
+  }
+
+  function onChangeBarrageMaxTracks(val: number) {
+    state.barrageMaxTracks.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_MAX_TRACKS,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageTrackHeight(val: number) {
+    state.barrageTrackHeight.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_TRACK_HEIGHT,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageStartTop(val: number) {
+    state.barrageStartTop.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_START_TOP,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageDuration(val: number) {
+    state.barrageDuration.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_DURATION,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageMaxLength(val: number) {
+    state.barrageMaxLength.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_MAX_LENGTH,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageTypes(val: string[]) {
+    state.barrageTypes.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_TYPES,
+      data: { value: val },
+    });
+  }
+
+  function onChangeBarrageShowWhenOpen(val: boolean) {
+    state.barrageShowWhenOpen.value = val;
+    setDevToolInfo({
+      barrageShowWhenOpen: val,
+    });
+    basicSendMessage({
+      type: CMD_TYPE.SET_BARRAGE_SHOW_WHEN_OPEN,
+      data: { value: val },
+    });
+  }
+
+  return {
+    onCloseWindow,
+    onChangeTabs,
+    debounceScrollTabs,
+    onConsoleChoose,
+    onRunJS,
+    onSearchConsole,
+    onNetworkChoose,
+    onSearchNetwork,
+    onSortNetwork,
+    onTransferChoose,
+    onTransferCategoryChoose,
+    onSearchTransfer,
+    onWebSocketChoose,
+    onSearchWs,
+    onStorageChoose,
+    onStorageRemove,
+    onChangeStorage,
+    onSearchStorage,
+    onElEventClear,
+    onUniEventClear,
+    onCaptureScreenClear,
+    onScanCodeListClear,
+    onNfcClear,
+    onRouteRefresh,
+    onSearchRoute,
+    onShowDevButton,
+    onRestartDevTool,
+    onRestartApp,
+    onExportLog,
+    onScreenshot,
+    onClearCache,
+    onDestroyDevTool,
+    onChangeTheme,
+    onChangeCacheInterceptConfig,
+    onChangeCacheNetworkLog,
+    onChangeCacheConsoleLog,
+    onChangeUseTransition,
+    onChangeFontSize,
+    onChangeVuex,
+    onChangePinia,
+    onClearWebSocketMessage,
+    onSendWebSocket,
+    onConfirmInterceptConfig,
+    onRemoveInterceptConfig,
+    onChangePerformance,
+    onChangePerformanceShowFps,
+    onChangePerformanceShowCpu,
+    onChangeBarrage,
+    onChangeBarrageMaxTracks,
+    onChangeBarrageTrackHeight,
+    onChangeBarrageStartTop,
+    onChangeBarrageDuration,
+    onChangeBarrageMaxLength,
+    onChangeBarrageTypes,
+    onChangeBarrageShowWhenOpen,
+    basicSendMessage,
+  };
+}