vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/DevTool/components/DevToolButton/index.vue

@@ -1,14 +1,19 @@
 <template>
+  <!-- are you ok ? -->
   <MovableContainer
     width="100px"
     height="32px"
     :x="x"
     :y="y"
     :zIndex="zIndex"
-    :customStyle="customStyle"
+    :customStyle="innerStyle"
     :contentHeight="contentHeight"
     @change="onDebounceChange">
-    <view class="dev-tool-button" @click="onClick">
+    <view
+      class="dev-tool-button"
+      @touchstart="handleTouchStart"
+      @mousedown="handleTouchStart"
+      @click="onClick">
       devtool
       <view class="dev-tool-version">{{ devToolVersion }}</view>
     </view>
@@ -16,29 +21,50 @@
 </template>
 <script lang="ts" setup>
 import { onShow } from '@dcloudio/uni-app';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import {
   getDevToolInfo,
   setDevToolInfo,
 } from '../../../../modules/devToolInfo';
 import MovableContainer from '../../../components/MovableContainer/index.vue';
 
+// 优化 Key：每当组件被重新加载（v-if 由 false 变 true）时，生成一个新的唯一标识。
+
 const x = ref(300);
 const y = ref(500);
 
+// 坐标记录，用于判定拖拽与点击冲突
+let startX = 0;
+let startY = 0;
+
 const emit = defineEmits<{
   (e: 'click', pos: { x: number; y: number }): void;
 }>();
