vite-uni-dev-tool 0.0.16 → 0.0.17

package/dist/v3/DevToolWindow/index.vue

@@ -39,6 +39,7 @@
           @choose="onConsoleChoose"
           @search="onSearchConsole"
           @run="onRunJS"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -47,12 +48,17 @@
       <swiper-item>
         <NetworkList
           v-if="swiperShow(2)"
-          :currentNetworkType="currentNetworkType"
-          :networkList="networkList"
-          :zIndex="zIndex + 1"
           v-model="searchNetwork"
+          :mode="mode"
+          :zIndex="zIndex + 1"
+          :networkList="networkList"
+          :useDevSource="useDevSource"
+          :currentNetworkType="currentNetworkType"
+          :currentNetworkSort="currentNetworkSort"
           @choose="onNetworkChoose"
           @search="onSearchNetwork"
+          @sort="onSortNetwork"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -90,13 +96,14 @@
       <swiper-item>
         <UniEvent
           v-if="swiperShow(6)"
+          :mode="mode"
           :eventList="eventList"
           :eventCount="eventCount"
-          :mode="mode"
+          :zIndex="zIndex + 1"
           :useDevSource="useDevSource"
           :sourceFileServers="sourceFileServers"
-          :zIndex="zIndex + 1"
           @clear="onUniEventClear"
+          @openCode="onOpenCode"
         />
       </swiper-item>
       <swiper-item>
@@ -160,6 +167,16 @@
         />
       </swiper-item>
     </swiper>
+
+    <!-- 源码查看 -->
+    <SourceCode
+      v-if="openCode"
+      :url="stack"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      :zIndex="zIndex"
+      @close="onCloseCode"
+    />
   </view>
 </template>
 
@@ -183,6 +200,8 @@ import UploadList from '../UploadList/index.vue';
 import UniEvent from '../UniEvent/index.vue';
 import AppInfo from '../AppInfo/index.vue';
 import CaptureScreen from '../CaptureScreen/index.vue';
+import SourceCode from '../SourceCode/index.vue';
+
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -208,7 +227,7 @@ import {
   DEV_RUN_JS,
   DEV_CAPTURE_SCREEN_CLEAR,
 } from '../../const';
-import { debounce, hightLight } from '../../utils/index';
+import { debounce, hightLight, isAndroid, isMockWX } from '../../utils/index';
 import type { DevTool } from '../../type';
 import { eventBus } from '../../core';
 import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
@@ -360,6 +379,7 @@ const activeTab = ref(0);
 const tabScrollLeft = ref(0);
 const currentConsoleType = ref('all');
 const currentNetworkType = ref('all');
+const currentNetworkSort = ref(1);
 const currentUploadType = ref('all');
 const currentWebSocketType = ref('all');
 
@@ -370,6 +390,8 @@ const searchWs = ref('');
 const searchRoute = ref('');
 const searchStorage = ref('');
 const theme = ref('light');
