zmdms-webui 2.6.2 → 2.6.4

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

@@ -0,0 +1,192 @@
+import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, SCROLLBAR_SIZE } from '../../utils/constants.js';
+import { drawCheckbox, truncateText } from '../../utils/canvasDrawHelpers.js';
+import { formatCellValue } from '../../utils/formatHelpers.js';
+import '../../../_virtual/_tslib.js';
+import { setTextAlign, calculateTextX } from '../../utils/renderHelpers.js';
+
+/**
+ * 固定行渲染器
+ * 负责渲染固定的顶部行、底部行和合计行
+ */
+var FixedRowRenderer = /** @class */ (function () {
+    function FixedRowRenderer() {
+        this.context = null;
+    }
+    FixedRowRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染固定顶部�?
+     */
+    FixedRowRenderer.prototype.renderFixedTopRows = function (onlyFixed) {
+        var _this = this;
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context) {
+            throw new Error("FixedRowRenderer: Context not set");
+        }
+        var _a = this.context, fixedRowsCount = _a.fixedRowsCount, fixedRowsConfig = _a.fixedRowsConfig;
+        var fixedTopCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
+        for (var i = 0; i < fixedTopCount; i++) {
+            this.renderFixedRow(i, "top", function (idx) { return _this.context.headerHeight + idx * _this.context.rowHeight; }, onlyFixed);
+        }
+    };
+    /**
+     * 渲染固定底部�?
+     */
+    FixedRowRenderer.prototype.renderFixedBottomRows = function (onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context) {
+            throw new Error("FixedRowRenderer: Context not set");
+        }
+        var _a = this.context, processedDataSource = _a.processedDataSource, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, rowHeight = _a.rowHeight, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, fixedRowsConfig = _a.fixedRowsConfig;
+        var fixedBottomCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
+        if (fixedBottomCount === 0)
+            return;
+        var bottomRowsStartIndex = processedDataSource.length -
+            fixedBottomCount -
+            (summaryFixed && hasSummaryRow ? 1 : 0);
+        var _loop_1 = function (i) {
+            var rowIndex = bottomRowsStartIndex + i;
+            this_1.renderFixedRow(rowIndex, "bottom", function () {
+                var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+                return (displayHeight -
+                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                    fixedSummaryHeight -
+                    fixedBottomCount * rowHeight +
+                    i * rowHeight);
+            }, onlyFixed);
+        };
+        var this_1 = this;
+        for (var i = 0; i < fixedBottomCount; i++) {
+            _loop_1(i);
+        }
+    };
+    /**
+     * 渲染固定合计�?
+     */
+    FixedRowRenderer.prototype.renderFixedSummaryRow = function (onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context) {
+            throw new Error("FixedRowRenderer: Context not set");
+        }
+        var _a = this.context, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, processedDataSource = _a.processedDataSource, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, rowHeight = _a.rowHeight;
+        if (!summaryFixed || !hasSummaryRow)
+            return;
+        var summaryRowIndex = processedDataSource.length - 1;
+        var summaryRowY = displayHeight -
+            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+            rowHeight;
+        this.renderFixedRow(summaryRowIndex, "summary", function () { return summaryRowY; }, onlyFixed);
+    };
+    /**
+     * 通用的固定行渲染函数
+     */
+    FixedRowRenderer.prototype.renderFixedRow = function (rowIndex, position, yCalculator, onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, processedDataSource = _a.processedDataSource, columnRenderInfos = _a.columnRenderInfos, rowHeight = _a.rowHeight, scrollState = _a.scrollState, state = _a.state, getRowKey = _a.getRowKey, displayWidth = _a.displayWidth, fixedRowsConfig = _a.fixedRowsConfig, striped = _a.striped, getColumnWidth = _a.getColumnWidth;
+        var record = processedDataSource[rowIndex];
+        if (!record)
+            return;
+        var fixedY = yCalculator(rowIndex);
+        ctx.save();
+        var recordKey = getRowKey(record, rowIndex);
+        var isSelected = state.selectedRowKeys.includes(recordKey);
+        var isHover = state.hoverRowIndex === rowIndex;
+        columnRenderInfos.forEach(function (info, colIndex) {
+            var _a;
+            var column = info.column, x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
+            // 根据 onlyFixed 参数过滤
+            if (onlyFixed && !fixed)
+                return;
+            if (!onlyFixed && fixed)
+                return;
+            var actualWidth = getColumnWidth ? getColumnWidth(colIndex) : width;
+            var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+            // 跳过不可见的�?
+            if (!fixed && (drawX + actualWidth < 0 || drawX > displayWidth)) {
+                return;
+            }
+            // 绘制背景
+            var bgColor = COLORS.white;
+            if ((_a = fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) {
+                bgColor = fixedRowsConfig.style.backgroundColor;
+            }
+            else {
+                if (isSelected) {
+                    bgColor = COLORS.selectedBg;
+                }
+                else if (isHover) {
+                    bgColor = COLORS.hoverBg;
+                }
+                else if (striped && rowIndex % 2 === 1) {
+                    bgColor = COLORS.stripedBg;
+                }
+            }
+            ctx.fillStyle = bgColor;
+            ctx.fillRect(drawX, fixedY, actualWidth, rowHeight);
+            // 处理序号�?
+            if (column.key === "__index__") {
+                if (position !== "summary") {
+                    var indexText = String(rowIndex + 1);
+                    ctx.fillStyle = COLORS.text;
+                    ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+                    ctx.textBaseline = "middle";
+                    setTextAlign(ctx, "center");
+                    var textX = drawX + actualWidth / 2;
+                    var textY = fixedY + rowHeight / 2;
+                    ctx.fillText(indexText, textX, textY);
+                    return;
+                }
+            }
+            // 处理选择框列
+            if (column.key === "__selection__") {
+                if (position !== "summary") {
+                    var checkboxX = drawX + actualWidth / 2;
+                    var textY = fixedY + rowHeight / 2;
+                    drawCheckbox(ctx, checkboxX, textY, isSelected, false, false);
+                    return;
+                }
+            }
+            // 获取单元格�?
+            var dataIndex = column.dataIndex || column.key;
+            var cellValue = record[dataIndex];
+            // 渲染单元格内�?
+            var cellText = formatCellValue(cellValue, column);
+            // 检查是否有render函数且返回自定义ReactNode
+            var shouldRenderInCanvas = true;
+            var isSummaryRowFixed = position === "summary";
+            if (column.render && !isSummaryRowFixed) {
+                var rendered = column.render(cellValue, record, rowIndex);
+                if (typeof rendered !== "string" &&
+                    typeof rendered !== "number" &&
+                    rendered !== null &&
+                    rendered !== undefined) {
+                    shouldRenderInCanvas = false;
+                }
+            }
+            // 只有在需要在Canvas中渲染时才绘制文�?
+            if (cellText && shouldRenderInCanvas) {
+                ctx.fillStyle = COLORS.text;
+                ctx.font =
+                    position === "summary"
+                        ? "bold ".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 = 5;
+                var maxWidth = actualWidth - padding * 2;
+                var textY = fixedY + rowHeight / 2;
+                var textX = calculateTextX(drawX, actualWidth, align, padding);
+                var truncatedText = truncateText(ctx, cellText, maxWidth);
+                ctx.fillText(truncatedText, textX, textY);
+            }
+        });
+        ctx.restore();
+    };
+    return FixedRowRenderer;
+}());
+
+export { FixedRowRenderer };

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

