vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/components/DraggableContainer/index.vue

@@ -1,12 +1,29 @@
 <template>
   <view
     class="draggable-container"
+    :class="{ 'is-full-screen': isFullScreen }"
     :style="containerStyle"
     @touchstart="onTouchStart"
     @touchmove.stop="onTouchMove"
     @touchend="onTouchEnd"
     @mousedown="onMouseDown">
-    <slot></slot>
+    <!-- 拖拽手柄容器 -->
+    <view
+      v-if="!isFullScreen"
+      class="draggable-handle-container"
+      :class="theme"
+      data-drag-handle="1">
+      <slot name="handle">
+        <view class="window-header-default" data-drag-handle="1">
+          <view class="drag-indicator-default" data-drag-handle="1"></view>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 主体内容 -->
+    <view class="draggable-content">
+      <slot></slot>
+    </view>
 
     <!-- 缩放句柄 -->
     <view
@@ -42,7 +59,7 @@ const props = withDefaults(
     width?: number | string;
     height?: number | string;
     zIndex?: number;
-    customStyle?: Record<string, any>;
+    customStyle?: Record<string, string | number>;
     boundaryPadding?: number;
     // 是否启用缩放
     resizable?: boolean;
@@ -53,6 +70,11 @@ const props = withDefaults(
     // 是否全屏状态
     isFullScreen?: boolean;
     maxWidth?: number;
+    // 颜色主题
+    theme?: string;
+    // 安全区域边距
+    safeTop?: number;
+    safeBottom?: number;
   }>(),
   {
     x: 0,
@@ -65,6 +87,9 @@ const props = withDefaults(
     minWidth: 200,
     minHeight: 150,
     isFullScreen: false,
+    theme: 'light',
+    safeTop: 0,
+    safeBottom: 0,
   },
 );
 
@@ -79,9 +104,9 @@ const emit = defineEmits<{
   ): void;
 }>();
 
-// 定义插槽类型，解决外部使用的类型报错
 defineSlots<{
-  default(): any;
+  default(): unknown;
+  handle(): unknown;
 }>();
 
 // 当前位置和尺寸
@@ -103,28 +128,45 @@ let startHeight = 0;
 let screenWidth = 375;
 let screenHeight = 667;
 
