{
    "widgettype": "VBox",
    "options": {"width": "100%", "height": "100%", "padding": "24px", "gap": "20px"},
    "subwidgets": [
        {
            "widgettype": "HBox",
            "options": {"alignItems": "center", "gap": "16px", "padding": "0 0 16px 0", "borderBottom": "1px solid #334155"},
            "subwidgets": [
                {"widgettype": "Title2", "options": {"text": "产线编排画布"}},
                {"widgettype": "Filler"},
                {
                    "widgettype": "Button",
                    "options": {"label": "发布版本", "bgcolor": "#6366f1", "color": "#fff"},
                    "binds": [{"wid": "self", "event": "click", "actiontype": "method", "target": "app.pipeline_editor", "method": "publish"}]
                }
            ]
        },
        {
            "widgettype": "HBox",
            "options": {"gap": "12px", "alignItems": "center"},
            "subwidgets": [
                {"widgettype": "Text", "options": {"text": "选择产线：", "cfontsize": 1, "color": "#e2e8f0"}},
                {
                    "widgettype": "DataSelector",
                    "id": "ds_pipelines",
                    "options": {
                        "data_url": "{{entire_url('/pipeline_core/pipeline_steps/get_pipelines.dspy')}}",
                        "valueField": "id",
                        "textField": "name",
                        "width": "300px",
                        "placeholder": "选择要编辑的产线..."
                    },
                    "binds": [{"wid": "self", "event": "change", "actiontype": "method", "target": "app.pipeline_editor", "method": "load_steps"}]
                },
                {
                    "widgettype": "DataSelector",
                    "id": "ds_step_types",
                    "options": {
                        "data_url": "{{entire_url('/pipeline_core/pipeline_steps/get_step_types.dspy')}}",
                        "valueField": "step_type",
                        "textField": "display_name",
                        "width": "240px",
                        "placeholder": "添加步骤类型..."
                    }
                },
                {
                    "widgettype": "Button",
                    "options": {"label": "+ 添加步骤", "bgcolor": "#4ade80", "color": "#000"},
                    "binds": [{"wid": "self", "event": "click", "actiontype": "method", "target": "app.pipeline_editor", "method": "add_step"}]
                }
            ]
        },
        {
            "widgettype": "DataViewer",
            "id": "dv_steps",
            "options": {
                "data_url": "",
                "width": "100%",
                "columns": ["id", "step_order", "step_name", "step_type"]
            }
        },
        {
            "widgettype": "VBox",
            "id": "steps_canvas",
            "options": {"width": "100%", "gap": "8px", "padding": "0", "minHeight": "300px"},
            "subwidgets": [
                {
                    "widgettype": "Text",
                    "options": {"text": "选择产线后，步骤将在此显示。可以拖拽排序、点击编辑。", "cfontsize": 1, "color": "#64748b", "padding": "40px", "alignItems": "center"}
                }
            ]
        },
        {
            "widgettype": "HBox",
            "options": {"gap": "12px", "justifyContent": "flex-end", "padding": "16px 0 0 0", "borderTop": "1px solid #334155"},
            "subwidgets": [
                {
                    "widgettype": "Button",
                    "options": {"label": "保存排序", "bgcolor": "#3b82f6", "color": "#fff"},
                    "binds": [{"wid": "self", "event": "click", "actiontype": "method", "target": "app.pipeline_editor", "method": "save_order"}]
                }
            ]
        }
    ]
}