vite-uni-dev-tool 0.0.22 → 0.0.24

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -1,11 +1,13 @@
 <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"
         :active="item.value === currentSelect"
         :key="item.value"
+        style="margin-right: 16px"
         @click="onSelect(item)"
       >
         {{ item.label }}
@@ -20,15 +22,15 @@
     >
       <DevToolTitle> 常规 </DevToolTitle>
       <view class="net-detail-item">
-        <view>请求地址:</view>
+        <view class="net-detail-item-key">请求地址:</view>
         <view>{{ network.url }}</view>
       </view>
       <view class="net-detail-item">
-        <view>请求方法:</view>
+        <view class="net-detail-item-key">请求方法:</view>
         <Tag mode="info">{{ network.method }}</Tag>
       </view>
       <view class="net-detail-item">
-        <view>状态代码:</view>
+        <view class="net-detail-item-key">状态代码:</view>
         {{ network.status }}
 
         <Tag v-if="network.intercepted" mode="error" style="margin-left: 6px">
@@ -36,7 +38,7 @@
         </Tag>
       </view>
       <view class="net-detail-item">
-        <view>开始时间:</view>
+        <view class="net-detail-item-key">开始时间:</view>
         {{
           network.startTime
             ? formatDate(network.startTime, 'HH:mm:ss:SS')
@@ -44,7 +46,7 @@
         }}
       </view>
       <view class="net-detail-item">
-        <view>结束时间:</view>
+        <view class="net-detail-item-key">结束时间:</view>
         {{
           network.endTime
             ? formatDate(network.endTime, 'HH:mm:ss:SS')
@@ -52,11 +54,11 @@
         }}
       </view>
       <view class="net-detail-item">
-        <view>请求耗时:</view>
+        <view class="net-detail-item-key">请求耗时:</view>
         {{ network.time ?? '--' }}
       </view>
       <view class="net-detail-item">
-        <view>请求大小:</view>
+        <view class="net-detail-item-key">请求大小:</view>
         {{ network.size ?? '--' }}
       </view>
 
@@ -67,7 +69,7 @@
           v-for="item in network.headers.requestHeader"
           :key="item.key"
         >
-          <view>{{ item.key }}:</view>
+          <view class="net-detail-item-key">{{ item.key }}:</view>
           {{ item.value }}
         </view>
       </template>
@@ -82,7 +84,7 @@
           v-for="item in network.headers.responseHeader"
           :key="item.key"
         >
-          <view>{{ item.key }}:</view>
+          <view class="net-detail-item-key">{{ item.key }}:</view>
           {{ item.value }}
         </view>
       </template>
