zmdms-webui 2.5.3 → 2.5.5

package/dist/es/canvastable/canvasTable.js

@@ -110,14 +110,24 @@ function CanvasTable(props) {
         columns: processedColumns,
         dataSource: newDataSource,
     }), 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);
+    var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId, finalDataSource.length, // 数据行数（用于 content 模式）
+    headerHeight, // 表头基础高度（用于 content 模式的初始计算）
+    rowHeight, // 行高（用于 content 模式）
+    preciseHeaderHeight, // 计算后的表头高度（用于 content 模式的精确计算）
+    needHorizontalScrollbar // 是否需要横向滚动条（用于计算额外高度）
+    );
     // 监听容器尺寸变化（提前计算，用于列宽自适应）
     var containerSize = useContainerSize({
         containerRef: containerRef,
         width: width,
         height: isAutoScrollY ? autoHeight || height : height,
     });
+    console.log("containerSize", containerSize);
     var containerWidth = containerSize.width;
     var containerHeight = containerSize.height;
     // 计算列的渲染信息（使用容器宽度进行自适应填充）
@@ -151,6 +161,13 @@ function CanvasTable(props) {
         headerHeight: headerHeight,
         columnRenderInfos: columnRenderInfos,
     });
+    // 在 content 模式下，当计算后的表头高度变化时，更新精确高度以触发自动高度重新计算
+    useEffect(function () {
+        if (isAutoScrollY === "content" &&
+            calculatedHeaderHeight !== preciseHeaderHeight) {
+            setPreciseHeaderHeight(calculatedHeaderHeight);
+        }
+    }, [isAutoScrollY, calculatedHeaderHeight, preciseHeaderHeight]);
     // 计算合并单元格信息
     var mergeCellMap = useMergeCells({
         dataSource: finalDataSource,
@@ -164,7 +181,7 @@ function CanvasTable(props) {
         return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
     }, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
     // 计算滚动条指标
-    var _0 = useScrollbarMetrics({
+    var _2 = useScrollbarMetrics({
         containerWidth: containerWidth,
         containerHeight: containerHeight,
         totalWidth: totalWidth,
@@ -172,14 +189,14 @@ function CanvasTable(props) {
         headerHeight: calculatedHeaderHeight,
         scrollTop: 0,
         scrollLeft: 0,
-    }), maxScrollTop = _0.maxScrollTop, maxScrollLeft = _0.maxScrollLeft;
+    }), maxScrollTop = _2.maxScrollTop, maxScrollLeft = _2.maxScrollLeft;
     // 滚动管理（使用预先计算的maxScrollTop和maxScrollLeft）
-    var _1 = useTableScroll({
+    var _3 = useTableScroll({
         containerRef: containerRef,
         maxScrollTop: maxScrollTop,
         maxScrollLeft: maxScrollLeft,
         onScroll: onScroll,
-    }), scrollState = _1.scrollState, setScrollState = _1.setScrollState;
+    }), scrollState = _3.scrollState, setScrollState = _3.setScrollState;
     // 使用 ref 保存最新的滚动位置，确保在组件卸载过程中仍能访问
     var scrollPositionRef = useRef({ x: 0, y: 0 });
     useEffect(function () {
@@ -207,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 _2 = useTableSelection({
+    var _4 = useTableSelection({
         state: state,
         setState: setState,
     }), 
     // selectionStartRef,
-    startSelection = _2.startSelection, updateSelection = _2.updateSelection, extendSelection = _2.extendSelection;
+    startSelection = _4.startSelection, updateSelection = _4.updateSelection, extendSelection = _4.extendSelection;
     // 处理列宽调整
     var handleColumnResize = useCallback(function (columnKey, newWidth) {
         var _a;
@@ -268,20 +296,20 @@ function CanvasTable(props) {
         onCurrentListChange,
     ]);
     // 列宽调整
-    var _3 = useColumnResize({
+    var _5 = useColumnResize({
         columnRenderInfos: columnRenderInfos,
         containerWidth: containerWidth,
         headerHeight: calculatedHeaderHeight,
         scrollLeft: scrollState.scrollLeft,
         onColumnResize: handleColumnResize,
-    }), resizeState = _3.resizeState, checkResizeHandle = _3.checkResizeHandle, startResize = _3.startResize, updateResize = _3.updateResize, endResize = _3.endResize, setHoverResizeColumn = _3.setHoverResizeColumn, getColumnWidth = _3.getColumnWidth, RESIZE_HANDLE_WIDTH = _3.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 _4 = useCopyToClipboard({
+    var _6 = useCopyToClipboard({
         cellSelection: state.cellSelection,
         processedDataSource: finalDataSource,
         columns: processedColumns,
         containerRef: containerRef,
-    }), getSelectedCellsText = _4.getSelectedCellsText, copyToClipboard = _4.copyToClipboard;
+    }), getSelectedCellsText = _6.getSelectedCellsText, copyToClipboard = _6.copyToClipboard;
     // 处理右键菜单的复制操作
     var handleCopy = useCallback(function () {
         var text = getSelectedCellsText();
@@ -300,7 +328,7 @@ function CanvasTable(props) {
         summaryConfig: (exportExcelConfig === null || exportExcelConfig === void 0 ? void 0 : exportExcelConfig.isExportNoSummary) ? undefined : [],
     });
     // 交互事件处理（使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定）
-    var _5 = useTableInteraction({
+    var _7 = useTableInteraction({
         state: state,
         setState: setState,
         scrollState: scrollState,
@@ -347,7 +375,7 @@ function CanvasTable(props) {
         fixedRowsCount: fixedRowsCount,
         fixedRowsConfig: fixedRowsConfig,
         summaryFixed: summaryFixed,
-    }), handleCanvasMouseDown = _5.handleCanvasMouseDown, handleCanvasMouseMove = _5.handleCanvasMouseMove, handleCanvasMouseUp = _5.handleCanvasMouseUp, handleCanvasMouseLeave = _5.handleCanvasMouseLeave, handleCanvasContextMenu = _5.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,19 +3,50 @@ import { useState, useEffect } from 'react';
 /**
  * CanvasTable 自动高度计算 Hook
  */
+// 滚动条宽度常量
+var SCROLLBAR_SIZE = 12;
 /**
  * 计算CanvasTable高度
- * @param isAutoScrollY 是否自动计算高度
- * @param marginBottom canvas table下面留出的距离
+ * @param isAutoScrollY 自动高度模式
+ * @param marginBottom canvas table下面留出的距离（仅在 viewport 模式下生效）
  * @param canvasTableId 表格id
+ * @param dataLength 数据行数（用于 content 模式）
+ * @param headerHeight 表头基础高度（用于 content 模式的初始计算）
+ * @param rowHeight 行高（用于 content 模式）
+ * @param calculatedHeaderHeight 计算后的表头高度（优先使用，用于 content 模式的精确计算）
+ * @param needHorizontalScrollbar 是否需要横向滚动条（用于计算额外高度）
  * @returns 计算出的表格高度
  */
-function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId) {
+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 () {
-        if (!isAutoScrollY)
+        // 归一化模式：true 转换为 'viewport'
+        var mode = isAutoScrollY === true ? "viewport" : isAutoScrollY;
+        if (!mode)
             return;
+        // 内容模式：根据数据行数计算高度
+        if (mode === "content") {
+            if (dataLength !== undefined &&
+                headerHeight !== undefined &&
+                rowHeight !== undefined) {
+                // 优先使用计算后的表头高度（考虑了换行、多级表头等因素）
+                // 如果还未计算完成，使用基础高度作为初始值
+                var actualHeaderHeight = calculatedHeaderHeight || headerHeight;
+                // 计算总高度 = 表头高度 + (数据行数 * 行高) + (横向滚动条高度)
+                var calculatedHeight = actualHeaderHeight +
+                    dataLength * rowHeight +
+                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0);
+                // 设置最小高度和最大高度
+                var minHeight = 200;
+                // 如果没有数据，使用最小高度（包含表头和空状态提示）
+                var finalHeight = dataLength === 0 ? minHeight : Math.max(calculatedHeight, minHeight);
+                setTableHeight(finalHeight);
+            }
+            return;
+        }
+        // 视口模式：根据页面位置计算高度
         var calculateHeight = function () {
             var _a, _b;
             // 查找容器元素
@@ -60,7 +91,16 @@ function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId) {
             window.removeEventListener("resize", handleResize);
             observer.disconnect();
         };
-    }, [isAutoScrollY, marginBottom, canvasTableId]);
+    }, [
+        isAutoScrollY,
+        marginBottom,
+        canvasTableId,
+        dataLength,
+        headerHeight,
+        rowHeight,
+        calculatedHeaderHeight,
+        needHorizontalScrollbar, // 当横向滚动条状态变化时，重新计算总高度
+    ]);
     return tableHeight;
 }
 

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

@@ -105,6 +105,10 @@ interface ICanvasColumnType<RecordType = any> {
      * 获取复制的值（用于自定义复制内容）
      */
     getCopyValue?: (text: any, record: RecordType, index: number) => string;
+    /**
+     * 是否默认不勾选
+     */
+    defaultUnChecked?: boolean;
     /**
      * 是否开启维度自定义
      */
@@ -395,11 +399,15 @@ interface ICanvasTableProps<RecordType = any> {
      */
     summaryFixed?: boolean;
     /**
-     * 是否开启自动计算Y轴高度
+     * 自动计算Y轴高度模式
+     * - false: 不自动调整（默认）
+     * - true | 'viewport': 根据视口自动调整高度（距离页面底部的距离）
+     * - 'content': 根据内容自动撑开高度（表头 + 所有数据行）
      */
-    isAutoScrollY?: boolean;
+    isAutoScrollY?: boolean | "viewport" | "content";
     /**
      * 自动计算Y轴高度时，canvas table下面留出的距离
+     * 仅在 isAutoScrollY 为 true 或 'viewport' 时生效
      */
     autoScrollYMarginBottom?: number;
     /**

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

@@ -30,7 +30,7 @@ var formatCellValue = function (value, column, noEmptyText) {
         formattedValue = formatDate(formattedValue, column.dateFormat);
     }
     // 数值精度
-    if (column.precision !== undefined) {
+    if (column.precision !== undefined && !isNaN(Number(formattedValue))) {
         formattedValue = exactRound(formattedValue, column.precision);
     }
     // 千分符

package/package.json

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