jch-config-editor 0.1.19 → 0.1.21

package/dist/components/ConfigEditor/index.js

@@ -1,146 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useCallback } from "react";
-import { Layout, Button, Space, Tooltip, Modal, message, ConfigProvider, } from "antd";
-import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
-import zhCN from "antd/locale/zh_CN";
-import { MaterialPanel } from "../MaterialPanel";
-import { Canvas } from "../Canvas";
-import { PropertyPanel } from "../PropertyPanel";
-import { useEditorStore } from "../../store/editorStore";
-import { initMaterials } from "../../utils/initData";
-const { Header, Sider, Content } = Layout;
-export const ConfigEditor = ({ initialScheme, onChange, readonly = false, headerExtra, className = "", style, showHeader = true, showMaterialPanel = true, showPropertyPanel = true, customMaterials, }) => {
-    const [importModalVisible, setImportModalVisible] = React.useState(false);
-    const [jsonInput, setJsonInput] = React.useState("");
-    const [defaultTestData, setDefaultTestData] = React.useState([
-        {
-            paramsCode: "001",
-            paramsName: "通频速度有效值",
-            value: 25,
-            paramsUnit: "mm/s",
-        },
-        {
-            paramsCode: "002",
-            paramsName: "通频加速度有效值",
-            value: 1.5,
-            paramsUnit: "m/s²",
-        },
-    ]);
-    const { exportScheme, importScheme, nodes, materials, addMaterial } = useEditorStore();
-    const internalRef = React.useRef(null);
-    const initializedRef = React.useRef(false);
-    // useEffect(() => {
-    //   if (internalRef.current) {
-    //     clearInterval(internalRef.current);
-    //   }
-    //   internalRef.current = setInterval(() => {
-    //     setDefaultTestData([
-    //       {
-    //         paramsCode: "001",
-    //         paramsName: "通频速度有效值",
-    //         value: 25 + Math.random() * 5 * (Math.random() > 0.5 ? 1 : -1),
-    //         paramsUnit: "mm/s",
-    //       },
-    //       {
-    //         paramsCode: "002",
-    //         paramsName: "通频加速度有效值",
-    //         value: 1.5 + Math.random() * 0.5 * (Math.random() > 0.5 ? 1 : -1),
-    //         paramsUnit: "m/s²",
-    //       },
-    //     ]);
-    //   }, 1000);
-    //   return () => {
-    //     if (internalRef.current) {
-    //       clearInterval(internalRef.current);
-    //     }
-    //   };
-    // }, []);
-    // 初始化
-    useEffect(() => {
-        // 防止 React 18 严格模式下重复执行
-        if (initializedRef.current)
-            return;
-        initializedRef.current = true;
-        // 加载默认物料
-        if (materials.length === 0) {
-            initMaterials.forEach((m) => addMaterial(m));
-        }
-        // 加载自定义物料
-        if (customMaterials && customMaterials.length > 0) {
-            customMaterials.forEach((m) => addMaterial(m));
-        }
-        // 加载初始 scheme
-        if (initialScheme) {
-            importScheme(initialScheme);
-        }
-    }, []);
-    // 监听变化并回调
-    useEffect(() => {
-        if (onChange) {
-            const scheme = exportScheme();
-            onChange(scheme);
-        }
-    }, [nodes, onChange]);
-    // 导出 JSON
-    const handleExport = useCallback(() => {
-        const scheme = exportScheme();
-        const dataStr = JSON.stringify(scheme, null, 2);
-        const dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
-        const exportFileDefaultName = `scheme_${Date.now()}.json`;
-        const linkElement = document.createElement("a");
-        linkElement.setAttribute("href", dataUri);
-        linkElement.setAttribute("download", exportFileDefaultName);
-        linkElement.click();
-        message.success("导出成功！");
-    }, [exportScheme]);
-    // 导入 JSON
-    const handleImport = useCallback(() => {
-        try {
-            const scheme = JSON.parse(jsonInput);
-            importScheme(scheme);
-            setImportModalVisible(false);
-            setJsonInput("");
-            message.success("导入成功！");
-        }
-        catch (error) {
-            message.error("JSON 格式错误，请检查输入");
-        }
-    }, [jsonInput, importScheme]);
-    // 处理文件导入
-    const handleFileImport = useCallback((file) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            try {
-                const content = e.target?.result;
-                const scheme = JSON.parse(content);
-                importScheme(scheme);
-                message.success("导入成功！");
-            }
-            catch (error) {
-                message.error("文件格式错误");
-            }
-        };
-        reader.readAsText(file);
-        return false;
-    }, [importScheme]);
-    // 导出 scheme 方法（供外部 ref 调用）
-    const getScheme = useCallback(() => {
-        return exportScheme();
-    }, [exportScheme]);
-    // 暴露给父组件
-    React.useImperativeHandle(React.useRef?.(), () => ({
-        getScheme,
-        exportScheme,
-        importScheme,
-    }), [getScheme, exportScheme, importScheme]);
-    console.log("defaultTestData", defaultTestData);
-    return (_jsx(ConfigProvider, { locale: zhCN, children: _jsxs(Layout, { className: `h-full w-full overflow-hidden ${className}`, style: style, children: [showHeader && (_jsxs(Header, { className: "bg-white border-b border-gray-200 px-4 flex items-center justify-between flex-shrink-0", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: "\u7EC4\u6001\u7F16\u8F91\u5668" }), _jsxs("div", { className: "text-sm text-gray-500", children: [nodes.length, " \u4E2A\u8282\u70B9"] })] }), _jsxs(Space, { children: [headerExtra, !readonly && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u5BFC\u51FA JSON", children: _jsx(Button, { icon: _jsx(DownloadOutlined, {}), onClick: handleExport, children: "\u5BFC\u51FA" }) }), _jsx(Tooltip, { title: "\u5BFC\u5165 JSON", children: _jsx(Button, { icon: _jsx(UploadOutlined, {}), onClick: () => setImportModalVisible(true), children: "\u5BFC\u5165" }) })] }))] })] })), _jsxs(Layout, { children: [showMaterialPanel && !readonly && (_jsx(Sider, { width: 280, className: "bg-white", theme: "light", children: _jsx(MaterialPanel, {}) })), _jsx(Content, { className: "bg-gray-100 relative", children: _jsx(Canvas, { defaultTestData: defaultTestData }) }), showPropertyPanel && !readonly && (_jsx(Sider, { width: 360, className: "bg-white", theme: "light", children: _jsx(PropertyPanel, { defaultTestData: defaultTestData }) }))] }), _jsx(Modal, { title: "\u5BFC\u5165\u7EC4\u6001\u65B9\u6848", open: importModalVisible, onOk: handleImport, onCancel: () => {
-                        setImportModalVisible(false);
-                        setJsonInput("");
-                    }, width: 600, children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2", children: "\u9009\u62E9 JSON \u6587\u4EF6\u5BFC\u5165\uFF1A" }), _jsx("input", { type: "file", accept: ".json", onChange: (e) => {
-                                            const file = e.target.files?.[0];
-                                            if (file)
-                                                handleFileImport(file);
-                                        }, className: "block w-full text-sm text-gray-500\n                  file:mr-4 file:py-2 file:px-4\n                  file:rounded-full file:border-0\n                  file:text-sm file:font-semibold\n                  file:bg-blue-50 file:text-blue-700\n                  hover:file:bg-blue-100" })] }), _jsx("div", { className: "text-center text-gray-400", children: "\u6216" }), _jsxs("div", { children: [_jsx("p", { className: "mb-2", children: "\u7C98\u8D34 JSON \u5185\u5BB9\uFF1A" }), _jsx("textarea", { value: jsonInput, onChange: (e) => setJsonInput(e.target.value), placeholder: "\u7C98\u8D34 JSON \u5185\u5BB9...", className: "w-full h-48 p-3 border border-gray-300 rounded-lg font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500" })] })] }) })] }) }));
-};
-export default ConfigEditor;

