zmdms-webui 2.3.5 → 2.3.7

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

@@ -8,9 +8,9 @@ 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 { COLORS, FONT_WEIGHT, 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 { 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';
@@ -19,12 +19,21 @@ import { calculateSelectionState, calculateIconArea } from '../utils/interaction
  * 表格渲染 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.summaryFixed, summaryFixed = _c === void 0 ? false : _c;
+    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, 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.summaryFixed, summaryFixed = _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]);
+    // 计算多级表头每一层的高度（考虑换行）
+    // 使用 baseHeaderHeight 或默认计算出的基础高度
+    var _d = 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 = _d.layerHeights, layerStartY = _d.layerStartY;
     var dpr = window.devicePixelRatio || 1;
     // ==================== 通用辅助函数 ====================
     /**
@@ -45,7 +54,7 @@ var useTableRender = function (params) {
      */
     var calculateTextX = function (drawX, actualWidth, align, padding) {
         if (align === void 0) { align = "left"; }
-        if (padding === void 0) { padding = 16; }
+        if (padding === void 0) { padding = 5; }
         if (align === "center") {
             return drawX + actualWidth / 2;
         }
@@ -63,8 +72,6 @@ var useTableRender = function (params) {
     };
     // 绘制角标的辅助函数（三角形标记，类似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";
@@ -120,9 +127,8 @@ var useTableRender = function (params) {
         ctx.fillRect(drawX, 0, width, headerHeight);
         // 表头文本
         ctx.fillStyle = COLORS.text;
-        ctx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+        ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
         ctx.textBaseline = "middle";
-        var textX = drawX + 16;
         var textY = headerHeight / 2;
         // 绘制选择框
         if (column.key === "__selection__") {
@@ -135,26 +141,65 @@ var useTableRender = function (params) {
         else {
             // 计算图标占用的宽度
             var iconArea = calculateIconArea(column, width);
-            // 计算文本可用宽度（左边距16px + 图标宽度 ）
-            var textMaxWidth = width - 16 - iconArea.iconsWidth;
+            // 确定表头对齐方式，优先使用列的 headerAlign，其次是 align，最后是默认值
+            var headerAlign = column.headerAlign || column.align || "center";
             // 绘制文本（如果 title 是 React 元素，跳过Canvas渲染，在覆盖层中渲染）
             if (!isValidElement(column.title)) {
                 var titleText = String(column.title || "");
+                // 根据对齐方式和图标情况设置文本位置
+                var textX_1;
+                var textMaxWidth = void 0;
+                if (iconArea.iconsWidth > 0) {
+                    // 有图标时，根据headerAlign调整文本位置和最大宽度
+                    if (headerAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - 5 - iconArea.iconsWidth;
+                        textMaxWidth = width - 10 - iconArea.iconsWidth;
+                    }
+                    else if (headerAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - 10 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + 5;
+                        textMaxWidth = width - 5 - iconArea.iconsWidth;
+                    }
+                }
+                else {
+                    // 没有图标时，根据headerAlign设置对齐方式
+                    if (headerAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + 5;
+                        textMaxWidth = width - 10;
+                    }
+                    else if (headerAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - 5;
+                        textMaxWidth = width - 10;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + width / 2;
+                        textMaxWidth = width - 10;
+                    }
+                }
                 // 根据 ellipsis 和 wrap 属性处理文本
                 if (column.wrap) {
                     // 换行显示（支持\n和自动换行）
                     var lines = wrapText(ctx, titleText, textMaxWidth);
-                    var lineHeight_1 = 20;
+                    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, lineY);
+                        ctx.fillText(line, textX_1, lineY);
                     });
                 }
                 else {
                     // 默认截断显示
                     var truncatedText = truncateText(ctx, titleText, textMaxWidth);
-                    ctx.fillText(truncatedText, textX, textY);
+                    ctx.fillText(truncatedText, textX_1, textY);
                 }
             }
             // 绘制筛选图标（最右侧，距离右边5px）
@@ -171,6 +216,7 @@ var useTableRender = function (params) {
                 drawSortIcon(ctx, iconX, textY, column.key === state.sortField ? state.sortOrder : null);
             }
         }
+        ctx.textAlign = "left"; // 重置对齐方式
         ctx.restore();
         // 绘制表头列之间的边框
         if (bordered) {
@@ -205,7 +251,8 @@ var useTableRender = function (params) {
         }
     });
     // 绘制多级表头单元格
