vite-uni-dev-tool 0.0.21 → 0.0.22

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>
@@ -171,6 +174,7 @@
           :devToolVisible="devToolVisible"
           :sizeFormat="sizeFormat"
           :theme="theme"
+          :cacheInterceptConfig="cacheInterceptConfig"
           @showDevButton="onShowDevButton"
           @restartDevTool="onRestartDevTool"
           @restartApp="onRestartApp"
@@ -179,6 +183,7 @@
           @clearCache="onClearCache"
           @destroyDevTool="onDestroyDevTool"
           @changeTheme="onChangeTheme"
+          @changeCacheInterceptConfig="onChangeCacheInterceptConfig"
         />
       </swiper-item>
     </swiper>
@@ -187,17 +192,55 @@
     <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"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
 import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import Tabs from '../Tabs/index.vue';
 import ConsoleList from '../ConsoleList/index.vue';
 import NetworkList from '../NetworkList/index.vue';
@@ -217,6 +260,11 @@ 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 {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -241,111 +289,15 @@ 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,
 } 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 +333,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 +347,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 +361,15 @@ 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 props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -479,12 +441,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 +615,7 @@ const listenPostMessage = (data: DevTool.WindowData) => {
   if (data.deviceInfo) {
     deviceInfo.value = data.deviceInfo;
   }
+
   if (data.windowInfo) {
     windowInfo.value = data.windowInfo;
   }
@@ -664,6 +635,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 +663,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 +697,8 @@ function setWindowInfo() {
     currentNetworkType: currentNetworkType.value,
     currentWebSocketType: currentWebSocketType.value,
     tabScrollLeft: tabScrollLeft.value,
+    cacheInterceptConfig: cacheInterceptConfig.value,
+    interceptNetworkList: interceptNetworkList.value,
   });
 }
 
@@ -1119,6 +1096,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 +1162,74 @@ 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],
+  });
+}
 </script>
 
 <style scoped>