@@ -0,0 +1,395 @@
+import { isValidElement } from 'react';
+import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, TEXT_PADDING } from '../../utils/constants.js';
+import { drawCheckbox, wrapText, truncateText, drawFilterIcon, drawSortIcon } from '../../utils/canvasDrawHelpers.js';
+import { getMaxDepth, flattenHeaders, calculateLayerHeights, getLeafColumns } from '../../utils/multiHeaderHelpers.js';
+import 'zmdms-utils';
+import 'dayjs';
+import { calculateSelectionState, calculateIconArea } from '../../utils/interactionHelpers.js';
+import '../../../_virtual/_tslib.js';
+
+/**
+ * 表头渲染�?
+ * 负责渲染单层和多层表�?
+ */
+var HeaderRenderer = /** @class */ (function () {
+    function HeaderRenderer() {
+        this.context = null;
+        this.isMultiHeader = false;
+        this.flattenedHeaderRows = [];
+        this.layerHeights = [];
+        this.layerStartY = [];
+    }
+    HeaderRenderer.prototype.setContext = function (context) {
+        this.context = context;
+        // 判断是否是多级表�?
+        var maxDepth = getMaxDepth(context.columns);
+        this.isMultiHeader = maxDepth > 1;
+        // 扁平化多级表头（如果需要）
+        if (this.isMultiHeader) {
+            this.flattenedHeaderRows = flattenHeaders(context.columns);
+        }
+        // 计算多级表头每一层的高度
+        var _a = calculateLayerHeights(context.columns, context.baseHeaderHeight ||
+            (maxDepth > 1
+                ? Math.floor(context.headerHeight / maxDepth)
+                : context.headerHeight), context.columnRenderInfos), layerHeights = _a.layerHeights, layerStartY = _a.layerStartY;
+        this.layerHeights = layerHeights;
+        this.layerStartY = layerStartY;
+    };
+    /**
+     * 渲染表头主入�?
+     */
+    HeaderRenderer.prototype.render = function () {
+        if (!this.context) {
+            throw new Error("HeaderRenderer: Context not set");
+        }
+        var _a = this.context, ctx = _a.ctx, displayWidth = _a.displayWidth, headerHeight = _a.headerHeight;
+        // 表头背景
+        ctx.fillStyle = COLORS.headerBg;
+        ctx.fillRect(0, 0, displayWidth, headerHeight);
+        if (this.isMultiHeader) {
+            this.renderMultiHeader();
+        }
+        else {
+            this.renderSingleHeader();
+        }
+    };
+    /**
+     * 渲染单层表头
+     */
+    HeaderRenderer.prototype.renderSingleHeader = function () {
+        var _this = this;
+        if (!this.context)
+            return;
+        var _a = this.context, columnRenderInfos = _a.columnRenderInfos, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight;
+        // 先绘制非fixed�?
+        columnRenderInfos.forEach(function (info, index) {
+            if (!info.fixed) {
+                _this.renderHeaderCell(info, index, displayWidth, displayHeight, false);
+            }
+        });
+        // 再绘制fixed列（覆盖在非fixed列之上）
+        columnRenderInfos.forEach(function (info, index) {
+            if (info.fixed) {
+                _this.renderHeaderCell(info, index, displayWidth, displayHeight, false);
+            }
+        });
+    };
+    /**
+     * 渲染多层表头
+     */
+    HeaderRenderer.prototype.renderMultiHeader = function () {
+        var _this = this;
+        if (!this.context)
+            return;
+        var displayWidth = this.context.displayWidth;
+        // 先绘制非fixed�?
+        this.flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
+            var y = _this.layerStartY[rowIndex];
+            headerRow.forEach(function (headerCell) {
+                // 计算单元格的总高度（如果跨越多层�?
+                var totalCellHeight = 0;
+                for (var i = rowIndex; i < rowIndex + headerCell.rowSpan; i++) {
+                    totalCellHeight += _this.layerHeights[i];
+                }
+                _this.renderMultiHeaderCell(headerCell, y, displayWidth, rowIndex, totalCellHeight, false);
+            });
+        });
+        // 再绘制fixed列（覆盖在非fixed列之上）
+        this.flattenedHeaderRows.forEach(function (headerRow, rowIndex) {
+            var y = _this.layerStartY[rowIndex];
+            headerRow.forEach(function (headerCell) {
+                // 计算单元格的总高度（如果跨越多层�?
+                var totalCellHeight = 0;
+                for (var i = rowIndex; i < rowIndex + headerCell.rowSpan; i++) {
+                    totalCellHeight += _this.layerHeights[i];
+                }
+                _this.renderMultiHeaderCell(headerCell, y, displayWidth, rowIndex, totalCellHeight, true);
+            });
+        });
+    };
+    /**
+     * 渲染单个表头单元格（单层表头�?
+     */
+    HeaderRenderer.prototype.renderHeaderCell = function (info, index, displayWidth, displayHeight, onlyFixed) {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, scrollState = _a.scrollState, headerHeight = _a.headerHeight, bordered = _a.bordered, state = _a.state, processedDataSource = _a.processedDataSource, getRowKey = _a.getRowKey, rowSelection = _a.rowSelection, resizeState = _a.resizeState, getColumnWidth = _a.getColumnWidth, _b = _a.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _b === void 0 ? 8 : _b, headerAlign = _a.headerAlign;
+        var column = info.column, x = info.x, fixed = info.fixed, fixedLeft = info.fixedLeft;
+        var width = getColumnWidth ? getColumnWidth(index) : info.width;
+        var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+        // 跳过不在可视区域的列
+        if (!fixed && (drawX + width < 0 || drawX > displayWidth)) {
+            return;
+        }
+        // 绘制表头单元�?
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(drawX, 0, width, headerHeight);
+        ctx.clip();
+        // 绘制单元格背�?
+        ctx.fillStyle = COLORS.headerBg;
+        ctx.fillRect(drawX, 0, width, headerHeight);
+        // 表头文本
+        ctx.fillStyle = COLORS.text;
+        ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+        ctx.textBaseline = "middle";
+        var textY = headerHeight / 2;
+        // 绘制选择�?
+        if (column.key === "__selection__") {
+            var selectionState = calculateSelectionState(processedDataSource, state.selectedRowKeys, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
+            var checkboxX = drawX + width / 2;
+            drawCheckbox(ctx, checkboxX, textY, selectionState.isAllSelected, false, selectionState.isIndeterminate);
+        }
+        else {
+            // 计算图标占用的宽�?
+            var iconArea = calculateIconArea(column, width);
+            // 确定表头对齐方式
+            var columnHeaderAlign = column.headerAlign || headerAlign;
+            // 绘制文本
+            if (!isValidElement(column.title)) {
+                var titleText = String(column.title || "");
+                var textX_1;
+                var textMaxWidth = void 0;
+                if (iconArea.iconsWidth > 0) {
+                    if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else if (columnHeaderAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
+                    }
+                }
+                else {
+                    if (columnHeaderAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_1 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                    else if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_1 = drawX + width - TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_1 = drawX + width / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2;
+                    }
+                }
+                if (column.wrap) {
+                    var lines = wrapText(ctx, titleText, textMaxWidth);
+                    var lineHeight_1 = FONT_SIZE + 5;
+                    var startY_1 = textY - ((lines.length - 1) * lineHeight_1) / 2;
+                    lines.forEach(function (line, idx) {
+                        var lineY = startY_1 + idx * lineHeight_1;
+                        ctx.fillText(line, textX_1, lineY);
+                    });
+                }
+                else {
+                    var truncatedText = truncateText(ctx, titleText, textMaxWidth);
+                    ctx.fillText(truncatedText, textX_1, textY);
+                }
+            }
+            // 绘制筛选图�?
+            if (iconArea.hasFilter) {
+                var iconX = drawX + width - 10;
+                var hasFilterValue = state.filters[column.key] && state.filters[column.key].length > 0;
+                drawFilterIcon(ctx, iconX, textY, hasFilterValue);
+            }
+            // 绘制排序图标
+            if (iconArea.hasOrder) {
+                var iconX = drawX + width - (iconArea.hasFilter ? 24 : 10);
+                drawSortIcon(ctx, iconX, textY, column.key === state.sortField ? state.sortOrder : null);
+            }
+        }
+        ctx.textAlign = "left";
+        ctx.restore();
+        // 绘制表头列之间的边框
+        if (bordered) {
+            ctx.strokeStyle = COLORS.border;
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(drawX + width, 0);
+            ctx.lineTo(drawX + width, headerHeight);
+            ctx.stroke();
+        }
+        // 绘制列宽调整手柄
+        if (column.key !== "__selection__" && resizeState) {
+            var isHover = resizeState.hoverResizeColumnIndex === index;
+            var isResizing = resizeState.resizingColumnIndex === index;
+            if (isHover || isResizing) {
+                var handleX = drawX + width - RESIZE_HANDLE_WIDTH / 2;
+                ctx.fillStyle = isResizing ? "#1890ff" : "rgba(24, 144, 255, 0.3)";
+                ctx.fillRect(handleX, 0, RESIZE_HANDLE_WIDTH, headerHeight);
+                if (isResizing) {
+                    ctx.strokeStyle = "#1890ff";
+                    ctx.lineWidth = 1;
+                    ctx.setLineDash([4, 4]);
+                    ctx.beginPath();
+                    ctx.moveTo(drawX + width, 0);
+                    ctx.lineTo(drawX + width, displayHeight);
+                    ctx.stroke();
+                    ctx.setLineDash([]);
+                }
+            }
+        }
+    };
+    /**
+     * 渲染多层表头单元�?
+     */
+    HeaderRenderer.prototype.renderMultiHeaderCell = function (headerCell, y, displayWidth, currentDepth, totalCellHeight, onlyFixed) {
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, scrollState = _a.scrollState, bordered = _a.bordered, state = _a.state, processedDataSource = _a.processedDataSource, getRowKey = _a.getRowKey, rowSelection = _a.rowSelection, columnRenderInfos = _a.columnRenderInfos, columns = _a.columns, getColumnWidth = _a.getColumnWidth, headerAlign = _a.headerAlign;
+        var column = headerCell.column, colSpan = headerCell.colSpan, rowSpan = headerCell.rowSpan, colIndex = headerCell.colIndex;
+        // 计算x位置和宽�?
+        var x = 0;
+        var width = 0;
+        var isFixed = false;
+        var fixedLeft = 0;
+        var leafColumns = getLeafColumns(columns);
+        for (var i = 0; i < leafColumns.length; i++) {
+            var leafInfo = columnRenderInfos[i];
+            if (i < colIndex) {
+                x += getColumnWidth ? getColumnWidth(i) : leafInfo.width;
+            }
+            else if (i < colIndex + colSpan) {
+                width += getColumnWidth ? getColumnWidth(i) : leafInfo.width;
+                if (leafInfo.fixed) {
+                    isFixed = true;
+                    if (i === colIndex) {
+                        fixedLeft = leafInfo.fixedLeft;
+                    }
+                }
+            }
+        }
+        // 根据 onlyFixed 参数过滤
+        if (onlyFixed && !isFixed)
+            return;
+        if (!onlyFixed && isFixed)
+            return;
+        var drawX = isFixed ? fixedLeft : x - scrollState.scrollLeft;
+        // 跳过不在可视区域的列
+        if (!isFixed && (drawX + width < 0 || drawX > displayWidth)) {
+            return;
+        }
+        // 绘制单元格背�?
+        ctx.fillStyle = COLORS.headerBg;
+        ctx.fillRect(drawX, y, width, totalCellHeight);
+        // 绘制边框
+        if (bordered) {
+            ctx.strokeStyle = COLORS.border;
+            ctx.lineWidth = 1;
+            ctx.strokeRect(drawX, y, width, totalCellHeight);
+        }
+        var maxDepth = getMaxDepth(columns);
+        var isLastLevel = currentDepth + rowSpan === maxDepth;
+        var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
+        var textY = y + totalCellHeight / 2;
+        // 绘制选择�?
+        if (column.key === "__selection__" && currentDepth === 0) {
+            var selectionState = calculateSelectionState(processedDataSource, state.selectedRowKeys, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
+            var checkboxX = drawX + width / 2;
+            drawCheckbox(ctx, checkboxX, textY, selectionState.isAllSelected, false, selectionState.isIndeterminate);
+        }
+        else {
+            // 绘制文本
+            ctx.fillStyle = COLORS.text;
+            ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+            ctx.textBaseline = "middle";
+            if (!isValidElement(column.title)) {
+                var titleText = String(column.title || "");
+                var shouldShowIcons = isLastLevel && !isSpecialColumn;
+                var iconArea = shouldShowIcons
+                    ? calculateIconArea(column, width)
+                    : { hasOrder: false, hasFilter: false, iconsWidth: 0 };
+                var columnHeaderAlign = column.headerAlign || headerAlign;
+                if (isLastLevel && iconArea.iconsWidth > 0) {
+                    var textX_2;
+                    var textMaxWidth = void 0;
+                    if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_2 = drawX + width - TEXT_PADDING - iconArea.iconsWidth;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else if (columnHeaderAlign === "center") {
+                        ctx.textAlign = "center";
+                        textX_2 = drawX + (width - iconArea.iconsWidth) / 2;
+                        textMaxWidth = width - TEXT_PADDING * 2 - iconArea.iconsWidth;
+                    }
+                    else {
+                        ctx.textAlign = "left";
+                        textX_2 = drawX + TEXT_PADDING;
+                        textMaxWidth = width - TEXT_PADDING - iconArea.iconsWidth;
+                    }
+                    if (column.wrap) {
+                        var lines = wrapText(ctx, titleText, textMaxWidth);
+                        var lineHeight_2 = FONT_SIZE + 5;
+                        var startY_2 = textY - ((lines.length - 1) * lineHeight_2) / 2;
+                        lines.forEach(function (line, idx) {
+                            var lineY = startY_2 + idx * lineHeight_2;
+                            ctx.fillText(line, textX_2, lineY);
+                        });
+                    }
+                    else {
+                        var truncated = truncateText(ctx, titleText, textMaxWidth);
+                        ctx.fillText(truncated, textX_2, textY);
+                    }
+                }
+                else {
+                    var textX_3;
+                    if (columnHeaderAlign === "left") {
+                        ctx.textAlign = "left";
+                        textX_3 = drawX + TEXT_PADDING;
+                    }
+                    else if (columnHeaderAlign === "right") {
+                        ctx.textAlign = "right";
+                        textX_3 = drawX + width - TEXT_PADDING;
+                    }
+                    else {
+                        ctx.textAlign = "center";
+                        textX_3 = drawX + width / 2;
+                    }
+                    if (column.wrap) {
+                        var lines = wrapText(ctx, titleText, width - TEXT_PADDING * 2);
+                        var lineHeight_3 = FONT_SIZE + 5;
+                        var startY_3 = textY - ((lines.length - 1) * lineHeight_3) / 2;
+                        lines.forEach(function (line, idx) {
+                            var lineY = startY_3 + idx * lineHeight_3;
+                            ctx.fillText(line, textX_3, lineY);
+                        });
+                    }
+                    else {
+                        var truncated = truncateText(ctx, titleText, width - TEXT_PADDING * 2);
+                        ctx.fillText(truncated, textX_3, textY);
+                    }
+                }
+                // 绘制筛选图�?
+                if (iconArea.hasFilter) {
+                    var iconX = drawX + width - 10;
+                    var hasFilterValue = state.filters[column.key] && state.filters[column.key].length > 0;
+                    drawFilterIcon(ctx, iconX, textY, hasFilterValue);
+                }
+                // 绘制排序图标
+                if (iconArea.hasOrder) {
+                    var iconX = drawX + width - (iconArea.hasFilter ? 24 : 10);
+                    drawSortIcon(ctx, iconX, textY, column.key === state.sortField ? state.sortOrder : null);
+                }
+            }
+        }
+        ctx.textAlign = "left";
+    };
+    return HeaderRenderer;
+}());
+
+export { HeaderRenderer };

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