package/dist/components/MaterialPanel/index.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { Collapse, Upload, Button, List, Empty, Typography, Image, Tag } from "antd";
-import { UploadOutlined, DeleteOutlined, EditOutlined } from "@ant-design/icons";
-import { useEditorStore } from "../../store/editorStore";
-const { Panel } = Collapse;
-const { Text } = Typography;
-export const MaterialPanel = () => {
-    const { materials, addMaterial, removeMaterial, selectedStatusId, selectStatus, mode, lineDrawing, startLineDrawing, cancelLineDrawing, } = useEditorStore();
-    const [activeKeys, setActiveKeys] = useState([
-        "basic",
-        "device",
-        "text",
-        "line",
-    ]);
-    // 初始化默认物料
-    // useEffect(() => {
-    //   if (materials.length === 0) {
-    //     initMaterials.forEach((m) => addMaterial(m));
-    //   }
-    // }, []);
-    // 处理 SVG 上传
-    const handleUpload = (file) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            const src = e.target?.result;
-            addMaterial({
-                name: file.name.replace(".svg", ""),
-                type: "IMAGE",
-                src,
-            });
-        };
-        reader.readAsDataURL(file);
-        return false;
-    };
-    // 按类型分组物料
-    const groupedMaterials = {
-        basic: materials.filter((m) => ["矩形", "圆形", "圆角矩形"].includes(m.name)),
-        device: materials.filter((m) => ["阀门", "泵", "罐体"].includes(m.name) ||
-            (m.type === "IMAGE" &&
-                !["矩形", "圆形", "圆角矩形"].includes(m.name) &&
-                m.name !== "自定义")),
-        text: materials.filter((m) => m.type === "TEXT"),
-        line: materials.filter((m) => m.type === "LINE"),
-        group: materials.filter((m) => m.type === "CUSTOM" && m.config?.nodes),
-        custom: materials.filter((m) => (m.type === "CUSTOM" && !m.config?.nodes) ||
-            (m.type === "IMAGE" &&
-                !["矩形", "圆形", "圆角矩形", "阀门", "泵", "罐体"].includes(m.name))),
-    };
-    // 处理拖拽开始
-    const handleDragStart = (e, material) => {
-        e.dataTransfer.effectAllowed = "copy";
-        e.dataTransfer.setData("application/json", JSON.stringify(material));
-        const dragImage = e.currentTarget.querySelector(".material-preview");
-        if (dragImage) {
-            e.dataTransfer.setDragImage(dragImage, 20, 20);
-        }
-    };
-    // 处理线条物料点击（进入绘制模式）
-    const handleLineMaterialClick = (material) => {
-        if (material.type === "LINE") {
-            startLineDrawing(material);
-        }
-    };
-    // 渲染物料项
-    const renderMaterialItem = (material, isLineMode = false) => {
-        // 物料库中的物料不再被"选中"，而是用于拖拽创建节点或在属性面板中选择绑定到状态
-        const isSelected = false;
-        // 确保 isLineMode 是布尔值
-        const isLineMaterial = isLineMode === true;
-        // 只有当前物料是正在绘制的那条线时才显示"绘制中"
-        const isDrawingLine = mode === "line-draw" && isLineMaterial && lineDrawing.material?.id === material.id;
-        return (_jsx(List.Item, { draggable: !isLineMaterial, onDragStart: (e) => handleDragStart(e, material), onClick: () => isLineMaterial && handleLineMaterialClick(material), className: `
-          rounded-lg transition-all duration-200 select-none
-          ${isLineMaterial ? "cursor-pointer" : "cursor-move"}
-          ${isSelected ? "bg-blue-100 ring-2 ring-blue-400" : "hover:bg-gray-100"}
-          ${isDrawingLine ? "bg-blue-50 ring-2 ring-blue-400" : ""}
-        `, actions: [
-                isLineMaterial ? (_jsx(Button, { type: "text", size: "small", icon: _jsx(EditOutlined, {}), onClick: (e) => {
-                        e.stopPropagation();
-                        handleLineMaterialClick(material);
-                    }, children: "\u7ED8\u5236" }, "draw")) : null,
-                _jsx(Button, { type: "text", size: "small", danger: true, icon: _jsx(DeleteOutlined, {}), onClick: (e) => {
-                        e.stopPropagation();
-                        removeMaterial(material.id);
-                    } }, "delete"),
-            ].filter(Boolean), children: _jsxs("div", { className: `flex items-center gap-3 w-full py-2 ${isLineMaterial ? "" : "pointer-events-none"}`, children: [_jsx("div", { className: "material-preview w-12 h-12 flex items-center justify-center bg-white rounded border border-gray-200", children: material.type === "IMAGE" && material.src ? (_jsx(Image, { src: material.src, alt: material.name, width: 40, height: 40, preview: false })) : material.type === "TEXT" ? (_jsx("span", { className: "text-xs text-gray-500", children: "T" })) : material.type === "LINE" ? (_jsx("div", { className: "w-8 h-0.5 bg-gray-400" })) : material.type === "CUSTOM" && material.config?.nodes ? (_jsx("span", { className: "text-xs text-blue-500 font-bold", children: "G" })) : (_jsx("span", { className: "text-xs text-gray-500", children: "?" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Text, { strong: true, className: "block truncate", children: material.name }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Text, { type: "secondary", className: "text-xs", children: material.type }), isDrawingLine && (_jsx(Tag, { color: "blue", className: "text-xs", children: "\u7ED8\u5236\u4E2D" }))] })] })] }) }, material.id));
-    };
-    return (_jsxs("div", { className: "h-full flex flex-col bg-white border-r border-gray-200", children: [_jsxs("div", { className: "p-4 border-b border-gray-200", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-800", children: "\u7269\u6599\u5E93" }), _jsx(Text, { type: "secondary", className: "text-sm", children: "\u62D6\u62FD\u7269\u6599\u5230\u753B\u5E03\u521B\u5EFA\u8282\u70B9" })] }), _jsx("div", { className: "p-3 border-b border-gray-200", children: _jsx(Upload, { accept: ".svg", beforeUpload: handleUpload, showUploadList: false, children: _jsx(Button, { icon: _jsx(UploadOutlined, {}), block: true, type: "dashed", children: "\u4E0A\u4F20 SVG" }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: _jsxs(Collapse, { activeKey: activeKeys, onChange: (keys) => setActiveKeys(keys), ghost: true, expandIconPosition: "end", children: [_jsx(Panel, { header: "\u57FA\u7840\u5F62\u72B6", children: _jsx(List, { dataSource: groupedMaterials.basic, renderItem: (item) => renderMaterialItem(item, false), locale: {
-                                    emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                } }) }, "basic"), _jsx(Panel, { header: "\u8BBE\u5907\u56FE\u6807", children: _jsx(List, { dataSource: groupedMaterials.device, renderItem: (item) => renderMaterialItem(item, false), locale: {
-                                    emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                } }) }, "device"), _jsx(Panel, { header: "\u6587\u672C", children: _jsx(List, { dataSource: groupedMaterials.text, renderItem: (item) => renderMaterialItem(item, false), locale: {
-                                    emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                } }) }, "text"), _jsxs(Panel, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "\u7EBF\u6761" }), mode === "line-draw" && (_jsx(Tag, { color: "blue", className: "text-xs", children: "\u7ED8\u5236\u6A21\u5F0F" }))] }), children: [_jsx(List, { dataSource: groupedMaterials.line, renderItem: (item) => renderMaterialItem(item, true), locale: {
-                                        emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                    } }), mode === "line-draw" && (_jsxs("div", { className: "mt-2 p-2 bg-blue-50 rounded text-xs text-blue-600", children: [_jsx("div", { children: "\u70B9\u51FB\u7EBF\u6761\u7269\u6599\u5F00\u59CB\u7ED8\u5236" }), _jsx("div", { children: "\u70B9\u51FB\u753B\u5E03\u786E\u5B9A\u8D77\u70B9\u548C\u7EC8\u70B9" })] }))] }, "line"), groupedMaterials.group.length > 0 && (_jsx(Panel, { header: "\u7FA4\u7EC4", children: _jsx(List, { dataSource: groupedMaterials.group, renderItem: (item) => renderMaterialItem(item, false), locale: {
-                                    emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                } }) }, "group")), groupedMaterials.custom.length > 0 && (_jsx(Panel, { header: "\u81EA\u5B9A\u4E49", children: _jsx(List, { dataSource: groupedMaterials.custom, renderItem: (item) => renderMaterialItem(item, false), locale: {
-                                    emptyText: (_jsx(Empty, { description: "\u6682\u65E0\u7269\u6599", image: Empty.PRESENTED_IMAGE_SIMPLE })),
-                                } }) }, "custom"))] }) }), _jsx("div", { className: "p-3 border-t border-gray-200 bg-gray-50", children: _jsx(Text, { type: "secondary", className: "text-xs", children: mode === "line-draw" ? (_jsx(_Fragment, { children: "\uD83D\uDCA1 \u63D0\u793A\uFF1A\u70B9\u51FB\u7ED8\u5236\u7EBF\u6BB5\uFF0C\u53EF\u8FDE\u7EED\u7ED8\u5236\u591A\u6BB5\u7EBF\uFF0C\u53CC\u51FB\u7ED3\u675F\u7ED8\u5236\uFF0CESC \u53D6\u6D88" })) : (_jsx(_Fragment, { children: "\uD83D\uDCA1 \u63D0\u793A\uFF1A\u62D6\u62FD\u7269\u6599\u5230\u753B\u5E03\u521B\u5EFA\u8282\u70B9\uFF0C\u70B9\u51FB\u7EBF\u6761\u7269\u6599\u8FDB\u5165\u7ED8\u5236\u6A21\u5F0F" })) }) })] }));
-};

