vite-uni-dev-tool 0.0.21 → 0.0.23

package/dist/v3/DevToolWindow/index.vue

@@ -11,7 +11,7 @@
     <view class="dev-tool-window-bg"></view>
     <Tabs
       v-model="activeTab"
-      :items="items"
+      :items="tabItems"
       :scroll-left="tabScrollLeft"
       @close="onCloseWindow"
       @scroll="debounceScrollTabs"
@@ -59,6 +59,9 @@
           @search="onSearchNetwork"
           @sort="onSortNetwork"
           @openCode="onOpenCode"
+          @openSend="onOpenNetworkSend"
+          @openDetail="onOpenNetworkDetail"
+          @openIntercept="onOpenNetworkIntercept"
         />
       </swiper-item>
       <swiper-item>
@@ -67,9 +70,13 @@
           :currentUploadType="currentUploadType"
           :uploadList="uploadList"
           :zIndex="zIndex + 1"
+          :mode="mode"
+          :useDevSource="useDevSource"
           v-model="searchUpload"
           @choose="onUploadChoose"
           @search="onSearchUpload"
+          @openDetail="onOpenUploadDetail"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -81,6 +88,8 @@
           v-model="searchWs"
           @choose="onWebSocketChoose"
           @search="onSearchWs"
+          @openDetail="onOpenWebSocketDetail"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -171,6 +180,7 @@
           :devToolVisible="devToolVisible"
           :sizeFormat="sizeFormat"
           :theme="theme"
+          :cacheInterceptConfig="cacheInterceptConfig"
           @showDevButton="onShowDevButton"
           @restartDevTool="onRestartDevTool"
           @restartApp="onRestartApp"
@@ -179,6 +189,7 @@
           @clearCache="onClearCache"
           @destroyDevTool="onDestroyDevTool"
           @changeTheme="onChangeTheme"
+          @changeCacheInterceptConfig="onChangeCacheInterceptConfig"
         />
       </swiper-item>
     </swiper>
@@ -187,17 +198,71 @@
     <SourceCode
       v-if="openCode"
       :url="stack"
-      :sourceFileServers="sourceFileServers"
       :mode="mode"
       :zIndex="zIndex"
+      :sourceFileServers="sourceFileServers"
       @close="onCloseCode"
     />
+
+    <!-- 发起请求 -->
+    <NetworkSend
+      v-if="showNetworkSend"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      @close="onCloseNetworkSend"
+      @openDetail="onOpenNetworkDetail"
+    />
+
+    <!-- 拦截请求 -->
+    <NetworkIntercept
+      v-if="showNetworkIntercept"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      @close="onCloseNetworkIntercept"
+      @remove="onRemoveInterceptConfig"
+      @openConfig="onOpenInterceptConfig"
+    />
+
+    <!-- 拦截配置 -->
+    <InterceptConfig
+      v-if="showInterceptConfig"
+      :zIndex="zIndex"
+      :network="network"
+      @close="onCloseInterceptConfig"
+      @confirm="onConfirmInterceptConfig"
+    />
+
+    <!-- 请求详情 -->
+    <NetworkDetail
+      v-if="showNetworkDetail"
+      :zIndex="zIndex"
+      :network="network"
+      @close="onCloseNetworkDetail"
+    />
+
+    <!-- 上传详情 -->
+    <UploadDetail
+      v-if="showUploadDetail"
+      :upload="upload"
+      :zIndex="zIndex"
+      @close="onCloseUploadDetail"
+    />
+
+    <WebSocketDetail
+      v-if="showWebSocketDetail"
+      :ws="currentWebSocket"
+      :zIndex="zIndex"
+      @close="onCloseWebSocketDetail"
+      @clear="onClearWebSocketMessage"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
 import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive, computed, nextTick } from 'vue';
 import Tabs from '../Tabs/index.vue';
 import ConsoleList from '../ConsoleList/index.vue';
 import NetworkList from '../NetworkList/index.vue';
@@ -217,6 +282,14 @@ import AppInfo from '../AppInfo/index.vue';
 import CaptureScreen from '../CaptureScreen/index.vue';
 import SourceCode from '../SourceCode/index.vue';
 
+import NetworkSend from '../NetworkList/NetworkSend.vue';
+import NetworkDetail from '../NetworkList/NetworkDetail.vue';
+import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
+import InterceptConfig from '../NetworkList/InterceptConfig.vue';
+
+import UploadDetail from '../UploadList/UploadDetail.vue';
+import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
+
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -241,111 +314,16 @@ import {
   DEV_UNI_EVENT_CLEAR,
   DEV_RUN_JS,
   DEV_CAPTURE_SCREEN_CLEAR,
+  DEV_INTERCEPT_NETWORK_UPDATE,
+  DEV_INTERCEPT_NETWORK_REMOVE,
+  DEV_CHANGE_CACHE_INTERCEPT_CONFIG,
+  DEV_WEBSOCKET_CLEAR_MESSAGE,
 } from '../../const';
 import { debounce, hightLight, isAndroid, isMockWX } from '../../utils/index';
 import type { DevTool } from '../../type';
 import { eventBus } from '../../core';
 import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-
