vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/DraggableContainer/index.vue

@@ -0,0 +1,456 @@
+<template>
+  <view
+    class="draggable-container"
+    :style="containerStyle"
+    @touchstart="onTouchStart"
+    @touchmove.stop="onTouchMove"
+    @touchend="onTouchEnd"
+    @mousedown="onMouseDown">
+    <slot></slot>
+
+    <!-- 缩放句柄 -->
+    <view
+      v-if="resizable && !isFullScreen"
+      class="resize-handle"
+      :style="{ zIndex }"
+      @touchstart.stop="onResizeStart"
+      @touchmove.stop="onResizeMove"
+      @touchend.stop="onResizeEnd"
+      @mousedown.stop.prevent="onResizeMouseDown"></view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
+  },
+};
+</script>
+
+<script setup lang="ts">
+/**
+ * DraggableContainer - 可拖拽且可缩放容器组件
+ * 适用于 DevTool 窗口化及悬浮窗展示
+ */
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { debounce } from '../../utils';
+
+const props = withDefaults(
+  defineProps<{
+    x?: number;
+    y?: number;
+    width?: number | string;
+    height?: number | string;
+    zIndex?: number;
+    customStyle?: Record<string, any>;
+    boundaryPadding?: number;
+    // 是否启用缩放
+    resizable?: boolean;
+    minWidth?: number;
+    minHeight?: number;
+    // 拖拽句柄的选择器（只允许在该元素上触发拖拽）
+    handle?: string;
+    // 是否全屏状态
+    isFullScreen?: boolean;
+    maxWidth?: number;
+  }>(),
+  {
+    x: 0,
+    y: 0,
+    width: 375,
+    height: 300,
+    zIndex: 1000,
+    boundaryPadding: 0,
+    resizable: false,
+    minWidth: 200,
+    minHeight: 150,
+    isFullScreen: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:x', val: number): void;
+  (e: 'update:y', val: number): void;
+  (e: 'update:width', val: number): void;
+  (e: 'update:height', val: number): void;
+  (
+    e: 'change',
+    detail: { x: number; y: number; width: number; height: number },
+  ): void;
+}>();
+
+// 定义插槽类型，解决外部使用的类型报错
+defineSlots<{
+  default(): any;
+}>();
+
+// 当前位置和尺寸
+const localX = ref(props.x);
+const localY = ref(props.y);
+const localWidth = ref(typeof props.width === 'number' ? props.width : 375);
+const localHeight = ref(typeof props.height === 'number' ? props.height : 300);
+
+// 拖拽/缩放状态
+let isDragging = false;
+let isResizing = false;
+let startX = 0;
+let startY = 0;
+let startPosX = 0;
+let startPosY = 0;
+let startWidth = 0;
+let startHeight = 0;
+
+let screenWidth = 375;
+let screenHeight = 667;
+
+onMounted(() => {
+  const sysInfo = uni.getSystemInfoSync();
+  screenWidth = sysInfo.windowWidth || 375;
+  screenHeight = sysInfo.windowHeight || 667;
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('mousemove', onGlobalMouseMove);
+    window.addEventListener('mouseup', onGlobalMouseUp);
+    window.addEventListener('resize', onWindowResize);
+  }
+});
+
+function onWindowResize() {
+  const sysInfo = uni.getSystemInfoSync();
+  const oldScreenWidth = screenWidth;
+  const oldScreenHeight = screenHeight;
+
+  screenWidth = sysInfo.windowWidth || 375;
+  screenHeight = sysInfo.windowHeight || 667;
+
+  // 如果宽度变窄导致溢出，或者窗口宽度发生改变，重新居中
+  if (oldScreenWidth !== screenWidth || oldScreenHeight !== screenHeight) {
+    if (
+      props.maxWidth &&
+      localWidth.value > screenWidth * (props.maxWidth / 100)
+    ) {
+      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);
+
+    emit('update:x', localX.value);
+    emit('update:y', localY.value);
+    emit('update:width', localWidth.value);
+    emitChange();
+  }
+}
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('mousemove', onGlobalMouseMove);
+    window.removeEventListener('mouseup', onGlobalMouseUp);
+    window.removeEventListener('resize', onWindowResize);
+  }
+});
+
+watch(
+  [() => props.x, () => props.y, () => props.width, () => props.height],
+  ([nx, ny, nw, nh]) => {
+    if (!isDragging && !isResizing) {
+      if (nx !== undefined) localX.value = nx;
+      if (ny !== undefined) localY.value = ny;
+      if (typeof nw === 'number') localWidth.value = nw;
+      if (typeof nh === 'number') localHeight.value = nh;
+    }
+  },
+);
+
+const containerStyle = computed(() => {
+  if (props.isFullScreen) {
+    return {
+      ...props.customStyle,
+      position: 'fixed' as const,
+      left: 0,
+      top: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: props.zIndex,
+    };
+  }
+  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`,
+    width: typeof finalWidth === 'number' ? `${finalWidth}px` : finalWidth,
+    maxWidth: maxWidthVal,
+    height:
+      typeof localHeight.value === 'number'
+        ? `${localHeight.value}px`
+        : localHeight.value,
+    zIndex: props.zIndex,
+    touchAction: 'none',
+  };
+});
+
+function clampPosition(x: number, y: number, w: number, h: number) {
+  const padding = props.boundaryPadding;
+  // 计算实际视觉宽度（受 maxWidth 限制）
+  const actualWidth =
+    props.maxWidth && typeof w === 'number'
+      ? Math.min(w, screenWidth * (props.maxWidth / 100))
+      : w;
+
+  const maxX = Math.max(0, screenWidth - actualWidth - padding);
+  const maxY = Math.max(0, screenHeight - h - padding);
+  return {
+    x: Math.max(padding, Math.min(maxX, x)),
+    y: Math.max(padding, Math.min(maxY, y)),
+  };
+}
+
+// 拖拽逻辑
+function onTouchStart(e: TouchEvent) {
+  if (props.isFullScreen || e.touches.length !== 1) return;
+
+  // 检查是否在句柄上触发
+  if (props.handle && !isTargetOnHandle(e.target)) return;
+
+  startDrag(e.touches[0].clientX, e.touches[0].clientY);
+}
+
+function onMouseDown(e: MouseEvent) {
+  if (props.isFullScreen) return;
+
+  // 检查是否在句柄上触发
+  if (props.handle && !isTargetOnHandle(e.target)) return;
+
+  startDrag(e.clientX, e.clientY);
+}
+
+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;
+  }
+
+  // 2. 备选：通过选择器判断（主要支持 H5）
+  let curr = target;
+  const handleClass = props.handle.startsWith('.')
+    ? props.handle.slice(1)
+    : props.handle;
+
+  while (curr) {
+    if (
+      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;
+    if (
+      curr === null ||
+      curr === undefined ||
+      (curr.className &&
+        typeof curr.className === 'string' &&
+        curr.className.includes('draggable-container'))
+    )
+      break;
+  }
+  return false;
+}
+
+function startDrag(clientX: number, clientY: number) {
+  startX = clientX;
+  startY = clientY;
+  startPosX = localX.value;
+  startPosY = localY.value;
+  isDragging = true;
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (isDragging && !isResizing) {
+    const touch = e.touches[0];
+    updatePosition(touch.clientX, touch.clientY);
+  }
+}
+
+function onGlobalMouseMove(e: MouseEvent) {
+  if (isDragging && !isResizing) {
+    updatePosition(e.clientX, e.clientY);
+  } else if (isResizing) {
+    updateSize(e.clientX, e.clientY);
+  }
+}
+
+function updatePosition(clientX: number, clientY: number) {
+  const dx = clientX - startX;
+  const dy = clientY - startY;
+  const { x, y } = clampPosition(
+    startPosX + dx,
+    startPosY + dy,
+    localWidth.value,
+    localHeight.value,
+  );
+  localX.value = x;
+  localY.value = y;
+}
+
+function onTouchEnd() {
+  endDrag();
+}
+
+function onGlobalMouseUp() {
+  if (isDragging) endDrag();
+  if (isResizing) endResize();
+}
+
+function endDrag() {
+  isDragging = false;
+  emit('update:x', localX.value);
+  emit('update:y', localY.value);
+  emitChange();
+}
+
+// 缩放逻辑
+function onResizeStart(e: TouchEvent) {
+  const touch = e.touches[0];
+  initResize(touch.clientX, touch.clientY);
+}
+
+function onResizeMouseDown(e: MouseEvent) {
+  initResize(e.clientX, e.clientY);
+}
+
+function initResize(clientX: number, clientY: number) {
+  isResizing = true;
+  isDragging = false;
+  startX = clientX;
+  startY = clientY;
+  startWidth = localWidth.value;
+  startHeight = localHeight.value;
+}
+
+function onResizeMove(e: TouchEvent) {
+  if (isResizing) {
+    const touch = e.touches[0];
+    updateSize(touch.clientX, touch.clientY);
+  }
+}
+
+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;
+  }
+}
+
+function onResizeEnd() {
+  endResize();
+}
+
+function endResize() {
+  isResizing = false;
+  emit('update:width', localWidth.value);
+  emit('update:height', localHeight.value);
+  emitChange();
+}
+
+/**
+ * 手动初始化拖拽（通过 scoped slot 暴露给子组件使用）
+ * @param e 触摸或鼠标事件
+ */
+function initDrag(e: TouchEvent | MouseEvent) {
+  if (props.isFullScreen) return;
+
+  let clientX = 0;
+  let clientY = 0;
+
+  if ('touches' in e && e.touches.length > 0) {
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  } else if ('clientX' in e) {
+    clientX = (e as MouseEvent).clientX;
+    clientY = (e as MouseEvent).clientY;
+  }
+
+  startDrag(clientX, clientY);
+}
+
+// 暴露方法给父组件
+defineExpose({
+  startDrag,
+  initDrag,
+});
+
+const emitChange = debounce(() => {
+  emit('change', {
+    x: localX.value,
+    y: localY.value,
+    width: localWidth.value,
+    height: localHeight.value,
+  });
+}, 300);
+</script>
+
+<style scoped>
+.draggable-container {
+  touch-action: none;
+  overflow: hidden;
+  background-color: var(--dev-tool-bg3-color);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto; /* 确保容器及其子项能够接收事件 */
+}
+
+.resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 32px; /* 增加热区面积 */
+  height: 32px;
+  cursor: nwse-resize;
+  background: linear-gradient(
+    135deg,
+    transparent 60%,
+    var(--dev-tool-main-color) 60%
+  );
+  opacity: 0.6;
+  pointer-events: auto; /* 显式开启事件响应 */
+  border-radius: 12px;
+}
+
+.resize-handle:active {
+  opacity: 1;
+}
+</style>

package/dist/v3/ElEvent/ElEventItem.vue

@@ -35,10 +35,9 @@
     <view
       class="el-event-item-position"
       v-for="(point, index) in eventItem.touches"
-      :key="index"
-    >
+      :key="index">
       <view>cx:{{ point.clientX }}</view>
-      <view>cy:{{ point.clientX }}</view>
+      <view>cy:{{ point.clientY }}</view>
       <view>px:{{ point.pageX }}</view>
       <view>py:{{ point.pageY }}</view>
     </view>
@@ -84,6 +83,7 @@ function onOpenJSon() {
   text-align: right;
   word-break: break-all;
 }
+
 .link {
   cursor: pointer;
   text-decoration: underline;
@@ -98,6 +98,7 @@ function onOpenJSon() {
   align-items: center;
   min-height: 24px;
 }
+
 .el-event-item-position > view {
   width: 25%;
 }

package/dist/v3/ElEvent/index.vue

@@ -1,18 +1,19 @@
 <template>
   <view class="el-event-content">
-    <DevToolTitle customStyle="padding: 0 16px">
-      事件触发列表
+    <view class="el-event-control">
+      <DevToolTitle> {{ t('elEvent.title') }} </DevToolTitle>
+
       <Tag
         mode="clear"
         style="margin-left: auto"
         customStyle="margin-left: auto"
         @click="emit('clear')"
       >
-        清空
+        {{ t('common.clear') }}
       </Tag>
-    </DevToolTitle>
+    </view>
 
-    <VirtualListPro
+    <VirtualList
       v-if="elEventList && elEventList?.length > 0"
       class="el-event-list"
       :pageSize="20"
@@ -32,7 +33,7 @@
           <ElEventItem :eventItem="item" @openJson="emit('openJson', $event)" />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
 
     <Empty v-else />
   </view>
@@ -42,11 +43,14 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import ElEventItem from './ElEventItem.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
 import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
-const props = defineProps<{
+const _props = defineProps<{
   elEventList?: DevTool.ElEventItem[];
   eventCount?: DevTool.EventCount;
   useDevSource?: boolean;
@@ -77,16 +81,29 @@ const emit = defineEmits<{
   box-sizing: border-box;
   gap: 12px;
 }
+
 .el-event-statistics-item {
   display: flex;
   align-items: center;
   width: 25%;
 }
+
 .el-event-statistics-item-name {
   margin-right: 8px;
 }
+
 .el-event-list {
   height: calc(100% - 32px * 2);
   overflow: auto;
 }
+
+.el-event-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 32px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
 </style>

package/dist/v3/Empty/index.vue

@@ -16,6 +16,7 @@ defineProps<{ text?: string }>();
   align-items: center;
   margin: 0 auto;
 }
+
 .dev-tool-empty-image {
   margin-top: 50px;
   width: 50px;

package/dist/v3/FilterInput/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <view class="filter-input-wrapper">
+  <view class="filter-input-wrapper" :style="customStyle">
     <input
       :class="`filter-input`"
       :value="modelValue"
       :placeholder="placeholder || '请输入'"
-      @confirm="debounceInput"
-    />
-    <view class="filter-input-clear" @click="onClear"> × </view>
+      @input="debounceInput"
+      @confirm="debounceInput" />
+    <view class="filter-input-clear" v-if="modelValue" @click="onClear">×</view>
   </view>
 </template>
 <script lang="ts" setup>
 import { debounce } from '../../utils';
-import { ref, onMounted } from 'vue';
-const props = defineProps<{
+defineProps<{
   placeholder?: string;
   modelValue?: string;
+  customStyle?: string | Record<string, any>;
 }>();
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
@@ -22,8 +22,6 @@ const emit = defineEmits<{
   (e: 'openSearch', value: boolean): void;
 }>();
 
-const isActive = ref(false);
-
 function onInput(e: any) {
   const value = e.detail.value;
   emit('update:modelValue', value);
@@ -35,29 +33,17 @@ function onClear() {
   emit('search', '');
 }
 
-function openSearch(open: boolean) {
-  isActive.value = open;
-  emit('openSearch', open);
-  if (!open && props.modelValue) {
-    emit('update:modelValue', '');
-    emit('search', '');
-  }
-}
-
 const debounceInput = debounce(onInput, 500);
 </script>
 <style scoped>
 .filter-input-wrapper {
-  flex: 1;
   display: flex;
   align-items: center;
   padding: 0 8px;
   width: 100%;
   height: 24px;
-
   border-radius: 4px;
   border: 1px solid var(--dev-tool-border-color);
-
   background-color: var(--dev-tool-bg-color);
   transition: background-color 0.3s;
   box-sizing: border-box;
@@ -67,11 +53,11 @@ const debounceInput = debounce(onInput, 500);
   flex: 1;
   box-shadow: none;
   box-sizing: border-box;
-  border-radius: 5;
+  font: unset;
+  border-radius: 5px;
   font-family: inherit;
   color: var(--dev-tool-text-color);
   font-weight: 400;
-  font: unset;
   height: 24px;
   transition: color 0.3s;
 }