vite-uni-dev-tool 1.1.0 → 1.2.1

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

@@ -1,197 +1,201 @@
-import { ref, reactive, shallowRef, nextTick } from 'vue';
-import type { DevTool } from '../../../../../type';
-import { isMockWX, isAndroid } from '../../../../../utils/index';
-import { emptyNetwork } from '../const';
-
-export function useDevToolOverlay(props: any) {
-  const openCode = ref(false);
-  const stack = ref('');
-  const showNetworkSend = ref(false);
-  const showNetworkDetail = ref(false);
-  const showNetworkIntercept = ref(false);
-  const showInterceptConfig = ref(false);
-  const showJsonDetail = ref(false);
-  const jsonData = shallowRef<
-    { title?: string; data: Record<string, any> } | undefined
-  >();
-  const showNfcTool = ref(false);
-  const showTransferDetail = ref(false);
-  const showWebSocketDetail = ref(false);
-  const showBluetoothTool = ref(false);
-  const bluetoothDevice = shallowRef<DevTool.BluetoothItem | null>(null);
-
-  const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
-  const transfer = reactive<DevTool.TransferItem>({
-    index: 0,
-    status: '',
-    type: 'upload',
-  });
-  const webSocket = reactive<DevTool.WS>({ url: '', message: [] });
-
-  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 配置异常',
-        });
-      }
-    } else {
-      openCode.value = true;
-    }
-  }
-
-  function onOpenJson(data?: { title?: string; data: Record<string, any> }) {
-    showJsonDetail.value = true;
-    jsonData.value = data;
-  }
-  function onCloseJson() {
-    showJsonDetail.value = false;
-    jsonData.value = undefined;
-  }
-
-  function onOpenNfcTool() {
-    showNfcTool.value = true;
-  }
-  function onCloseNfcTool() {
-    showNfcTool.value = false;
-  }
-
-  function onOpenBluetoothTool(device: DevTool.BluetoothItem) {
-    bluetoothDevice.value = device;
-    showBluetoothTool.value = true;
-  }
-  function onCloseBluetoothTool() {
-    showBluetoothTool.value = false;
-    bluetoothDevice.value = null;
-  }
-
-  function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    Object.assign(network, ni);
-    showNetworkDetail.value = true;
-  }
-  function onCloseNetworkDetail() {
-    showNetworkDetail.value = false;
-  }
-
-  function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    Object.assign(network, ni);
-    showNetworkSend.value = true;
-  }
-  function onCloseNetworkSend() {
-    showNetworkSend.value = false;
-  }
-
-  function onOpenNetworkIntercept() {
-    showNetworkIntercept.value = true;
-  }
-  function onCloseNetworkIntercept() {
-    showNetworkIntercept.value = false;
-  }
-
-  function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    if (ni) Object.assign(network, ni);
-    showInterceptConfig.value = true;
-  }
-  function onCloseInterceptConfig() {
-    showInterceptConfig.value = false;
-  }
-
-  function onOpenTransferDetail(item?: DevTool.TransferItem) {
-    if ((item as any).formData) {
-      delete (transfer as any).formData;
-    }
-    if ((item as any).filePath) {
-      delete (transfer as any).filePath;
-    }
-    Object.assign(transfer, item);
-    showTransferDetail.value = true;
-  }
-  function onCloseTransferDetail() {
-    showTransferDetail.value = false;
-  }
-
-  function onOpenWebSocketDetail(ws?: DevTool.WS, currentWebSocket?: any) {
-    Object.assign(webSocket, ws);
-    nextTick(() => {
-      // 兼容直接传入对象或传入 Ref 的情况
-      if (
-        currentWebSocket === undefined ||
-        currentWebSocket?.value ||
-        currentWebSocket
-      ) {
-        showWebSocketDetail.value = true;
-      }
-    });
-  }
-  function onCloseWebSocketDetail() {
-    showWebSocketDetail.value = false;
-  }
-
-  return {
-    state: reactive({
-      openCode,
-      stack,
-      showNetworkSend,
-      showNetworkDetail,
-      showNetworkIntercept,
-      showInterceptConfig,
-      showJsonDetail,
-      jsonData,
-      showNfcTool,
-      showTransferDetail,
-      showWebSocketDetail,
-      showBluetoothTool,
-      bluetoothDevice,
-    }),
-    network,
-    transfer,
-    webSocket,
-    handlers: {
-      onCloseCode,
-      onOpenCode,
-      onOpenJson,
-      onCloseJson,
-      onOpenNfcTool,
-      onCloseNfcTool,
-      onOpenNetworkDetail,
-      onCloseNetworkDetail,
-      onOpenNetworkSend,
-      onCloseNetworkSend,
-      onOpenNetworkIntercept,
-      onCloseNetworkIntercept,
-      onOpenInterceptConfig,
-      onCloseInterceptConfig,
-      onOpenTransferDetail,
-      onCloseTransferDetail,
-      onOpenWebSocketDetail,
-      onCloseWebSocketDetail,
-      onOpenBluetoothTool,
-      onCloseBluetoothTool,
-    },
-  };
-}
+import { ref, reactive, shallowRef, nextTick } from 'vue';
+import type { DevTool } from '../../../../../type';
+import { isMockWX, isAndroid } from '../../../../../utils/index';
+import { emptyNetwork } from '../const';
+
+export function useDevToolOverlay(props: any) {
+  const openCode = ref(false);
+  const stack = ref('');
+  const showNetworkSend = ref(false);
+  const showNetworkDetail = ref(false);
+  const showNetworkIntercept = ref(false);
+  const showInterceptConfig = ref(false);
+  const showJsonDetail = ref(false);
+  const jsonData = shallowRef<
+    { title?: string; data: Record<string, any> } | undefined
+  >();
+  const showNfcTool = ref(false);
+  const showTransferDetail = ref(false);
+  const showWebSocketDetail = ref(false);
+  const showBluetoothTool = ref(false);
+  const bluetoothDevice = shallowRef<DevTool.BluetoothItem | null>(null);
+
+  const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
+  const transfer = reactive<DevTool.TransferItem>({
+    index: 0,
+    status: '',
+    type: 'upload',
+  });
+  const webSocket = reactive<DevTool.WS>({ url: '', message: [] });
+
+  function onCloseCode() {
+    openCode.value = false;
+    stack.value = '';
+  }
+
+  function onOpenCode(value?: string) {
+    if (!value) return;
+    stack.value = value;
+
+    // 微信小程序下的虚拟路径，只能在小程序真机调试下打开
+    if (isMockWX(value)) {
+      uni.showToast({
+        icon: 'none',
+        title: '[DevTool] 请在小程序真机调试模式下查看源码',
+      });
+      return;
+    }
+
+    const isDev = props.mode === 'development';
+    const isUseDevSource = props.useDevSource;
+
+    // 非开发环境且未显式开启 useDevSource，不打开源码面板
+    if (!isDev && !isUseDevSource) return;
+
+    if (isAndroid()) {
+      if (props.sourceFileServers && props.sourceFileServers?.length > 0) {
+        openCode.value = true;
+      } else {
+        uni.showToast({
+          icon: 'none',
+          title: '[DevTool] sourceFileServers 配置异常',
+        });
+      }
+    } else {
+      openCode.value = true;
+    }
+  }
+
+  function onOpenJson(data?: { title?: string; data: Record<string, any> }) {
+    showJsonDetail.value = true;
+    jsonData.value = data;
+  }
+  function onCloseJson() {
+    showJsonDetail.value = false;
+    jsonData.value = undefined;
+  }
+
+  function onOpenNfcTool() {
+    showNfcTool.value = true;
+  }
+  function onCloseNfcTool() {
+    showNfcTool.value = false;
+  }
+
+  function onOpenBluetoothTool(device: DevTool.BluetoothItem) {
+    bluetoothDevice.value = device;
+    showBluetoothTool.value = true;
+  }
+  function onCloseBluetoothTool() {
+    showBluetoothTool.value = false;
+    bluetoothDevice.value = null;
+  }
+
+  function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    Object.assign(network, ni);
+    showNetworkDetail.value = true;
+  }
+  function onCloseNetworkDetail() {
+    showNetworkDetail.value = false;
+  }
+
+  function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    Object.assign(network, ni);
+    showNetworkSend.value = true;
+  }
+  function onCloseNetworkSend() {
+    showNetworkSend.value = false;
+  }
+
+  function onOpenNetworkIntercept() {
+    showNetworkIntercept.value = true;
+  }
+  function onCloseNetworkIntercept() {
+    showNetworkIntercept.value = false;
+  }
+
+  function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    if (ni) Object.assign(network, ni);
+    showInterceptConfig.value = true;
+  }
+  function onCloseInterceptConfig() {
+    showInterceptConfig.value = false;
+  }
+
+  function onOpenTransferDetail(item?: DevTool.TransferItem) {
+    if ((item as any).formData) {
+      delete (transfer as any).formData;
+    }
+    if ((item as any).filePath) {
+      delete (transfer as any).filePath;
+    }
+    Object.assign(transfer, item);
+    showTransferDetail.value = true;
+  }
+  function onCloseTransferDetail() {
+    showTransferDetail.value = false;
+  }
+
+  function onOpenWebSocketDetail(ws?: DevTool.WS, currentWebSocket?: any) {
+    Object.assign(webSocket, ws);
+    nextTick(() => {
+      // 兼容直接传入对象或传入 Ref 的情况
+      if (
+        currentWebSocket === undefined ||
+        currentWebSocket?.value ||
+        currentWebSocket
+      ) {
+        showWebSocketDetail.value = true;
+      }
+    });
+  }
+  function onCloseWebSocketDetail() {
+    showWebSocketDetail.value = false;
+  }
+
+  return {
+    state: reactive({
+      openCode,
+      stack,
+      showNetworkSend,
+      showNetworkDetail,
+      showNetworkIntercept,
+      showInterceptConfig,
+      showJsonDetail,
+      jsonData,
+      showNfcTool,
+      showTransferDetail,
+      showWebSocketDetail,
+      showBluetoothTool,
+      bluetoothDevice,
+    }),
+    network,
+    transfer,
+    webSocket,
+    handlers: {
+      onCloseCode,
+      onOpenCode,
+      onOpenJson,
+      onCloseJson,
+      onOpenNfcTool,
+      onCloseNfcTool,
+      onOpenNetworkDetail,
+      onCloseNetworkDetail,
+      onOpenNetworkSend,
+      onCloseNetworkSend,
+      onOpenNetworkIntercept,
+      onCloseNetworkIntercept,
+      onOpenInterceptConfig,
+      onCloseInterceptConfig,
+      onOpenTransferDetail,
+      onCloseTransferDetail,
+      onOpenWebSocketDetail,
+      onCloseWebSocketDetail,
+      onOpenBluetoothTool,
+      onCloseBluetoothTool,
+    },
+  };
+}

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

