zmdms-webui 2.3.4 → 2.3.6

package/dist/es/canvastable/canvasTable.js

@@ -39,7 +39,7 @@ import { getTableColumns } from '../table/utils.js';
 import DynamicSetting from '../dynamicsetting/dynamicSetting.js';
 
 function CanvasTable(props) {
-    var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rowKey, rowKey = _c === void 0 ? "id" : _c, _d = props.height, height = _d === void 0 ? 600 : _d, width = props.width, _e = props.rowHeight, rowHeight = _e === void 0 ? 36 : _e, _f = props.headerHeight, headerHeight = _f === void 0 ? 36 : _f, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _g = props.bordered, bordered = _g === void 0 ? true : _g, _h = props.striped, striped = _h === void 0 ? false : _h, _j = props.emptyText, emptyText = _j === void 0 ? "暂无数据" : _j, style = props.style, className = props.className, _k = props.loading, loading = _k === void 0 ? false : _k, _l = props.isContextMenu, isContextMenu = _l === void 0 ? true : _l, isFullscreenHandle = props.isFullscreenHandle, _m = props.mode, mode = _m === void 0 ? "index" : _m, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _o = props.isIndexMerge, isIndexMerge = _o === void 0 ? true : _o, _p = props.isSelectionMerge, isSelectionMerge = _p === void 0 ? false : _p, _q = props.renderMode, renderMode = _q === void 0 ? "object" : _q, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _r = props.summaryFixed, summaryFixed = _r === void 0 ? false : _r, _s = props.isAutoScrollY, isAutoScrollY = _s === void 0 ? false : _s, _t = props.autoScrollYMarginBottom, autoScrollYMarginBottom = _t === void 0 ? 65 : _t, canvasTableId = props.canvasTableId;
+    var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rowKey, rowKey = _c === void 0 ? "id" : _c, _d = props.height, height = _d === void 0 ? 600 : _d, width = props.width, _e = props.rowHeight, rowHeight = _e === void 0 ? 36 : _e, _f = props.headerHeight, headerHeight = _f === void 0 ? 36 : _f, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _g = props.bordered, bordered = _g === void 0 ? true : _g, _h = props.striped, striped = _h === void 0 ? false : _h, _j = props.emptyText, emptyText = _j === void 0 ? "暂无数据" : _j, style = props.style, className = props.className, _k = props.loading, loading = _k === void 0 ? false : _k, _l = props.isContextMenu, isContextMenu = _l === void 0 ? true : _l, isFullscreenHandle = props.isFullscreenHandle, _m = props.mode, mode = _m === void 0 ? "index" : _m, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _o = props.isIndexMerge, isIndexMerge = _o === void 0 ? true : _o, _p = props.isSelectionMerge, isSelectionMerge = _p === void 0 ? false : _p, _q = props.renderMode, renderMode = _q === void 0 ? "object" : _q, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _r = props.summaryFixed, summaryFixed = _r === void 0 ? false : _r, _s = props.isAutoScrollY, isAutoScrollY = _s === void 0 ? false : _s, _t = props.autoScrollYMarginBottom, autoScrollYMarginBottom = _t === void 0 ? 65 : _t, canvasTableId = props.canvasTableId, headerWrap = props.headerWrap;
     var canvasRef = useRef(null);
     var containerRef = useRef(null);
     var filterPopoverRef = useRef(null);
@@ -68,11 +68,6 @@ function CanvasTable(props) {
     }), defaultDynamicList = _u.defaultDynamicList, currentDynamicList = _u.currentDynamicList, onCurrentListChange = _u.onCurrentListChange, dynamicSettingRef = _u.dynamicSettingRef;
     // 根据动态列配置处理columns
     var dynamicColumns = useMemo(function () { return getTableColumns(columns, currentDynamicList); }, [columns, currentDynamicList]).columns;
-    // 计算表头动态高度（支持wrap换行）
-    var calculatedHeaderHeight = useHeaderHeight({
-        columns: (dynamicColumns || columns),
-        headerHeight: headerHeight,
-    });
     // 内部列宽状态（未开启动态配置时使用）
     var _v = useState({}), internalColumnWidths = _v[0], setInternalColumnWidths = _v[1];
     // 处理选中框列、序号列等