-const items = [
-  {
-    key: 'Console',
-    label: 'Console',
-    value: 'Console',
-    index: 0,
-  },
-  {
-    key: 'Connection',
-    label: 'Connection',
-    value: 'Connection',
-    index: 1,
-  },
-  {
-    key: 'Network',
-    label: 'Network',
-    value: 'NetWork',
-    index: 2,
-  },
-  {
-    key: 'Upload',
-    label: 'Upload',
-    value: 'Upload',
-    index: 3,
-  },
-  {
-    key: 'WebSocket',
-    label: 'WebSocket',
-    value: 'WebSocket',
-    index: 4,
-  },
-  {
-    key: 'Route',
-    label: 'Route',
-    value: 'Route',
-    index: 5,
-  },
-  {
-    key: 'UniEvent',
-    label: 'UniEvent',
-    value: 'UniEvent',
-    index: 6,
-  },
-  {
-    key: 'CaptureScreen',
-    label: 'CaptureScreen',
-    value: 'CaptureScreen',
-    index: 7,
-  },
-  {
-    key: 'Storage',
-    label: 'Storage',
-    value: 'Storage',
-    index: 8,
-  },
-
-  {
-    key: 'Vuex',
-    label: 'Vuex',
-    value: 'Vuex',
-    index: 9,
-  },
-  {
-    key: 'Pinia',
-    label: 'Pinia',
-    value: 'Pinia',
-    index: 10,
-  },
-  {
-    key: 'Window',
-    label: 'Window',
-    value: 'Window',
-    index: 11,
-  },
-  {
-    key: 'Device',
-    label: 'Device',
-    value: 'Device',
-    index: 12,
-  },
-  {
-    key: 'System',
-    label: 'System',
-    value: 'System',
-    index: 13,
-  },
-  {
-    key: 'AppInfo',
-    label: 'AppInfo',
-    value: 'AppInfo',
-    index: 14,
-  },
-  {
-    key: 'Setting',
-    label: 'Setting',
-    value: 'Setting',
-    index: 15,
-  },
-];
+import { tabItems, emptyNetwork } from './const';
 
 const backup: {
   consoleList: DevTool.ConsoleItem[];
@@ -381,6 +359,7 @@ const eventList = ref<DevTool.EventItem[]>([]);
 const eventCount = ref<DevTool.EventCount>();
 const appInfo = ref<Record<string, any>>({});
 const captureScreenList = ref<DevTool.CaptureScreenItem[]>([]);
+const interceptNetworkList = ref<DevTool.NetworkItem[]>([]);
 
 const netWorkStatus = ref<{
   isConnected?: boolean;
@@ -394,7 +373,7 @@ const activeTab = ref(0);
 const tabScrollLeft = ref(0);
 const currentConsoleType = ref('all');
 const currentNetworkType = ref('all');
-const currentNetworkSort = ref<-1 | 1>(1);
+const currentNetworkSort = ref<1 | -1>(1);
 const currentUploadType = ref('all');
 const currentWebSocketType = ref('all');
 
@@ -408,6 +387,31 @@ const theme = ref('light');
 const openCode = ref(false);
 const stack = ref('');
 
+const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
+
+const showNetworkSend = ref(false);
+const showNetworkDetail = ref(false);
+const showNetworkIntercept = ref(false);
+const showInterceptConfig = ref(false);
+const cacheInterceptConfig = ref(true);
+
+const upload = reactive<DevTool.UploadItem>({
+  index: 0,
+  status: '',
+});
+const showUploadDetail = ref(false);
+
+const webSocket = reactive<DevTool.WS>({
+  url: '',
+  message: [],
+});
+
+const currentWebSocket = computed(() => {
+  return wsList.value.find((item) => item.url === webSocket.url);
+});
+
+const showWebSocketDetail = ref(false);
+
 const props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -479,12 +483,20 @@ const calcNetworkTimeline = (
     }) ?? []
   );
 };