@@ -0,0 +1,85 @@
+import { COLORS, SCROLLBAR_SIZE, SCROLLBAR_PADDING } from '../../utils/constants.js';
+import 'zmdms-utils';
+import 'dayjs';
+import '../../../_virtual/_tslib.js';
+
+/**
+ * 滚动条渲染器
+ * 负责渲染垂直和水平滚动条
+ */
+var ScrollbarRenderer = /** @class */ (function () {
+    function ScrollbarRenderer() {
+        this.context = null;
+    }
+    ScrollbarRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染滚动�?
+     */
+    ScrollbarRenderer.prototype.render = function () {
+        if (!this.context) {
+            throw new Error("ScrollbarRenderer: Context not set");
+        }
+        this.renderVerticalScrollbar();
+        this.renderHorizontalScrollbar();
+        this.renderScrollbarCorner();
+    };
+    /**
+     * 渲染垂直滚动�?
+     */
+    ScrollbarRenderer.prototype.renderVerticalScrollbar = function () {
+        if (!this.context || !this.context.needVerticalScrollbar)
+            return;
+        var _a = this.context, ctx = _a.ctx, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight, headerHeight = _a.headerHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, scrollState = _a.scrollState, verticalScrollbarTop = _a.verticalScrollbarTop, verticalScrollbarHeight = _a.verticalScrollbarHeight;
+        var scrollbarX = displayWidth - SCROLLBAR_SIZE;
+        var scrollbarY = headerHeight;
+        var scrollbarHeight = needHorizontalScrollbar
+            ? displayHeight - SCROLLBAR_SIZE - headerHeight
+            : displayHeight - headerHeight;
+        // 滚动条轨�?
+        ctx.fillStyle = COLORS.scrollbarTrack;
+        ctx.fillRect(scrollbarX, scrollbarY, SCROLLBAR_SIZE, scrollbarHeight);
+        // 滚动条滑�?
+        ctx.fillStyle = scrollState.isDraggingVertical
+            ? COLORS.scrollbarThumbActive
+            : COLORS.scrollbarThumb;
+        ctx.fillRect(scrollbarX + SCROLLBAR_PADDING, verticalScrollbarTop + headerHeight + SCROLLBAR_PADDING, SCROLLBAR_SIZE - SCROLLBAR_PADDING * 2, verticalScrollbarHeight - SCROLLBAR_PADDING * 2);
+    };
+    /**
+     * 渲染水平滚动�?
+     */
+    ScrollbarRenderer.prototype.renderHorizontalScrollbar = function () {
+        if (!this.context || !this.context.needHorizontalScrollbar)
+            return;
+        var _a = this.context, ctx = _a.ctx, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight, needVerticalScrollbar = _a.needVerticalScrollbar, scrollState = _a.scrollState, horizontalScrollbarLeft = _a.horizontalScrollbarLeft, horizontalScrollbarWidth = _a.horizontalScrollbarWidth;
+        var scrollbarX = 0;
+        var scrollbarY = displayHeight - SCROLLBAR_SIZE;
+        var scrollbarWidth = needVerticalScrollbar
+            ? displayWidth - SCROLLBAR_SIZE
+            : displayWidth;
+        // 滚动条轨�?
+        ctx.fillStyle = COLORS.scrollbarTrack;
+        ctx.fillRect(scrollbarX, scrollbarY, scrollbarWidth, SCROLLBAR_SIZE);
+        // 滚动条滑�?
+        ctx.fillStyle = scrollState.isDraggingHorizontal
+            ? COLORS.scrollbarThumbActive
+            : COLORS.scrollbarThumb;
+        ctx.fillRect(horizontalScrollbarLeft + SCROLLBAR_PADDING, scrollbarY + SCROLLBAR_PADDING, horizontalScrollbarWidth - SCROLLBAR_PADDING * 2, SCROLLBAR_SIZE - SCROLLBAR_PADDING * 2);
+    };
+    /**
+     * 渲染滚动条交叉处
+     */
+    ScrollbarRenderer.prototype.renderScrollbarCorner = function () {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight, needVerticalScrollbar = _a.needVerticalScrollbar, needHorizontalScrollbar = _a.needHorizontalScrollbar;
+        if (needVerticalScrollbar && needHorizontalScrollbar) {
+            ctx.fillStyle = COLORS.scrollbarTrack;
+            ctx.fillRect(displayWidth - SCROLLBAR_SIZE, displayHeight - SCROLLBAR_SIZE, SCROLLBAR_SIZE, SCROLLBAR_SIZE);
+        }
+    };
+    return ScrollbarRenderer;
+}());
+
+export { ScrollbarRenderer };