jch-config-editor 0.1.19 → 0.1.21

package/dist/components/PropertyPanel/index.js

@@ -1,542 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import { Form, Input, InputNumber, Select, Switch, Collapse, Button, Empty, Tabs, Space, Divider, ColorPicker, Tag, Modal, } from "antd";
-import { PlusOutlined, DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined, CopyOutlined, EditOutlined, } from "@ant-design/icons";
-import { useEditorStore } from "../../store/editorStore";
-import { nanoid } from "nanoid";
-const { Panel } = Collapse;
-const { TabPane } = Tabs;
-const { Option } = Select;
-const { TextArea } = Input;
-// TEXT 物料编辑器
-const TextMaterialEditor = ({ material, onSave, bindCodes = [], dataOptions = [], }) => {
-    const textMaterial = material;
-    const content = textMaterial.content || {};
-    const [formData, setFormData] = useState({
-        label: content.label || "",
-        value: content.value || "",
-        valueSourceCode: content.valueSourceCode || "",
-        unit: content.unit || "",
-        decimals: content.decimals ?? 2,
-        labelFontSize: content.labelStyle?.fontSize || 14,
-        labelFontWeight: content.labelStyle?.fontWeight || "bold",
-        labelColor: content.labelStyle?.color || "#262626",
-        valueFontSize: content.valueStyle?.fontSize || 14,
-        valueFontWeight: content.valueStyle?.fontWeight || "normal",
-        valueColor: content.valueStyle?.color || "#1890ff",
-    });
-    useEffect(() => {
-        setFormData({
-            label: content.label || "",
-            value: content.value || "",
-            valueSourceCode: content.valueSourceCode || "",
-            unit: content.unit || "",
-            decimals: content.decimals ?? 2,
-            labelFontSize: content.labelStyle?.fontSize || 14,
-            labelFontWeight: content.labelStyle?.fontWeight || "bold",
-            labelColor: content.labelStyle?.color || "#262626",
-            valueFontSize: content.valueStyle?.fontSize || 14,
-            valueFontWeight: content.valueStyle?.fontWeight || "normal",
-            valueColor: content.valueStyle?.color || "#1890ff",
-        });
-    }, [material.id]);
-    const handleChange = (field, value) => {
-        setFormData((prev) => ({ ...prev, [field]: value }));
-    };
-    // 当选择值来源时，自动从数据选项中获取单位
-    const handleValueSourceChange = (code) => {
-        const selectedOption = dataOptions.find((opt) => opt.paramsCode === code);
-        const autoUnit = selectedOption?.paramsUnit || "";
-        setFormData((prev) => ({
-            ...prev,
-            valueSourceCode: code,
-            unit: autoUnit,
-            value: selectedOption?.["value"] || "",
-        }));
-        // 延迟保存以确保状态更新
-        setTimeout(() => {
-            onSave({
-                content: {
-                    ...content,
-                    valueSourceCode: code,
-                    value: selectedOption?.["value"] || "",
-                    unit: autoUnit,
-                },
-            });
-        }, 0);
-    };
-    const handleSave = () => {
-        onSave({
-            content: {
-                ...content,
-                label: formData.label,
-                value: formData.value,
-                valueSourceCode: formData.valueSourceCode,
-                unit: formData.unit,
-                decimals: formData.decimals,
-                labelStyle: {
-                    fontSize: formData.labelFontSize,
-                    fontWeight: formData.labelFontWeight,
-                    color: formData.labelColor,
-                },
-                valueStyle: {
-                    fontSize: formData.valueFontSize,
-                    fontWeight: formData.valueFontWeight,
-                    color: formData.valueColor,
-                },
-            },
-        });
-    };
-    // 筛选出已绑定的数据选项
-    const boundDataOptions = dataOptions.filter((opt) => bindCodes.includes(opt.paramsCode));
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Divider, { style: { marginTop: 0 }, children: "\u6587\u672C\u5185\u5BB9" }), _jsxs(Form, { layout: "vertical", children: [_jsx(Form.Item, { label: "\u6807\u7B7E\u6587\u672C (label)", children: _jsx(Input, { value: formData.label, onChange: (e) => handleChange("label", e.target.value), onBlur: handleSave, placeholder: "\u8F93\u5165\u6807\u7B7E\u6587\u672C" }) }), _jsx(Form.Item, { label: "\u503C\u6765\u6E90", help: "\u4ECE\u7ED1\u5B9A\u7684\u6570\u636E\u4E2D\u9009\u62E9\u5B57\u6BB5\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E\u624B\u52A8\u8F93\u5165\u7684\u503C", children: _jsx(Select, { value: formData.valueSourceCode || undefined, onChange: handleValueSourceChange, placeholder: "\u9009\u62E9\u6570\u636E\u5B57\u6BB5\uFF08\u53EF\u9009\uFF09", allowClear: true, style: { width: "100%" }, fieldNames: {
-                                value: "paramsCode",
-                                label: "paramsName",
-                            }, options: boundDataOptions }) }), _jsx(Form.Item, { label: formData.valueSourceCode ? "默认值（备用）" : "值文本", help: formData.valueSourceCode
-                            ? "已绑定数据源，实际值将来自数据字段，此处仅设置无数据时的备用显示"
-                            : "手动输入显示的值", children: _jsx(Input, { value: formData.value, onChange: (e) => handleChange("value", e.target.value), onBlur: handleSave, placeholder: formData.valueSourceCode
-                                ? "数据字段无值时显示此备用值"
-                                : "输入值文本", disabled: !!formData.valueSourceCode, variant: formData.valueSourceCode ? "filled" : undefined }) }), _jsx(Form.Item, { label: "\u5355\u4F4D", help: "\u4F18\u5148\u4ECE\u7ED1\u5B9A\u6570\u636E\u81EA\u52A8\u83B7\u53D6\uFF0C\u4E5F\u53EF\u624B\u52A8\u8F93\u5165", children: _jsx(Input, { value: formData.unit, onChange: (e) => handleChange("unit", e.target.value), onBlur: handleSave, placeholder: "\u5355\u4F4D\uFF08\u5982\u00B0C\u3001%\u3001MPa\u7B49\uFF09", suffix: formData.valueSourceCode && boundDataOptions.length > 0 ? (_jsx(Tag, { color: "blue", style: { marginRight: -8 }, children: "\u81EA\u52A8" })) : null }) }), _jsx(Form.Item, { label: "\u4FDD\u7559\u5C0F\u6570\u4F4D", help: "\u6570\u503C\u683C\u5F0F\u5316\u65F6\u4FDD\u7559\u7684\u5C0F\u6570\u4F4D\u6570\uFF0C-1\u8868\u793A\u4E0D\u683C\u5F0F\u5316", children: _jsx(InputNumber, { value: formData.decimals, onChange: (v) => handleChange("decimals", v ?? 2), onBlur: handleSave, min: -1, max: 10, style: { width: "100%" } }) })] }), _jsx(Divider, { children: "\u6807\u7B7E\u6837\u5F0F" }), _jsxs(Form, { layout: "vertical", children: [_jsxs(Space, { children: [_jsx(Form.Item, { label: "\u5B57\u4F53\u5927\u5C0F", children: _jsx(InputNumber, { value: formData.labelFontSize, onChange: (v) => handleChange("labelFontSize", v || 14), onBlur: handleSave, min: 8, max: 72 }) }), _jsx(Form.Item, { label: "\u5B57\u4F53\u7C97\u7EC6", children: _jsxs(Select, { value: formData.labelFontWeight, onChange: (v) => {
-                                        handleChange("labelFontWeight", v);
-                                        setTimeout(handleSave, 0);
-                                    }, style: { width: 100 }, children: [_jsx(Option, { value: "normal", children: "\u6B63\u5E38" }), _jsx(Option, { value: "bold", children: "\u7C97\u4F53" })] }) })] }), _jsx(Form.Item, { label: "\u6587\u5B57\u989C\u8272", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ColorPicker, { value: formData.labelColor, onChange: (color) => handleChange("labelColor", color.toHexString()), onChangeComplete: () => handleSave() }), _jsx(Input, { value: formData.labelColor, onChange: (e) => handleChange("labelColor", e.target.value), onBlur: handleSave, placeholder: "#262626", style: { width: 100 } })] }) })] }), _jsx(Divider, { children: "\u503C\u6837\u5F0F" }), _jsxs(Form, { layout: "vertical", children: [_jsxs(Space, { children: [_jsx(Form.Item, { label: "\u5B57\u4F53\u5927\u5C0F", children: _jsx(InputNumber, { value: formData.valueFontSize, onChange: (v) => handleChange("valueFontSize", v || 14), onBlur: handleSave, min: 8, max: 72 }) }), _jsx(Form.Item, { label: "\u5B57\u4F53\u7C97\u7EC6", children: _jsxs(Select, { value: formData.valueFontWeight, onChange: (v) => {
-                                        handleChange("valueFontWeight", v);
-                                        setTimeout(handleSave, 0);
-                                    }, style: { width: 100 }, children: [_jsx(Option, { value: "normal", children: "\u6B63\u5E38" }), _jsx(Option, { value: "bold", children: "\u7C97\u4F53" })] }) })] }), _jsx(Form.Item, { label: "\u6587\u5B57\u989C\u8272", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ColorPicker, { value: formData.valueColor, onChange: (color) => handleChange("valueColor", color.toHexString()), onChangeComplete: () => handleSave() }), _jsx(Input, { value: formData.valueColor, onChange: (e) => handleChange("valueColor", e.target.value), onBlur: handleSave, placeholder: "#1890ff", style: { width: 100 } })] }) })] })] }));
-};
-// IMAGE 物料编辑器
-const ImageMaterialEditor = ({ material, onSave, }) => {
-    const [formData, setFormData] = useState({
-        name: material.name,
-        src: material.src || "",
-    });
-    useEffect(() => {
-        setFormData({
-            name: material.name,
-            src: material.src || "",
-        });
-    }, [material.id]);
-    const handleChange = (field, value) => {
-        setFormData((prev) => ({ ...prev, [field]: value }));
-    };
-    const handleSave = () => {
-        onSave({
-            name: formData.name,
-            src: formData.src,
-        });
-    };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Divider, { style: { marginTop: 0 }, children: "\u56FE\u7247\u5C5E\u6027" }), _jsxs(Form, { layout: "vertical", children: [_jsx(Form.Item, { label: "\u56FE\u7247\u540D\u79F0", children: _jsx(Input, { value: formData.name, onChange: (e) => handleChange("name", e.target.value), onBlur: handleSave }) }), _jsx(Form.Item, { label: "\u56FE\u7247\u5730\u5740 (src)", children: _jsx(TextArea, { value: formData.src, onChange: (e) => handleChange("src", e.target.value), onBlur: handleSave, rows: 4, placeholder: "\u8F93\u5165\u56FE\u7247 URL \u6216 Data URI" }) })] })] }));
-};
-// LINE 物料编辑器
-const LineMaterialEditor = ({ material, onSave, }) => {
-    const lineConfig = material.config || {};
-    const [formData, setFormData] = useState({
-        lineWeight: lineConfig.lineWeight || lineConfig.thickness || 2,
-        color: lineConfig.color || "#262626",
-        lineType: lineConfig.lineType || "solid",
-        startX: lineConfig.startX ?? 0,
-        startY: lineConfig.startY ?? 0,
-        endX: lineConfig.endX ?? 100,
-        endY: lineConfig.endY ?? 0,
-    });
-    useEffect(() => {
-        setFormData({
-            lineWeight: lineConfig.lineWeight || lineConfig.thickness || 2,
-            color: lineConfig.color || "#262626",
-            lineType: lineConfig.lineType || "solid",
-            startX: lineConfig.startX ?? 0,
-            startY: lineConfig.startY ?? 0,
-            endX: lineConfig.endX ?? 100,
-            endY: lineConfig.endY ?? 0,
-        });
-    }, [material.id]);
-    // 立即保存，使用新的配置值
-    const handleSaveWithValues = (newValues) => {
-        const newFormData = { ...formData, ...newValues };
-        setFormData(newFormData);
-        // 保留原有配置，更新所有属性
-        onSave({
-            config: {
-                ...lineConfig,
-                thickness: newFormData.lineWeight,
-                lineWeight: newFormData.lineWeight,
-                color: newFormData.color,
-                lineType: newFormData.lineType,
-                startX: newFormData.startX,
-                startY: newFormData.startY,
-                endX: newFormData.endX,
-                endY: newFormData.endY,
-            },
-        });
-    };
-    // 线型选项
-    const lineTypeOptions = [
-        { value: "solid", label: "实线", desc: "连续实线" },
-        { value: "dashed", label: "虚线", desc: "长划间隔" },
-        { value: "center", label: "点画线（中心线）", desc: "长点-短点交替" },
-        { value: "phantom", label: "假想线", desc: "长划-双点交替" },
-        { value: "dot", label: "点线", desc: "密集点状" },
-        { value: "dash-dot", label: "画点线", desc: "长划-点交替" },
-    ];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Divider, { style: { marginTop: 0 }, children: "\u7EBF\u6761\u5C5E\u6027" }), _jsxs(Form, { layout: "vertical", children: [_jsx(Form.Item, { label: "\u7EBF\u578B", help: "\u9009\u62E9\u7EBF\u6761\u6837\u5F0F", children: _jsx(Select, { value: formData.lineType, onChange: (v) => handleSaveWithValues({ lineType: v }), children: lineTypeOptions.map((opt) => (_jsx(Option, { value: opt.value, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: opt.label }), _jsx("span", { className: "text-xs text-gray-400", children: opt.desc })] }) }, opt.value))) }) }), _jsx(Form.Item, { label: "\u7EBF\u5BBD\uFF08\u50CF\u7D20\uFF09", children: _jsx(InputNumber, { value: formData.lineWeight, onChange: (v) => handleSaveWithValues({ lineWeight: v || 2 }), min: 1, max: 20, style: { width: 120 } }) }), _jsx(Form.Item, { label: "\u989C\u8272", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ColorPicker, { value: formData.color, onChange: (color) => handleSaveWithValues({ color: color.toHexString() }) }), _jsx(Input, { value: formData.color, onChange: (e) => handleSaveWithValues({ color: e.target.value }), placeholder: "#d9d9d9", style: { width: 100 } })] }) })] }), _jsx(Divider, { children: "\u8D77\u6B62\u4F4D\u7F6E\uFF08\u76F8\u5BF9\u8282\u70B9\uFF09" }), _jsxs(Form, { layout: "vertical", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Form.Item, { label: "\u8D77\u70B9 X", className: "mb-2", children: _jsx(InputNumber, { value: formData.startX, onChange: (v) => handleSaveWithValues({ startX: v ?? 0 }), style: { width: '100%' } }) }), _jsx(Form.Item, { label: "\u8D77\u70B9 Y", className: "mb-2", children: _jsx(InputNumber, { value: formData.startY, onChange: (v) => handleSaveWithValues({ startY: v ?? 0 }), style: { width: '100%' } }) }), _jsx(Form.Item, { label: "\u7EC8\u70B9 X", className: "mb-2", children: _jsx(InputNumber, { value: formData.endX, onChange: (v) => handleSaveWithValues({ endX: v ?? 100 }), style: { width: '100%' } }) }), _jsx(Form.Item, { label: "\u7EC8\u70B9 Y", className: "mb-2", children: _jsx(InputNumber, { value: formData.endY, onChange: (v) => handleSaveWithValues({ endY: v ?? 0 }), style: { width: '100%' } }) })] }), _jsx(Form.Item, { label: "\u5FEB\u901F\u5BF9\u9F50", className: "mt-4", children: _jsxs(Space, { children: [_jsx(Button, { size: "small", onClick: () => {
-                                        // 水平对齐：保持起点不变，终点Y与起点相同
-                                        handleSaveWithValues({ endY: formData.startY });
-                                    }, title: "\u5C06\u7EBF\u6761\u53D8\u4E3A\u6C34\u5E73\u7EBF", children: "\u6C34\u5E73" }), _jsx(Button, { size: "small", onClick: () => {
-                                        // 垂直对齐：保持起点不变，终点X与起点相同
-                                        handleSaveWithValues({ endX: formData.startX });
-                                    }, title: "\u5C06\u7EBF\u6761\u53D8\u4E3A\u5782\u76F4\u7EBF", children: "\u5782\u76F4" }), _jsx(Button, { size: "small", onClick: () => {
-                                        // 交换起点和终点
-                                        handleSaveWithValues({
-                                            startX: formData.endX,
-                                            startY: formData.endY,
-                                            endX: formData.startX,
-                                            endY: formData.startY,
-                                        });
-                                    }, title: "\u4EA4\u6362\u8D77\u70B9\u548C\u7EC8\u70B9", children: "\u53CD\u5411" })] }) })] })] }));
-};
-const GroupNodeStatusEditor = ({ node, updateNode, materials, }) => {
-    // 获取可用的物料列表（排除群组类型）
-    const availableMaterials = materials.filter(m => m.type !== 'CUSTOM' || !m.config?.nodes);
-    // 更新子节点的状态列表
-    const handleUpdateChildStatusList = (childId, newStatusList) => {
-        const newChildren = node.children?.map(child => {
-            if (child.id === childId) {
-                return {
-                    ...child,
-                    contentInfo: {
-                        ...child.contentInfo,
-                        statusList: newStatusList,
-                    },
-                };
-            }
-            return child;
-        });
-        updateNode(node.id, {
-            children: newChildren,
-        });
-    };
-    // 添加状态到子节点
-    const handleAddChildStatus = (childId) => {
-        const child = node.children?.find(c => c.id === childId);
-        if (!child)
-            return;
-        const newStatus = {
-            id: nanoid(),
-            name: `状态${child.contentInfo.statusList.length + 1}`,
-            expression: child.contentInfo.statusList.length === 0 ? 'return true;' : 'return false;',
-            material: { ...availableMaterials[0], id: nanoid() },
-            bindCodes: [],
-        };
-        handleUpdateChildStatusList(childId, [...child.contentInfo.statusList, newStatus]);
-    };
-    // 删除子节点的状态
-    const handleDeleteChildStatus = (childId, statusId) => {
-        const child = node.children?.find(c => c.id === childId);
-        if (!child)
-            return;
-        const newStatusList = child.contentInfo.statusList.filter(s => s.id !== statusId);
-        handleUpdateChildStatusList(childId, newStatusList);
-    };
-    // 更新子节点的某个状态
-    const handleUpdateChildStatus = (childId, statusId, updates) => {
-        const child = node.children?.find(c => c.id === childId);
-        if (!child)
-            return;
-        const newStatusList = child.contentInfo.statusList.map(s => {
-            if (s.id === statusId) {
-                return { ...s, ...updates };
-            }
-            return s;
-        });
-        handleUpdateChildStatusList(childId, newStatusList);
-    };
-    // 移动子节点状态
-    const handleMoveChildStatus = (childId, statusId, direction) => {
-        const child = node.children?.find(c => c.id === childId);
-        if (!child)
-            return;
-        const index = child.contentInfo.statusList.findIndex(s => s.id === statusId);
-        if (index === -1)
-            return;
-        const newStatusList = [...child.contentInfo.statusList];
-        if (direction === 'up' && index > 0) {
-            [newStatusList[index], newStatusList[index - 1]] = [newStatusList[index - 1], newStatusList[index]];
-        }
-        else if (direction === 'down' && index < newStatusList.length - 1) {
-            [newStatusList[index], newStatusList[index + 1]] = [newStatusList[index + 1], newStatusList[index]];
-        }
-        handleUpdateChildStatusList(childId, newStatusList);
-    };
-    // 更换子节点状态的物料
-    const handleChangeChildStatusMaterial = (childId, statusId, materialId) => {
-        const selectedMaterial = materials.find(m => m.id === materialId);
-        if (!selectedMaterial)
-            return;
-        handleUpdateChildStatus(childId, statusId, {
-            material: { ...selectedMaterial, id: nanoid() },
-        });
-    };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg mb-4", children: _jsxs("div", { className: "text-sm text-blue-700", children: [_jsx("strong", { children: "\u7FA4\u7EC4\u8282\u70B9" }), "\uFF1A\u4E3A\u6BCF\u4E2A\u5B50\u8282\u70B9\u914D\u7F6E\u591A\u4E2A\u72B6\u6001\u548C\u7ED1\u5B9A"] }) }), _jsx(Collapse, { ghost: true, children: node.children?.map((child, childIndex) => (_jsx(Panel, { header: _jsxs("div", { className: "flex items-center justify-between w-full pr-4", children: [_jsxs("span", { className: "font-medium text-sm", children: ["\u5B50\u8282\u70B9 ", childIndex + 1] }), _jsxs(Tag, { color: "blue", style: { fontSize: '12px', padding: '0 4px' }, children: [child.contentInfo.statusList.length, " \u4E2A\u72B6\u6001"] })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u72B6\u6001\u5217\u8868" }), _jsx(Button, { type: "primary", size: "small", icon: _jsx(PlusOutlined, {}), onClick: () => handleAddChildStatus(child.id), children: "\u6DFB\u52A0\u72B6\u6001" })] }), child.contentInfo.statusList.length === 0 ? (_jsx("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "\u6682\u65E0\u72B6\u6001\uFF0C\u70B9\u51FB\u4E0A\u65B9\u6309\u94AE\u6DFB\u52A0" })) : (_jsx(Collapse, { ghost: true, children: child.contentInfo.statusList.map((status, statusIndex) => (_jsx(Panel, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-400 w-5", children: statusIndex + 1 }), _jsx("span", { className: "font-medium", children: status.name }), _jsx(Tag, { color: "default", className: "text-xs", children: status.material.type })] }), extra: _jsxs(Space, { size: "small", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "text", size: "small", icon: _jsx(ArrowUpOutlined, {}), disabled: statusIndex === 0, onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleMoveChildStatus(child.id, status.id, 'up');
-                                                } }), _jsx(Button, { type: "text", size: "small", icon: _jsx(ArrowDownOutlined, {}), disabled: statusIndex === child.contentInfo.statusList.length - 1, onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleMoveChildStatus(child.id, status.id, 'down');
-                                                } }), _jsx(Button, { type: "text", size: "small", danger: true, icon: _jsx(DeleteOutlined, {}), onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleDeleteChildStatus(child.id, status.id);
-                                                } })] }), children: _jsxs(Form, { layout: "vertical", children: [_jsx(Form.Item, { label: "\u72B6\u6001\u540D\u79F0", children: _jsx(Input, { value: status.name, onChange: (e) => handleUpdateChildStatus(child.id, status.id, { name: e.target.value }), placeholder: "\u8F93\u5165\u72B6\u6001\u540D\u79F0" }) }), _jsx(Form.Item, { label: "\u6267\u884C\u8868\u8FBE\u5F0F", help: "\u8FD4\u56DE true \u65F6\u6FC0\u6D3B\u6B64\u72B6\u6001\uFF0C\u53EF\u4F7F\u7528 data \u53D8\u91CF\u8BBF\u95EE\u7ED1\u5B9A\u6570\u636E", children: _jsx(TextArea, { value: status.expression, onChange: (e) => handleUpdateChildStatus(child.id, status.id, { expression: e.target.value }), rows: 3, placeholder: "return true;" }) }), _jsx(Form.Item, { label: "\u7ED1\u5B9A\u6570\u636E\u6E90 (bindCodes)", children: _jsx(Select, { mode: "tags", value: status.bindCodes || [], onChange: (value) => handleUpdateChildStatus(child.id, status.id, { bindCodes: value }), placeholder: "\u8F93\u5165\u6570\u636E\u6E90 code", tokenSeparators: [",", " "] }) }), _jsx(Form.Item, { label: "\u66F4\u6362\u7269\u6599", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { color: "blue", children: status.material.name }), _jsx(Tag, { color: "default", children: status.material.type }), _jsx(Select, { placeholder: "\u9009\u62E9\u65B0\u7269\u6599", style: { width: 150 }, value: undefined, onChange: (value) => value && handleChangeChildStatusMaterial(child.id, status.id, value), options: availableMaterials.map(m => ({
-                                                                value: m.id,
-                                                                label: `${m.name} (${m.type})`,
-                                                            })) })] }) }), _jsx(Divider, { style: { margin: '12px 0' } }), _jsxs("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium", children: "\u7269\u6599\u5C5E\u6027" }), _jsx(Tag, { children: status.material.name })] }), _jsx(MaterialPropertyEditor, { material: status.material, onSave: (updates) => {
-                                                            const newMaterial = { ...status.material, ...updates };
-                                                            handleUpdateChildStatus(child.id, status.id, { material: newMaterial });
-                                                        } })] })] }) }, status.id))) }))] }) }, child.id))) })] }));
-};
-// 统一的物料编辑器
-const MaterialPropertyEditor = ({ material, onSave, bindCodes, dataOptions, }) => {
-    switch (material.type) {
-        case "TEXT":
-            return (_jsx(TextMaterialEditor, { material: material, onSave: onSave, bindCodes: bindCodes, dataOptions: dataOptions }));
-        case "IMAGE":
-            return _jsx(ImageMaterialEditor, { material: material, onSave: onSave });
-        case "LINE":
-            return _jsx(LineMaterialEditor, { material: material, onSave: onSave });
-        default:
-            return (_jsx("div", { className: "text-center text-gray-400 py-8", children: "\u6682\u4E0D\u652F\u6301\u7F16\u8F91\u6B64\u7C7B\u578B\u7684\u7269\u6599" }));
-    }
-};
-// ==================== 主面板组件 ====================
-export const PropertyPanel = ({ defaultTestData, }) => {
-    const { nodes, selectedNodeId, updateNode, updateNodeStyle, updateNodeControl, updateNodeContent, materials, // 物料库，用于创建状态时选择物料
-    addStatus, removeStatus, updateStatus, selectedStatusId, selectStatus, } = useEditorStore();
-    const [form] = Form.useForm();
-    const [activeTab, setActiveTab] = useState("basic");
-    const [materialModalVisible, setMaterialModalVisible] = useState(false);
-    const [editingStatusId, setEditingStatusId] = useState(null);
-    const [editingExpressions, setEditingExpressions] = useState({});
-    // 使用 useMemo 获取选中的节点
-    const selectedNode = React.useMemo(() => {
-        return nodes.find((n) => n.id === selectedNodeId);
-    }, [nodes, selectedNodeId]);
-    // 获取当前节点的状态列表
-    const currentStatusList = selectedNode?.contentInfo.statusList || [];
-    // 获取当前选中的状态
-    const selectedStatus = React.useMemo(() => {
-        if (!selectedNode || !selectedStatusId)
-            return null;
-        return (selectedNode.contentInfo.statusList.find((s) => s.id === selectedStatusId) || null);
-    }, [selectedNode, selectedStatusId]);
-    // 表单值变化时更新节点
-    const handleValuesChange = (changedValues, _allValues) => {
-        if (!selectedNodeId)
-            return;
-        if (changedValues.normalStyle) {
-            updateNodeStyle(selectedNodeId, changedValues.normalStyle);
-        }
-        if (changedValues.name !== undefined) {
-            updateNode(selectedNodeId, { name: changedValues.name });
-        }
-        if (changedValues.controlInfo) {
-            updateNodeControl(selectedNodeId, changedValues.controlInfo);
-        }
-    };
-    // 当选中节点变化时，重置表单
-    useEffect(() => {
-        if (selectedNode) {
-            form.setFieldsValue({
-                name: selectedNode.name,
-                normalStyle: {
-                    width: 100,
-                    height: 100,
-                    x: 0,
-                    y: 0,
-                    padding: 8,
-                    background: "transparent",
-                    borderRadius: 0,
-                    opacity: 1,
-                    ...selectedNode.normalStyle,
-                },
-                controlInfo: {
-                    isDraggable: true,
-                    isClickable: true,
-                    isResizable: true,
-                    isSelectable: true,
-                    ...selectedNode.controlInfo,
-                },
-            });
-            // 取消选中状态
-            selectStatus(null);
-        }
-    }, [selectedNode?.id, form, selectStatus]);
-    // ========== 状态管理 ==========
-    // 添加状态
-    const handleAddStatus = () => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        // 打开物料选择弹窗
-        setEditingStatusId("new");
-        setMaterialModalVisible(true);
-    };
-    // 从物料库选择物料创建状态
-    const handleSelectMaterialForStatus = (material) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const newStatus = {
-            id: nanoid(),
-            name: `${material.name}_状态${currentStatusList.length + 1}`,
-            expression: currentStatusList.length === 0 ? "return true;" : "return false;",
-            material: { ...material, id: nanoid() }, // 复制物料并生成新ID
-            bindCodes: [],
-        };
-        if (editingStatusId === "new") {
-            // 添加新状态
-            const newStatusList = [...currentStatusList, newStatus];
-            updateNodeContent(selectedNodeId, {
-                statusList: newStatusList,
-            });
-        }
-        else if (editingStatusId) {
-            // 更新现有状态的物料
-            const newStatusList = currentStatusList.map((s) => {
-                if (s.id === editingStatusId) {
-                    return { ...s, material: { ...material, id: nanoid() } };
-                }
-                return s;
-            });
-            updateNodeContent(selectedNodeId, { statusList: newStatusList });
-        }
-        setMaterialModalVisible(false);
-        setEditingStatusId(null);
-    };
-    // 删除状态
-    const handleDeleteStatus = (statusId) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const newStatusList = selectedNode.contentInfo.statusList?.filter((s) => s.id !== statusId) ||
-            [];
-        updateNodeContent(selectedNodeId, { statusList: newStatusList });
-        if (selectedStatusId === statusId) {
-            selectStatus(null);
-        }
-    };
-    // 更新状态
-    const handleUpdateStatus = (statusId, updates) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const newStatusList = selectedNode.contentInfo.statusList?.map((s) => {
-            if (s.id === statusId) {
-                return { ...s, ...updates };
-            }
-            return s;
-        }) || [];
-        updateNodeContent(selectedNodeId, { statusList: newStatusList });
-    };
-    // 复制状态
-    const handleCopyStatus = (status) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const newStatus = {
-            ...status,
-            id: nanoid(),
-            name: `${status.name}_复制`,
-            expression: "return false;",
-        };
-        const newStatusList = [...currentStatusList, newStatus];
-        updateNodeContent(selectedNodeId, { statusList: newStatusList });
-    };
-    // 移动状态
-    const handleMoveStatus = (statusId, direction) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const index = currentStatusList.findIndex((s) => s.id === statusId);
-        if (index === -1)
-            return;
-        const newStatusList = [...currentStatusList];
-        if (direction === "up" && index > 0) {
-            [newStatusList[index], newStatusList[index - 1]] = [
-                newStatusList[index - 1],
-                newStatusList[index],
-            ];
-        }
-        else if (direction === "down" && index < newStatusList.length - 1) {
-            [newStatusList[index], newStatusList[index + 1]] = [
-                newStatusList[index + 1],
-                newStatusList[index],
-            ];
-        }
-        updateNodeContent(selectedNodeId, { statusList: newStatusList });
-    };
-    // 更改状态的物料
-    const handleChangeStatusMaterial = (statusId) => {
-        setEditingStatusId(statusId);
-        setMaterialModalVisible(true);
-    };
-    // 更新状态绑定物料的属性
-    const handleUpdateStatusMaterial = (statusId, updates) => {
-        if (!selectedNodeId || !selectedNode)
-            return;
-        const newStatusList = currentStatusList.map((s) => {
-            if (s.id === statusId) {
-                return {
-                    ...s,
-                    material: { ...s.material, ...updates },
-                };
-            }
-            return s;
-        });
-        updateNodeContent(selectedNodeId, {
-            statusList: newStatusList,
-        });
-    };
-    if (!selectedNode) {
-        return (_jsx("div", { className: "h-full flex items-center justify-center bg-white border-l border-gray-200", children: _jsx(Empty, { description: "\u8BF7\u9009\u62E9\u4E00\u4E2A\u8282\u70B9" }) }));
-    }
-    return (_jsxs("div", { className: "h-full flex flex-col bg-white border-l 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: "\u5C5E\u6027\u9762\u677F" }), _jsx("p", { className: "text-sm text-gray-500", children: "\u7F16\u8F91\u9009\u4E2D\u8282\u70B9\u7684\u5C5E\u6027" })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs(Tabs, { activeKey: activeTab, onChange: setActiveTab, children: [_jsx(TabPane, { tab: "\u57FA\u7840", children: _jsxs(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange, initialValues: {
-                                    name: selectedNode.name,
-                                }, children: [_jsx(Form.Item, { label: "\u8282\u70B9\u540D\u79F0", name: "name", children: _jsx(Input, { placeholder: "\u8F93\u5165\u8282\u70B9\u540D\u79F0" }) }), _jsxs(Collapse, { ghost: true, defaultActiveKey: ["position", "size", "style"], children: [_jsx(Panel, { header: "\u4F4D\u7F6E", children: _jsxs(Space, { children: [_jsx(Form.Item, { label: "X", name: ["normalStyle", "x"], children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Y", name: ["normalStyle", "y"], children: _jsx(InputNumber, {}) })] }) }, "position"), _jsx(Panel, { header: "\u5C3A\u5BF8", children: _jsxs(Space, { children: [_jsx(Form.Item, { label: "\u5BBD\u5EA6", name: ["normalStyle", "width"], children: _jsx(InputNumber, { min: 10 }) }), _jsx(Form.Item, { label: "\u9AD8\u5EA6", name: ["normalStyle", "height"], children: _jsx(InputNumber, { min: 10 }) })] }) }, "size"), _jsxs(Panel, { header: "\u6837\u5F0F", children: [_jsx(Form.Item, { label: "\u80CC\u666F\u8272", name: ["normalStyle", "background"], children: _jsx(Input, { placeholder: "transparent, #fff, url(...)" }) }), _jsx(Form.Item, { label: "\u5185\u8FB9\u8DDD", name: ["normalStyle", "padding"], children: _jsx(InputNumber, { min: 0 }) }), _jsx(Form.Item, { label: "\u5706\u89D2", name: ["normalStyle", "borderRadius"], children: _jsx(InputNumber, { min: 0 }) }), _jsx(Form.Item, { label: "\u7F29\u653E\u6BD4\u4F8B", name: ["normalStyle", "scale"], help: "\u7B49\u6BD4\u7F29\u653E\u8282\u70B9\u7684\u5BBD\u9AD8", children: _jsx(InputNumber, { min: 0.1, max: 5, step: 0.1 }) }), _jsx(Form.Item, { label: "\u900F\u660E\u5EA6", name: ["normalStyle", "opacity"], children: _jsx(InputNumber, { min: 0, max: 1, step: 0.1 }) }), _jsx(Form.Item, { label: "\u5C42\u7EA7", name: ["normalStyle", "zIndex"], children: _jsx(InputNumber, {}) })] }, "style")] })] }) }, "basic"), _jsx(TabPane, { tab: "\u72B6\u6001", children: selectedNode.type === 'group' && selectedNode.children ? (_jsx(GroupNodeStatusEditor, { node: selectedNode, updateNode: updateNode, materials: materials })) : (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: "font-medium", children: ["\u72B6\u6001\u5217\u8868", _jsx(Tag, { color: "blue", className: "ml-2", children: currentStatusList.length })] }), _jsx(Button, { type: "primary", size: "small", icon: _jsx(PlusOutlined, {}), onClick: handleAddStatus, children: "\u6DFB\u52A0\u72B6\u6001" })] }), _jsx("p", { className: "text-xs text-gray-500 mb-3", children: "\u8282\u70B9\u6839\u636E\u72B6\u6001\u8868\u8FBE\u5F0F\u8BA1\u7B97\u7ED3\u679C\u663E\u793A\u5BF9\u5E94\u7269\u6599\uFF0C\u7B2C\u4E00\u4E2A\u8FD4\u56DE true \u7684\u72B6\u6001\u4E3A\u5F53\u524D\u72B6\u6001" }), currentStatusList.length > 0 && (_jsxs("div", { className: "mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u5F53\u524D\u72B6\u6001:" }), _jsx("span", { className: "ml-2 text-sm font-medium text-blue-600", children: "\u7531\u8868\u8FBE\u5F0F\u81EA\u52A8\u8BA1\u7B97" }), _jsx("span", { className: "ml-2 text-xs text-gray-400", children: "(\u8FD4\u56DE true \u7684\u7B2C\u4E00\u4E2A\u72B6\u6001)" })] }) }), _jsx("div", { className: "mt-2 text-xs text-gray-500", children: "\u63D0\u793A: \u4F7F\u7528\u753B\u5E03\u5DE5\u5177\u680F\u7684\"\u6570\u636E\u6A21\u62DF\"\u6309\u94AE\u53EF\u4EE5\u6D4B\u8BD5\u72B6\u6001\u8868\u8FBE\u5F0F" })] })), currentStatusList.length === 0 ? (_jsx("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "\u6682\u65E0\u72B6\u6001\uFF0C\u70B9\u51FB\u4E0A\u65B9\u6309\u94AE\u6DFB\u52A0" })) : (_jsx(Collapse, { ghost: true, children: currentStatusList.map((status, index) => (_jsx(Panel, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-400 w-5", children: index + 1 }), _jsx("span", { className: "font-medium", children: status.name }), _jsx(Tag, { color: "default", className: "text-xs", children: status.material.type })] }), extra: _jsxs(Space, { size: "small", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "text", size: "small", icon: _jsx(ArrowUpOutlined, {}), disabled: index === 0, onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            handleMoveStatus(status.id, "up");
-                                                        } }), _jsx(Button, { type: "text", size: "small", icon: _jsx(ArrowDownOutlined, {}), disabled: index === currentStatusList.length - 1, onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            handleMoveStatus(status.id, "down");
-                                                        } }), _jsx(Button, { type: "text", size: "small", icon: _jsx(CopyOutlined, {}), onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            handleCopyStatus(status);
-                                                        } }), _jsx(Button, { type: "text", size: "small", danger: true, icon: _jsx(DeleteOutlined, {}), onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            handleDeleteStatus(status.id);
-                                                        } })] }), children: _jsxs(Form, { layout: "vertical", children: [_jsx(Form.Item, { label: "\u72B6\u6001\u540D\u79F0", children: _jsx(Input, { value: status.name, onChange: (e) => handleUpdateStatus(status.id, {
-                                                                name: e.target.value,
-                                                            }), placeholder: "\u8F93\u5165\u72B6\u6001\u540D\u79F0" }) }), _jsx(Form.Item, { label: "\u6267\u884C\u8868\u8FBE\u5F0F", help: "\u8FD4\u56DE true \u65F6\u6FC0\u6D3B\u6B64\u72B6\u6001\uFF0C\u53EF\u4F7F\u7528 data \u53D8\u91CF\u8BBF\u95EE\u7ED1\u5B9A\u6570\u636E", children: _jsx(TextArea, { value: editingExpressions[status.id] ?? status.expression, onChange: (e) => setEditingExpressions((prev) => ({
-                                                                ...prev,
-                                                                [status.id]: e.target.value,
-                                                            })), onBlur: (e) => {
-                                                                handleUpdateStatus(status.id, {
-                                                                    expression: e.target.value,
-                                                                });
-                                                                setEditingExpressions((prev) => {
-                                                                    const newState = { ...prev };
-                                                                    delete newState[status.id];
-                                                                    return newState;
-                                                                });
-                                                            }, rows: 3, placeholder: "return true;" }) }), _jsx(Form.Item, { label: "\u7ED1\u5B9A\u6570\u636E\u6E90 (bindCodes)", children: _jsx(Select, { mode: "tags", value: status.bindCodes || [], onChange: (value) => handleUpdateStatus(status.id, {
-                                                                bindCodes: value,
-                                                            }), placeholder: "\u8F93\u5165\u6570\u636E\u6E90 code", tokenSeparators: [",", " "], fieldNames: {
-                                                                value: "paramsCode",
-                                                                label: "paramsName",
-                                                            }, options: defaultTestData }) }), _jsx(Form.Item, { label: "\u7ED1\u5B9A\u7269\u6599", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { color: "blue", children: status.material.name }), _jsx(Tag, { color: "default", children: status.material.type }), _jsx(Button, { type: "link", size: "small", icon: _jsx(EditOutlined, {}), onClick: () => handleChangeStatusMaterial(status.id), children: "\u66F4\u6362\u7269\u6599" })] }) }), _jsx(Divider, { style: { margin: "12px 0" } }), _jsxs("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium", children: "\u7269\u6599\u5C5E\u6027" }), _jsx(Tag, { children: status.material.name })] }), _jsx(MaterialPropertyEditor, { material: status.material, onSave: (updates) => handleUpdateStatusMaterial(status.id, updates), bindCodes: status.bindCodes || [], dataOptions: defaultTestData || [] })] })] }) }, status.id))) }))] })) }, "status"), _jsx(TabPane, { tab: "\u63A7\u5236", children: _jsxs(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange, children: [_jsx(Form.Item, { label: "\u53EF\u62D6\u62FD", name: ["controlInfo", "isDraggable"], valuePropName: "checked", children: _jsx(Switch, {}) }), _jsx(Form.Item, { label: "\u53EF\u70B9\u51FB", name: ["controlInfo", "isClickable"], valuePropName: "checked", children: _jsx(Switch, {}) }), _jsx(Form.Item, { label: "\u53EF\u8C03\u6574\u5927\u5C0F", name: ["controlInfo", "isResizable"], valuePropName: "checked", children: _jsx(Switch, {}) }), _jsx(Form.Item, { label: "\u53EF\u9009\u4E2D", name: ["controlInfo", "isSelectable"], valuePropName: "checked", children: _jsx(Switch, {}) })] }) }, "control")] }) }), _jsx("div", { className: "p-3 border-t border-gray-200 bg-gray-50", children: _jsxs("div", { className: "text-xs text-gray-500", children: [_jsxs("div", { children: ["\u8282\u70B9 ID: ", selectedNode.id.slice(0, 8), "..."] }), _jsxs("div", { children: ["\u72B6\u6001\u6570: ", currentStatusList.length] })] }) }), _jsx(Modal, { title: "\u9009\u62E9\u7269\u6599", open: materialModalVisible, onCancel: () => {
-                    setMaterialModalVisible(false);
-                    setEditingStatusId(null);
-                }, footer: null, width: 600, children: _jsx("div", { className: "max-h-[400px] overflow-y-auto", children: _jsxs(Collapse, { ghost: true, defaultActiveKey: ["basic", "device", "text", "line"], children: [_jsx(Panel, { header: "\u57FA\u7840\u5F62\u72B6", children: _jsx("div", { className: "grid grid-cols-4 gap-2", children: materials
-                                        .filter((m) => ["矩形", "圆形", "圆角矩形"].includes(m.name))
-                                        .map((material) => (_jsxs("div", { className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center", onClick: () => handleSelectMaterialForStatus(material), children: [_jsx("div", { className: "w-12 h-12 mx-auto mb-1 flex items-center justify-center", children: material.src ? (_jsx("img", { src: material.src, alt: material.name, className: "w-10 h-10 object-contain" })) : (_jsx("span", { className: "text-xs", children: material.name[0] })) }), _jsx("span", { className: "text-xs", children: material.name })] }, material.id))) }) }, "basic"), _jsx(Panel, { header: "\u8BBE\u5907\u56FE\u6807", children: _jsx("div", { className: "grid grid-cols-4 gap-2", children: materials
-                                        .filter((m) => ["阀门", "泵", "罐体"].includes(m.name) ||
-                                        (m.type === "IMAGE" &&
-                                            !["矩形", "圆形", "圆角矩形"].includes(m.name)))
-                                        .map((material) => (_jsxs("div", { className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center", onClick: () => handleSelectMaterialForStatus(material), children: [_jsx("div", { className: "w-12 h-12 mx-auto mb-1 flex items-center justify-center", children: material.src ? (_jsx("img", { src: material.src, alt: material.name, className: "w-10 h-10 object-contain" })) : (_jsx("span", { className: "text-xs", children: material.name[0] })) }), _jsx("span", { className: "text-xs", children: material.name })] }, material.id))) }) }, "device"), _jsx(Panel, { header: "\u6587\u672C", children: _jsx("div", { className: "grid grid-cols-4 gap-2", children: materials
-                                        .filter((m) => m.type === "TEXT")
-                                        .map((material) => (_jsxs("div", { className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center", onClick: () => handleSelectMaterialForStatus(material), children: [_jsx("div", { className: "w-12 h-12 mx-auto mb-1 flex items-center justify-center bg-gray-100 rounded", children: _jsx("span", { className: "text-lg font-bold text-gray-500", children: "T" }) }), _jsx("span", { className: "text-xs", children: material.name })] }, material.id))) }) }, "text"), _jsx(Panel, { header: "\u7EBF\u6761", children: _jsx("div", { className: "grid grid-cols-4 gap-2", children: materials
-                                        .filter((m) => m.type === "LINE")
-                                        .map((material) => (_jsxs("div", { className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center", onClick: () => handleSelectMaterialForStatus(material), children: [_jsx("div", { className: "w-12 h-12 mx-auto mb-1 flex items-center justify-center bg-gray-100 rounded", children: _jsx("div", { className: "w-8 h-0.5 bg-gray-400" }) }), _jsx("span", { className: "text-xs", children: material.name })] }, material.id))) }) }, "line")] }) }) })] }));
-};