zmdms-webui 2.3.0 → 2.3.2

package/dist/es/canvastable/components/FilterPopover.js

@@ -0,0 +1,274 @@
+import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { Select, Tabs, Space, Input, Button, Checkbox } from 'antd';
+
+var Option = Select.Option;
+var FilterPopover = function (_a) {
+    var visible = _a.visible; _a.columnKey; _a.columnTitle; var _b = _a.dataType, dataType = _b === void 0 ? "text" : _b, precision = _a.precision, thousand = _a.thousand, position = _a.position, filterOptions = _a.filterOptions, selectedValues = _a.selectedValues, onConfirm = _a.onConfirm, onReset = _a.onReset, onClose = _a.onClose, popoverRef = _a.popoverRef;
+    // 临时选中值（点击确认才生效）
+    var _c = useState([]), tempSelectedValues = _c[0], setTempSelectedValues = _c[1];
+    // 搜索关键词
+    var _d = useState(""), searchText = _d[0], setSearchText = _d[1];
+    // 数值筛选状态
+    var _e = useState("="), numberOperator = _e[0], setNumberOperator = _e[1];
+    var _f = useState(""), numberValue = _f[0], setNumberValue = _f[1];
+    // 区间筛选状态
+    var _g = useState(""), minValue = _g[0], setMinValue = _g[1];
+    var _h = useState(""), maxValue = _h[0], setMaxValue = _h[1];
+    var _j = useState(">="), minOperator = _j[0], setMinOperator = _j[1];
+    var _k = useState("<="), maxOperator = _k[0], setMaxOperator = _k[1];
+    // Tabs 激活的标签
+    var _l = useState("single"), activeTab = _l[0], setActiveTab = _l[1];
+    // 判断是否为数值筛选
+    var isNumberFilterValue = function (value) {
+        return (value &&
+            typeof value === "object" &&
+            "operator" in value &&
+            "value" in value);
+    };
+    // 当弹窗打开时，同步外部选中值到临时状态
+    useEffect(function () {
+        var _a;
+        if (visible) {
+            // 检查是否为模糊查询
+            if (selectedValues.length > 0 && ((_a = selectedValues[0]) === null || _a === void 0 ? void 0 : _a.__fuzzy__) === true) {
+                // 恢复之前的搜索文本
+                setSearchText(selectedValues[0].text || "");
+                setTempSelectedValues([]);
+                // 清空数值筛选状态
+                setNumberValue("");
+                setNumberOperator("=");
+                setMinValue("");
+                setMaxValue("");
+                setMinOperator(">=");
+                setMaxOperator("<=");
+                setActiveTab("single");
+            }
+            else if (selectedValues.length > 0 &&
+                isNumberFilterValue(selectedValues[0])) {
+                // 恢复数值筛选条件
+                if (selectedValues.length === 1) {
+                    // 单值筛选
+                    var filter = selectedValues[0];
+                    setNumberValue(String(filter.value));
+                    setNumberOperator(filter.operator);
+                    setMinValue("");
+                    setMaxValue("");
+                    setActiveTab("single");
+                }
+                else if (selectedValues.length === 2) {
+                    // 区间筛选
+                    var filter1 = selectedValues[0];
+                    var filter2 = selectedValues[1];
+                    // 判断哪个是最小值，哪个是最大值
+                    if (filter1.operator === ">=" || filter1.operator === ">") {
+                        setMinValue(String(filter1.value));
+                        setMinOperator(filter1.operator);
+                    }
+                    else {
+                        setMaxValue(String(filter1.value));
+                        setMaxOperator(filter1.operator);
+                    }
+                    if (filter2.operator === ">=" || filter2.operator === ">") {
+                        setMinValue(String(filter2.value));
+                        setMinOperator(filter2.operator);
+                    }
+                    else {
+                        setMaxValue(String(filter2.value));
+                        setMaxOperator(filter2.operator);
+                    }
+                    setNumberValue("");
+                    setNumberOperator("=");
+                    setActiveTab("range");
+                }
+                setTempSelectedValues([]);
+                setSearchText("");
+            }
+            else {
+                // 精确匹配的筛选
+                setTempSelectedValues(selectedValues);
+                setSearchText("");
+                setNumberValue("");
+                setNumberOperator("=");
+                setMinValue("");
+                setMaxValue("");
+                setMinOperator(">=");
+                setMaxOperator("<=");
+                setActiveTab("single");
+            }
+        }
+    }, [visible, selectedValues]);
+    // 根据搜索关键词过滤选项
+    var filteredOptions = useMemo(function () {
+        if (!searchText)
+            return filterOptions;
+        var lowerSearchText = searchText.toLowerCase();
+        return filterOptions.filter(function (option) {
+            return String(option.text).toLowerCase().includes(lowerSearchText);
+        });
+    }, [filterOptions, searchText]);
+    // 全选/取消全选
+    var isAllSelected = filteredOptions.length > 0 &&
+        filteredOptions.every(function (option) {
+            return tempSelectedValues.includes(option.value);
+        });
+    var isIndeterminate = tempSelectedValues.length > 0 &&
+        filteredOptions.some(function (option) {
+            return tempSelectedValues.includes(option.value);
+        }) &&
+        !isAllSelected;
+    var handleSelectAll = function () {
+        if (isAllSelected) {
+            // 取消全选：移除当前筛选结果中的所有值
+            var filteredValues_1 = filteredOptions.map(function (o) { return o.value; });
+            setTempSelectedValues(tempSelectedValues.filter(function (v) { return !filteredValues_1.includes(v); }));
+        }
+        else {
+            // 全选：添加当前筛选结果中的所有值
+            var newValues_1 = __spreadArray([], tempSelectedValues, true);
+            filteredOptions.forEach(function (option) {
+                if (!newValues_1.includes(option.value)) {
+                    newValues_1.push(option.value);
+                }
+            });
+            setTempSelectedValues(newValues_1);
+        }
+    };
+    var handleCheckboxChange = function (value) {
+        var isSelected = tempSelectedValues.includes(value);
+        if (isSelected) {
+            setTempSelectedValues(tempSelectedValues.filter(function (v) { return v !== value; }));
+        }
+        else {
+            setTempSelectedValues(__spreadArray(__spreadArray([], tempSelectedValues, true), [value], false));
+        }
+    };
+    // 处理数值筛选
+    var handleNumberFilter = function () {
+        var filters = [];
+        // 区间筛选：如果有最小值或最大值
+        if (minValue || maxValue) {
+            if (minValue) {
+                var min = parseFloat(minValue);
+                if (!isNaN(min)) {
+                    filters.push({
+                        operator: minOperator,
+                        value: min,
+                    });
+                }
+            }
+            if (maxValue) {
+                var max = parseFloat(maxValue);
+                if (!isNaN(max)) {
+                    filters.push({
+                        operator: maxOperator,
+                        value: max,
+                    });
+                }
+            }
+        }
+        else if (numberValue) {
+            // 单值筛选
+            var num = parseFloat(numberValue);
+            if (!isNaN(num)) {
+                filters.push({
+                    operator: numberOperator,
+                    value: num,
+                });
+            }
+        }
+        if (filters.length === 0)
+            return;
+        onConfirm(filters);
+        onClose();
+    };
+    var handleConfirm = function () {
+        // 如果有搜索文本，使用搜索文本进行模糊查询
+        if (searchText.trim()) {
+            // 使用特殊标记来表示这是模糊查询
+            onConfirm([{ __fuzzy__: true, text: searchText.trim() }]);
+        }
+        else {
+            // 否则使用选中的值
+            onConfirm(tempSelectedValues);
+        }
+        onClose();
+    };
+    var handleResetAndClose = function () {
+        onReset();
+        onClose();
+    };
+    if (!visible)
+        return null;
+    // 数值类型的筛选界面（根据 precision 或 thousand 判断）
+    var isNumberType = precision !== undefined || thousand === true || dataType === "number";
+    if (isNumberType) {
+        return (jsxs("div", __assign({ ref: popoverRef, className: "canvas-table-filter-popover", style: {
+                position: "absolute",
+                left: position.x,
+                top: position.y,
+                zIndex: 1000,
+                background: "#fff",
+                boxShadow: "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)",
+                borderRadius: "2px",
+                padding: "12px",
+                minWidth: "240px",
+            } }, { children: [jsx(Tabs, { activeKey: activeTab, onChange: setActiveTab, size: "small", items: [
+                        {
+                            key: "single",
+                            label: "单值",
+                            children: (jsx("div", { children: jsxs(Space.Compact, __assign({ style: { width: "100%", marginBottom: "12px" } }, { children: [jsxs(Select, __assign({ value: numberOperator, onChange: setNumberOperator, style: { width: "80px" } }, { children: [jsx(Option, __assign({ value: "=" }, { children: "=" })), jsx(Option, __assign({ value: "!=" }, { children: "!=" })), jsx(Option, __assign({ value: ">" }, { children: ">" })), jsx(Option, __assign({ value: "<" }, { children: "<" })), jsx(Option, __assign({ value: ">=" }, { children: ">=" })), jsx(Option, __assign({ value: "<=" }, { children: "<=" }))] })), jsx(Input, { type: "number", placeholder: "\u8F93\u5165\u6570\u503C", value: numberValue, onChange: function (e) { return setNumberValue(e.target.value); }, onPressEnter: handleNumberFilter, style: { flex: 1 } })] })) })),
+                        },
+                        {
+                            key: "range",
+                            label: "区间",
+                            children: (jsxs("div", { children: [jsxs("div", __assign({ style: { marginBottom: "8px" } }, { children: [jsx("div", __assign({ style: {
+                                                    fontSize: "12px",
+                                                    color: "#666",
+                                                    marginBottom: "4px",
+                                                } }, { children: "\u6700\u5C0F\u503C\uFF1A" })), jsxs(Space.Compact, __assign({ style: { width: "100%" } }, { children: [jsxs(Select, __assign({ value: minOperator, onChange: setMinOperator, style: { width: "70px" } }, { children: [jsx(Option, __assign({ value: ">=" }, { children: ">=" })), jsx(Option, __assign({ value: ">" }, { children: ">" }))] })), jsx(Input, { type: "number", placeholder: "\u6700\u5C0F\u503C", value: minValue, onChange: function (e) { return setMinValue(e.target.value); }, onPressEnter: handleNumberFilter, style: { flex: 1 } })] }))] })), jsxs("div", __assign({ style: { marginBottom: "12px" } }, { children: [jsx("div", __assign({ style: {
+                                                    fontSize: "12px",
+                                                    color: "#666",
+                                                    marginBottom: "4px",
+                                                } }, { children: "\u6700\u5927\u503C\uFF1A" })), jsxs(Space.Compact, __assign({ style: { width: "100%" } }, { children: [jsxs(Select, __assign({ value: maxOperator, onChange: setMaxOperator, style: { width: "70px" } }, { children: [jsx(Option, __assign({ value: "<=" }, { children: "<=" })), jsx(Option, __assign({ value: "<" }, { children: "<" }))] })), jsx(Input, { type: "number", placeholder: "\u6700\u5927\u503C", value: maxValue, onChange: function (e) { return setMaxValue(e.target.value); }, onPressEnter: handleNumberFilter, style: { flex: 1 } })] }))] })), jsx("div", __assign({ style: { fontSize: "12px", color: "#1890ff" } }, { children: "\u793A\u4F8B\uFF1A\u8BBE\u7F6E >=10 \u548C <=20 \u8868\u793A 10-20 \u4E4B\u95F4" }))] })),
+                        },
+                    ] }), jsx("div", __assign({ style: {
+                        borderTop: "1px solid #f0f0f0",
+                        paddingTop: "12px",
+                        marginTop: "12px",
+                    } }, { children: jsxs(Space, { children: [jsx(Button, __assign({ size: "small", type: "primary", onClick: handleNumberFilter, disabled: !numberValue && !minValue && !maxValue }, { children: "\u786E\u5B9A" })), jsx(Button, __assign({ size: "small", onClick: handleResetAndClose }, { children: "\u91CD\u7F6E" }))] }) }))] })));
+    }
+    // 文本类型的筛选界面
+    return (jsxs("div", __assign({ ref: popoverRef, className: "canvas-table-filter-popover", style: {
+            position: "absolute",
+            left: position.x,
+            top: position.y,
+            zIndex: 1000,
+            background: "#fff",
+            boxShadow: "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)",
+            borderRadius: "2px",
+            padding: "8px",
+            minWidth: "200px",
+            maxWidth: "300px",
+        } }, { children: [jsxs("div", __assign({ style: { padding: "4px 8px", marginBottom: "8px" } }, { children: [jsx(Input, { placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\u6A21\u7CCA\u67E5\u8BE2", value: searchText, onChange: function (e) { return setSearchText(e.target.value); }, allowClear: true, size: "small", onPressEnter: handleConfirm }), searchText && (jsxs("div", __assign({ style: {
+                            fontSize: "12px",
+                            color: "#1890ff",
+                            marginTop: "4px",
+                            padding: "0 4px",
+                        } }, { children: ["\u6309\u56DE\u8F66\u6216\u70B9\u51FB\u786E\u5B9A\u4EE5\u6A21\u7CCA\u67E5\u8BE2\"", searchText, "\""] })))] })), jsx("div", __assign({ style: {
+                    padding: "5px 12px",
+                    borderBottom: "1px solid #f0f0f0",
+                    marginBottom: "4px",
+                } }, { children: jsx(Checkbox, __assign({ indeterminate: isIndeterminate, checked: isAllSelected, onChange: handleSelectAll }, { children: "\u5168\u9009" })) })), jsx("div", __assign({ style: { maxHeight: "300px", overflowY: "auto" } }, { children: filteredOptions.length > 0 ? (filteredOptions.map(function (filter) { return (jsx("div", __assign({ style: { padding: "5px 12px", cursor: "pointer" }, onClick: function () { return handleCheckboxChange(filter.value); } }, { children: jsx(Checkbox, __assign({ checked: tempSelectedValues.includes(filter.value) }, { children: filter.text })) }), filter.value)); })) : (jsx("div", __assign({ style: {
+                        padding: "20px",
+                        textAlign: "center",
+                        color: "#999",
+                    } }, { children: "\u6682\u65E0\u5339\u914D\u9879" }))) })), jsx("div", __assign({ style: {
+                    borderTop: "1px solid #f0f0f0",
+                    marginTop: "8px",
+                    paddingTop: "8px",
+                } }, { children: jsxs(Space, { children: [jsx(Button, __assign({ size: "small", type: "primary", onClick: handleConfirm }, { children: "\u786E\u5B9A" })), jsx(Button, __assign({ size: "small", onClick: handleResetAndClose }, { children: "\u91CD\u7F6E" }))] }) }))] })));
+};
+
+export { FilterPopover as default };