-
+/**
+ * 禁止在该方法中 禁用调用已拦截的方法，防止递归调用
+ * - 禁用 uni.setStorage
+ * - 禁用 uni.request
+ * - 禁用 uni.upload
+ * - 禁用导入的 console
+ */
 const listenPostMessage = (data: DevTool.WindowData) => {
   if (!props.open) return;
   if (!isActive) return;
   devToolVisible.value = data.devToolVisible ?? false;
 
+  cacheInterceptConfig.value = data.cacheInterceptConfig ?? false;
+
   if (data.consoleList) {
     consoleList.value = [...(data.consoleList ?? [])]
       .filter((item) => {
@@ -645,6 +657,7 @@ const listenPostMessage = (data: DevTool.WindowData) => {
   if (data.deviceInfo) {
     deviceInfo.value = data.deviceInfo;
   }
+
   if (data.windowInfo) {
     windowInfo.value = data.windowInfo;
   }
@@ -664,6 +677,10 @@ const listenPostMessage = (data: DevTool.WindowData) => {
   if (data.captureScreenList) {
     captureScreenList.value = data.captureScreenList;
   }
+
+  if (data.interceptNetworkMap) {
+    interceptNetworkList.value = Array.from(data.interceptNetworkMap.values());
+  }
 };
 
 let isActive = false;
@@ -688,11 +705,11 @@ onMounted(() => {
 
 onLoad(() => {
   isActive = true;
-  eventBus.on(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus?.on(DEV_APP_MESSAGE, listenPostMessage);
 });
 onUnload(() => {
   isActive = false;
-  eventBus.off(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus?.off(DEV_APP_MESSAGE, listenPostMessage);
 });
 
 onShow(() => {
@@ -722,6 +739,8 @@ function setWindowInfo() {
     currentNetworkType: currentNetworkType.value,
     currentWebSocketType: currentWebSocketType.value,
     tabScrollLeft: tabScrollLeft.value,
+    cacheInterceptConfig: cacheInterceptConfig.value,
+    interceptNetworkList: interceptNetworkList.value,
   });
 }
 
@@ -1119,6 +1138,20 @@ function onChangeTheme(t: string) {
   });
 }
 
+function onChangeCacheInterceptConfig(value: boolean) {
+  setDevToolInfo({
+    cacheInterceptConfig: value,
+    interceptNetworkList: value ? interceptNetworkList.value : [],
+  });
+
+  basicSendMessage({
+    type: DEV_CHANGE_CACHE_INTERCEPT_CONFIG,
+    data: {
+      cacheInterceptConfig: value,
+    },
+  });
+}
+
 function onChangeVuex(value: Record<string, any>) {
   basicSendMessage({
     type: DEV_VUEX_CHANGE,
@@ -1171,6 +1204,108 @@ function onOpenCode(value?: string) {
     openCode.value = true;
   }
 }
+
+function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
+  Object.assign(network, emptyNetwork);
+  Object.assign(network, ni);
+  showNetworkDetail.value = true;
+}
+function onCloseNetworkDetail() {
+  showNetworkDetail.value = false;
+}
+
+function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
+  Object.assign(network, emptyNetwork);
+  Object.assign(network, ni);
+  showNetworkSend.value = true;
+}
+function onCloseNetworkSend() {
+  showNetworkSend.value = false;
+}
+
+function onOpenNetworkIntercept() {
+  showNetworkIntercept.value = true;
+}
+function onCloseNetworkIntercept() {
+  showNetworkIntercept.value = false;
+}
+
+function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
+  Object.assign(network, emptyNetwork);
+
+  ni && Object.assign(network, ni);
+
+  showInterceptConfig.value = true;
+}
+
+function onCloseInterceptConfig() {
+  showInterceptConfig.value = false;
+}
+
+function onRemoveInterceptConfig(ni: DevTool.NetworkItem) {
+  basicSendMessage({
+    type: DEV_INTERCEPT_NETWORK_REMOVE,
+    data: ni,
+  });
+}
+
+function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
+  const index = interceptNetworkList.value.findIndex((item) => {
+    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: DEV_INTERCEPT_NETWORK_UPDATE,
+    data: [ni],
+  });
+}
+
+function onOpenUploadDetail(up?: DevTool.UploadItem) {
+  Object.assign(upload, up);
+  showUploadDetail.value = true;
+}
+
+function onCloseUploadDetail() {
+  showUploadDetail.value = false;
+}
+
+function onOpenWebSocketDetail(ws?: DevTool.WS) {
+  Object.assign(webSocket, ws);
+
+  nextTick(() => {
+    if (currentWebSocket.value) {
+      showWebSocketDetail.value = true;
+    } else {
+      //
+    }
+  });
+}
+
+function onCloseWebSocketDetail() {
+  showWebSocketDetail.value = false;
+}
+
+function onClearWebSocketMessage(ws: DevTool.WS) {
+  console.log('ws: ', ws);
+
+  basicSendMessage({
+    type: DEV_WEBSOCKET_CLEAR_MESSAGE,
+    data: ws,
+  });
+}
 </script>
 
 <style scoped>
@@ -1224,7 +1359,6 @@ function onOpenCode(value?: string) {
   --dev-tool-info-color: #9c9c9c;
   --dev-tool-log-color: #f9f9f9;
   --dev-tool-nil-color: #020201;
-  --dev-tool-string-color: #888888;
   --dev-tool-number-color: #1d8ce0;
   --dev-tool-boolean-color: #1d8ce0;
   --dev-tool-symbol-color: bisque;