zmdms-webui 2.3.5 → 2.3.6

package/dist/es/canvastable/canvasTable.js

@@ -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];
     // 处理选中框列、序号列等
@@ -110,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,
@@ -124,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,
@@ -304,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,
@@ -366,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,6 +1,6 @@
 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 = '"Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
@@ -8,7 +8,7 @@ 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/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,8 +289,8 @@ var useTableRender = function (params) {
                 // 如果是最末级且有图标，文本左对齐；否则居中
                 if (isLastLevel && iconArea.iconsWidth > 0) {
                     ctx.textAlign = "left";
-                    var textX_1 = drawX + 16;
-                    var textMaxWidth = width - 16 - iconArea.iconsWidth;
+                    var textX_1 = drawX + 5;
+                    var textMaxWidth = width - 5 - iconArea.iconsWidth;
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
@@ -305,7 +313,7 @@ var useTableRender = function (params) {
                     // 根据 wrap 属性处理文本
                     if (column.wrap) {
                         // 换行显示（支持\n和自动换行）
-                        var lines = wrapText(ctx, titleText, width - 16);
+                        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) {
@@ -314,7 +322,7 @@ var useTableRender = function (params) {
                         });
                     }
                     else {
-                        var truncated = truncateText(ctx, titleText, width - 16);
+                        var truncated = truncateText(ctx, titleText, width - 10); // 左右各5px
                         ctx.fillText(truncated, textX_2, textY);
                     }
                 }
@@ -341,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);
                 });
             });
         }
@@ -562,23 +581,23 @@ 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_3 = drawX + 5;
                     if (align === "center") {
                         ctx.textAlign = "center";
                         textX_3 = drawX + width / 2;
                     }
                     else if (align === "right") {
                         ctx.textAlign = "right";
-                        textX_3 = 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) {
@@ -819,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;
@@ -863,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);
@@ -1241,8 +1260,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

@@ -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/constants.js

@@ -34,9 +34,10 @@ var COLORS = {
 };
 // 字体配置
 var FONT_FAMILY = '"Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-var FONT_SIZE = 13; // 增大1px，提升清晰度
+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.5",
+  "version": "2.3.6",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",