zmdms-webui 2.3.6 → 2.3.8

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

@@ -8,7 +8,7 @@ import 'react/jsx-runtime';
 import 'zmdms-utils';
 import '../../node_modules/exceljs/dist/exceljs.min.js';
 import 'dayjs';
-import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, SCROLLBAR_SIZE, SCROLLBAR_PADDING } from '../utils/constants.js';
+import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, TEXT_PADDING, SCROLLBAR_SIZE, SCROLLBAR_PADDING } from '../utils/constants.js';
 import { drawCheckbox, wrapText, truncateText, drawFilterIcon, drawSortIcon } from '../utils/canvasDrawHelpers.js';
 import { getMaxDepth, flattenHeaders, calculateLayerHeights, getLeafColumns } from '../utils/multiHeaderHelpers.js';
 import { extractCellText } from '../utils/cellHelpers.js';
@@ -19,7 +19,7 @@ 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, 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 canvasRef = params.canvasRef, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, columns = params.columns, state = params.state, scrollState = params.scrollState, rowSelection = params.rowSelection, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, baseHeaderHeight = params.baseHeaderHeight, rowHeight = params.rowHeight, bordered = params.bordered, striped = params.striped, _a = params.headerAlign, headerAlign = _a === void 0 ? "center" : _a, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, getRowKey = params.getRowKey, resizeState = params.resizeState, getColumnWidth = params.getColumnWidth, _b = params.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _b === void 0 ? 8 : _b, mergeCellMap = params.mergeCellMap, _c = params.hasSummaryRow, hasSummaryRow = _c === void 0 ? false : _c, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _d = params.summaryFixed, summaryFixed = _d === void 0 ? false : _d;
     // 判断是否是多级表头
     var maxDepth = useMemo(function () { return getMaxDepth(columns); }, [columns]);
     var isMultiHeader = maxDepth > 1;
