zmdms-webui 2.6.1 → 2.6.3

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

@@ -1,22 +1,22 @@
-import { useRef, useMemo, isValidElement, useEffect } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { IS_SUMMARY } from '../../table/constant.js';
-import '../../_virtual/_tslib.js';
-import 'lodash/isEqual';
-import '../../node_modules/immutability-helper/index.js';
-import 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { SCROLLBAR_SIZE } from '../utils/constants.js';
 import 'zmdms-utils';
-import '../../node_modules/exceljs/dist/exceljs.min.js';
 import 'dayjs';
-import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, TEXT_PADDING, SCROLLBAR_SIZE, SCROLLBAR_PADDING } from '../utils/constants.js';
-import { drawCheckbox, wrapText, truncateText, drawFilterIcon, drawSortIcon } from '../utils/canvasDrawHelpers.js';
-import { getMaxDepth, flattenHeaders, calculateLayerHeights, getLeafColumns } from '../utils/multiHeaderHelpers.js';
-import { extractCellText } from '../utils/cellHelpers.js';
-import { formatCellValue } from '../utils/formatHelpers.js';
-import { calculateSelectionState, calculateIconArea } from '../utils/interactionHelpers.js';
+import '../../_virtual/_tslib.js';
+import { useMemoizedFn } from 'ahooks';
+import './renderers/BadgeRenderer.js';
+import './renderers/ExpandIconRenderer.js';
+import { HeaderRenderer } from './renderers/HeaderRenderer.js';
+import { DataRowRenderer } from './renderers/DataRowRenderer.js';
+import { FixedRowRenderer } from './renderers/FixedRowRenderer.js';
+import { BorderRenderer } from './renderers/BorderRenderer.js';
+import { SelectionRenderer } from './renderers/SelectionRenderer.js';
+import { ScrollbarRenderer } from './renderers/ScrollbarRenderer.js';
+import { FixedColumnRenderer } from './renderers/FixedColumnRenderer.js';
 
 /**
  * 表格渲染 Hook
+ * 重构版本：使用渲染器模式，职责分离
  */
 var useTableRender = function (params) {
     // 添加节流机制，避免频繁重绘
@@ -26,1342 +26,119 @@ var useTableRender = function (params) {
     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]);
-    var isMultiHeader = maxDepth > 1;
-    // 扁平化多级表头（如果需要）
-    var flattenedHeaderRows = useMemo(function () { return (isMultiHeader ? flattenHeaders(columns) : []); }, [columns, isMultiHeader]);
-    // 计算多级表头每一层的高度（考虑换行）
-    // 使用 baseHeaderHeight 或默认计算出的基础高度
-    var _e = useMemo(function () {
-        var maxDepth = getMaxDepth(columns);
-        // 如果提供了 baseHeaderHeight，使用它；否则根据 headerHeight 和深度计算
-        var baseHeight = baseHeaderHeight ||
-            (maxDepth > 1 ? Math.floor(headerHeight / maxDepth) : headerHeight);
-        return calculateLayerHeights(columns, baseHeight, columnRenderInfos);
-    }, [columns, headerHeight, baseHeaderHeight, columnRenderInfos]), layerHeights = _e.layerHeights, layerStartY = _e.layerStartY;
+    // 初始化渲染器（使用 useMemo 避免重复创建）
+    var renderers = useMemo(function () {
+        return {
+            header: new HeaderRenderer(),
+            dataRow: new DataRowRenderer(),
+            fixedRow: new FixedRowRenderer(),
+            border: new BorderRenderer(),
+            selection: new SelectionRenderer(),
+            scrollbar: new ScrollbarRenderer(),
+            fixedColumn: new FixedColumnRenderer(),
+        };
+    }, []);
+    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, expandable = params.expandable, flattenedData = params.flattenedData;
     var dpr = window.devicePixelRatio || 1;
-    // ==================== 通用辅助函数 ====================
-    /**
-     * 计算固定列的右边界
-     */
-    var calculateFixedColumnsRightEdge = useMemoizedFn(function () {
-        var rightEdge = 0;
-        columnRenderInfos.forEach(function (info, index) {
-            if (info.fixed) {
-                var actualWidth = getColumnWidth ? getColumnWidth(index) : info.width;
-                rightEdge = Math.max(rightEdge, info.fixedLeft + actualWidth);
-            }
-        });
-        return rightEdge;
-    });
     /**
-     * 计算文本X坐标（根据对齐方式）
+     * 通用渲染函数：先绘制非fixed，再绘制fixed（包括边框）
      */