-withDefaults(
+const props = withDefaults(
   defineProps<{
     zIndex?: number;
     customStyle?: Record<string, any>;
     contentHeight: number;
     devToolVersion?: string;
+    devToolButtonVisible?: boolean;
   }>(),
-  { zIndex: 1000 },
+  { zIndex: 1000, devToolButtonVisible: true },
 );
 
+const innerStyle = computed(() => {
+  return {
+    ...props.customStyle,
+    display: props.devToolButtonVisible ? 'block' : 'none',
+  };
+});
+
+// 记录下手的起点
+const handleTouchStart = (e: any) => {
+  const touch = e.touches ? e.touches[0] : e;
+  startX = touch.clientX || touch.pageX;
+  startY = touch.clientY || touch.pageY;
+};
+
 const onDebounceChange = (e: any) => {
   setDevToolInfo({
     left: e.detail.x,
@@ -46,7 +72,17 @@ const onDebounceChange = (e: any) => {
   });
 };
 
-const onClick = () => {
+const onClick = (e: any) => {
+  // 获取抬手时的坐标
+  const touch = e.changedTouches ? e.changedTouches[0] : e;
+  const endX = touch.clientX || touch.pageX;
+  const endY = touch.clientY || touch.pageY;
+
+  // 如果位移超过 5 像素，说明这是一次拖拽后的释放，拦截点击回调
+  if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) {
+    return;
+  }
+
   emit('click', { x: x.value + 50, y: y.value + 16 });
 };
 

package/dist/v3/DevTool/components/DevToolTitle/index.vue

@@ -1,24 +1,24 @@
-<template>
-  <view class="dev-tool-title" :style="customStyle"><slot /></view>
-</template>
-<script lang="ts" setup>
-defineProps<{ customStyle?: any }>();
-</script>
-<style scoped>
-.dev-tool-title {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.dev-tool-title::before {
-  content: '';
-  margin-right: 8px;
-  width: 2px;
-  height: 18px;
-  border-radius: 2px;
-  background-color: var(--dev-tool-main-color);
-}
-</style>
+<template>
+  <view class="dev-tool-title" :style="customStyle"><slot /></view>
+</template>
+<script lang="ts" setup>
+defineProps<{ customStyle?: any }>();
+</script>
+<style scoped>
+.dev-tool-title {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.dev-tool-title::before {
+  content: '';
+  margin-right: 8px;
+  width: 2px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-main-color);
+}
+</style>

package/dist/v3/DevTool/components/DevToolWindow/DevToolOverlay.vue

@@ -1,197 +1,197 @@
-<template>
-  <!-- 源码查看 -->
-  <AppTransition
-    :show="overlayState?.openCode"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <SourceCode
-      v-if="overlayState?.openCode"
-      :url="overlayState?.stack"
-      :mode="mode"
-      :zIndex="zIndex"
-      :sourceFileServers="sourceFileServers"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseCode" />
-  </AppTransition>
-
-  <!-- 发起请求 -->
-  <AppTransition
-    :show="overlayState?.showNetworkSend"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <NetworkSend
-      v-if="overlayState?.showNetworkSend"
-      :zIndex="zIndex"
-      :network="network"
-      :interceptNetworkList="interceptNetworkList"
-      :customStyle="customStyle"
-      :theme="theme"
-      @close="overlayHandlers.onCloseNetworkSend"
-      @openDetail="overlayHandlers.onOpenNetworkDetail" />
-  </AppTransition>
-
-  <!-- 拦截请求 -->
-  <AppTransition
-    :show="overlayState?.showNetworkIntercept"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <NetworkIntercept
-      v-if="overlayState?.showNetworkIntercept"
-      :zIndex="zIndex"
-      :network="network"
-      :interceptNetworkList="interceptNetworkList"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseNetworkIntercept"
-      @remove="onRemoveInterceptConfig"
-      @openConfig="overlayHandlers.onOpenInterceptConfig" />
-  </AppTransition>
-
-  <!-- 拦截配置 -->
-  <AppTransition
-    :show="overlayState?.showInterceptConfig"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <InterceptConfig
-      v-if="overlayState?.showInterceptConfig"
-      :zIndex="zIndex"
-      :network="network"
-      :customStyle="customStyle"
-      :theme="theme"
-      @close="overlayHandlers.onCloseInterceptConfig"
-      @confirm="onConfirmInterceptConfig" />
-  </AppTransition>
-
-  <!-- 请求详情 -->
-  <AppTransition
-    :show="overlayState?.showNetworkDetail"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <NetworkDetail
-      v-if="overlayState?.showNetworkDetail"
-      :zIndex="zIndex"
-      :network="network"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseNetworkDetail" />
-  </AppTransition>
-
-  <!-- 上传详情 -->
-  <!-- 传输详情 -->
-  <AppTransition
-    :show="overlayState?.showTransferDetail"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <TransferDetail
-      v-if="overlayState?.showTransferDetail"
-      :item="overlay.transfer"
-      :type="overlay.transfer.type"
-      :zIndex="zIndex"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseTransferDetail" />
-  </AppTransition>
-
-  <!-- WebSocket详情 -->
-  <AppTransition
-    :show="overlayState?.showWebSocketDetail"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <WebSocketDetail
-      v-if="overlayState?.showWebSocketDetail"
-      :ws="currentWebSocket"
-      :zIndex="zIndex"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseWebSocketDetail"
-      @clear="onClearWebSocketMessage"
-      @send="onSendWebSocket"
-      @openJson="onOpenJson" />
-  </AppTransition>
-
-  <!-- Json详情 -->
-  <AppTransition
-    :show="overlayState?.showJsonDetail"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <JsonDetail
-      v-if="overlayState?.showJsonDetail"
-      :data="overlayState?.jsonData"
-      :theme="theme"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseJson" />
-  </AppTransition>
-
-  <!-- NFC 工具 -->
-  <AppTransition
-    :show="overlayState?.showNfcTool"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <NFCTool
-      v-if="overlayState?.showNfcTool"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="overlayHandlers.onCloseNfcTool" />
-  </AppTransition>
-
-  <!-- Bluetooth 工具 -->
-  <AppTransition
-    :show="overlayState?.showBluetoothTool"
-    name="slide-left"
-    :zIndex="zIndex"
-    :animated="useTransition">
-    <BluetoothTool
-      v-if="overlayState?.showBluetoothTool"
-      :device="overlayState?.bluetoothDevice"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @back="overlayHandlers.onCloseBluetoothTool" />
-  </AppTransition>
-</template>
-
-<script setup lang="ts">
-import SourceCode from '../SourceCode/index.vue';
-import NetworkSend from '../NetworkList/NetworkSend.vue';
-import NetworkDetail from '../NetworkList/NetworkDetail.vue';
-import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
-import InterceptConfig from '../NetworkList/InterceptConfig.vue';
-import TransferDetail from '../TransferList/TransferDetail.vue';
-import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
-import JsonDetail from '../JsonDetail/index.vue';
-import NFCTool from '../NFCList/NFCTool.vue';
-import BluetoothTool from '../BluetoothList/BluetoothTool.vue';
-import AppTransition from '../../../components/AppTransition/index.vue';
-import type { DevTool } from '../../../../type';
-
-defineProps<{
-  overlayState: any;
-  overlayHandlers: any;
-  mode?: string;
-  zIndex: number;
-  sourceFileServers?: string[];
-  contentHeight: number;
-  customStyle?: Record<string, any>;
-  overlay: any;
-  currentWebSocket?: DevTool.WS;
-  interceptNetworkList: DevTool.NetworkItem[];
-  onRemoveInterceptConfig: (ni: DevTool.NetworkItem) => void;
-  onConfirmInterceptConfig: (ni: DevTool.NetworkItem) => void;
-  onClearWebSocketMessage: (ws: DevTool.WS) => void;
-  onSendWebSocket: (data: { url: string; message: any }) => void;
-  onOpenJson: (data?: any) => void;
-  useTransition: boolean;
-  network: DevTool.NetworkItem;
-  theme?: string;
-}>();
-</script>
+<template>
+  <!-- 源码查看 -->
+  <AppTransition
+    :show="overlayState?.openCode"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <SourceCode
+      v-if="overlayState?.openCode"
+      :url="overlayState?.stack"
+      :mode="mode"
+      :zIndex="zIndex"
+      :sourceFileServers="sourceFileServers"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseCode" />
+  </AppTransition>
+
+  <!-- 发起请求 -->
+  <AppTransition
+    :show="overlayState?.showNetworkSend"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkSend
+      v-if="overlayState?.showNetworkSend"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      :customStyle="customStyle"
+      :theme="theme"
+      @close="overlayHandlers.onCloseNetworkSend"
+      @openDetail="overlayHandlers.onOpenNetworkDetail" />
+  </AppTransition>
+
+  <!-- 拦截请求 -->
+  <AppTransition
+    :show="overlayState?.showNetworkIntercept"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkIntercept
+      v-if="overlayState?.showNetworkIntercept"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNetworkIntercept"
+      @remove="onRemoveInterceptConfig"
+      @openConfig="overlayHandlers.onOpenInterceptConfig" />
+  </AppTransition>
+
+  <!-- 拦截配置 -->
+  <AppTransition
+    :show="overlayState?.showInterceptConfig"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <InterceptConfig
+      v-if="overlayState?.showInterceptConfig"
+      :zIndex="zIndex"
+      :network="network"
+      :customStyle="customStyle"
+      :theme="theme"
+      @close="overlayHandlers.onCloseInterceptConfig"
+      @confirm="onConfirmInterceptConfig" />
+  </AppTransition>
+
+  <!-- 请求详情 -->
+  <AppTransition
+    :show="overlayState?.showNetworkDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkDetail
+      v-if="overlayState?.showNetworkDetail"
+      :zIndex="zIndex"
+      :network="network"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNetworkDetail" />
+  </AppTransition>
+
+  <!-- 上传详情 -->
+  <!-- 传输详情 -->
+  <AppTransition
+    :show="overlayState?.showTransferDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <TransferDetail
+      v-if="overlayState?.showTransferDetail"
+      :item="overlay.transfer"
+      :type="overlay.transfer.type"
+      :zIndex="zIndex"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseTransferDetail" />
+  </AppTransition>
+
+  <!-- WebSocket详情 -->
+  <AppTransition
+    :show="overlayState?.showWebSocketDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <WebSocketDetail
+      v-if="overlayState?.showWebSocketDetail"
+      :ws="currentWebSocket"
+      :zIndex="zIndex"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseWebSocketDetail"
+      @clear="onClearWebSocketMessage"
+      @send="onSendWebSocket"
+      @openJson="onOpenJson" />
+  </AppTransition>
+
+  <!-- Json详情 -->
+  <AppTransition
+    :show="overlayState?.showJsonDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <JsonDetail
+      v-if="overlayState?.showJsonDetail"
+      :data="overlayState?.jsonData"
+      :theme="theme"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseJson" />
+  </AppTransition>
+
+  <!-- NFC 工具 -->
+  <AppTransition
+    :show="overlayState?.showNfcTool"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NFCTool
+      v-if="overlayState?.showNfcTool"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNfcTool" />
+  </AppTransition>
+
+  <!-- Bluetooth 工具 -->
+  <AppTransition
+    :show="overlayState?.showBluetoothTool"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <BluetoothTool
+      v-if="overlayState?.showBluetoothTool"
+      :device="overlayState?.bluetoothDevice"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @back="overlayHandlers.onCloseBluetoothTool" />
+  </AppTransition>
+</template>
+
+<script setup lang="ts">
+import SourceCode from '../SourceCode/index.vue';
+import NetworkSend from '../NetworkList/NetworkSend.vue';
+import NetworkDetail from '../NetworkList/NetworkDetail.vue';
+import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
+import InterceptConfig from '../NetworkList/InterceptConfig.vue';
+import TransferDetail from '../TransferList/TransferDetail.vue';
+import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
+import JsonDetail from '../JsonDetail/index.vue';
+import NFCTool from '../NFCList/NFCTool.vue';
+import BluetoothTool from '../BluetoothList/BluetoothTool.vue';
+import AppTransition from '../../../components/AppTransition/index.vue';
+import type { DevTool } from '../../../../type';
+
+defineProps<{
+  overlayState: any;
+  overlayHandlers: any;
+  mode?: string;
+  zIndex: number;
+  sourceFileServers?: string[];
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+  overlay: any;
+  currentWebSocket?: DevTool.WS;
+  interceptNetworkList: DevTool.NetworkItem[];
+  onRemoveInterceptConfig: (ni: DevTool.NetworkItem) => void;
+  onConfirmInterceptConfig: (ni: DevTool.NetworkItem) => void;
+  onClearWebSocketMessage: (ws: DevTool.WS) => void;
+  onSendWebSocket: (data: { url: string; message: any }) => void;
+  onOpenJson: (data?: any) => void;
+  useTransition: boolean;
+  network: DevTool.NetworkItem;
+  theme?: string;
+}>();
+</script>

package/dist/v3/DevTool/components/DevToolWindow/hooks/dataUtils.ts

@@ -1,48 +1,48 @@
-import type { DevTool } from '../../../../../type';
-
-export const calcLineStartAndEnd = (
-  list: DevTool.NetworkItem[],
-): {
-  startTime: number;
-  endTime: number;
-} => {
-  if (!list.length) return { startTime: 0, endTime: 0 };
-  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
- */
-export const calcNetworkTimeline = (
-  list: DevTool.NetworkItem[],
-  startTime: number,
-  endTime: number,
-): DevTool.NetworkItem[] => {
-  const total = endTime - startTime;
-  if (total <= 0) return list;
-
-  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,
-      };
-    }) ?? []
-  );
-};
+import type { DevTool } from '../../../../../type';
+
+export const calcLineStartAndEnd = (
+  list: DevTool.NetworkItem[],
+): {
+  startTime: number;
+  endTime: number;
+} => {
+  if (!list.length) return { startTime: 0, endTime: 0 };
+  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
+ */
+export const calcNetworkTimeline = (
+  list: DevTool.NetworkItem[],
+  startTime: number,
+  endTime: number,
+): DevTool.NetworkItem[] => {
+  const total = endTime - startTime;
+  if (total <= 0) return list;
+
+  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,
+      };
+    }) ?? []
+  );
+};