vite-uni-dev-tool 1.2.0 → 1.2.2

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/MovableContainer/index.vue

@@ -1,5 +1,7 @@
 <template>
+  <!-- are you ok ? -->
   <movable-area class="movable-area" :style="areaStyle">
+    <!-- are you ok ? -->
     <movable-view
       class="movable-view"
       :style="viewStyle"

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

@@ -67,71 +67,70 @@
 import { debounce } from '../../../utils';
 import { ref, computed } from 'vue';
 
+interface Option {
+  label: string;
+  value: any;
+}
+
 const props = defineProps<{
   placeholder?: string;
   readonly?: boolean;
   allowClear?: boolean;
-  options?: { label: string; value: any }[];
+  options?: Option[];
   customStyle?: Record<string, any> | string;
 }>();
 
 const modelValue = defineModel<string>('modelValue');
-
 const emit = defineEmits<{
   (e: 'search', value: string): void;
   (e: 'openSearch', value: boolean): void;
-  (e: 'change', value: { label: string; value: any }): void;
+  (e: 'change', value: Option): void;
 }>();
 
 const isActive = ref(false);
 const searchText = ref('');
 
-// Computed label for the trigger
-const label = computed(() => {
-  return (
-    props.options?.find((item) => item.value === modelValue.value)?.label ??
-    modelValue.value
-  );
-});
+const label = computed(
+  () =>
+    props.options?.find((i) => i.value === modelValue.value)?.label ??
+    modelValue.value,
+);
 
 const filteredOptions = computed(() => {
-  if (!searchText.value) return props.options || [];
-  const lowerSearch = searchText.value.toLowerCase();
-  return (props.options || []).filter(
-    (item) => item.label && item.label.toLowerCase().includes(lowerSearch),
-  );
+  const list = props.options || [];
+  if (!searchText.value) return list;
+  const s = searchText.value.toLowerCase();
+  return list.filter((i) => i.label?.toLowerCase().includes(s));
 });
 
-function onOpenPick() {
+const onOpenPick = () => {
   isActive.value = true;
   searchText.value = '';
   emit('openSearch', true);
-}
+};
 
-function onClosePick() {
+const onClosePick = () => {
   isActive.value = false;
   emit('openSearch', false);
-}
-
-function onInput(e: any) {
-  const value = e.detail?.value ?? e.target?.value;
-  searchText.value = value;
-  emit('search', value);
-}
+};
 
-const debounceInput = debounce(onInput, 300);
+const debounceInput = debounce((e: any) => {
+  const val = e.detail?.value ?? e.target?.value;
+  searchText.value = val;
+  emit('search', val);
+}, 300);
 
-function onSelect(item: { label: string; value: any }) {
+const onSelect = (item: Option) => {
   modelValue.value = item.value;
   emit('change', item);
   onClosePick();
-}
+};
 
-function onClear() {
+const onClear = () => {
   modelValue.value = '';
   emit('search', '');
   emit('change', { label: '', value: '' });
-}
+};
 </script>
 
 <style scoped>

package/dist/v3/hooks/useContainerStyle.ts