@@ -18,7 +18,9 @@
       :resizable="true"
       :isFullScreen="isFullScreen"
       :maxWidth="100"
-      handle=".drag-handle"
+      :safeTop="0"
+      :safeBottom="0"
+      :theme="theme"
       @update:x="onUpdateWindowX"
       @update:y="onUpdateWindowY"
       @update:width="onUpdateWindowWidth"
@@ -31,41 +33,20 @@
           isFullScreen ? 'is-full-screen' : 'is-window',
         ]">
         <view class="dev-tool-window-bg"></view>
-
-        <view
-          class="window-header drag-handle"
+        <Tabs
           data-drag-handle="1"
-          @touchstart="onInitDrag"
-          @mousedown="onInitDrag">
-          <view
-            class="drag-indicator"
-            v-if="!isFullScreen"
-            data-drag-handle="1"></view>
-
-          <!--
-            你能想象，没有这条注释会报错？？？
-            我甚至都不知道错在哪里？？？
-            凸(艹皿艹 )
-            总有一些莫名其妙的错误
-            Uncaught TypeError: Cannot read property 'children' of null at uni-app-view.umd.js:7
-            Uncaught TypeError: Cannot read property '$' of undefined at uni-app-view.umd.js:7
-          -->
-
-          <Tabs
-            data-drag-handle="1"
-            :model-value="activeTab"
-            :items="tabItems"
-            :scroll-left="tabScrollLeft"
-            @close="onCloseWindow"
-            @scroll="debounceScrollTabs"
-            @change="onChangeTabs">
-            <template #extra>
-              <CircularButton
-                :text="isFullScreen ? '❐' : '⛶'"
-                @click="toggleFullScreen" />
-            </template>
-          </Tabs>
-        </view>
+          :model-value="activeTab"
+          :items="tabItems"
+          :scroll-left="tabScrollLeft"
+          @close="onCloseWindow"
+          @scroll="debounceScrollTabs"
+          @change="onChangeTabs">
+          <template #extra>
+            <CircularButton
+              :text="isFullScreen ? '❐' : '⛶'"
+              @click="toggleFullScreen" />
+          </template>
+        </Tabs>
 
         <CustomSwiper
           v-if="isReady"