package/dist/components/NodeRenderer/index.js

@@ -1,375 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { Typography } from "antd";
-const { Text } = Typography;
-// 执行状态表达式
-const evaluateStatusExpression = (status, data) => {
-    try {
-        //生成函数所需要的参数列表
-        const params = data && Array.isArray(data)
-            ? data.map((d, index) => d.paramsName)
-            : ["A"]; //大写英文字符
-        const fn = new Function(...params, status.expression);
-        const result = fn(...data.map((d) => d.value));
-        console.log(`Evaluating status [${status.name}] with data:`, data, "Result:", result);
-        return result === true;
-    }
-    catch (error) {
-        console.warn(`状态表达式执行失败 [${status.name}]:`, error);
-        return false;
-    }
-};
-// 找到第一个满足条件的状态
-const findActiveStatus = (statusList, data) => {
-    for (const status of statusList) {
-        console.log(status, "status");
-        let bindData = [];
-        if (Array.isArray(data)) {
-            console.log(status.bindCodes, "bindCodes");
-            bindData = data.filter((d) => status.bindCodes?.includes(d.paramsCode));
-        }
-        else {
-            bindData = data;
-        }
-        if (evaluateStatusExpression(status, bindData)) {
-            return status;
-        }
-    }
-    return undefined;
-};
-// 从数据中获取字段值
-const getDataValue = (data, valueSourceCode) => {
-    if (!valueSourceCode || !data) {
-        return { value: undefined };
-    }
-    // 数据是数组格式：查找 paramsCode 匹配的项
-    if (Array.isArray(data)) {
-        const dataItem = data.find((d) => d.paramsCode === valueSourceCode);
-        if (dataItem) {
-            return {
-                value: dataItem.value,
-                unit: dataItem.unit,
-            };
-        }
-    }
-    // 数据是对象格式：直接取字段
-    else if (typeof data === "object" && valueSourceCode in data) {
-        return {
-            value: data[valueSourceCode],
-            unit: data.unit,
-        };
-    }
-    return { value: undefined };
-};
-// 格式化数值，根据小数位配置
-const formatValue = (value, decimals) => {
-    if (value === undefined || value === null)
-        return "";
-    // -1 表示不格式化
-    if (decimals === -1)
-        return String(value);
-    // 检查是否为有效数值
-    const num = Number(value);
-    if (isNaN(num))
-        return String(value);
-    // 格式化小数位
-    return num.toFixed(decimals ?? 2);
-};
-// 渲染物料
-const renderMaterial = (material, data, isSelected, node) => {
-    switch (material.type) {
-        case "IMAGE":
-            const imageMaterial = material;
-            return (_jsx("div", { className: "w-full h-full flex items-center justify-center overflow-hidden", children: imageMaterial.src ? (_jsx("img", { src: imageMaterial.src, alt: material.name, style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "contain",
-                    } })) : (_jsx("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u65E0\u56FE\u7247" }) })) }));
-        case "TEXT":
-            const textMaterial = material;
-            const { label, value: configValue, valueSourceCode, unit: configUnit, decimals, labelStyle, valueStyle, customStyle, } = textMaterial.content || {};
-            // 如果有 valueSourceCode，从数据中获取值
-            const { value: dataValue, unit: dataUnit } = valueSourceCode
-                ? getDataValue(data, valueSourceCode)
-                : { value: undefined, unit: undefined };
-            // 优先使用数据中的值，否则使用配置的默认值
-            const rawValue = dataValue !== undefined ? dataValue : configValue;
-            // 格式化数值
-            const displayValue = formatValue(rawValue, decimals);
-            // 优先使用配置的单位，否则使用数据中的单位
-            const displayUnit = configUnit || dataUnit || "";
-            return (_jsxs("div", { className: "w-full h-full flex flex-col justify-center gap-1", style: { ...customStyle }, children: [label && (_jsx(Text, { style: {
-                            fontSize: 14,
-                            fontWeight: "bold",
-                            color: "#262626",
-                            textAlign: "left",
-                            ...labelStyle,
-                        }, children: label })), displayValue !== undefined && displayValue !== null && (_jsxs(Text, { style: {
-                            fontSize: 14,
-                            color: "#1890ff",
-                            textAlign: "left",
-                            ...valueStyle,
-                        }, children: [displayValue, displayUnit ? ` ${displayUnit}` : ""] }))] }));
-        case "LINE":
-            const lineMaterial = material;
-            const { thickness = 2, color = "#d9d9d9", dashed = false, lineType = dashed ? "dashed" : "solid", lineWeight = thickness, 
-            // 起点和终点的相对坐标
-            startX = 0, startY = 0, endX = 100, endY = 0, } = lineMaterial.config || {};
-            // 根据线型计算 dash array
-            const getDashArray = (type) => {
-                const baseWeight = Math.max(lineWeight, 1);
-                switch (type) {
-                    case "solid":
-                        return "";
-                    case "dashed":
-                        return `${baseWeight * 8},${baseWeight * 4}`;
-                    case "center":
-                        return `${baseWeight * 12},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3}`;
-                    case "phantom":
-                        return `${baseWeight * 12},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3}`;
-                    case "dot":
-                        return `${baseWeight},${baseWeight * 3}`;
-                    case "dash-dot":
-                        return `${baseWeight * 8},${baseWeight * 3},${baseWeight},${baseWeight * 3}`;
-                    default:
-                        return "";
-                }
-            };
-            const dashArray = getDashArray(lineType);
-            // 选中时高亮颜色
-            const strokeColor = isSelected ? "#1890ff" : color;
-            // 直接使用保存的相对坐标画线
-            // 这和预览线的逻辑一模一样：从起点画到终点
-            return (_jsx("div", { className: "w-full h-full relative", style: { overflow: "visible" }, children: _jsxs("svg", { className: "absolute top-0 left-0", width: "100%", height: "100%", style: { overflow: "visible", pointerEvents: "none" }, children: [_jsx("line", { x1: startX, y1: startY, x2: endX, y2: endY, stroke: "transparent", strokeWidth: Math.max(lineWeight, 10), strokeLinecap: "round", style: { pointerEvents: "stroke", cursor: "pointer" }, onClick: (e) => {
-                                e.stopPropagation();
-                                // 触发父容器的点击
-                                const parent = e.target.closest('[data-node-id]');
-                                if (parent) {
-                                    parent.click();
-                                }
-                            } }), _jsx("line", { x1: startX, y1: startY, x2: endX, y2: endY, stroke: strokeColor, strokeWidth: lineWeight, strokeDasharray: dashArray, strokeLinecap: "butt", style: { pointerEvents: "none" } })] }) }));
-        case "CUSTOM":
-            const customMaterial = material;
-            if (customMaterial.render) {
-                return customMaterial.render({});
-            }
-            return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u81EA\u5B9A\u4E49\u7EC4\u4EF6" }) }));
-        default:
-            return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u672A\u77E5\u7C7B\u578B" }) }));
-    }
-};
-const NodeRendererComponent = ({ node, isSelected = false, onClick, onMouseDown, data, onUpdateNode, scale: canvasScale = 1, }) => {
-    const { normalStyle, contentInfo, controlInfo } = node;
-    const { statusList } = contentInfo;
-    const { isClickable, isDraggable } = controlInfo;
-    // 线条端点拖拽状态
-    const [draggingPoint, setDraggingPoint] = useState(null);
-    const [dragStartPos, setDragStartPos] = useState({ x: 0, y: 0 });
-    const nodeRef = useRef(null);
-    // 计算当前应该显示的状态（完全由表达式决定）
-    const currentStatus = useMemo(() => {
-        if (statusList.length === 0)
-            return undefined;
-        // 执行状态表达式，找到第一个返回 true 的状态
-        const activeStatus = findActiveStatus(statusList, data);
-        if (activeStatus)
-            return activeStatus;
-        // 如果没有状态满足条件，返回第一个状态作为默认
-        return statusList[0];
-    }, [statusList, data]);
-    // 获取当前状态绑定的物料
-    const currentMaterial = currentStatus?.material;
-    // 判断当前物料是否是线条
-    const isLine = currentMaterial?.type === 'LINE';
-    // 获取线条配置
-    const lineConfig = isLine ? currentMaterial.config : null;
-    // 计算缩放比例
-    const nodeScale = normalStyle.scale ?? 1;
-    const scaledWidth = (normalStyle.width || 100) * nodeScale;
-    const scaledHeight = (normalStyle.height || 100) * nodeScale;
-    // 处理端点拖拽开始
-    const handlePointMouseDown = useCallback((e, point) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setDraggingPoint(point);
-        setDragStartPos({ x: e.clientX, y: e.clientY });
-    }, []);
-    // 处理端点拖拽
-    useEffect(() => {
-        if (!draggingPoint || !isLine || !lineConfig || !onUpdateNode)
-            return;
-        const handleMouseMove = (e) => {
-            // 计算鼠标移动的偏移量（考虑画布缩放）
-            const dx = (e.clientX - dragStartPos.x) / canvasScale;
-            const dy = (e.clientY - dragStartPos.y) / canvasScale;
-            // 获取当前的起止坐标
-            const currentStartX = lineConfig.startX || 0;
-            const currentStartY = lineConfig.startY || 0;
-            const currentEndX = lineConfig.endX || 0;
-            const currentEndY = lineConfig.endY || 0;
-            let newStartX = currentStartX;
-            let newStartY = currentStartY;
-            let newEndX = currentEndX;
-            let newEndY = currentEndY;
-            let newNodeX = normalStyle.x || 0;
-            let newNodeY = normalStyle.y || 0;
-            if (draggingPoint === 'start') {
-                // 拖拽起点
-                newStartX = currentStartX + dx;
-                newStartY = currentStartY + dy;
-                // 如果起点移出了节点左上边界，调整节点位置和坐标
-                if (newStartX < 0) {
-                    newNodeX += newStartX;
-                    newEndX -= newStartX;
-                    newStartX = 0;
-                }
-                if (newStartY < 0) {
-                    newNodeY += newStartY;
-                    newEndY -= newStartY;
-                    newStartY = 0;
-                }
-            }
-            else {
-                // 拖拽终点
-                newEndX = currentEndX + dx;
-                newEndY = currentEndY + dy;
-                // 如果终点移出了节点左上边界，调整节点位置和坐标
-                if (newEndX < 0) {
-                    newNodeX += newEndX;
-                    newStartX -= newEndX;
-                    newEndX = 0;
-                }
-                if (newEndY < 0) {
-                    newNodeY += newEndY;
-                    newStartY -= newEndY;
-                    newEndY = 0;
-                }
-            }
-            // 重新计算节点大小
-            const minNodeSize = Math.max((lineConfig.lineWeight || 2) * 2, 4);
-            const maxX = Math.max(newStartX, newEndX);
-            const maxY = Math.max(newStartY, newEndY);
-            const newWidth = Math.max(maxX, minNodeSize);
-            const newHeight = Math.max(maxY, minNodeSize);
-            // 更新节点
-            onUpdateNode(node.id, {
-                normalStyle: {
-                    ...normalStyle,
-                    x: newNodeX,
-                    y: newNodeY,
-                    width: newWidth,
-                    height: newHeight,
-                },
-                contentInfo: {
-                    ...contentInfo,
-                    statusList: statusList.map(s => ({
-                        ...s,
-                        material: s.material.type === 'LINE' ? {
-                            ...s.material,
-                            config: {
-                                ...lineConfig,
-                                startX: newStartX,
-                                startY: newStartY,
-                                endX: newEndX,
-                                endY: newEndY,
-                            },
-                        } : s.material,
-                    })),
-                },
-            });
-            // 更新拖拽起始位置
-            setDragStartPos({ x: e.clientX, y: e.clientY });
-        };
-        const handleMouseUp = () => {
-            setDraggingPoint(null);
-        };
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [draggingPoint, dragStartPos, isLine, lineConfig, node.id, normalStyle, contentInfo, statusList, onUpdateNode, canvasScale]);
-    // 判断是否为群组节点
-    const isGroup = node.type === 'group';
-    // 样式计算
-    const containerStyle = {
-        position: "absolute",
-        left: normalStyle.x || 0,
-        top: normalStyle.y || 0,
-        width: scaledWidth,
-        height: scaledHeight,
-        // 群组节点不显示背景和边框，只作为容器
-        background: isGroup ? 'transparent' : (normalStyle.background || "transparent"),
-        backgroundImage: isGroup ? undefined : (normalStyle.backgroundImage
-            ? `url(${normalStyle.backgroundImage})`
-            : undefined),
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        padding: Array.isArray(normalStyle.padding)
-            ? normalStyle.padding.join("px ") + "px"
-            : normalStyle.padding,
-        margin: Array.isArray(normalStyle.margin)
-            ? normalStyle.margin.join("px ") + "px"
-            : normalStyle.margin,
-        borderRadius: isGroup ? undefined : normalStyle.borderRadius,
-        // 线条物料选中时不显示边框，而是通过高亮线条颜色来表示
-        // 群组节点选中时显示边框，平时不显示
-        border: isSelected && !isLine
-            ? "2px solid #1890ff"
-            : isLine
-                ? "none"
-                : isGroup
-                    ? "none"
-                    : normalStyle.border || "1px dashed transparent",
-        // 线条节点本身不捕获点击，让内部 SVG 处理
-        pointerEvents: isLine ? "none" : "auto",
-        opacity: normalStyle.opacity ?? 1,
-        transform: normalStyle.transform,
-        zIndex: isSelected ? 1000 : (normalStyle.zIndex ?? 1),
-        cursor: isDraggable && !draggingPoint ? "move" : isClickable ? "pointer" : "default",
-        boxSizing: "border-box",
-        // 线条和群组节点使用 visible overflow，避免裁剪子节点
-        overflow: isLine || isGroup ? "visible" : "hidden",
-    };
-    // 获取线条端点位置用于显示拖拽手柄
-    const startPointPos = lineConfig ? { x: lineConfig.startX || 0, y: lineConfig.startY || 0 } : { x: 0, y: 0 };
-    const endPointPos = lineConfig ? { x: lineConfig.endX || 0, y: lineConfig.endY || 0 } : { x: 0, y: 0 };
-    return (_jsxs("div", { ref: nodeRef, "data-node-id": node.id, style: containerStyle, onClick: (e) => {
-            e.stopPropagation();
-            if (isClickable && onClick && !draggingPoint) {
-                onClick(e);
-            }
-        }, onMouseDown: (e) => {
-            if (isDraggable && onMouseDown && !draggingPoint) {
-                onMouseDown(e);
-            }
-        }, children: [isSelected && !isLine && (_jsxs(_Fragment, { children: [!isGroup && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -top-1 -left-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -bottom-1 -left-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -bottom-1 -right-1 w-2 h-2 bg-white border border-blue-500 rounded-full" })] })), _jsxs("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: [node.name, " ", currentStatus ? `(${currentStatus.name})` : ""] })] })), isSelected && isLine && lineConfig && onUpdateNode && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50", style: {
-                            left: startPointPos.x - 6,
-                            top: startPointPos.y - 6,
-                            boxShadow: '0 0 4px rgba(0,0,0,0.3)',
-                        }, onMouseDown: (e) => handlePointMouseDown(e, 'start'), title: "\u62D6\u62FD\u8C03\u6574\u8D77\u70B9" }), _jsx("div", { className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50", style: {
-                            left: endPointPos.x - 6,
-                            top: endPointPos.y - 6,
-                            boxShadow: '0 0 4px rgba(0,0,0,0.3)',
-                        }, onMouseDown: (e) => handlePointMouseDown(e, 'end'), title: "\u62D6\u62FD\u8C03\u6574\u7EC8\u70B9" }), _jsx("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: node.name })] })), _jsx("div", { className: "w-full h-full relative", children: currentMaterial ? (_jsx("div", { className: "w-full h-full", children: renderMaterial(currentMaterial, data, isSelected, node) })) : !isGroup ? (
-                // 只有非群组节点才显示"无状态"
-                _jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-300 text-xs", children: "\u65E0\u72B6\u6001" })) : null }), node.type === 'group' && node.children && (_jsx("div", { className: "absolute inset-0 pointer-events-none", children: node.children.map(childNode => (_jsx("div", { className: "pointer-events-auto", children: _jsx(NodeRenderer, { node: childNode, isSelected: false, data: data, onUpdateNode: onUpdateNode, scale: canvasScale }) }, childNode.id))) }))] }));
-};
-// 使用 React.memo 避免不必要的重渲染，提高拖拽性能
-// 注意：只在节点位置、选中状态、缩放比例变化时才重渲染
-// 忽略 data、onClick、onMouseDown、onUpdateNode 等频繁变化的 props
-export const NodeRenderer = React.memo(NodeRendererComponent, (prevProps, nextProps) => {
-    const nodeA = prevProps.node;
-    const nodeB = nextProps.node;
-    // 比较节点位置和尺寸
-    const nodeStyleEqual = nodeA.id === nodeB.id &&
-        nodeA.normalStyle.x === nodeB.normalStyle.x &&
-        nodeA.normalStyle.y === nodeB.normalStyle.y &&
-        nodeA.normalStyle.width === nodeB.normalStyle.width &&
-        nodeA.normalStyle.height === nodeB.normalStyle.height;
-    // 比较其他关键 props
-    const otherPropsEqual = prevProps.isSelected === nextProps.isSelected &&
-        prevProps.scale === nextProps.scale;
-    return nodeStyleEqual && otherPropsEqual;
-});