+const openCode = ref(false);
+const stack = ref('');
 
 const props = withDefaults(
   defineProps<{
@@ -398,6 +420,51 @@ function swiperShow(index: number) {
   return show;
 }
 
+const calcLineStartAndEnd = (
+  list: DevTool.NetworkItem[],
+): {
+  startTime: number;
+  endTime: number;
+} => {
+  const startTime = Math.min(...list.map((item) => item.startTime));
+  const endTime = Math.max(...list.map((item) => item?.endTime ?? Date.now()));
+
+  return { startTime, endTime };
+};
+
+/**
+ * 计算 时间轴
+ * @param list
+ * @param startTime
+ * @param endTime
+ */
+const calcNetworkTimeline = (
+  list: DevTool.NetworkItem[],
+  startTime: number,
+  endTime: number,
+): DevTool.NetworkItem[] => {
+  const total = endTime - startTime;
+
+  return (
+    list?.map((item) => {
+      const width =
+        (
+          (((item.endTime ?? Date.now()) - item.startTime) / total) *
+          100
+        ).toFixed(2) + '%';
+
+      const left =
+        (((item.startTime - startTime) / total) * 100).toFixed(2) + '%';
+
+      return {
+        ...item,
+        width,
+        left,
+      };
+    }) ?? []
+  );
+};
+
 const listenPostMessage = (data: DevTool.WindowData) => {
   if (!props.open) return;
   if (!isActive) return;
@@ -444,7 +511,11 @@ const listenPostMessage = (data: DevTool.WindowData) => {
   }
 
   if (data.networkList) {
-    networkList.value = [...(data.networkList ?? [])]
+    const { startTime, endTime } = calcLineStartAndEnd(data.networkList);
+
+    const list = calcNetworkTimeline(data.networkList, startTime, endTime);
+
+    networkList.value = list
       .filter((item) => {
         if (currentNetworkType.value === 'all') return item;
         if (currentNetworkType.value !== 'clear') {
@@ -458,6 +529,13 @@ const listenPostMessage = (data: DevTool.WindowData) => {
           ...item,
           url: hightLight(item.url, searchNetwork.value),
         };
+      })
+      ?.sort((a, b) => {
+        if (currentNetworkSort.value === 1) {
+          return b.startTime - a.startTime;
+        } else {
+          return a.startTime - b.startTime;
+        }
       });
 
     backup.networkList = [...data.networkList];
@@ -528,6 +606,7 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       });
     backup.routeList = [...data.routeList];
   }
+
   if (data.eventList) {
     eventList.value = [...data.eventList];
   }
@@ -604,13 +683,14 @@ onUnload(() => {
 onShow(() => {
   isActive = true;
 });
-onHide(() => {
-  isActive = false;
 
-  setDevToolInfo({
-    devToolWindowVisible: false,
-  });
-});
+// onHide(() => {
+//   isActive = false;
+
+//   setDevToolInfo({
+//     devToolWindowVisible: false,
+//   });
+// });
 
 /** 发送消息给 uniapp */
 function basicSendMessage(message: {
@@ -760,6 +840,23 @@ function onSearchNetwork(value: string) {
     });
 }
 
+/**
+ * 排序
+ * @param sort -1 降序 1 升序
+ */
+function onSortNetwork(sort: -1 | 1) {
+  currentNetworkSort.value = sort;
+
+  const list = networkList.value.sort((a, b) => {
+    if (sort === 1) {
+      return b.startTime - a.startTime;
+    } else {
+      return a.startTime - b.startTime;
+    }
+  });
+  networkList.value = [...list];
+}
+
 function onUploadChoose(type: string) {
   if (type === 'clear') {
     uploadList.value = [];
@@ -1020,12 +1117,51 @@ function onChangePinia(value: Record<string, any>) {
     data: value,
   });
 }
+
+function onCloseCode() {
+  openCode.value = false;
+  stack.value = '';
+}
+function onOpenCode(value: string) {
+  if (!value) return;
+
+  stack.value = value;
+
+  const isWXLink = isMockWX(value ?? '') || props.mode !== 'development';
+  const isUseDevSource = !isWXLink && props.useDevSource;
+
+  if (isWXLink) {
+    uni.showToast({
+      icon: 'none',
+      title: '[DevTool] 请在小程序真机调试模式下查看源码',
+    });
+    return;
+  }
+
+  if (!isUseDevSource) {
+    return;
+  }
+
+  if (isAndroid()) {
+    if (props.sourceFileServers && props.sourceFileServers?.length > 0) {
+      openCode.value = true;
+    } else {
+      uni.showToast({
+        icon: 'none',
+        title: '[DevTool] sourceFileServers 配置异常',
+      });
+      uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
+    }
+  } else {
+    openCode.value = true;
+  }
+}
 </script>
 
 <style scoped>
 .dev-tool-window {
   --dev-tool-main-color: #9254de;
-  --dev-tool-normal-bg-color: #f9f9f9;
+
   --dev-tool-warn-color: #ffa940;
   --dev-tool-warn-bg-color: #fff7e6;
   --dev-tool-error-color: #ff4d4f;
@@ -1036,6 +1172,10 @@ function onChangePinia(value: Record<string, any>) {
   --dev-tool-base-font-size: 12px;
   --dev-tool-tag-font-size: 10px;
   --dev-tool-tips-font-size: 10px;
+
+  --dev-tool-text-color-placeholder: #909090;
+
+  --dev-tool-active-bg-color: rgba(0, 0, 0, 0.05);
   -webkit-tap-highlight-color: transparent;
 
   position: fixed;
@@ -1061,8 +1201,10 @@ function onChangePinia(value: Record<string, any>) {
 .dev-tool-window-light {
   --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
   --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
+  --dev-tool-bg3-color: rgba(255, 255, 255, 0.999);
 
   --dev-tool-text-color: #000;
+
   --dev-tool-border-color: #f0f0f0;
   --dev-tool-info-color: #9c9c9c;
   --dev-tool-log-color: #f9f9f9;
@@ -1071,15 +1213,21 @@ function onChangePinia(value: Record<string, any>) {
   --dev-tool-number-color: #1d8ce0;
   --dev-tool-boolean-color: #1d8ce0;
   --dev-tool-symbol-color: bisque;
+  --dev-tool-active-bg-color: #f0f0f0;
+  --dev-tool-time-line-color: #9254de;
 }
 .dev-tool-window-dart {
   --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
   --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
+  --dev-tool-bg3-color: rgba(43, 43, 43, 0.999);
 
   --dev-tool-text-color: #fff;
   --dev-tool-border-color: #3d3d3d;
 
   --dev-tool-log-color: #f9f9f9;
+  --dev-tool-active-bg-color: #3d3d3d;
+
+  --dev-tool-time-line-color: #f9f9f9;
 }
 
 .dev-tool-window-bg {

package/dist/v3/FilterSelect/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="filter-select-wrapper">
+    <view
+      v-if="readonly"
+      :class="`filter-select ${!modelValue ? 'filter-select-placeholder' : ''}`"
+      @click="onOpenList"
+    >
+      {{ label ?? (placeholder || '请选择') }}
+    </view>
+    <input
+      v-else
+      :class="`filter-select`"
+      :value="label"
+      :placeholder="placeholder || '请选择'"
+      @confirm="debounceInput"
+      @focus="onOpenList"
+    />
+    <view class="filter-select-clear" v-if="allowClear" @click="onClear">
+      ×
+    </view>
+
+    <view class="filter-select-list" v-if="isActive">
+      <view
+        v-for="item in options"
+        :key="item.value"
+        :class="`filter-select-item ${
+          item.value === modelValue ? 'filter-select-item-active' : ''
+        }`"
+        @click="onSelect(item)"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+
+    <view
+      class="filter-select-mask"
+      v-if="isActive"
+      @click="isActive = false"
+    ></view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { debounce } from '../../utils';
+import { ref, computed } from 'vue';
+const props = defineProps<{
+  placeholder?: string;
+  modelValue?: string;
+  readonly?: boolean;
+  allowClear?: boolean;
+  options?: { label: string; value: any }[];
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search', value: string): void;
+  (e: 'openSearch', value: boolean): void;
+  (e: 'change', value: { label: string; value: any }): void;
+}>();
+
+const isActive = ref(false);
+
+const label = computed(() => {
+  return (
+    props.options?.find((item) => item.value === props.modelValue)?.label ??
+    props.modelValue
+  );
+});
+
+function onInput(e: any) {
+  const value = e.detail.value;
+  emit('update:modelValue', value);
+  emit('search', value);
+}
+
+function onClear() {
+  emit('update:modelValue', '');
+  emit('search', '');
+}
+
+const debounceInput = debounce(onInput, 500);
+
+function onOpenList() {
+  isActive.value = true;
+}
+
+function onSelect(item: { label: string; value: any }) {
+  emit('change', item);
+  isActive.value = false;
+}
+</script>
+<style scoped>
+.filter-select-wrapper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  width: 100%;
+  height: 24px;
+
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-border-color);
+
+  background-color: var(--dev-tool-bg-color);
+  transition: background-color 0.3s;
+  box-sizing: border-box;
+}
+
+.filter-select {
+  flex: 1;
+  box-shadow: none;
+  box-sizing: border-box;
+  border-radius: 5;
+  font-family: inherit;
+  color: var(--dev-tool-text-color);
+  font-weight: 400;
+  font: unset;
+  height: 24px;
+  line-height: 24px;
+  transition: color 0.3s;
+}
+
+.filter-select-placeholder {
+  color: var(--dev-tool-text-color-placeholder);
+}
+
+.filter-select-clear {
+  padding-left: 8px;
+}
+
+.filter-select-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.filter-select-list {
+  z-index: 9999;
+  position: absolute;
+  top: 24px;
+  left: 0;
+  max-height: 300px;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--dev-tool-bg2-color);
+}
+
+.filter-select-item {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+}
+
+.filter-select-item-active {
+  background-color: var(--dev-tool-active-bg-color);
+}
+
+.filter-select-mask {
+  position: fixed;
+  z-index: 9005;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+</style>

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -10,11 +10,11 @@
       >
         {{ item.label }}
       </Tag>
-      <CloseButton style="margin-left: auto" @click="onClose" />
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
 
     <view class="network-detail-header" v-if="currentSelect === 'header'">
-      <view class="network-detail-title">常规</view>
+      <DevToolTitle>常规</DevToolTitle>
       <view class="net-detail-item">
         <view>请求url:</view>
         <view>{{ network.url }}</view>
@@ -27,7 +27,8 @@
         <view>状态代码:</view>
         {{ network.status }}
       </view>
-      <view class="network-detail-title">请求头</view>
+
+      <DevToolTitle>请求头</DevToolTitle>
       <view
         class="net-detail-item"
         v-for="item in network.headers.requestHeader"
@@ -36,7 +37,8 @@
         <view>{{ item.key }}:</view>
         {{ item.value }}
       </view>
-      <view class="network-detail-title">响应头</view>
+
+      <DevToolTitle>响应头</DevToolTitle>
       <view
         class="net-detail-item"
         v-for="item in network.headers.responseHeader"
@@ -79,7 +81,8 @@ import { ref, computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 import type { DevTool } from '../../type';
 const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
@@ -150,13 +153,13 @@ function onClose() {
 .network-detail {
   position: fixed;
   width: 100vw;
-  height: 100vh;
-  z-index: 1001;
+  height: 100%;
+  /* z-index: 1001; */
   top: 0;
   left: 0;
   padding: 0 16px;
 
-  background-color: var(--dev-tool-bg-color);
+  background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
 }
 .network-detail .network-detail-control {

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-all;
+}
+.network-stock-link {
+  text-decoration: underline;
+}
 </style>