@@ -358,6 +339,7 @@
               :barrage-start-top="barrageStartTop"
               :barrage-duration="barrageDuration"
               :barrage-max-length="barrageMaxLength"
+              :barrage-allow-drag="barrageAllowDrag"
               :barrage-types="barrageTypes"
               :barrage-show-when-open="barrageShowWhenOpen"
               :sizeFormat="sizeFormat"
@@ -390,6 +372,7 @@
               @change-barrage-start-top="onChangeBarrageStartTop"
               @change-barrage-duration="onChangeBarrageDuration"
               @change-barrage-max-length="onChangeBarrageMaxLength"
+              @change-barrage-allow-drag="onChangeBarrageAllowDrag"
               @change-barrage-types="onChangeBarrageTypes"
               @change-barrage-show-when-open="onChangeBarrageShowWhenOpen"
               @change-use-transition="onChangeUseTransition"
@@ -490,7 +473,7 @@ const props = withDefaults(
     useDevSource?: boolean;
     zIndex?: number;
     contentHeight: number;
-    customStyle?: Record<string, any>;
+    customStyle?: Record<string, string | number>;
     origin?: { x: number; y: number };
   }>(),
   {
@@ -500,7 +483,10 @@ const props = withDefaults(
 
 const emits = defineEmits<{
   (e: 'close'): void;
-  (e: 'sendMessage', data: { type: string; data: Record<string, any> }): void;
+  (
+    e: 'sendMessage',
+    data: { type: string; data: Record<string, unknown> },
+  ): void;
   (e: 'changeTheme', theme: string): void;
 }>();
 
@@ -569,6 +555,7 @@ const {
   barrageStartTop,
   barrageDuration,
   barrageMaxLength,
+  barrageAllowDrag,
   barrageTypes,
   barrageShowWhenOpen,
   isFullScreen,
@@ -578,15 +565,6 @@ const {
   windowHeight,
 } = data;
 
-const draggableRef = ref();
-
-/**
- * 初始化拖拽
- */
-function onInitDrag(e: MouseEvent | TouchEvent) {
-  draggableRef.value?.initDrag(e);
-}
-
 function toggleFullScreen() {
   isFullScreen.value = !isFullScreen.value;
   saveSettings();
@@ -685,6 +663,7 @@ const {
   onChangeBarrageStartTop,
   onChangeBarrageDuration,
   onChangeBarrageMaxLength,
+  onChangeBarrageAllowDrag,
   onChangeBarrageTypes,
   onChangeBarrageShowWhenOpen,
   basicSendMessage,
@@ -770,14 +749,14 @@ function onUpdateStorageList(val: DevTool.StorageItem[]) {
 /**
  * 更新 Vuex 数据
  */
-function onUpdateVuexList(val: Record<string, any>) {
+function onUpdateVuexList(val: Record<string, unknown>) {
   vuexList.value = val;
 }
 
 /**
  * 更新 Pinia 数据
  */
-function onUpdatePiniaList(val: Record<string, any>) {
+function onUpdatePiniaList(val: Record<string, unknown>) {
   piniaList.value = val;
 }
 
@@ -942,25 +921,9 @@ onTabItemTap((option) => {
   height: 100%;
   color: var(--dev-tool-text-color);
   box-sizing: border-box;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   pointer-events: auto;
 }
 
-.is-window {
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
-  border: 1px solid var(--dev-tool-border-color);
-}
-
-.is-window .dev-tool-window-bg {
-  border-radius: 12px;
-}
-
-.is-full-screen {
-  border-radius: 0;
-}
-
 .window-header {
   width: 100%;
   cursor: move;