@jetlinks-web/components 3.2.1 → 3.2.3

package/lib/VirtualTable/useVirtualScroll.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useVirtualScroll = useVirtualScroll;
 var _vue = require("vue");
 /**
- * 虚拟滚动 Hook
+ * 高性能虚拟滚动 Hook
+ * 优化点：
+ * 1. 使用累积高度缓存，避免重复计算
+ * 2. 使用二分查找快速定位索引
+ * 3. 使用 shallowRef 减少响应式开销
+ * 4. 滚动节流减少计算频率
  */
 function useVirtualScroll(options) {
   var itemCount = options.itemCount,
@@ -17,6 +22,9 @@ function useVirtualScroll(options) {
     overscan = _options$overscan === void 0 ? 5 : _options$overscan,
     _options$threshold = options.threshold,
     threshold = _options$threshold === void 0 ? 100 : _options$threshold;
+  // 固定行高模式（性能更高）
+  var isFixedHeight = typeof itemHeight === 'number';
+  var fixedItemHeight = isFixedHeight ? itemHeight : 54;
   // 容器高度（支持响应式）
   var containerHeight = (0, _vue.computed)(function () {
     if ((0, _vue.isRef)(containerHeightOption)) {
@@ -24,23 +32,30 @@ function useVirtualScroll(options) {
     }
     return containerHeightOption;
   });
-  // 滚动位置
-  var scrollTop = (0, _vue.ref)(0);
-  // 动态行高缓存
-  var itemHeights = (0, _vue.ref)(new Map());
+  // 滚动位置 - 使用 shallowRef 减少响应式开销
+  var scrollTop = (0, _vue.shallowRef)(0);
+  // 动态行高缓存（仅在非固定高度模式使用）
+  var itemHeights = (0, _vue.shallowRef)(new Map());
+  // 累积高度缓存 - 用于二分查找
+  var accumulatedHeights = (0, _vue.shallowRef)([]);
+  var heightsCacheValid = false;
   /**
    * 获取指定索引的行高
    */
   var getItemHeight = function getItemHeight(index) {
+    if (isFixedHeight) {
+      return fixedItemHeight;
+    }
     // 优先使用缓存的高度
-    if (itemHeights.value.has(index)) {
-      return itemHeights.value.get(index);
+    var cached = itemHeights.value.get(index);
+    if (cached !== undefined) {
+      return cached;
     }
-    // 使用配置的高度
+    // 使用配置的高度函数
     if (typeof itemHeight === 'function') {
       return itemHeight(index);
     }
-    return itemHeight;
+    return fixedItemHeight;
   };
   /**
    * 设置行高（用于动态测量）
@@ -48,65 +63,101 @@ function useVirtualScroll(options) {
   var setItemHeight = function setItemHeight(index, height) {
     if (height > 0 && itemHeights.value.get(index) !== height) {
       itemHeights.value.set(index, height);
+      heightsCacheValid = false; // 使缓存失效
+    }
+  };
+  /**
+   * 重建累积高度缓存
+   */
+  var rebuildAccumulatedHeights = function rebuildAccumulatedHeights() {
+    if (heightsCacheValid) return;
+    var count = itemCount.value;
+    var heights = new Array(count + 1);
+    heights[0] = 0;
+    if (isFixedHeight) {
+      // 固定高度模式，直接计算
+      for (var i = 0; i < count; i++) {
+        heights[i + 1] = heights[i] + fixedItemHeight;
+      }
+    } else {
+      // 动态高度模式
+      for (var _i = 0; _i < count; _i++) {
+        heights[_i + 1] = heights[_i] + getItemHeight(_i);
+      }
     }
+    accumulatedHeights.value = heights;
+    heightsCacheValid = true;
+  };
+  /**
+   * 二分查找：找到第一个累积高度大于 target 的索引
+   */
+  var binarySearchIndex = function binarySearchIndex(target) {
+    rebuildAccumulatedHeights();
+    var heights = accumulatedHeights.value;
+    if (heights.length === 0) return 0;
+    var left = 0;
+    var right = heights.length - 1;
+    while (left < right) {
+      var mid = Math.floor((left + right) / 2);
+      if (heights[mid] <= target) {
+        left = mid + 1;
+      } else {
+        right = mid;
+      }
+    }
+    return Math.max(0, left - 1);
+  };
+  /**
+   * 获取累积高度
+   */
+  var getAccumulatedHeight = function getAccumulatedHeight(index) {
+    rebuildAccumulatedHeights();
+    var heights = accumulatedHeights.value;
+    if (index < 0) return 0;
+    if (index >= heights.length) return heights[heights.length - 1] || 0;
+    return heights[index];
   };
   /**
    * 计算总高度
    */
   var totalHeight = (0, _vue.computed)(function () {
-    var total = 0;
-    for (var i = 0; i < itemCount.value; i++) {
-      total += getItemHeight(i);
+    if (isFixedHeight) {
+      return itemCount.value * fixedItemHeight;
     }
-    return total;
+    rebuildAccumulatedHeights();
+    var heights = accumulatedHeights.value;
+    return heights.length > 0 ? heights[heights.length - 1] : 0;
   });
   /**
-   * 计算可视范围的起始索引
+   * 计算可视范围的起始索引 - 使用二分查找 O(log n)
    */
   var startIndex = (0, _vue.computed)(function () {
-    if (itemCount.value < threshold) {
+    var count = itemCount.value;
+    if (count < threshold) {
       return 0;
     }
-    var accumulated = 0;
-    for (var i = 0; i < itemCount.value; i++) {
-      var height = getItemHeight(i);
-      if (accumulated + height > scrollTop.value) {
-        return Math.max(0, i - overscan);
-      }
-      accumulated += height;
-    }
-    return 0;
+    var index = binarySearchIndex(scrollTop.value);
+    return Math.max(0, index - overscan);
   });
   /**
    * 计算可视范围的结束索引
    */
   var endIndex = (0, _vue.computed)(function () {
-    if (itemCount.value < threshold) {
-      return itemCount.value;
-    }
-    var start = startIndex.value;
-    var accumulated = 0;
-    // 从起始索引开始累加
-    for (var i = 0; i < start; i++) {
-      accumulated += getItemHeight(i);
-    }
-    for (var _i = start; _i < itemCount.value; _i++) {
-      accumulated += getItemHeight(_i);
-      if (accumulated > scrollTop.value + containerHeight.value) {
-        return Math.min(itemCount.value, _i + 1 + overscan);
-      }
+    var count = itemCount.value;
+    if (count < threshold) {
+      return count;
     }
-    return itemCount.value;
+    var targetHeight = scrollTop.value + containerHeight.value;
+    var index = binarySearchIndex(targetHeight);
+    return Math.min(count, index + 1 + overscan);
   });
   /**
    * 顶部偏移量
    */
   var offsetY = (0, _vue.computed)(function () {
-    var offset = 0;
-    for (var i = 0; i < startIndex.value; i++) {
-      offset += getItemHeight(i);
-    }
-    return offset;
+    var start = startIndex.value;
+    if (start === 0) return 0;
+    return getAccumulatedHeight(start);
   });
   /**
    * 可见行数
@@ -114,20 +165,29 @@ function useVirtualScroll(options) {
   var visibleCount = (0, _vue.computed)(function () {
     return endIndex.value - startIndex.value;
   });
+  // 滚动节流
+  var scrollRAF = null;
   /**
-   * 处理滚动事件
+   * 处理滚动事件（带节流）
    */
   var handleScroll = function handleScroll(e) {
     var target = e.target;
-    if (target) {
-      scrollTop.value = target.scrollTop;
+    if (!target) return;
+    // 使用 RAF 节流
+    if (scrollRAF !== null) {
+      cancelAnimationFrame(scrollRAF);
     }
+    scrollRAF = requestAnimationFrame(function () {
+      scrollTop.value = target.scrollTop;
+      scrollRAF = null;
+    });
   };
   /**
    * 滚动到指定位置
    */
   var scrollTo = function scrollTo(offset) {
-    scrollTop.value = Math.max(0, Math.min(offset, totalHeight.value - containerHeight.value));
+    var maxScroll = Math.max(0, totalHeight.value - containerHeight.value);
+    scrollTop.value = Math.max(0, Math.min(offset, maxScroll));
   };
   /**
    * 滚动到指定索引
@@ -136,14 +196,11 @@ function useVirtualScroll(options) {
     if (index < 0 || index >= itemCount.value) {
       return;
     }
-    var offset = 0;
-    for (var i = 0; i < index; i++) {
-      offset += getItemHeight(i);
-    }
-    scrollTo(offset);
+    scrollTo(getAccumulatedHeight(index));
   };
-  // 数据变化时重置滚动位置
+  // 数据变化时使缓存失效并重置滚动位置
   (0, _vue.watch)(itemCount, function () {
+    heightsCacheValid = false;
     var maxScroll = Math.max(0, totalHeight.value - containerHeight.value);
     if (scrollTop.value > maxScroll) {
       scrollTop.value = maxScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -155,8 +155,8 @@
     "webpack-merge": "^5.0.0",
     "webpackbar": "^5.0.2",
     "@jetlinks-web/constants": "^1.0.9",
-    "@jetlinks-web/utils": "^1.2.12",
-    "@jetlinks-web/hooks": "^1.1.1"
+    "@jetlinks-web/hooks": "^1.1.1",
+    "@jetlinks-web/utils": "^1.2.12"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",