@@ -23,54 +23,30 @@ let tabHeight = 50;
  * @return {*}
  */
 const useContainerStyle = (style?: Record<string, any>) => {
-  const customStyle = reactive({
-    ...(style || {
-      height: '0px',
-      boxSizing: 'border-box',
-    }),
+  const customStyle = reactive<Record<string, any>>({
+    height: '0px',
+    boxSizing: 'border-box' as const,
+    ...style,
   });
-
   const contentHeight = ref(0);
-
   const contentType = ref('');
 
   onMounted(() => {
-    let screenHeight: number = 0;
-    let windowHeight: number = 0;
-    let height: number = 0;
-    let statusBarHeight: number = 0;
-
-    if (uni.getWindowInfo) {
-      const winInfo = uni.getWindowInfo();
-      screenHeight = winInfo.screenHeight;
-      windowHeight = winInfo.windowHeight;
-      height = winInfo.safeArea.height;
-      statusBarHeight = winInfo.statusBarHeight;
-    } else {
-      const sysInfo = uni.getSystemInfoSync();
-      screenHeight = sysInfo.screenHeight;
-      windowHeight = sysInfo.windowHeight;
-      height = sysInfo.safeArea?.height ?? 0;
-      statusBarHeight = sysInfo.statusBarHeight ?? 0;
-    }
+    const info = uni.getWindowInfo
+      ? uni.getWindowInfo()
+      : uni.getSystemInfoSync();
+    const { screenHeight, windowHeight, statusBarHeight = 0 } = info;
+    const safeH = ('safeArea' in info ? info.safeArea?.height : 0) || 0;
 
     const diff = screenHeight - windowHeight;
-    const diffStatus = screenHeight - windowHeight - statusBarHeight;
-
-    // console.log('diff: ', diff);
-    // console.log('diffStatus: ', diffStatus);
-    // console.log('windowHeight: ', windowHeight);
-    // console.log('screenHeight: ', screenHeight);
-    // console.log('statusBarHeight: ', statusBarHeight);
+    const diffStatus = diff - statusBarHeight;
 
     // #ifdef !H5
+    Object.assign(customStyle, { height: windowHeight + 'px' });
     if (diffStatus === navigateHeight) {
-      // console.log('当前页只存在 navigate: ');
       Object.assign(customStyle, {
         paddingTop: '0px',
         paddingBottom: tabHeight + 'px',
-        height: windowHeight + 'px',
-        boxSizing: 'border-box',
       });
       contentHeight.value = windowHeight - tabHeight;
       contentType.value = 'navigate';
@@ -78,76 +54,42 @@ const useContainerStyle = (style?: Record<string, any>) => {
       diff > navigateHeight &&
       diff < navigateHeight + statusBarHeight
     ) {
-      // 当前页只存在 tab
-      // console.log('当前页只存在 tab: ');
-      // 微信模拟器中 navigateHeight 已经被计算到 windowHeight 中 ，导致高度计算异常
-      // 暂时没有办法补偿 凸(艹皿艹 )
-
       Object.assign(customStyle, {
         paddingTop: navigateHeight + statusBarHeight + 'px',
         paddingBottom: 0,
-        height: windowHeight + 'px',
-        boxSizing: 'border-box',
       });
-
-      // 最终算的结果和原有的 50 存在差距
       tabHeight = diff;
       contentHeight.value =
         screenHeight - navigateHeight - diff - statusBarHeight;
       contentType.value = 'tab';
     } else if (diff === 0) {
-      // 当前页不存在 navigate 和 tab
-      // console.log('当前页不存在 navigate 和 tab: ');
-
       Object.assign(customStyle, {
         paddingTop: navigateHeight + statusBarHeight + 'px',
         paddingBottom: tabHeight + 'px',
-        height: windowHeight + 'px',
-        boxSizing: 'border-box',
       });
-
       contentHeight.value =
         screenHeight - navigateHeight - tabHeight - statusBarHeight;
       contentType.value = '';
     } else {
-      // 当前页存在 navigate 和 tab
-      // console.log('当前页存在 navigate 和 tab: ');
-
-      // 最终算的结果和原有的 50 存在差距
       tabHeight = diff - navigateHeight - statusBarHeight;
-
-      Object.assign(customStyle, {
-        paddingTop: '0px',
-        paddingBottom: '0px',
-        height: windowHeight + 'px',
-        boxSizing: 'border-box',
-      });
+      Object.assign(customStyle, { paddingTop: '0px', paddingBottom: '0px' });
       contentHeight.value =
         screenHeight - tabHeight - navigateHeight - statusBarHeight;
-
       contentType.value = 'navigateAndTab';
     }
-
     // #endif
 
     // #ifdef H5
     Object.assign(customStyle, {
       paddingTop: '44px',
       paddingBottom: '50px',
-      height: height + 'px',
-      boxSizing: 'border-box',
+      height: safeH + 'px',
     });
-    contentHeight.value = height - 50 - 44;
+    contentHeight.value = safeH - 50 - 44;
     // #endif
-    // console.log('tabHeight: ', tabHeight);
-    // console.log('customStyle: ', customStyle);
   });
 
-  return {
-    contentType,
-    customStyle,
-    contentHeight,
-  };
+  return { contentType, customStyle, contentHeight };
 };
 
 export default useContainerStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",
@@ -63,5 +63,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.3"
   }
 }

package/dist/const.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AAEnD;;;GAGG;AACH,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAE/C;;;;GAIG;AAGH,eAAO,MAAM,QAAQ;;;;;;;;;;;CAkBX,CAAC;AAGX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEX,CAAC;AAEX;;;;GAIG;AAGH,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,uBAAuB,kCAAkC,CAAC;AACvE,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AACrE,eAAO,MAAM,qBAAqB,gCAAgC,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AACnD,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAGzD,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AAEvE;;;;GAIG;AAEH,eAAO,MAAM,aAAa,kBAAkB,CAAC"}