@@ -85,6 +80,7 @@ function CanvasTable(props) {
         dynamicKey: dynamicKey,
         renderMode: renderMode,
         dynamicSettingRef: dynamicSettingRef,
+        headerWrap: headerWrap,
     });
     // 表格状态管理
     var _w = useTableState({
@@ -109,8 +105,25 @@ function CanvasTable(props) {
         columns: processedColumns,
         dataSource: newDataSource,
     }), finalDataSource = _y.finalDataSource, hasSummaryRow = _y.hasSummaryRow;
-    // 计算列的渲染信息
-    var columnRenderInfos = useMemo(function () { return calculateColumnRenderInfos(processedColumns); }, [processedColumns]);
+    // 自动高度计算（需要在容器尺寸计算之前）
+    var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId);
+    // 监听容器尺寸变化（提前计算，用于列宽自适应）
+    var containerSize = useContainerSize({
+        containerRef: containerRef,
+        width: width,
+        height: isAutoScrollY ? autoHeight || height : height,
+    });
+    var containerWidth = containerSize.width;
+    var containerHeight = containerSize.height;
+    // 计算列的渲染信息（使用容器宽度进行自适应填充）
+    var columnRenderInfos = useMemo(function () { return calculateColumnRenderInfos(processedColumns, containerWidth); }, [processedColumns, containerWidth]);
+    // 计算表头动态高度（支持wrap换行）
+    // 注意：必须在 columnRenderInfos 计算之后，以便使用实际的列宽
+    var calculatedHeaderHeight = useHeaderHeight({
+        columns: processedColumns,
+        headerHeight: headerHeight,
+        columnRenderInfos: columnRenderInfos,
+    });
     // 计算合并单元格信息
     var mergeCellMap = useMergeCells({
         dataSource: finalDataSource,
@@ -123,16 +136,6 @@ function CanvasTable(props) {
     var totalHeight = useMemo(function () {
         return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
     }, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
-    // 自动高度计算
-    var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId);
-    // 监听容器尺寸变化
-    var containerSize = useContainerSize({
-        containerRef: containerRef,
-        width: width,
-        height: isAutoScrollY ? autoHeight || height : height,
-    });
-    var containerWidth = containerSize.width;
-    var containerHeight = containerSize.height;
     // 计算滚动条指标
     var _z = useScrollbarMetrics({
         containerWidth: containerWidth,
@@ -303,7 +306,8 @@ function CanvasTable(props) {
     }), handleCanvasMouseDown = _3.handleCanvasMouseDown, handleCanvasMouseMove = _3.handleCanvasMouseMove, handleCanvasMouseUp = _3.handleCanvasMouseUp, handleCanvasMouseLeave = _3.handleCanvasMouseLeave, handleCanvasContextMenu = _3.handleCanvasContextMenu;
     // 渲染表格
     useTableRender(__assign(__assign({ canvasRef: canvasRef, processedDataSource: finalDataSource, columnRenderInfos: columnRenderInfos, columns: processedColumns, // 传递原始columns用于渲染多级表头
-        state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, rowHeight: rowHeight, bordered: bordered, striped: striped }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed }));
+        state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, baseHeaderHeight: headerHeight, // 传入原始基础高度用于计算每层高度
+        rowHeight: rowHeight, bordered: bordered, striped: striped }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed }));
     // 单元格覆盖层
     var cellOverlays = useTableCellOverlay({
         canvasRef: canvasRef,
@@ -365,6 +369,11 @@ function CanvasTable(props) {
                         display: "block",
                         // cursor 由 useTableInteraction 动态管理
                         touchAction: "none",
+                        // 优化文本渲染 - 使用系统级文本渲染优化
+                        fontSmooth: "always",
+                        WebkitFontSmoothing: "antialiased",
+                        MozOsxFontSmoothing: "grayscale",
+                        textRendering: "optimizeLegibility",
                     } }), dynamicKey ? (jsx(DynamicSetting, { parentDynamicKey: TABLE_DYNAMIC_KEY, dynamicKey: dynamicKey, defaultList: defaultDynamicList, onCurrentListChange: onCurrentListChange, ref: dynamicSettingRef, hiddenOperationIcon: true, isMore: true, isFixed: true, isDimensionDynamic: isDimensionDynamic })) : null, jsx(EmptyPlaceholder, { visible: finalDataSource.length === 0, text: emptyText, headerHeight: calculatedHeaderHeight }), jsx(HeaderOverlay, { overlays: headerOverlays }), jsx(CellOverlay, { overlays: cellOverlays }), filterPopoverElement, jsx(Tooltip, { visible: state.tooltip.visible, content: state.tooltip.content, position: state.tooltip.position }), jsx(BadgePopover, { visible: state.badgePopover.visible, content: state.badgePopover.content, position: state.badgePopover.position, popoverRef: badgePopoverRef }), menuId ? (jsx(CanvasTableMenu, { menuId: menuId, containerRef: containerRef, isFullscreenHandle: isFullscreenHandle, tableMenuRef: tableMenuRef, onCopy: handleCopy, onExport: dynamicKey ? exportExcel : undefined })) : null] })) })));
 }
 

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

@@ -1,14 +1,14 @@
 import { __spreadArray } from '../../_virtual/_tslib.js';
 import { useState, useEffect } from 'react';
-import { getMaxDepth } from '../utils/multiHeaderHelpers.js';
+import { getMaxDepth, calculateLayerHeights } from '../utils/multiHeaderHelpers.js';
 
 var FONT_SIZE = 13;
-var FONT_FAMILY = "Arial, sans-serif";
+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 = 16;
+var TEXT_PADDING = 5;
 /**
  * 计算文本在给定宽度下需要的行数
  */
