zmdms-webui 2.6.2 → 2.6.4

package/dist/es/canvastable/canvasTable.js

@@ -13,6 +13,7 @@ import HeaderOverlay from './components/HeaderOverlay.js';
 import { useContextMenu as Fe } from '../node_modules/react-contexify/dist/index.js';
 import { useTableState } from './hooks/useTableState.js';
 import { useTableSelection } from './hooks/useTableSelection.js';
+import { useExpandable } from './hooks/useExpandable.js';
 import { useTableRender } from './hooks/useTableRender.js';
 import { useTableInteraction } from './hooks/useTableInteraction.js';
 import { useScrollbarMetrics, useTableScroll, useScrollReset } from './hooks/useScroll.js';
@@ -39,7 +40,8 @@ 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, mode = props.mode, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _m = props.isIndexMerge, isIndexMerge = _m === void 0 ? true : _m, _o = props.isSelectionMerge, isSelectionMerge = _o === void 0 ? false : _o, _p = props.renderMode, renderMode = _p === void 0 ? "object" : _p, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _q = props.summaryFixed, summaryFixed = _q === void 0 ? false : _q, _r = props.isAutoScrollY, isAutoScrollY = _r === void 0 ? false : _r, _s = props.autoScrollYMarginBottom, autoScrollYMarginBottom = _s === void 0 ? 65 : _s, canvasTableId = props.canvasTableId, headerWrap = props.headerWrap, _t = props.headerAlign, headerAlign = _t === void 0 ? "center" : _t, tableRefHandle = props.tableRefHandle, exportExcelConfig = props.exportExcelConfig, _u = props.maxHeight, maxHeight = _u === void 0 ? 3000 : _u;
+    var _a;
+    var _b = props.dataSource, dataSource = _b === void 0 ? [] : _b, _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rowKey, rowKey = _d === void 0 ? "id" : _d, _e = props.height, height = _e === void 0 ? 600 : _e, width = props.width, _f = props.rowHeight, rowHeight = _f === void 0 ? 36 : _f, _g = props.headerHeight, headerHeight = _g === void 0 ? 36 : _g, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _h = props.bordered, bordered = _h === void 0 ? true : _h, _j = props.striped, striped = _j === void 0 ? false : _j, _k = props.emptyText, emptyText = _k === void 0 ? "暂无数据" : _k, style = props.style, className = props.className, _l = props.loading, loading = _l === void 0 ? false : _l, _m = props.isContextMenu, isContextMenu = _m === void 0 ? true : _m, isFullscreenHandle = props.isFullscreenHandle, mode = props.mode, 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, _u = props.headerAlign, headerAlign = _u === void 0 ? "center" : _u, tableRefHandle = props.tableRefHandle, exportExcelConfig = props.exportExcelConfig, _v = props.maxHeight, maxHeight = _v === void 0 ? 3000 : _v, expandable = props.expandable;
     var actualMode = "mode" in props ? mode : "index";
     var canvasRef = useRef(null);
     var containerRef = useRef(null);
@@ -62,17 +64,17 @@ function CanvasTable(props) {
         return String((_a = record[rowKey]) !== null && _a !== void 0 ? _a : index);
     }, [rowKey]);
     // 动态列配置
-    var _v = useDynamicListByColumns(columns, {
+    var _w = useDynamicListByColumns(columns, {
         dynamicKey: dynamicKey,
         dynamicVersion: dynamicVersion,
         customDynamicListHandle: customDynamicListHandle,
-    }), defaultDynamicList = _v.defaultDynamicList, currentDynamicList = _v.currentDynamicList, onCurrentListChange = _v.onCurrentListChange, dynamicSettingRef = _v.dynamicSettingRef;
+    }), defaultDynamicList = _w.defaultDynamicList, currentDynamicList = _w.currentDynamicList, onCurrentListChange = _w.onCurrentListChange, dynamicSettingRef = _w.dynamicSettingRef;
     // 根据动态列配置处理columns
     var dynamicColumns = useMemo(function () { return getTableColumns(columns, currentDynamicList); }, [columns, currentDynamicList]).columns;
     // 内部列宽状态（未开启动态配置时使用）