package/dist/es/canvastable/components/HeaderOverlay.js

@@ -0,0 +1,22 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var HeaderOverlay = function (_a) {
+    var overlays = _a.overlays;
+    return (jsx(Fragment, { children: overlays.map(function (overlay) { return (jsx("div", __assign({ className: "canvas-table-header-overlay", style: {
+                position: "absolute",
+                left: overlay.x,
+                top: overlay.y,
+                width: overlay.width,
+                height: overlay.height,
+                pointerEvents: "none",
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: "16px",
+                paddingRight: "16px",
+                boxSizing: "border-box",
+                overflow: "hidden",
+            } }, { children: jsx("div", __assign({ style: { pointerEvents: "auto" } }, { children: overlay.content })) }), overlay.columnKey)); }) }));
+};
+
+export { HeaderOverlay as default };

package/dist/es/canvastable/components/Tooltip.js

@@ -0,0 +1,27 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+
+var Tooltip = function (_a) {
+    var visible = _a.visible, content = _a.content, position = _a.position;
+    if (!visible) {
+        return null;
+    }
+    return (jsx("div", __assign({ className: "canvas-table-tooltip", style: {
+            position: "fixed",
+            left: position.x,
+            top: position.y,
+            zIndex: 1001,
+            background: "rgba(0, 0, 0, 0.85)",
+            color: "#fff",
+            padding: "8px 12px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            maxWidth: "300px",
+            wordBreak: "break-all",
+            whiteSpace: "pre-wrap",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+            pointerEvents: "none",
+        } }, { children: content })));
+};
+
+export { Tooltip as default };

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

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+/**
+ * 点击外部关闭弹窗 Hook
+ */
+/**
+ * Hook: 点击外部区域时关闭弹窗
+ */
+var useClickOutside = function (params) {
+    var ref = params.ref, isVisible = params.isVisible, onClose = params.onClose, _a = params.delay, delay = _a === void 0 ? 0 : _a;
+    useEffect(function () {
+        if (!isVisible)
+            return;
+        var handleClickOutside = function (e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        // 延迟注册监听器，避免捕获到打开弹窗的点击事件
+        var timer = setTimeout(function () {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, delay);
+        return function () {
+            clearTimeout(timer);
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isVisible, onClose, ref, delay]);
+};
+
+export { useClickOutside };

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

@@ -0,0 +1,130 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { useState, useRef, useCallback } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+/**
+ * 列宽调整 Hook
+ * 支持拖拽调整列宽
+ */
+var RESIZE_HANDLE_WIDTH = 8; // 调整手柄的宽度
+var useColumnResize = function (params) {
+    var columnRenderInfos = params.columnRenderInfos, headerHeight = params.headerHeight, scrollLeft = params.scrollLeft, onColumnResize = params.onColumnResize;
+    var _a = useState({
+        isResizing: false,
+        resizingColumnIndex: null,
+        startX: 0,
+        startWidth: 0,
+        hoverResizeColumnIndex: null,
+    }), resizeState = _a[0], setResizeState = _a[1];
+    // 临时列宽（拖拽过程中）
+    var tempColumnWidthRef = useRef(new Map());
+    /**
+     * 检测鼠标是否在列调整手柄上
+     */
+    var checkResizeHandle = useMemoizedFn(function (x, y) {
+        // 只在表头区域检测
+        if (y >= headerHeight)
+            return null;
+        for (var i = 0; i < columnRenderInfos.length; i++) {
+            var info = columnRenderInfos[i];
+            var column = info.column, fixed = info.fixed, fixedLeft = info.fixedLeft, width = info.width;
+            // 跳过选择框列
+            if (column.key === "__selection__")
+                continue;
+            var drawX = fixed ? fixedLeft : info.x - scrollLeft;
+            var rightEdge = drawX + width;
+            // 检测是否在列的右边缘附近
+            if (x >= rightEdge - RESIZE_HANDLE_WIDTH / 2 &&
+                x <= rightEdge + RESIZE_HANDLE_WIDTH / 2) {
+                return i;
+            }
+        }
+        return null;
+    });
+    /**
+     * 开始调整列宽
+     */
+    var startResize = useMemoizedFn(function (columnIndex, x) {
+        var info = columnRenderInfos[columnIndex];
+        if (!info)
+            return;
+        setResizeState({
+            isResizing: true,
+            resizingColumnIndex: columnIndex,
+            startX: x,
+            startWidth: info.width,
+            hoverResizeColumnIndex: null,
+        });
+    });
+    /**
+     * 更新列宽（拖拽中）
+     */
+    var updateResize = useMemoizedFn(function (x) {
+        if (!resizeState.isResizing || resizeState.resizingColumnIndex === null) {
+            return;
+        }
+        var deltaX = x - resizeState.startX;
+        var newWidth = Math.max(50, resizeState.startWidth + deltaX); // 最小宽度50
+        tempColumnWidthRef.current.set(resizeState.resizingColumnIndex, newWidth);
+        // 触发重新渲染
+        setResizeState(function (prev) { return (__assign({}, prev)); });
+    });
+    /**
+     * 结束调整列宽
+     */
+    var endResize = useMemoizedFn(function () {
+        if (!resizeState.isResizing || resizeState.resizingColumnIndex === null) {
+            return;
+        }
+        var columnIndex = resizeState.resizingColumnIndex;
+        var newWidth = tempColumnWidthRef.current.get(columnIndex);
+        if (newWidth && onColumnResize) {
+            var info = columnRenderInfos[columnIndex];
+            onColumnResize(info.column.key, newWidth);
+        }
+        tempColumnWidthRef.current.clear();
+        setResizeState({
+            isResizing: false,
+            resizingColumnIndex: null,
+            startX: 0,
+            startWidth: 0,
+            hoverResizeColumnIndex: null,
+        });
+    });
+    /**
+     * 设置 hover 状态
+     */
+    var setHoverResizeColumn = useMemoizedFn(function (columnIndex) {
+        if (resizeState.isResizing)
+            return; // 拖拽时不更新 hover 状态
+        setResizeState(function (prev) {
+            if (prev.hoverResizeColumnIndex !== columnIndex) {
+                return __assign(__assign({}, prev), { hoverResizeColumnIndex: columnIndex });
+            }
+            return prev;
+        });
+    });
+    /**
+     * 获取列的实际宽度（考虑拖拽中的临时宽度）
+     */
+    var getColumnWidth = useCallback(function (columnIndex) {
+        var _a;
+        var tempWidth = tempColumnWidthRef.current.get(columnIndex);
+        if (tempWidth !== undefined) {
+            return tempWidth;
+        }
+        return ((_a = columnRenderInfos[columnIndex]) === null || _a === void 0 ? void 0 : _a.width) || 0;
+    }, [columnRenderInfos]);
+    return {
+        resizeState: resizeState,
+        checkResizeHandle: checkResizeHandle,
+        startResize: startResize,
+        updateResize: updateResize,
+        endResize: endResize,
+        setHoverResizeColumn: setHoverResizeColumn,
+        getColumnWidth: getColumnWidth,
+        RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH,
+    };
+};
+
+export { useColumnResize };

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

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * 容器尺寸监听 Hook
+ */
+var useContainerSize = function (params) {
+    var containerRef = params.containerRef, width = params.width, height = params.height;
+    var _a = useState({
+        width: width || 800,
+        height: height,
+    }), containerSize = _a[0], setContainerSize = _a[1];
+    useEffect(function () {
+        var container = containerRef.current;
+        if (!container)
+            return;
+        var updateSize = function () {
+            var newWidth = width || container.clientWidth || 800;
+            setContainerSize({
+                width: newWidth,
+                height: height,
+            });
+        };
+        // 初始化尺寸
+        updateSize();
+        // 使用 ResizeObserver 监听容器尺寸变化
+        var resizeObserver = new ResizeObserver(function () {
+            updateSize();
+        });
+        resizeObserver.observe(container);
+        // 监听窗口大小变化（兜底）
+        window.addEventListener("resize", updateSize);
+        return function () {
+            resizeObserver.disconnect();
+            window.removeEventListener("resize", updateSize);
+        };
+    }, [width, height, containerRef]);
+    return containerSize;
+};
+
+export { useContainerSize };