vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/UniEvent/index.vue

@@ -1,89 +1,82 @@
 <template>
   <view class="uni-event-content">
-    <DevToolTitle customStyle="padding: 0 16px">事件触发统计</DevToolTitle>
+    <DevToolTitle customStyle="padding: 0 16px">
+      {{ t('uniEvent.title') }}
+    </DevToolTitle>
     <view class="uni-event-statistics">
       <view class="uni-event-statistics-item">
-        <view class="uni-event-statistics-item-name">on: </view>
+        <view class="uni-event-statistics-item-name">on:</view>
         <Tag
           mode="log"
           style="flex: 1"
-          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;"
-        >
+          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;">
           {{ eventCount?.on ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view class="uni-event-statistics-item-name">once: </view>
+        <view class="uni-event-statistics-item-name">once:</view>
         <Tag
           mode="warn"
           style="flex: 1"
-          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;"
-        >
+          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;">
           {{ eventCount?.once ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view class="uni-event-statistics-item-name">emit: </view>
+        <view class="uni-event-statistics-item-name">emit:</view>
         <Tag
           mode="main"
           style="flex: 1"
-          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;"
-        >
+          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;">
           {{ eventCount?.emit ?? 0 }}
         </Tag>
       </view>
       <view class="uni-event-statistics-item">
-        <view class="uni-event-statistics-item-name">off: </view>
+        <view class="uni-event-statistics-item-name">off:</view>
         <Tag
           mode="error"
           style="flex: 1"
-          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;"
-        >
+          customStyle="display:flex; flex: 1; justify-content: center; width: 100%;">
           {{ eventCount?.off ?? 0 }}
         </Tag>
       </view>
     </view>
     <DevToolTitle customStyle="padding: 0 16px">
-      事件触发列表
+      {{ t('uniEvent.eventList') }}
       <Tag
         mode="clear"
         style="margin-left: auto"
         customStyle="margin-left: auto"
-        @click="emit('clear')"
-      >
-        清空
+        @click="emit('clear')">
+        {{ t('common.clear') }}
       </Tag>
     </DevToolTitle>
 
-    <VirtualListPro
+    <VirtualList
       v-if="uniEventList && uniEventList?.length > 0"
       class="uni-event-list"
       scrollX
-      virtual
       :pageSize="20"
       :height="contentHeight - 32 * 4"
       :data="uniEventList"
-      :scrollWithAnimation="true"
-    >
+      :scrollWithAnimation="true">
       <template #default="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(item, index) in list"
           :key="start + index"
           :index="start + index"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <UniEventItem
             :eventItem="item"
             :mode="mode"
             :useDevSource="useDevSource"
             :sourceFileServers="sourceFileServers"
             :zIndex="zIndex"
-            @openCode="emit('openCode', $event)"
-          />
+            @openCode="emit('openCode', $event)" />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
 
     <Empty v-else />
   </view>
@@ -93,9 +86,12 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import UniEventItem from './UniEventItem.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 type { DevTool } from '@/dev/type';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
+import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 defineProps<{
   uniEventList?: DevTool.UniEventItem[];
@@ -128,14 +124,17 @@ const emit = defineEmits<{
   box-sizing: border-box;
   gap: 12px;
 }
+
 .uni-event-statistics-item {
   display: flex;
   align-items: center;
   width: 25%;
 }
+
 .uni-event-statistics-item-name {
   margin-right: 8px;
 }
+
 .uni-event-list {
   height: calc(100% - 32px * 3);
   overflow: auto;

package/dist/v3/{VirtualListPro → VirtualList}/AutoSize.vue

@@ -10,7 +10,7 @@ import { uniqueId } from '../../utils';
 const props = defineProps<{
   index: number;
   customStyle?: string | Record<string, any>;
-  itemsHeight: number[];
+  itemsHeight: number[] | Record<number, number>;
   onSizeChange: (index: number, height: number) => void;
 }>();
 

package/dist/v3/VirtualList/index.vue

@@ -1,112 +1,412 @@
 <template>
-  <scroll-view
-    v-if="autoVirtual"
-    scroll-y
-    class="virtual-list"
-    :style="{
-      height: `${props.height}px`,
-    }"
-    @scroll="onVirtualScroll"
-  >
-    <view
-      class="virtual-list-holder"
-      :style="{
-        height: `${props.data.length * props.itemHeight}px`,
-      }"
-    >
-      <view
-        class="virtual-list-holder-inner"
-        :style="{
-          transform: `translateY(${state.translateY}px)`,
-        }"
-      >
-        <slot :list="state.visibleData"></slot>
+  <view :class="['virtual-list-wrapper', className]" :style="wrapperStyle">
+    <scroll-view
+      scroll-y
+      :scroll-x="scrollX && !isEdgeSwipe"
+      class="virtual-list-scroll"
+      :scroll-top="scrollTopVal"
+      :scroll-with-animation="scrollWithAnimation"
+      :scroll-into-view="scrollIntoView"
+      @scroll="handleScroll"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @mousedown="onMouseDown">
+      <!-- 滚动容器：统一负责撑开横向和纵向的滚动区域 -->
+      <view class="virtual-list-container" :style="containerStyle">
+        <!-- 实际渲染内容的列表块 -->
+        <view class="virtual-list-content" :style="contentStyle">
+          <view class="virtual-list-measure-inner">
+            <slot
+              :list="visibleData"
+              :startIndex="startIndex"
+              :start="startIndex"
+              :current="Math.floor(startIndex / props.pageSize) + 1"
+              :itemsHeight="itemsHeightMap"
+              :onSizeChange="onSizeChange"></slot>
+          </view>
+        </view>
       </view>
+    </scroll-view>
+
+    <!-- 返回顶部按钮：移出 scroll-view，绝对定位在 wrapper 内部 -->
+    <view
+      :style="{ display: showBackTop && scrollTop > 200 ? 'flex' : 'none' }"
+      class="virtual-back-top"
+      @click="scrollToTop">
+      ↑
     </view>
-  </scroll-view>
-  <view
-    v-else
-    class="normal-list"
-    :style="{
-      height: `${props.height}px`,
-    }"
-  >
-    <slot :list="state.visibleData"></slot>
   </view>
 </template>
+
 <script lang="ts" setup>
-import { computed, onMounted, reactive, watchEffect } from 'vue';
-const props = defineProps<{
-  /** 虚拟列表高度 */
-  height: number;
-  /** 每一项高度 */
-  itemHeight: number;
-  /** 渲染的数据列表 */
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  nextTick,
+  getCurrentInstance,
+  onMounted,
+} from 'vue';
+
+interface Props {
+  /** 渲染数据源 */
   data: any[];
-  /** 虚拟列表自动开启行数 */
-  autoVirtualRow?: number;
+  /** 容器高度 */
+  height?: number | string;
+  /** 每页渲染数量 (虚拟化块大小) */
+  pageSize?: number;
+  /** 预估的项高度 (用于初次计算) */
+  itemHeight?: number;
+  /** 额外的缓冲区数量 (防止滚动过快白屏) */
+  buffer?: number;
+  /** 自定义类名 */
+  className?: string;
+  /** 是否显示返回顶部 */
+  showBackTop?: boolean;
+  /** 数据更新时是否自动滚动到顶部 */
+  dataChangeScrollToTop?: boolean;
+  /** 预加载高度 (兼容 Pro) */
+  preLodeHeight?: number;
+  /** 默认当前页 (从 1 开始) */
+  defaultCurrent?: number;
+  /** 横向滚动 */
+  scrollX?: boolean;
+  /** 滚动动画 */
+  scrollWithAnimation?: boolean;
+  /** 滚动到指定元素 ID */
+  scrollIntoView?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: '100%',
+  pageSize: 20,
+  itemHeight: 50,
+  buffer: 5,
+  showBackTop: true,
+  dataChangeScrollToTop: true,
+  preLodeHeight: 100,
+  defaultCurrent: 1,
+  scrollX: false,
+  scrollWithAnimation: false,
+  scrollIntoView: '',
+});
+
+const emit = defineEmits(['scroll']);
+
+/** 定义插槽类型 */
+defineSlots<{
+  default(props: {
+    /** 当前可见数据列表 */
+    list: any[];
+    /** 起始索引 (绝对索引) */
+    startIndex: number;
+    /** 起始索引 (别名，同 startIndex) */
+    start: number;
+    /** 当前页码 (基于 startIndex 和 pageSize 计算) */
+    current: number;
+    /** 各项高度映射记录 */
+    itemsHeight: Record<number, number>;
+    /** 子项尺寸变化回调 */
+    onSizeChange: (index: number, height: number) => void;
+  }): any;
 }>();
 
-const state = reactive<{ translateY: number; visibleData: any[] }>({
-  translateY: 0,
-  visibleData: [],
+// --- 状态变量 ---
+const scrollTop = ref(0);
+const scrollTopVal = ref(0); // 用于控制转跳的响应式值
+const startIndex = ref(0);
+const itemsHeightMap = reactive<Record<number, number>>({}); // 存储每一项的实际高度
+
+const isEdgeSwipe = ref(false);
+const isCapturing = ref(false); // 是否由当前列表锁定捕获手势
+let containerRect = { left: 0, right: 0, width: 0 };
+
+const instance = getCurrentInstance();
+const maxWidth = ref(0);
+
+onMounted(() => {
+  // 获取容器位置和宽度，用于边缘检测
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select('.virtual-list-wrapper')
+    .boundingClientRect((data: any) => {
+      if (data) {
+        containerRect = data;
+      }
+    })
+    .exec();
+});
+
+function onTouchStart(e: TouchEvent | MouseEvent) {
+  if (!props.scrollX) return;
+  const touch = (e as TouchEvent).touches
+    ? (e as TouchEvent).touches[0]
+    : (e as MouseEvent);
+  const x = touch.clientX;
+
+  // 如果从边缘 40px 内开始滑动，则视为侧滑切换 Tab，允许事件冒泡到父级
+  const threshold = 40;
+  if (
+    x < containerRect.left + threshold ||
+    x > containerRect.right - threshold
+  ) {
+    isEdgeSwipe.value = true;
+    isCapturing.value = false;
+  } else {
+    isEdgeSwipe.value = false;
+    isCapturing.value = true;
+    // 重要：锁定在此，阻止事件冒泡到 CustomSwiper
+    e.stopPropagation();
+  }
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (isCapturing.value) {
+    // 已经锁定时，继续阻止冒泡，确保父级不会触发滑屏逻辑
+    e.stopPropagation();
+  }
+}
+
+function onTouchEnd(e: TouchEvent | MouseEvent) {
+  if (isCapturing.value) {
+    e.stopPropagation();
+  }
+  isCapturing.value = false;
+  isEdgeSwipe.value = false;
+}
+
+function onMouseDown(e: MouseEvent) {
+  onTouchStart(e);
+}
+
+// 根据 defaultCurrent 初始化位置
+if (props.defaultCurrent > 1) {
+  startIndex.value = Math.max(0, (props.defaultCurrent - 1) * props.pageSize);
+}
+const offset = ref(0);
+
+// 初始化 offset
+if (startIndex.value > 0) {
+  let initialOffset = 0;
+  for (let i = 0; i < startIndex.value; i++) {
+    initialOffset += itemsHeightMap[i] || props.itemHeight;
+  }
+  offset.value = initialOffset;
+}
+
+// --- 计算属性 ---
+// 外层容器样式
+const wrapperStyle = computed(
+  () =>
+    ({
+      height:
+        typeof props.height === 'number' ? `${props.height}px` : props.height,
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
+    }) as any,
+);
+
+// 计算总高度：已测量的高度 + 未测量的默认高度
+const totalHeight = computed(() => {
+  let total = 0;
+  for (let i = 0; i < props.data.length; i++) {
+    total += itemsHeightMap[i] || props.itemHeight;
+  }
+  return total;
+});
+
+// 可见数据切片
+const visibleData = computed(() => {
+  // 我们多渲染一点，避免滚动白屏
+  const end = Math.min(
+    startIndex.value + props.pageSize + props.buffer,
+    props.data.length,
+  );
+  return props.data.slice(startIndex.value, end);
 });
 
-const autoVirtual = computed(() => {
-  if (typeof props.autoVirtualRow === 'number') {
-    if (props.data.length > props.autoVirtualRow) {
-      return true;
+// 滚动容器样式 (撑开滚动区域的核心)
+const containerStyle = computed(() => {
+  const style: any = {
+    height: `${totalHeight.value}px`,
+    position: 'relative',
+    width: '100%',
+  };
+  if (props.scrollX) {
+    if (maxWidth.value) {
+      style.minWidth = `${maxWidth.value}px`;
     }
-    return false;
   }
-  return true;
+  return style;
 });
 
-function updateVisibleData(scrollTop: number = 0) {
-  const flatDataValue = props.data ?? [];
-  if (autoVirtual.value) {
-    const visibleCount = props.height / props.itemHeight;
-    const scrollCount = Math.floor(scrollTop / props.itemHeight);
-    let start =
-      scrollCount < 0
-        ? 0
-        : scrollCount + visibleCount > flatDataValue.length
-          ? flatDataValue.length - visibleCount
-          : scrollCount;
-    if (start < 0) {
-      start = 0;
+// 内容块样式
+const contentStyle = computed(() => {
+  return {
+    transform: `translateY(${offset.value}px)`,
+    position: 'absolute' as const,
+    left: 0,
+    top: 0,
+    width: '100%',
+    // minWidth: 'max-content',
+  };
+});
+
+// --- 方法 ---
+
+/**
+ * 核心滚动处理函数
+ */
+const handleScroll = (e: any) => {
+  // Uni-app 环境下 e.detail.scrollTop 可能存在，标准 H5 下是 e.target.scrollTop
+  const st = e.detail?.scrollTop ?? e.target?.scrollTop ?? 0;
+  scrollTop.value = st;
+
+  // 根据当前滚动位置计算 startIndex
+  let accumulatedHeight = 0;
+  let index = -1;
+  const dataLen = props.data.length;
+
+  for (let i = 0; i < dataLen; i++) {
+    const h = itemsHeightMap[i] || props.itemHeight;
+    if (accumulatedHeight + h > st) {
+      index = i;
+      break;
     }
-    const end = start + visibleCount;
-    state.translateY = start * props.itemHeight;
-    state.visibleData = state.visibleData = props.data.slice(start, end);
-  } else {
-    state.visibleData = flatDataValue;
+    accumulatedHeight += h;
   }
-}
 
-function onVirtualScroll(e: { detail: { scrollTop: number } }) {
-  updateVisibleData(e?.detail?.scrollTop ?? 0);
-}
+  // 修复核心：如果 st 很大，超过了所有项的高度和，或者刚好在最后，确保 index 不会回滚到 0
+  if (index === -1) {
+    index = dataLen > 0 ? dataLen - 1 : 0;
+  }
+
+  // 加上缓冲区处理
+  const targetIndex = Math.max(0, index - props.buffer);
 
-watchEffect(() => {
-  if (props.data) {
-    updateVisibleData();
+  // 更新状态
+  if (targetIndex !== startIndex.value) {
+    startIndex.value = targetIndex;
+
+    // 计算内容块的偏移量：即渲染起始项之前的全部高度
+    let currentOffset = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      currentOffset += itemsHeightMap[i] || props.itemHeight;
+    }
+    offset.value = currentOffset;
   }
+
+  emit('scroll', e);
+};
+
+/**
+ * 子项尺寸变化时更新高度映射
+ */
+const onSizeChange = (index: number, height: number) => {
+  if (height > 0 && itemsHeightMap[index] !== height) {
+    itemsHeightMap[index] = height;
+  }
+};
+
+/**
+ * 滚动到指定位置
+ */
+const scrollToTop = () => {
+  scrollTopVal.value = scrollTop.value; // 先同步一次
+  nextTick(() => {
+    scrollTopVal.value = 0;
+    scrollTop.value = 0;
+  });
+};
+
+// 暴露 API 给外部使用
+defineExpose({
+  scrollToTop,
+  itemsHeightMap,
 });
 
-onMounted(() => {
-  updateVisibleData();
+/**
+ * 更新记录的最大宽度
+ */
+const updateMaxWidth = () => {
+  if (!props.scrollX) return;
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select('.virtual-list-measure-inner')
+    .boundingClientRect((res: any) => {
+      // 只有当检测到更大的宽度时才更新，实现“只增不减”
+      if (res && res.width > maxWidth.value) {
+        maxWidth.value = res.width;
+      }
+    })
+    .exec();
+};
+
+// 监听可见数据变化，更新最大宽度
+watch(visibleData, () => {
+  nextTick(() => {
+    updateMaxWidth();
+  });
 });
+
+// 数据变化处理
+watch(
+  () => props.data,
+  () => {
+    if (props.dataChangeScrollToTop) {
+      maxWidth.value = 0; // 只有在需要回到顶部（彻底换数据）时才重置宽度
+      scrollToTop();
+      // 数据重置时，立即更新内部索引，防止旧位置引起的白屏
+      startIndex.value = 0;
+      offset.value = 0;
+      scrollTop.value = 0;
+    }
+  },
+  { deep: false },
+);
 </script>
+
 <style scoped>
-.normal-list,
-.virtual-list {
-  position: relative;
+.virtual-list-wrapper {
+  box-sizing: border-box;
+}
+
+.virtual-list-scroll {
   width: 100%;
-  overflow: auto;
+  height: 100%;
+}
+
+.virtual-list-measure-inner {
+  /* width: max-content; */
+  min-width: 100%;
+}
+
+.virtual-back-top {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 44px;
+  height: 44px;
+  background-color: var(--dev-tool-main-color, #9254de);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  font-size: 20px;
+  z-index: 1000;
+  cursor: pointer;
+  transition:
+    opacity 0.3s,
+    transform 0.2s;
 }
 
-.virtual-list-holder {
-  position: relative;
+.virtual-back-top:active {
+  transform: scale(0.9);
 }
 </style>