-    var _w = useState({}), internalColumnWidths = _w[0], setInternalColumnWidths = _w[1];
+    var _x = useState({}), internalColumnWidths = _x[0], setInternalColumnWidths = _x[1];
     // 跟踪用户手动调整过宽度的列（用于排除自动宽度分配）
-    var _x = useState(new Set()), manuallyResizedColumnKeys = _x[0], setManuallyResizedColumnKeys = _x[1];
+    var _y = useState(new Set()), manuallyResizedColumnKeys = _y[0], setManuallyResizedColumnKeys = _y[1];
     // 处理选中框列、序号列等
     var processedColumnsOld = useProcessedColumns({
         columns: columns,
@@ -87,33 +89,46 @@ function CanvasTable(props) {
         headerAlign: headerAlign,
     });
     // 表格状态管理
-    var _y = useTableState({
+    var _z = useTableState({
         dataSource: dataSource,
         columns: processedColumnsOld,
         rowSelection: rowSelection,
         onFilterChange: onFilterChange,
         isAutoMerge: isAutoMerge,
-    }), state = _y.state, setState = _y.setState, processedDataSource = _y.processedDataSource, handleFilterChange = _y.handleFilterChange, closeFilterPopover = _y.closeFilterPopover, autoGeneratedFilters = _y.autoGeneratedFilters;
+    }), state = _z.state, setState = _z.setState, processedDataSource = _z.processedDataSource, handleFilterChange = _z.handleFilterChange, closeFilterPopover = _z.closeFilterPopover, autoGeneratedFilters = _z.autoGeneratedFilters;
+    // 树形展开管理
+    var _0 = useExpandable({
+        dataSource: dataSource,
+        expandable: expandable,
+        rowKey: rowKey,
+    }), expandedKeys = _0.expandedKeys, flattenedData = _0.flattenedData, toggleExpand = _0.toggleExpand, expandRow = _0.expandRow, collapseRow = _0.collapseRow, setExpandedRowKeys = _0.setExpandedRowKeys, hasExpandable = _0.hasExpandable;
     var order = useMemo(function () {
         return state.sortOrder && state.sortField
             ? { field: state.sortField, order: state.sortOrder }
             : undefined;
     }, [state.sortOrder, state.sortField]);
-    var _z = useAutoMerge(processedDataSource, processedColumnsOld, {
+    var _1 = useAutoMerge(processedDataSource, processedColumnsOld, {
         isAutoMerge: isAutoMerge,
         isDimensionDynamic: isDimensionDynamic,
         order: order,
         dimensionCustomSumKeys: dimensionCustomSumKeys,
-    }), newDataSource = _z[0], processedColumns = _z[1];
+    }), newDataSource = _1[0], processedColumns = _1[1];
+    // 如果开启了树形展开，使用扁平化后的数据源
+    var expandedDataSource = useMemo(function () {
+        if (hasExpandable) {
+            return flattenedData.map(function (item) { return item.record; });
+        }
+        return newDataSource;
+    }, [hasExpandable, flattenedData, newDataSource]);
     // 生成合计行和最终数据源
-    var _0 = useSummaryRow({
+    var _2 = useSummaryRow({
         columns: processedColumns,
-        dataSource: newDataSource,
-    }), finalDataSource = _0.finalDataSource, hasSummaryRow = _0.hasSummaryRow;
+        dataSource: expandedDataSource,
+    }), finalDataSource = _2.finalDataSource, hasSummaryRow = _2.hasSummaryRow;
     // 用于存储计算后的表头高度（用于自动高度的精确计算）
-    var _1 = useState(undefined), preciseHeaderHeight = _1[0], setPreciseHeaderHeight = _1[1];
+    var _3 = useState(undefined), preciseHeaderHeight = _3[0], setPreciseHeaderHeight = _3[1];
     // 用于存储是否需要横向滚动条（用于自动高度的精确计算）
-    var _2 = useState(false), needHorizontalScrollbar = _2[0], setNeedHorizontalScrollbar = _2[1];
+    var _4 = useState(false), needHorizontalScrollbar = _4[0], setNeedHorizontalScrollbar = _4[1];
     // 自动高度计算（需要在容器尺寸计算之前）
     var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId, finalDataSource.length, // 数据行数（用于 content 模式）
     headerHeight, // 表头基础高度（用于 content 模式的初始计算）
@@ -180,7 +195,7 @@ function CanvasTable(props) {
         return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
     }, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
     // 计算滚动条指标
-    var _3 = useScrollbarMetrics({
+    var _5 = useScrollbarMetrics({
         containerWidth: containerWidth,
         containerHeight: containerHeight,
         totalWidth: totalWidth,
@@ -188,14 +203,14 @@ function CanvasTable(props) {
         headerHeight: calculatedHeaderHeight,
         scrollTop: 0,
         scrollLeft: 0,
-    }), maxScrollTop = _3.maxScrollTop, maxScrollLeft = _3.maxScrollLeft;
+    }), maxScrollTop = _5.maxScrollTop, maxScrollLeft = _5.maxScrollLeft;
     // 滚动管理（使用预先计算的maxScrollTop和maxScrollLeft）
-    var _4 = useTableScroll({
+    var _6 = useTableScroll({
         containerRef: containerRef,
         maxScrollTop: maxScrollTop,
         maxScrollLeft: maxScrollLeft,
         onScroll: onScroll,
-    }), scrollState = _4.scrollState, setScrollState = _4.setScrollState;
+    }), scrollState = _6.scrollState, setScrollState = _6.setScrollState;
     // 使用 ref 保存最新的滚动位置，确保在组件卸载过程中仍能访问
     var scrollPositionRef = useRef({ x: 0, y: 0 });
     useEffect(function () {
@@ -213,6 +228,10 @@ function CanvasTable(props) {
         sortOrder: state.sortOrder,
         setScrollState: setScrollState,
     });
+    // 容器尺寸变化时重置滚动位置
+    useEffect(function () {
+        setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollLeft: 0, scrollTop: 0 })); });
+    }, [containerWidth, containerHeight, setScrollState]);
     // 使用实际滚动位置重新计算滚动条的显示位置
     var scrollbarMetrics = useScrollbarMetrics({
         containerWidth: containerWidth,
@@ -235,12 +254,12 @@ function CanvasTable(props) {
         needHorizontalScrollbar,
     ]);
     // 单元格框选
-    var _5 = useTableSelection({
+    var _7 = useTableSelection({
         state: state,
         setState: setState,
     }), 
     // selectionStartRef,
-    startSelection = _5.startSelection, updateSelection = _5.updateSelection, extendSelection = _5.extendSelection;
+    startSelection = _7.startSelection, updateSelection = _7.updateSelection, extendSelection = _7.extendSelection;
     // 处理列宽调整
     var handleColumnResize = useCallback(function (columnKey, newWidth) {
         var _a;
@@ -295,20 +314,20 @@ function CanvasTable(props) {
         onCurrentListChange,
     ]);
     // 列宽调整
-    var _6 = useColumnResize({
+    var _8 = useColumnResize({
         columnRenderInfos: columnRenderInfos,
         containerWidth: containerWidth,
         headerHeight: calculatedHeaderHeight,
         scrollLeft: scrollState.scrollLeft,
         onColumnResize: handleColumnResize,
-    }), resizeState = _6.resizeState, checkResizeHandle = _6.checkResizeHandle, startResize = _6.startResize, updateResize = _6.updateResize, endResize = _6.endResize, setHoverResizeColumn = _6.setHoverResizeColumn, getColumnWidth = _6.getColumnWidth, RESIZE_HANDLE_WIDTH = _6.RESIZE_HANDLE_WIDTH;
+    }), resizeState = _8.resizeState, checkResizeHandle = _8.checkResizeHandle, startResize = _8.startResize, updateResize = _8.updateResize, endResize = _8.endResize, setHoverResizeColumn = _8.setHoverResizeColumn, getColumnWidth = _8.getColumnWidth, RESIZE_HANDLE_WIDTH = _8.RESIZE_HANDLE_WIDTH;
     // 复制到剪贴板
-    var _7 = useCopyToClipboard({
+    var _9 = useCopyToClipboard({
         cellSelection: state.cellSelection,
         processedDataSource: finalDataSource,
         columns: processedColumns,
         containerRef: containerRef,
-    }), getSelectedCellsText = _7.getSelectedCellsText, copyToClipboard = _7.copyToClipboard;
+    }), getSelectedCellsText = _9.getSelectedCellsText, copyToClipboard = _9.copyToClipboard;
     // 处理右键菜单的复制操作
     var handleCopy = useCallback(function () {
         var text = getSelectedCellsText();
@@ -325,9 +344,10 @@ function CanvasTable(props) {
         columns: exportColumns,
         isAutoMerge: isAutoMerge,
         summaryConfig: (exportExcelConfig === null || exportExcelConfig === void 0 ? void 0 : exportExcelConfig.isExportNoSummary) ? undefined : [],
+        childrenColumnName: (_a = props.expandable) === null || _a === void 0 ? void 0 : _a.childrenColumnName,
     });
     // 交互事件处理（使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定）
-    var _8 = useTableInteraction({
+    var _10 = useTableInteraction({
         state: state,
         setState: setState,
         scrollState: scrollState,
@@ -335,6 +355,8 @@ function CanvasTable(props) {
         processedDataSource: finalDataSource,
         columnRenderInfos: columnRenderInfos,
         columns: processedColumns,
+        expandable: expandable,
+        flattenedData: flattenedData,
         rowSelection: rowSelection,
         rowHeight: rowHeight,
         headerHeight: calculatedHeaderHeight,
@@ -359,6 +381,7 @@ function CanvasTable(props) {
         onSortChange: onSortChange,
         onRowClick: onRowClick,
         getRowKey: getRowKey,
+        onExpand: toggleExpand,
         startSelection: startSelection,
         updateSelection: updateSelection,
         extendSelection: extendSelection,
@@ -374,11 +397,11 @@ function CanvasTable(props) {
         fixedRowsCount: fixedRowsCount,
         fixedRowsConfig: fixedRowsConfig,
         summaryFixed: summaryFixed,
-    }), handleCanvasMouseDown = _8.handleCanvasMouseDown, handleCanvasMouseMove = _8.handleCanvasMouseMove, handleCanvasMouseUp = _8.handleCanvasMouseUp, handleCanvasMouseLeave = _8.handleCanvasMouseLeave, handleCanvasContextMenu = _8.handleCanvasContextMenu;
+    }), handleCanvasMouseDown = _10.handleCanvasMouseDown, handleCanvasMouseMove = _10.handleCanvasMouseMove, handleCanvasMouseUp = _10.handleCanvasMouseUp, handleCanvasMouseLeave = _10.handleCanvasMouseLeave, handleCanvasContextMenu = _10.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, // 传入原始基础高度用于计算每层高度
-        rowHeight: rowHeight, bordered: bordered, striped: striped, headerAlign: headerAlign }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed }));
+        rowHeight: rowHeight, bordered: bordered, striped: striped, headerAlign: headerAlign }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed, expandable: expandable, flattenedData: flattenedData }));
     // 单元格覆盖层
     var cellOverlays = useTableCellOverlay({
         canvasRef: canvasRef,
@@ -469,6 +492,26 @@ function CanvasTable(props) {
         setSelectedRowKeys: function (keys) {
             setState(function (prev) { return (__assign(__assign({}, prev), { selectedRowKeys: keys })); });
         },
+        /** 获取展开的keys */
+        getExpandedRowKeys: function () {
+            return Array.from(expandedKeys);
+        },
+        /** 设置展开的keys */
+        setExpandedRowKeys: function (keys) {
+            setExpandedRowKeys(keys);
+        },
+        /** 展开指定行 */
+        expandRow: function (key) {
+            expandRow(key);
+        },
+        /** 收起指定行 */
+        collapseRow: function (key) {
+            collapseRow(key);
+        },
+        /** 切换指定行展开状态 */
+        toggleExpandRow: function (key) {
+            toggleExpand(key);
+        },
         /** 滚动到指定位置 */
         scrollTo: function (params) {
             setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollLeft: params.x !== undefined ? params.x : prev.scrollLeft, scrollTop: params.y !== undefined ? params.y : prev.scrollTop })); });
