vite-uni-dev-tool 0.0.20 → 0.0.22

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 {

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.20-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/Line.vue

@@ -0,0 +1,101 @@
+<template>
+  <view
+    :class="['source-code-line', active ? 'source-code-line-active' : '']"
+    :id="id"
+  >
+    <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
+    <view :class="['source-code-line-content', line.class]">
+      <view
+        v-for="item in line.words"
+        :class="['source-code-line-word', item.class]"
+      >
+        {{ item.word }}
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { LineInfo } from './parseCode';
+
+const props = withDefaults(
+  defineProps<{
+    line: LineInfo;
+
+    id: string;
+    active?: boolean;
+    num?: number;
+    showNum?: boolean;
+  }>(),
+  {
+    showNum: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.source-code-line {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+
+.source-code-line-active {
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+
+.source-code-line-num {
+  flex-shrink: 0;
+  width: 30px;
+  padding: 0 6px;
+  margin-right: 6px;
+  text-align: right;
+  height: 24px;
+  border-right: 1px solid var(--dev-tool-border-color);
+}
+
+.source-code-line-content {
+  display: flex;
+  white-space: nowrap;
+  height: 24px;
+}
+
+.source-code-line-word {
+  white-space: nowrap;
+}
+
+.source-code-pre-note {
+  color: var(--dev-tool-note-color);
+}
+
+.source-code-pre-space {
+  width: 8px;
+}
+
+.source-code-pre-keyword {
+  color: var(--dev-tool-keyword-color);
+}
+
+.source-code-pre-bracket {
+  color: var(--dev-tool-bracket-color);
+}
+
+.source-code-pre-quotation {
+  color: var(--dev-tool-quotation-color);
+}
+
+.source-code-pre-string {
+  color: var(--dev-tool-string-color);
+}
+
+.source-code-pre-function {
+  color: var(--dev-tool-function-color);
+}
+
+.source-code-pre-attribute {
+  color: var(--dev-tool-attribute-color);
+}
+
+.source-code-pre-operator {
+  color: var(--dev-tool-operator-color);
+}
+</style>

package/dist/v3/SourceCode/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="dev-tool-code" :style="{ zIndex: zIndex }">
     <view class="dev-tool-code-control">
-      <FilterInput
+      <!-- <FilterInput
         v-model="modelValue"
         style="width: 100%"
         @search="onSearch"
-      />
+      /> -->
+      <view class="dev-tool-code-title">{{ fileName }}</view>
       <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
-    <view class="dev-tool-code-title">{{ fileName }}</view>
 
     <VirtualListPro
       v-if="codes.length > 0"
@@ -17,8 +17,6 @@
       :height="height"
       :data="codes"
       :scrollWithAnimation="true"
-      :defaultCurrent="defaultCurrent"
-      :scrollIntoView="scrollIntoView"
     >
       <template #default="{ list, current, start }">
         <AutoSize
@@ -26,18 +24,12 @@
           :key="start + index"
           :index="start + index"
         >
-          <view
+          <Line
+            :line="code"
             :id="`dev-code-${start + index}`"
-            :class="`dev-tool-code-item ${start + index === activeRowCol.row ? 'dev-tool-code-item-active' : ''}`"
-          >
-            <view class="dev-tool-code-item-index">
-              {{ start + index + 1 }}
-            </view>
-
-            <view class="dev-tool-code-item-content">
-              {{ code }}
-            </view>
-          </view>
+            :num="start + index + 1"
+            :active="start + index === activeRowCol.row"
+          />
         </AutoSize>
       </template>
     </VirtualListPro>
@@ -46,13 +38,14 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue';
-import FilterInput from '../FilterInput/index.vue';
+// import FilterInput from '../FilterInput/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import Empty from '../Empty/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
-import { hightLight, isAndroid, parseStock } from '../../utils';
-
+import Line from './Line.vue';
+import { isAndroid, parseStock } from '../../utils';
+import { parseCode, type LineInfo } from './parseCode';
 const props = defineProps<{
   url: string;
   sourceFileServers?: string[];
@@ -62,7 +55,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ (e: 'close'): void }>();
 
-const modelValue = ref('');
+// const modelValue = ref('');
 const height = ref(0);
 const fileName = computed(() => {
   const name =
@@ -73,20 +66,20 @@ const fileName = computed(() => {
 const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
 const scrollIntoView = ref('');
 
-let backupCodes: string[] = [];
+// let backupCodes: string[] = [];
 
-const codes = ref<string[]>([]);
-const defaultCurrent = ref(1);
-const pageSize = 25;
+const codes = ref<LineInfo[]>([]);
+// const defaultCurrent = ref(1);
+const pageSize = 50;
 
 function onClose() {
   emit('close');
 }
 
 function onSearch(value: string) {
-  codes.value = backupCodes.map((code) => {
-    return hightLight(code, value);
-  });
+  // codes.value = backupCodes.map((code) => {
+  //   return hightLight(code, value);
+  // });
 }
 
 let timer: number;
@@ -139,24 +132,26 @@ function getCode(url: string, i: number = 0) {
     url: allUrl,
     success: (res) => {
       if (typeof res.data === 'string') {
-        codes.value = res.data?.split('\n') ?? [];
+        codes.value = parseCode(res.data ?? '');
+
+        // res.data?.split('\n') ?? [];
 
         // 缓慢显示
         const row = activeRowCol.value.row;
         // defaultCurrent.value = Math.ceil(activeRowCol.value.row / pageSize);
         const targetCurrent = Math.ceil(row / pageSize);
 
-        startCounter({
-          start: 1,
-          target: targetCurrent,
-          duration: 500,
-          onExecute(current) {
-            scrollIntoView.value = `dev-code-${current * pageSize - 1}`;
-          },
-          onSuccess() {
-            // scrollIntoView.value = `dev-code-${row}`;
-          },
-        });
+        // startCounter({
+        //   start: 1,
+        //   target: targetCurrent,
+        //   duration: 500,
+        //   onExecute(current) {
+        //     scrollIntoView.value = `dev-code-${current * pageSize - 1}`;
+        //   },
+        //   onSuccess() {
+        //     // scrollIntoView.value = `dev-code-${row}`;
+        //   },
+        // });
       }
     },
     fail: (err) => {
@@ -185,7 +180,7 @@ function getSourceCodeDev(url: string) {
 onMounted(() => {
   const { windowHeight } = uni.getWindowInfo();
 
-  height.value = windowHeight - 32 - 32 - 32;
+  height.value = windowHeight - 32 - 32;
 
   let url = props?.url;
 
@@ -211,7 +206,6 @@ onMounted(() => {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1001;
   padding: 0 16px;
   /* #ifdef H5 */
   padding: 50px 16px;
@@ -253,25 +247,4 @@ onMounted(() => {
 .dev-tool-code-list {
   height: calc(100% - 68px);
 }
-
-.dev-tool-code-item {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-.dev-tool-code-item-active {
-  color: #fff;
-  background-color: var(--dev-tool-main-color);
-}
-
-.dev-tool-code-item-index {
-  flex-shrink: 0;
-  width: 20px;
-  margin-right: 8px;
-  text-align: right;
-}
-
-.dev-tool-code-item-content {
-  white-space: pre;
-}
 </style>