-    var drawMultiHeaderCell = useMemoizedFn(function (ctx, headerCell, rowHeight, y, displayWidth, currentDepth, onlyFixed // 是否只绘制fixed列
+    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;
@@ -245,19 +292,19 @@ var useTableRender = function (params) {
         }
         // 绘制单元格背景
         ctx.fillStyle = COLORS.headerBg;
-        ctx.fillRect(drawX, y, width, rowHeight * rowSpan);
+        ctx.fillRect(drawX, y, width, totalCellHeight);
         // 绘制边框
         if (bordered) {
             ctx.strokeStyle = COLORS.border;
             ctx.lineWidth = 1;
-            ctx.strokeRect(drawX, y, width, rowHeight * rowSpan);
+            ctx.strokeRect(drawX, y, width, totalCellHeight);
         }
         // 判断是否是最末级表头（当前行+rowSpan 是否等于最大深度）
         var isLastLevel = currentDepth + rowSpan === maxDepth;
         // 判断是否是特殊列（选择框列、序号列等不需要排序和筛选的列）
         var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
         // 绘制单元格内容
-        var textY = y + (rowHeight * rowSpan) / 2;
+        var textY = y + totalCellHeight / 2;
         // 绘制选择框（只在第一行显示全选框）
         if (column.key === "__selection__" && currentDepth === 0) {
             // 计算选中状态
@@ -269,7 +316,7 @@ var useTableRender = function (params) {
         else {
             // 绘制文本
             ctx.fillStyle = COLORS.text;
-            ctx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+            ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
             ctx.textBaseline = "middle";
             if (!isValidElement(column.title)) {
                 var titleText = String(column.title || "");
@@ -278,44 +325,73 @@ var useTableRender = function (params) {
                 var iconArea = shouldShowIcons
                     ? calculateIconArea(column, width)
                     : { hasOrder: false, hasFilter: false, iconsWidth: 0 };
-                // 如果是最末级且有图标，文本左对齐；否则居中
+                // 确定表头对齐方式，优先使用列的 headerAlign，其次是 align，最后是默认值
+                var headerAlign = column.headerAlign || column.align || "center";
+                // 如果是最末级且有图标，需要调整对齐方式
                 if (isLastLevel && iconArea.iconsWidth > 0) {
-                    ctx.textAlign = "left";
-                    var textX_1 = drawX + 16;
-                    var textMaxWidth = width - 16 - iconArea.iconsWidth;
+                    // 有图标时，根据headerAlign调整文本位置和最大宽度
+                    var textX_2;
+                    var textMaxWidth = void 0;
+                    if (headerAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_2 = drawX + width - 5 - iconArea.iconsWidth;
+                        textMaxWidth = width - 10 - iconArea.iconsWidth;
+                    }
+                    else if (headerAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_2 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - 10 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_2 = drawX + 5;
+                        textMaxWidth = width - 5 - iconArea.iconsWidth;
+                    }
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
                         var lines = wrapText(ctx, titleText, textMaxWidth);
-                        var lineHeight_2 = 20;
+                        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_1, lineY);
+                            ctx.fillText(line, textX_2, lineY);
                         });
                     }
                     else {
                         var truncated = truncateText(ctx, titleText, textMaxWidth);
-                        ctx.fillText(truncated, textX_1, textY);
+                        ctx.fillText(truncated, textX_2, textY);
                     }
                 }
                 else {
-                    ctx.textAlign = "center";
-                    var textX_2 = drawX + width / 2;
+                    // 没有图标时，根据headerAlign设置对齐方式
+                    var textX_3;
+                    if (headerAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_3 = drawX + 5;
+                    }
+                    else if (headerAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_3 = drawX + width - 5;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_3 = drawX + width / 2;
+                    }
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
-                        var lines = wrapText(ctx, titleText, width - 16);
-                        var lineHeight_3 = 20;
+                        var lines = wrapText(ctx, titleText, width - 10); // 左右各5px
+                        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_2, lineY);
+                            ctx.fillText(line, textX_3, lineY);
                         });
                     }
                     else {
-                        var truncated = truncateText(ctx, titleText, width - 16);
-                        ctx.fillText(truncated, textX_2, textY);
+                        var truncated = truncateText(ctx, titleText, width - 10); // 左右各5px
+                        ctx.fillText(truncated, textX_3, textY);
                     }
                 }
                 // 绘制筛选图标（仅在最末级表头显示）