@@ -220,28 +222,22 @@ onMounted(() => {
   display: flex;
   align-items: center;
   /* margin-bottom: 4px; */
-  gap: 12px;
   height: 32px;
   border-bottom: 1px solid transparent;
   box-sizing: border-box;
 }
-.network-detail-control :deep(.tag) {
-  margin-right: 16px;
-}
-.network-detail-control :deep(.tag):last-child {
-  margin-right: 0;
-}
 
 .net-detail-item {
   display: flex;
   align-items: center;
   min-height: 28px;
   word-break: break-all;
+  font-size: 12px;
 }
 .network-detail-header {
   overflow: auto;
 }
-.net-detail-item > view:first-child {
+.net-detail-item-key {
   white-space: nowrap;
   margin-right: 8px;
   color: var(--dev-tool-info-color);

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/NetworkList/NetworkSend.vue

@@ -155,12 +155,17 @@
       <button
         size="mini"
         :disabled="!isFinished"
+        class="network-send-button"
         @click="emit('openDetail', network)"
       >
         详情
       </button>
-      <button size="mini" @click="onReset">重置</button>
-      <button size="mini" @click="onSend">发送</button>
+      <button size="mini" class="network-send-button" @click="onReset">
+        重置
+      </button>
+      <button size="mini" class="network-send-button-last" @click="onSend">
+        发送
+      </button>
     </view>
   </view>
 </template>
@@ -207,25 +212,25 @@ const state = reactive<{
 
 const defaultHeader = [
   {
-    id: 1,
+    id: '1',
     key: 'Accept',
     value: '*/*',
     checked: false,
   },
   {
-    id: 2,
+    id: '2',
     key: 'Accept-Language',
     value: 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
     checked: false,
   },
   {
-    id: 3,
+    id: '3',
     key: 'Cache-Control',
     value: 'no-cache',
     checked: false,
   },
   {
-    id: 4,
+    id: '4',
     key: 'Content-Type',
     value: 'application/json; charset=utf-8',
     checked: true,
@@ -233,7 +238,7 @@ const defaultHeader = [
 ];
 
 type PB = {
-  id: number;
+  id: string;
   key: string;
   value: string;
   checked: boolean;
@@ -243,7 +248,7 @@ const headerList = reactive([...defaultHeader]);
 
 const queryList = reactive<PB[]>([
   {
-    id: 1,
+    id: '1',
     key: 'a',
     value: '123',
     checked: true,
@@ -441,7 +446,7 @@ function onDeleteHeader(item: any) {
 }
 
 function onAddHeader() {
-  const id = Date.now();
+  const id = Date.now().toString();
   headerList.push({
     id,
     key: '',
@@ -466,7 +471,7 @@ function onDeleteQuery(item: any) {
   queryList.splice(index, 1);
 }
 function onAddQuery() {
-  const id = Date.now();
+  const id = Date.now().toString();
   queryList.push({
     id,
     key: '',
@@ -500,7 +505,7 @@ function arrayToObject(arr: any[]) {
 
 function objectToArray<T extends Record<string, any>>(obj: T) {
   return Object.entries(obj).map(([key, value]) => ({
-    id: Date.now(),
+    id: Date.now().toString(),
     key,
     value,
     checked: true,
@@ -562,7 +567,7 @@ function handleResendNetwork() {
       return {
         ...item,
         checked: true,
-        id: index,
+        id: index.toString(),
       };
     }) ?? [];
 
@@ -631,13 +636,6 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
-.network-send-control :deep(.tag) {
-  margin-right: 16px;
-}
-.network-send-control :deep(.tag):last-child {
-  margin-right: 0;
-}
-
 .radio-group {
   display: flex;
   flex-wrap: wrap;
@@ -671,9 +669,6 @@ onMounted(() => {
   color: red;
 }
 
-.network-header-list {
-}
-
 .network-header-item {
   display: flex;
   align-items: center;
@@ -684,15 +679,11 @@ onMounted(() => {
   text-align: center;
 }
 
-.network-param-list {
-}
 .network-param-item {
   display: flex;
   align-items: center;
 }
 
-.network-body-data {
-}
 .network-body-data-item {
   display: flex;
   align-items: center;
@@ -707,11 +698,11 @@ onMounted(() => {
   margin-top: 12px;
   background-color: var(--dev-tool-bg3-color);
 }
-.network-send-buttons button {
+.network-send-button {
   width: 100%;
   margin-right: 6px;
 }
-.network-send-buttons button:last-child {
-  margin: 0;
+.network-send-button-last {
+  width: 100%;
 }
 </style>

package/dist/v3/RunJS/index.vue

@@ -10,7 +10,7 @@
       <Tag mode="clear" @click="emit('clear')">清空</Tag>
     </view>
     <view class="run-js-list">
-      <view class="run-js-item" v-for="item in runJSList">
+      <view class="run-js-item" v-for="item in runJSList" :key="item.timer">
         <view :class="`run-js-item-icon run-js-item-${item.mode}`"></view>
         <view class="run-js-item-duration" v-if="item.mode === 'output'">
           {{ item.duration }}ms

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

@@ -0,0 +1,2 @@
+export declare const version = "";
+//# sourceMappingURL=const.d.ts.map

package/dist/v3/SettingList/const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../dev/v3/SettingList/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,KAAK,CAAC"}

package/dist/v3/SettingList/index.vue

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

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

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

package/dist/v3/SourceCode/Line.vue

@@ -6,7 +6,8 @@
     <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"
+        v-for="(item, index) in line.words"
+        :key="index"
         :class="['source-code-line-word', item.class]"
       >
         {{ item.word }}
@@ -35,7 +36,7 @@ const props = withDefaults(
 .source-code-line {
   display: flex;
   align-items: center;
-  height: 24px;
+  height: 20px;
 }
 
 .source-code-line-active {
@@ -49,14 +50,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/Tabs/index.vue

@@ -90,6 +90,8 @@ function onScroll(e: any) {
   white-space: nowrap;
   width: 100%;
 }
+
+/* #ifdef H5 || APP-PLUS */
 .tabs-list ::-webkit-scrollbar {
   display: none;
   width: 0;
@@ -101,6 +103,8 @@ function onScroll(e: any) {
   height: 0;
   background-color: transparent;
 }
+/* #endif */
+
 .tabs .tabs-item {
   display: inline-block;
   padding: 0 16px;

package/dist/v3/Tag/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :class="`tag tag-${mode} ${active ? 'tag-active' : ''}`"
+    :class="['tag', `tag-${mode}`, active ? 'tag-active' : '']"
     @click="onClick"
   >
     <slot></slot>

package/dist/v3/UniEvent/index.vue

@@ -3,25 +3,25 @@
     <DevToolTitle innerStyle="padding: 0 16px">事件触发统计</DevToolTitle>
     <view class="uni-event-statistics">
       <view class="uni-event-statistics-item">
-        <view>on: </view>
+        <view class="uni-event-statistics-item-name">on: </view>
         <Tag mode="log" style="flex: 1; justify-content: center">
           {{ eventCount?.on ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view>once: </view>
+        <view class="uni-event-statistics-item-name">once: </view>
         <Tag mode="warn" style="flex: 1; justify-content: center">
           {{ eventCount?.once ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view>emit: </view>
+        <view class="uni-event-statistics-item-name">emit: </view>
         <Tag mode="main" style="flex: 1; justify-content: center">
           {{ eventCount?.emit ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view>off: </view>
+        <view class="uni-event-statistics-item-name">off: </view>
         <Tag mode="error" style="flex: 1; justify-content: center">
           {{ eventCount?.off ?? 0 }}
         </Tag>
@@ -36,7 +36,8 @@
     </DevToolTitle>
     <view class="uni-event-list">
       <UniEventItem
-        v-for="item in eventList"
+        v-for="(item, index) in eventList"
+        :key="index"
         :eventItem="item"
         :mode="mode"
         :useDevSource="useDevSource"
@@ -90,7 +91,7 @@ const emit = defineEmits<{
   align-items: center;
   width: 25%;
 }
-.uni-event-statistics-item view:first-child {
+.uni-event-statistics-item-name {
   margin-right: 8px;
 }
 .uni-event-list {

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 class="upload-detail-item-key">{{ 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-key {
   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>