@jetlinks-web/components 3.2.1 → 3.2.3

package/es/VirtualTable/useVirtualScroll.js

@@ -1,6 +1,11 @@
-import { computed, ref, watch, isRef } from 'vue';
+import { computed, watch, isRef, shallowRef } from 'vue';
 /**
- * 虚拟滚动 Hook
+ * 高性能虚拟滚动 Hook
+ * 优化点：
+ * 1. 使用累积高度缓存，避免重复计算
+ * 2. 使用二分查找快速定位索引
+ * 3. 使用 shallowRef 减少响应式开销
+ * 4. 滚动节流减少计算频率
  */
 export function useVirtualScroll(options) {
   var itemCount = options.itemCount,
@@ -11,6 +16,9 @@ export 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 = computed(function () {
     if (isRef(containerHeightOption)) {
@@ -18,23 +26,30 @@ export function useVirtualScroll(options) {
     }
     return containerHeightOption;
   });
-  // 滚动位置
-  var scrollTop = ref(0);
-  // 动态行高缓存
-  var itemHeights = ref(new Map());
+  // 滚动位置 - 使用 shallowRef 减少响应式开销
+  var scrollTop = shallowRef(0);
+  // 动态行高缓存（仅在非固定高度模式使用）
+  var itemHeights = shallowRef(new Map());
+  // 累积高度缓存 - 用于二分查找
+  var accumulatedHeights = 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;
   };
   /**
    * 设置行高（用于动态测量）
@@ -42,65 +57,101 @@ export 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 = 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 = 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 = 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 = 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);
   });
   /**
    * 可见行数
@@ -108,20 +159,29 @@ export function useVirtualScroll(options) {
   var visibleCount = 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));
   };
   /**
    * 滚动到指定索引
@@ -130,14 +190,11 @@ export 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));
   };
-  // 数据变化时重置滚动位置
+  // 数据变化时使缓存失效并重置滚动位置
   watch(itemCount, function () {
+    heightsCacheValid = false;
     var maxScroll = Math.max(0, totalHeight.value - containerHeight.value);
     if (scrollTop.value > maxScroll) {
       scrollTop.value = maxScroll;

package/lib/EditTable/CellRender.js

@@ -1,3 +1,9 @@
+function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) {
+    return lhs;
+}
+else {
+    return rhsFn();
+} }
 function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
     const op = ops[i];
     const fn = ops[i + 1];
@@ -15,10 +21,15 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
     }
 } return value; }
 /* Analyzed bindings: {} */
-import { defineComponent, h, shallowRef, } from 'vue';
+import { defineComponent, h, shallowRef, markRaw } from 'vue';
 /**
- * CellRender - 优化的单元格渲染组件
- * 使用 shallowRef 和手动更新检查来避免不必要的重渲染
+ * CellRender - 高性能单元格渲染组件
+ *
+ * 优化点：
+ * 1. 使用 shallowRef 避免深度响应式
+ * 2. 缓存渲染结果，避免不必要的重渲染
+ * 3. 使用 markRaw 标记渲染结果，避免被 Vue 代理
+ * 4. 智能对比 record 的 key 变化
  */
 const __sfc_main__ = defineComponent({
     name: "CellRender",
@@ -35,43 +46,63 @@ const __sfc_main__ = defineComponent({
         index: {
             type: Number,
             required: true
+        },
+        // 可选：指定用于对比的 key 字段
+        rowKey: {
+            type: String,
+            default: 'id'
         }
     },
     setup(props) {
         // 使用 shallowRef 避免深度响应式
         const cachedResult = shallowRef(null);
-        const lastValue = shallowRef(undefined);
-        const lastRecordId = shallowRef(undefined);
-        // 手动检查是否需要重新渲染
-        const shouldUpdate = () => {
-            // 检查 value 是否变化
-            if (props.value !== lastValue.value) {
-                return true;
-            }
-            // 检查 record 的关键属性是否变化（假设有 id 或 key）
-            const currentRecordId = _optionalChain([(props.record), 'optionalAccess', _ => _.id]) || _optionalChain([(props.record), 'optionalAccess', _2 => _2.key]);
-            if (currentRecordId !== lastRecordId.value) {
-                return true;
+        // 缓存上次渲染的关键信息
+        let lastValue = Symbol('initial');
+        let lastRecordKey = Symbol('initial');
+        let lastIndex = -1;
+        // 获取 record 的唯一标识
+        const getRecordKey = (record) => {
+            return _nullishCoalesce(_nullishCoalesce(_optionalChain([record, 'optionalAccess', _ => _[props.rowKey]]), () => (_optionalChain([record, 'optionalAccess', _2 => _2.key]))), () => (_optionalChain([record, 'optionalAccess', _3 => _3.__dataIndex])));
+        };
+        // 检查是否需要重新渲染
+        const shouldRerender = () => {
+            const currentRecordKey = getRecordKey(props.record);
+            // 快速检查：index 和 key 都没变，value 也没变
+            if (lastIndex === props.index &&
+                lastRecordKey === currentRecordKey &&
+                lastValue === props.value) {
+                return false;
             }
-            return false;
+            return true;
         };
-        // 执行渲染函数
-        const render = () => {
-            if (shouldUpdate() || cachedResult.value === null) {
-                lastValue.value = props.value;
-                lastRecordId.value = _optionalChain([(props.record), 'optionalAccess', _3 => _3.id]) || _optionalChain([(props.record), 'optionalAccess', _4 => _4.key]);
-                try {
-                    cachedResult.value = props.renderFn(props.value, props.record, props.index);
-                }
-                catch (error) {
+        // 执行渲染
+        const doRender = () => {
+            if (!shouldRerender() && cachedResult.value !== null) {
+                return cachedResult.value;
+            }
+            // 更新缓存的对比值
+            lastValue = props.value;
+            lastRecordKey = getRecordKey(props.record);
+            lastIndex = props.index;
+            try {
+                const result = props.renderFn(props.value, props.record, props.index);
+                // 使用 markRaw 避免渲染结果被代理
+                cachedResult.value = result != null ? markRaw({ node: result }) : null;
+            }
+            catch (error) {
+                if (import.meta.env.DEV) {
                     console.error('[CellRender] Render error:', error);
-                    cachedResult.value = null;
                 }
+                cachedResult.value = null;
             }
             return cachedResult.value;
         };
         return () => {
-            return h('div', { class: 'cell-render-wrapper' }, [render()]);
+            const result = doRender();
+            return h('div', {
+                class: 'cell-render-wrapper',
+                style: { display: 'contents' } // 避免额外的 DOM 层级影响布局
+            }, _nullishCoalesce(_optionalChain([result, 'optionalAccess', _4 => _4.node]), () => (null)));
         };
     }
 });

package/lib/EditTable/EditTable.js

@@ -454,21 +454,26 @@ const __sfc_main__ = _defineComponent({
                 ]),
                 _createElementVNode("div", _hoisted_2, [
                     _createElementVNode("div", _hoisted_3, [
-                        _createVNode(_unref(VirtualTable), _mergeProps(props, {
+                        _createVNode(_unref(VirtualTable), _mergeProps({
+                            ref_key: "virtualTableRef",
+                            ref: virtualTableRef
+                        }, props, {
                             "data-source": bodyDataSource.value,
                             columns: newColumns.value,
                             scroll: scroll.value,
                             pagination: false,
                             virtual: {
                                 itemHeight: props.cellHeight,
-                                overscan: 1,
+                                overscan: 5,
                                 threshold: props.height / props.cellHeight
                             }
                         }), {
-                            bodyCell: _withCtx(({ column, record }) => [
+                            bodyCell: _withCtx(({ column, record, index }) => [
                                 _renderSlot(_ctx.$slots, column.dataIndex, {
                                     column: column,
-                                    record: record
+                                    record: record,
+                                    index: record.__dataIndex,
+                                    visibleIndex: index
                                 })
                             ]),
                             _: 3 /* FORWARDED */