vite-uni-dev-tool 0.0.16 → 0.0.18

package/dist/v3/NetworkList/NetworkItem.vue

@@ -1,16 +1,13 @@
 <template>
-  <view class="network-item">
+  <view class="network-item" @click="emit('openDetail')">
     <view class="network-url-row">
       <Tag mode="info">{{ network.method }}</Tag>
 
       <view class="network-url" v-html="lastUrl"> </view>
 
-      <Tag
-        mode="main"
-        class="network-detail-icon"
-        @click="showDetail = !showDetail"
-        >详情</Tag
-      >
+      <Tag mode="main" class="network-detail-icon" @click.stop="emit('resend')">
+        重发
+      </Tag>
     </view>
     <view class="network-info">
       <view>
@@ -29,52 +26,69 @@
       <!-- <view>{{ network.status }}</view> -->
       <view>{{ network.time }}</view>
       <view>{{ network.size }}</view>
-      <view
-        >开始:
+      <view>
+        {{ sortMap?.[props.currentNetworkSort] ?? '一' }}
+        开始:
         {{
           network.startTime
-            ? formatDate(network.startTime, 'HH:mm:ss')
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
             : '--:--:--'
         }}</view
       >
       <view>
         结束:
         {{
-          network.endTime ? formatDate(network.endTime, 'HH:mm:ss') : '--:--:--'
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--:---'
         }}
       </view>
     </view>
+    <view
+      class="network-time-line"
+      :style="`width: ${network.width}; left: ${network.left};`"
+    ></view>
+    <view
+      :class="`network-stock ${isUseDevSource ? 'network-stock-link' : ''}`"
+      @click.stop="emit('openCode', network.stack)"
+    >
+      {{ network?.stack }}
+    </view>
   </view>
-  <!-- <Transition name="slide-fade"> -->
-  <NetworkDetail
-    v-if="showDetail"
-    :network="network"
-    :zIndex="zIndex"
-    @close="onClose"
-  />
-  <!-- </Transition> -->
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
+import { sortMap } from './const';
 import Tag from '../Tag/index.vue';
-import NetworkDetail from './NetworkDetail.vue';
-import { formatDate } from '../../utils';
+import { formatDate, isMockWX } from '../../utils';
 import type { DevTool } from '../../type';
 const props = defineProps<{
   network: DevTool.NetworkItem;
+  currentNetworkSort: -1 | 1;
   zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openDetail'): void;
+  (e: 'resend'): void;
+  (e: 'openCode', value?: string): void;
 }>();
-const showDetail = ref(false);
 
 const lastUrl = computed(() => {
   const start = props.network.url.lastIndexOf('/');
   return props.network.url.slice(start + 1);
 });
 
-function onClose() {
-  showDetail.value = false;
-}
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.network?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
 </script>
 <style scoped>
 .network-item {
@@ -117,4 +131,20 @@ function onClose() {
   transform: translateY(20px);
   opacity: 0;
 }
+
+.network-time-line {
+  position: relative;
+  margin-top: 10px;
+  height: 2px;
+  min-width: 6px;
+  background-color: var(--dev-tool-time-line-color);
+}
+
+.network-stock {
+  text-align: right;
+  word-wrap: break-word;
+}
+.network-stock-link {
+  text-decoration: underline;
+}
 </style>