vite-uni-dev-tool 0.0.21 → 0.0.22

package/dist/v3/NetworkList/index.vue

@@ -19,7 +19,8 @@
          {{ sortMap?.[currentNetworkSort] ?? '一' }} 
       </Tag>
 
-      <Tag mode="clear" @click="onOpenSend"> 发起 </Tag>
+      <Tag mode="error" @click="emit('openIntercept')"> 拦截 </Tag>
+      <Tag mode="primary" @click="emit('openSend')"> 发起 </Tag>
       <Tag mode="clear" @click="onChoose('clear')"> 清除 </Tag>
     </view>
 
@@ -28,6 +29,7 @@
       :pageSize="15"
       :height="height"
       className="network-list"
+      v-if="networkList.length > 0"
     >
       <template v-slot="{ list, start }">
         <AutoSize
@@ -41,24 +43,14 @@
             :currentNetworkSort="currentNetworkSort"
             :mode="mode"
             :useDevSource="useDevSource"
-            @openDetail="onOpenDetail(item)"
-            @resend="onResend(item)"
+            @openDetail="emit('openDetail', item)"
+            @resend="emit('openSend', item)"
             @openCode="emit('openCode', $event)"
           />
         </AutoSize>
-        <Empty v-if="!networkList || networkList.length === 0" />
       </template>
     </VirtualListPro>
-
-    <!-- 请求详情 -->
-    <NetworkDetail
-      v-if="showDetail"
-      :network="network"
-      @close="onCloseDetail"
-    />
-
-    <!-- 发起请求 -->
-    <NetworkSend v-if="showSend" :network="network" @close="onCloseSend" />
+    <Empty v-else />
   </view>
 </template>
 <script lang="ts" setup>
@@ -70,10 +62,9 @@ import FilterSelect from '../FilterSelect/index.vue';
 import type { DevTool } from '../../type';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
-import NetworkSend from './NetworkSend.vue';
-import NetworkDetail from './NetworkDetail.vue';
+
 import { sortMap } from './const';
-import { onMounted, ref, reactive } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const props = defineProps<{
   currentNetworkType: string;
@@ -91,6 +82,9 @@ const emit = defineEmits<{
   (e: 'search', value: string): void;
   (e: 'sort', sort: -1 | 1): void;
   (e: 'openCode', value?: string): void;
+  (e: 'openSend', value?: DevTool.NetworkItem): void;
+  (e: 'openDetail', value?: DevTool.NetworkItem): void;
+  (e: 'openIntercept'): void;
 }>();
 const networkFilterItems = [
   {
@@ -125,29 +119,6 @@ const networkFilterItems = [
   },
 ];
 
-const showSend = ref(false);
-
-const showDetail = ref(false);
-
-const emptyNetwork = {
-  index: 0,
-  url: '',
-  name: '',
-  method: '',
-  status: '',
-  time: '',
-  startTime: 0,
-  endTime: 0,
-  size: '',
-  headers: {
-    requestHeader: [],
-    responseHeader: [],
-  },
-  response: '',
-  payload: undefined,
-};
-const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
-
 function onChoose(type: string) {
   emit('choose', type);
 }
@@ -158,33 +129,6 @@ onMounted(() => {
   height.value = windowHeight - 32 - 32;
 });
 
-function onOpenSend() {
-  showSend.value = true;
-}
-
-function onCloseSend() {
-  showSend.value = false;
-
-  Object.assign(network, emptyNetwork);
-}
-
-function onOpenDetail(ni: DevTool.NetworkItem) {
-  showDetail.value = true;
-
-  Object.assign(network, emptyNetwork);
-  Object.assign(network, ni);
-}
-function onCloseDetail() {
-  showDetail.value = false;
-}
-
-function onResend(ni: DevTool.NetworkItem) {
-  showSend.value = true;
-
-  Object.assign(network, emptyNetwork);
-  Object.assign(network, ni);
-}
-
 function onSort() {
   const sort = props.currentNetworkSort === 1 ? -1 : 1;
   emit('sort', sort);

package/dist/v3/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.21-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool(v0.0.22-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -163,15 +163,31 @@
         <button class="setting-button" @click="onExportLog">导出</button>
       </view>
     </view>
+    <view class="setting-item">
+      <DevToolTitle>请求拦截规则</DevToolTitle>
+      <view class="setting-item-content">
+        <view class="setting-row">
+          <view>缓存拦截规则到本地：</view>
+          <checkbox
+            :checked="cacheInterceptConfig"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="onCacheInterceptNetworkConfig"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会把 network 拦截缓存到本地</view>
+      </view>
+    </view>
   </view>
 </template>
 <script lang="ts" setup>
 import { reactive } from 'vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-defineProps<{
+const props = defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;
   theme?: string;
+  cacheInterceptConfig?: boolean;
 }>();
 const setting = reactive({
   restartDevTool: false,
@@ -206,6 +222,7 @@ const emit = defineEmits<{
   (e: 'clearCache'): void;
   (e: 'destroyDevTool'): void;
   (e: 'changeTheme', value: string): void;
+  (e: 'changeCacheInterceptConfig', value: boolean): void;
 }>();
 
 function onChangeShowDevButton(show: boolean) {
@@ -243,6 +260,10 @@ function onScreenshot() {
 function onClearCache() {
   emit('clearCache');
 }
+
+function onCacheInterceptNetworkConfig() {
+  emit('changeCacheInterceptConfig', !props.cacheInterceptConfig);
+}
 </script>
 <style scoped>
 .setting-content {

package/dist/v3/SourceCode/index.vue

@@ -206,7 +206,6 @@ onMounted(() => {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1001;
   padding: 0 16px;
   /* #ifdef H5 */
   padding: 50px 16px;

package/dist/v3/Tag/index.vue

@@ -59,6 +59,7 @@ function onClick(event: MouseEvent) {
   border: 1px solid var(--dev-tool-success-color);
 }
 .tag-error {
+  color: #fff;
   background-color: var(--dev-tool-error-color);
   border: 1px solid var(--dev-tool-error-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",