vite-uni-dev-tool 0.0.21 → 0.0.23

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

@@ -1,6 +1,7 @@
 <template>
   <view class="network-detail" :style="{ zIndex: zIndex }">
     <view class="network-detail-control">
+      <DevToolTitle style="margin-right: 16px"> 请求详情 </DevToolTitle>
       <Tag
         mode="info"
         v-for="item in selectItems"
@@ -13,8 +14,12 @@
       <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>请求地址:</view>
         <view>{{ network.url }}</view>
@@ -26,6 +31,10 @@
       <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>
@@ -82,7 +91,6 @@
         <Empty text="暂无响应头" />
       </view>
     </view>
-
     <template v-if="currentSelect === 'payload'">
       <template v-if="payload?.type === 'object'">
         <JsonPretty :data="payload.value" virtual :height="height" />
@@ -198,44 +206,48 @@ onMounted(() => {
   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; */
-  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;
+  font-size: 12px;
+}
+.network-detail-header {
+  overflow: auto;
 }
-.network-detail .network-detail-header .net-detail-item > view:first-child {
+.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;
@@ -120,17 +120,6 @@ const isUseDevSource = computed(() => {
   color: var(--dev-tool-text-color);
   transition: color 0.3s;
 }
-.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;
-}
 
 .network-time-line {
   position: relative;

package/dist/v3/NetworkList/NetworkSend.vue

@@ -1,5 +1,9 @@
 <template>
   <view class="network-send" :style="{ zIndex: zIndex }">
+    <view class="network-send-control">
+      <DevToolTitle>发起请求</DevToolTitle>
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
     <view class="network-send-form">
       <view class="network-send-control">
         <DevToolTitle>超时时间</DevToolTitle>
@@ -11,7 +15,6 @@
       />
       <view class="network-send-control">
         <DevToolTitle>请求方式</DevToolTitle>
-        <CircularButton style="margin-left: auto" text="×" @click="onClose" />
       </view>
       <radio-group class="radio-group" @change="onChangeRequestMethod">
         <label
@@ -22,6 +25,7 @@
           <radio
             size
             style="transform: scale(0.8)"
+            color="#9254de"
             :value="item.value"
             :checked="item.value === state.method"
           />
@@ -48,7 +52,7 @@
             v-for="(item, index) in headerList"
             :key="item.id"
           >
-            <checkbox :checked="item.checked" />
+            <checkbox color="#9254de" :checked="item.checked" />
             <input
               class="network-input"
               placeholder="请输入请求头名称"
@@ -103,7 +107,11 @@
             v-for="(item, index) in queryList"
             :key="item.id"
           >
-            <checkbox :checked="item.checked" :value="item.id" />
+            <checkbox
+              color="#9254de"
+              :checked="item.checked"
+              :value="item.id"
+            />
             <input
               class="network-input"
               placeholder="请输入参数名称"
@@ -142,20 +150,17 @@
           @input="onChangeState($event, 'bodyText')"
         />
       </template>
-
-      <view class="network-send-buttons">
-        <button size="mini" :disabled="!isFinished" @click="onDetail">
-          详情
-        </button>
-        <button size="mini" @click="onReset">重置</button>
-        <button size="mini" @click="onSend">发送</button>
-      </view>
-
-      <NetworkDetail
-        v-show="showDetail"
-        :network="network"
-        @close="onCloseDetail"
-      />
+    </view>
+    <view class="network-send-buttons">
+      <button
+        size="mini"
+        :disabled="!isFinished"
+        @click="emit('openDetail', network)"
+      >
+        详情
+      </button>
+      <button size="mini" @click="onReset">重置</button>
+      <button size="mini" @click="onSend">发送</button>
     </view>
   </view>
 </template>
@@ -163,12 +168,18 @@
 import { ref, reactive, onMounted } from 'vue';
 import CircularButton from '../CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import NetworkDetail from './NetworkDetail.vue';
 import type { DevTool } from '../../type';
 
-const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
+const props = defineProps<{
+  network: DevTool.NetworkItem;
+  zIndex?: number;
+  interceptNetworkList?: DevTool.NetworkItem[];
+}>();
 
-const emit = defineEmits<{ (e: 'close'): void }>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'openDetail', v: DevTool.NetworkItem): void;
+}>();
 
 const requestMethods = [
   { name: 'GET', value: 'GET' },
@@ -241,8 +252,6 @@ const queryList = reactive<PB[]>([
 
 const isFinished = ref(false);
 
-const showDetail = ref(false);
-
 const network = reactive<DevTool.NetworkItem>({
   index: 0,
   url: '',
@@ -257,8 +266,15 @@ const network = reactive<DevTool.NetworkItem>({
     requestHeader: [],
     responseHeader: [],
   },
-  response: '',
+  response: {
+    data: undefined,
+    statusCode: 0,
+    header: {},
+    cookies: [],
+    errMsg: '',
+  },
   payload: undefined,
+  intercepted: false,
 });
 
 const noBodyRequestMethods = ['GET', 'HEAD', 'PATCH', 'OPTIONS'];
@@ -296,14 +312,6 @@ function onChangeUrl(e: any) {
   queryList.splice(0, queryList.length, ...list);
 }
 
-function onDetail() {
-  showDetail.value = true;
-}
-
-function onCloseDetail() {
-  showDetail.value = false;
-}
-
 function onReset() {
   isFinished.value = false;
   hasUrl.value = true;
@@ -399,18 +407,17 @@ function onSend() {
         res?.header?.['Content-Length'] || res?.header?.['content-length'] || 0;
       network.size = len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
       network.response = res;
-      network.headers.requestHeader = Object.entries(
+      network.headers.requestHeader = objectToArray(
         requestOptions?.header ?? {},
-      ).map(([key, value]) => ({
-        key,
-        value,
-      }));
-      network.headers.responseHeader = Object.entries(res?.header ?? {}).map(
-        ([key, value]) => ({
-          key,
-          value,
-        }),
       );
+      network.headers.responseHeader = objectToArray(res.header ?? {});
+
+      network.intercepted =
+        props.interceptNetworkList?.some((item) => {
+          const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
+          const curKey = `${network.method?.toUpperCase()}|${network.url?.split('?')[0]}`;
+          return key === curKey;
+        }) ?? false;
 
       // 完成
       uni.hideLoading();
@@ -602,12 +609,20 @@ onMounted(() => {
   top: 0;
   left: 0;
   padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
   overflow: auto;
 
   background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
 }
-.network-send .network-send-control {
+.network-send-form {
+  height: calc(100% - 32px - 42px);
+  overflow: auto;
+}
+
+.network-send-control {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -616,10 +631,10 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
-.network-send .network-send-control :deep(.tag) {
+.network-send-control :deep(.tag) {
   margin-right: 16px;
 }
-.network-send .network-send-control :deep(.tag):last-child {
+.network-send-control :deep(.tag):last-child {
   margin-right: 0;
 }
 
@@ -628,11 +643,12 @@ onMounted(() => {
   flex-wrap: wrap;
 }
 
-.radio-group .radio-group-item {
+.radio-group-item {
   display: flex;
   align-items: center;
   width: 25%;
   margin-bottom: 6px;
+  font-size: 12px;
 }
 
 .network-input {