@@ -27,13 +27,13 @@ var useTableRender = function (params) {
     var flattenedHeaderRows = useMemo(function () { return (isMultiHeader ? flattenHeaders(columns) : []); }, [columns, isMultiHeader]);
     // 计算多级表头每一层的高度（考虑换行）
     // 使用 baseHeaderHeight 或默认计算出的基础高度
-    var _d = useMemo(function () {
+    var _e = useMemo(function () {
         var maxDepth = getMaxDepth(columns);
         // 如果提供了 baseHeaderHeight，使用它；否则根据 headerHeight 和深度计算
         var baseHeight = baseHeaderHeight ||
             (maxDepth > 1 ? Math.floor(headerHeight / maxDepth) : headerHeight);
         return calculateLayerHeights(columns, baseHeight, columnRenderInfos);
-    }, [columns, headerHeight, baseHeaderHeight, columnRenderInfos]), layerHeights = _d.layerHeights, layerStartY = _d.layerStartY;
+    }, [columns, headerHeight, baseHeaderHeight, columnRenderInfos]), layerHeights = _e.layerHeights, layerStartY = _e.layerStartY;
     var dpr = window.devicePixelRatio || 1;
     // ==================== 通用辅助函数 ====================
     /**
@@ -129,7 +129,6 @@ var useTableRender = function (params) {
         ctx.fillStyle = COLORS.text;
         ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
         ctx.textBaseline = "middle";
-        var textX = drawX + 5;
         var textY = headerHeight / 2;
         // 绘制选择框
         if (column.key === "__selection__") {
@@ -142,26 +141,65 @@ var useTableRender = function (params) {
         else {
             // 计算图标占用的宽度
             var iconArea = calculateIconArea(column, width);
-            // 计算文本可用宽度（左边距5px + 图标宽度 ）
-            var textMaxWidth = width - 5 - iconArea.iconsWidth;
+            // 确定表头对齐方式，优先使用列的 headerAlign，其次是全局 headerAlign
+            var columnHeaderAlign = column.headerAlign || headerAlign;
             // 绘制文本（如果 title 是 React 元素，跳过Canvas渲染，在覆盖层中渲染）
             if (!isValidElement(column.title)) {
                 var titleText = String(column.title || "");
+                // 根据对齐方式和图标情况设置文本位置
+                var textX_1;
+                var textMaxWidth = void 0;
+                if (iconArea.iconsWidth > 0) {
+                    // 有图标时，根据columnHeaderAlign调整文本位置和最大宽度
+                    if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else if (columnHeaderAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
+                    }
+                }
+                else {
+                    // 没有图标时，根据columnHeaderAlign设置对齐方式
+                    if (columnHeaderAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                    else if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + width / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                }
                 // 根据 ellipsis 和 wrap 属性处理文本
                 if (column.wrap) {
                     // 换行显示（支持\n和自动换行）
                     var lines = wrapText(ctx, titleText, textMaxWidth);
-                    var lineHeight_1 = 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）
@@ -178,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) {
@@ -286,44 +325,73 @@ var useTableRender = function (params) {
                 var iconArea = shouldShowIcons
                     ? calculateIconArea(column, width)
                     : { hasOrder: false, hasFilter: false, iconsWidth: 0 };
-                // 如果是最末级且有图标，文本左对齐；否则居中
+                // 确定表头对齐方式，优先使用列的 headerAlign，其次是全局 headerAlign
+                var columnHeaderAlign = column.headerAlign || headerAlign;
+                // 如果是最末级且有图标，需要调整对齐方式
                 if (isLastLevel && iconArea.iconsWidth > 0) {
-                    ctx.textAlign = "left";
-                    var textX_1 = drawX + 5;
-                    var textMaxWidth = width - 5 - iconArea.iconsWidth;
+                    // 有图标时，根据columnHeaderAlign调整文本位置和最大宽度
+                    var textX_2;
+                    var textMaxWidth = void 0;
+                    if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_2 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else if (columnHeaderAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_2 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_2 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
+                    }
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
                         var lines = wrapText(ctx, titleText, textMaxWidth);
-                        var lineHeight_2 = 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;
+                    // 没有图标时，根据columnHeaderAlign设置对齐方式
+                    var textX_3;
+                    if (columnHeaderAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_3 = drawX + TEXT_PADDING;
+                    }
+                    else if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_3 = drawX + width - TEXT_PADDING;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_3 = drawX + width / 2;
+                    }
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
-                        var lines = wrapText(ctx, titleText, width - 10); // 左右各5px
-                        var lineHeight_3 = 20;
+                        var lines = wrapText(ctx, titleText, width - TEXT_PADDING * 2); // 左右各TEXT_PADDING
+                        var lineHeight_3 = FONT_SIZE + 5; // 字体大小 + 行间距5px
                         var startY_3 = textY - ((lines.length - 1) * lineHeight_3) / 2;
                         lines.forEach(function (line, index) {
                             var lineY = startY_3 + index * lineHeight_3;
-                            ctx.fillText(line, textX_2, lineY);
+                            ctx.fillText(line, textX_3, lineY);
                         });
                     }
                     else {
-                        var truncated = truncateText(ctx, titleText, width - 10); // 左右各5px
-                        ctx.fillText(truncated, textX_2, textY);
+                        var truncated = truncateText(ctx, titleText, width - TEXT_PADDING * 2); // 左右各TEXT_PADDING
+                        ctx.fillText(truncated, textX_3, textY);
                     }
                 }
                 // 绘制筛选图标（仅在最末级表头显示）
@@ -533,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;
@@ -584,26 +672,40 @@ var useTableRender = function (params) {
                         : "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
                     ctx.textBaseline = "middle";
                     var align = column.align || "left";
-                    var textX_3 = drawX + 5;
+                    var textX_4 = drawX + TEXT_PADDING;
                     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 - 5;
+                        textX_4 = drawX + width - TEXT_PADDING;
                     }
                     else {
                         ctx.textAlign = "left";
                     }
                     // 处理文本显示（ellipsis 或 wrap）
-                    var maxWidth = width - 10; // 左右各5px
+                    var maxWidth = width - TEXT_PADDING * 2; // 左右各TEXT_PADDING
                     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;
@@ -611,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);
                             }
                         });
                     }
@@ -619,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"
@@ -833,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_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-                ctx.textBaseline = "middle";
-                setTextAlign(ctx, "center");
-                var textX = drawX + actualWidth / 2;
-                var textY = fixedY + rowHeight / 2;
-                ctx.fillText(indexText, textX, textY);
-                return;
+                }
+                // 合计行序号列继续执行后面的逻辑，可能显示"合计"文字
             }
             // 处理选择框列
             if (column.key === "__selection__") {
-                // 合计行选择框列显示空
-                if (rowType === "summary")
+                // 非合计行显示选择框
+                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;

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

@@ -9,7 +9,7 @@ import { getAllLeafColumns, findColumnByKey } from '../utils/columnHelpers.js';
  * 表格状态管理 Hook
  */
 var useTableState = function (params) {
-    var dataSource = params.dataSource, columns = params.columns, rowSelection = params.rowSelection, onFilterChange = params.onFilterChange;
+    var dataSource = params.dataSource, columns = params.columns, rowSelection = params.rowSelection, onFilterChange = params.onFilterChange, isAutoMerge = params.isAutoMerge;
     // 表格状态
     var _a = useState({
         sortField: null,
@@ -157,7 +157,7 @@ var useTableState = function (params) {
             }
         });
         // 应用排序
-        if (state.sortField && state.sortOrder) {
+        if (state.sortField && state.sortOrder && !isAutoMerge) {
             var column_2 = findColumnByKey(columns, state.sortField);
             if (column_2 && column_2.isOrder !== false) {
                 var sortFn_1 = typeof column_2.sorter === "function"
@@ -187,7 +187,14 @@ var useTableState = function (params) {
             }
         }
         return data;
-    }, [dataSource, columns, state.filters, state.sortField, state.sortOrder]);
+    }, [
+        dataSource,
+        columns,
+        state.filters,
+        state.sortField,
+        state.sortOrder,
+        isAutoMerge,
+    ]);
     // 处理过滤变化
     var handleFilterChange = useMemoizedFn(function (columnKey, values) {
         var _a;

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";
     /**
      * 是否固定列
      */
@@ -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 | undefined>;
+    /**
+     * 导出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;

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

@@ -38,6 +38,13 @@ var FONT_SIZE = 13;
 var FONT_WEIGHT = "400"; // 正常字重，避免过细导致不清晰
 // 图标尺寸
 var CHECKBOX_SIZE = 16;
-var SORT_ICON_SIZE = 6;
+var SORT_ICON_SIZE = 6;
+var SORT_ICON_WIDTH = 15; // 排序图标宽度（用于表头宽度计算）
+var FILTER_ICON_WIDTH = 15; // 筛选图标宽度（用于表头宽度计算）
+// 间距和内边距
+var ICON_SPACING = 4; // 图标之间的间距
+var TEXT_PADDING = 5; // 文本内边距
+// 行高计算
+var LINE_HEIGHT = FONT_SIZE + 5; // 字体大小 + 行间距5px
 
-export { CHECKBOX_SIZE, COLORS, DEFAULT_COLUMN_WIDTH, DEFAULT_SELECTION_COLUMN_WIDTH, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, MIN_SCROLLBAR_SIZE, SCROLLBAR_PADDING, SCROLLBAR_SIZE, SORT_ICON_SIZE };
+export { CHECKBOX_SIZE, COLORS, DEFAULT_COLUMN_WIDTH, DEFAULT_SELECTION_COLUMN_WIDTH, FILTER_ICON_WIDTH, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, ICON_SPACING, LINE_HEIGHT, MIN_SCROLLBAR_SIZE, SCROLLBAR_PADDING, SCROLLBAR_SIZE, SORT_ICON_SIZE, SORT_ICON_WIDTH, TEXT_PADDING };

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

@@ -104,26 +104,43 @@ var toggleSelectAll = function (dataSource, isAllSelected, getRowKey, getCheckbo
 };
 /**
  * 处理排序点击
+ * 优化后的逻辑：
+ * - 点击上箭头：升序 → 降序 → 取消排序 → 升序...（循环）
+ * - 点击下箭头：降序 → 升序 → 取消排序 → 降序...（循环）
  */
 var handleSortClick = function (clickedUpper, currentSortField, currentSortOrder, columnKey) {
     var newOrder = null;
+    // 判断当前列是否已经是排序列
+    var isCurrentColumn = currentSortField === columnKey;
     if (clickedUpper) {
-        // 点击上箭头：升序
-        if (currentSortField === columnKey && currentSortOrder === "ascend") {
-            newOrder = null; // 取消排序
-        }
-        else {
+        // 点击上箭头的循环逻辑：升序 → 降序 → 取消排序
+        if (!isCurrentColumn || currentSortOrder === null) {
+            // 没有排序或不是当前列，设置为升序
             newOrder = "ascend";
         }
+        else if (currentSortOrder === "ascend") {
+            // 已经是升序，切换到降序
+            newOrder = "descend";
+        }
+        else if (currentSortOrder === "descend") {
+            // 已经是降序，取消排序
+            newOrder = null;
+        }
     }
     else {
-        // 点击下箭头：降序
-        if (currentSortField === columnKey && currentSortOrder === "descend") {
-            newOrder = null; // 取消排序
-        }
-        else {
+        // 点击下箭头的循环逻辑：降序 → 升序 → 取消排序
+        if (!isCurrentColumn || currentSortOrder === null) {
+            // 没有排序或不是当前列，设置为降序
             newOrder = "descend";
         }
+        else if (currentSortOrder === "descend") {
+            // 已经是降序，切换到升序
+            newOrder = "ascend";
+        }
+        else if (currentSortOrder === "ascend") {
+            // 已经是升序，取消排序
+            newOrder = null;
+        }
     }
     return {
         sortField: newOrder ? columnKey : null,

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

@@ -1,3 +1,5 @@
+import { FONT_SIZE, FONT_FAMILY, TEXT_PADDING, LINE_HEIGHT, FILTER_ICON_WIDTH, SORT_ICON_WIDTH, ICON_SPACING } from './constants.js';
+
 /**
  * 多级表头工具函数
  */
@@ -96,13 +98,6 @@ function calculateLayerHeights(columns, baseHeaderHeight, columnRenderInfos) {
     }
     var flattenedHeaderRows = flattenHeaders(columns);
     var leafColumns = getLeafColumns(columns);
-    var FONT_SIZE = 13;
-    var FONT_FAMILY = '"Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-    var LINE_HEIGHT = 20;
-    var FILTER_ICON_WIDTH = 15;
-    var SORT_ICON_WIDTH = 15;
-    var ICON_SPACING = 4;
-    var TEXT_PADDING = 5;
     // 创建临时canvas用于测量文本
     var tempCanvas = document.createElement("canvas");
     var ctx = tempCanvas.getContext("2d");
@@ -187,9 +182,10 @@ function calculateLayerHeights(columns, baseHeaderHeight, columnRenderInfos) {
             }
             maxLines = Math.max(maxLines, totalLines);
         });
-        // 这一层的高度 = 基础高度 + (额外行数 * 行高)
+        // 当有换行时：上边距(5px) + 行数 * 行高 + 下边距(5px)
+        // 当没有换行时：使用原始的 baseHeaderHeight
         var layerHeight = maxLines > 1
-            ? baseHeaderHeight + (maxLines - 1) * LINE_HEIGHT
+            ? 10 + maxLines * LINE_HEIGHT // 上下边距各5px，共10px
             : baseHeaderHeight;
         layerHeights.push(layerHeight);
     });