zmdms-webui 2.3.0 → 2.3.1

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

@@ -0,0 +1,1289 @@
+import { 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 'zmdms-utils';
+import '../../node_modules/exceljs/dist/exceljs.min.js';
+import 'dayjs';
+import { COLORS, FONT_SIZE, FONT_FAMILY, SCROLLBAR_SIZE, SCROLLBAR_PADDING } from '../utils/constants.js';
+import { drawCheckbox, wrapText, truncateText, drawFilterIcon, drawSortIcon } from '../utils/canvasDrawHelpers.js';
+import { getMaxDepth, flattenHeaders, getLeafColumns } from '../utils/multiHeaderHelpers.js';
+import { extractCellText } from '../utils/cellHelpers.js';
+import { formatCellValue } from '../utils/formatHelpers.js';
+import { calculateSelectionState, calculateIconArea } from '../utils/interactionHelpers.js';
+
+/**
+ * 表格渲染 Hook
+ */
+var useTableRender = function (params) {
+    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, rowHeight = params.rowHeight, bordered = params.bordered, striped = params.striped, 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, _a = params.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _a === void 0 ? 8 : _a, mergeCellMap = params.mergeCellMap, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _c = params.fixedSummaryRow, fixedSummaryRow = _c === void 0 ? false : _c;
+    // 判断是否是多级表头
+    var maxDepth = useMemo(function () { return getMaxDepth(columns); }, [columns]);
+    var isMultiHeader = maxDepth > 1;
+    // 扁平化多级表头（如果需要）
+    var flattenedHeaderRows = useMemo(function () { return (isMultiHeader ? flattenHeaders(columns) : []); }, [columns, isMultiHeader]);
+    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坐标（根据对齐方式）
+     */
+    var calculateTextX = function (drawX, actualWidth, align, padding) {
+        if (align === void 0) { align = "left"; }
+        if (padding === void 0) { padding = 16; }
+        if (align === "center") {
+            return drawX + actualWidth / 2;
+        }
+        else if (align === "right") {
+            return drawX + actualWidth - padding;
+        }
+        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) {
+        if (!badge.text)
+            return;
+        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_SIZE, "px ").concat(FONT_FAMILY);
+        ctx.textBaseline = "middle";
+        var textX = drawX + 16;
+        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);
+            // 计算文本可用宽度（左边距16px + 图标宽度 ）
+            var textMaxWidth = width - 16 - iconArea.iconsWidth;
+            // 绘制文本（如果 title 是 React 元素，跳过Canvas渲染，在覆盖层中渲染）
+            if (!isValidElement(column.title)) {
+                var titleText = String(column.title || "");
+                // 根据 ellipsis 和 wrap 属性处理文本
+                if (column.wrap) {
+                    // 换行显示（支持\n和自动换行）
+                    var lines = wrapText(ctx, titleText, textMaxWidth);
+                    var lineHeight_1 = 20;
+                    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, lineY);
+                    });
+                }
+                else {
+                    // 默认截断显示
+                    var truncatedText = truncateText(ctx, titleText, textMaxWidth);
+                    ctx.fillText(truncatedText, textX, 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.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, rowHeight, y, displayWidth, currentDepth, 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, rowHeight * rowSpan);
+        // 绘制边框
+        if (bordered) {
+            ctx.strokeStyle = COLORS.border;
+            ctx.lineWidth = 1;
+            ctx.strokeRect(drawX, y, width, rowHeight * rowSpan);
+        }
+        // 判断是否是最末级表头（当前行+rowSpan 是否等于最大深度）
+        var isLastLevel = currentDepth + rowSpan === maxDepth;
+        // 判断是否是特殊列（选择框列、序号列等不需要排序和筛选的列）
+        var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
+        // 绘制单元格内容
+        var textY = y + (rowHeight * rowSpan) / 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_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 };
+                // 如果是最末级且有图标，文本左对齐；否则居中
+                if (isLastLevel && iconArea.iconsWidth > 0) {
+                    ctx.textAlign = "left";
+                    var textX = drawX + 16;
+                    var textMaxWidth = width - 16 - iconArea.iconsWidth;
+                    var truncated = truncateText(ctx, titleText, textMaxWidth);
+                    ctx.fillText(truncated, textX, textY);
+                }
+                else {
+                    ctx.textAlign = "center";
+                    var textX = drawX + width / 2;
+                    var truncated = truncateText(ctx, titleText, width - 16);
+                    ctx.fillText(truncated, textX, 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) {
+            // 多级表头渲染
+            var rowHeight_1 = headerHeight / maxDepth;
+            // 先绘制非fixed列
+            flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
+                var y = rowIndex * rowHeight_1;
+                headerRow.forEach(function (headerCell) {
+                    drawMultiHeaderCell(ctx, headerCell, rowHeight_1, y, displayWidth, rowIndex, false);
+                });
+            });
+            // 再绘制fixed列（覆盖在非fixed列之上）
+            flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
+                var y = rowIndex * rowHeight_1;
+                headerRow.forEach(function (headerCell) {
+                    drawMultiHeaderCell(ctx, headerCell, rowHeight_1, y, displayWidth, rowIndex, 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 = fixedSummaryRow && hasSummaryRow ? rowHeight : 0;
+        var effectiveHeight = displayHeight -
+            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+            fixedBottomHeight -
+            fixedSummaryHeight;
+        // 跳过不在可视区域的行，但允许部分可见的行
+        if (y + rowHeight < 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 clipHeight = Math.min(cellHeight, y + cellHeight - headerHeight);
+            // 对于非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 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];
+                // 检查是否有 render 函数且返回自定义 ReactNode
+                var shouldRenderInCanvas = true;
+                if (column.render) {
+                    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 = extractCellText({
+                        cellValue: cellValue,
+                        record: record,
+                        rowIndex: rowIndex,
+                        renderFn: column.render,
+                    });
+                    // 如果没有自定义render，应用格式化
+                    if (!column.render) {
+                        cellText = formatCellValue(cellValue, column);
+                    }
+                    // 绘制文本
+                    ctx.fillStyle = COLORS.text;
+                    ctx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+                    ctx.textBaseline = "middle";
+                    var align = column.align || "left";
+                    var textX_1 = drawX + 16;
+                    if (align === "center") {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + width / 2;
+                    }
+                    else if (align === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - 16;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                    }
+                    // 处理文本显示（ellipsis 或 wrap）
+                    var maxWidth = width - 32;
+                    var ellipsis = column.ellipsis !== false; // 默认为true
+                    var wrap = column.wrap === true; // 默认为false
+                    if (wrap) {
+                        // 换行显示
+                        var lines = wrapText(ctx, cellText, maxWidth);
+                        var lineHeight_2 = FONT_SIZE + 4; // 行高
+                        var totalHeight = lines.length * lineHeight_2;
+                        // 使用合并后的单元格高度计算垂直居中位置
+                        var startY_2 = y + (cellHeight - totalHeight) / 2 + lineHeight_2 / 2;
+                        lines.forEach(function (line, lineIndex) {
+                            var lineY = startY_2 + lineIndex * lineHeight_2;
+                            // 只绘制在单元格可见区域内的文本
+                            if (lineY >= y && lineY <= y + cellHeight) {
+                                ctx.fillText(line, textX_1, lineY);
+                            }
+                        });
+                    }
+                    else if (ellipsis) {
+                        // 省略显示 - 使用合并后的单元格高度
+                        var textY = y + cellHeight / 2;
+                        var truncatedText = truncateText(ctx, cellText, maxWidth);
+                        ctx.fillText(truncatedText, textX_1, textY);
+                    }
+                    else {
+                        // 不处理，直接显示 - 使用合并后的单元格高度
+                        var textY = y + cellHeight / 2;
+                        ctx.fillText(cellText, textX_1, textY);
+                    }
+                    // 绘制角标（跳过合计行）
+                    var isSummaryRow = hasSummaryRow && rowIndex === processedDataSource.length - 1;
+                    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;
+        // 绘制表头底部边框（只在非fixed时绘制一次，使用2px更明显）
+        if (!onlyFixed) {
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(0, headerHeight);
+            ctx.lineTo(displayWidth, headerHeight);
+            ctx.stroke();
+            ctx.lineWidth = 1; // 恢复为1px
+        }
+        // 绘制垂直边框（只绘制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, displayHeight);
+                ctx.stroke();
+            }
+        });
+        var _loop_1 = function (i) {
+            var y = headerHeight + i * rowHeight - scrollState.scrollTop;
+            if (y >= headerHeight && y <= displayHeight) {
+                // 分段绘制，只绘制当前范围（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 <= endRow; 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 <= endRow) {
+                        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 +
+                            (rowIndex + rowSpan) * rowHeight -
+                            scrollState.scrollTop;
+                        if (bottomY >= headerHeight && bottomY <= displayHeight) {
+                            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")
+                    return;
+                var indexText = String(rowIndex + 1);
+                ctx.fillStyle = COLORS.text;
+                ctx.font = "".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")
+                    return;
+                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;
+            if (column.render) {
+                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_SIZE, "px ").concat(FONT_FAMILY);
+                ctx.textBaseline = "middle";
+                var align = column.align || "left";
+                setTextAlign(ctx, align);
+                var padding = 16;
+                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 = fixedSummaryRow && 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 = fixedSummaryRow && 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 -
+            fixedBottomRowsCount -
+            (fixedSummaryRow && 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 = fixedSummaryRow && hasSummaryRow ? rowHeight : 0;
+                y =
+                    displayHeight -
+                        (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                        fixedSummaryHeight -
+                        fixedBottomRowsCount * rowHeight +
+                        relativeIndex * rowHeight;
+                cellHeight = rowHeight;
+                isFixedRow = true;
+            }
+            else if (fixedSummaryRow && 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;
+                        }
+                        drawnMergeCells.add(mergeKey);
+                    }
+                    // 计算单元格高度（考虑合并）
+                    if (mergeInfo && mergeInfo.rowSpan > 1) {
+                        cellHeight = rowHeight * mergeInfo.rowSpan;
+                    }
+                }
+                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);
+                }
+            }
+        }
+        // 绘制整个选区的外边框
+        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);
+        }
+    });
+    /**
+     * 通用渲染函数：先绘制非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 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.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 = fixedSummaryRow && 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
+        // 注意：不再减去合计行数量，因为合计行的空间已在 dataAreaHeight 中考虑
+        );
+        // 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, 
+            // 渲染行内容
+            function (onlyFixed) {
+                for (var i = 0; i < fixedTopRowsCount; i++) {
+                    drawFixedTopRow(ctx, i, displayWidth, displayHeight, onlyFixed);
+                }
+            }, 
+            // 渲染边框
+            function (onlyFixed) {
+                drawFixedTopRowsBorder(ctx, fixedTopRowsCount, displayWidth, displayHeight, onlyFixed);
+            });
+            ctx.restore();
+        }
+        // 3. 绘制固定的底部行（如果有，不包括合计行）
+        if (fixedBottomRowsCount > 0) {
+            ctx.save();
+            var bottomRowsStartIndex_1 = processedDataSource.length -
+                fixedBottomRowsCount -
+                (fixedSummaryRow && 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);
+                }
+            }, 
+            // 渲染边框
+            function (onlyFixed) {
+                drawFixedBottomRowsBorder(ctx, fixedBottomRowsCount, displayWidth, displayHeight, onlyFixed);
+            });
+            ctx.restore();
+        }
+        // 7. 绘制固定列阴影
+        drawFixedColumns(ctx, scrollStartRow, scrollEndRow, displayWidth, displayHeight);
+        // 4. 绘制固定合计行（如果启用）
+        if (fixedSummaryRow && 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();
+        }
+        // 6. 绘制表头（最后绘制，确保始终在最上层，不会被覆盖）
+        drawHeader(ctx, displayWidth, displayHeight);
+        // 绘制滚动条（最后绘制，在表头之上）
+        drawScrollbars(ctx, displayWidth, displayHeight);
+        // 绘制框选区域
+        if (state.cellSelection) {
+            drawCellSelection(ctx, displayWidth, displayHeight);
+        }
+    });
+    // 监听变化，自动重绘
+    useEffect(function () {
+        drawTable();
+    }, [
+        containerWidth,
+        containerHeight,
+        scrollState.scrollTop,
+        scrollState.scrollLeft,
+        scrollState.isDraggingVertical,
+        scrollState.isDraggingHorizontal,
+        state.hoverRowIndex,
+        state.selectedRowKeys,
+        state.sortField,
+        state.sortOrder,
+        state.cellSelection,
+        processedDataSource,
+        columnRenderInfos,
+        bordered,
+        striped,
+        resizeState,
+        drawTable,
+    ]);
+    return {
+        drawTable: drawTable,
+    };
+};
+
+export { useTableRender };