vite-uni-dev-tool 0.0.21 → 0.0.23

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({{ version }}-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -163,15 +163,34 @@
         <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 version = __VERSION__ ?? '1.0.0';
+
+const props = defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;
   theme?: string;
+  cacheInterceptConfig?: boolean;
 }>();
 const setting = reactive({
   restartDevTool: false,
@@ -206,6 +225,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 +263,10 @@ function onScreenshot() {
 function onClearCache() {
   emit('clearCache');
 }
+
+function onCacheInterceptNetworkConfig() {
+  emit('changeCacheInterceptConfig', !props.cacheInterceptConfig);
+}
 </script>
 <style scoped>
 .setting-content {

package/dist/v3/SettingList/typing.d.ts

@@ -0,0 +1,2 @@
+// 插件版本号
+declare const __VERSION__: string;

package/dist/v3/SourceCode/Line.vue

@@ -35,7 +35,7 @@ const props = withDefaults(
 .source-code-line {
   display: flex;
   align-items: center;
-  height: 24px;
+  height: 20px;
 }
 
 .source-code-line-active {
@@ -49,14 +49,14 @@ const props = withDefaults(
   padding: 0 6px;
   margin-right: 6px;
   text-align: right;
-  height: 24px;
+  height: 20px;
   border-right: 1px solid var(--dev-tool-border-color);
 }
 
 .source-code-line-content {
   display: flex;
   white-space: nowrap;
-  height: 24px;
+  height: 20px;
 }
 
 .source-code-line-word {

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;
@@ -218,7 +217,7 @@ onMounted(() => {
 
   width: 100vw;
   height: 100vh;
-  font-size: 14px;
+  font-size: 12px;
   color: var(--dev-tool-text-color);
   box-sizing: border-box;
   transition: color 0.3s;

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/dist/v3/UploadList/UploadDetail.vue

@@ -1,6 +1,8 @@
 <template>
   <view class="upload-detail" :style="{ zIndex: zIndex }">
     <view class="upload-detail-control">
+      <DevToolTitle style="margin-right: 16px">上传详情</DevToolTitle>
+
       <Tag
         v-for="item in selectItems"
         :active="currentSelect === item.value"
@@ -15,31 +17,42 @@
     </view>
 
     <view class="upload-detail-header" v-if="currentSelect === 'header'">
-      <view class="upload-detail-title">常规</view>
-      <view class="net-detail-item">
+      <DevToolTitle>常规</DevToolTitle>
+      <view class="upload-detail-item">
         <view>请求url:</view>
         <view>{{ upload.url }}</view>
       </view>
-      <view class="net-detail-item">
+      <view class="upload-detail-item">
         <view>请求方法:</view>
         <Tag mode="info">{{ upload.method ?? 'POST' }}</Tag>
       </view>
-      <view class="net-detail-item">
+      <view class="upload-detail-item">
         <view>状态代码:</view>
         <Tag mode="info">{{ upload.status }}</Tag>
       </view>
-      <view class="upload-detail-title">请求头</view>
-      <view
-        class="net-detail-item"
-        v-for="item in upload?.headers?.requestHeader"
-        :key="item.key"
+
+      <DevToolTitle>请求头</DevToolTitle>
+      <template
+        v-if="
+          upload?.headers &&
+          upload?.headers?.requestHeader &&
+          upload?.headers?.requestHeader?.length > 0
+        "
       >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
-      </view>
+        <view
+          class="upload-detail-item"
+          v-for="item in upload?.headers?.requestHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <Empty v-else />
+
       <!-- <view class="upload-detail-title">响应头</view>
       <view
-        class="net-detail-item"
+        class="upload-detail-item"
         v-for="item in upload?.headers?.responseHeader"
         :key="item.key"
       >
@@ -81,6 +94,7 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import CircularButton from '../CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 import type { DevTool } from '../../type';
 const props = defineProps<{ upload: DevTool.UploadItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
@@ -160,11 +174,14 @@ function onClose() {
   top: 0;
   left: 0;
   padding: 0 16px;
-  background-color: var(--dev-tool-bg2-color);
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
+  background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
   transform: background-color 0.3s;
 }
-.upload-detail .upload-detail-control {
+.upload-detail-control {
   display: flex;
   align-items: center;
   margin-bottom: 4px;
@@ -174,18 +191,19 @@ function onClose() {
   box-sizing: border-box;
 }
 
-.upload-detail .upload-detail-header .net-detail-item {
+.upload-detail-item {
   display: flex;
   align-items: center;
   min-height: 28px;
   word-break: break-all;
+  font-size: 12px;
 }
-.upload-detail .upload-detail-header .net-detail-item > view:first-child {
+.upload-detail-item > view:first-child {
   white-space: nowrap;
   margin-right: 8px;
   color: var(--dev-tool-info-color);
 }
-.upload-detail .upload-detail-payload {
+.upload-detail-payload {
   word-break: break-all;
   max-width: 100%;
 }

package/dist/v3/UploadList/UploadItem.vue

@@ -1,14 +1,8 @@
 <template>
-  <view class="upload-item">
+  <view class="upload-item" @click="emit('openDetail', upload)">
     <view class="upload-url-row">
       <Tag mode="info">POST</Tag>
       <view class="upload-url" v-html="upload.url" />
-      <Tag
-        mode="main"
-        class="upload-detail-icon"
-        @click="showDetail = !showDetail"
-        >详情</Tag
-      >
     </view>
     <view class="upload-info">
       <view>
@@ -28,39 +22,53 @@
       <view>进度: {{ upload.progress }}%</view>
       <view>
         开始:
-        {{ upload.startTime ? formatDate(upload.startTime, ' HH:mm:ss') : '-' }}
+        {{
+          upload.startTime
+            ? formatDate(upload.startTime, ' HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
       </view>
       <view>
         结束:
-        {{ upload.endTime ? formatDate(upload.endTime, ' HH:mm:ss') : '-' }}
+        {{
+          upload.endTime
+            ? formatDate(upload.endTime, ' HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
       </view>
     </view>
+    <view
+      :class="['upload-stock ', isUseDevSource ? 'upload-stock-link' : '']"
+      @click.stop="emit('openCode', upload.stack)"
+    >
+      {{ upload?.stack }}
+    </view>
   </view>
-  <!-- <Transition name="slide-fade"> -->
-  <UploadDetail
-    v-if="showDetail"
-    :upload="upload"
-    :zIndex="zIndex"
-    @close="onClose"
-  />
-  <!-- </Transition> -->
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 import Tag from '../Tag/index.vue';
-import UploadDetail from './UploadDetail.vue';
-import { formatDate } from '../../utils';
+import { formatDate, isMockWX } from '../../utils';
 import type { DevTool } from '../../type';
-defineProps<{
+const props = defineProps<{
   upload: DevTool.UploadItem;
   zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'openDetail', value: DevTool.UploadItem): void;
+  (e: 'openCode', value?: string): void;
 }>();
-const showDetail = ref(false);
 
-function onClose() {
-  showDetail.value = false;
-}
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.upload?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
 </script>
 <style scoped>
 .upload-item {
@@ -103,15 +111,11 @@ function onClose() {
   color: var(--dev-tool-text-color);
 }
 
-.slide-fade-enter-active {
-  transition: all 0.8s ease-out;
-}
-.slide-fade-leave-active {
-  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+.upload-stock {
+  text-align: right;
+  word-wrap: break-word;
 }
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(20px);
-  opacity: 0;
+.upload-stock-link {
+  text-decoration: underline;
 }
 </style>

package/dist/v3/UploadList/index.vue

@@ -29,7 +29,14 @@
           :index="start + index"
           :key="start + index"
         >
-          <UploadItem :upload="item" :zIndex="zIndex" />
+          <UploadItem
+            :upload="item"
+            :zIndex="zIndex"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            @openDetail="emit('openDetail', $event)"
+            @openCode="emit('openCode', $event)"
+          />
         </AutoSize>
         <Empty v-if="!uploadList || uploadList.length === 0" />
       </template>
@@ -50,13 +57,17 @@ defineProps<{
   currentUploadType: string;
   uploadList: DevTool.UploadItem[];
   modelValue: string;
+  mode: string;
   zIndex: number;
+  useDevSource: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'choose', type: string): void;
   (e: 'update:modelValue', value: string): void;
   (e: 'search', value: string): void;
+  (e: 'openDetail', value: DevTool.UploadItem): void;
+  (e: 'openCode', value: string): void;
 }>();
 const uploadFilterItems = [
   {

package/dist/v3/VirtualListPro/index.vue

@@ -111,14 +111,16 @@ const innerScrollIntoView = computed(() => {
 
 onBeforeMount(() => {
   // 初始渲染数据
-  state.visitableData = props.data.slice(
-    (props.defaultCurrent - 1) * props.pageSize,
-    props.pageSize * 2,
-  );
-
-  state.currentHeight = itemsHeight
-    .slice(0, (props.defaultCurrent - 1) * props.pageSize)
-    ?.reduce((acc, cur) => acc + cur, 0);
+  state.visitableData =
+    props.data?.slice(
+      (props.defaultCurrent - 1) * props.pageSize,
+      props.pageSize * 2,
+    ) ?? [];
+
+  state.currentHeight =
+    itemsHeight
+      ?.slice(0, (props.defaultCurrent - 1) * props.pageSize)
+      ?.reduce((acc, cur) => acc + cur, 0) ?? 0;
 });
 
 // 数据更新时重置
@@ -147,11 +149,12 @@ watch(
     const endIndex = Math.min(currentAdd1 * pageSize, data.length);
 
     // 更新可见数据
-    state.visitableData = data.slice(startIndex, endIndex);
+    state.visitableData = data?.slice(startIndex, endIndex) ?? [];
 
-    state.currentHeight = itemsHeight
-      .slice(0, currentSub1 * pageSize)
-      ?.reduce((acc, cur) => acc + cur, 0);
+    state.currentHeight =
+      itemsHeight
+        ?.slice(0, currentSub1 * pageSize)
+        ?.reduce((acc, cur) => acc + cur, 0) ?? 0;
   },
 );