vite-uni-dev-tool 0.0.20 → 0.0.22

package/dist/v3/NetworkList/InterceptItem.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="intercept-item" @click.stop="emit('openConfig', network)">
+    <view class="intercept-url-row">
+      <Tag mode="info">{{ network.method }}</Tag>
+
+      <view class="intercept-url"> {{ lastUrl }} </view>
+
+      <Tag
+        mode="error"
+        class="intercept-detail-icon"
+        @click.stop="emit('remove', network)"
+      >
+        删除
+      </Tag>
+    </view>
+    <view class="intercept-info">
+      <view class="intercept-info-item">
+        期待状态:
+        <Tag :mode="tagMode" style="margin-left: 6px">{{ network.status }}</Tag>
+      </view>
+      <view class="intercept-info-item">
+        期待结果:
+        {{ expectingResults }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import Tag from '../Tag/index.vue';
+import { formatDate } from '../../utils';
+import type { DevTool } from '../../type';
+const props = defineProps<{
+  network: DevTool.NetworkItem;
+
+  zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openDetail'): void;
+  (e: 'resend'): void;
+  (e: 'openCode', value?: string): void;
+  (e: 'openConfig', value?: DevTool.NetworkItem): void;
+  (e: 'remove', value: DevTool.NetworkItem): void;
+}>();
+
+const lastUrl = computed(() => {
+  const start = props.network.url.lastIndexOf('/');
+  return props.network.url.slice(start + 1);
+});
+
+const tagMode = computed(() => {
+  const status = props.network.status;
+  return status === 'pending'
+    ? 'info'
+    : /[4,5]\d{2,}/.test(status + '') || status === 'error'
+      ? 'error'
+      : 'success';
+});
+
+const expectingResults = computed(() => {
+  return props.network.response.data ? '自定义' : '无';
+});
+</script>
+<style scoped>
+.intercept-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.intercept-url-row {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.intercept-detail-icon {
+  margin-left: auto;
+}
+
+.intercept-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
+}
+.intercept-info-item {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+
+.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);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.intercept-time-line {
+  position: relative;
+  margin-top: 10px;
+  height: 2px;
+  min-width: 6px;
+  background-color: var(--dev-tool-time-line-color);
+}
+
+.intercept-stock {
+  text-align: right;
+  word-wrap: break-word;
+}
+.intercept-stock-link {
+  text-decoration: underline;
+}
+</style>

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -13,10 +13,14 @@
       <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
 
-    <view class="network-detail-header" v-if="currentSelect === 'header'">
-      <DevToolTitle>常规</DevToolTitle>
+    <view
+      class="network-detail-header"
+      :style="{ height: height + 'px' }"
+      v-if="currentSelect === 'header'"
+    >
+      <DevToolTitle> 常规 </DevToolTitle>
       <view class="net-detail-item">
-        <view>请求url:</view>
+        <view>请求地址:</view>
         <view>{{ network.url }}</view>
       </view>
       <view class="net-detail-item">
@@ -26,32 +30,69 @@
       <view class="net-detail-item">
         <view>状态代码:</view>
         {{ network.status }}
+
+        <Tag v-if="network.intercepted" mode="error" style="margin-left: 6px">
+          已拦截
+        </Tag>
+      </view>
+      <view class="net-detail-item">
+        <view>开始时间:</view>
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>结束时间:</view>
+        {{
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求耗时:</view>
+        {{ network.time ?? '--' }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求大小:</view>
+        {{ network.size ?? '--' }}
       </view>
 
       <DevToolTitle>请求头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.requestHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.requestHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.requestHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无请求头" />
       </view>
 
       <DevToolTitle>响应头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.responseHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.responseHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.responseHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无响应头" />
       </view>
     </view>
-
     <template v-if="currentSelect === 'payload'">
       <template v-if="payload?.type === 'object'">
-        <JsonPretty :data="payload.value" />
+        <JsonPretty :data="payload.value" virtual :height="height" />
       </template>
       <view
         v-else-if="payload?.type === 'string'"
@@ -64,7 +105,7 @@
 
     <template v-if="currentSelect === 'response'">
       <template v-if="response?.type === 'object'">
-        <JsonPretty :data="response.value" virtual />
+        <JsonPretty :data="response.value" virtual :height="height" />
       </template>
       <view
         v-else-if="response?.type === 'string'"
@@ -77,13 +118,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 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';
+import { formatDate } from '../../utils';
 const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
@@ -100,6 +142,9 @@ const selectItems = [
     value: 'response',
   },
 ];
+
+const height = ref(0);
+
 const currentSelect = ref('header');
 
 const payload = computed(() => {
@@ -148,50 +193,60 @@ function onSelect(item: { label: string; value: string }) {
 function onClose() {
   emit('close');
 }
+
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+
+  height.value = windowHeight - 32 - 32 - 2;
+});
 </script>
 <style scoped>
 .network-detail {
   position: fixed;
   width: 100vw;
   height: 100%;
-  z-index: 5;
-  /* z-index: 1001; */
+
   top: 0;
   left: 0;
   padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
 
   background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
 }
-.network-detail .network-detail-control {
+.network-detail-control {
   display: flex;
   align-items: center;
-  margin-bottom: 4px;
+  /* margin-bottom: 4px; */
   gap: 12px;
   height: 32px;
   border-bottom: 1px solid transparent;
   box-sizing: border-box;
 }
-
-.network-detail .network-detail-control :deep(.tag) {
+.network-detail-control :deep(.tag) {
   margin-right: 16px;
 }
-.network-detail .network-detail-control :deep(.tag):last-child {
+.network-detail-control :deep(.tag):last-child {
   margin-right: 0;
 }
 
-.network-detail .network-detail-header .net-detail-item {
+.net-detail-item {
   display: flex;
   align-items: center;
   min-height: 28px;
   word-break: break-all;
 }
-.network-detail .network-detail-header .net-detail-item > view:first-child {
+.network-detail-header {
+  overflow: auto;
+}
+.net-detail-item > view:first-child {
   white-space: nowrap;
   margin-right: 8px;
   color: var(--dev-tool-info-color);
 }
-.network-detail .network-detail-payload {
+.network-detail-payload {
   word-break: break-all;
   max-width: 100%;
 }

package/dist/v3/NetworkList/NetworkIntercept.vue

@@ -0,0 +1,85 @@
+<template>
+  <view class="network-intercept" :style="{ zIndex: zIndex }">
+    <view class="network-intercept-control">
+      <DevToolTitle>请求拦截</DevToolTitle>
+      <CircularButton
+        style="margin-left: auto"
+        text="+"
+        @click="emit('openConfig')"
+      />
+      <CircularButton
+        style="margin-left: 6px"
+        text="×"
+        @click="emit('close')"
+      />
+    </view>
+    <VirtualListPro
+      class="network-intercept-list"
+      :data="interceptNetworkList"
+      :pageSize="15"
+      v-if="interceptNetworkList && interceptNetworkList.length > 0"
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <InterceptItem
+            :network="item"
+            @openConfig="emit('openConfig', $event)"
+            @remove="emit('remove', $event)"
+          />
+        </AutoSize>
+      </template>
+    </VirtualListPro>
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import type { DevTool } from '../../type';
+import CircularButton from '../CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import InterceptItem from './InterceptItem.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+import Empty from '../Empty/index.vue';
+
+const props = defineProps<{
+  zIndex?: number;
+  interceptNetworkList?: DevTool.NetworkItem[];
+}>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'remove', value: DevTool.NetworkItem): void;
+  (e: 'openConfig', value?: DevTool.NetworkItem): void;
+}>();
+</script>
+<style lang="scss" scoped>
+.network-intercept {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  /* #ifdef H5 */
+  padding: 50px 0px;
+  /* #endif */
+
+  overflow: auto;
+
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.network-intercept-control {
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>

package/dist/v3/NetworkList/NetworkItem.vue

@@ -1,6 +1,9 @@
 <template>
   <view class="network-item" @click="emit('openDetail')">
     <view class="network-url-row">
+      <Tag mode="error" style="margin-right: 6px" v-if="network?.intercepted">
+        拦
+      </Tag>
       <Tag mode="info">{{ network.method }}</Tag>
 
       <view class="network-url" v-html="lastUrl"> </view>
@@ -10,20 +13,7 @@
       </Tag>
     </view>
     <view class="network-info">
-      <view>
-        <Tag
-          :mode="
-            network.status === 'pending'
-              ? 'info'
-              : /[4,5]\d{2,}/.test(network.status + '') ||
-                  network.status === 'error'
-                ? 'error'
-                : 'success'
-          "
-          >{{ network.status }}</Tag
-        >
-      </view>
-      <!-- <view>{{ network.status }}</view> -->
+      <Tag :mode="tagMode">{{ network.status }}</Tag>
       <view>{{ network.time }}</view>
       <view>{{ network.size }}</view>
       <view>
@@ -32,9 +22,9 @@
         {{
           network.startTime
             ? formatDate(network.startTime, 'HH:mm:ss:SS')
-            : '--:--:--'
-        }}</view
-      >
+            : '--:--:--:---'
+        }}
+      </view>
       <view>
         结束:
         {{
@@ -89,6 +79,15 @@ const isUseDevSource = computed(() => {
     props.useDevSource
   );
 });
+
+const tagMode = computed(() => {
+  const status = props.network.status;
+  return status === 'pending'
+    ? 'info'
+    : /[4,5]\d{2,}/.test(status + '') || status === 'error'
+      ? 'error'
+      : 'success';
+});
 </script>
 <style scoped>
 .network-item {
@@ -102,8 +101,9 @@ const isUseDevSource = computed(() => {
 }
 
 .network-url {
-  margin-left: 4px;
+  margin-left: 6px;
   flex: 1;
+  max-width: 300px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;