@@ -341,20 +417,31 @@ var useTableRender = function (params) {
         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;
+                var y = layerStartY[rowIndex];
+                var currentLayerHeight = layerHeights[rowIndex];
                 headerRow.forEach(function (headerCell) {
-                    drawMultiHeaderCell(ctx, headerCell, rowHeight_1, y, displayWidth, rowIndex, false);
+                    // 计算单元格的总高度（如果跨越多层）
+                    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 = rowIndex * rowHeight_1;
+                var y = layerStartY[rowIndex];
+                var currentLayerHeight = layerHeights[rowIndex];
                 headerRow.forEach(function (headerCell) {
-                    drawMultiHeaderCell(ctx, headerCell, rowHeight_1, y, displayWidth, rowIndex, true);
+                    // 计算单元格的总高度（如果跨越多层）
+                    var totalCellHeight = 0;
+                    for (var i = rowIndex; i < rowIndex + headerCell.rowSpan; i++) {
+                        totalCellHeight += layerHeights[i];
+                    }
+                    drawMultiHeaderCell(ctx, headerCell, currentLayerHeight, y, displayWidth, rowIndex, totalCellHeight, true);
                 });
             });
         }
@@ -514,10 +601,30 @@ var useTableRender = function (params) {
             }
             // 单元格内容
             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);
+                // 检查是否是合计行
+                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);
+                    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;
@@ -562,29 +669,43 @@ var useTableRender = function (params) {
                     // 合计行字体加粗
                     ctx.font = record[IS_SUMMARY]
                         ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
-                        : "".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_3 = drawX + 16;
+                    var textX_4 = drawX + 5;
                     if (align === "center") {
                         ctx.textAlign = "center";
-                        textX_3 = drawX + width / 2;
+                        textX_4 = drawX + width / 2;
                     }
                     else if (align === "right") {
                         ctx.textAlign = "right";
-                        textX_3 = drawX + width - 16;
+                        textX_4 = drawX + width - 5;
                     }
                     else {
                         ctx.textAlign = "left";
                     }
                     // 处理文本显示（ellipsis 或 wrap）
-                    var maxWidth = width - 32;
+                    var maxWidth = width - 10; // 左右各5px
                     var ellipsis = column.ellipsis !== false; // 默认为true
                     var wrap = column.wrap === true; // 默认为false
                     if (wrap) {
-                        // 换行显示
-                        var lines = wrapText(ctx, cellText, maxWidth);
-                        var lineHeight_4 = FONT_SIZE + 4; // 行高
+                        // 换行显示，最多显示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;
@@ -592,7 +713,7 @@ var useTableRender = function (params) {
                             var lineY = startY_4 + lineIndex * lineHeight_4;
                             // 只绘制在单元格可见区域内的文本
                             if (lineY >= y && lineY <= y + cellHeight) {
-                                ctx.fillText(line, textX_3, lineY);
+                                ctx.fillText(line, textX_4, lineY);
                             }
                         });
                     }
