zmdms-webui 2.3.8 → 2.4.0

package/dist/es/canvastable/canvasTable.js

@@ -155,7 +155,6 @@ function CanvasTable(props) {
     }), maxScrollTop = _1.maxScrollTop, maxScrollLeft = _1.maxScrollLeft;
     // 滚动管理（使用预先计算的maxScrollTop和maxScrollLeft）
     var _2 = useTableScroll({
-        canvasRef: canvasRef,
         containerRef: containerRef,
         maxScrollTop: maxScrollTop,
         maxScrollLeft: maxScrollLeft,
@@ -269,9 +268,10 @@ function CanvasTable(props) {
         return processedColumns.filter(function (item) { return !item.key.includes("__"); });
     }, [processedColumns]);
     // Excel导出功能
-    var exportExcel = useExcelExport(processedDataSource, {
+    var exportExcel = useExcelExport(newDataSource, {
         columns: exportColumns,
         isAutoMerge: isAutoMerge,
+        summaryConfig: [],
     });
     // 交互事件处理（使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定）
     var _5 = useTableInteraction({

package/dist/es/canvastable/hooks/useCopyToClipboard.js

@@ -90,28 +90,38 @@ var useCopyToClipboard = function (params) {
         }
         return rows.join("\n");
     });
-    // 处理复制事件
-    var handleCopy = useMemoizedFn(function (e) {
-        var _a;
-        if (!cellSelection)
-            return;
-        var text = getSelectedCellsText();
-        if (text) {
-            e.preventDefault();
-            (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.setData("text/plain", text);
+    // 兼容的复制到剪贴板函数（支持HTTP环境）
+    var copyToClipboard = useMemoizedFn(function (text) {
+        // 优先使用现代 clipboard API（仅在HTTPS/localhost下可用）
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard.writeText(text).catch(function (err) {
+                console.error("Failed to copy with clipboard API:", err);
+            });
+            return true;
+        }
+        // 降级方案：使用 execCommand（支持HTTP环境）
+        try {
+            var textarea = document.createElement("textarea");
+            textarea.value = text;
+            textarea.style.position = "fixed";
+            textarea.style.opacity = "0";
+            textarea.style.pointerEvents = "none";
+            document.body.appendChild(textarea);
+            textarea.select();
+            textarea.setSelectionRange(0, textarea.value.length);
+            var success = document.execCommand("copy");
+            document.body.removeChild(textarea);
+            if (!success) {
+                console.error("Failed to copy using execCommand");
+            }
+            return success;
+        }
+        catch (err) {
+            console.error("Failed to copy:", err);
+            return false;
         }
     });
-    // 监听复制事件
-    useEffect(function () {
-        var container = containerRef.current;
-        if (!container)
-            return;
-        container.addEventListener("copy", handleCopy);
-        return function () {
-            container.removeEventListener("copy", handleCopy);
-        };
-    }, [handleCopy, containerRef]);
-    // 监听键盘事件（Ctrl+C / Cmd+C）- 只在表格容器内部处理
+    // 监听键盘事件（Ctrl+C / Cmd+C）处理复制
     useEffect(function () {
         var container = containerRef.current;
         if (!container)
@@ -125,25 +135,21 @@ var useCopyToClipboard = function (params) {
                 if (isInContainer) {
                     e.preventDefault(); // 阻止默认复制行为
                     var text = getSelectedCellsText();
-                    if (text && navigator.clipboard) {
-                        navigator.clipboard.writeText(text).catch(function (err) {
-                            console.error("Failed to copy:", err);
-                        });
+                    if (text) {
+                        copyToClipboard(text);
                     }
                 }
             }
         };
-        // 监听容器的keydown事件，而不是全局window事件
-        container.addEventListener("keydown", handleKeyDown);
         // 同时也监听全局事件，但会检查焦点位置
         document.addEventListener("keydown", handleKeyDown);
         return function () {
-            container.removeEventListener("keydown", handleKeyDown);
             document.removeEventListener("keydown", handleKeyDown);
         };
-    }, [cellSelection, getSelectedCellsText, containerRef]);
+    }, [cellSelection, getSelectedCellsText, copyToClipboard, containerRef]);
     return {
         getSelectedCellsText: getSelectedCellsText,
+        copyToClipboard: copyToClipboard,
     };
 };
 

package/dist/es/canvastable/hooks/useScroll.js

@@ -79,12 +79,11 @@ var useScrollbarMetrics = function (params) {
  * 表格滚动管理 Hook
  *
  * 处理滚动相关的所有事件：
- * - Canvas 滚轮事件（使用 RAF 节流）
- * - Container 滚轮事件（阻止默认行为）
+ * - Container 滚轮事件（统一处理滚动，支持CellOverlay等覆盖层）
  * - 全局鼠标事件（拖拽滚动条）
  */
 var useTableScroll = function (params) {
-    var canvasRef = params.canvasRef, containerRef = params.containerRef, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, onScroll = params.onScroll;
+    var containerRef = params.containerRef, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, onScroll = params.onScroll;
     var _a = useState({
         scrollLeft: 0,
         scrollTop: 0,
@@ -98,14 +97,23 @@ var useTableScroll = function (params) {
     // 用于节流滚轮事件的refs
     var rafIdRef = useRef(null);
     var pendingDeltaRef = useRef({ deltaX: 0, deltaY: 0 });
-    // 滚轮事件处理（Canvas）- 使用 requestAnimationFrame 节流
+    // 注意：滚轮事件统一在Container级别处理，以确保在CellOverlay等覆盖层上也能正常滚动
+    // 滚轮事件处理（Container）
     useEffect(function () {
-        var canvas = canvasRef.current;
-        if (!canvas)
+        var container = containerRef.current;
+        if (!container)
             return;
-        var handleNativeWheel = function (e) {
+        var handleNativeContainerWheel = function (e) {
+            // 检查事件是否来自过滤弹框，如果是，允许滚动
+            var target = e.target;
+            var isInFilterPopover = target.closest(".canvas-table-filter-popover");
+            if (isInFilterPopover) {
+                // 允许过滤弹框内部滚动
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
+            // 当鼠标在容器内任何位置（包括CellOverlay）时都能滚动
             // 累积滚动增量
             pendingDeltaRef.current.deltaX += e.deltaX;
             pendingDeltaRef.current.deltaY += e.deltaY;
@@ -134,39 +142,18 @@ var useTableScroll = function (params) {
                 });
             });
         };
-        canvas.addEventListener("wheel", handleNativeWheel, { passive: false });
+        container.addEventListener("wheel", handleNativeContainerWheel, {
+            passive: false,
+        });
         return function () {
-            canvas.removeEventListener("wheel", handleNativeWheel);
+            container.removeEventListener("wheel", handleNativeContainerWheel);
             // 清理pending的动画帧
             if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
                 rafIdRef.current = null;
             }
         };
-    }, [maxScrollTop, maxScrollLeft, onScroll, canvasRef, setScrollState]);
-    // 滚轮事件处理（Container）
-    useEffect(function () {
-        var container = containerRef.current;
-        if (!container)
-            return;
-        var handleNativeContainerWheel = function (e) {
-            // 检查事件是否来自过滤弹框，如果是，允许滚动
-            var target = e.target;
-            var isInFilterPopover = target.closest(".canvas-table-filter-popover");
-            if (isInFilterPopover) {
-                // 允许过滤弹框内部滚动
-                return;
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        container.addEventListener("wheel", handleNativeContainerWheel, {
-            passive: false,
-        });
-        return function () {
-            container.removeEventListener("wheel", handleNativeContainerWheel);
-        };
-    }, [containerRef]);
+    }, [containerRef, maxScrollTop, maxScrollLeft, onScroll, setScrollState]);
     // 全局鼠标事件处理（拖拽滚动条）
     useEffect(function () {
         var handleGlobalMouseUp = function () {

package/dist/es/canvastable/hooks/useTableInteraction.js

@@ -1,5 +1,5 @@
 import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { FONT_SIZE, FONT_FAMILY } from '../utils/constants.js';
 import { isTextTruncated } from '../utils/canvasDrawHelpers.js';
@@ -706,10 +706,11 @@ var useTableInteraction = function (params) {
         // 清理状态
         setState(function (prev) {
             var updates = {};
+            // 注释：不再在鼠标离开时停止框选，只在鼠标松开时停止
             // 结束框选
-            if (prev.isSelecting) {
-                updates.isSelecting = false;
-            }
+            // if (prev.isSelecting) {
+            //   updates.isSelecting = false;
+            // }
             // 清理 hover
             if (prev.hoverRowIndex !== null) {
                 updates.hoverRowIndex = null;
@@ -738,14 +739,25 @@ var useTableInteraction = function (params) {
         // 显示右键菜单
         menuShow({ event: e });
     });
-    // 在document上监听拖拽事件，以支持鼠标移出canvas后继续拖拽
+    // 使用ref存储最新的状态和函数引用，避免闭包问题
+    var stateRef = useRef(state);
+    stateRef.current = state;
+    var scrollStateRef = useRef(scrollState);
+    scrollStateRef.current = scrollState;
+    var resizeStateRef = useRef(resizeState);
+    resizeStateRef.current = resizeState;
+    var columnRenderInfosRef = useRef(columnRenderInfos);
+    columnRenderInfosRef.current = columnRenderInfos;
+    // 在document上监听拖拽事件和框选事件，以支持鼠标移出canvas后继续操作
     useEffect(function () {
         var isDragging = scrollState.isDraggingVertical ||
             scrollState.isDraggingHorizontal ||
             (resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing);
-        if (!isDragging)
+        var isSelecting = state.isSelecting;
+        if (!isDragging && !isSelecting)
             return;
         var handleDocumentMouseMove = function (e) {
+            var _a;
             // 获取当前实例的canvas
             var canvas = canvasRef.current;
             if (!canvas)
@@ -753,26 +765,50 @@ var useTableInteraction = function (params) {
             var rect = canvas.getBoundingClientRect();
             var x = e.clientX - rect.left;
             var y = e.clientY - rect.top;
+            // 使用ref获取最新状态，避免闭包问题
+            var currentScrollState = scrollStateRef.current;
+            var currentResizeState = resizeStateRef.current;
+            var currentState = stateRef.current;
             // 处理列宽调整拖拽
-            if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && updateResize) {
+            if ((currentResizeState === null || currentResizeState === void 0 ? void 0 : currentResizeState.isResizing) && updateResize) {
                 updateResize(x);
                 return;
             }
             // 处理垂直滚动条拖拽
-            if (scrollState.isDraggingVertical) {
-                handleVerticalScrollDrag(y - scrollState.dragStartY);
+            if (currentScrollState.isDraggingVertical) {
+                handleVerticalScrollDrag(y - currentScrollState.dragStartY);
                 return;
             }
             // 处理水平滚动条拖拽
-            if (scrollState.isDraggingHorizontal) {
-                handleHorizontalScrollDrag(x - scrollState.dragStartX);
+            if (currentScrollState.isDraggingHorizontal) {
+                handleHorizontalScrollDrag(x - currentScrollState.dragStartX);
+                return;
+            }
+            // 处理框选（在canvas外也能继续框选）
+            if (currentState.isSelecting) {
+                var cell = getCellFromPosition(x, y);
+                if (cell) {
+                    // 检查是否在选择框列，如果是，则不更新框选
+                    var isSelectionColumn = ((_a = columnRenderInfosRef.current[cell.col]) === null || _a === void 0 ? void 0 : _a.column.key) ===
+                        "__selection__";
+                    if (!isSelectionColumn) {
+                        updateSelection(cell);
+                    }
+                }
             }
         };
         var handleDocumentMouseUp = function () {
+            // 使用ref获取最新状态
+            var currentResizeState = resizeStateRef.current;
+            var currentState = stateRef.current;
             // 结束列宽调整
-            if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && endResize) {
+            if ((currentResizeState === null || currentResizeState === void 0 ? void 0 : currentResizeState.isResizing) && endResize) {
                 endResize();
             }
+            // 结束框选
+            if (currentState.isSelecting) {
+                setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: false })); });
+            }
             setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: false, isDraggingHorizontal: false })); });
         };
         document.addEventListener("mousemove", handleDocumentMouseMove);
@@ -781,16 +817,16 @@ var useTableInteraction = function (params) {
             document.removeEventListener("mousemove", handleDocumentMouseMove);
             document.removeEventListener("mouseup", handleDocumentMouseUp);
         };
+        // 优化：减少依赖项，避免频繁重注册事件监听器
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         scrollState.isDraggingVertical,
         scrollState.isDraggingHorizontal,
         resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing,
-        updateResize,
-        endResize,
-        handleVerticalScrollDrag,
-        handleHorizontalScrollDrag,
-        canvasRef,
+        state.isSelecting,
+        // 移除函数依赖，通过 useMemoizedFn 和 useRef 来稳定引用
+        // updateResize, endResize, handleVerticalScrollDrag, handleHorizontalScrollDrag,
+        // updateSelection, setState, getCellFromPosition, columnRenderInfos,
     ]);
     return {
         handleCanvasMouseDown: handleCanvasMouseDown,

package/dist/es/canvastable/hooks/useTableRender.js

@@ -1,4 +1,4 @@
-import { useMemo, isValidElement, useEffect } from 'react';
+import { useRef, useMemo, isValidElement, useEffect } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { IS_SUMMARY } from '../../table/constant.js';
 import '../../_virtual/_tslib.js';
@@ -19,6 +19,13 @@ import { calculateSelectionState, calculateIconArea } from '../utils/interaction
  * 表格渲染 Hook
  */
 var useTableRender = function (params) {
+    // 添加节流机制，避免频繁重绘
+    var rafIdRef = useRef(null);
+    var isDrawingRef = useRef(false);
+    // 内存优化：缓存上次的渲染参数，避免不必要的重绘
+    var lastRenderParamsRef = useRef("");
+    // 内存优化：缓存Canvas context，避免重复获取
+    var canvasContextRef = useRef(null);
     var canvasRef = params.canvasRef, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, columns = params.columns, state = params.state, scrollState = params.scrollState, rowSelection = params.rowSelection, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, baseHeaderHeight = params.baseHeaderHeight, rowHeight = params.rowHeight, bordered = params.bordered, striped = params.striped, _a = params.headerAlign, headerAlign = _a === void 0 ? "center" : _a, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, getRowKey = params.getRowKey, resizeState = params.resizeState, getColumnWidth = params.getColumnWidth, _b = params.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _b === void 0 ? 8 : _b, mergeCellMap = params.mergeCellMap, _c = params.hasSummaryRow, hasSummaryRow = _c === void 0 ? false : _c, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _d = params.summaryFixed, summaryFixed = _d === void 0 ? false : _d;
     // 判断是否是多级表头
     var maxDepth = useMemo(function () { return getMaxDepth(columns); }, [columns]);
@@ -1323,157 +1330,245 @@ var useTableRender = function (params) {
             renderBorder(true);
         }
     });
-    // 绘制表格
-    var drawTable = useMemoizedFn(function () {
-        var canvas = canvasRef.current;
-        if (!canvas)
-            return;
-        var ctx = canvas.getContext("2d");
-        if (!ctx)
-            return;
-        // 设置 canvas 尺寸
-        var displayWidth = containerWidth;
-        var displayHeight = containerHeight;
-        canvas.width = displayWidth * dpr;
-        canvas.height = displayHeight * dpr;
-        canvas.style.width = "".concat(displayWidth, "px");
-        canvas.style.height = "".concat(displayHeight, "px");
-        ctx.scale(dpr, dpr);
-        // 优化文字渲染质量，防止模糊
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = "high";
-        // 清空画布
-        ctx.clearRect(0, 0, displayWidth, displayHeight);
-        // 绘制背景
-        ctx.fillStyle = COLORS.white;
-        ctx.fillRect(0, 0, displayWidth, displayHeight);
-        // 计算固定行的数量（支持多种配置方式）
-        var fixedTopRowsCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
-        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
-        // 计算固定行占用的高度
-        var fixedTopRowsHeight = fixedTopRowsCount * rowHeight;
-        var fixedBottomRowsHeight = fixedBottomRowsCount * rowHeight;
-        var fixedSummaryRowHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-        // 计算可视区域的数据区域高度（不包括表头、固定行和固定合计行）
-        var dataAreaHeight = displayHeight -
-            headerHeight -
-            fixedTopRowsHeight -
-            fixedBottomRowsHeight -
-            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-            fixedSummaryRowHeight;
-        // 计算可视区域（从固定行之后开始）
-        var scrollStartRow = fixedTopRowsCount + Math.floor(scrollState.scrollTop / rowHeight);
-        var scrollEndRow = Math.min(fixedTopRowsCount +
-            Math.ceil((scrollState.scrollTop + dataAreaHeight) / rowHeight), processedDataSource.length -
-            fixedBottomRowsCount -
-            (summaryFixed && hasSummaryRow ? 1 : 0) // 如果合计行固定，需要排除它
-        );
-        // 关键修复：向前扩展渲染范围，检查是否有合并单元格延伸到可视区域
-        // 策略：对每一列独立检查，找到该列最靠前的需要渲染的主合并单元格
-        if (mergeCellMap && scrollStartRow > fixedTopRowsCount) {
-            var originalStartRow = scrollStartRow;
-            var minStartRow = scrollStartRow;
-            // 对每一列独立检查
-            for (var colIndex = 0; colIndex < columnRenderInfos.length; colIndex++) {
-                // 向前查找这一列的主合并单元格，最多向前查找20行
-                for (var checkRow = originalStartRow - 1; checkRow >= fixedTopRowsCount && checkRow >= originalStartRow - 20; checkRow--) {
-                    var mergeCellKey = "".concat(checkRow, "-").concat(colIndex);
-                    var mergeInfo = mergeCellMap.get(mergeCellKey);
-                    // 如果找到主单元格（不是被合并的单元格）
-                    if (mergeInfo && !mergeInfo.skip && mergeInfo.rowSpan > 1) {
-                        // 计算合并单元格的底部行索引
-                        var mergeEndRow = checkRow + mergeInfo.rowSpan - 1;
-                        // 如果这个合并单元格延伸到可视区域
-                        if (mergeEndRow >= originalStartRow) {
-                            // 更新最小起始行
-                            minStartRow = Math.min(minStartRow, checkRow);
+    // 绘制表格核心函数
+    var drawTableCore = useMemoizedFn(function () {
+        try {
+            var canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            // 防止重复绘制
+            if (isDrawingRef.current)
+                return;
+            isDrawingRef.current = true;
+            // 内存优化：复用context对象
+            var ctx_1 = canvasContextRef.current;
+            if (!ctx_1 || ctx_1.canvas !== canvas) {
+                ctx_1 = canvas.getContext("2d");
+                if (!ctx_1) {
+                    isDrawingRef.current = false;
+                    return;
+                }
+                canvasContextRef.current = ctx_1;
+            }
+            // 性能优化：检查是否需要重绘（基于关键参数hash）
+            var renderParamsHash = JSON.stringify({
+                width: containerWidth,
+                height: containerHeight,
+                scrollTop: scrollState.scrollTop,
+                scrollLeft: scrollState.scrollLeft,
+                dataLength: processedDataSource.length,
+                columnsLength: columnRenderInfos.length,
+                hoverRow: state.hoverRowIndex,
+                selection: state.cellSelection,
+                resizing: resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing,
+            });
+            // 如果关键参数没有变化，跳过重绘
+            if (lastRenderParamsRef.current === renderParamsHash) {
+                isDrawingRef.current = false;
+                return;
+            }
+            lastRenderParamsRef.current = renderParamsHash;
+            // 设置 canvas 尺寸
+            var displayWidth_1 = containerWidth;
+            var displayHeight_1 = containerHeight;
+            canvas.width = displayWidth_1 * dpr;
+            canvas.height = displayHeight_1 * dpr;
+            canvas.style.width = "".concat(displayWidth_1, "px");
+            canvas.style.height = "".concat(displayHeight_1, "px");
+            ctx_1.scale(dpr, dpr);
+            // 优化文字渲染质量，防止模糊
+            ctx_1.imageSmoothingEnabled = true;
+            ctx_1.imageSmoothingQuality = "high";
+            // 清空画布
+            ctx_1.clearRect(0, 0, displayWidth_1, displayHeight_1);
+            // 绘制背景
+            ctx_1.fillStyle = COLORS.white;
+            ctx_1.fillRect(0, 0, displayWidth_1, displayHeight_1);
+            // 计算固定行的数量（支持多种配置方式）
+            var fixedTopRowsCount_1 = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
+            var fixedBottomRowsCount_1 = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
+            // 计算固定行占用的高度
+            var fixedTopRowsHeight = fixedTopRowsCount_1 * rowHeight;
+            var fixedBottomRowsHeight = fixedBottomRowsCount_1 * rowHeight;
+            var fixedSummaryRowHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+            // 计算可视区域的数据区域高度（不包括表头、固定行和固定合计行）
+            var dataAreaHeight = displayHeight_1 -
+                headerHeight -
+                fixedTopRowsHeight -
+                fixedBottomRowsHeight -
+                (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                fixedSummaryRowHeight;
+            // 计算可视区域（从固定行之后开始）
+            var scrollStartRow_1 = fixedTopRowsCount_1 + Math.floor(scrollState.scrollTop / rowHeight);
+            var scrollEndRow_1 = Math.min(fixedTopRowsCount_1 +
+                Math.ceil((scrollState.scrollTop + dataAreaHeight) / rowHeight), processedDataSource.length -
+                fixedBottomRowsCount_1 -
+                (summaryFixed && hasSummaryRow ? 1 : 0) // 如果合计行固定，需要排除它
+            );
+            // 关键修复：向前扩展渲染范围，检查是否有合并单元格延伸到可视区域
+            // 策略：对每一列独立检查，找到该列最靠前的需要渲染的主合并单元格
+            if (mergeCellMap && scrollStartRow_1 > fixedTopRowsCount_1) {
+                var originalStartRow = scrollStartRow_1;
+                var minStartRow = scrollStartRow_1;
+                // 对每一列独立检查
+                for (var colIndex = 0; colIndex < columnRenderInfos.length; colIndex++) {
+                    // 向前查找这一列的主合并单元格，最多向前查找20行
+                    for (var checkRow = originalStartRow - 1; checkRow >= fixedTopRowsCount_1 && checkRow >= originalStartRow - 20; checkRow--) {
+                        var mergeCellKey = "".concat(checkRow, "-").concat(colIndex);
+                        var mergeInfo = mergeCellMap.get(mergeCellKey);
+                        // 如果找到主单元格（不是被合并的单元格）
+                        if (mergeInfo && !mergeInfo.skip && mergeInfo.rowSpan > 1) {
+                            // 计算合并单元格的底部行索引
+                            var mergeEndRow = checkRow + mergeInfo.rowSpan - 1;
+                            // 如果这个合并单元格延伸到可视区域
+                            if (mergeEndRow >= originalStartRow) {
+                                // 更新最小起始行
+                                minStartRow = Math.min(minStartRow, checkRow);
+                            }
+                            // 找到这一列的主单元格后，停止向前查找该列
+                            break;
                         }
-                        // 找到这一列的主单元格后，停止向前查找该列
-                        break;
+                        // 如果是skip的单元格或没有合并信息，继续向前查找
+                        // 因为主单元格可能在更前面
                     }
-                    // 如果是skip的单元格或没有合并信息，继续向前查找
-                    // 因为主单元格可能在更前面
                 }
+                scrollStartRow_1 = minStartRow;
             }
-            scrollStartRow = minStartRow;
-        }
-        // 1. 绘制可滚动区域的数据行（包括边框）
-        renderWithFixedLayer(ctx, 
-        // 渲染行内容
-        function (onlyFixed) {
-            for (var i = scrollStartRow; i < scrollEndRow; i++) {
-                drawRow(ctx, i, displayWidth, displayHeight, onlyFixed);
-            }
-        }, 
-        // 渲染边框
-        function (onlyFixed) {
-            drawBorders(ctx, scrollStartRow, scrollEndRow, displayWidth, displayHeight, onlyFixed);
-        });
-        // 2. 绘制固定的顶部行（如果有）
-        if (fixedTopRowsCount > 0) {
-            ctx.save();
-            renderWithFixedLayer(ctx, 
+            // 1. 绘制可滚动区域的数据行（包括边框）
+            renderWithFixedLayer(ctx_1, 
             // 渲染行内容
             function (onlyFixed) {
-                for (var i = 0; i < fixedTopRowsCount; i++) {
-                    drawFixedTopRow(ctx, i, displayWidth, displayHeight, onlyFixed);
+                for (var i = scrollStartRow_1; i < scrollEndRow_1; i++) {
+                    drawRow(ctx_1, i, displayWidth_1, displayHeight_1, onlyFixed);
                 }
             }, 
             // 渲染边框
             function (onlyFixed) {
-                drawFixedTopRowsBorder(ctx, fixedTopRowsCount, displayWidth, displayHeight, onlyFixed);
+                drawBorders(ctx_1, scrollStartRow_1, scrollEndRow_1, displayWidth_1, displayHeight_1, onlyFixed);
             });
-            ctx.restore();
+            // 2. 绘制固定的顶部行（如果有）
+            if (fixedTopRowsCount_1 > 0) {
+                ctx_1.save();
+                renderWithFixedLayer(ctx_1, 
+                // 渲染行内容
+                function (onlyFixed) {
+                    for (var i = 0; i < fixedTopRowsCount_1; i++) {
+                        drawFixedTopRow(ctx_1, i, displayWidth_1, displayHeight_1, onlyFixed);
+                    }
+                }, 
+                // 渲染边框
+                function (onlyFixed) {
+                    drawFixedTopRowsBorder(ctx_1, fixedTopRowsCount_1, displayWidth_1, displayHeight_1, onlyFixed);
+                });
+                ctx_1.restore();
+            }
+            // 3. 绘制固定的底部行（如果有，不包括合计行）
+            if (fixedBottomRowsCount_1 > 0) {
+                ctx_1.save();
+                var bottomRowsStartIndex_1 = processedDataSource.length -
+                    fixedBottomRowsCount_1 -
+                    (summaryFixed && hasSummaryRow ? 1 : 0);
+                renderWithFixedLayer(ctx_1, 
+                // 渲染行内容
+                function (onlyFixed) {
+                    for (var i = 0; i < fixedBottomRowsCount_1; i++) {
+                        var rowIndex = bottomRowsStartIndex_1 + i;
+                        drawFixedBottomRow(ctx_1, rowIndex, i, displayWidth_1, displayHeight_1, onlyFixed);
+                    }
+                }, 
+                // 渲染边框
+                function (onlyFixed) {
+                    drawFixedBottomRowsBorder(ctx_1, fixedBottomRowsCount_1, displayWidth_1, displayHeight_1, onlyFixed);
+                });
+                ctx_1.restore();
+            }
+            // 7. 绘制固定列阴影
+            drawFixedColumns(ctx_1, scrollStartRow_1, scrollEndRow_1, displayWidth_1, displayHeight_1);
+            // 4. 绘制固定合计行（如果启用）
+            if (summaryFixed && hasSummaryRow) {
+                var summaryRowIndex_1 = processedDataSource.length - 1;
+                var summaryRowY_1 = displayHeight_1 -
+                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                    rowHeight;
+                ctx_1.save();
+                renderWithFixedLayer(ctx_1, 
+                // 渲染行内容
+                function (onlyFixed) {
+                    drawFixedSummaryRow(ctx_1, summaryRowIndex_1, summaryRowY_1, displayWidth_1, displayHeight_1, onlyFixed);
+                }, 
+                // 渲染边框
+                function (onlyFixed) {
+                    drawFixedSummaryRowBorder(ctx_1, summaryRowIndex_1, summaryRowY_1, displayWidth_1, displayHeight_1, onlyFixed);
+                });
+                ctx_1.restore();
+            }
+            // 6. 绘制表头（最后绘制，确保始终在最上层，不会被覆盖）
+            drawHeader(ctx_1, displayWidth_1, displayHeight_1);
+            // 绘制滚动条（最后绘制，在表头之上）
+            drawScrollbars(ctx_1, displayWidth_1, displayHeight_1);
+            // 绘制框选区域
+            if (state.cellSelection) {
+                drawCellSelection(ctx_1, displayWidth_1, displayHeight_1);
+            }
+            // 重置绘制标志
+            isDrawingRef.current = false;
         }
-        // 3. 绘制固定的底部行（如果有，不包括合计行）
-        if (fixedBottomRowsCount > 0) {
-            ctx.save();
-            var bottomRowsStartIndex_1 = processedDataSource.length -
-                fixedBottomRowsCount -
-                (summaryFixed && hasSummaryRow ? 1 : 0);
-            renderWithFixedLayer(ctx, 
-            // 渲染行内容
-            function (onlyFixed) {
-                for (var i = 0; i < fixedBottomRowsCount; i++) {
-                    var rowIndex = bottomRowsStartIndex_1 + i;
-                    drawFixedBottomRow(ctx, rowIndex, i, displayWidth, displayHeight, onlyFixed);
+        catch (error) {
+            // 错误边界：捕获渲染异常，防止组件崩溃
+            console.error("CanvasTable: 渲染过程中发生异常:", error);
+            // 重置状态，防止卡死
+            isDrawingRef.current = false;
+            // 清理可能的异常状态
+            try {
+                var canvas = canvasRef.current;
+                if (canvas) {
+                    var ctx = canvas.getContext("2d");
+                    if (ctx) {
+                        // 清空画布，显示错误状态
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        ctx.fillStyle = "#f5f5f5";
+                        ctx.fillRect(0, 0, canvas.width, canvas.height);
+                        // 显示错误提示
+                        ctx.fillStyle = "#ff4d4f";
+                        ctx.font = "14px Arial";
+                        ctx.textAlign = "center";
+                        ctx.fillText("表格渲染异常，请检查数据或刷新页面", canvas.width / 2, canvas.height / 2);
+                    }
                 }
-            }, 
-            // 渲染边框
-            function (onlyFixed) {
-                drawFixedBottomRowsBorder(ctx, fixedBottomRowsCount, displayWidth, displayHeight, onlyFixed);
-            });
-            ctx.restore();
-        }
-        // 7. 绘制固定列阴影
-        drawFixedColumns(ctx, scrollStartRow, scrollEndRow, displayWidth, displayHeight);
-        // 4. 绘制固定合计行（如果启用）
-        if (summaryFixed && hasSummaryRow) {
-            var summaryRowIndex_1 = processedDataSource.length - 1;
-            var summaryRowY_1 = displayHeight -
-                (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-                rowHeight;
-            ctx.save();
-            renderWithFixedLayer(ctx, 
-            // 渲染行内容
-            function (onlyFixed) {
-                drawFixedSummaryRow(ctx, summaryRowIndex_1, summaryRowY_1, displayWidth, displayHeight, onlyFixed);
-            }, 
-            // 渲染边框
-            function (onlyFixed) {
-                drawFixedSummaryRowBorder(ctx, summaryRowIndex_1, summaryRowY_1, displayWidth, displayHeight, onlyFixed);
-            });
-            ctx.restore();
+            }
+            catch (fallbackError) {
+                console.error("CanvasTable: 错误恢复失败:", fallbackError);
+            }
+            // 可以触发错误回调，通知外部组件
+            // props.onRenderError?.(error);
         }
-        // 6. 绘制表头（最后绘制，确保始终在最上层，不会被覆盖）
-        drawHeader(ctx, displayWidth, displayHeight);
-        // 绘制滚动条（最后绘制，在表头之上）
-        drawScrollbars(ctx, displayWidth, displayHeight);
-        // 绘制框选区域
-        if (state.cellSelection) {
-            drawCellSelection(ctx, displayWidth, displayHeight);
+    });
+    // 节流的绘制函数，使用 requestAnimationFrame
+    var drawTable = useMemoizedFn(function () {
+        // 如果已经有pending的绘制请求，取消之前的
+        if (rafIdRef.current !== null) {
+            cancelAnimationFrame(rafIdRef.current);
         }
+        // 使用 requestAnimationFrame 进行节流
+        rafIdRef.current = requestAnimationFrame(function () {
+            drawTableCore();
+            rafIdRef.current = null;
+        });
     });
+    // 清理函数 - 释放资源
+    useEffect(function () {
+        return function () {
+            // 清理动画帧
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            // 清理缓存的引用，释放内存
+            canvasContextRef.current = null;
+            lastRenderParamsRef.current = "";
+            isDrawingRef.current = false;
+        };
+    }, []);
     // 监听变化，自动重绘
     useEffect(function () {
         drawTable();
@@ -1493,7 +1588,9 @@ var useTableRender = function (params) {
         columnRenderInfos,
         bordered,
         striped,
-        resizeState,
+        resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing,
+        resizeState === null || resizeState === void 0 ? void 0 : resizeState.resizingColumnIndex,
+        resizeState === null || resizeState === void 0 ? void 0 : resizeState.hoverResizeColumnIndex,
         drawTable,
     ]);
     return {

package/dist/es/table/hooks.js

@@ -390,7 +390,9 @@ var useNumKeys = function (columns) {
     var numKeys = useMemo(function () {
         var leafColumns = getLeafColumns(columns);
         return Array.from(new Set(leafColumns
-            .filter(function (item) { return item.precision !== undefined; })
+            .filter(function (item) {
+            return item.precision !== undefined || item.thousand !== undefined;
+        })
             .map(function (item) { return item.key; })));
     }, [columns]);
     return numKeys;
@@ -415,30 +417,66 @@ function useAutoMerge(dataSource, columns, _a) {
             .filter(function (item) { return item.isDimensionSum; })
             .map(function (item) { return item.key; });
     }, [columns]);
-    var newDataSource = useMemo(function () {
-        if (!isAutoMerge)
-            return dataSource;
-        else {
-            // 多字段合并
-            if (!mergeKeys)
-                return dataSource;
-            else {
-                var newDataSource_2 = flattenRecordsOptimized(__spreadArray([], (dataSource || []), true), mergeKeys, dimensionSummaryKeys, summaryKeys, isDimensionDynamic, order, dimensionCustomSumKeys, columns // 添加 columns 参数，支持自定义排序
-                );
-                return newDataSource_2;
+    // 添加性能监控和异常处理
+    var processDataWithOptimization = useCallback(function (sourceData, mergeKeysParam) {
+        try {
+            // 数据有效性检查
+            if (!Array.isArray(sourceData)) {
+                console.warn("CanvasTable: 数据源不是数组类型");
+                return [];
+            }
+            if (!Array.isArray(mergeKeysParam) || mergeKeysParam.length === 0) {
+                console.warn("CanvasTable: 合并字段配置无效");
+                return sourceData;
+            }
+            // 性能检查：数据量过大时启用优化策略
+            var dataSize = sourceData.length;
+            var mergeKeysCount = mergeKeysParam.length;
+            var complexity = dataSize * mergeKeysCount;
+            // 时间复杂度过高时的优化策略
+            if (complexity > 10000) {
+                console.warn("CanvasTable: \u68C0\u6D4B\u5230\u9AD8\u590D\u6742\u5EA6\u6570\u636E\u5904\u7406 (".concat(complexity, ")\uFF0C\u5EFA\u8BAE\u4F18\u5316\u6570\u636E\u91CF\u6216\u51CF\u5C11\u5408\u5E76\u5B57\u6BB5"));
+                // 对于超大数据，可以考虑分页处理或虚拟化
+                if (dataSize > 5000) {
+                    console.warn("CanvasTable: \u6570\u636E\u91CF\u8FC7\u5927 (".concat(dataSize, " \u884C)\uFF0C\u6027\u80FD\u53EF\u80FD\u53D7\u5F71\u54CD"));
+                }
+            }
+            var startTime = performance.now();
+            var result = flattenRecordsOptimized(__spreadArray([], sourceData, true), mergeKeysParam, dimensionSummaryKeys, summaryKeys, isDimensionDynamic, order, dimensionCustomSumKeys, columns // 添加 columns 参数，支持自定义排序
+            );
+            var endTime = performance.now();
+            var duration = endTime - startTime;
+            // 性能监控：超过阈值时警告
+            if (duration > 100) {
+                console.warn("CanvasTable: \u6570\u636E\u5904\u7406\u8017\u65F6\u8F83\u957F (".concat(duration.toFixed(2), "ms)\uFF0C\u5EFA\u8BAE\u4F18\u5316"));
             }
+            // 结果有效性检查
+            if (!Array.isArray(result)) {
+                console.error("CanvasTable: 数据处理结果异常");
+                return sourceData; // 降级返回原始数据
+            }
+            return result;
+        }
+        catch (error) {
+            console.error("CanvasTable: 数据处理过程中发生异常:", error);
+            // 异常降级：返回原始数据，避免组件崩溃
+            return sourceData;
         }
     }, [
-        dataSource,
-        isAutoMerge,
-        mergeKeys,
         dimensionSummaryKeys,
         summaryKeys,
         isDimensionDynamic,
         order,
         dimensionCustomSumKeys,
-        columns, // 添加 columns 依赖
+        columns,
     ]);
+    var newDataSource = useMemo(function () {
+        if (!isAutoMerge)
+            return dataSource;
+        if (!mergeKeys)
+            return dataSource;
+        return processDataWithOptimization(dataSource || [], mergeKeys);
+    }, [dataSource, isAutoMerge, mergeKeys, processDataWithOptimization]);
     var newColumns = useMemo(function () {
         var _columns = columns;
         // 递归处理多级表头，自动补充render/合并/编辑等逻辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmdms-webui",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",