zmdms-webui 2.3.0 → 2.3.2

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

@@ -0,0 +1,57 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+/**
+ * 单元格框选管理 Hook
+ */
+var useTableSelection = function (params) {
+    var setState = params.setState;
+    // 框选起始位置
+    var selectionStartRef = useRef(null);
+    // 开始框选
+    var startSelection = useMemoizedFn(function (cell) {
+        selectionStartRef.current = cell;
+        setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: true, cellSelection: {
+                startRow: cell.row,
+                endRow: cell.row,
+                startCol: cell.col,
+                endCol: cell.col,
+            } })); });
+    });
+    // 更新框选区域
+    var updateSelection = useMemoizedFn(function (cell) {
+        if (!selectionStartRef.current)
+            return;
+        setState(function (prev) { return (__assign(__assign({}, prev), { cellSelection: {
+                startRow: selectionStartRef.current.row,
+                startCol: selectionStartRef.current.col,
+                endRow: cell.row,
+                endCol: cell.col,
+            } })); });
+    });
+    // 扩展选区（Shift+点击）
+    var extendSelection = useMemoizedFn(function (cell) {
+        setState(function (prev) { return (__assign(__assign({}, prev), { cellSelection: __assign(__assign({}, prev.cellSelection), { endRow: cell.row, endCol: cell.col }) })); });
+    });
+    // 结束框选
+    var endSelection = useMemoizedFn(function () {
+        setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: false })); });
+        selectionStartRef.current = null;
+    });
+    // 清除选区
+    var clearSelection = useMemoizedFn(function () {
+        setState(function (prev) { return (__assign(__assign({}, prev), { cellSelection: null, isSelecting: false })); });
+        selectionStartRef.current = null;
+    });
+    return {
+        selectionStartRef: selectionStartRef,
+        startSelection: startSelection,
+        updateSelection: updateSelection,
+        extendSelection: extendSelection,
+        endSelection: endSelection,
+        clearSelection: clearSelection,
+    };
+};
+
+export { useTableSelection };

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

