vite-uni-dev-tool 0.0.1

package/dev/components/DevToolWindow/index.vue

@@ -0,0 +1,847 @@
+<template>
+  <view class="dev-tool-window" v-if="open">
+    <!-- :style="{
+      height: `${systemInfo?.safeArea?.height}px`
+    }" -->
+    <view class="dev-tool-window-bg"></view>
+    <Tabs
+      v-model="activeTab"
+      :items="items"
+      :scroll-left="tabScrollLeft"
+      @close="onCloseWindow"
+      @scroll="debounceScrollTabs"
+      @change="onChangeTabs"
+    >
+      <!-- <template #extra>
+        <view style="margin-left: 6px">{{ sizeFormat }}</view>
+      </template> -->
+    </Tabs>
+    <view class="dev-tool-window-container">
+      <ConsoleList
+        :currentConsoleType="currentConsoleType"
+        :consoleList="consoleList"
+        v-if="activeTab === 'Console'"
+        v-model="searchConsole"
+        @choose="onConsoleChoose"
+        @search="onSearchConsole"
+      />
+      <NetworkList
+        :currentNetworkType="currentNetworkType"
+        :networkList="networkList"
+        v-model="searchNetwork"
+        v-if="activeTab === 'Network'"
+        @choose="onNetworkChoose"
+        @search="onSearchNetwork"
+      />
+      <UploadList
+        :currentUploadType="currentUploadType"
+        :uploadList="uploadList"
+        v-model="searchUpload"
+        v-if="activeTab === 'Upload'"
+        @choose="onUploadChoose"
+        @search="onSearchUpload"
+      />
+      <WebSocket
+        :wsList="wsList"
+        :currentWebSocketType="currentWebSocketType"
+        v-model="searchWs"
+        v-if="activeTab === 'WebSocket'"
+        @choose="onWebSocketChoose"
+        @search="onSearchWs"
+      />
+      <Connection
+        v-if="activeTab === 'Connection'"
+        :netWorkStatus="netWorkStatus"
+      />
+      <RouteList
+        v-if="activeTab === 'Route'"
+        :routeList="routeList"
+        v-model="searchRoute"
+        @goTo="onGoTo"
+        @search="onSearchRoute"
+        @routeRefresh="onRouteRefresh"
+      />
+      <SettingList
+        v-if="activeTab === 'Setting'"
+        :devToolVisible="devToolVisible"
+        :sizeFormat="sizeFormat"
+        @showDevButton="onShowDevButton"
+        @restartDevTool="onRestartDevTool"
+        @restartApp="onRestartApp"
+        @exportLog="onExportLog"
+        @screenshot="onScreenshot"
+        @clearCache="onClearCache"
+        @destroyDevTool="onDestroyDevTool"
+      />
+      <StorageList
+        v-if="activeTab === 'Storage'"
+        v-model:storage-list="storageList"
+        v-model="searchStorage"
+        @choose="onStorageChoose"
+        @remove="onStorageRemove"
+        @diff-value="onChangeStorage"
+        @search="onSearchStorage"
+      />
+      <VuexList
+        v-if="activeTab === 'Vuex'"
+        v-model:vuexList="vuexList"
+        @diff-value="onChangeVuex"
+      />
+      <PiniaList
+        v-if="activeTab === 'Pinia'"
+        v-model:pinia-list="piniaList"
+        @diff-value="onChangePinia"
+      />
+      <SystemInfo v-if="activeTab === 'System'" :systemInfo="systemInfo" />
+      <DeviceInfo v-if="activeTab === 'Device'" :deviceInfo="deviceInfo" />
+      <WindowInfo v-if="activeTab === 'Window'" :windowInfo="windowInfo" />
+    </view>
+  </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 {
+  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_WINDOW_INFO,
+  DEV_APP_MESSAGE,
+} from '../../const';
+import { debounce, hightLight } from '../../utils/index';
+import type { DevTool } from '../../type';
+
+const items = [
+  {
+    key: 'Console',
+    label: 'Console',
+    value: 'Console',
+  },
+  {
+    key: 'Connection',
+    label: 'Connection',
+    value: 'Connection',
+  },
+  {
+    key: 'Network',
+    label: 'Network',
+    value: 'NetWork',
+  },
+  {
+    key: 'Upload',
+    label: 'Upload',
+    value: 'Upload',
+  },
+  {
+    key: 'WebSocket',
+    label: 'WebSocket',
+    value: 'WebSocket',
+  },
+
+  {
+    key: 'Route',
+    label: 'Route',
+    value: 'Route',
+  },
+  {
+    key: 'Storage',
+    label: 'Storage',
+    value: 'Storage',
+  },
+
+  {
+    key: 'Vuex',
+    label: 'Vuex',
+    value: 'Vuex',
+  },
+  {
+    key: 'Pinia',
+    label: 'Pinia',
+    value: 'Pinia',
+  },
+  {
+    key: 'Window',
+    label: 'Window',
+    value: 'Window',
+  },
+  {
+    key: 'Device',
+    label: 'Device',
+    value: 'Device',
+  },
+  {
+    key: 'System',
+    label: 'System',
+    value: 'System',
+  },
+  {
+    key: 'Setting',
+    label: 'Setting',
+    value: 'Setting',
+  },
+];
+
+const backup: {
+  consoleList: DevTool.ConsoleItem[];
+  networkList: DevTool.NetworkItem[];
+  storageList: DevTool.StorageItem[];
+  wsList: DevTool.WS[];
+  uploadList: DevTool.UploadItem[];
+  routeList: DevTool.Page[];
+} = {
+  consoleList: [],
+  networkList: [],
+  storageList: [],
+  wsList: [],
+  uploadList: [],
+  routeList: [],
+};
+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 netWorkStatus = ref<{
+  isConnected?: boolean;
+  networkType?: string;
+}>({});
+const sizeFormat = ref('');
+
+const devToolVisible = ref(true);
+
+const activeTab = ref('Console');
+const tabScrollLeft = ref(0);
+const currentConsoleType = ref('all');
+const currentNetworkType = ref('all');
+const currentUploadType = ref('all');
+const currentWebSocketType = ref('all');
+
+const searchConsole = ref('');
+const searchNetwork = ref('');
+const searchUpload = ref('');
+const searchWs = ref('');
+const searchRoute = ref('');
+const searchStorage = ref('');
+
+const props = defineProps<{ open?: boolean; data?: DevTool.WindowData }>();
+
+const emits = defineEmits<{
+  (e: 'close'): void;
+  (e: 'sendMessage', data: { type: string; data: Record<string, any> }): void;
+}>();
+
+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.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) => hightLight(arg, searchConsole.value)),
+        };
+      });
+
+    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.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;
+  }
+};
+
+let isActive = false;
+onMounted(() => {
+  const windowInfo = uni.getStorageSync(DEV_WINDOW_INFO);
+  if (windowInfo) {
+    activeTab.value = windowInfo?.activeTab || 'Console';
+    currentConsoleType.value = windowInfo?.currentConsoleType || 'all';
+    currentNetworkType.value = windowInfo?.currentNetworkType || 'all';
+    tabScrollLeft.value = windowInfo?.tabScrollLeft || 0;
+  }
+  if (props.data) {
+    listenPostMessage(props.data);
+  }
+});
+
+onLoad(() => {
+  isActive = true;
+  uni.$on(DEV_APP_MESSAGE, listenPostMessage);
+});
+onUnload(() => {
+  isActive = false;
+  uni.$off(DEV_APP_MESSAGE, listenPostMessage);
+});
+
+onShow(() => {
+  isActive = true;
+});
+onHide(() => {
+  isActive = false;
+});
+
+/** 发送消息给 uniapp */
+function basicSendMessage(message: {
+  type: string;
+  data: Record<string, any>;
+}) {
+  emits('sendMessage', message);
+}
+
+function setWindowInfo() {
+  uni.setStorageSync(DEV_WINDOW_INFO, {
+    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 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 onSearchConsole(value: string) {
+  consoleList.value = backup.consoleList
+    .filter((item) => {
+      return (
+        item.args.some((arg) => arg.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) => hightLight(arg, value)),
+      };
+    });
+}
+
+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 onGoTo(page: DevTool.Page) {
+  basicSendMessage({
+    type: DEV_PAGE_JUMP,
+    data: {
+      path: '/' + page.path,
+      isNav: page.isNav,
+    },
+  });
+}
+
+function onRouteRefresh() {
+  basicSendMessage({
+    type: DEV_ROUTE_REFRESH,
+    data: {},
+  });
+}
+
+function onSearchRoute(value: string) {
+  routeList.value = backup.routeList
+    ?.filter((item) => item.path.includes(value) || item.name?.includes(value))
+    ?.map((item) => {
+      return {
+        ...item,
+        name: hightLight(item.name, searchRoute.value),
+        path: hightLight(item.path, searchRoute.value),
+      };
+    });
+}
+
+function onShowDevButton(show: boolean) {
+  basicSendMessage({
+    type: DEV_BUTTON_SHOW_OR_HIDE,
+    data: {
+      show,
+    },
+  });
+}
+
+function onRestartDevTool() {
+  basicSendMessage({
+    type: DEV_RESTART_DEBUGGER,
+    data: {},
+  });
+}
+
+function onRestartApp() {
+  basicSendMessage({
+    type: DEV_RESTART_APP,
+    data: {},
+  });
+}
+
+function onExportLog(exports: {
+  exportLog: boolean;
+  exportNetwork: boolean;
+  exportStorage: boolean;
+}) {
+  basicSendMessage({
+    type: DEV_EXPORT_LOG,
+    data: {
+      ...exports,
+    },
+  });
+}
+
+function onScreenshot() {
+  basicSendMessage({
+    type: 'dev-tool-hide-screenshot',
+    data: {},
+  });
+}
+
+function onClearCache() {
+  basicSendMessage({
+    type: DEV_LOG_CACHE_CLEAR,
+    data: {},
+  });
+}
+
+function onDestroyDevTool() {
+  basicSendMessage({
+    type: DEV_DESTROY,
+    data: {},
+  });
+}
+
+function onChangeVuex(value: Record<string, any>) {
+  basicSendMessage({
+    type: DEV_VUEX_CHANGE,
+    data: value,
+  });
+}
+
+function onChangePinia(value: Record<string, any>) {
+  basicSendMessage({
+    type: DEV_PINIA_CHANGE,
+    data: value,
+  });
+}
+</script>
+
+<style scoped>
+.dev-tool-window {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  /* #ifdef H5 */
+  padding: 50px 0;
+  /* #endif */
+
+  /* #ifdef MP-WEIXIN */
+  /* padding-bottom:30px; */
+  /* #endif */
+
+  width: 100vw;
+  height: 100vh;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.dev-tool-window .dev-tool-window-bg {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(6px);
+}
+.dev-tool-window .dev-tool-window-container {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+.dev-tool-window-container ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.dev-tool-window-container ::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+.dev-tool-window::after {
+  content: '';
+}
+</style>