@coding-flow/flow-design 0.0.1

package/dist/script-components/components/action/icon.js

@@ -0,0 +1,97 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Col, Popover, Row } from "antd";
+import { Icon } from "@coding-flow/flow-icons";
+import { icons } from "@coding-flow/flow-types";
+const ActionIcon = (props)=>{
+    const { value, onChange } = props;
+    const options = react.useMemo(()=>icons.groups, []);
+    const handleSelectIcon = (iconType)=>{
+        onChange?.(iconType);
+    };
+    const content = ()=>/*#__PURE__*/ jsx("div", {
+            style: {
+                maxHeight: 400,
+                width: 500,
+                overflowY: 'auto',
+                padding: '4px'
+            },
+            children: /*#__PURE__*/ jsx(Row, {
+                gutter: [
+                    12,
+                    12
+                ],
+                children: options.map((group)=>/*#__PURE__*/ jsxs(react.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Col, {
+                                span: 24,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        fontWeight: 500,
+                                        marginBottom: 8,
+                                        color: '#666',
+                                        fontSize: 13
+                                    },
+                                    children: group.label
+                                })
+                            }),
+                            group.icons.map((iconType)=>/*#__PURE__*/ jsx(Col, {
+                                    span: 4,
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        onClick: ()=>handleSelectIcon(iconType),
+                                        style: {
+                                            padding: '12px 8px',
+                                            borderRadius: 6,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            backgroundColor: value === iconType ? '#e6f7ff' : 'transparent',
+                                            border: value === iconType ? '1px solid #1890ff' : '1px solid transparent',
+                                            transition: 'all 0.3s'
+                                        },
+                                        onMouseEnter: (e)=>{
+                                            if (value !== iconType) {
+                                                e.currentTarget.style.backgroundColor = '#f5f5f5';
+                                                e.currentTarget.style.borderColor = '#d9d9d9';
+                                            }
+                                        },
+                                        onMouseLeave: (e)=>{
+                                            if (value !== iconType) {
+                                                e.currentTarget.style.backgroundColor = 'transparent';
+                                                e.currentTarget.style.borderColor = 'transparent';
+                                            }
+                                        },
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            type: iconType,
+                                            style: {
+                                                fontSize: 24
+                                            }
+                                        })
+                                    })
+                                }, iconType))
+                        ]
+                    }, group.label))
+            })
+        });
+    return /*#__PURE__*/ jsx(Popover, {
+        content: content,
+        title: "选择图标",
+        trigger: "click",
+        placement: "bottomLeft",
+        children: /*#__PURE__*/ jsx(Button, {
+            children: value ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        type: value,
+                        style: {
+                            marginRight: 8
+                        }
+                    }),
+                    "更换图标"
+                ]
+            }) : '选择图标'
+        })
+    });
+};
+export { ActionIcon };

package/dist/script-components/components/action/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ActionFormProps } from "../../typings";
+export declare const ActionForm: React.FC<ActionFormProps>;

