vite-uni-dev-tool 1.2.0 → 1.2.2

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/DevToolWindow/hooks/useDevToolData.ts

@@ -4,7 +4,19 @@ import type { DevTool } from '../../../../../type';
 import { hightLight } from '../../../../../utils/index';
 import { calcLineStartAndEnd, calcNetworkTimeline } from './dataUtils';
 
-export function useDevToolData(props: any) {
+export interface DevToolWindowProps {
+  open?: boolean;
+  data?: DevTool.WindowData;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+  zIndex?: number;
+  contentHeight: number;
+  customStyle?: Record<string, string | number>;
+  origin?: { x: number; y: number };
+}
+
+export function useDevToolData(props: DevToolWindowProps) {
   const consoleList = shallowRef<DevTool.ConsoleItem[]>([]);
   const networkList = shallowRef<DevTool.NetworkItem[]>([]);
   const transferList = shallowRef<DevTool.TransferItem[]>([]);
@@ -46,6 +58,7 @@ export function useDevToolData(props: any) {
   const barrageStartTop = shallowRef(40);
   const barrageDuration = shallowRef(6);
   const barrageMaxLength = shallowRef(100);
+  const barrageAllowDrag = shallowRef(true);
   const barrageTypes = shallowRef([
     'log',
     'info',
@@ -141,6 +154,8 @@ export function useDevToolData(props: any) {
       barrageDuration.value = data.barrageDuration;
     if (data.barrageMaxLength !== undefined)
       barrageMaxLength.value = data.barrageMaxLength;
+    if (data.barrageAllowDrag !== undefined)
+      barrageAllowDrag.value = data.barrageAllowDrag;
     if (data.barrageTypes !== undefined) {
       if (Array.isArray(data.barrageTypes)) {
         barrageTypes.value = data.barrageTypes;
@@ -163,26 +178,31 @@ export function useDevToolData(props: any) {
           return item;
         })
         .filter((item) => {
+          const content =
+            item.args
+              ?.map((arg) => (arg.type === 'string' ? arg.value : ''))
+              .join('') || '';
           return (
-            item.args?.some(
-              (arg) =>
-                arg.type === 'string' &&
-                arg.value?.includes?.(searchConsole.value),
-            ) ||
+            content.includes(searchConsole.value) ||
             item.position.includes(searchConsole.value) ||
-            item?.stack?.includes(searchConsole.value)
+            (item.stack && item.stack.includes(searchConsole.value))
           );
         })
         ?.map((item) => {
           return {
             ...item,
             _positionHtml: hightLight(item.position, searchConsole.value),
-            _stackHtml: hightLight(item.stack, searchConsole.value),
+            _stackHtml: item.stack
+              ? hightLight(item.stack, searchConsole.value)
+              : '',
             args: item.args.map((arg) => {
               if (arg.type === 'string') {
                 return {
                   ...arg,
-                  _valueHtml: hightLight(arg.value, searchConsole.value),
+                  _valueHtml: hightLight(
+                    arg.value as string,
+                    searchConsole.value,
+                  ),
                 };
               }
               return arg;
@@ -209,7 +229,7 @@ export function useDevToolData(props: any) {
         ?.map((item) => {
           return {
             ...item,
-            url: hightLight(item.url, searchNetwork.value),
+            url: hightLight(item.url || '', searchNetwork.value),
           };
         })
         ?.sort((a, b) => {
@@ -251,11 +271,14 @@ export function useDevToolData(props: any) {
 
     if (data.storageList) {
       storageList.value = [...(data.storageList ?? [])]
-        ?.filter((item) => item._oldKey.includes(searchStorage.value))
+        ?.filter(
+          (item) => item._oldKey && item._oldKey.includes(searchStorage.value),
+        )
         ?.map((item) => {
+          const oldKey = item._oldKey || '';
           return {
             ...item,
-            _oldKey: hightLight(item._oldKey, searchStorage.value),
+            _oldKey: hightLight(oldKey, searchStorage.value),
           };
         });
       backup.storageList = [...data.storageList];
@@ -358,6 +381,7 @@ export function useDevToolData(props: any) {
     barrageStartTop,
     barrageDuration,
     barrageMaxLength,
+    barrageAllowDrag,
     barrageTypes,
     backup,
     buildInfo,

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

@@ -4,7 +4,13 @@ import type { DevTool } from '../../../../../type';
 import { CMD_TYPE, MSG_TYPE, DEV_CORE_MESSAGE } from '../../../../../const';
 import { hightLight } from '../../../../../utils/index';
 
-export function useDevToolHandlers(props: any, emits: any, state: any) {
+import type { DevToolWindowProps } from './useDevToolData';
+
+export function useDevToolHandlers(
+  props: DevToolWindowProps,
+  emits: (e: any, ...args: any[]) => void, // 此由于 defineEmits 的复杂性暂留少量 any，但主要逻辑已显式化
+  state: any,
+) {
   const {
     activeTab,
     currentConsoleType,
@@ -549,6 +555,14 @@ export function useDevToolHandlers(props: any, emits: any, state: any) {
     });
   }
 
+  function onChangeBarrageAllowDrag(val: boolean) {
+    state.barrageAllowDrag.value = val;
+    basicSendMessage({
+      type: CMD_TYPE.BARRAGE_ALLOW_DRAG,
+      data: { value: val },
+    });
+  }
+
   function onChangeBarrageTypes(val: string[]) {
     state.barrageTypes.value = val;
     basicSendMessage({
@@ -622,6 +636,7 @@ export function useDevToolHandlers(props: any, emits: any, state: any) {
     onChangeBarrageStartTop,
     onChangeBarrageDuration,
     onChangeBarrageMaxLength,
+    onChangeBarrageAllowDrag,
     onChangeBarrageTypes,
     onChangeBarrageShowWhenOpen,
     basicSendMessage,

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;