@@ -510,6 +553,11 @@ function CanvasTable(props) {
         state.filters,
         setState,
         setScrollState,
+        expandedKeys,
+        setExpandedRowKeys,
+        expandRow,
+        collapseRow,
+        toggleExpand,
     ]);
     return (jsx(Spin, __assign({ spinning: loading }, { children: jsxs("div", __assign({ ref: containerRef, id: canvasTableId, className: "canvas-table-container ".concat(className || ""), tabIndex: 0, style: __assign(__assign({}, style), { position: "relative", width: width || "100%", height: containerHeight, overflow: "hidden", touchAction: "none", outline: "none" }) }, { children: [jsx("canvas", { ref: canvasRef, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseLeave, onContextMenu: handleCanvasContextMenu, style: {
                         display: "block",

package/dist/es/canvastable/hooks/renderers/BadgeRenderer.js

@@ -0,0 +1,58 @@
+/**
+ * Badge 渲染�?
+ * 负责绘制单元格角标（三角形标记，类似Excel批注�?
+ */
+var BadgeRenderer = /** @class */ (function () {
+    function BadgeRenderer() {
+        this.context = null;
+    }
+    BadgeRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 绘制角标
+     */
+    BadgeRenderer.prototype.render = function (badge, cellX, cellY, cellWidth, cellHeight) {
+        if (!this.context) {
+            throw new Error("BadgeRenderer: Context not set");
+        }
+        var ctx = this.context.ctx;
+        var triangleSize = 12; // 三角形边�?
+        var position = badge.position || "top-right";
+        var color = badge.color || "#ff4d4f";
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        // 根据位置绘制不同方向的三角形
+        switch (position) {
+            case "top-left":
+                // 左上角三角形
+                ctx.moveTo(cellX, cellY);
+                ctx.lineTo(cellX + triangleSize, cellY);
+                ctx.lineTo(cellX, cellY + triangleSize);
+                break;
+            case "top-right":
+                // 右上角三角形（默认）
+                ctx.moveTo(cellX + cellWidth, cellY);
+                ctx.lineTo(cellX + cellWidth - triangleSize, cellY);
+                ctx.lineTo(cellX + cellWidth, cellY + triangleSize);
+                break;
+            case "bottom-left":
+                // 左下角三角形
+                ctx.moveTo(cellX, cellY + cellHeight);
+                ctx.lineTo(cellX, cellY + cellHeight - triangleSize);
+                ctx.lineTo(cellX + triangleSize, cellY + cellHeight);
+                break;
+            case "bottom-right":
+                // 右下角三角形
+                ctx.moveTo(cellX + cellWidth, cellY + cellHeight);
+                ctx.lineTo(cellX + cellWidth, cellY + cellHeight - triangleSize);
+                ctx.lineTo(cellX + cellWidth - triangleSize, cellY + cellHeight);
+                break;
+        }
+        ctx.closePath();
+        ctx.fill();
+    };
+    return BadgeRenderer;
+}());
+
+export { BadgeRenderer };

package/dist/es/canvastable/hooks/renderers/BorderRenderer.js

@@ -0,0 +1,229 @@
+import { COLORS, SCROLLBAR_SIZE } from '../../utils/constants.js';
+import 'zmdms-utils';
+import 'dayjs';
+import '../../../_virtual/_tslib.js';
+import { calculateFixedColumnsRightEdge } from '../../utils/renderHelpers.js';
+
+/**
+ * 边框渲染�?
+ * 负责渲染表格的所有边框（数据行、固定行、表头）
+ */
+var BorderRenderer = /** @class */ (function () {
+    function BorderRenderer() {
+        this.context = null;
+    }
+    BorderRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染数据行边�?
+     */
+    BorderRenderer.prototype.renderDataBorders = function (startRow, endRow, onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context || !this.context.bordered)
+            return;
+        var _a = this.context, ctx = _a.ctx, processedDataSource = _a.processedDataSource, headerHeight = _a.headerHeight, rowHeight = _a.rowHeight, scrollState = _a.scrollState, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, fixedRowsCount = _a.fixedRowsCount, fixedRowsConfig = _a.fixedRowsConfig, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, columnRenderInfos = _a.columnRenderInfos, getColumnWidth = _a.getColumnWidth, mergeCellMap = _a.mergeCellMap;
+        ctx.strokeStyle = COLORS.border;
+        ctx.lineWidth = 1;
+        var dataRowCount = processedDataSource.length;
+        // 计算固定行占用的高度
+        var fixedTopRowsCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
+        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
+        var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+        var fixedBottomHeight = fixedBottomRowsCount * rowHeight;
+        // 计算可滚动数据行的数�?
+        var scrollableDataRowCount = dataRowCount -
+            fixedTopRowsCount -
+            fixedBottomRowsCount -
+            (summaryFixed && hasSummaryRow ? 1 : 0);
+        // 计算实际数据区域的底部位�?
+        var dataBottomY = Math.min(headerHeight +
+            fixedTopRowsCount * rowHeight +
+            scrollableDataRowCount * rowHeight -
+            scrollState.scrollTop, displayHeight -
+            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+            fixedBottomHeight -
+            fixedSummaryHeight);
+        // 绘制垂直边框
+        columnRenderInfos.forEach(function (info, colIndex) {
+            var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
+            if (onlyFixed && !fixed)
+                return;
+            if (!onlyFixed && fixed)
+                return;
+            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
+            var drawX = fixed
+                ? fixedLeft + actualWidth
+                : x + actualWidth - scrollState.scrollLeft;
+            if (drawX >= 0 && drawX <= displayWidth) {
+                ctx.beginPath();
+                ctx.moveTo(drawX, headerHeight);
+                ctx.lineTo(drawX, dataBottomY);
+                ctx.stroke();
+            }
+        });
+        // 绘制水平边框
+        var maxRow = Math.min(endRow, dataRowCount, fixedTopRowsCount + scrollableDataRowCount);
+        var _loop_1 = function (i) {
+            var y = headerHeight +
+                fixedTopRowsCount * rowHeight +
+                (i - fixedTopRowsCount) * rowHeight -
+                scrollState.scrollTop;
+            if (y >= headerHeight + fixedTopRowsCount * rowHeight &&
+                y <= dataBottomY) {
+                // 分段绘制，只绘制当前范围的边�?
+                columnRenderInfos.forEach(function (info, colIndex) {
+                    if (onlyFixed && !info.fixed)
+                        return;
+                    if (!onlyFixed && info.fixed)
+                        return;
+                    var mergeCellKey = "".concat(i, "-").concat(colIndex);
+                    var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
+                    // 只有被合并的单元格（skip=true）才跳过绘制上边�?
+                    if (mergeInfo && mergeInfo.skip) {
+                        return;
+                    }
+                    var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
+                    var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
+                    var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+                    if (!fixed && (drawX + actualWidth < 0 || drawX > displayWidth)) {
+                        return;
+                    }
+                    ctx.beginPath();
+                    ctx.moveTo(Math.max(drawX, 0), y);
+                    ctx.lineTo(Math.min(drawX + actualWidth, displayWidth), y);
+                    ctx.stroke();
+                });
+            }
+        };
+        for (var i = startRow; i <= maxRow; i++) {
+            _loop_1(i);
+        }
+        // 为合并单元格绘制底部边框
+        if (mergeCellMap && mergeCellMap.size > 0) {
+            mergeCellMap.forEach(function (mergeInfo) {
+                if (!mergeInfo.skip && mergeInfo.rowSpan > 1) {
+                    var rowIndex = mergeInfo.rowIndex, colIndex = mergeInfo.colIndex, rowSpan = mergeInfo.rowSpan;
+                    if (rowIndex >= startRow && rowIndex <= maxRow) {
+                        var columnInfo = columnRenderInfos[colIndex];
+                        if (!columnInfo)
+                            return;
+                        if (onlyFixed && !columnInfo.fixed)
+                            return;
+                        if (!onlyFixed && columnInfo.fixed)
+                            return;
+                        var x = columnInfo.x, width = columnInfo.width, fixed = columnInfo.fixed, fixedLeft = columnInfo.fixedLeft;
+                        var actualWidth = getColumnWidth
+                            ? getColumnWidth(colIndex)
+                            : width;
+                        var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+                        var bottomY = headerHeight +
+                            fixedTopRowsCount * rowHeight +
+                            (rowIndex + rowSpan - fixedTopRowsCount) * rowHeight -
+                            scrollState.scrollTop;
+                        if (bottomY >= headerHeight + fixedTopRowsCount * rowHeight &&
+                            bottomY <= dataBottomY) {
+                            ctx.beginPath();
+                            ctx.moveTo(drawX, bottomY);
+                            ctx.lineTo(drawX + actualWidth, bottomY);
+                            ctx.stroke();
+                        }
+                    }
+                }
+            });
+        }
+    };
+    /**
+     * 渲染固定行边框（通用�?
+     */
+    BorderRenderer.prototype.renderFixedRowBorders = function (rowCount, startYCalculator, onlyFixed, borderType) {
+        var _this = this;
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (borderType === void 0) { borderType = "normal"; }
+        if (!this.context || !this.context.bordered)
+            return;
+        var _a = this.context, ctx = _a.ctx, columnRenderInfos = _a.columnRenderInfos, scrollState = _a.scrollState, displayWidth = _a.displayWidth, getColumnWidth = _a.getColumnWidth;
+        ctx.save();
+        ctx.strokeStyle = COLORS.border;
+        ctx.lineWidth = borderType === "summary" ? 2 : 1;
+        var startY = startYCalculator();
+        // 计算固定列的右边�?
+        var fixedColumnsRightEdge = 0;
+        if (onlyFixed) {
+            fixedColumnsRightEdge = calculateFixedColumnsRightEdge(columnRenderInfos, getColumnWidth);
+        }
+        // 绘制水平边框
+        for (var i = 0; i <= rowCount; i++) {
+            var y = startY + i * this.context.rowHeight;
+            ctx.beginPath();
+            if (onlyFixed) {
+                ctx.moveTo(0, y);
+                ctx.lineTo(fixedColumnsRightEdge, y);
+            }
+            else {
+                ctx.moveTo(0, y);
+                ctx.lineTo(displayWidth, y);
+            }
+            ctx.stroke();
+        }
+        // 绘制垂直边框
+        ctx.lineWidth = 1;
+        columnRenderInfos.forEach(function (info, colIndex) {
+            var _a;
+            var x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
+            if (onlyFixed && !fixed)
+                return;
+            if (!onlyFixed && fixed)
+                return;
+            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
+            var drawX = fixed
+                ? fixedLeft + actualWidth
+                : x + actualWidth - scrollState.scrollLeft;
+            if (drawX >= 0 && drawX <= displayWidth) {
+                ctx.beginPath();
+                ctx.moveTo(drawX, startY);
+                ctx.lineTo(drawX, startY + rowCount * (((_a = _this.context) === null || _a === void 0 ? void 0 : _a.rowHeight) || 0));
+                ctx.stroke();
+            }
+        });
+        ctx.restore();
+    };
+    /**
+     * 渲染固定顶部行边�?
+     */
+    BorderRenderer.prototype.renderFixedTopBorders = function (rowCount, onlyFixed) {
+        var _this = this;
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context)
+            return;
+        this.renderFixedRowBorders(rowCount, function () { return _this.context.headerHeight; }, onlyFixed, "normal");
+    };
+    /**
+     * 渲染固定底部行边�?
+     */
+    BorderRenderer.prototype.renderFixedBottomBorders = function (rowCount, onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context)
+            return;
+        var _a = this.context, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, rowHeight = _a.rowHeight;
+        this.renderFixedRowBorders(rowCount, function () {
+            var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+            return (displayHeight -
+                (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                fixedSummaryHeight -
+                rowCount * rowHeight);
+        }, onlyFixed, "normal");
+    };
+    /**
+     * 渲染固定合计行边�?
+     */
+    BorderRenderer.prototype.renderFixedSummaryBorder = function (fixedY, onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context)
+            return;
+        this.renderFixedRowBorders(1, function () { return fixedY; }, onlyFixed, "summary");
+    };
+    return BorderRenderer;
+}());
+
+export { BorderRenderer };