zmdms-webui 2.3.5 → 2.3.7

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

@@ -34,9 +34,17 @@ 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;
+var SORT_ICON_SIZE = 6;
+var SORT_ICON_WIDTH = 15; // 排序图标宽度（用于表头宽度计算）
+var FILTER_ICON_WIDTH = 15; // 筛选图标宽度（用于表头宽度计算）
+// 间距和内边距
+var ICON_SPACING = 4; // 图标之间的间距
+var TEXT_PADDING = 5; // 文本内边距
+// 行高计算
+var LINE_HEIGHT = FONT_SIZE + 5; // 字体大小 + 行间距5px
 
-export { CHECKBOX_SIZE, COLORS, DEFAULT_COLUMN_WIDTH, DEFAULT_SELECTION_COLUMN_WIDTH, FONT_FAMILY, FONT_SIZE, MIN_SCROLLBAR_SIZE, SCROLLBAR_PADDING, SCROLLBAR_SIZE, SORT_ICON_SIZE };
+export { CHECKBOX_SIZE, COLORS, DEFAULT_COLUMN_WIDTH, DEFAULT_SELECTION_COLUMN_WIDTH, FILTER_ICON_WIDTH, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, ICON_SPACING, LINE_HEIGHT, MIN_SCROLLBAR_SIZE, SCROLLBAR_PADDING, SCROLLBAR_SIZE, SORT_ICON_SIZE, SORT_ICON_WIDTH, TEXT_PADDING };

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

@@ -1,3 +1,5 @@
+import { FONT_SIZE, FONT_FAMILY, TEXT_PADDING, LINE_HEIGHT, FILTER_ICON_WIDTH, SORT_ICON_WIDTH, ICON_SPACING } from './constants.js';
+
 /**
  * 多级表头工具函数
  */
@@ -77,6 +79,122 @@ 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);
+    // 创建临时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);
+        });
+        // 当有换行时：上边距(5px) + 行数 * 行高 + 下边距(5px)
+        // 当没有换行时：使用原始的 baseHeaderHeight
+        var layerHeight = maxLines > 1
+            ? 10 + maxLines * LINE_HEIGHT // 上下边距各5px，共10px
+            : 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,67 @@ import { getLeafColumns } from './multiHeaderHelpers.js';
 /**
  * 计算列的渲染信息
  * 注意：多级表头时，只处理叶子列（用于渲染数据）
+ * @param columns 列配置
+ * @param containerWidth 容器宽度（可选），如果提供且总宽度小于容器宽度，会自动填充
+ * @param manuallyResizedColumns 用户手动调整过宽度的列的key集合（可选），这些列不参与自动宽度分配
  */
-var calculateColumnRenderInfos = function (columns) {
+var calculateColumnRenderInfos = function (columns, containerWidth, manuallyResizedColumns) {
     // 获取叶子列（多级表头时只有叶子列才渲染数据）
     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;
+            // 排除序号列和勾选框列
+            if (key === "__index__" || key === "__selection__") {
+                return false;
+            }
+            // 排除用户手动调整过宽度的列
+            if (manuallyResizedColumns && manuallyResizedColumns.has(key)) {
+                return false;
+            }
+            return true;
+        });
+        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/dist/index.build.d.ts

@@ -49,7 +49,7 @@ export { default as Sortable } from './es/sortable/sortable.js';
 export { default as ElectronSignatures } from './es/electronsignatures/index.js';
 export { default as message } from './es/message/index.js';
 export { default as CanvasTable } from './es/canvastable/canvasTable.js';
-export { ICanvasColumnType, ICanvasColumnsType, ICanvasTableProps } from './es/canvastable/interface.js';
+export { ICanvasColumnType, ICanvasColumnsType, ICanvasTableProps, ICanvasTableRefHandle } from './es/canvastable/interface.js';
 export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Card, Carousel, Cascader, Checkbox, Col, Comment, ConfigProvider, Divider, Drawer, Dropdown, Empty, Grid, Image, Layout, List, Mentions, Menu, PageHeader, Popconfirm, Popover, Progress, Radio, Rate, Result, Row, Segmented, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Timeline, Tooltip, Transfer, Typography, Upload, notification } from 'antd';
 export { IButtonProps } from './es/button/interface.js';
 export { IButtonDownloadProps } from './es/button/buttonDownload.js';

package/package.json

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