zmdms-webui 2.5.4 → 2.5.5

package/dist/es/canvastable/canvasTable.js

@@ -112,11 +112,14 @@ function CanvasTable(props) {
     }), finalDataSource = _z.finalDataSource, hasSummaryRow = _z.hasSummaryRow;
     // 用于存储计算后的表头高度（用于自动高度的精确计算）
     var _0 = useState(undefined), preciseHeaderHeight = _0[0], setPreciseHeaderHeight = _0[1];
+    // 用于存储是否需要横向滚动条（用于自动高度的精确计算）
+    var _1 = useState(false), needHorizontalScrollbar = _1[0], setNeedHorizontalScrollbar = _1[1];
     // 自动高度计算（需要在容器尺寸计算之前）
     var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId, finalDataSource.length, // 数据行数（用于 content 模式）
     headerHeight, // 表头基础高度（用于 content 模式的初始计算）
     rowHeight, // 行高（用于 content 模式）
-    preciseHeaderHeight // 计算后的表头高度（用于 content 模式的精确计算）
+    preciseHeaderHeight, // 计算后的表头高度（用于 content 模式的精确计算）
+    needHorizontalScrollbar // 是否需要横向滚动条（用于计算额外高度）
     );
     // 监听容器尺寸变化（提前计算，用于列宽自适应）
     var containerSize = useContainerSize({
@@ -124,6 +127,7 @@ function CanvasTable(props) {
         width: width,
         height: isAutoScrollY ? autoHeight || height : height,
     });
+    console.log("containerSize", containerSize);
     var containerWidth = containerSize.width;
     var containerHeight = containerSize.height;
     // 计算列的渲染信息（使用容器宽度进行自适应填充）
@@ -177,7 +181,7 @@ function CanvasTable(props) {
         return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
     }, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
     // 计算滚动条指标
-    var _1 = useScrollbarMetrics({
+    var _2 = useScrollbarMetrics({
         containerWidth: containerWidth,
         containerHeight: containerHeight,
         totalWidth: totalWidth,
@@ -185,14 +189,14 @@ function CanvasTable(props) {
         headerHeight: calculatedHeaderHeight,
         scrollTop: 0,
         scrollLeft: 0,
-    }), maxScrollTop = _1.maxScrollTop, maxScrollLeft = _1.maxScrollLeft;
+    }), maxScrollTop = _2.maxScrollTop, maxScrollLeft = _2.maxScrollLeft;
     // 滚动管理（使用预先计算的maxScrollTop和maxScrollLeft）
-    var _2 = useTableScroll({
+    var _3 = useTableScroll({
         containerRef: containerRef,
         maxScrollTop: maxScrollTop,
         maxScrollLeft: maxScrollLeft,
         onScroll: onScroll,
-    }), scrollState = _2.scrollState, setScrollState = _2.setScrollState;
+    }), scrollState = _3.scrollState, setScrollState = _3.setScrollState;
     // 使用 ref 保存最新的滚动位置，确保在组件卸载过程中仍能访问
     var scrollPositionRef = useRef({ x: 0, y: 0 });
     useEffect(function () {
@@ -220,13 +224,24 @@ function CanvasTable(props) {
         scrollTop: scrollState.scrollTop,
         scrollLeft: scrollState.scrollLeft,
     }).actualMetrics;
+    // 在 content 模式下，当横向滚动条状态变化时，更新状态以触发自动高度重新计算
+    useEffect(function () {
+        if (isAutoScrollY === "content" &&
+            scrollbarMetrics.needHorizontalScrollbar !== needHorizontalScrollbar) {
+            setNeedHorizontalScrollbar(scrollbarMetrics.needHorizontalScrollbar);
+        }
+    }, [
+        isAutoScrollY,
+        scrollbarMetrics.needHorizontalScrollbar,
+        needHorizontalScrollbar,
+    ]);
     // 单元格框选
-    var _3 = useTableSelection({
+    var _4 = useTableSelection({
         state: state,
         setState: setState,
     }), 
     // selectionStartRef,
-    startSelection = _3.startSelection, updateSelection = _3.updateSelection, extendSelection = _3.extendSelection;
+    startSelection = _4.startSelection, updateSelection = _4.updateSelection, extendSelection = _4.extendSelection;
     // 处理列宽调整
     var handleColumnResize = useCallback(function (columnKey, newWidth) {
         var _a;
@@ -281,20 +296,20 @@ function CanvasTable(props) {
         onCurrentListChange,
     ]);
     // 列宽调整
-    var _4 = useColumnResize({
+    var _5 = useColumnResize({
         columnRenderInfos: columnRenderInfos,
         containerWidth: containerWidth,
         headerHeight: calculatedHeaderHeight,
         scrollLeft: scrollState.scrollLeft,
         onColumnResize: handleColumnResize,
-    }), resizeState = _4.resizeState, checkResizeHandle = _4.checkResizeHandle, startResize = _4.startResize, updateResize = _4.updateResize, endResize = _4.endResize, setHoverResizeColumn = _4.setHoverResizeColumn, getColumnWidth = _4.getColumnWidth, RESIZE_HANDLE_WIDTH = _4.RESIZE_HANDLE_WIDTH;
+    }), resizeState = _5.resizeState, checkResizeHandle = _5.checkResizeHandle, startResize = _5.startResize, updateResize = _5.updateResize, endResize = _5.endResize, setHoverResizeColumn = _5.setHoverResizeColumn, getColumnWidth = _5.getColumnWidth, RESIZE_HANDLE_WIDTH = _5.RESIZE_HANDLE_WIDTH;
     // 复制到剪贴板
-    var _5 = useCopyToClipboard({
+    var _6 = useCopyToClipboard({
         cellSelection: state.cellSelection,
         processedDataSource: finalDataSource,
         columns: processedColumns,
         containerRef: containerRef,
-    }), getSelectedCellsText = _5.getSelectedCellsText, copyToClipboard = _5.copyToClipboard;
+    }), getSelectedCellsText = _6.getSelectedCellsText, copyToClipboard = _6.copyToClipboard;
     // 处理右键菜单的复制操作
     var handleCopy = useCallback(function () {
         var text = getSelectedCellsText();
@@ -313,7 +328,7 @@ function CanvasTable(props) {
         summaryConfig: (exportExcelConfig === null || exportExcelConfig === void 0 ? void 0 : exportExcelConfig.isExportNoSummary) ? undefined : [],
     });
     // 交互事件处理（使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定）
-    var _6 = useTableInteraction({
+    var _7 = useTableInteraction({
         state: state,
         setState: setState,
         scrollState: scrollState,
@@ -360,7 +375,7 @@ function CanvasTable(props) {
         fixedRowsCount: fixedRowsCount,
         fixedRowsConfig: fixedRowsConfig,
         summaryFixed: summaryFixed,
-    }), handleCanvasMouseDown = _6.handleCanvasMouseDown, handleCanvasMouseMove = _6.handleCanvasMouseMove, handleCanvasMouseUp = _6.handleCanvasMouseUp, handleCanvasMouseLeave = _6.handleCanvasMouseLeave, handleCanvasContextMenu = _6.handleCanvasContextMenu;
+    }), handleCanvasMouseDown = _7.handleCanvasMouseDown, handleCanvasMouseMove = _7.handleCanvasMouseMove, handleCanvasMouseUp = _7.handleCanvasMouseUp, handleCanvasMouseLeave = _7.handleCanvasMouseLeave, handleCanvasContextMenu = _7.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, baseHeaderHeight: headerHeight, // 传入原始基础高度用于计算每层高度

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

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react';
 /**
  * CanvasTable 自动高度计算 Hook
  */
+// 滚动条宽度常量
+var SCROLLBAR_SIZE = 12;
 /**
  * 计算CanvasTable高度
  * @param isAutoScrollY 自动高度模式
@@ -12,10 +14,12 @@ import { useState, useEffect } from 'react';
  * @param headerHeight 表头基础高度（用于 content 模式的初始计算）
  * @param rowHeight 行高（用于 content 模式）
  * @param calculatedHeaderHeight 计算后的表头高度（优先使用，用于 content 模式的精确计算）
+ * @param needHorizontalScrollbar 是否需要横向滚动条（用于计算额外高度）
  * @returns 计算出的表格高度
  */
-function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId, dataLength, headerHeight, rowHeight, calculatedHeaderHeight) {
+function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId, dataLength, headerHeight, rowHeight, calculatedHeaderHeight, needHorizontalScrollbar) {
     if (marginBottom === void 0) { marginBottom = 65; }
+    if (needHorizontalScrollbar === void 0) { needHorizontalScrollbar = false; }
     var _a = useState(undefined), tableHeight = _a[0], setTableHeight = _a[1];
     useEffect(function () {
         // 归一化模式：true 转换为 'viewport'
@@ -30,15 +34,14 @@ function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId, da
                 // 优先使用计算后的表头高度（考虑了换行、多级表头等因素）
                 // 如果还未计算完成，使用基础高度作为初始值
                 var actualHeaderHeight = calculatedHeaderHeight || headerHeight;
-                // 计算总高度 = 表头高度 + (数据行数 * 行高)
-                var calculatedHeight = actualHeaderHeight + dataLength * rowHeight;
+                // 计算总高度 = 表头高度 + (数据行数 * 行高) + (横向滚动条高度)
+                var calculatedHeight = actualHeaderHeight +
+                    dataLength * rowHeight +
+                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0);
                 // 设置最小高度和最大高度
                 var minHeight = 200;
-                var maxHeight = 5000; // 防止数据过多时表格过高
                 // 如果没有数据，使用最小高度（包含表头和空状态提示）
-                var finalHeight = dataLength === 0
-                    ? minHeight
-                    : Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
+                var finalHeight = dataLength === 0 ? minHeight : Math.max(calculatedHeight, minHeight);
                 setTableHeight(finalHeight);
             }
             return;
@@ -95,7 +98,8 @@ function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId, da
         dataLength,
         headerHeight,
         rowHeight,
-        calculatedHeaderHeight, // 当计算后的表头高度变化时，重新计算总高度
+        calculatedHeaderHeight,
+        needHorizontalScrollbar, // 当横向滚动条状态变化时，重新计算总高度
     ]);
     return tableHeight;
 }

package/package.json

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