@@ -0,0 +1,218 @@
+import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
+import { useState, useEffect, useMemo } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import 'dayjs';
+import { getAllLeafColumns, findColumnByKey } from '../utils/columnHelpers.js';
+
+/**
+ * 表格状态管理 Hook
+ */
+var useTableState = function (params) {
+    var dataSource = params.dataSource, columns = params.columns, rowSelection = params.rowSelection, onFilterChange = params.onFilterChange;
+    // 表格状态
+    var _a = useState({
+        sortField: null,
+        sortOrder: null,
+        filters: {},
+        selectedRowKeys: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [],
+        hoverRowIndex: null,
+        filterPopover: {
+            visible: false,
+            columnKey: null,
+            position: { x: 0, y: 0 },
+        },
+        cellSelection: null,
+        isSelecting: false,
+        tooltip: {
+            visible: false,
+            content: "",
+            position: { x: 0, y: 0 },
+            cellInfo: null,
+        },
+        badgePopover: {
+            visible: false,
+            content: "",
+            position: { x: 0, y: 0 },
+        },
+    }), state = _a[0], setState = _a[1];
+    // 同步外部选中状态
+    useEffect(function () {
+        if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { selectedRowKeys: rowSelection.selectedRowKeys || [] })); });
+        }
+    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys]);
+    // 自动生成筛选选项（基于数据的唯一值）
+    var autoGeneratedFilters = useMemo(function () {
+        var filtersMap = {};
+        // 如果没有数据，直接返回空对象
+        if (dataSource.length === 0) {
+            return filtersMap;
+        }
+        // 获取所有叶子列（包括多级表头中的嵌套列）
+        var leafColumns = getAllLeafColumns(columns);
+        leafColumns.forEach(function (column) {
+            // 如果列已经有有效的filters或未开启filter，跳过
+            if ((column.filters && column.filters.length > 0) ||
+                column.isFilter === false ||
+                column.key === "__selection__") {
+                return;
+            }
+            var dataIndex = column.dataIndex || column.key;
+            var uniqueValues = new Set();
+            dataSource.forEach(function (record) {
+                var value = record[dataIndex];
+                if (value !== null && value !== undefined && value !== "") {
+                    uniqueValues.add(value);
+                }
+            });
+            if (uniqueValues.size > 0) {
+                filtersMap[column.key] = Array.from(uniqueValues)
+                    .map(function (value) { return ({
+                    text: String(value),
+                    value: value,
+                }); })
+                    .slice(0, 50);
+            }
+        });
+        return filtersMap;
+    }, [dataSource, columns]);
+    // 判断是否为数值筛选
+    var isNumberFilter = function (value) {
+        return (value &&
+            typeof value === "object" &&
+            "operator" in value &&
+            "value" in value);
+    };
+    // 判断是否为模糊查询
+    var isFuzzyFilter = function (value) {
+        return value && typeof value === "object" && "__fuzzy__" in value;
+    };
+    // 应用数值筛选
+    var applyNumberFilter = function (recordValue, filterValue) {
+        var numValue = parseFloat(recordValue);
+        if (isNaN(numValue))
+            return false;
+        var operator = filterValue.operator, value = filterValue.value;
+        switch (operator) {
+            case "=":
+                return numValue === value;
+            case "!=":
+                return numValue !== value;
+            case ">":
+                return numValue > value;
+            case "<":
+                return numValue < value;
+            case ">=":
+                return numValue >= value;
+            case "<=":
+                return numValue <= value;
+            default:
+                return false;
+        }
+    };
+    // 过滤和排序后的数据
+    var processedDataSource = useMemo(function () {
+        var data = __spreadArray([], dataSource, true);
+        // 应用过滤
+        Object.keys(state.filters).forEach(function (key) {
+            var filterValues = state.filters[key];
+            if (filterValues && filterValues.length > 0) {
+                var column_1 = findColumnByKey(columns, key);
+                var dataIndex_1 = (column_1 === null || column_1 === void 0 ? void 0 : column_1.dataIndex) || key;
+                if (column_1 === null || column_1 === void 0 ? void 0 : column_1.onFilter) {
+                    // 使用自定义过滤方法
+                    data = data.filter(function (record) {
+                        return filterValues.some(function (value) { return column_1.onFilter(value, record); });
+                    });
+                }
+                else {
+                    // 检查是否为数值筛选
+                    var firstValue = filterValues[0];
+                    if (isNumberFilter(firstValue)) {
+                        // 数值筛选逻辑
+                        // 如果有多个条件（区间筛选），需要同时满足所有条件（且关系）
+                        // 如果只有一个条件（单值筛选），满足该条件即可
+                        data = data.filter(function (record) {
+                            return filterValues.every(function (filterValue) {
+                                return applyNumberFilter(record[dataIndex_1], filterValue);
+                            });
+                        });
+                    }
+                    else if (isFuzzyFilter(firstValue)) {
+                        // 模糊查询逻辑
+                        var searchText_1 = firstValue.text.toLowerCase();
+                        data = data.filter(function (record) {
+                            var recordValue = String(record[dataIndex_1] || "");
+                            return recordValue.toLowerCase().includes(searchText_1);
+                        });
+                    }
+                    else {
+                        // 使用默认过滤方法（精确匹配）
+                        data = data.filter(function (record) {
+                            return filterValues.includes(record[dataIndex_1]);
+                        });
+                    }
+                }
+            }
+        });
+        // 应用排序
+        if (state.sortField && state.sortOrder) {
+            var column_2 = findColumnByKey(columns, state.sortField);
+            if (column_2 && column_2.isOrder !== false) {
+                var sortFn_1 = typeof column_2.sorter === "function"
+                    ? column_2.sorter
+                    : function (a, b) {
+                        var dataIndex = column_2.dataIndex || column_2.key;
+                        var aVal = a[dataIndex];
+                        var bVal = b[dataIndex];
+                        // 默认排序逻辑
+                        if (aVal === bVal)
+                            return 0;
+                        if (aVal === null || aVal === undefined)
+                            return 1;
+                        if (bVal === null || bVal === undefined)
+                            return -1;
+                        // 数字排序
+                        if (typeof aVal === "number" && typeof bVal === "number") {
+                            return aVal - bVal;
+                        }
+                        // 字符串排序
+                        return String(aVal).localeCompare(String(bVal));
+                    };
+                data.sort(function (a, b) {
+                    var result = sortFn_1(a, b);
+                    return state.sortOrder === "ascend" ? result : -result;
+                });
+            }
+        }
+        return data;
+    }, [dataSource, columns, state.filters, state.sortField, state.sortOrder]);
+    // 处理过滤变化
+    var handleFilterChange = useMemoizedFn(function (columnKey, values) {
+        var _a;
+        setState(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), { filters: __assign(__assign({}, prev.filters), (_a = {}, _a[columnKey] = values, _a)) }));
+        });
+        var newFilters = __assign(__assign({}, state.filters), (_a = {}, _a[columnKey] = values, _a));
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(newFilters);
+    });
+    // 关闭过滤弹窗
+    var closeFilterPopover = useMemoizedFn(function () {
+        setState(function (prev) { return (__assign(__assign({}, prev), { filterPopover: {
+                visible: false,
+                columnKey: null,
+                position: { x: 0, y: 0 },
+            } })); });
+    });
+    return {
+        state: state,
+        setState: setState,
+        processedDataSource: processedDataSource,
+        handleFilterChange: handleFilterChange,
+        closeFilterPopover: closeFilterPopover,
+        autoGeneratedFilters: autoGeneratedFilters,
+    };
+};
+
+export { useTableState };

