vite-uni-dev-tool 0.0.22 → 0.0.23

package/dist/v3/DevToolWindow/index.vue

@@ -70,9 +70,13 @@
           :currentUploadType="currentUploadType"
           :uploadList="uploadList"
           :zIndex="zIndex + 1"
+          :mode="mode"
+          :useDevSource="useDevSource"
           v-model="searchUpload"
           @choose="onUploadChoose"
           @search="onSearchUpload"
+          @openDetail="onOpenUploadDetail"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -84,6 +88,8 @@
           v-model="searchWs"
           @choose="onWebSocketChoose"
           @search="onSearchWs"
+          @openDetail="onOpenWebSocketDetail"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -235,12 +241,28 @@
       :network="network"
       @close="onCloseNetworkDetail"
     />
+
+    <!-- 上传详情 -->
+    <UploadDetail
+      v-if="showUploadDetail"
+      :upload="upload"
+      :zIndex="zIndex"
+      @close="onCloseUploadDetail"
+    />
+
+    <WebSocketDetail
+      v-if="showWebSocketDetail"
+      :ws="currentWebSocket"
+      :zIndex="zIndex"
+      @close="onCloseWebSocketDetail"
+      @clear="onClearWebSocketMessage"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
 import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
-import { ref, onMounted, reactive } from 'vue';
+import { ref, onMounted, reactive, computed, nextTick } from 'vue';
 import Tabs from '../Tabs/index.vue';
 import ConsoleList from '../ConsoleList/index.vue';
 import NetworkList from '../NetworkList/index.vue';
@@ -265,6 +287,9 @@ import NetworkDetail from '../NetworkList/NetworkDetail.vue';
 import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
 import InterceptConfig from '../NetworkList/InterceptConfig.vue';
 
+import UploadDetail from '../UploadList/UploadDetail.vue';
+import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
+
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -292,6 +317,7 @@ import {
   DEV_INTERCEPT_NETWORK_UPDATE,
   DEV_INTERCEPT_NETWORK_REMOVE,
   DEV_CHANGE_CACHE_INTERCEPT_CONFIG,
+  DEV_WEBSOCKET_CLEAR_MESSAGE,
 } from '../../const';
 import { debounce, hightLight, isAndroid, isMockWX } from '../../utils/index';
 import type { DevTool } from '../../type';
@@ -367,9 +393,25 @@ const showNetworkSend = ref(false);
 const showNetworkDetail = ref(false);
 const showNetworkIntercept = ref(false);
 const showInterceptConfig = ref(false);
-
 const cacheInterceptConfig = ref(true);
 
+const upload = reactive<DevTool.UploadItem>({
+  index: 0,
+  status: '',
+});
+const showUploadDetail = ref(false);
+
+const webSocket = reactive<DevTool.WS>({
+  url: '',
+  message: [],
+});
+
+const currentWebSocket = computed(() => {
+  return wsList.value.find((item) => item.url === webSocket.url);
+});
+
+const showWebSocketDetail = ref(false);
+
 const props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -1230,6 +1272,40 @@ function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
     data: [ni],
   });
 }
+
+function onOpenUploadDetail(up?: DevTool.UploadItem) {
+  Object.assign(upload, up);
+  showUploadDetail.value = true;
+}
+
+function onCloseUploadDetail() {
+  showUploadDetail.value = false;
+}
+
+function onOpenWebSocketDetail(ws?: DevTool.WS) {
+  Object.assign(webSocket, ws);
+
+  nextTick(() => {
+    if (currentWebSocket.value) {
+      showWebSocketDetail.value = true;
+    } else {
+      //
+    }
+  });
+}
+
+function onCloseWebSocketDetail() {
+  showWebSocketDetail.value = false;
+}
+
+function onClearWebSocketMessage(ws: DevTool.WS) {
+  console.log('ws: ', ws);
+
+  basicSendMessage({
+    type: DEV_WEBSOCKET_CLEAR_MESSAGE,
+    data: ws,
+  });
+}
 </script>
 
 <style scoped>
@@ -1283,7 +1359,6 @@ function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
   --dev-tool-info-color: #9c9c9c;
   --dev-tool-log-color: #f9f9f9;
   --dev-tool-nil-color: #020201;
-  --dev-tool-string-color: #888888;
   --dev-tool-number-color: #1d8ce0;
   --dev-tool-boolean-color: #1d8ce0;
   --dev-tool-symbol-color: bisque;

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"
@@ -220,7 +221,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   /* margin-bottom: 4px; */
-  gap: 12px;
   height: 32px;
   border-bottom: 1px solid transparent;
   box-sizing: border-box;
@@ -237,6 +237,7 @@ onMounted(() => {
   align-items: center;
   min-height: 28px;
   word-break: break-all;
+  font-size: 12px;
 }
 .network-detail-header {
   overflow: auto;

package/dist/v3/NetworkList/NetworkItem.vue

@@ -120,17 +120,6 @@ const tagMode = 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/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.22-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool({{ version }}-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -183,6 +183,9 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
+
+const version = __VERSION__ ?? '1.0.0';
+
 const props = defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;

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

@@ -217,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/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;
   },
 );