package/dist/script-components/components/action/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Col, Form, Input, Row } from "antd";
+import { ActionIcon } from "./icon.js";
+import { ActionStyle } from "./style.js";
+import { ActionFactory } from "./components/factory.js";
+const ActionForm = (props)=>{
+    const type = props.form.getFieldValue("type");
+    const FormAction = ActionFactory.getInstance().getActionForm(type);
+    return /*#__PURE__*/ jsxs(Form, {
+        form: props.form,
+        layout: "vertical",
+        onFinish: (values)=>{
+            props.onFinish(values);
+        },
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                name: "id",
+                hidden: true,
+                children: /*#__PURE__*/ jsx(Input, {})
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                gutter: [
+                    8,
+                    8
+                ],
+                children: [
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 12,
+                        children: /*#__PURE__*/ jsx(Form.Item, {
+                            name: "title",
+                            label: "按钮名称",
+                            required: true,
+                            rules: [
+                                {
+                                    required: true,
+                                    message: '按钮名称不能为空'
+                                }
+                            ],
+                            children: /*#__PURE__*/ jsx(Input, {
+                                placeholder: "请输入按钮名称"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 12,
+                        children: /*#__PURE__*/ jsx(Form.Item, {
+                            name: "icon",
+                            label: "按钮图标",
+                            children: /*#__PURE__*/ jsx(ActionIcon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Col, {
+                        span: 24,
+                        children: /*#__PURE__*/ jsx(Form.Item, {
+                            name: "style",
+                            label: "按钮样式",
+                            children: /*#__PURE__*/ jsx(ActionStyle, {})
+                        })
+                    })
+                ]
+            }),
+            FormAction && /*#__PURE__*/ jsx(FormAction, {
+                ...props
+            })
+        ]
+    });
+};
+export { ActionForm };

package/dist/script-components/components/action/script.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FormInstance } from "antd";
+interface CustomScriptViewProps {
+    options: any[];
+    form: FormInstance<any>;
+}
+export declare const CustomScriptView: React.FC<CustomScriptViewProps>;
+export {};

package/dist/script-components/components/action/script.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { GroovyCodeEditor } from "../../../components/groovy-code/index.js";
+import { Col, Form, Select, Space } from "antd";
+import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+const CustomScriptView = (props)=>{
+    const trigger = props.form.getFieldValue("trigger");
+    const [currentTrigger, setCurrentTrigger] = react.useState(trigger);
+    const handleChangeNodeType = (value)=>{
+        const script = props.form.getFieldValue("script");
+        let groovy;
+        if (script) {
+            const returnData = GroovyScriptConvertorUtil.getReturnScript(script).trim();
+            groovy = script.replace(returnData, `'${value}'`);
+            groovy = GroovyScriptConvertorUtil.updateScriptMeta(groovy, `{"trigger":"${value}"}`);
+        } else groovy = `// @CUSTOM_SCRIPT 自定义脚本，返回的数据为动作类型
+            // @SCRIPT_META {"trigger":"${value}"}
+            def run(request){
+                return '${value}';
+            }
+            `;
+        props.form.setFieldValue("script", GroovyScriptConvertorUtil.formatScript(groovy));
+        setCurrentTrigger(value);
+    };
+    return /*#__PURE__*/ jsx(Col, {
+        span: 24,
+        children: /*#__PURE__*/ jsx(Form.Item, {
+            name: "script",
+            label: /*#__PURE__*/ jsxs(Space, {
+                children: [
+                    "自定义脚本",
+                    /*#__PURE__*/ jsxs(Space.Compact, {
+                        size: "small",
+                        children: [
+                            /*#__PURE__*/ jsx(Space.Addon, {
+                                children: "触发动作："
+                            }),
+                            /*#__PURE__*/ jsx(Select, {
+                                style: {
+                                    width: '100px'
+                                },
+                                value: currentTrigger,
+                                placeholder: "请选择触发动作类型",
+                                options: props.options,
+                                onChange: handleChangeNodeType
+                            })
+                        ]
+                    })
+                ]
+            }),
+            required: true,
+            help: "请先设置触发动作类型",
+            rules: [
+                {
+                    required: true,
+                    message: '自定义脚本不能为空'
+                }
+            ],
+            children: /*#__PURE__*/ jsx(GroovyCodeEditor, {
+                placeholder: "请输入自定义脚本",
+                options: {
+                    minHeight: 200
+                }
+            })
+        })
+    });
+};
+export { CustomScriptView };

package/dist/script-components/components/action/style.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ActionStyleProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const ActionStyle: React.FC<ActionStyleProps>;
+export {};

package/dist/script-components/components/action/style.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Col, ColorPicker, Input, Row, Space } from "antd";
+import react from "react";
+const ActionStyle = (props)=>{
+    const [style, setStyle] = react.useState(props.value ? JSON.parse(props.value) : {});
+    react.useEffect(()=>{
+        props.onChange && props.onChange(JSON.stringify(style));
+    }, [
+        style
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs(Row, {
+            gutter: [
+                8,
+                8
+            ],
+            children: [
+                /*#__PURE__*/ jsx(Col, {
+                    span: 12,
+                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                        children: [
+                            /*#__PURE__*/ jsx(Space.Addon, {
+                                style: {
+                                    width: '150px'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    children: "背景颜色"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ColorPicker, {
+                                value: style.backgroundColor,
+                                onChange: (value)=>{
+                                    if (value) setStyle((prevState)=>({
+                                            ...prevState,
+                                            backgroundColor: value.toHex()
+                                        }));
+                                }
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Col, {
+                    span: 12,
+                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                        children: [
+                            /*#__PURE__*/ jsx(Space.Addon, {
+                                style: {
+                                    width: '150px'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    children: "边框颜色"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ColorPicker, {
+                                value: style.borderColor,
+                                onChange: (value)=>{
+                                    if (value) setStyle((prevState)=>({
+                                            ...prevState,
+                                            borderColor: value.toHex()
+                                        }));
+                                }
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Col, {
+                    span: 12,
+                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                        children: [
+                            /*#__PURE__*/ jsx(Space.Addon, {
+                                style: {
+                                    width: '150px'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    children: "边框圆角"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                type: "number",
+                                style: {
+                                    width: '150px'
+                                },
+                                placeholder: "请输入边框圆角",
+                                value: style.borderRadius,
+                                onChange: (event)=>{
+                                    setStyle((prevState)=>({
+                                            ...prevState,
+                                            borderRadius: event.target.value
+                                        }));
+                                }
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Col, {
+                    span: 12,
+                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                        children: [
+                            /*#__PURE__*/ jsx(Space.Addon, {
+                                style: {
+                                    width: '150px'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    children: "边框大小"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                style: {
+                                    width: '150px'
+                                },
+                                type: "number",
+                                placeholder: "请输入边框大小",
+                                value: style.borderSize,
+                                onChange: (event)=>{
+                                    setStyle((prevState)=>({
+                                            ...prevState,
+                                            borderSize: event.target.value
+                                        }));
+                                }
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+export { ActionStyle };

package/dist/script-components/components/advanced-script-editor.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { GroovyScriptContent } from "./groovy-script-modal";
+import { GroovyVariableMapping, ScriptType } from "../typings";
+interface ScriptEditorProps {
+    /** 脚本类型 */
+    type: ScriptType;
+    /** 当前脚本内容 */
+    script: string;
+    /** 变量映射列表 */
+    variables: GroovyVariableMapping[];
+    /** 脚本变更回调 */
+    onChange: (script: string) => void;
+    /** 是否只读 */
+    readonly?: boolean;
+}
+/**
+ * 高级脚本编辑器组件
+ * 支持自由编辑 Groovy 脚本
+ */
+export declare const ScriptEditor: React.FC<ScriptEditorProps>;
+interface AdvancedScriptEditorProps extends GroovyScriptContent {
+    resetScript(): string;
+}
+export declare const AdvancedScriptEditor: React.FC<AdvancedScriptEditorProps>;
+export {};

package/dist/script-components/components/advanced-script-editor.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Space } from "antd";
+import "react";
+import { MenuUnfoldOutlined, ReloadOutlined } from "@ant-design/icons";
+import { GroovyCodeEditor } from "../../components/groovy-code/index.js";
+import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+const hintStyle = {
+    fontSize: 12,
+    color: 'rgba(0, 0, 0, 0.25)'
+};
+const ScriptEditor = (props)=>{
+    const { script, onChange, readonly = false, variables } = props;
+    const handleChange = (value)=>{
+        if (!readonly) onChange(value);
+    };
+    return /*#__PURE__*/ jsx(GroovyCodeEditor, {
+        value: script,
+        readonly: readonly,
+        onChange: handleChange,
+        placeholder: "请输入 Groovy 脚本...",
+        theme: 'dark',
+        options: {
+            fontSize: 14,
+            minHeight: 300,
+            maxHeight: 300
+        }
+    });
+};
+const AdvancedScriptEditor = (props)=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(ScriptEditor, {
+                type: props.type,
+                script: props.script,
+                variables: props.variables || [],
+                onChange: props.onChange
+            }),
+            /*#__PURE__*/ jsxs(Space, {
+                style: {
+                    marginTop: 8
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(MenuUnfoldOutlined, {}),
+                        onClick: ()=>{
+                            props.onChange(GroovyScriptConvertorUtil.formatScript(props.script));
+                        },
+                        children: "格式化代码"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(ReloadOutlined, {}),
+                        danger: true,
+                        onClick: ()=>{
+                            props.onChange(props.resetScript());
+                        },
+                        children: "重置脚本"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    marginTop: 8
+                },
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        style: hintStyle,
+                        children: '// @CUSTOM_SCRIPT 是自定义脚本的标识'
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        style: hintStyle,
+                        children: '// @SCRIPT_TITLE 是脚本的展示内容'
+                    })
+                ]
+            })
+        ]
+    });
+export { AdvancedScriptEditor, ScriptEditor };

package/dist/script-components/components/condition/components/condition-group/condition.d.ts

@@ -0,0 +1,9 @@
+import { Condition } from "../../typings";
+import React from "react";
+interface ConditionItemViewProps {
+    data?: Condition;
+    id: string;
+    location: 'left' | 'right';
+}
+export declare const ConditionItemView: React.FC<ConditionItemViewProps>;
+export {};

package/dist/script-components/components/condition/components/condition-group/condition.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input, Select, Space } from "antd";
+import react from "react";
+import { useConditionContext } from "../../hooks/use-condition-context.js";
+const VariableSelect = (props)=>{
+    const { state } = useConditionContext();
+    const variables = react.useMemo(()=>{
+        const groups = new Map();
+        for (const mapping of state.variables){
+            const existing = groups.get(mapping.tag) || [];
+            existing.push(mapping);
+            groups.set(mapping.tag, existing);
+        }
+        const options = [];
+        for (const group of Array.from(groups.keys())){
+            const children = groups.get(group) || [];
+            options.push({
+                label: group,
+                options: children
+            });
+        }
+        return options;
+    }, [
+        state.variables
+    ]);
+    const handleChange = (value, option)=>{
+        props.onChange({
+            label: option.label,
+            value: option.value,
+            dataType: option.type,
+            type: 'variable'
+        });
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        showSearch: {
+            filterOption: (value, option)=>{
+                if (option.value) return option.value.includes(value) || option.label.includes(value);
+                return false;
+            }
+        },
+        value: props.value,
+        placeholder: "请选择参数",
+        style: {
+            width: "200px"
+        },
+        options: variables,
+        onChange: handleChange
+    });
+};
+const TypeInput = (props)=>{
+    const handleChange = (value)=>{
+        props.onChange({
+            label: value,
+            value: value,
+            dataType: 'STRING',
+            type: 'input'
+        });
+    };
+    return /*#__PURE__*/ jsx(Input, {
+        style: {
+            width: "200px"
+        },
+        value: props.value,
+        placeholder: "请输入参数",
+        onChange: (event)=>{
+            handleChange(event.target.value);
+        }
+    });
+};
+const ConditionItemView = (props)=>{
+    const [type, setType] = react.useState(props.data?.type || 'variable');
+    const { context } = useConditionContext();
+    const presenter = context.getPresenter().getConditionGroupPresenter();
+    const handleUpdate = (value)=>{
+        const latest = {
+            ...props.data,
+            ...value
+        };
+        presenter.updateCondition(props.id, props.location, latest);
+    };
+    react.useEffect(()=>{
+        if (props.data) setType(props.data.type);
+    }, [
+        props.data
+    ]);
+    return /*#__PURE__*/ jsxs(Space.Compact, {
+        children: [
+            /*#__PURE__*/ jsx(Select, {
+                style: {
+                    width: "100px"
+                },
+                value: type,
+                options: [
+                    {
+                        label: '选择变量',
+                        value: 'variable'
+                    },
+                    {
+                        label: '输入参数',
+                        value: 'input'
+                    }
+                ],
+                onChange: (value)=>{
+                    setType(value);
+                }
+            }),
+            "variable" === type && /*#__PURE__*/ jsx(VariableSelect, {
+                value: props.data?.value || '',
+                onChange: (value)=>{
+                    handleUpdate(value);
+                }
+            }),
+            "input" === type && /*#__PURE__*/ jsx(TypeInput, {
+                value: props.data?.value || '',
+                onChange: (value)=>{
+                    handleUpdate(value);
+                }
+            })
+        ]
+    });
+};
+export { ConditionItemView };

package/dist/script-components/components/condition/components/condition-group/group.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @constructor
+ */
+export declare const Group: () => import("react/jsx-runtime").JSX.Element;