package/dist/es/canvastable/index.js

@@ -0,0 +1,5 @@
+import CanvasTable from './canvasTable.js';
+
+
+
+export { CanvasTable as default };

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

@@ -0,0 +1,156 @@
+import { COLORS, CHECKBOX_SIZE, SORT_ICON_SIZE } from './constants.js';
+
+/**
+ * Canvas 绘制辅助函数
+ */
+/**
+ * 绘制复选框
+ */
+var drawCheckbox = function (ctx, x, y, checked, disabled, indeterminate) {
+    if (indeterminate === void 0) { indeterminate = false; }
+    var size = CHECKBOX_SIZE;
+    var centerX = x;
+    var centerY = y;
+    // 绘制边框
+    if (disabled) {
+        // 禁用状态：灰色边框和背景
+        ctx.strokeStyle = COLORS.checkboxDisabled;
+        ctx.fillStyle = checked || indeterminate ? "#f5f5f5" : COLORS.white;
+    }
+    else if (checked || indeterminate) {
+        // 选中或部分选中状态
+        ctx.strokeStyle = COLORS.primary;
+        ctx.fillStyle = COLORS.primary;
+    }
+    else {
+        // 正常未选中状态
+        ctx.strokeStyle = COLORS.checkboxBorder;
+        ctx.fillStyle = COLORS.white;
+    }
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.rect(centerX - size / 2, centerY - size / 2, size, size);
+    ctx.fill();
+    ctx.stroke();
+    // 绘制勾选标记或部分选中标记
+    if (indeterminate) {
+        // 部分选中状态：绘制横线
+        ctx.strokeStyle = disabled ? COLORS.checkboxDisabled : COLORS.white;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(centerX - 4, centerY);
+        ctx.lineTo(centerX + 4, centerY);
+        ctx.stroke();
+    }
+    else if (checked) {
+        // 完全选中状态：绘制勾选标记
+        ctx.strokeStyle = disabled ? COLORS.checkboxDisabled : COLORS.white;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(centerX - 4, centerY);
+        ctx.lineTo(centerX - 1, centerY + 3);
+        ctx.lineTo(centerX + 4, centerY - 4);
+        ctx.stroke();
+    }
+};
+/**
+ * 绘制排序图标
+ */
+var drawSortIcon = function (ctx, x, y, order) {
+    var size = SORT_ICON_SIZE;
+    var gap = 4; // 上下箭头间距
+    // 向上箭头（居中绘制）
+    ctx.fillStyle = order === "ascend" ? COLORS.primary : COLORS.scrollbarThumb;
+    ctx.beginPath();
+    ctx.moveTo(x, y - gap / 2 - size); // 顶点
+    ctx.lineTo(x - size / 2, y - gap / 2); // 左下角
+    ctx.lineTo(x + size / 2, y - gap / 2); // 右下角
+    ctx.closePath();
+    ctx.fill();
+    // 向下箭头（居中绘制）
+    ctx.fillStyle = order === "descend" ? COLORS.primary : COLORS.scrollbarThumb;
+    ctx.beginPath();
+    ctx.moveTo(x, y + gap / 2 + size); // 底点
+    ctx.lineTo(x - size / 2, y + gap / 2); // 左上角
+    ctx.lineTo(x + size / 2, y + gap / 2); // 右上角
+    ctx.closePath();
+    ctx.fill();
+};
+/**
+ * 绘制过滤图标（放大镜）
+ */
+var drawFilterIcon = function (ctx, x, y, active) {
+    ctx.strokeStyle = active ? COLORS.primary : COLORS.scrollbarThumb;
+    ctx.fillStyle = active ? COLORS.primary : COLORS.scrollbarThumb;
+    ctx.lineWidth = 1.5;
+    // 绘制圆形（放大镜的镜面）
+    var radius = 4;
+    ctx.beginPath();
+    ctx.arc(x - 1, y - 1, radius, 0, Math.PI * 2);
+    ctx.stroke();
+    // 绘制手柄（放大镜的柄）
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x + 2, y + 2);
+    ctx.lineTo(x + 5, y + 5);
+    ctx.stroke();
+};
+/**
+ * 文本截断
+ */
+var truncateText = function (ctx, text, maxWidth) {
+    var width = ctx.measureText(text).width;
+    if (width <= maxWidth)
+        return text;
+    var truncated = text;
+    while (ctx.measureText(truncated + "...").width > maxWidth &&
+        truncated.length > 0) {
+        truncated = truncated.slice(0, -1);
+    }
+    return truncated + "...";
+};
+/**
+ * 检查文本是否被截断
+ */
+var isTextTruncated = function (ctx, text, maxWidth) {
+    var width = ctx.measureText(text).width;
+    return width > maxWidth;
+};
+/**
+ * 文本换行
+ */
+var wrapText = function (ctx, text, maxWidth) {
+    // 首先按照 \n 分割文本
+    var paragraphs = text.split("\n");
+    var allLines = [];
+    // 对每个段落进行自动换行处理
+    for (var _i = 0, paragraphs_1 = paragraphs; _i < paragraphs_1.length; _i++) {
+        var paragraph = paragraphs_1[_i];
+        if (paragraph === "") {
+            // 空行也要保留
+            allLines.push("");
+            continue;
+        }
+        var words = paragraph.split("");
+        var currentLine = "";
+        for (var _a = 0, words_1 = words; _a < words_1.length; _a++) {
+            var char = words_1[_a];
+            var testLine = currentLine + char;
+            var metrics = ctx.measureText(testLine);
+            var testWidth = metrics.width;
+            if (testWidth > maxWidth && currentLine.length > 0) {
+                allLines.push(currentLine);
+                currentLine = char;
+            }
+            else {
+                currentLine = testLine;
+            }
+        }
+        if (currentLine.length > 0) {
+            allLines.push(currentLine);
+        }
+    }
+    return allLines;
+};
+
+export { drawCheckbox, drawFilterIcon, drawSortIcon, isTextTruncated, truncateText, wrapText };

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