-onMounted(() => {
+/**
+ * 获取最新的屏幕/窗口尺寸
+ */
+function updateScreenSize() {
   const sysInfo = uni.getSystemInfoSync();
-  screenWidth = sysInfo.windowWidth || 375;
-  screenHeight = sysInfo.windowHeight || 667;
+  // H5 环境优先使用 window.innerHeight/Width 以获得更高精度
+  if (typeof window !== 'undefined') {
+    screenWidth = window.innerWidth;
+    screenHeight = window.innerHeight;
+  } else {
+    screenWidth = sysInfo.windowWidth || 375;
+    screenHeight = sysInfo.windowHeight || 667;
+  }
+}
+
+onMounted(() => {
+  updateScreenSize();
 
   if (typeof window !== 'undefined') {
     window.addEventListener('mousemove', onGlobalMouseMove);
     window.addEventListener('mouseup', onGlobalMouseUp);
     window.addEventListener('resize', onWindowResize);
   }
+
+  // 增加 UniApp 原生窗口调整监听，增强跨端兼容性
+  if (typeof uni !== 'undefined' && uni.onWindowResize) {
+    uni.onWindowResize(onWindowResize);
+  }
 });
 
 function onWindowResize() {
-  const sysInfo = uni.getSystemInfoSync();
   const oldScreenWidth = screenWidth;
   const oldScreenHeight = screenHeight;
 
-  screenWidth = sysInfo.windowWidth || 375;
-  screenHeight = sysInfo.windowHeight || 667;
+  updateScreenSize();
 
-  // 如果宽度变窄导致溢出，或者窗口宽度发生改变，重新居中
+  // 如果尺寸确实发生了变化
   if (oldScreenWidth !== screenWidth || oldScreenHeight !== screenHeight) {
+    // 处理 maxWidth 变化
     if (
       props.maxWidth &&
       localWidth.value > screenWidth * (props.maxWidth / 100)
@@ -132,9 +174,15 @@ function onWindowResize() {
       localWidth.value = Math.floor(screenWidth * (props.maxWidth / 100));
     }
 
-    // 居中逻辑
-    localX.value = Math.max(0, (screenWidth - localWidth.value) / 2);
-    localY.value = Math.max(0, (screenHeight - localHeight.value) / 2);
+    // 修复：不再强制居中，而是对现有位置进行边界修正，保持用户拖拽后的状态
+    const { x, y } = clampPosition(
+      localX.value,
+      localY.value,
+      localWidth.value,
+      localHeight.value,
+    );
+    localX.value = x;
+    localY.value = y;
 
     emit('update:x', localX.value);
     emit('update:y', localY.value);
@@ -149,6 +197,10 @@ onUnmounted(() => {
     window.removeEventListener('mouseup', onGlobalMouseUp);
     window.removeEventListener('resize', onWindowResize);
   }
+
+  if (typeof uni !== 'undefined' && uni.offWindowResize) {
+    uni.offWindowResize(onWindowResize);
+  }
 });
 
 watch(
@@ -176,37 +228,45 @@ const containerStyle = computed(() => {
     };
   }
   const finalWidth = localWidth.value;
-  const maxWidthVal = props.maxWidth ? `${props.maxWidth}%` : 'none';
 
   return {
     ...props.customStyle,
     position: 'fixed' as const,
-    left: `${localX.value}px`,
-    top: `${localY.value}px`,
+    left: 0, // 核心改变：固定在 0,0，通过 transform 位移
+    top: 0,
     width: typeof finalWidth === 'number' ? `${finalWidth}px` : finalWidth,
-    maxWidth: maxWidthVal,
     height:
       typeof localHeight.value === 'number'
         ? `${localHeight.value}px`
         : localHeight.value,
     zIndex: props.zIndex,
+    transform: `translate3d(${localX.value}px, ${localY.value}px, 0)`,
     touchAction: 'none',
+    // 关键：拖拽时绝对不能有 transition 干扰位移
+    transition:
+      isDragging || isResizing
+        ? 'none'
+        : 'transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), width 0.3s, height 0.3s',
   };
 });
 
 function clampPosition(x: number, y: number, w: number, h: number) {
   const padding = props.boundaryPadding;
+  const safeTop = props.safeTop || 0;
+  const safeBottom = props.safeBottom || 0;
+
   // 计算实际视觉宽度（受 maxWidth 限制）
   const actualWidth =
     props.maxWidth && typeof w === 'number'
       ? Math.min(w, screenWidth * (props.maxWidth / 100))
-      : w;
+      : (w as number);
 
   const maxX = Math.max(0, screenWidth - actualWidth - padding);
-  const maxY = Math.max(0, screenHeight - h - padding);
+  const minY = safeTop + padding;
+  const maxY = Math.max(minY, screenHeight - h - padding - safeBottom);
   return {
     x: Math.max(padding, Math.min(maxX, x)),
-    y: Math.max(padding, Math.min(maxY, y)),
+    y: Math.max(minY, Math.min(maxY, y)),
   };
 }
 
@@ -224,52 +284,48 @@ function onMouseDown(e: MouseEvent) {
   if (props.isFullScreen) return;
 
   // 检查是否在句柄上触发
-  if (props.handle && !isTargetOnHandle(e.target)) return;
+  if (!isTargetOnHandle(e.target)) return;
 
-  startDrag(e.clientX, e.clientY);
+  e.preventDefault(); // 关键：阻止浏览器默认选择/拖拽行为
+  startDrag(e.clientX, e.clientY + props.safeTop);
 }
 
-function isTargetOnHandle(target: any): boolean {
-  if (!props.handle) return true;
-
-  // 1. 优先通过 dataset 判断（UniApp/小程序跨端最可靠方案）
-  if (
-    target &&
-    target.dataset &&
-    (target.dataset.dragHandle || target.dataset.handle)
-  ) {
-    return true;
-  }
+function isTargetOnHandle(target: EventTarget | null): boolean {
+  const element = target as HTMLElement;
+  if (!element) return false;
 
-  // 2. 备选：通过选择器判断（主要支持 H5）
-  let curr = target;
-  const handleClass = props.handle.startsWith('.')
-    ? props.handle.slice(1)
-    : props.handle;
+  let curr: HTMLElement | null = element;
+  const handleClass =
+    props.handle && props.handle.startsWith('.')
+      ? props.handle.slice(1)
+      : props.handle;
 
   while (curr) {
+    // 1. 优先通过 dataset 判断（内置手柄和 Tabs 已带该属性）
+    if (curr.dataset && (curr.dataset.dragHandle || curr.dataset.handle)) {
+      return true;
+    }
+
+    // 2. 备选：通过选择器判断
     if (
+      handleClass &&
       curr.className &&
       typeof curr.className === 'string' &&
       curr.className.includes(handleClass)
     ) {
       return true;
     }
-    // 检查 dataset
-    if (curr.dataset && (curr.dataset.dragHandle || curr.dataset.handle)) {
-      return true;
-    }
 
     // 向上遍历父节点
-    curr = curr.parentNode || curr.parentElement;
+    curr = curr.parentElement;
     if (
-      curr === null ||
-      curr === undefined ||
+      !curr ||
       (curr.className &&
         typeof curr.className === 'string' &&
         curr.className.includes('draggable-container'))
-    )
+    ) {
       break;
+    }
   }
   return false;
 }
@@ -355,23 +411,22 @@ function onResizeMove(e: TouchEvent) {
 function updateSize(clientX: number, clientY: number) {
   const dx = clientX - startX;
   const dy = clientY - startY;
-  localWidth.value = Math.max(props.minWidth, startWidth + dx);
-  localHeight.value = Math.max(props.minHeight, startHeight + dy);
-
-  // 边缘及最大宽度修正
-  if (props.maxWidth) {
-    const absoluteMaxWidth = screenWidth * (props.maxWidth / 100);
-    if (localWidth.value > absoluteMaxWidth) {
-      localWidth.value = absoluteMaxWidth;
-    }
-  }
 
-  if (localX.value + localWidth.value > screenWidth) {
-    localWidth.value = screenWidth - localX.value;
-  }
-  if (localY.value + localHeight.value > screenHeight) {
-    localHeight.value = screenHeight - localY.value;
-  }
+  // 限制最小尺寸
+  let newWidth = Math.max(props.minWidth, startWidth + dx);
+  let newHeight = Math.max(props.minHeight, startHeight + dy);
+
+  // 限制最大宽度 (百分比)
+  const maxWidthLimit = screenWidth * ((props.maxWidth || 100) / 100);
+  if (newWidth > maxWidthLimit) newWidth = maxWidthLimit;
+
+  // 限制最大高度
+  const maxHeightLimit = screenHeight - localY.value - props.boundaryPadding;
+  if (newHeight > maxHeightLimit) newHeight = maxHeightLimit;
+
+  localWidth.value = newWidth;
+  localHeight.value = newHeight;
+  emitChange();
 }
 
 function onResizeEnd() {
@@ -427,27 +482,85 @@ const emitChange = debounce(() => {
   touch-action: none;
   overflow: hidden;
   background-color: var(--dev-tool-bg3-color);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
   pointer-events: auto; /* 确保容器及其子项能够接收事件 */
+  border-radius: 12px;
+  border: 1px solid var(--dev-tool-border-color, #eee);
+  box-sizing: border-box;
+}
+
+.draggable-container.is-full-screen {
+  border-radius: 0;
+  border: none;
+}
+
+.draggable-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.draggable-handle-container {
+  flex-shrink: 0;
+  cursor: move;
+  width: 100%;
+}
+
+.window-header-default {
+  height: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.drag-indicator-default {
+  width: 32px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-border-color, #f0f0f0);
+  opacity: 0.6;
+}
+
+.draggable-handle-container.dark .drag-indicator-default {
+  background-color: #555;
 }
 
 .resize-handle {
   position: absolute;
   right: 0;
   bottom: 0;
-  width: 32px; /* 增加热区面积 */
-  height: 32px;
+  width: 24px;
+  height: 24px;
   cursor: nwse-resize;
-  background: linear-gradient(
-    135deg,
-    transparent 60%,
-    var(--dev-tool-main-color) 60%
-  );
+  pointer-events: auto;
   opacity: 0.6;
-  pointer-events: auto; /* 显式开启事件响应 */
-  border-radius: 12px;
+  transition: opacity 0.2s;
+}
+
+.resize-handle::before,
+.resize-handle::after {
+  content: '';
+  position: absolute;
+  border-right: 2px solid var(--dev-tool-main-color);
+  border-bottom: 2px solid var(--dev-tool-main-color);
+  border-bottom-right-radius: 100%;
+}
+
+.resize-handle::before {
+  width: 12px;
+  height: 12px;
+  bottom: 4px;
+  right: 4px;
+}
+
+.resize-handle::after {
+  width: 6px;
+  height: 6px;
+  bottom: 3px;
+  right: 3px;
 }
 
 .resize-handle:active {

package/dist/v3/components/Empty/index.vue

@@ -1,29 +1,29 @@
-<template>
-  <view class="dev-tool-empty">
-    <image :src="empty" class="dev-tool-empty-image" />
-    <text class="dev-tool-empty-text">{{ text ?? '暂无调试信息' }}</text>
-  </view>
-</template>
-<script lang="ts" setup>
-import empty from './empty.png';
-defineProps<{ text?: string }>();
-</script>
-<style scoped>
-.dev-tool-empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-}
-
-.dev-tool-empty-image {
-  margin-top: 50px;
-  width: 50px;
-  height: 50px;
-}
-
-.dev-tool-empty-text {
-  color: #888;
-}
-</style>
+<template>
+  <view class="dev-tool-empty">
+    <image :src="empty" class="dev-tool-empty-image" />
+    <text class="dev-tool-empty-text">{{ text ?? '暂无调试信息' }}</text>
+  </view>
+</template>
+<script lang="ts" setup>
+import empty from './empty.png';
+defineProps<{ text?: string }>();
+</script>
+<style scoped>
+.dev-tool-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+
+.dev-tool-empty-image {
+  margin-top: 50px;
+  width: 50px;
+  height: 50px;
+}
+
+.dev-tool-empty-text {
+  color: #888;
+}
+</style>