@@ -600,12 +721,12 @@ var useTableRender = function (params) {
                         // 省略显示 - 使用合并后的单元格高度
                         var textY = y + cellHeight / 2;
                         var truncatedText = truncateText(ctx, cellText, maxWidth);
-                        ctx.fillText(truncatedText, textX_3, textY);
+                        ctx.fillText(truncatedText, textX_4, textY);
                     }
                     else {
                         // 不处理，直接显示 - 使用合并后的单元格高度
                         var textY = y + cellHeight / 2;
-                        ctx.fillText(cellText, textX_3, textY);
+                        ctx.fillText(cellText, textX_4, textY);
                     }
                     if (column.badge && !isSummaryRow) {
                         var badgeProps = typeof column.badge === "function"
@@ -814,28 +935,30 @@ var useTableRender = function (params) {
             ctx.fillRect(drawX, fixedY, actualWidth, rowHeight);
             // 处理序号列
             if (column.key === "__index__") {
-                // 合计行序号列显示空
-                if (rowType === "summary")
+                // 非合计行显示序号
+                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;
-                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")
+                // 非合计行显示选择框
+                if (rowType !== "summary") {
+                    var checkboxX = drawX + actualWidth / 2;
+                    var textY = fixedY + rowHeight / 2;
+                    drawCheckbox(ctx, checkboxX, textY, isSelected, false, false);
                     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;
@@ -863,11 +986,11 @@ var useTableRender = function (params) {
                 ctx.font =
                     rowType === "summary"
                         ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
-                        : "".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 = 16;
+                var padding = 5;
                 var maxWidth = actualWidth - padding * 2;
                 var textY = fixedY + rowHeight / 2;
                 var textX = calculateTextX(drawX, actualWidth, align, padding);
@@ -1241,8 +1364,9 @@ var useTableRender = function (params) {
         // 计算可视区域（从固定行之后开始）
         var scrollStartRow = fixedTopRowsCount + Math.floor(scrollState.scrollTop / rowHeight);
         var scrollEndRow = Math.min(fixedTopRowsCount +
-            Math.ceil((scrollState.scrollTop + dataAreaHeight) / rowHeight), processedDataSource.length - fixedBottomRowsCount
-        // 注意：不再减去合计行数量，因为合计行的空间已在 dataAreaHeight 中考虑
+            Math.ceil((scrollState.scrollTop + dataAreaHeight) / rowHeight), processedDataSource.length -
+            fixedBottomRowsCount -
+            (summaryFixed && hasSummaryRow ? 1 : 0) // 如果合计行固定，需要排除它
         );
         // 关键修复：向前扩展渲染范围，检查是否有合并单元格延伸到可视区域
         // 策略：对每一列独立检查，找到该列最靠前的需要渲染的主合并单元格

package/dist/es/canvastable/interface.d.ts

@@ -36,6 +36,10 @@ interface ICanvasColumnType<RecordType = any> {
      * 对齐方式
      */
     align?: "left" | "center" | "right";
+    /**
+     * 表头对齐方式（如果不设置，使用全局 headerAlign 或 align）
+     */
+    headerAlign?: "left" | "center" | "right";
     /**
      * 是否固定列
      */
@@ -182,13 +186,13 @@ interface ICanvasColumnType<RecordType = any> {
 type ICanvasColumnsType<RecordType = any> = ICanvasColumnType<RecordType>[];
 interface IBadgeProps {
     /**
-     * 角标颜色
+     * 角标提示文本（鼠标悬停时显示）
      */
-    color?: string;
+    title?: string;
     /**
-     * 角标文本
+     * 角标颜色
      */
-    text?: string;
+    color?: string;
     /**
      * 角标位置
      */
@@ -249,6 +253,10 @@ interface ICanvasTableProps<RecordType = any> {
      * 表头换行
      */
     headerWrap?: boolean;
+    /**
+     * 表头对齐方式（默认居中）
+     */
+    headerAlign?: "left" | "center" | "right";
     /**
      * 勾选配置
      */
@@ -394,6 +402,86 @@ interface ICanvasTableProps<RecordType = any> {
      * 表格id（用于自动高度计算时定位元素）
      */
     canvasTableId?: string;
+    /**
+     * 表格ref句柄，用于暴露表格的一些方法
+     */
+    tableRefHandle?: React__default.Ref<ICanvasTableRefHandle>;
+    /**
+     * 导出excel的一些配置
+     */
+    exportExcelConfig?: {
+        topDescription?: string;
+        time?: string;
+        topDescriptionRowHeight?: number;
+        fileName: string;
+    };
+}
+/**
+ * CanvasTable 暴露的方法
+ */
+interface ICanvasTableRefHandle {
+    /**
+     * 获取当前表格的配置信息（动态列配置）
+     */
+    getDynamicList: () => any[];
+    /**
+     * 动态列配置重置
+     */
+    onResetDynamicList: () => void;
+    /**
+     * 动态列配置设置
+     */
+    onSetDynamicList: (list: any[]) => void;
+    /**
+     * 导出Excel
+     */
+    exportExcel?: (fileName: string, config?: {
+        topDescription?: string;
+        time?: string;
+        topDescriptionRowHeight?: number;
+    }) => void;
+    /**
+     * 获取表格容器
+     */
+    getContainer: () => HTMLDivElement | null;
+    /**
+     * 全屏展示表格
+     */
+    toggleFullScreen: () => void;
+    /**
+     * 获取选中的行keys
+     */
+    getSelectedRowKeys: () => React__default.Key[];
+    /**
+     * 设置选中的行keys
+     */
+    setSelectedRowKeys: (keys: React__default.Key[]) => void;
+    /**
+     * 滚动到指定位置
+     */
+    scrollTo: (params: {
+        x?: number;
+        y?: number;
+    }) => void;
+    /**
+     * 获取当前排序状态
+     */
+    getSortState: () => {
+        field: string | null;
+        order: SortOrder;
+    };
+    /**
+     * 获取当前过滤状态
+     */
+    getFilterState: () => Record<string, any[]>;
+    /**
+     * 清除排序
+     */
+    clearSort: () => void;
+    /**
+     * 清除过滤
+     */
+    clearFilter: () => void;
 }
 
-export { ColumnDataType, FilterConfig, IBadgeProps, ICanvasColumnType, ICanvasColumnsType, ICanvasRowSelection, ICanvasTableProps, SortOrder };
+export { ColumnDataType, FilterConfig, IBadgeProps, ICanvasColumnType, ICanvasColumnsType, ICanvasRowSelection, ICanvasTableProps, ICanvasTableRefHandle, SortOrder };

package/dist/es/canvastable/utils/columnHelpers.js

@@ -24,13 +24,17 @@ var findColumnByKey = function (columns, key) {
 /**
  * 递归处理列的render函数（转换为统一的调用格式）
  */
-var processColumnRender = function (column, renderMode, headerWrap) {
+var processColumnRender = function (column, renderMode, headerWrap, headerAlign) {
     if (renderMode === void 0) { renderMode = "object"; }
     var processedColumn = __assign({}, column);
     if (headerWrap) {
         processedColumn.wrap =
             processedColumn.wrap === undefined ? headerWrap : processedColumn.wrap;
     }
+    // 应用表头对齐方式（仅当列没有设置 headerAlign 或 align 时）
+    if (headerAlign && !processedColumn.headerAlign && !processedColumn.align) {
+        processedColumn.headerAlign = headerAlign;
+    }
     // 处理当前列的render函数
     if (column.render) {
         var render_1 = column.render;
@@ -44,7 +48,7 @@ var processColumnRender = function (column, renderMode, headerWrap) {
     // 递归处理children
     if (column.children && Array.isArray(column.children)) {
         processedColumn.children = column.children.map(function (child) {
-            return processColumnRender(child, renderMode, headerWrap);
+            return processColumnRender(child, renderMode, headerWrap, headerAlign);
         });
     }
     return processedColumn;