@@ -0,0 +1,121 @@
+/**
+ * 单元格相关辅助函数
+ */
+/**
+ * 获取鼠标位置对应的单元格
+ */
+var getCellFromMousePosition = function (params) {
+    var x = params.x, y = params.y, headerHeight = params.headerHeight, rowHeight = params.rowHeight, scrollTop = params.scrollTop, scrollLeft = params.scrollLeft, columnRenderInfos = params.columnRenderInfos, dataLength = params.dataLength, _a = params.fixedTopRowsCount, fixedTopRowsCount = _a === void 0 ? 0 : _a, _b = params.fixedBottomRowsCount, fixedBottomRowsCount = _b === void 0 ? 0 : _b, _c = params.hasSummaryRow, hasSummaryRow = _c === void 0 ? false : _c, _d = params.fixedSummaryRow, fixedSummaryRow = _d === void 0 ? false : _d, _e = params.displayHeight, displayHeight = _e === void 0 ? 0 : _e, _f = params.needHorizontalScrollbar, needHorizontalScrollbar = _f === void 0 ? false : _f, _g = params.scrollbarSize, scrollbarSize = _g === void 0 ? 12 : _g;
+    // 判断是否在表头区域（row=-1表示表头）
+    var rowIndex;
+    if (y < headerHeight) {
+        rowIndex = -1; // 表头行
+    }
+    else {
+        // 检查是否在固定顶部行区域
+        var fixedTopAreaEnd = headerHeight + fixedTopRowsCount * rowHeight;
+        if (y < fixedTopAreaEnd) {
+            // 在固定顶部行区域
+            var relativeY = y - headerHeight;
+            rowIndex = Math.floor(relativeY / rowHeight);
+            if (rowIndex < 0 || rowIndex >= fixedTopRowsCount)
+                return null;
+            return findColumn(x, scrollLeft, columnRenderInfos, rowIndex);
+        }
+        // 检查是否在固定合计行区域
+        if (fixedSummaryRow && hasSummaryRow && displayHeight > 0) {
+            var summaryRowY = displayHeight -
+                (needHorizontalScrollbar ? scrollbarSize : 0) -
+                rowHeight;
+            if (y >= summaryRowY) {
+                // 在固定合计行区域
+                rowIndex = dataLength - 1; // 合计行是最后一行
+                return findColumn(x, scrollLeft, columnRenderInfos, rowIndex);
+            }
+        }
+        // 检查是否在固定底部行区域
+        if (fixedBottomRowsCount > 0 && displayHeight > 0) {
+            var fixedSummaryHeight = fixedSummaryRow && hasSummaryRow ? rowHeight : 0;
+            var fixedBottomAreaStart = displayHeight -
+                (needHorizontalScrollbar ? scrollbarSize : 0) -
+                fixedSummaryHeight -
+                fixedBottomRowsCount * rowHeight;
+            if (y >= fixedBottomAreaStart &&
+                y <
+                    displayHeight -
+                        (needHorizontalScrollbar ? scrollbarSize : 0) -
+                        fixedSummaryHeight) {
+                // 在固定底部行区域
+                var relativeY = y - fixedBottomAreaStart;
+                var relativeIndex = Math.floor(relativeY / rowHeight);
+                var bottomRowsStartIndex = dataLength -
+                    fixedBottomRowsCount -
+                    (fixedSummaryRow && hasSummaryRow ? 1 : 0);
+                rowIndex = bottomRowsStartIndex + relativeIndex;
+                if (rowIndex < 0 || rowIndex >= dataLength)
+                    return null;
+                return findColumn(x, scrollLeft, columnRenderInfos, rowIndex);
+            }
+        }
+        // 在可滚动区域
+        var adjustedY = y - fixedTopAreaEnd + scrollTop;
+        rowIndex = Math.floor(adjustedY / rowHeight) + fixedTopRowsCount;
+        if (rowIndex < fixedTopRowsCount || rowIndex >= dataLength)
+            return null;
+        // 如果有固定底部行或合计行，需要排除它们
+        var maxScrollableRow = dataLength -
+            fixedBottomRowsCount -
+            (fixedSummaryRow && hasSummaryRow ? 1 : 0);
+        if (rowIndex >= maxScrollableRow) {
+            // 超出可滚动区域，可能在滚动条或空白区域
+            return null;
+        }
+    }
+    return findColumn(x, scrollLeft, columnRenderInfos, rowIndex);
+};
+/**
+ * 根据x坐标查找列索引
+ */
+function findColumn(x, scrollLeft, columnRenderInfos, rowIndex) {
+    // 优先查找fixed列（因为fixed列在上层，会遮挡下层的非fixed列）
+    for (var i = 0; i < columnRenderInfos.length; i++) {
+        var info = columnRenderInfos[i];
+        if (info.fixed) {
+            var fixedLeft = info.fixedLeft, width = info.width;
+            var drawX = fixedLeft;
+            if (x >= drawX && x < drawX + width) {
+                return { row: rowIndex, col: i };
+            }
+        }
+    }
+    // 如果不在fixed列上，再查找非fixed列
+    for (var i = 0; i < columnRenderInfos.length; i++) {
+        var info = columnRenderInfos[i];
+        if (!info.fixed) {
+            var width = info.width;
+            var drawX = info.x - scrollLeft;
+            if (x >= drawX && x < drawX + width) {
+                return { row: rowIndex, col: i };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * 提取单元格文本（处理 render 函数）
+ */
+var extractCellText = function (params) {
+    var cellValue = params.cellValue, record = params.record, rowIndex = params.rowIndex, renderFn = params.renderFn;
+    if (renderFn) {
+        var rendered = renderFn(cellValue, record, rowIndex);
+        // 如果 render 返回的是字符串或数字，直接使用
+        if (typeof rendered === "string" || typeof rendered === "number") {
+            return String(rendered);
+        }
+        // 如果是 React 元素或其他对象，使用原始值
+        return String(cellValue !== null && cellValue !== void 0 ? cellValue : "");
+    }
+    return String(cellValue !== null && cellValue !== void 0 ? cellValue : "");
+};
+
+export { extractCellText, getCellFromMousePosition };

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

@@ -0,0 +1,67 @@
+import { __assign } from '../../_virtual/_tslib.js';
+
+/**
+ * 列相关的辅助函数
+ */
+/**
+ * 递归查找列（支持多级表头）
+ */
+var findColumnByKey = function (columns, key) {
+    for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+        var col = columns_1[_i];
+        if (col.key === key) {
+            return col;
+        }
+        if (col.children && col.children.length > 0) {
+            var found = findColumnByKey(col.children, key);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+};
+/**
+ * 递归处理列的render函数（转换为统一的调用格式）
+ */
+var processColumnRender = function (column, renderMode) {
+    if (renderMode === void 0) { renderMode = "object"; }
+    var processedColumn = __assign({}, column);
+    // 处理当前列的render函数
+    if (column.render) {
+        var render_1 = column.render;
+        processedColumn.render = function (text, record, index) {
+            if (renderMode === "object") {
+                return render_1({ value: text, record: record, index: index });
+            }
+            return render_1 === null || render_1 === void 0 ? void 0 : render_1(text, record, index);
+        };
+    }
+    // 递归处理children
+    if (column.children && Array.isArray(column.children)) {
+        processedColumn.children = column.children.map(function (child) {
+            return processColumnRender(child, renderMode);
+        });
+    }
+    return processedColumn;
+};
+/**
+ * 获取所有叶子列（支持多级表头）
+ */
+var getAllLeafColumns = function (columns) {
+    var leafColumns = [];
+    var walk = function (nodes) {
+        nodes.forEach(function (node) {
+            if (Array.isArray(node.children) && node.children.length > 0) {
+                walk(node.children);
+            }
+            else {
+                leafColumns.push(node);
+            }
+        });
+    };
+    walk(columns);
+    return leafColumns;
+};
+
+export { findColumnByKey, getAllLeafColumns, processColumnRender };

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

@@ -0,0 +1,42 @@
+/**
+ * Canvas 表格常量配置
+ */
+// 滚动条配置
+var SCROLLBAR_SIZE = 12; // 滚动条宽度
+var SCROLLBAR_PADDING = 2; // 滚动条内边距
+// 最小滚动条尺寸
+var MIN_SCROLLBAR_SIZE = 30;
+var DEFAULT_COLUMN_WIDTH = 120;
+var DEFAULT_SELECTION_COLUMN_WIDTH = 60;
+// 样式常量
+var COLORS = {
+    // 背景色
+    white: "#ffffff",
+    headerBg: "rgb(239, 245, 254)",
+    stripedBg: "#fafafa",
+    selectedBg: "#e6f7ff",
+    hoverBg: "rgb(239, 245, 254)",
+    selectionBg: "rgba(24, 144, 255, 0.1)",
+    // 文本色
+    text: "rgba(0, 0, 0, 0.85)",
+    emptyText: "rgba(0, 0, 0, 0.25)",
+    // 边框色
+    border: "rgb(222, 233, 246)",
+    // 主题色
+    primary: "#1890ff",
+    // 滚动条
+    scrollbarTrack: "#f0f0f0",
+    scrollbarThumb: "#bfbfbf",
+    scrollbarThumbActive: "#999",
+    // checkbox
+    checkboxBorder: "#d9d9d9",
+    checkboxDisabled: "#d9d9d9",
+};
+// 字体配置
+var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
+var FONT_SIZE = 14;
+// 图标尺寸
+var CHECKBOX_SIZE = 16;
+var SORT_ICON_SIZE = 6;
+
+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 };