-    var calculateTextX = function (drawX, actualWidth, align, padding) {
-        if (align === void 0) { align = "left"; }
-        if (padding === void 0) { padding = 5; }
-        if (align === "center") {
-            return drawX + actualWidth / 2;
+    var renderWithFixedLayer = useMemoizedFn(function (renderContent, renderBorder) {
+        // 1. 绘制非fixed层
+        renderContent(false);
+        if (bordered && renderBorder) {
+            renderBorder(false);
         }
-        else if (align === "right") {
-            return drawX + actualWidth - padding;
+        // 2. 绘制fixed层（覆盖在非fixed之上）
+        renderContent(true);
+        if (bordered && renderBorder) {
+            renderBorder(true);
         }
-        return drawX + padding;
-    };
+    });
     /**
-     * 设置Canvas文本对齐方式
+     * 计算可视区域的行范围
      */
-    var setTextAlign = function (ctx, align) {
-        if (align === void 0) { align = "left"; }
-        ctx.textAlign = align;
-    };
-    // 绘制角标的辅助函数（三角形标记，类似Excel批注）
-    var drawBadge = useMemoizedFn(function (ctx, badge, cellX, cellY, cellWidth, cellHeight) {
-        var triangleSize = 12; // 三角形边长
-        var position = badge.position || "top-right";
-        var color = badge.color || "#ff4d4f";
-        ctx.fillStyle = color;
-        ctx.beginPath();
-        // 根据位置绘制不同方向的三角形
-        switch (position) {
-            case "top-left":
-                // 左上角三角形
-                ctx.moveTo(cellX, cellY);
-                ctx.lineTo(cellX + triangleSize, cellY);
-                ctx.lineTo(cellX, cellY + triangleSize);
-                break;
-            case "top-right":
-                // 右上角三角形（默认）
-                ctx.moveTo(cellX + cellWidth, cellY);
-                ctx.lineTo(cellX + cellWidth - triangleSize, cellY);
-                ctx.lineTo(cellX + cellWidth, cellY + triangleSize);
-                break;
-            case "bottom-left":
-                // 左下角三角形
-                ctx.moveTo(cellX, cellY + cellHeight);
-                ctx.lineTo(cellX, cellY + cellHeight - triangleSize);
-                ctx.lineTo(cellX + triangleSize, cellY + cellHeight);
-                break;
-            case "bottom-right":
-                // 右下角三角形
-                ctx.moveTo(cellX + cellWidth, cellY + cellHeight);
-                ctx.lineTo(cellX + cellWidth, cellY + cellHeight - triangleSize);
-                ctx.lineTo(cellX + cellWidth - triangleSize, cellY + cellHeight);
-                break;
-        }
-        ctx.closePath();
-        ctx.fill();
-    });
-    // 绘制表头单元格的辅助函数
-    var drawHeaderCell = useMemoizedFn(function (ctx, info, index, displayWidth, displayHeight) {
-        var column = info.column, x = info.x, fixed = info.fixed, fixedLeft = info.fixedLeft;
-        // 使用 getColumnWidth 获取列宽（考虑拖拽时的临时宽度）
-        var width = getColumnWidth ? getColumnWidth(index) : info.width;
-        var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-        // 跳过不在可视区域的列
-        if (!fixed && (drawX + width < 0 || drawX > displayWidth)) {
-            return;
-        }
-        // 绘制表头单元格
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(drawX, 0, width, headerHeight);
-        ctx.clip();
-        // 绘制单元格背景
-        ctx.fillStyle = COLORS.headerBg;
-        ctx.fillRect(drawX, 0, width, headerHeight);
-        // 表头文本
-        ctx.fillStyle = COLORS.text;
-        ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-        ctx.textBaseline = "middle";
-        var textY = headerHeight / 2;
-        // 绘制选择框
-        if (column.key === "__selection__") {
-            // 计算选中状态
-            var selectionState = calculateSelectionState(processedDataSource, state.selectedRowKeys, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
-            // 居中绘制复选框
-            var checkboxX = drawX + width / 2;
-            drawCheckbox(ctx, checkboxX, textY, selectionState.isAllSelected, false, selectionState.isIndeterminate);
-        }
-        else {
-            // 计算图标占用的宽度
-            var iconArea = calculateIconArea(column, width);
-            // 确定表头对齐方式，优先使用列的 headerAlign，其次是全局 headerAlign
-            var columnHeaderAlign = column.headerAlign || headerAlign;
-            // 绘制文本（如果 title 是 React 元素，跳过Canvas渲染，在覆盖层中渲染）
-            if (!isValidElement(column.title)) {
-                var titleText = String(column.title || "");
-                // 根据对齐方式和图标情况设置文本位置
-                var textX_1;
-                var textMaxWidth = void 0;
-                if (iconArea.iconsWidth > 0) {
-                    // 有图标时，根据columnHeaderAlign调整文本位置和最大宽度
-                    if (columnHeaderAlign === "right") {
-                        ctx.textAlign = "right";
-                        textX_1 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
-                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
-                    }
-                    else if (columnHeaderAlign === "center") {
-                        ctx.textAlign = "center";
-                        textX_1 = drawX + (width - iconArea.iconsWidth) / 2;
-                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
-                    }
-                    else {
-                        ctx.textAlign = "left";
-                        textX_1 = drawX + TEXT_PADDING;
-                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
-                    }
-                }
-                else {
-                    // 没有图标时，根据columnHeaderAlign设置对齐方式
-                    if (columnHeaderAlign === "left") {
-                        ctx.textAlign = "left";
-                        textX_1 = drawX + TEXT_PADDING;
-                        textMaxWidth = width - TEXT_PADDING * 2;
-                    }
-                    else if (columnHeaderAlign === "right") {
-                        ctx.textAlign = "right";
-                        textX_1 = drawX + width - TEXT_PADDING;
-                        textMaxWidth = width - TEXT_PADDING * 2;
-                    }
-                    else {
-                        ctx.textAlign = "center";
-                        textX_1 = drawX + width / 2;
-                        textMaxWidth = width - TEXT_PADDING * 2;
-                    }
-                }
-                // 根据 ellipsis 和 wrap 属性处理文本
-                if (column.wrap) {
-                    // 换行显示（支持\n和自动换行）
-                    var lines = wrapText(ctx, titleText, textMaxWidth);
-                    var lineHeight_1 = FONT_SIZE + 5; // 字体大小 + 行间距5px
-                    var startY_1 = textY - ((lines.length - 1) * lineHeight_1) / 2;
-                    lines.forEach(function (line, index) {
-                        var lineY = startY_1 + index * lineHeight_1;
-                        ctx.fillText(line, textX_1, lineY);
-                    });
-                }
-                else {
-                    // 默认截断显示
-                    var truncatedText = truncateText(ctx, titleText, textMaxWidth);
-                    ctx.fillText(truncatedText, textX_1, textY);
-                }
-            }
-            // 绘制筛选图标（最右侧，距离右边5px）
-            if (iconArea.hasFilter) {
-                var iconX = drawX + width - 10; // 右边距5px + 图标中心偏移5px
-                var hasFilterValue = state.filters[column.key] && state.filters[column.key].length > 0;
-                drawFilterIcon(ctx, iconX, textY, hasFilterValue);
-            }
-            // 绘制排序图标（筛选图标左边，间距4px）
-            if (iconArea.hasOrder) {
-                // 如果有筛选：右边距5px + 筛选10px + 间距4px = 19px，所以图标中心在 width - 24
-                // 如果无筛选：右边距5px + 图标中心5px = 10px，所以图标中心在 width - 10
-                var iconX = drawX + width - (iconArea.hasFilter ? 24 : 10);
-                drawSortIcon(ctx, iconX, textY, column.key === state.sortField ? state.sortOrder : null);
-            }
-        }
-        ctx.textAlign = "left"; // 重置对齐方式
-        ctx.restore();
-        // 绘制表头列之间的边框
-        if (bordered) {
-            ctx.strokeStyle = COLORS.border;
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            ctx.moveTo(drawX + width, 0);
-            ctx.lineTo(drawX + width, headerHeight);
-            ctx.stroke();
-        }
-        // 绘制列宽调整手柄（跳过选择框列）
-        if (column.key !== "__selection__" && resizeState) {
-            var isHover = resizeState.hoverResizeColumnIndex === index;
-            var isResizing = resizeState.resizingColumnIndex === index;
-            if (isHover || isResizing) {
-                var handleX = drawX + width - RESIZE_HANDLE_WIDTH / 2;
-                // 绘制调整手柄背景
-                ctx.fillStyle = isResizing ? "#1890ff" : "rgba(24, 144, 255, 0.3)";
-                ctx.fillRect(handleX, 0, RESIZE_HANDLE_WIDTH, headerHeight);
-                // 如果正在拖拽，绘制虚线
-                if (isResizing) {
-                    ctx.strokeStyle = "#1890ff";
-                    ctx.lineWidth = 1;
-                    ctx.setLineDash([4, 4]);
-                    ctx.beginPath();
-                    ctx.moveTo(drawX + width, 0);
-                    ctx.lineTo(drawX + width, displayHeight);
-                    ctx.stroke();
-                    ctx.setLineDash([]);
-                }
-            }
-        }
-    });
-    // 绘制多级表头单元格
-    var drawMultiHeaderCell = useMemoizedFn(function (ctx, headerCell, layerHeight, y, displayWidth, currentDepth, totalCellHeight, // 单元格的总高度（考虑rowSpan）
-    onlyFixed // 是否只绘制fixed列
-    ) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        var column = headerCell.column, colSpan = headerCell.colSpan, rowSpan = headerCell.rowSpan, colIndex = headerCell.colIndex;
-        // 根据列索引计算x位置和宽度，并判断是否是fixed列
-        var x = 0;
-        var width = 0;
-        var isFixed = false;
-        var fixedLeft = 0;
-        var leafColumns = getLeafColumns(columns);
-        // 找到对应的叶子列并计算位置
-        for (var i = 0; i < leafColumns.length; i++) {
-            var leafInfo = columnRenderInfos[i];
-            if (i < colIndex) {
-                x += getColumnWidth ? getColumnWidth(i) : leafInfo.width;
-            }
-            else if (i < colIndex + colSpan) {
-                width += getColumnWidth ? getColumnWidth(i) : leafInfo.width;
-                // 如果跨越的列中有任何一个是fixed的，整个合并单元格都视为fixed
-                if (leafInfo.fixed) {
-                    isFixed = true;
-                    if (i === colIndex) {
-                        fixedLeft = leafInfo.fixedLeft;
-                    }
-                }
-            }
-        }
-        // 根据 onlyFixed 参数过滤要绘制的列
-        if (onlyFixed && !isFixed)
-            return; // 只绘制fixed列时，跳过非fixed列
-        if (!onlyFixed && isFixed)
-            return; // 只绘制非fixed列时，跳过fixed列
-        // 应用横向滚动（fixed列不滚动）
-        var drawX = isFixed ? fixedLeft : x - scrollState.scrollLeft;
-        // 跳过不在可视区域的列（fixed列始终绘制）
-        if (!isFixed && (drawX + width < 0 || drawX > displayWidth)) {
-            return;
-        }
-        // 绘制单元格背景
-        ctx.fillStyle = COLORS.headerBg;
-        ctx.fillRect(drawX, y, width, totalCellHeight);
-        // 绘制边框
-        if (bordered) {
-            ctx.strokeStyle = COLORS.border;
-            ctx.lineWidth = 1;
-            ctx.strokeRect(drawX, y, width, totalCellHeight);
-        }
-        // 判断是否是最末级表头（当前行+rowSpan 是否等于最大深度）
-        var isLastLevel = currentDepth + rowSpan === maxDepth;
-        // 判断是否是特殊列（选择框列、序号列等不需要排序和筛选的列）
-        var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
-        // 绘制单元格内容
-        var textY = y + totalCellHeight / 2;
-        // 绘制选择框（只在第一行显示全选框）
-        if (column.key === "__selection__" && currentDepth === 0) {
-            // 计算选中状态
-            var selectionState = calculateSelectionState(processedDataSource, state.selectedRowKeys, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
-            // 居中绘制复选框
-            var checkboxX = drawX + width / 2;
-            drawCheckbox(ctx, checkboxX, textY, selectionState.isAllSelected, false, selectionState.isIndeterminate);
-        }
-        else {
-            // 绘制文本
-            ctx.fillStyle = COLORS.text;
-            ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-            ctx.textBaseline = "middle";
-            if (!isValidElement(column.title)) {
-                var titleText = String(column.title || "");
-                // 计算图标占用的宽度（仅在最末级表头且非特殊列时显示）
-                var shouldShowIcons = isLastLevel && !isSpecialColumn;
-                var iconArea = shouldShowIcons
-                    ? calculateIconArea(column, width)
-                    : { hasOrder: false, hasFilter: false, iconsWidth: 0 };
-                // 确定表头对齐方式，优先使用列的 headerAlign，其次是全局 headerAlign
-                var columnHeaderAlign = column.headerAlign || headerAlign;
-                // 如果是最末级且有图标，需要调整对齐方式
-                if (isLastLevel && iconArea.iconsWidth > 0) {
-                    // 有图标时，根据columnHeaderAlign调整文本位置和最大宽度
-                    var textX_2;
-                    var textMaxWidth = void 0;
-                    if (columnHeaderAlign === "right") {
-                        ctx.textAlign = "right";
-                        textX_2 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
-                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
-                    }
-                    else if (columnHeaderAlign === "center") {
-                        ctx.textAlign = "center";
-                        textX_2 = drawX + (width - iconArea.iconsWidth) / 2;
-                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
-                    }
-                    else {
-                        ctx.textAlign = "left";
-                        textX_2 = drawX + TEXT_PADDING;
-                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
-                    }
-                    // 根据 wrap 属性处理文本
-                    if (column.wrap) {
-                        // 换行显示（支持\n和自动换行）
-                        var lines = wrapText(ctx, titleText, textMaxWidth);
-                        var lineHeight_2 = FONT_SIZE + 5; // 字体大小 + 行间距5px
-                        var startY_2 = textY - ((lines.length - 1) * lineHeight_2) / 2;
-                        lines.forEach(function (line, index) {
-                            var lineY = startY_2 + index * lineHeight_2;
-                            ctx.fillText(line, textX_2, lineY);
-                        });
-                    }
-                    else {
-                        var truncated = truncateText(ctx, titleText, textMaxWidth);
-                        ctx.fillText(truncated, textX_2, textY);
-                    }
-                }
-                else {
-                    // 没有图标时，根据columnHeaderAlign设置对齐方式
-                    var textX_3;
-                    if (columnHeaderAlign === "left") {
-                        ctx.textAlign = "left";
-                        textX_3 = drawX + TEXT_PADDING;
-                    }
-                    else if (columnHeaderAlign === "right") {
-                        ctx.textAlign = "right";
-                        textX_3 = drawX + width - TEXT_PADDING;
-                    }
-                    else {
-                        ctx.textAlign = "center";
-                        textX_3 = drawX + width / 2;
-                    }
-                    // 根据 wrap 属性处理文本
-                    if (column.wrap) {
-                        // 换行显示（支持\n和自动换行）
-                        var lines = wrapText(ctx, titleText, width - TEXT_PADDING * 2); // 左右各TEXT_PADDING
-                        var lineHeight_3 = FONT_SIZE + 5; // 字体大小 + 行间距5px
-                        var startY_3 = textY - ((lines.length - 1) * lineHeight_3) / 2;
-                        lines.forEach(function (line, index) {
-                            var lineY = startY_3 + index * lineHeight_3;
-                            ctx.fillText(line, textX_3, lineY);
-                        });
-                    }
-                    else {
-                        var truncated = truncateText(ctx, titleText, width - TEXT_PADDING * 2); // 左右各TEXT_PADDING
-                        ctx.fillText(truncated, textX_3, textY);
-                    }
-                }
-                // 绘制筛选图标（仅在最末级表头显示）
-                if (iconArea.hasFilter) {
-                    var iconX = drawX + width - 10; // 右边距5px + 图标中心偏移5px
-                    var hasFilterValue = state.filters[column.key] && state.filters[column.key].length > 0;
-                    drawFilterIcon(ctx, iconX, textY, hasFilterValue);
-                }
-                // 绘制排序图标（仅在最末级表头显示）
-                if (iconArea.hasOrder) {
-                    // 如果有筛选：右边距5px + 筛选10px + 间距4px = 19px，所以图标中心在 width - 24
-                    // 如果无筛选：右边距5px + 图标中心5px = 10px，所以图标中心在 width - 10
-                    var iconX = drawX + width - (iconArea.hasFilter ? 24 : 10);
-                    drawSortIcon(ctx, iconX, textY, column.key === state.sortField ? state.sortOrder : null);
-                }
-            }
-        }
-        ctx.textAlign = "left"; // 重置对齐方式
-    });
-    // 绘制表头
-    var drawHeader = useMemoizedFn(function (ctx, displayWidth, displayHeight) {
-        // 表头背景
-        ctx.fillStyle = COLORS.headerBg;
-        ctx.fillRect(0, 0, displayWidth, headerHeight);
-        if (isMultiHeader) {
-            // 多级表头渲染，使用计算出的每一层高度
-            // 先绘制非fixed列
-            flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
-                var y = layerStartY[rowIndex];
-                var currentLayerHeight = layerHeights[rowIndex];
-                headerRow.forEach(function (headerCell) {
-                    // 计算单元格的总高度（如果跨越多层）
-                    var totalCellHeight = 0;
-                    for (var i = rowIndex; i < rowIndex + headerCell.rowSpan; i++) {
-                        totalCellHeight += layerHeights[i];
-                    }
-                    drawMultiHeaderCell(ctx, headerCell, currentLayerHeight, y, displayWidth, rowIndex, totalCellHeight, false);
-                });
-            });
-            // 再绘制fixed列（覆盖在非fixed列之上）
-            flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
-                var y = layerStartY[rowIndex];
-                var currentLayerHeight = layerHeights[rowIndex];
-                headerRow.forEach(function (headerCell) {
-                    // 计算单元格的总高度（如果跨越多层）
-                    var totalCellHeight = 0;
-                    for (var i = rowIndex; i < rowIndex + headerCell.rowSpan; i++) {
-                        totalCellHeight += layerHeights[i];
-                    }
-                    drawMultiHeaderCell(ctx, headerCell, currentLayerHeight, y, displayWidth, rowIndex, totalCellHeight, true);
-                });
-            });
-        }
-        else {
-            // 单层表头渲染（原有逻辑）
-            // 先绘制非fixed列
-            columnRenderInfos.forEach(function (info, index) {
-                if (!info.fixed) {
-                    drawHeaderCell(ctx, info, index, displayWidth, displayHeight);
-                }
-            });
-            // 再绘制fixed列（覆盖在非fixed列之上）
-            columnRenderInfos.forEach(function (info, index) {
-                if (info.fixed) {
-                    drawHeaderCell(ctx, info, index, displayWidth, displayHeight);
-                }
-            });
-        }
-    });
-    // 绘制数据行
-    var drawRow = useMemoizedFn(function (ctx, rowIndex, displayWidth, displayHeight, onlyFixed // 是否只绘制fixed列
-    ) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        var record = processedDataSource[rowIndex];
-        if (!record)
-            return;
-        // 计算固定行数量
-        var fixedTopCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
-        // 计算Y坐标：对于固定行之后的行，需要加上固定行的高度并减去滚动偏移
-        var y = headerHeight +
-            fixedTopCount * rowHeight +
-            (rowIndex - fixedTopCount) * rowHeight -
-            scrollState.scrollTop;
-        // 计算实际可用的渲染区域高度（考虑固定底部行和合计行）
-        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
-        var fixedBottomHeight = fixedBottomRowsCount * rowHeight;
-        var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-        var effectiveHeight = displayHeight -
-            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-            fixedBottomHeight -
-            fixedSummaryHeight;
-        // 提前检查这一行是否有合并单元格，找出最大的rowSpan
-        var maxRowSpanInRow = 1;
-        if (mergeCellMap) {
-            columnRenderInfos.forEach(function (_, colIndex) {
-                var mergeCellKey = "".concat(rowIndex, "-").concat(colIndex);
-                var mergeInfo = mergeCellMap.get(mergeCellKey);
-                // 只考虑主单元格（不是被合并的单元格）
-                if (mergeInfo &&
-                    !mergeInfo.skip &&
-                    mergeInfo.rowSpan > maxRowSpanInRow) {
-                    maxRowSpanInRow = mergeInfo.rowSpan;
-                }
-            });
-        }
-        // 计算这一行的实际高度（考虑合并单元格）
-        var actualRowHeight = rowHeight * maxRowSpanInRow;
-        // 跳过不在可视区域的行
-        // 关键：使用合并后的实际高度判断，确保合并单元格的最后一行还在可视区域内时继续渲染
-        if (y + actualRowHeight < headerHeight || y >= effectiveHeight) {
-            return;
-        }
-        var recordKey = getRowKey(record, rowIndex);
-        var isSelected = state.selectedRowKeys.includes(recordKey);
-        var isHover = state.hoverRowIndex === rowIndex;
-        // 计算fixed列的右边界，用于裁剪非fixed列
-        var fixedColumnsRightEdge = 0;
-        if (!onlyFixed) {
-            columnRenderInfos.forEach(function (info) {
-                if (info.fixed) {
-                    var actualWidth = getColumnWidth
-                        ? getColumnWidth(columnRenderInfos.indexOf(info))
-                        : info.width;
-                    var rightEdge = info.fixedLeft + actualWidth;
-                    fixedColumnsRightEdge = Math.max(fixedColumnsRightEdge, rightEdge);
-                }
-            });
-        }
-        // 绘制单元格
-        columnRenderInfos.forEach(function (info, colIndex) {
-            var _a;
-            var column = info.column, x = info.x, fixed = info.fixed, fixedLeft = info.fixedLeft;
-            // 根据 onlyFixed 参数过滤要绘制的列
-            if (onlyFixed && !fixed)
-                return; // 只绘制fixed列时，跳过非fixed列
-            if (!onlyFixed && fixed)
-                return; // 只绘制非fixed列时，跳过fixed列
-            // 检查合并单元格
-            var mergeCellKey = "".concat(rowIndex, "-").concat(colIndex);
-            var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
-            // 如果是被合并的单元格，跳过渲染
-            if (mergeInfo && mergeInfo.skip) {
-                return;
-            }
-            // 使用 getColumnWidth 获取列宽（考虑拖拽时的临时宽度）
-            var width = getColumnWidth ? getColumnWidth(colIndex) : info.width;
-            var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-            // 跳过不在可视区域的列
-            if (!fixed && (drawX + width < 0 || drawX > displayWidth)) {
-                return;
-            }
-            // 对于非fixed列，检查是否被fixed列遮挡，如果完全被遮挡则跳过绘制
-            if (!fixed &&
-                fixedColumnsRightEdge > 0 &&
-                drawX < fixedColumnsRightEdge) {
-                // 如果非fixed列完全在fixed列的左侧（被完全遮挡），则跳过
-                if (drawX + width <= fixedColumnsRightEdge) {
-                    return;
-                }
-            }
-            // 计算单元格高度（考虑合并）
-            var cellHeight = mergeInfo && mergeInfo.rowSpan > 1
-                ? rowHeight * mergeInfo.rowSpan
-                : rowHeight;
-            ctx.save();
-            ctx.beginPath();
-            // 裁剪区域：确保不覆盖表头，从 headerHeight 开始
-            var clipY = Math.max(y, headerHeight);
-            // 计算单元格实际底部位置，并限制在可视区域内
-            var cellBottom = Math.min(y + cellHeight, effectiveHeight);
-            // 裁剪高度 = 单元格可见底部 - 裁剪起始位置
-            var clipHeight = Math.max(0, cellBottom - clipY);
-            // 对于非fixed列，还需要裁剪掉被fixed列遮挡的部分
-            var clipX = drawX;
-            var clipWidth = width;
-            if (!fixed &&
-                fixedColumnsRightEdge > 0 &&
-                drawX < fixedColumnsRightEdge) {
-                // 调整裁剪区域，去掉被fixed列遮挡的部分
-                var overlap = fixedColumnsRightEdge - drawX;
-                if (overlap < width) {
-                    clipX = fixedColumnsRightEdge;
-                    clipWidth = width - overlap;
-                }
-            }
-            ctx.rect(clipX, clipY, clipWidth, clipHeight);
-            ctx.clip();
-            // 绘制单元格背景
-            if (clipHeight > 0 && clipWidth > 0) {
-                if (isSelected) {
-                    ctx.fillStyle = COLORS.selectedBg;
-                }
-                else if (record[IS_SUMMARY]) {
-                    // 合计行使用表头背景色
-                    ctx.fillStyle = COLORS.headerBg;
-                }
-                else if (isHover) {
-                    ctx.fillStyle = COLORS.hoverBg;
-                }
-                else if (striped && rowIndex % 2 === 1) {
-                    ctx.fillStyle = COLORS.stripedBg;
-                }
-                else {
-                    ctx.fillStyle = COLORS.white;
-                }
-                ctx.fillRect(clipX, clipY, clipWidth, clipHeight);
-            }
-            // 单元格内容
-            if (column.key === "__selection__") {
-                // 检查是否是合计行
-                var isSummaryRow = record[IS_SUMMARY];
-                if (!isSummaryRow) {
-                    // 非合计行显示选择框
-                    var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
-                    var disabled = checkboxProps.disabled || false;
-                    // 对于合并单元格，使用合并后的单元格高度进行垂直居中
-                    drawCheckbox(ctx, drawX + width / 2, y + cellHeight / 2, isSelected, disabled, false);
-                }
-                else {
-                    // 合计行选择框列显示文本（比如"合计"）
-                    var dataIndex = column.dataIndex || column.key;
-                    var cellValue = record[dataIndex];
-                    var cellText = formatCellValue(cellValue, column, true);
-                    if (cellText) {
-                        ctx.fillStyle = COLORS.text;
-                        ctx.font = "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-                        ctx.textBaseline = "middle";
-                        ctx.textAlign = "center";
-                        var textX = drawX + width / 2;
-                        var textY = y + cellHeight / 2;
-                        ctx.fillText(cellText, textX, textY);
-                    }
-                }
-            }
-            else {
-                var dataIndex = column.dataIndex || column.key;
-                var cellValue = record[dataIndex];
-                // 检查是否是合计行
-                var isSummaryRow = record[IS_SUMMARY];
-                // 检查是否有 render 函数且返回自定义 ReactNode
-                var shouldRenderInCanvas = true;
-                // 对于合计行，不应用render函数，直接显示原始数据
-                if (column.render && !isSummaryRow) {
-                    var rendered = column.render(cellValue, record, rowIndex);
-                    // 如果返回的不是字符串或数字，说明是自定义组件，应该在覆盖层渲染，不在 Canvas 渲染
-                    if (typeof rendered !== "string" &&
-                        typeof rendered !== "number" &&
-                        rendered !== null &&
-                        rendered !== undefined) {
-                        shouldRenderInCanvas = false;
-                    }
-                }
-                // 只有在需要在 Canvas 中渲染时才绘制文本
-                if (shouldRenderInCanvas) {
-                    // 应用格式化（日期、精度、千分符）
-                    var cellText = void 0;
-                    // 对于合计行，直接使用格式化函数，不应用render
-                    if (isSummaryRow && column.key !== "__index__") {
-                        cellText = formatCellValue(cellValue, column);
-                    }
-                    else {
-                        cellText = extractCellText({
-                            cellValue: cellValue,
-                            record: record,
-                            rowIndex: rowIndex,
-                            renderFn: column.render,
-                        });
-                        // 如果没有自定义render，应用格式化
-                        if (!column.render) {
-                            cellText = formatCellValue(cellValue, column);
-                        }
-                    }
-                    // 绘制文本
-                    ctx.fillStyle = COLORS.text;
-                    // 合计行字体加粗
-                    ctx.font = record[IS_SUMMARY]
-                        ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
-                        : "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-                    ctx.textBaseline = "middle";
-                    var align = column.align || "left";
-                    var textX_4 = drawX + TEXT_PADDING;
-                    if (align === "center") {
-                        ctx.textAlign = "center";
-                        textX_4 = drawX + width / 2;
-                    }
-                    else if (align === "right") {
-                        ctx.textAlign = "right";
-                        textX_4 = drawX + width - TEXT_PADDING;
-                    }
-                    else {
-                        ctx.textAlign = "left";
-                    }
-                    // 处理文本显示（ellipsis 或 wrap）
-                    var maxWidth = width - TEXT_PADDING * 2; // 左右各TEXT_PADDING
-                    var ellipsis = column.ellipsis !== false; // 默认为true
-                    var wrap = column.wrap === true; // 默认为false
-                    if (wrap) {
-                        // 换行显示，最多显示2行
-                        var allLines = wrapText(ctx, cellText, maxWidth);
-                        var maxLines = 2; // 限制最多显示2行
-                        var lines = allLines.slice(0, maxLines);
-                        // 如果超过2行，在第2行末尾强制添加省略号
-                        if (allLines.length > maxLines && lines.length === maxLines) {
-                            // 确保第2行有足够空间显示省略号
-                            var lastLine = lines[maxLines - 1];
-                            var ellipsisText = "...";
-                            // 如果最后一行加上省略号会超出宽度，需要截断
-                            while (lastLine.length > 0 &&
-                                ctx.measureText(lastLine + ellipsisText).width > maxWidth) {
-                                lastLine = lastLine.slice(0, -1);
-                            }
-                            lines[maxLines - 1] = lastLine + ellipsisText;
-                        }
-                        var lineHeight_4 = FONT_SIZE + 5; // 字体大小 + 行间距5px
-                        var totalHeight = lines.length * lineHeight_4;
-                        // 使用合并后的单元格高度计算垂直居中位置
-                        var startY_4 = y + (cellHeight - totalHeight) / 2 + lineHeight_4 / 2;
-                        lines.forEach(function (line, lineIndex) {
-                            var lineY = startY_4 + lineIndex * lineHeight_4;
-                            // 只绘制在单元格可见区域内的文本
-                            if (lineY >= y && lineY <= y + cellHeight) {
-                                ctx.fillText(line, textX_4, lineY);
-                            }
-                        });
-                    }
-                    else if (ellipsis) {
-                        // 省略显示 - 使用合并后的单元格高度
-                        var textY = y + cellHeight / 2;
-                        var truncatedText = truncateText(ctx, cellText, maxWidth);
-                        ctx.fillText(truncatedText, textX_4, textY);
-                    }
-                    else {
-                        // 不处理，直接显示 - 使用合并后的单元格高度
-                        var textY = y + cellHeight / 2;
-                        ctx.fillText(cellText, textX_4, textY);
-                    }
-                    if (column.badge && !isSummaryRow) {
-                        var badgeProps = typeof column.badge === "function"
-                            ? column.badge(record)
-                            : column.badge;
-                        if (badgeProps) {
-                            // 使用原始的单元格坐标，而不是裁剪后的坐标
-                            drawBadge(ctx, badgeProps, drawX, y, width, cellHeight);
-                        }
-                    }
-                }
-            }
-            ctx.restore();
-        });
-    });
-    // 绘制固定列阴影和边界
-    var drawFixedColumns = useMemoizedFn(function (ctx, startRow, endRow, displayWidth, displayHeight) {
-        var fixedColumns = columnRenderInfos.filter(function (info) { return info.fixed; });
-        if (fixedColumns.length === 0)
-            return;
-        // 计算固定列的实际右边界（考虑列宽调整）
-        var fixedRightEdge = 0;
-        fixedColumns.forEach(function (info, index) {
-            var actualWidth = getColumnWidth
-                ? getColumnWidth(columnRenderInfos.indexOf(info))
-                : info.width;
-            var rightEdge = info.fixedLeft + actualWidth;
-            fixedRightEdge = Math.max(fixedRightEdge, rightEdge);
-        });
-        // 绘制固定列阴影（只在有横向滚动时显示）
-        if (scrollState.scrollLeft > 0 && fixedRightEdge < displayWidth) {
-            var shadowWidth = 12; // 增加阴影宽度，使边界更明显
-            var gradient = ctx.createLinearGradient(fixedRightEdge, 0, fixedRightEdge + shadowWidth, 0);
-            gradient.addColorStop(0, "rgba(0, 0, 0, 0.12)"); // 加深阴影
-            gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.04)");
-            gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
-            ctx.fillStyle = gradient;
-            ctx.fillRect(fixedRightEdge, headerHeight, shadowWidth, displayHeight - headerHeight);
-        }
-        // 绘制固定列右边界线（增强边界视觉效果）
-        if (fixedRightEdge > 0 && fixedRightEdge < displayWidth) {
-            ctx.strokeStyle = "rgba(0, 0, 0, 0.06)"; // 淡边界线
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            ctx.moveTo(fixedRightEdge, headerHeight);
-            ctx.lineTo(fixedRightEdge, displayHeight);
-            ctx.stroke();
-        }
-    });
-    // 绘制边框
-    var drawBorders = useMemoizedFn(function (ctx, startRow, endRow, displayWidth, displayHeight, onlyFixed // 是否只绘制fixed列的边框
-    ) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        ctx.strokeStyle = COLORS.border;
-        ctx.lineWidth = 1;
-        // 计算实际数据行数（只绘制到有数据的地方）
-        var dataRowCount = processedDataSource.length;
-        // 绘制表头底部边框（只在非fixed时绘制一次，使用2px更明显）
-        if (!onlyFixed) {
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            ctx.moveTo(0, headerHeight);
-            ctx.lineTo(displayWidth, headerHeight);
-            ctx.stroke();
-            ctx.lineWidth = 1; // 恢复为1px
-        }
-        // 计算固定行占用的高度
+    var calculateVisibleRows = useMemoizedFn(function (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 fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-        var fixedBottomHeight = fixedBottomRowsCount * rowHeight;
-        // 计算可滚动数据行的数量（排除固定行和合计行）
-        var scrollableDataRowCount = dataRowCount -
-            fixedTopRowsCount -
-            fixedBottomRowsCount -
-            (summaryFixed && hasSummaryRow ? 1 : 0);
-        // 计算实际数据区域的底部位置（考虑固定底部行和固定合计行）
-        var dataBottomY = Math.min(headerHeight +
-            fixedTopRowsCount * rowHeight +
-            scrollableDataRowCount * rowHeight -
-            scrollState.scrollTop, displayHeight -
+        var fixedSummaryRowHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+        var dataAreaHeight = displayHeight -
+            headerHeight -
+            fixedTopRowsCount * rowHeight -
+            fixedBottomRowsCount * rowHeight -
             (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-            fixedBottomHeight -
-            fixedSummaryHeight);
-        // 绘制垂直边框（只绘制body部分，从headerHeight开始，表头边框在drawHeaderCell中绘制）
-        columnRenderInfos.forEach(function (info, colIndex) {
-            var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
-            // 根据 onlyFixed 参数过滤要绘制边框的列
-            if (onlyFixed && !fixed)
-                return;
-            if (!onlyFixed && fixed)
-                return;
-            // 使用 getColumnWidth 获取列宽（考虑拖拽时的临时宽度）
-            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
-            var drawX = fixed
-                ? fixedLeft + actualWidth
-                : x + actualWidth - scrollState.scrollLeft;
-            if (drawX >= 0 && drawX <= displayWidth) {
-                ctx.beginPath();
-                ctx.moveTo(drawX, headerHeight);
-                // 只绘制到数据区域的底部，而不是整个容器高度
-                ctx.lineTo(drawX, dataBottomY);
-                ctx.stroke();
-            }
-        });
-        // 绘制水平边框（只绘制实际数据行的边框）
-        var maxRow = Math.min(endRow, dataRowCount, fixedTopRowsCount + scrollableDataRowCount);
-        var _loop_1 = function (i) {
-            // 计算Y坐标时需要考虑固定顶部行
-            var y = headerHeight +
-                fixedTopRowsCount * rowHeight +
-                (i - fixedTopRowsCount) * rowHeight -
-                scrollState.scrollTop;
-            // 只绘制在可滚动数据区域内的边框
-            if (y >= headerHeight + fixedTopRowsCount * rowHeight &&
-                y <= dataBottomY) {
-                // 分段绘制，只绘制当前范围（fixed或非fixed）的边框
-                columnRenderInfos.forEach(function (info, colIndex) {
-                    // 根据 onlyFixed 参数过滤
-                    if (onlyFixed && !info.fixed)
-                        return;
-                    if (!onlyFixed && info.fixed)
-                        return;
-                    var mergeCellKey = "".concat(i, "-").concat(colIndex);
-                    var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
-                    // 只有被合并的单元格（skip=true）才跳过绘制上边框
-                    // 合并单元格的起始行应该正常绘制上边框
-                    if (mergeInfo && mergeInfo.skip) {
-                        return;
-                    }
-                    var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
-                    var actualWidth = getColumnWidth
-                        ? getColumnWidth(colIndex)
-                        : width;
-                    var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-                    // 只绘制可见区域的边框
-                    if (!fixed && (drawX + actualWidth < 0 || drawX > displayWidth)) {
-                        return;
-                    }
-                    ctx.beginPath();
-                    ctx.moveTo(Math.max(drawX, 0), y);
-                    ctx.lineTo(Math.min(drawX + actualWidth, displayWidth), y);
-                    ctx.stroke();
-                });
-            }
-        };
-        for (var i = startRow; i <= maxRow; i++) {
-            _loop_1(i);
-        }
-        // 为合并单元格绘制底部边框
-        if (mergeCellMap && mergeCellMap.size > 0) {
-            mergeCellMap.forEach(function (mergeInfo, key) {
-                if (!mergeInfo.skip && mergeInfo.rowSpan > 1) {
-                    var rowIndex = mergeInfo.rowIndex, colIndex = mergeInfo.colIndex, rowSpan = mergeInfo.rowSpan;
-                    // 只绘制在可视范围内的且在数据区域内的
-                    if (rowIndex >= startRow && rowIndex <= maxRow) {
-                        var columnInfo = columnRenderInfos[colIndex];
-                        if (!columnInfo)
-                            return;
-                        // 根据 onlyFixed 参数过滤
-                        if (onlyFixed && !columnInfo.fixed)
-                            return;
-                        if (!onlyFixed && columnInfo.fixed)
-                            return;
-                        var x = columnInfo.x, width = columnInfo.width, fixed = columnInfo.fixed, fixedLeft = columnInfo.fixedLeft;
-                        var actualWidth = getColumnWidth
-                            ? getColumnWidth(colIndex)
-                            : width;
-                        var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-                        // 绘制合并单元格的底边框，考虑固定顶部行
-                        var bottomY = headerHeight +
-                            fixedTopRowsCount * rowHeight +
-                            (rowIndex + rowSpan - fixedTopRowsCount) * rowHeight -
-                            scrollState.scrollTop;
-                        // 只在数据区域内绘制
-                        if (bottomY >= headerHeight + fixedTopRowsCount * rowHeight &&
-                            bottomY <= dataBottomY) {
-                            ctx.beginPath();
-                            ctx.moveTo(drawX, bottomY);
-                            ctx.lineTo(drawX + actualWidth, bottomY);
-                            ctx.stroke();
-                        }
-                    }
-                }
-            });
-        }
-    });
-    /**
-     * 通用的固定行绘制函数
-     * @param yCalculator - Y坐标计算函数
-     * @param rowType - 行类型：'top' | 'bottom' | 'summary'
-     */
-    var drawFixedRow = useMemoizedFn(function (ctx, rowIndex, yCalculator, displayWidth, displayHeight, onlyFixed, rowType) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        if (rowType === void 0) { rowType = "top"; }
-        var record = processedDataSource[rowIndex];
-        if (!record)
-            return;
-        var fixedY = yCalculator(rowIndex);
-        ctx.save();
-        var recordKey = getRowKey(record, rowIndex);
-        var isSelected = state.selectedRowKeys.includes(recordKey);
-        var isHover = state.hoverRowIndex === rowIndex;
-        columnRenderInfos.forEach(function (info, colIndex) {
-            var _a;
-            var column = info.column, x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
-            // 根据 onlyFixed 参数过滤
-            if (onlyFixed && !fixed)
-                return;
-            if (!onlyFixed && fixed)
-                return;
-            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
-            var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-            // 跳过不可见的列
-            if (!fixed && (drawX + actualWidth < 0 || drawX > displayWidth)) {
-                return;
-            }
-            // 绘制背景
-            var bgColor = COLORS.white;
-            // 如果有自定义样式
-            if ((_a = fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) {
-                bgColor = fixedRowsConfig.style.backgroundColor;
-            }
-            else {
-                // 使用默认逻辑（斑马纹、选中、hover）
-                if (isSelected) {
-                    bgColor = COLORS.selectedBg;
-                }
-                else if (isHover) {
-                    bgColor = COLORS.hoverBg;
-                }
-                else if (striped && rowIndex % 2 === 1) {
-                    bgColor = COLORS.stripedBg;
-                }
-            }
-            ctx.fillStyle = bgColor;
-            ctx.fillRect(drawX, fixedY, actualWidth, rowHeight);
-            // 处理序号列
-            if (column.key === "__index__") {
-                // 非合计行显示序号
-                if (rowType !== "summary") {
-                    var indexText = String(rowIndex + 1);
-                    ctx.fillStyle = COLORS.text;
-                    ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-                    ctx.textBaseline = "middle";
-                    setTextAlign(ctx, "center");
-                    var textX = drawX + actualWidth / 2;
-                    var textY = fixedY + rowHeight / 2;
-                    ctx.fillText(indexText, textX, textY);
-                    return;
-                }
-                // 合计行序号列继续执行后面的逻辑，可能显示"合计"文字
-            }
-            // 处理选择框列
-            if (column.key === "__selection__") {
-                // 非合计行显示选择框
-                if (rowType !== "summary") {
-                    var checkboxX = drawX + actualWidth / 2;
-                    var textY = fixedY + rowHeight / 2;
-                    drawCheckbox(ctx, checkboxX, textY, isSelected, false, false);
-                    return;
-                }
-                // 合计行选择框列继续执行后面的逻辑，可能显示"合计"文字
-            }
-            // 获取单元格值
-            var dataIndex = column.dataIndex || column.key;
-            var cellValue = record[dataIndex];
-            // 渲染单元格内容
-            var cellText = formatCellValue(cellValue, column);
-            // 检查是否有render函数且返回自定义ReactNode
-            var shouldRenderInCanvas = true;
-            // 对于合计行，不应用render函数，直接显示原始数据
-            var isSummaryRowFixed = rowType === "summary";
-            if (column.render && !isSummaryRowFixed) {
-                var rendered = column.render(cellValue, record, rowIndex);
-                // 如果返回的不是字符串或数字，说明是自定义组件，应该在覆盖层渲染，不在 Canvas 渲染
-                if (typeof rendered !== "string" &&
-                    typeof rendered !== "number" &&
-                    rendered !== null &&
-                    rendered !== undefined) {
-                    shouldRenderInCanvas = false;
-                }
-            }
-            // 只有在需要在Canvas中渲染时才绘制文本
-            if (cellText && shouldRenderInCanvas) {
-                ctx.fillStyle = COLORS.text;
-                // 合计行字体加粗
-                ctx.font =
-                    rowType === "summary"
-                        ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
-                        : "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-                ctx.textBaseline = "middle";
-                var align = column.align || "left";
-                setTextAlign(ctx, align);
-                var padding = 5;
-                var maxWidth = actualWidth - padding * 2;
-                var textY = fixedY + rowHeight / 2;
-                var textX = calculateTextX(drawX, actualWidth, align, padding);
-                var truncatedText = truncateText(ctx, cellText, maxWidth);
-                ctx.fillText(truncatedText, textX, textY);
-            }
-        });
-        ctx.restore();
-    });
-    // 绘制固定顶部行（在固定位置）
-    var drawFixedTopRow = useMemoizedFn(function (ctx, rowIndex, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRow(ctx, rowIndex, function (idx) { return headerHeight + idx * rowHeight; }, displayWidth, displayHeight, onlyFixed, "top");
-    });
-    /**
-     * 通用的固定行边框绘制函数
-     * @param startYCalculator - 起始Y坐标计算函数
-     * @param borderType - 边框类型：'normal' | 'summary'（summary会加粗）
-     */
-    var drawFixedRowsBorder = useMemoizedFn(function (ctx, rowCount, startYCalculator, displayWidth, displayHeight, onlyFixed, borderType) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        if (borderType === void 0) { borderType = "normal"; }
-        ctx.save();
-        ctx.strokeStyle = COLORS.border;
-        ctx.lineWidth = borderType === "summary" ? 2 : 1; // 合计行边框加粗
-        var startY = startYCalculator();
-        // 计算固定列的右边界
-        var fixedColumnsRightEdge = 0;
-        if (onlyFixed) {
-            fixedColumnsRightEdge = calculateFixedColumnsRightEdge();
-        }
-        // 绘制水平边框
-        for (var i = 0; i <= rowCount; i++) {
-            var y = startY + i * rowHeight;
-            ctx.beginPath();
-            if (onlyFixed) {
-                // 固定列区域：只绘制固定列宽度的水平边框
-                ctx.moveTo(0, y);
-                ctx.lineTo(fixedColumnsRightEdge, y);
-            }
-            else {
-                // 非固定列区域：绘制整行水平边框
-                ctx.moveTo(0, y);
-                ctx.lineTo(displayWidth, y);
-            }
-            ctx.stroke();
-        }
-        // 绘制垂直边框
-        ctx.lineWidth = 1; // 垂直边框始终为1px
-        columnRenderInfos.forEach(function (info, colIndex) {
-            var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
-            // 根据 onlyFixed 参数过滤要绘制边框的列
-            if (onlyFixed && !fixed)
-                return;
-            if (!onlyFixed && fixed)
-                return;
-            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
-            var drawX = fixed
-                ? fixedLeft + actualWidth
-                : x + actualWidth - scrollState.scrollLeft;
-            if (drawX >= 0 && drawX <= displayWidth) {
-                ctx.beginPath();
-                ctx.moveTo(drawX, startY);
-                ctx.lineTo(drawX, startY + rowCount * rowHeight);
-                ctx.stroke();
-            }
-        });
-        ctx.restore();
-    });
-    // 绘制固定顶部行的边框
-    var drawFixedTopRowsBorder = useMemoizedFn(function (ctx, rowCount, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRowsBorder(ctx, rowCount, function () { return headerHeight; }, displayWidth, displayHeight, onlyFixed, "normal");
-    });
-    // 绘制固定底部行（在固定位置）
-    var drawFixedBottomRow = useMemoizedFn(function (ctx, rowIndex, relativeIndex, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRow(ctx, rowIndex, function () {
-            var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-            return (displayHeight -
-                (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-                fixedSummaryHeight -
-                ((fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0) * rowHeight +
-                relativeIndex * rowHeight);
-        }, displayWidth, displayHeight, onlyFixed, "bottom");
-    });
-    // 绘制固定底部行的边框
-    var drawFixedBottomRowsBorder = useMemoizedFn(function (ctx, rowCount, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRowsBorder(ctx, rowCount, function () {
-            var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-            return (displayHeight -
-                (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-                fixedSummaryHeight -
-                rowCount * rowHeight);
-        }, displayWidth, displayHeight, onlyFixed, "normal");
-    });
-    // 绘制固定合计行（在固定位置）
-    var drawFixedSummaryRow = useMemoizedFn(function (ctx, rowIndex, fixedY, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRow(ctx, rowIndex, function () { return fixedY; }, displayWidth, displayHeight, onlyFixed, "summary");
-    });
-    // 绘制固定合计行的边框
-    var drawFixedSummaryRowBorder = useMemoizedFn(function (ctx, rowIndex, fixedY, displayWidth, displayHeight, onlyFixed) {
-        if (onlyFixed === void 0) { onlyFixed = false; }
-        drawFixedRowsBorder(ctx, 1, // 合计行只有一行
-        function () { return fixedY; }, displayWidth, displayHeight, onlyFixed, "summary" // 使用summary类型，边框会加粗
-        );
-    });
-    // 绘制框选区域
-    var drawCellSelection = useMemoizedFn(function (ctx, displayWidth, displayHeight) {
-        if (!state.cellSelection)
-            return;
-        var _a = state.cellSelection, startRow = _a.startRow, endRow = _a.endRow, startCol = _a.startCol, endCol = _a.endCol;
-        // 计算选择区域的边界
-        var minRow = Math.min(startRow, endRow);
-        var maxRow = Math.max(startRow, endRow);
-        var minCol = Math.min(startCol, endCol);
-        var maxCol = Math.max(startCol, endCol);
-        // 计算fixed列的右边界（用于裁剪非fixed列的选中效果）
-        var fixedColumnsRightEdge = 0;
-        columnRenderInfos.forEach(function (info) {
-            if (info.fixed) {
-                var rightEdge = info.fixedLeft + info.width;
-                fixedColumnsRightEdge = Math.max(fixedColumnsRightEdge, rightEdge);
-            }
-        });
-        // 记录已绘制的合并单元格，避免重复绘制
-        var drawnMergeCells = new Set();
-        // 记录选区的边界坐标
-        var selectionTop = Infinity;
-        var selectionBottom = -Infinity;
-        var selectionLeft = Infinity;
-        var selectionRight = -Infinity;
-        // 计算固定行的范围
-        var fixedTopRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || fixedRowsCount || 0;
-        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
-        var bottomRowsStartIndex = processedDataSource.length -
+            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);
-        var summaryRowIndex = hasSummaryRow
-            ? processedDataSource.length - 1
-            : -1;
-        // 绘制选中的单元格背景
-        for (var row = minRow; row <= maxRow; row++) {
-            // row=-1 表示表头行
-            var y = void 0;
-            var cellHeight = void 0;
-            var isFixedRow = false;
-            if (row === -1) {
-                // 表头行
-                y = 0;
-                cellHeight = headerHeight;
-            }
-            else if (row < fixedTopRowsCount) {
-                // 固定顶部行
-                y = headerHeight + row * rowHeight;
-                cellHeight = rowHeight;
-                isFixedRow = true;
-            }
-            else if (fixedBottomRowsCount > 0 &&
-                row >= bottomRowsStartIndex &&
-                row < bottomRowsStartIndex + fixedBottomRowsCount) {
-                // 固定底部行
-                var relativeIndex = row - bottomRowsStartIndex;
-                var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-                y =
-                    displayHeight -
-                        (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-                        fixedSummaryHeight -
-                        fixedBottomRowsCount * rowHeight +
-                        relativeIndex * rowHeight;
-                cellHeight = rowHeight;
-                isFixedRow = true;
-            }
-            else if (summaryFixed && row === summaryRowIndex) {
-                // 固定合计行
-                var summaryRowY = displayHeight -
-                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
-                    rowHeight;
-                y = summaryRowY;
-                cellHeight = rowHeight;
-                isFixedRow = true;
-            }
-            else {
-                // 普通数据行
-                // 需要调整行索引，减去固定顶部行的数量
-                var adjustedRow = row - fixedTopRowsCount;
-                y =
-                    headerHeight +
-                        fixedTopRowsCount * rowHeight +
-                        adjustedRow * rowHeight -
-                        scrollState.scrollTop;
-                cellHeight = rowHeight;
-                // 数据行的可见性检查
-                if (y + cellHeight < headerHeight + fixedTopRowsCount * rowHeight ||
-                    y > displayHeight)
-                    continue;
-            }
-            for (var col = minCol; col <= maxCol; col++) {
-                var columnInfo = columnRenderInfos[col];
-                if (!columnInfo)
-                    continue;
-                // 表头行不处理合并单元格
-                if (row !== -1) {
-                    // 检查是否是合并单元格
-                    var mergeCellKey = "".concat(row, "-").concat(col);
-                    var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
-                    // 如果是被合并的单元格，跳过（由主单元格统一绘制）
-                    if (mergeInfo && mergeInfo.skip) {
-                        continue;
-                    }
-                    // 如果是合并单元格的主单元格，检查是否已绘制
-                    if (mergeInfo && !mergeInfo.skip) {
-                        var mergeKey = "".concat(mergeInfo.rowIndex, "-").concat(mergeInfo.colIndex);
-                        if (drawnMergeCells.has(mergeKey)) {
-                            continue;
+            (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);
                         }
-                        drawnMergeCells.add(mergeKey);
-                    }
-                    // 计算单元格高度（考虑合并）
-                    if (mergeInfo && mergeInfo.rowSpan > 1) {
-                        cellHeight = rowHeight * mergeInfo.rowSpan;
+                        break;
                     }
                 }
-                var x = columnInfo.x, width = columnInfo.width, fixed = columnInfo.fixed, fixedLeft = columnInfo.fixedLeft;
-                var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-                var drawWidth = width;
-                if (!fixed && (drawX + width < 0 || drawX > displayWidth))
-                    continue;
-                // 对于非fixed列，需要裁剪掉被fixed列遮挡的部分
-                if (!fixed && drawX < fixedColumnsRightEdge) {
-                    var overlap = fixedColumnsRightEdge - drawX;
-                    if (overlap >= width) {
-                        // 完全被遮挡，跳过
-                        continue;
-                    }
-                    // 部分被遮挡，裁剪掉被遮挡的部分
-                    drawX = fixedColumnsRightEdge;
-                    drawWidth = width - overlap;
-                }
-                // 绘制选中背景
-                ctx.fillStyle = COLORS.selectionBg;
-                var clipY = void 0;
-                var clipHeight = void 0;
-                if (row === -1 || isFixedRow) {
-                    // 表头行或固定行，直接使用y和height
-                    clipY = y;
-                    clipHeight = cellHeight;
-                }
-                else {
-                    // 普通数据行，需要裁剪到可见区域（避免被表头或固定行遮挡）
-                    var minVisibleY = headerHeight + fixedTopRowsCount * rowHeight;
-                    clipY = Math.max(y, minVisibleY);
-                    var actualBottom = y + cellHeight;
-                    clipHeight = Math.max(0, Math.min(actualBottom - clipY, displayHeight - clipY));
-                }
-                if (clipHeight > 0) {
-                    ctx.fillRect(drawX, clipY, drawWidth, clipHeight);
-                    // 更新选区边界
-                    selectionTop = Math.min(selectionTop, clipY);
-                    selectionBottom = Math.max(selectionBottom, clipY + clipHeight);
-                    selectionLeft = Math.min(selectionLeft, drawX);
-                    selectionRight = Math.max(selectionRight, drawX + drawWidth);
-                }
             }
+            scrollStartRow = minStartRow;
         }
-        // 绘制整个选区的外边框
-        if (selectionLeft !== Infinity && selectionTop !== Infinity) {
-            ctx.strokeStyle = COLORS.primary;
-            ctx.lineWidth = 2;
-            ctx.strokeRect(selectionLeft, selectionTop, selectionRight - selectionLeft, selectionBottom - selectionTop);
-        }
-    });
-    // 绘制滚动条
-    var drawScrollbars = useMemoizedFn(function (ctx, displayWidth, displayHeight) {
-        var scrollbarSize = SCROLLBAR_SIZE;
-        var scrollbarPadding = SCROLLBAR_PADDING;
-        // 绘制垂直滚动条
-        if (needVerticalScrollbar) {
-            var scrollbarX = displayWidth - scrollbarSize;
-            var scrollbarY = headerHeight;
-            var scrollbarHeight = needHorizontalScrollbar
-                ? displayHeight - scrollbarSize - headerHeight
-                : displayHeight - headerHeight;
-            // 滚动条轨道
-            ctx.fillStyle = COLORS.scrollbarTrack;
-            ctx.fillRect(scrollbarX, scrollbarY, scrollbarSize, scrollbarHeight);
-            // 滚动条滑块
-            ctx.fillStyle = scrollState.isDraggingVertical
-                ? COLORS.scrollbarThumbActive
-                : COLORS.scrollbarThumb;
-            ctx.fillRect(scrollbarX + scrollbarPadding, verticalScrollbarTop + headerHeight + scrollbarPadding, scrollbarSize - scrollbarPadding * 2, verticalScrollbarHeight - scrollbarPadding * 2);
-        }
-        // 绘制水平滚动条
-        if (needHorizontalScrollbar) {
-            var scrollbarX = 0;
-            var scrollbarY = displayHeight - scrollbarSize;
-            var scrollbarWidth = needVerticalScrollbar
-                ? displayWidth - scrollbarSize
-                : displayWidth;
-            // 滚动条轨道
-            ctx.fillStyle = COLORS.scrollbarTrack;
-            ctx.fillRect(scrollbarX, scrollbarY, scrollbarWidth, scrollbarSize);
-            // 滚动条滑块
-            ctx.fillStyle = scrollState.isDraggingHorizontal
-                ? COLORS.scrollbarThumbActive
-                : COLORS.scrollbarThumb;
-            ctx.fillRect(horizontalScrollbarLeft + scrollbarPadding, scrollbarY + scrollbarPadding, horizontalScrollbarWidth - scrollbarPadding * 2, scrollbarSize - scrollbarPadding * 2);
-        }
-        // 绘制滚动条交叉处
-        if (needVerticalScrollbar && needHorizontalScrollbar) {
-            ctx.fillStyle = COLORS.scrollbarTrack;
-            ctx.fillRect(displayWidth - scrollbarSize, displayHeight - scrollbarSize, scrollbarSize, scrollbarSize);
-        }
+        return { startRow: scrollStartRow, endRow: scrollEndRow };
     });
     /**
-     * 通用渲染函数：先绘制非fixed，再绘制fixed（包括边框）
-     * 遵循绘制顺序：非fixed内容 -> 非fixed边框 -> fixed内容 -> fixed边框
+     * 创建渲染上下文
      */
-    var renderWithFixedLayer = useMemoizedFn(function (ctx, renderContent, renderBorder) {
-        // 1. 绘制非fixed层
-        renderContent(false);
-        if (bordered && renderBorder) {
-            renderBorder(false);
-        }
-        // 2. 绘制fixed层（覆盖在非fixed之上）
-        renderContent(true);
-        if (bordered && renderBorder) {
-            renderBorder(true);
-        }
+    var createRenderContext = useMemoizedFn(function (ctx, displayWidth, displayHeight) {
+        return {
+            ctx: ctx,
+            displayWidth: displayWidth,
+            displayHeight: displayHeight,
+            dpr: dpr,
+            bordered: bordered,
+            striped: striped,
+            headerAlign: headerAlign,
+            rowHeight: rowHeight,
+            headerHeight: headerHeight,
+            baseHeaderHeight: baseHeaderHeight,
+            processedDataSource: processedDataSource,
+            columnRenderInfos: columnRenderInfos,
+            columns: columns,
+            state: state,
+            scrollState: scrollState,
+            resizeState: resizeState,
+            getRowKey: getRowKey,
+            getColumnWidth: getColumnWidth,
+            mergeCellMap: mergeCellMap,
+            rowSelection: rowSelection,
+            fixedRowsConfig: fixedRowsConfig,
+            fixedRowsCount: fixedRowsCount,
+            summaryFixed: summaryFixed,
+            hasSummaryRow: hasSummaryRow,
+            expandable: expandable,
+            flattenedData: flattenedData,
+            needVerticalScrollbar: needVerticalScrollbar,
+            needHorizontalScrollbar: needHorizontalScrollbar,
+            verticalScrollbarTop: verticalScrollbarTop,
+            verticalScrollbarHeight: verticalScrollbarHeight,
+            horizontalScrollbarLeft: horizontalScrollbarLeft,
+            horizontalScrollbarWidth: horizontalScrollbarWidth,
+            RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH,
+        };
     });
-    // 绘制表格核心函数
+    /**
+     * 绘制表格核心函数
+     */
     var drawTableCore = useMemoizedFn(function () {
         try {
             var canvas = canvasRef.current;
@@ -1372,16 +149,16 @@ var useTableRender = function (params) {
                 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) {
+            var ctx = canvasContextRef.current;
+            if (!ctx || ctx.canvas !== canvas) {
+                ctx = canvas.getContext("2d");
+                if (!ctx) {
                     isDrawingRef.current = false;
                     return;
                 }
-                canvasContextRef.current = ctx_1;
+                canvasContextRef.current = ctx;
             }
-            // 性能优化：检查是否需要重绘（基于关键参数hash）
+            // 性能优化：检查是否需要重绘
             var renderParamsHash = JSON.stringify({
                 width: containerWidth,
                 height: containerHeight,
@@ -1395,153 +172,86 @@ var useTableRender = function (params) {
                 sortOrder: state.sortOrder,
                 sortField: state.sortField,
             });
-            // 如果关键参数没有变化，跳过重绘
             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 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 = "#ffffff";
+            ctx.fillRect(0, 0, displayWidth, displayHeight);
+            // 创建渲染上下文并设置到所有渲染器
+            var renderContext_1 = createRenderContext(ctx, displayWidth, displayHeight);
+            Object.values(renderers).forEach(function (renderer) {
+                renderer.setContext(renderContext_1);
+            });
+            // 计算可视区域
+            var _a = calculateVisibleRows(displayHeight), startRow_1 = _a.startRow, endRow_1 = _a.endRow;
+            // 计算固定行的数量
             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;
-                        }
-                        // 如果是skip的单元格或没有合并信息，继续向前查找
-                        // 因为主单元格可能在更前面
-                    }
-                }
-                scrollStartRow_1 = minStartRow;
-            }
             // 1. 绘制可滚动区域的数据行（包括边框）
-            renderWithFixedLayer(ctx_1, 
-            // 渲染行内容
-            function (onlyFixed) {
-                for (var i = scrollStartRow_1; i < scrollEndRow_1; i++) {
-                    drawRow(ctx_1, i, displayWidth_1, displayHeight_1, onlyFixed);
+            renderWithFixedLayer(function (onlyFixed) {
+                for (var i = startRow_1; i < endRow_1; i++) {
+                    renderers.dataRow.renderRow(i, onlyFixed);
                 }
-            }, 
-            // 渲染边框
-            function (onlyFixed) {
-                drawBorders(ctx_1, scrollStartRow_1, scrollEndRow_1, displayWidth_1, displayHeight_1, onlyFixed);
+            }, function (onlyFixed) {
+                renderers.border.renderDataBorders(startRow_1, endRow_1, onlyFixed);
             });
             // 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.save();
+                renderWithFixedLayer(function (onlyFixed) {
+                    renderers.fixedRow.renderFixedTopRows(onlyFixed);
+                }, function (onlyFixed) {
+                    renderers.border.renderFixedTopBorders(fixedTopRowsCount_1, onlyFixed);
                 });
-                ctx_1.restore();
+                ctx.restore();
             }
-            // 3. 绘制固定的底部行（如果有，不包括合计行）
+            // 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.save();
+                renderWithFixedLayer(function (onlyFixed) {
+                    renderers.fixedRow.renderFixedBottomRows(onlyFixed);
+                }, function (onlyFixed) {
+                    renderers.border.renderFixedBottomBorders(fixedBottomRowsCount_1, onlyFixed);
                 });
-                ctx_1.restore();
+                ctx.restore();
             }
-            // 7. 绘制固定列阴影
-            drawFixedColumns(ctx_1, scrollStartRow_1, scrollEndRow_1, displayWidth_1, displayHeight_1);
-            // 4. 绘制固定合计行（如果启用）
+            // 4. 绘制固定列阴影和边界
+            renderers.fixedColumn.render();
+            // 5. 绘制固定合计行（如果启用）
             if (summaryFixed && hasSummaryRow) {
-                var summaryRowIndex_1 = processedDataSource.length - 1;
-                var summaryRowY_1 = displayHeight_1 -
+                var summaryRowY_1 = displayHeight -
                     (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.save();
+                renderWithFixedLayer(function (onlyFixed) {
+                    renderers.fixedRow.renderFixedSummaryRow(onlyFixed);
+                }, function (onlyFixed) {
+                    renderers.border.renderFixedSummaryBorder(summaryRowY_1, onlyFixed);
                 });
-                ctx_1.restore();
+                ctx.restore();
             }
-            // 6. 绘制表头（最后绘制，确保始终在最上层，不会被覆盖）
-            drawHeader(ctx_1, displayWidth_1, displayHeight_1);
-            // 绘制滚动条（最后绘制，在表头之上）
-            drawScrollbars(ctx_1, displayWidth_1, displayHeight_1);
-            // 绘制框选区域
+            // 6. 绘制表头（最后绘制，确保始终在最上层）
+            renderers.header.render();
+            // 7. 绘制滚动条
+            renderers.scrollbar.render();
+            // 8. 绘制框选区域
             if (state.cellSelection) {
-                drawCellSelection(ctx_1, displayWidth_1, displayHeight_1);
+                renderers.selection.render();
             }
             // 重置绘制标志
             isDrawingRef.current = false;
@@ -1557,11 +267,9 @@ var useTableRender = function (params) {
                 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";
@@ -1572,11 +280,11 @@ var useTableRender = function (params) {
             catch (fallbackError) {
                 console.error("CanvasTable: 错误恢复失败:", fallbackError);
             }
-            // 可以触发错误回调，通知外部组件
-            // props.onRenderError?.(error);
         }
     });
-    // 节流的绘制函数，使用 requestAnimationFrame
+    /**
+     * 节流的绘制函数，使用 requestAnimationFrame
+     */
     var drawTable = useMemoizedFn(function () {
         // 如果已经有pending的绘制请求，取消之前的
         if (rafIdRef.current !== null) {