@coding-flow/flow-design 0.0.46 → 0.0.48

package/dist/api/node-view.d.ts

@@ -0,0 +1,2 @@
+export declare const save: (body: any) => Promise<import("@coding-flow/flow-core").Response>;
+export declare const getScript: (key: string) => Promise<import("@coding-flow/flow-core").Response>;

package/dist/api/node-view.js

@@ -0,0 +1,6 @@
+import { httpClient } from "./index.js";
+const save = (body)=>httpClient.post('/api/cmd/node-view/save', body);
+const getScript = (key)=>httpClient.get('/api/cmd/node-view/getScript', {
+        key
+    });
+export { getScript, save };

package/dist/api/workflow.d.ts

@@ -9,6 +9,7 @@ export declare const deleteVersion: (id: any) => Promise<import("@coding-flow/fl
 export declare const changeState: (id: string) => Promise<import("@coding-flow/flow-core").Response>;
 export declare const create: () => Promise<import("@coding-flow/flow-core").Response>;
 export declare const createNode: (type: string) => Promise<import("@coding-flow/flow-core").Response>;
+export declare const createCustomAction: () => Promise<import("@coding-flow/flow-core").Response>;
 export declare const save: (body: any) => Promise<import("@coding-flow/flow-core").Response>;
 export declare const load: (id: string) => Promise<import("@coding-flow/flow-core").Response>;
 export declare const exportWorkflow: (id: string) => Promise<void>;

package/dist/api/workflow.js

@@ -24,6 +24,7 @@ const create = ()=>httpClient.post('/api/cmd/workflow/create', {});
 const createNode = (type)=>httpClient.post('/api/cmd/workflow/create-node', {
         type
     });
+const createCustomAction = ()=>httpClient.post('/api/cmd/workflow/create-custom-action', {});
 const save = (body)=>httpClient.post('/api/cmd/workflow/save', body);
 const load = (id)=>httpClient.get('/api/cmd/workflow/load', {
         id
@@ -33,4 +34,4 @@ const exportWorkflow = (id)=>{
     return httpClient.download('/api/cmd/workflow/export?id=' + id, filename);
 };
 const importWorkflow = (file)=>httpClient.post('/api/cmd/workflow/import', file);
-export { changeState, changeVersion, create, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions };
+export { changeState, changeVersion, create, createCustomAction, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions };

package/dist/components/design-editor/node-components/action/index.js

@@ -7,12 +7,11 @@ import { PlusOutlined } from "@ant-design/icons";
 import { actionOptions } from "@coding-flow/flow-types";
 import { ActionConfigModal } from "../../../../script-components/modal/action-config-modal.js";
 import { FlowActionListPresenter } from "./presenter.js";
-import { SCRIPT_DEFAULT_CUSTOM } from "../../../../script-components/default-script.js";
+import { createCustomAction } from "../../../../api/workflow.js";
 const ActionTable = (props)=>{
     const { node } = useNodeRenderContext();
-    const actions = node.getNodeRegistry()?.meta.actions || [];
     const presenter = new FlowActionListPresenter(props.value, props.onChange);
-    const datasource = presenter.getDatasource(actions);
+    const datasource = presenter.getDatasource();
     const [visible, setVisible] = react.useState(false);
     const [form] = Form.useForm();
     const columns = react.useCallback(()=>[
@@ -63,6 +62,18 @@ const ActionTable = (props)=>{
                                 },
                                 children: "编辑"
                             }),
+                            /*#__PURE__*/ jsx("a", {
+                                onClick: ()=>{
+                                    presenter.sort(record.id, -1);
+                                },
+                                children: "↑"
+                            }),
+                            /*#__PURE__*/ jsx("a", {
+                                onClick: ()=>{
+                                    presenter.sort(record.id, 1);
+                                },
+                                children: "↓"
+                            }),
                             'CUSTOM' === record.type && /*#__PURE__*/ jsx(Popconfirm, {
                                 title: "确认删除吗？",
                                 onConfirm: ()=>{
@@ -87,11 +98,13 @@ const ActionTable = (props)=>{
                             icon: /*#__PURE__*/ jsx(PlusOutlined, {}),
                             onClick: ()=>{
                                 form.resetFields();
-                                form.setFieldsValue({
-                                    script: SCRIPT_DEFAULT_CUSTOM,
-                                    type: "CUSTOM"
+                                createCustomAction().then((res)=>{
+                                    if (res.success) {
+                                        const data = res.data;
+                                        form.setFieldsValue(data);
+                                        setVisible(true);
+                                    }
                                 });
-                                setVisible(true);
                             },
                             children: "自定义按钮"
                         })

package/dist/components/design-editor/node-components/action/presenter.d.ts

@@ -1,4 +1,4 @@
-import { ActionType, FlowAction } from "@coding-flow/flow-types";
+import { FlowAction } from "@coding-flow/flow-types";
 import { FlowActionManager } from "./manager";
 export declare class FlowActionListPresenter {
     private readonly data;
@@ -7,7 +7,8 @@ export declare class FlowActionListPresenter {
     constructor(data: FlowAction[], onChange: (data: FlowAction[]) => void);
     getFlowActionManager(): FlowActionManager;
     enable(id: any, value: boolean): void;
+    sort(id: string, order: number): void;
     delete(id: string): void;
     update(action: any): void;
-    getDatasource(actions: ActionType[]): any[];
+    getDatasource(): any[];
 }

package/dist/components/design-editor/node-components/action/presenter.js

@@ -1,6 +1,3 @@
-import { actionOptions } from "@coding-flow/flow-types";
-import { nanoid } from "nanoid";
-import { IdUtils } from "../../../../utils/index.js";
 import { FlowActionManager } from "./manager.js";
 class FlowActionListPresenter {
     data;
@@ -24,13 +21,30 @@ class FlowActionListPresenter {
         });
         this.onChange(data);
     }
+    sort(id, order) {
+        const index = this.data.findIndex((item)=>item.id === id);
+        if (-1 === index) return;
+        const targetIndex = index + order;
+        if (targetIndex < 0 || targetIndex >= this.data.length) return;
+        const data = [
+            ...this.data
+        ];
+        [data[index], data[targetIndex]] = [
+            data[targetIndex],
+            data[index]
+        ];
+        this.onChange(data);
+    }
     delete(id) {
         const data = this.data.filter((item)=>item.id !== id);
         this.onChange(data);
     }
     update(action) {
         const actionId = action.id;
-        if (actionId) {
+        const actionIdList = this.data.map((action)=>action.id);
+        console.log('actionIdList:', actionIdList);
+        console.log('action:', action);
+        if (actionIdList.indexOf(actionId) > 0) {
             const data = this.data.map((item)=>{
                 if (item.id === actionId) return {
                     ...item,
@@ -43,20 +57,15 @@ class FlowActionListPresenter {
                 return item;
             });
             this.onChange(data);
-        } else {
-            const custom = {
+        } else this.onChange([
+            ...this.data,
+            {
                 ...action,
-                type: 'CUSTOM',
-                enable: true,
-                id: IdUtils.generateId()
-            };
-            this.onChange([
-                ...this.data,
-                custom
-            ]);
-        }
+                type: "CUSTOM"
+            }
+        ]);
     }
-    getDatasource(actions) {
+    getDatasource() {
         if (this.data) return this.data.map((item)=>{
             const enable = item.enable;
             return {
@@ -64,17 +73,7 @@ class FlowActionListPresenter {
                 enable: void 0 === enable ? true : enable
             };
         });
-        const list = actions.map((type)=>{
-            const title = actionOptions.filter((value)=>value.value === type)[0]?.label || '未命名操作';
-            return {
-                id: nanoid(),
-                enable: true,
-                title: title,
-                type: type
-            };
-        });
-        this.onChange(list);
-        return list;
+        return [];
     }
 }
 export { FlowActionListPresenter };

package/dist/components/design-editor/node-components/view/index.js

@@ -1,30 +1,62 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import "react";
-import { Form, Input } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Form, Input, Space } from "antd";
 import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { BugOutlined } from "@ant-design/icons";
+import { ViewCodeDrawer } from "../../../../script-components/components/view-code-drawer.js";
 const View = ()=>{
     const [form] = Form.useForm();
-    return /*#__PURE__*/ jsx(Form, {
+    const [visible, setVisible] = react.useState(false);
+    return /*#__PURE__*/ jsxs(Form, {
         form: form,
         style: {
             width: '100%'
         },
         layout: "vertical",
-        children: /*#__PURE__*/ jsx(Form.Item, {
-            label: "视图名称",
-            name: [
-                "view"
-            ],
-            children: /*#__PURE__*/ jsx(Field, {
-                name: "view",
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "视图名称",
+                name: [
+                    "view"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "view",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                style: {
+                                    width: '100%'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(Input, {
+                                        value: value,
+                                        onChange: onChange
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        icon: /*#__PURE__*/ jsx(BugOutlined, {}),
+                                        onClick: ()=>{
+                                            setVisible(true);
+                                        },
+                                        style: {
+                                            borderRadius: '0 6px 6px 0'
+                                        },
+                                        children: "代码"
+                                    })
+                                ]
+                            })
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsx(Field, {
+                name: "code",
                 render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
-                        children: /*#__PURE__*/ jsx(Input, {
-                            value: value,
-                            onChange: onChange
+                        children: /*#__PURE__*/ jsx(ViewCodeDrawer, {
+                            code: value,
+                            visible: visible,
+                            onClose: ()=>setVisible(false)
                         })
                     })
             })
-        })
+        ]
     });
 };
 export { View };

package/dist/components/design-panel/manager/form.d.ts

@@ -18,6 +18,7 @@ export declare class WorkflowFormManager {
         fields: FormField[];
     };
     updateFieldValue(code: string, values: any): FlowForm;
+    sortField(formCode: string, fieldCode: string, order: number): FlowForm;
     removeField(formCode: string, fieldCode: string): {
         fields: FormField[];
         name: string;

package/dist/components/design-panel/manager/form.js

@@ -13,6 +13,7 @@ class WorkflowFormManager {
     getFormFields(code) {
         let result = [];
         for (const subForm of this.formList)if (subForm.code == code) result = subForm.fields || [];
+        console.log(result);
         return result;
     }
     removeSubForm(code) {
@@ -62,6 +63,33 @@ class WorkflowFormManager {
             })
         };
     }
+    sortField(formCode, fieldCode, order) {
+        const currentFields = this.getFormFields(formCode) || [];
+        const fields = [
+            ...currentFields
+        ];
+        const index = fields.findIndex((item)=>item.code === fieldCode);
+        if (-1 === index) return this.form;
+        const targetIndex = index + order;
+        if (targetIndex < 0 || targetIndex >= fields.length) return this.form;
+        const [field] = fields.splice(index, 1);
+        fields.splice(targetIndex, 0, field);
+        const mainCode = this.form.code;
+        if (formCode === mainCode) return {
+            ...this.form,
+            fields
+        };
+        return {
+            ...this.form,
+            subForms: (this.form.subForms || []).map((item)=>{
+                if (item.code === formCode) return {
+                    ...item,
+                    fields
+                };
+                return item;
+            })
+        };
+    }
     removeField(formCode, fieldCode) {
         const currentFields = this.getFormFields(formCode) || [];
         const fields = [

package/dist/components/design-panel/manager/node.js

@@ -14,6 +14,7 @@ class NodeConvertorManager {
                 order: node.order,
                 actions: node.actions,
                 script: node.script,
+                code: node.code,
                 view: node.view,
                 display: node.display,
                 ...this.toStrategyRender(node)
@@ -33,6 +34,7 @@ class NodeConvertorManager {
             name: data?.title,
             order: data?.order ? data?.order + '' : '0',
             view: data?.view,
+            code: data?.code,
             actions: data?.actions || [],
             strategies: this.toStrategyData(data),
             script: data?.script,

package/dist/components/design-panel/presenters/index.d.ts

@@ -19,6 +19,7 @@ export declare class Presenter {
     updateViewPanelTab(tab: TabPanelType): void;
     private updateWorkflowForm;
     updateWorkflow(data: any): void;
+    sort(formCode: string, fieldCode: string, order: number): void;
     removeWorkflowFormField(formCode: string, fieldCode: string): void;
     removeWorkflowSubForm(code: string): void;
     addWorkflowSubForm(values: any): void;

package/dist/components/design-panel/presenters/index.js

@@ -74,6 +74,12 @@ class Presenter {
                 workflow: this.mergeWorkflow(prevState.workflow, data)
             }));
     }
+    sort(formCode, fieldCode, order) {
+        const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
+        const form = workflowFormManager.sortField(formCode, fieldCode, order);
+        console.log('sort:', form);
+        this.updateWorkflowForm(form);
+    }
     removeWorkflowFormField(formCode, fieldCode) {
         const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
         const form = workflowFormManager.removeField(formCode, fieldCode);

package/dist/components/design-panel/tabs/form/table.js

@@ -82,6 +82,18 @@ const FormTable = (props)=>{
                             },
                             children: "编辑"
                         }),
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                presenter.sort(props.code, record.code, -1);
+                            },
+                            children: "↑"
+                        }),
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                presenter.sort(props.code, record.code, 1);
+                            },
+                            children: "↓"
+                        }),
                         /*#__PURE__*/ jsx(Popconfirm, {
                             title: "确认要删除该字段吗？",
                             onConfirm: ()=>{

package/dist/components/design-panel/types.d.ts

@@ -26,6 +26,7 @@ export interface FlowNode {
     strategies: any[];
     blocks?: FlowNode[];
     script?: string;
+    code?: string;
     view?: string;
     display?: boolean;
 }

package/dist/components/groovy-code/index.js

@@ -17,6 +17,7 @@ const GroovyCodeEditor = (props)=>{
     ]);
     return /*#__PURE__*/ jsx(ScriptCodeEditor, {
         title: title,
+        language: "groovy",
         toolbar: props.toolbar,
         value: props.value,
         onChange: props.onChange,

package/dist/components/js-code/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ToolbarItem } from '@coding-script/script-engine';
+interface JavaScriptCodeEditorProps {
+    title?: string;
+    value?: string;
+    toolbar?: ToolbarItem[];
+    scriptKey?: string;
+    readonly?: boolean;
+    onChange?: (value: string) => void;
+    onCompile?: (code: string) => void;
+    resetScript?: () => string;
+    placeholder?: string;
+    theme?: 'dark' | 'light';
+    options?: {
+        fontSize?: number;
+        minHeight?: number;
+        maxHeight?: number;
+    };
+}
+export declare const JavaScriptCodeEditor: React.FC<JavaScriptCodeEditorProps>;
+export {};

package/dist/components/js-code/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { ScriptCodeEditor } from "@coding-script/script-engine";
+const JavaScriptCodeEditor = (props)=>{
+    const title = props.title || "javscript脚本编辑器";
+    return /*#__PURE__*/ jsx(ScriptCodeEditor, {
+        title: title,
+        language: "javascript",
+        toolbar: props.toolbar,
+        value: props.value,
+        onChange: props.onChange,
+        placeholder: props.placeholder,
+        readonly: props.readonly,
+        options: props.options,
+        defaultTheme: props.theme || 'light',
+        enableCompile: false,
+        enableFormat: false,
+        enableFullscreen: true,
+        enableThemeToggle: true,
+        onCompile: (code)=>{
+            props.onCompile?.(code);
+        }
+    });
+};
+export { JavaScriptCodeEditor };

package/dist/plugins/action-custom-view-type.d.ts

@@ -1,11 +1,10 @@
-import { ActionSelectOption } from "../script-components/typings";
 import React from "react";
 import { DesignViewPluginAction } from "./design-view-plugin-action";
 export declare const VIEW_KEY = "ActionCustomViewPlugin";
 export interface ActionCustomViewPlugin {
+    scriptKey: string;
     value?: string;
     onChange?: (value: string) => void;
-    options: ActionSelectOption[];
     /** 动作控制 **/
     action?: React.Ref<DesignViewPluginAction>;
 }

package/dist/plugins/view/action-custom-view.js

@@ -1,64 +1,60 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { ActionCustomScriptUtils } from "../../script-components/services/action-custom.js";
-import { GroovyCodeEditor } from "../../components/groovy-code/index.js";
-import { Select } from "antd";
+import { Button, Input, Space } from "antd";
 import { VIEW_KEY } from "../action-custom-view-type.js";
 import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { GroovyScriptModal } from "../../script-components/components/groovy-script-modal.js";
+import { AdvancedScriptEditor } from "../../script-components/components/advanced-script-editor.js";
+import { ScriptType } from "../../script-components/typings/index.js";
+import { EditOutlined } from "@ant-design/icons";
+import { GroovyScriptConvertorUtil } from "@coding-script/script-engine";
+import { SCRIPT_DEFAULT_CUSTOM } from "../../script-components/default-script.js";
 const ActionCustomView = (props)=>{
     const ActionCustomViewComponent = ViewBindPlugin.getInstance().get(VIEW_KEY);
+    const [visible, setVisible] = react.useState(false);
     if (ActionCustomViewComponent) return /*#__PURE__*/ jsx(ActionCustomViewComponent, {
         ...props
     });
-    const trigger = react.useMemo(()=>{
-        if (props.value) return ActionCustomScriptUtils.getTrigger(props.value);
-    }, [
-        props.value
-    ]);
-    const handleChangeNodeType = (value)=>{
-        const script = props.value;
-        if (script) {
-            const groovy = ActionCustomScriptUtils.update(value, script);
-            props.onChange?.(groovy);
-        }
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        style: {
-            marginTop: "8px",
-            padding: "8px"
-        },
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                style: {
-                    display: "flex",
-                    justifyContent: "start",
-                    alignItems: "center",
-                    marginBottom: "8px"
-                },
+            /*#__PURE__*/ jsxs(Space.Compact, {
                 children: [
-                    /*#__PURE__*/ jsx("span", {
-                        children: "触发动作:"
+                    /*#__PURE__*/ jsx(Space.Addon, {
+                        style: {
+                            width: '150px'
+                        },
+                        children: "触发动作"
                     }),
-                    /*#__PURE__*/ jsx(Select, {
-                        size: "small",
+                    /*#__PURE__*/ jsx(Input, {
                         style: {
-                            width: '200px',
-                            marginLeft: "10px"
+                            width: '150px'
                         },
-                        value: trigger,
-                        placeholder: "请选择触发动作类型",
-                        onChange: handleChangeNodeType,
-                        options: props.options
+                        value: GroovyScriptConvertorUtil.getScriptTitle(props.value || ''),
+                        readOnly: true
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                        onClick: ()=>{
+                            setVisible(true);
+                        },
+                        children: "编辑"
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(GroovyCodeEditor, {
-                value: props.value,
-                onChange: props.onChange,
-                placeholder: "请输入自定义脚本",
-                options: {
-                    minHeight: 200
-                }
+            /*#__PURE__*/ jsx(GroovyScriptModal, {
+                type: ScriptType.CUSTOM_ACTION,
+                variables: [],
+                open: visible,
+                onCancel: ()=>{
+                    setVisible(false);
+                },
+                resetScript: ()=>SCRIPT_DEFAULT_CUSTOM,
+                scriptKey: props.scriptKey,
+                script: props.value || "",
+                onConfirm: (script)=>{
+                    props.onChange?.(script);
+                },
+                content: AdvancedScriptEditor
             })
         ]
     });

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

@@ -1,27 +1,88 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { Col, Form, Row } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Col, Form, Input, Radio, Row } from "antd";
 import { ActionCustomView } from "../../../../plugins/view/action-custom-view.js";
+import { GroovyScriptLoader } from "../../groovy-script-loader.js";
+const ScriptEditorContent = (props)=>/*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(ActionCustomView, {
+            scriptKey: props.scriptKey,
+            value: props.value
+        })
+    });
 const CustomActionForm = (props)=>{
-    const actionOptionTypes = props.manager.getCurrentNodeActionOptions();
+    const [customType, setCustomType] = react.useState("0");
+    react.useEffect(()=>{
+        const customType = props.form.getFieldValue('customType');
+        if (customType) return void setCustomType(customType);
+        const triggerFrontEvent = props.form.getFieldValue('triggerFrontEvent');
+        if (triggerFrontEvent) {
+            setCustomType("-1");
+            props.form.setFieldValue('customType', "-1");
+            return;
+        }
+        const script = props.form.getFieldValue("script");
+        if (script) {
+            setCustomType("1");
+            props.form.setFieldValue('customType', "1");
+            return;
+        }
+        setCustomType("0");
+    }, [
+        props,
+        customType
+    ]);
     return /*#__PURE__*/ jsx(Row, {
-        children: /*#__PURE__*/ jsx(Col, {
+        children: /*#__PURE__*/ jsxs(Col, {
             span: 24,
-            children: /*#__PURE__*/ jsx(Form.Item, {
-                name: "script",
-                label: "自定义脚本",
-                required: true,
-                help: "请先设置触发动作类型",
-                rules: [
-                    {
-                        required: true,
-                        message: '自定义脚本不能为空'
-                    }
-                ],
-                children: /*#__PURE__*/ jsx(ActionCustomView, {
-                    options: actionOptionTypes
+            children: [
+                /*#__PURE__*/ jsx(Form.Item, {
+                    name: "customType",
+                    label: "脚本类型",
+                    children: /*#__PURE__*/ jsxs(Radio.Group, {
+                        value: customType,
+                        onChange: (e)=>{
+                            setCustomType(e.target.value);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Radio, {
+                                value: "-1",
+                                children: "前端模式"
+                            }),
+                            /*#__PURE__*/ jsx(Radio, {
+                                value: "1",
+                                children: "后端模式"
+                            })
+                        ]
+                    })
+                }),
+                "-1" === customType && /*#__PURE__*/ jsx(Form.Item, {
+                    name: "triggerFrontEvent",
+                    label: "前端触发事件",
+                    required: true,
+                    rules: [
+                        {
+                            required: true,
+                            message: '前端触发事件不能为空'
+                        }
+                    ],
+                    children: /*#__PURE__*/ jsx(Input, {
+                        placeholder: "请输入前端触发事件"
+                    })
+                }),
+                "1" === customType && /*#__PURE__*/ jsx(Form.Item, {
+                    name: "script",
+                    label: "后端执行脚本",
+                    rules: [
+                        {
+                            required: true,
+                            message: '自定义脚本不能为空'
+                        }
+                    ],
+                    children: /*#__PURE__*/ jsx(GroovyScriptLoader, {
+                        content: ScriptEditorContent
+                    })
                 })
-            })
+            ]
         })
     });
 };

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

@@ -19,6 +19,16 @@ const ActionForm = (props)=>{
                 hidden: true,
                 children: /*#__PURE__*/ jsx(Input, {})
             }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                name: "type",
+                hidden: true,
+                children: /*#__PURE__*/ jsx(Input, {})
+            }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                name: "enable",
+                hidden: true,
+                children: /*#__PURE__*/ jsx(Input, {})
+            }),
             /*#__PURE__*/ jsxs(Row, {
                 gutter: [
                     8,
@@ -53,7 +63,7 @@ const ActionForm = (props)=>{
                     /*#__PURE__*/ jsx(Col, {
                         span: 24,
                         children: /*#__PURE__*/ jsx(Form.Item, {
-                            name: "style",
+                            name: "display",
                             label: "按钮样式",
                             children: /*#__PURE__*/ jsx(ActionStyle, {})
                         })

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

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

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

@@ -1,10 +1,67 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Col, ColorPicker, Input, Row, Space } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Col, ColorPicker, Input, Row, Space } from "antd";
 import react from "react";
+import { GroovyScriptLoader } from "../groovy-script-loader.js";
+import { AdvancedScriptEditor } from "../advanced-script-editor.js";
+import { ScriptType } from "../../typings/index.js";
+import { GroovyScriptConvertorUtil } from "@coding-script/script-engine";
+import { GroovyScriptModal } from "../groovy-script-modal.js";
+import { EditOutlined } from "@ant-design/icons";
+const ActionScriptContent = (props)=>/*#__PURE__*/ jsx(AdvancedScriptEditor, {
+        ...props
+    });
+const ActionScript = (props)=>{
+    const [visible, setVisible] = react.useState(false);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Space.Compact, {
+                children: [
+                    /*#__PURE__*/ jsx(Space.Addon, {
+                        style: {
+                            width: '150px'
+                        },
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: "显示条件"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        readOnly: true,
+                        style: {
+                            width: '150px'
+                        },
+                        value: GroovyScriptConvertorUtil.getScriptTitle(props.value || '')
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                        onClick: ()=>{
+                            setVisible(true);
+                        },
+                        children: "修改"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(GroovyScriptModal, {
+                type: ScriptType.ACTION_DISPLAY,
+                variables: [],
+                scriptKey: props.scriptKey,
+                script: props.value || '',
+                open: visible,
+                onCancel: ()=>{
+                    setVisible(false);
+                },
+                onConfirm: (value)=>{
+                    props.onChange?.(value);
+                    setVisible(false);
+                },
+                content: ActionScriptContent
+            })
+        ]
+    });
+};
 const ActionStyle = (props)=>{
-    const [style, setStyle] = react.useState(props.value ? JSON.parse(props.value) : {});
+    const [style, setStyle] = react.useState(props.value || {});
     react.useEffect(()=>{
-        props.onChange && props.onChange(JSON.stringify(style));
+        props.onChange && props.onChange(style);
     }, [
         style
     ]);
@@ -28,7 +85,7 @@ const ActionStyle = (props)=>{
                                 })
                             }),
                             /*#__PURE__*/ jsx(ColorPicker, {
-                                value: style.backgroundColor,
+                                value: style.backgroundColor || '',
                                 onChange: (value)=>{
                                     if (value) setStyle((prevState)=>({
                                             ...prevState,
@@ -52,7 +109,7 @@ const ActionStyle = (props)=>{
                                 })
                             }),
                             /*#__PURE__*/ jsx(ColorPicker, {
-                                value: style.borderColor,
+                                value: style.borderColor || '',
                                 onChange: (value)=>{
                                     if (value) setStyle((prevState)=>({
                                             ...prevState,
@@ -120,6 +177,13 @@ const ActionStyle = (props)=>{
                             })
                         ]
                     })
+                }),
+                /*#__PURE__*/ jsx(Col, {
+                    span: 24,
+                    children: /*#__PURE__*/ jsx(GroovyScriptLoader, {
+                        content: ActionScript,
+                        value: style.script
+                    })
                 })
             ]
         })

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

@@ -9,6 +9,7 @@ const AdvancedScriptEditor = (props)=>{
         if (!readonly) onChange(value);
     };
     return /*#__PURE__*/ jsx(GroovyCodeEditor, {
+        title: props.title,
         value: script,
         scriptKey: props.scriptKey,
         readonly: readonly,

package/dist/script-components/components/groovy-script-loader.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 export interface GroovyScriptLoaderProps {
     value?: string;
     onChange?: (value: string) => void;
-    content: React.ComponentType<GroovyScriptContent>;
+    content: React.ComponentType<GroovyScriptLoaderContent>;
 }
-export interface GroovyScriptContent {
+export interface GroovyScriptLoaderContent {
     scriptKey: string;
     value?: string;
     onChange?: (value: string) => void;

package/dist/script-components/components/groovy-script-modal.d.ts

@@ -24,6 +24,8 @@ export interface GroovyScriptModalProps {
     content: React.ComponentType<GroovyScriptContent>;
 }
 export interface GroovyScriptContent {
+    /** 脚本标题 **/
+    title?: string;
     /** 脚本类型 */
     type: ScriptType;
     /** 当前脚本 */

package/dist/script-components/components/view-code-drawer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ViewCodeDrawerProps {
+    visible: boolean;
+    onClose: () => void;
+    code: string;
+}
+export declare const ViewCodeDrawer: React.FC<ViewCodeDrawerProps>;
+export {};

package/dist/script-components/components/view-code-drawer.js

@@ -0,0 +1,62 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { getScript, save } from "../../api/node-view.js";
+import { JavaScriptCodeEditor } from "../../components/js-code/index.js";
+import { Button, Drawer, message } from "antd";
+import react from "react";
+const JavaScriptCodeContent = ({ code })=>{
+    const [script, setScript] = react.useState('');
+    react.useEffect(()=>{
+        if (code) getScript(code).then((res)=>{
+            setScript(res.data);
+        });
+        return ()=>{
+            setScript('');
+        };
+    }, [
+        code
+    ]);
+    const handleSave = ()=>{
+        save({
+            code,
+            script: script
+        }).then((res)=>{
+            message.success('保存成功');
+        });
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(JavaScriptCodeEditor, {
+            value: script,
+            onChange: setScript,
+            toolbar: [
+                {
+                    key: 'save',
+                    title: '保存',
+                    label: '保存代码',
+                    backgroundColor: '#1890ff',
+                    hoverBackgroundColor: '#40a9ff',
+                    textColor: '#fff',
+                    borderColor: '#1890ff',
+                    onClick: ()=>{
+                        handleSave();
+                    }
+                }
+            ]
+        })
+    });
+};
+const ViewCodeDrawer = (props)=>/*#__PURE__*/ jsx(Drawer, {
+        closeIcon: false,
+        title: "视图代码",
+        open: props.visible,
+        onClose: props.onClose,
+        destroyOnHidden: true,
+        size: '100%',
+        extra: /*#__PURE__*/ jsx(Button, {
+            onClick: props.onClose,
+            children: "关闭"
+        }),
+        children: /*#__PURE__*/ jsx(JavaScriptCodeContent, {
+            code: props.code
+        })
+    });
+export { ViewCodeDrawer };

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

@@ -7,5 +7,5 @@ export declare const SCRIPT_DEFAULT_ERROR_TRIGGER = "// @SCRIPT_TITLE \u56DE\u90
 export declare const SCRIPT_DEFAULT_CONDITION = "// @SCRIPT_TITLE \u9ED8\u8BA4\u6761\u4EF6\uFF08\u5141\u8BB8\u6267\u884C\uFF09\ndef run(request){\n    return true;\n}\n";
 export declare const SCRIPT_DEFAULT_ROUTER = "// @SCRIPT_TITLE \u53D1\u8D77\u8282\u70B9\n// @SCRIPT_META {\"node\":\"START\"}\ndef run(request){\n    return request.getStartNode().getId();\n}\n";
 export declare const SCRIPT_DEFAULT_TRIGGER = "// @SCRIPT_TITLE \u793A\u4F8B\u89E6\u53D1\u8282\u70B9\uFF08\u6253\u5370\u89E6\u53D1\u65E5\u5FD7\uFF09 \ndef run(request){ \n    print('hello trigger node.\\n'); \n}\n";
-export declare const SCRIPT_DEFAULT_CUSTOM = "// @SCRIPT_TITLE \u9ED8\u8BA4\u6761\u4EF6 \u89E6\u53D1\u901A\u8FC7\n// @SCRIPT_META {\"trigger\":\"PASS\"}\ndef run(request){ \n    return 'PASS'; \n}\n";
+export declare const SCRIPT_DEFAULT_CUSTOM = "// @SCRIPT_TITLE \u89E6\u53D1\u901A\u8FC7\n// @SCRIPT_META {\"trigger\":\"PASS\"}\ndef run(request){ \n    return 'PASS'; \n}\n";
 export declare const SCRIPT_DEFAULT_SUB_PROCESS = "// @SCRIPT_TITLE \u521B\u5EFA\u5F53\u524D\u6D41\u7A0B  \ndef run(request){ \n    return request.toCreateRequest() \n}\n";

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

@@ -49,7 +49,7 @@ def run(request){
     print('hello trigger node.\\n'); 
 }
 `;
-const SCRIPT_DEFAULT_CUSTOM = `// @SCRIPT_TITLE 默认条件 触发通过
+const SCRIPT_DEFAULT_CUSTOM = `// @SCRIPT_TITLE 触发通过
 // @SCRIPT_META {"trigger":"PASS"}
 def run(request){ 
     return 'PASS'; 

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

@@ -18,7 +18,11 @@ export declare enum ScriptType {
     /** 路由节点脚本 */
     ROUTER = "ROUTER",
     /** 子流程节点脚本 */
-    SUB_PROCESS = "SUB_PROCESS"
+    SUB_PROCESS = "SUB_PROCESS",
+    /** 自定义操作 */
+    CUSTOM_ACTION = "CUSTOM_ACTION",
+    /** 按钮展示条件 */
+    ACTION_DISPLAY = "ACTION_DISPLAY"
 }
 /**
  * Groovy变量映射接口

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

@@ -7,6 +7,8 @@ var script_ScriptType = /*#__PURE__*/ function(ScriptType) {
     ScriptType["TRIGGER"] = "TRIGGER";
     ScriptType["ROUTER"] = "ROUTER";
     ScriptType["SUB_PROCESS"] = "SUB_PROCESS";
+    ScriptType["CUSTOM_ACTION"] = "CUSTOM_ACTION";
+    ScriptType["ACTION_DISPLAY"] = "ACTION_DISPLAY";
     return ScriptType;
 }({});
 var script_VariableTag = /*#__PURE__*/ function(VariableTag) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-flow/flow-design",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "flow-engine design components ",
   "type": "module",
   "keywords": [
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "~6.1.0",
-    "@coding-script/script-engine": "^0.0.7",
+    "@coding-script/script-engine": "^0.0.9",
     "@flowgram.ai/export-plugin": "1.0.8",
     "@flowgram.ai/fixed-layout-editor": "1.0.8",
     "@flowgram.ai/fixed-semi-materials": "1.0.8",
@@ -49,16 +49,16 @@
     "nanoid": "^5.1.6",
     "react-redux": "^9.2.0",
     "styled-components": "^5.3.11",
-    "@coding-flow/flow-pc-ui": "0.0.46",
-    "@coding-flow/flow-core": "0.0.46",
-    "@coding-flow/flow-icons": "0.0.46",
-    "@coding-flow/flow-types": "0.0.46"
+    "@coding-flow/flow-core": "0.0.48",
+    "@coding-flow/flow-icons": "0.0.48",
+    "@coding-flow/flow-types": "0.0.48",
+    "@coding-flow/flow-pc-ui": "0.0.48"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/styled-components": "^5.1.36",
-    "@coding-flow/flow-types": "0.0.46",
-    "@coding-flow/flow-core": "0.0.46"
+    "@coding-flow/flow-core": "0.0.48",
+    "@coding-flow/flow-types": "0.0.48"
   },
   "scripts": {
     "build": "rslib build",

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

@@ -1,8 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 };