@@ -46,12 +46,11 @@ var calculateTextLines = function (ctx, text, maxWidth) {
 /**
  * 计算单个列标题需要的行数
  */
-var calculateColumnLines = function (ctx, column) {
+var calculateColumnLines = function (ctx, column, columnWidth) {
     if (!column.wrap || !column.title) {
         return 1;
     }
     var titleText = String(column.title);
-    var columnWidth = column.width || 100;
     // 计算图标占用的宽度
     var hasOrder = column.isOrder !== false;
     var hasFilter = column.isFilter !== false;
@@ -69,18 +68,19 @@ var calculateColumnLines = function (ctx, column) {
 };
 /**
  * Hook: 计算表头动态高度
- * 支持多级表头
+ * 支持多级表头和文本换行
  */
 var useHeaderHeight = function (params) {
-    var columns = params.columns, headerHeight = params.headerHeight;
+    var columns = params.columns, headerHeight = params.headerHeight, columnRenderInfos = params.columnRenderInfos;
     var _a = useState(headerHeight), calculatedHeight = _a[0], setCalculatedHeight = _a[1];
     useEffect(function () {
         var calculateHeight = function () {
             // 获取多级表头的最大深度
             var maxDepth = getMaxDepth(columns);
-            // 如果是多级表头，每层使用基础表头高度
+            // 如果是多级表头，使用 calculateLayerHeights 计算总高度
             if (maxDepth > 1) {
-                return headerHeight * maxDepth;
+                var layerHeights = calculateLayerHeights(columns, headerHeight, columnRenderInfos).layerHeights;
+                return layerHeights.reduce(function (sum, h) { return sum + h; }, 0);
             }
             // 单层表头，考虑文本换行
             var tempCanvas = document.createElement("canvas");
@@ -88,15 +88,19 @@ var useHeaderHeight = function (params) {
             if (!ctx)
                 return headerHeight;
             ctx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
-            // 计算所有列需要的最大行数
-            var maxLines = Math.max.apply(Math, __spreadArray([1], columns.map(function (column) { return calculateColumnLines(ctx, column); }), false));
+            var maxLines = Math.max.apply(Math, __spreadArray([1], columns.map(function (column, index) {
+                var _a;
+                // 使用实际的列宽（如果有的话）
+                var columnWidth = ((_a = columnRenderInfos === null || columnRenderInfos === void 0 ? void 0 : columnRenderInfos[index]) === null || _a === void 0 ? void 0 : _a.width) || column.width || 100;
+                return calculateColumnLines(ctx, column, columnWidth);
+            }), false));
             // 基础高度 + (额外行数 * 行高)
             return maxLines > 1
                 ? headerHeight + (maxLines - 1) * LINE_HEIGHT
                 : headerHeight;
         };
         setCalculatedHeight(calculateHeight());
-    }, [columns, headerHeight]);
+    }, [columns, headerHeight, columnRenderInfos]);
     return calculatedHeight;
 };
 

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

@@ -1,6 +1,6 @@
 import { __assign } from '../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 import 'zmdms-utils';
 import 'dayjs';
 import { findColumnByKey } from '../utils/columnHelpers.js';
@@ -20,6 +20,8 @@ import '../components/ColumnDynamic.js';
  */
 var useBadgePopover = function (params) {
     var badgePopover = params.badgePopover, tooltip = params.tooltip, scrollTop = params.scrollTop, scrollLeft = params.scrollLeft, setState = params.setState;
+    // 使用 ref 记录上一次的滚动位置
+    var prevScrollRef = useRef({ scrollTop: scrollTop, scrollLeft: scrollLeft });
     // 关闭badge弹窗
     var handleCloseBadgePopover = useCallback(function () {
         setState(function (prev) { return (__assign(__assign({}, prev), { badgePopover: {
@@ -30,7 +32,10 @@ var useBadgePopover = function (params) {
     }, [setState]);
     // 滚动时关闭badge弹窗和tooltip
     useEffect(function () {
-        if (badgePopover.visible || tooltip.visible) {
+        // 只有在滚动位置真正变化时才关闭弹窗
+        var scrollChanged = prevScrollRef.current.scrollTop !== scrollTop ||
+            prevScrollRef.current.scrollLeft !== scrollLeft;
+        if (scrollChanged && (badgePopover.visible || tooltip.visible)) {
             setState(function (prev) { return (__assign(__assign({}, prev), { badgePopover: {
                     visible: false,
                     content: "",
@@ -42,6 +47,8 @@ var useBadgePopover = function (params) {
                     cellInfo: null,
                 } })); });
         }
+        // 更新上一次的滚动位置
+        prevScrollRef.current = { scrollTop: scrollTop, scrollLeft: scrollLeft };
     }, [scrollTop, scrollLeft, setState, badgePopover.visible, tooltip.visible]);
     return {
         handleCloseBadgePopover: handleCloseBadgePopover,

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

@@ -16,7 +16,7 @@ import '../../node_modules/screenfull/index.js';
 import ColumnDynamic from '../components/ColumnDynamic.js';
 
 var useProcessedColumns = function (params) {
-    var columns = params.columns, dynamicColumns = params.dynamicColumns, mode = params.mode, rowSelection = params.rowSelection, internalColumnWidths = params.internalColumnWidths, dynamicKey = params.dynamicKey, _a = params.renderMode, renderMode = _a === void 0 ? "object" : _a, dynamicSettingRef = params.dynamicSettingRef;
+    var columns = params.columns, dynamicColumns = params.dynamicColumns, mode = params.mode, rowSelection = params.rowSelection, internalColumnWidths = params.internalColumnWidths, dynamicKey = params.dynamicKey, _a = params.renderMode, renderMode = _a === void 0 ? "object" : _a, dynamicSettingRef = params.dynamicSettingRef, headerWrap = params.headerWrap;
     return useMemo(function () {
         var cols = __spreadArray([], (dynamicColumns || columns), true);
         // 添加序号列
@@ -79,7 +79,7 @@ var useProcessedColumns = function (params) {
         }
         // 处理render函数
         return cols.map(function (col) {
-            return processColumnRender(col, renderMode);
+            return processColumnRender(col, renderMode, headerWrap);
         });
     }, [
         dynamicColumns,

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

@@ -8,6 +8,7 @@ import 'react/jsx-runtime';
 import { plus, exactRound, addThousedSeparator } from 'zmdms-utils';
 import '../../node_modules/exceljs/dist/exceljs.min.js';
 import 'dayjs';
+import { getAllLeafColumns } from '../utils/columnHelpers.js';
 
 /**
  * 合计行计算 Hook
@@ -15,45 +16,38 @@ import 'dayjs';
 var useSummaryRow = function (params) {
     var columns = params.columns, dataSource = params.dataSource;
     var summaryRow = useMemo(function () {
-        var hasSummary = columns.some(function (col) { return col.isSummary; });
+        // 先扁平化多级表头，获取所有叶子列
+        var leafColumns = getAllLeafColumns(columns);
+        var hasSummary = leafColumns.some(function (col) { return col.isSummary; });
         if (!hasSummary)
             return null;
         var summaryRecord = {};
         // 找到第一个数据列（非序号列、非选择框列）
         var firstDataColIndex = -1;
-        for (var i = 0; i < columns.length; i++) {
-            var col = columns[i];
+        for (var i = 0; i < leafColumns.length; i++) {
+            var col = leafColumns[i];
             if (col.key !== "__index__" && col.key !== "__selection__") {
                 firstDataColIndex = i;
                 break;
             }
         }
-        columns.forEach(function (column, colIndex) {
+        leafColumns.forEach(function (column, colIndex) {
             var dataIndex = column.dataIndex || column.key;
             if (column.isSummary) {
                 var calculatedSum = void 0;
-                if (column.totalCalcCallback) {
-                    // 使用自定义计算回调
-                    var values = dataSource
-                        .filter(function (record) { return !record[IS_SUMMARY]; })
-                        .map(function (record) { return record[dataIndex]; });
-                    calculatedSum = column.totalCalcCallback(null, values);
-                }
-                else {
-                    // 默认计算逻辑：数值求和
-                    var sum_1 = 0;
-                    dataSource.forEach(function (record) {
-                        var value = record[dataIndex];
-                        var num = typeof value === "string" ? parseFloat(value) : value;
-                        if (!isNaN(num) &&
-                            num !== null &&
-                            num !== undefined &&
-                            !record[IS_SUMMARY]) {
-                            sum_1 = plus(sum_1, num);
-                        }
-                    });
-                    calculatedSum = sum_1;
-                }
+                // 默认计算逻辑：数值求和
+                var sum_1 = 0;
+                dataSource.forEach(function (record) {
+                    var value = record[dataIndex];
+                    var num = typeof value === "string" ? parseFloat(value) : value;
+                    if (!isNaN(num) &&
+                        num !== null &&
+                        num !== undefined &&
+                        !record[IS_SUMMARY]) {
+                        sum_1 = plus(sum_1, num);
+                    }
+                });
+                calculatedSum = sum_1;
                 // 应用格式化（仅在没有自定义回调或回调返回数值时）
                 var formattedSum = calculatedSum;
                 if (typeof calculatedSum === "number") {
@@ -74,6 +68,12 @@ var useSummaryRow = function (params) {
                 summaryRecord[dataIndex] = "";
             }
         });
+        leafColumns.forEach(function (column) {
+            if (column.totalCalcCallback) {
+                var dataIndex = column.dataIndex || column.key;
+                summaryRecord[dataIndex] = column.totalCalcCallback(summaryRecord[dataIndex], summaryRecord);
+            }
+        });
         summaryRecord[IS_SUMMARY] = true;
         return summaryRecord;
     }, [columns, dataSource]);

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

@@ -187,7 +187,7 @@ var useTableInteraction = function (params) {
         var badgeProps = typeof column.badge === "function"
             ? column.badge(record)
             : column.badge;
-        if (!badgeProps || !badgeProps.text)
+        if (!badgeProps)
             return false;
         // 计算单元格的位置和大小
         var cellX = fixed ? fixedLeft : colX - scrollState.scrollLeft;
@@ -198,10 +198,12 @@ var useTableInteraction = function (params) {
         // 使用工具函数判断点击位置是否在三角形区域内
         var isInTriangle = isPointInTriangle(x, y, cellX, cellY, cellWidth, cellHeight, position);
         if (isInTriangle) {
+            // 获取要显示的内容
+            var popoverContent_1 = badgeProps.title || "";
             // 如果已经显示相同内容的弹框，则关闭；否则显示新弹框
             setState(function (prev) {
                 if (prev.badgePopover.visible &&
-                    prev.badgePopover.content === badgeProps.text) {
+                    prev.badgePopover.content === popoverContent_1) {
                     return __assign(__assign({}, prev), { badgePopover: {
                             visible: false,
                             content: "",
@@ -211,7 +213,7 @@ var useTableInteraction = function (params) {
                 else {
                     return __assign(__assign({}, prev), { badgePopover: {
                             visible: true,
-                            content: badgeProps.text,
+                            content: popoverContent_1,
                             position: { x: clientX + 10, y: clientY + 10 },
                         } });
                 }

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,9 @@ 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 textX = drawX + 5;
         var textY = headerHeight / 2;
         // 绘制选择框
         if (column.key === "__selection__") {
@@ -135,8 +142,8 @@ var useTableRender = function (params) {
         else {
             // 计算图标占用的宽度
             var iconArea = calculateIconArea(column, width);
-            // 计算文本可用宽度（左边距16px + 图标宽度 ）
-            var textMaxWidth = width - 16 - iconArea.iconsWidth;
+            // 计算文本可用宽度（左边距5px + 图标宽度 ）
+            var textMaxWidth = width - 5 - iconArea.iconsWidth;
             // 绘制文本（如果 title 是 React 元素，跳过Canvas渲染，在覆盖层中渲染）
             if (!isValidElement(column.title)) {
                 var titleText = String(column.title || "");
@@ -205,7 +212,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 +253,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 +277,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 || "");
@@ -281,16 +289,42 @@ var useTableRender = function (params) {
                 // 如果是最末级且有图标，文本左对齐；否则居中
                 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);
+                    var textX_1 = drawX + 5;
+                    var textMaxWidth = width - 5 - iconArea.iconsWidth;
+                    // 根据 wrap 属性处理文本
+                    if (column.wrap) {
+                        // 换行显示（支持\n和自动换行）
+                        var lines = wrapText(ctx, titleText, textMaxWidth);
+                        var lineHeight_2 = 20;
+                        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);
+                        });
+                    }
+                    else {
+                        var truncated = truncateText(ctx, titleText, textMaxWidth);
+                        ctx.fillText(truncated, textX_1, textY);
+                    }
                 }
                 else {
                     ctx.textAlign = "center";
-                    var textX = drawX + width / 2;
-                    var truncated = truncateText(ctx, titleText, width - 16);
-                    ctx.fillText(truncated, textX, textY);
+                    var textX_2 = drawX + width / 2;
+                    // 根据 wrap 属性处理文本
+                    if (column.wrap) {
+                        // 换行显示（支持\n和自动换行）
+                        var lines = wrapText(ctx, titleText, width - 10); // 左右各5px
+                        var lineHeight_3 = 20;
+                        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);
+                        });
+                    }
+                    else {
+                        var truncated = truncateText(ctx, titleText, width - 10); // 左右各5px
+                        ctx.fillText(truncated, textX_2, textY);
+                    }
                 }
                 // 绘制筛选图标（仅在最末级表头显示）
                 if (iconArea.hasFilter) {
@@ -315,20 +349,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);
                 });
             });
         }
@@ -370,8 +415,25 @@ var useTableRender = function (params) {
             (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
             fixedBottomHeight -
             fixedSummaryHeight;
-        // 跳过不在可视区域的行，但允许部分可见的行
-        if (y + rowHeight < headerHeight || y >= effectiveHeight) {
+        // 提前检查这一行是否有合并单元格，找出最大的rowSpan
+        var maxRowSpanInRow = 1;
+        if (mergeCellMap) {
+            columnRenderInfos.forEach(function (_, colIndex) {
+                var mergeCellKey = "".concat(rowIndex, "-").concat(colIndex);
+                var mergeInfo = mergeCellMap.get(mergeCellKey);
+                // 只考虑主单元格（不是被合并的单元格）
+                if (mergeInfo &&
+                    !mergeInfo.skip &&
+                    mergeInfo.rowSpan > maxRowSpanInRow) {
+                    maxRowSpanInRow = mergeInfo.rowSpan;
+                }
+            });
+        }
+        // 计算这一行的实际高度（考虑合并单元格）
+        var actualRowHeight = rowHeight * maxRowSpanInRow;
+        // 跳过不在可视区域的行
+        // 关键：使用合并后的实际高度判断，确保合并单元格的最后一行还在可视区域内时继续渲染
+        if (y + actualRowHeight < headerHeight || y >= effectiveHeight) {
             return;
         }
         var recordKey = getRowKey(record, rowIndex);
@@ -430,7 +492,10 @@ var useTableRender = function (params) {
             ctx.beginPath();
             // 裁剪区域：确保不覆盖表头，从 headerHeight 开始
             var clipY = Math.max(y, headerHeight);
-            var clipHeight = Math.min(cellHeight, y + cellHeight - headerHeight);
+            // 计算单元格实际底部位置，并限制在可视区域内
+            var cellBottom = Math.min(y + cellHeight, effectiveHeight);
+            // 裁剪高度 = 单元格可见底部 - 裁剪起始位置
+            var clipHeight = Math.max(0, cellBottom - clipY);
             // 对于非fixed列，还需要裁剪掉被fixed列遮挡的部分
             var clipX = drawX;
             var clipWidth = width;
@@ -476,9 +541,12 @@ var useTableRender = function (params) {
             else {
                 var dataIndex = column.dataIndex || column.key;
                 var cellValue = record[dataIndex];
+                // 检查是否是合计行
+                var isSummaryRow = record[IS_SUMMARY];
                 // 检查是否有 render 函数且返回自定义 ReactNode
                 var shouldRenderInCanvas = true;
-                if (column.render) {
+                // 对于合计行，不应用render函数，直接显示原始数据
+                if (column.render && !isSummaryRow) {
                     var rendered = column.render(cellValue, record, rowIndex);
                     // 如果返回的不是字符串或数字，说明是自定义组件，应该在覆盖层渲染，不在 Canvas 渲染
                     if (typeof rendered !== "string" &&
@@ -491,52 +559,59 @@ var useTableRender = function (params) {
                 // 只有在需要在 Canvas 中渲染时才绘制文本
                 if (shouldRenderInCanvas) {
                     // 应用格式化（日期、精度、千分符）
-                    var cellText = extractCellText({
-                        cellValue: cellValue,
-                        record: record,
-                        rowIndex: rowIndex,
-                        renderFn: column.render,
-                    });
-                    // 如果没有自定义render，应用格式化
-                    if (!column.render) {
+                    var cellText = void 0;
+                    // 对于合计行，直接使用格式化函数，不应用render
+                    if (isSummaryRow) {
                         cellText = formatCellValue(cellValue, column);
                     }
+                    else {
+                        cellText = extractCellText({
+                            cellValue: cellValue,
+                            record: record,
+                            rowIndex: rowIndex,
+                            renderFn: column.render,
+                        });
+                        // 如果没有自定义render，应用格式化
+                        if (!column.render) {
+                            cellText = formatCellValue(cellValue, column);
+                        }
+                    }
                     // 绘制文本
                     ctx.fillStyle = COLORS.text;
                     // 合计行字体加粗
                     ctx.font = record[IS_SUMMARY]
                         ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
-                        : "".concat(FONT_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_1 = drawX + 16;
+                    var textX_3 = drawX + 5;
                     if (align === "center") {
                         ctx.textAlign = "center";
-                        textX_1 = drawX + width / 2;
+                        textX_3 = drawX + width / 2;
                     }
                     else if (align === "right") {
                         ctx.textAlign = "right";
-                        textX_1 = drawX + width - 16;
+                        textX_3 = 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_2 = FONT_SIZE + 4; // 行高
-                        var totalHeight = lines.length * lineHeight_2;
+                        var lineHeight_4 = FONT_SIZE + 4; // 行高
+                        var totalHeight = lines.length * lineHeight_4;
                         // 使用合并后的单元格高度计算垂直居中位置
-                        var startY_2 = y + (cellHeight - totalHeight) / 2 + lineHeight_2 / 2;
+                        var startY_4 = y + (cellHeight - totalHeight) / 2 + lineHeight_4 / 2;
                         lines.forEach(function (line, lineIndex) {
-                            var lineY = startY_2 + lineIndex * lineHeight_2;
+                            var lineY = startY_4 + lineIndex * lineHeight_4;
                             // 只绘制在单元格可见区域内的文本
                             if (lineY >= y && lineY <= y + cellHeight) {
-                                ctx.fillText(line, textX_1, lineY);
+                                ctx.fillText(line, textX_3, lineY);
                             }
                         });
                     }
@@ -544,15 +619,13 @@ var useTableRender = function (params) {
                         // 省略显示 - 使用合并后的单元格高度
                         var textY = y + cellHeight / 2;
                         var truncatedText = truncateText(ctx, cellText, maxWidth);
-                        ctx.fillText(truncatedText, textX_1, textY);
+                        ctx.fillText(truncatedText, textX_3, textY);
                     }
                     else {
                         // 不处理，直接显示 - 使用合并后的单元格高度
                         var textY = y + cellHeight / 2;
-                        ctx.fillText(cellText, textX_1, textY);
+                        ctx.fillText(cellText, textX_3, textY);
                     }
-                    // 绘制角标（跳过合计行）
-                    var isSummaryRow = hasSummaryRow && rowIndex === processedDataSource.length - 1;
                     if (column.badge && !isSummaryRow) {
                         var badgeProps = typeof column.badge === "function"
                             ? column.badge(record)
@@ -765,7 +838,7 @@ var useTableRender = function (params) {
                     return;
                 var indexText = String(rowIndex + 1);
                 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";
                 setTextAlign(ctx, "center");
                 var textX = drawX + actualWidth / 2;
@@ -790,7 +863,9 @@ var useTableRender = function (params) {
             var cellText = formatCellValue(cellValue, column);
             // 检查是否有render函数且返回自定义ReactNode
             var shouldRenderInCanvas = true;
-            if (column.render) {
+            // 对于合计行，不应用render函数，直接显示原始数据
+            var isSummaryRowFixed = rowType === "summary";
+            if (column.render && !isSummaryRowFixed) {
                 var rendered = column.render(cellValue, record, rowIndex);
                 // 如果返回的不是字符串或数字，说明是自定义组件，应该在覆盖层渲染，不在 Canvas 渲染
                 if (typeof rendered !== "string" &&
@@ -807,11 +882,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);
@@ -1160,6 +1235,9 @@ var useTableRender = function (params) {
         canvas.style.width = "".concat(displayWidth, "px");
         canvas.style.height = "".concat(displayHeight, "px");
         ctx.scale(dpr, dpr);
+        // 优化文字渲染质量，防止模糊
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
         // 清空画布
         ctx.clearRect(0, 0, displayWidth, displayHeight);
         // 绘制背景
@@ -1182,9 +1260,39 @@ 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) // 如果合计行固定，需要排除它
         );
+        // 关键修复：向前扩展渲染范围，检查是否有合并单元格延伸到可视区域
+        // 策略：对每一列独立检查，找到该列最靠前的需要渲染的主合并单元格
+        if (mergeCellMap && scrollStartRow > fixedTopRowsCount) {
+            var originalStartRow = scrollStartRow;
+            var minStartRow = scrollStartRow;
+            // 对每一列独立检查
+            for (var colIndex = 0; colIndex < columnRenderInfos.length; colIndex++) {
+                // 向前查找这一列的主合并单元格，最多向前查找20行
+                for (var checkRow = originalStartRow - 1; checkRow >= fixedTopRowsCount && checkRow >= originalStartRow - 20; checkRow--) {
+                    var mergeCellKey = "".concat(checkRow, "-").concat(colIndex);
+                    var mergeInfo = mergeCellMap.get(mergeCellKey);
+                    // 如果找到主单元格（不是被合并的单元格）
+                    if (mergeInfo && !mergeInfo.skip && mergeInfo.rowSpan > 1) {
+                        // 计算合并单元格的底部行索引
+                        var mergeEndRow = checkRow + mergeInfo.rowSpan - 1;
+                        // 如果这个合并单元格延伸到可视区域
+                        if (mergeEndRow >= originalStartRow) {
+                            // 更新最小起始行
+                            minStartRow = Math.min(minStartRow, checkRow);
+                        }
+                        // 找到这一列的主单元格后，停止向前查找该列
+                        break;
+                    }
+                    // 如果是skip的单元格或没有合并信息，继续向前查找
+                    // 因为主单元格可能在更前面
+                }
+            }
+            scrollStartRow = minStartRow;
+        }
         // 1. 绘制可滚动区域的数据行（包括边框）
         renderWithFixedLayer(ctx, 
         // 渲染行内容

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

@@ -135,7 +135,7 @@ interface ICanvasColumnType<RecordType = any> {
      * @param values 所有值的数组
      * @returns 计算后的合计值
      */
-    totalCalcCallback?: (value: any, values: any[]) => any;
+    totalCalcCallback?: (value: any, values: any) => any;
     /**
      * 开启合并的字段,按其他字段维度合并
      */
@@ -182,13 +182,13 @@ interface ICanvasColumnType<RecordType = any> {
 type ICanvasColumnsType<RecordType = any> = ICanvasColumnType<RecordType>[];
 interface IBadgeProps {
     /**
-     * 角标颜色
+     * 角标提示文本（鼠标悬停时显示）
      */
-    color?: string;
+    title?: string;
     /**
-     * 角标文本
+     * 角标颜色
      */
-    text?: string;
+    color?: string;
     /**
      * 角标位置
      */

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

@@ -24,9 +24,13 @@ var findColumnByKey = function (columns, key) {
 /**
  * 递归处理列的render函数（转换为统一的调用格式）
  */
-var processColumnRender = function (column, renderMode) {
+var processColumnRender = function (column, renderMode, headerWrap) {
     if (renderMode === void 0) { renderMode = "object"; }
     var processedColumn = __assign({}, column);
+    if (headerWrap) {
+        processedColumn.wrap =
+            processedColumn.wrap === undefined ? headerWrap : processedColumn.wrap;
+    }
     // 处理当前列的render函数
     if (column.render) {
         var render_1 = column.render;
@@ -40,7 +44,7 @@ var processColumnRender = function (column, renderMode) {
     // 递归处理children
     if (column.children && Array.isArray(column.children)) {
         processedColumn.children = column.children.map(function (child) {
-            return processColumnRender(child, renderMode);
+            return processColumnRender(child, renderMode, headerWrap);
         });
     }
     return processedColumn;

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

@@ -33,10 +33,11 @@ var COLORS = {
     checkboxDisabled: "#d9d9d9",
 };
 // 字体配置
-var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
+var FONT_FAMILY = '"Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var FONT_SIZE = 13;
+var FONT_WEIGHT = "400"; // 正常字重，避免过细导致不清晰
 // 图标尺寸
 var CHECKBOX_SIZE = 16;
 var SORT_ICON_SIZE = 6;
 
-export { CHECKBOX_SIZE, COLORS, DEFAULT_COLUMN_WIDTH, DEFAULT_SELECTION_COLUMN_WIDTH, FONT_FAMILY, FONT_SIZE, MIN_SCROLLBAR_SIZE, SCROLLBAR_PADDING, SCROLLBAR_SIZE, SORT_ICON_SIZE };
+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 };

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

@@ -77,6 +77,128 @@ function flattenHeaders(columns) {
     };
     walk(columns, 1, { value: 0 });
     return headerRows;
+}
+/**
+ * 计算每一层表头的高度（考虑文本换行）
+ * @param columns 表头列配置
+ * @param baseHeaderHeight 基础表头高度
+ * @param columnRenderInfos 列渲染信息（用于获取实际列宽）
+ * @returns 每一层的高度数组，以及每一层的起始Y坐标数组
+ */
+function calculateLayerHeights(columns, baseHeaderHeight, columnRenderInfos) {
+    var maxDepth = getMaxDepth(columns);
+    // 如果是单层表头，直接返回基础高度
+    if (maxDepth === 1) {
+        return {
+            layerHeights: [baseHeaderHeight],
+            layerStartY: [0],
+        };
+    }
+    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");
+    if (!ctx) {
+        // 如果无法获取context，返回平均分配的高度
+        return {
+            layerHeights: Array(maxDepth).fill(baseHeaderHeight),
+            layerStartY: Array.from({ length: maxDepth }, function (_, i) { return i * baseHeaderHeight; }),
+        };
+    }
+    ctx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+    var layerHeights = [];
+    // 遍历每一层
+    flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
+        var maxLines = 1;
+        // 计算这一层中所有单元格需要的最大行数
+        headerRow.forEach(function (headerCell) {
+            var _a;
+            var column = headerCell.column, colSpan = headerCell.colSpan, colIndex = headerCell.colIndex, rowSpan = headerCell.rowSpan;
+            // 如果没有wrap属性或者没有title，不需要计算
+            if (!column.wrap || !column.title) {
+                return;
+            }
+            // 计算跨列单元格的总宽度
+            var totalWidth = 0;
+            for (var i = colIndex; i < colIndex + colSpan && i < leafColumns.length; i++) {
+                if (columnRenderInfos && columnRenderInfos[i]) {
+                    totalWidth += columnRenderInfos[i].width;
+                }
+                else {
+                    totalWidth += ((_a = leafColumns[i]) === null || _a === void 0 ? void 0 : _a.width) || 100;
+                }
+            }
+            var titleText = String(column.title);
+            // 判断是否是最末级表头（当前行+rowSpan 是否等于最大深度）
+            var isLastLevel = rowIndex + rowSpan === maxDepth;
+            // 判断是否是特殊列（选择框列、序号列等不需要排序和筛选的列）
+            var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
+            // 计算图标占用的宽度（仅在最末级表头且非特殊列时计算）
+            var iconsWidth = 0;
+            if (isLastLevel && !isSpecialColumn) {
+                var hasOrder = column.isOrder !== false;
+                var hasFilter = column.isFilter !== false;
+                if (hasFilter)
+                    iconsWidth += FILTER_ICON_WIDTH;
+                if (hasOrder) {
+                    iconsWidth += SORT_ICON_WIDTH;
+                    if (hasFilter)
+                        iconsWidth += ICON_SPACING;
+                }
+            }
+            // 计算文本可用宽度
+            var textMaxWidth = totalWidth - TEXT_PADDING - iconsWidth;
+            // 计算需要的行数
+            var lines = titleText.split("\n");
+            var totalLines = 0;
+            for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
+                var line = lines_1[_i];
+                if (line === "") {
+                    totalLines += 1;
+                    continue;
+                }
+                var currentLine = "";
+                var lineCount = 0;
+                var chars = line.split("");
+                for (var _b = 0, chars_1 = chars; _b < chars_1.length; _b++) {
+                    var char = chars_1[_b];
+                    var testLine = currentLine + char;
+                    var metrics = ctx.measureText(testLine);
+                    if (metrics.width > textMaxWidth && currentLine.length > 0) {
+                        lineCount += 1;
+                        currentLine = char;
+                    }
+                    else {
+                        currentLine = testLine;
+                    }
+                }
+                if (currentLine.length > 0) {
+                    lineCount += 1;
+                }
+                totalLines += lineCount;
+            }
+            maxLines = Math.max(maxLines, totalLines);
+        });
+        // 这一层的高度 = 基础高度 + (额外行数 * 行高)
+        var layerHeight = maxLines > 1
+            ? baseHeaderHeight + (maxLines - 1) * LINE_HEIGHT
+            : baseHeaderHeight;
+        layerHeights.push(layerHeight);
+    });
+    // 计算每一层的起始Y坐标
+    var layerStartY = [0];
+    for (var i = 1; i < layerHeights.length; i++) {
+        layerStartY.push(layerStartY[i - 1] + layerHeights[i - 1]);
+    }
+    return { layerHeights: layerHeights, layerStartY: layerStartY };
 }
 
-export { computeColSpan, flattenHeaders, getLeafColumns, getMaxDepth };
+export { calculateLayerHeights, computeColSpan, flattenHeaders, getLeafColumns, getMaxDepth };

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

@@ -7,27 +7,58 @@ import { getLeafColumns } from './multiHeaderHelpers.js';
 /**
  * 计算列的渲染信息
  * 注意：多级表头时，只处理叶子列（用于渲染数据）
+ * @param columns 列配置
+ * @param containerWidth 容器宽度（可选），如果提供且总宽度小于容器宽度，会自动填充
  */
-var calculateColumnRenderInfos = function (columns) {
+var calculateColumnRenderInfos = function (columns, containerWidth) {
     // 获取叶子列（多级表头时只有叶子列才渲染数据）
     var leafColumns = getLeafColumns(columns);
-    var infos = [];
-    var currentX = 0;
-    var fixedLeftX = 0;
+    // 第一次计算：使用原始宽度
+    var tempInfos = [];
+    var totalWidth = 0;
     leafColumns.forEach(function (column) {
         var columnWidth = column.width || DEFAULT_COLUMN_WIDTH;
         var isFixed = column.fixed === "left" || column.fixed === true;
-        infos.push({
+        tempInfos.push({
             column: column,
-            x: isFixed ? fixedLeftX : currentX,
             width: columnWidth,
-            fixed: isFixed,
-            fixedLeft: isFixed ? fixedLeftX : undefined,
+            isFixed: isFixed,
+        });
+        totalWidth += columnWidth;
+    });
+    // 如果提供了容器宽度且总宽度小于容器宽度，将剩余宽度平分到各列
+    // 注意：序号列和勾选框列除外，保持原宽度
+    if (containerWidth && totalWidth < containerWidth) {
+        var remainingWidth = containerWidth - totalWidth;
+        // 统计需要平分宽度的列（排除序号列和勾选框列）
+        var columnsToExpand = tempInfos.filter(function (info) {
+            var key = info.column.key;
+            return key !== "__index__" && key !== "__selection__";
+        });
+        if (columnsToExpand.length > 0) {
+            var additionalWidthPerColumn_1 = remainingWidth / columnsToExpand.length;
+            // 只更新需要扩展的列的宽度
+            columnsToExpand.forEach(function (info) {
+                info.width += additionalWidthPerColumn_1;
+            });
+        }
+    }
+    // 第二次计算：生成最终的渲染信息
+    var infos = [];
+    var currentX = 0;
+    var fixedLeftX = 0;
+    tempInfos.forEach(function (tempInfo) {
+        infos.push({
+            column: tempInfo.column,
+            x: tempInfo.isFixed ? fixedLeftX : currentX,
+            width: tempInfo.width,
+            fixed: tempInfo.isFixed,
+            fixedLeft: tempInfo.isFixed ? fixedLeftX : undefined,
         });
-        if (isFixed) {
-            fixedLeftX += columnWidth;
+        if (tempInfo.isFixed) {
+            fixedLeftX += tempInfo.width;
         }
-        currentX += columnWidth;
+        currentX += tempInfo.width;
     });
     return infos;
 };

package/package.json

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