@coding-flow/flow-design 0.0.38 → 0.0.41

package/dist/components/design-editor/nodes/condition-branch/form-meta.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
 import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-materials";
 import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
 import { useIsSidebar } from "../../hooks/index.js";
 import { NodeHeader } from "../../node-components/header/index.js";
 import { NodePanel } from "../../node-components/panel/index.js";
 import { ConditionScript } from "../../node-components/condition/index.js";
-import "react";
 import { NodeHint } from "../../node-components/node-hint/index.js";
 import { NodeOrder } from "../../node-components/node-order/index.js";
 const renderForm = (data)=>{

package/dist/components/design-editor/nodes/start/form-meta.js

@@ -10,6 +10,10 @@ import { RevokeStrategy } from "../../node-components/strategy/revoke.js";
 import { View } from "../../node-components/view/index.js";
 import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
 import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+import { GroovyScriptLoader } from "../../../../script-components/components/groovy-script-loader.js";
+const ScriptContent = (props)=>/*#__PURE__*/ jsx("div", {
+        children: GroovyScriptConvertorUtil.getScriptTitle(props.value || '')
+    });
 const renderForm = (data)=>{
     const isSidebar = useIsSidebar();
     const { state } = useDesignContext();
@@ -30,7 +34,10 @@ const renderForm = (data)=>{
         data: data,
         children: [
             /*#__PURE__*/ jsx(NodeHeader, {}),
-            GroovyScriptConvertorUtil.getScriptTitle(state.workflow.operatorCreateScript)
+            /*#__PURE__*/ jsx(GroovyScriptLoader, {
+                content: ScriptContent,
+                value: state.workflow.operatorCreateScript
+            })
         ]
     });
 };

package/dist/components/design-panel/tabs/base/index.js

@@ -4,6 +4,7 @@ import { Input } from "antd";
 import { CardForm, Panel } from "@coding-flow/flow-pc-ui";
 import { useDesignContext } from "../../hooks/use-design-context.js";
 import { FlowCreateOperatorEditor } from "./operator.js";
+import { GroovyScriptLoader } from "../../../../script-components/components/groovy-script-loader.js";
 const TabBase = ()=>{
     const [baseForm] = CardForm.useForm();
     const [operatorForm] = CardForm.useForm();
@@ -98,7 +99,9 @@ const TabBase = ()=>{
                             message: '请输入发起人范围'
                         }
                     ],
-                    children: /*#__PURE__*/ jsx(FlowCreateOperatorEditor, {})
+                    children: /*#__PURE__*/ jsx(GroovyScriptLoader, {
+                        content: FlowCreateOperatorEditor
+                    })
                 })
             })
         ]

package/dist/components/design-panel/tabs/base/operator.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface FlowCreateOperatorEditorProps {
     value?: string;
     onChange?: (value: string) => void;
+    scriptKey: string;
 }
 export declare const FlowCreateOperatorEditor: React.FC<FlowCreateOperatorEditorProps>;
 export {};

package/dist/components/design-panel/tabs/base/operator.js

@@ -28,6 +28,7 @@ const FlowCreateOperatorEditor = (props)=>{
             /*#__PURE__*/ jsx(OperatorCreateConfigModal, {
                 open: visible,
                 script: script,
+                scriptKey: props.scriptKey,
                 onCancel: ()=>{
                     setVisible(false);
                 },

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

@@ -1,8 +1,13 @@
 import React from 'react';
+import { ToolbarItem } from '@coding-script/script-engine';
 interface GroovyCodeEditorProps {
+    title?: string;
     value?: string;
+    toolbar?: ToolbarItem[];
+    scriptKey?: string;
     readonly?: boolean;
     onChange?: (value: string) => void;
+    resetScript?: () => string;
     placeholder?: string;
     theme?: 'dark' | 'light';
     options?: {

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

@@ -1,163 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { EditorState } from "@codemirror/state";
-import { EditorView, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, placeholder as view_placeholder, rectangularSelection } from "@codemirror/view";
-import { defaultKeymap, history as commands_history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { HighlightStyle, bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
-import { java } from "@codemirror/lang-java";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { tags } from "@lezer/highlight";
-const darkHighlightStyle = HighlightStyle.define([
-    {
-        tag: tags.keyword,
-        color: '#c678dd'
-    },
-    {
-        tag: tags.operator,
-        color: '#56b6c2'
-    },
-    {
-        tag: tags.variableName,
-        color: '#e5c07b'
-    },
-    {
-        tag: tags.string,
-        color: '#98c379'
-    },
-    {
-        tag: tags.comment,
-        color: '#5c6370',
-        fontStyle: 'italic'
-    },
-    {
-        tag: tags.number,
-        color: '#d19a66'
-    },
-    {
-        tag: tags.bool,
-        color: '#d19a66'
-    },
-    {
-        tag: tags["null"],
-        color: '#d19a66'
-    },
-    {
-        tag: tags.propertyName,
-        color: '#e06c75'
-    },
-    {
-        tag: tags["function"](tags.variableName),
-        color: '#61afef'
-    },
-    {
-        tag: tags.definition(tags.variableName),
-        color: '#e5c07b'
-    },
-    {
-        tag: tags.typeName,
-        color: '#e5c07b'
-    },
-    {
-        tag: tags.className,
-        color: '#e5c07b'
-    },
-    {
-        tag: tags.annotation,
-        color: '#d19a66'
-    }
-]);
+import react from "react";
+import { message } from "antd";
+import { ScriptCodeEditor } from "@coding-script/script-engine";
+import { getMetadata } from "../../api/script.js";
 const GroovyCodeEditor = (props)=>{
-    const { value, readonly = false, onChange, placeholder = '请输入 Groovy 脚本...', theme = 'dark', options = {} } = props;
-    const editorRef = useRef(null);
-    const viewRef = useRef(null);
-    const { fontSize = 14, minHeight = 300, maxHeight = 300 } = options;
-    useEffect(()=>{
-        if (!editorRef.current) return;
-        const extensions = [
-            lineNumbers(),
-            highlightActiveLineGutter(),
-            highlightSpecialChars(),
-            commands_history(),
-            foldGutter(),
-            drawSelection(),
-            dropCursor(),
-            EditorState.allowMultipleSelections.of(true),
-            indentOnInput(),
-            bracketMatching(),
-            rectangularSelection(),
-            crosshairCursor(),
-            highlightActiveLine(),
-            keymap.of([
-                ...defaultKeymap,
-                ...historyKeymap,
-                ...foldKeymap,
-                indentWithTab
-            ]),
-            java(),
-            view_placeholder(placeholder),
-            EditorView.updateListener.of((update)=>{
-                if (update.docChanged && onChange) onChange(update.state.doc.toString());
-            }),
-            EditorView.theme({
-                '&': {
-                    fontSize: `${fontSize}px`
-                },
-                '.cm-scroller': {
-                    overflow: 'auto',
-                    minHeight: `${minHeight}px`,
-                    maxHeight: `${maxHeight}px`
-                },
-                '.cm-content': {
-                    fontFamily: 'monospace',
-                    minHeight: `${minHeight}px`
-                },
-                '.cm-gutters': {
-                    minHeight: `${minHeight}px`
-                }
-            })
-        ];
-        if ('dark' === theme) {
-            extensions.push(oneDark);
-            extensions.push(syntaxHighlighting(darkHighlightStyle));
-        } else extensions.push(syntaxHighlighting(defaultHighlightStyle));
-        if (readonly) extensions.push(EditorState.readOnly.of(true));
-        const state = EditorState.create({
-            doc: value,
-            extensions
-        });
-        const view = new EditorView({
-            state,
-            parent: editorRef.current
-        });
-        viewRef.current = view;
-        return ()=>{
-            view.destroy();
-        };
-    }, [
-        theme,
-        fontSize,
-        minHeight,
-        maxHeight,
-        placeholder,
-        readonly
-    ]);
-    useEffect(()=>{
-        if (viewRef.current && value !== viewRef.current.state.doc.toString()) viewRef.current.dispatch({
-            changes: {
-                from: 0,
-                to: viewRef.current.state.doc.length,
-                insert: value
-            }
+    const title = props.title || '脚本编辑器';
+    const [metadata, setMetadata] = react.useState();
+    react.useEffect(()=>{
+        if (props.scriptKey) getMetadata(props.scriptKey).then((res)=>{
+            setMetadata(res.data);
+        }).catch((err)=>{
+            message.error('获取脚本元数据失败');
         });
     }, [
-        value
+        props.scriptKey
     ]);
-    return /*#__PURE__*/ jsx("div", {
-        ref: editorRef,
-        style: {
-            border: '1px solid #434343',
-            borderRadius: 6,
-            overflow: 'hidden'
+    return /*#__PURE__*/ jsx(ScriptCodeEditor, {
+        title: title,
+        toolbar: props.toolbar,
+        value: props.value,
+        onChange: props.onChange,
+        placeholder: props.placeholder,
+        readonly: props.readonly,
+        options: props.options,
+        defaultTheme: props.theme || 'light',
+        metadata: metadata,
+        enableCompile: true,
+        enableFormat: true,
+        enableFullscreen: true,
+        enableThemeToggle: true,
+        onCompile: (code)=>{
+            console.log('编译脚本:', code);
+            message.success('脚本编译测试已提交');
         }
     });
 };

package/dist/plugins/trigger-view-type.d.ts

@@ -5,6 +5,8 @@ export declare const VIEW_KEY = "TriggerViewPlugin";
 export interface TriggerViewPlugin {
     /** 脚本类型 */
     type: ScriptType;
+    /** 脚本key */
+    scriptKey: string;
     /** 当前脚本 */
     script: string;
     /** 变量映射列表 */

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

@@ -1,25 +1,3 @@
 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 {};
+export declare const AdvancedScriptEditor: React.FC<GroovyScriptContent>;

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

@@ -1,24 +1,33 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Space } from "antd";
+import { jsx } from "react/jsx-runtime";
 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 AdvancedScriptEditor = (props)=>{
+    const { script, onChange, readonly } = props;
     const handleChange = (value)=>{
         if (!readonly) onChange(value);
     };
     return /*#__PURE__*/ jsx(GroovyCodeEditor, {
         value: script,
+        scriptKey: props.scriptKey,
         readonly: readonly,
         onChange: handleChange,
-        placeholder: "请输入 Groovy 脚本...",
-        theme: 'dark',
+        placeholder: "请输入脚本...",
+        toolbar: [
+            {
+                key: 'reset',
+                title: '重置',
+                label: '重置脚本',
+                backgroundColor: '#ff4d4f',
+                hoverBackgroundColor: '#ff7875',
+                textColor: '#fff',
+                borderColor: '#ff4d4f',
+                onClick: ()=>{
+                    const newScript = props.resetScript?.() || '';
+                    handleChange(newScript);
+                }
+            }
+        ],
+        theme: 'light',
         options: {
             fontSize: 14,
             minHeight: 300,
@@ -26,51 +35,4 @@ const ScriptEditor = (props)=>{
         }
     });
 };
-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 };
+export { AdvancedScriptEditor };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface GroovyScriptLoaderProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    content: React.ComponentType<GroovyScriptContent>;
+}
+export interface GroovyScriptContent {
+    scriptKey: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const GroovyScriptLoader: React.FC<GroovyScriptLoaderProps>;

package/dist/script-components/components/groovy-script-loader.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { getScript, save } from "../../api/script.js";
+import { message } from "antd";
+import react from "react";
+const GroovyScriptLoader = (props)=>{
+    const scriptKey = props.value || '';
+    const [script, setScript] = react.useState('');
+    const ScriptContent = props.content;
+    const handlerSaveScript = (script)=>{
+        save({
+            key: scriptKey,
+            script: script
+        }).then((res)=>{
+            if (res.success) message.success('规则脚本已经更新');
+        });
+    };
+    const handleScriptChange = (currentScript)=>{
+        if (script === currentScript) return;
+        console.log("script changed", currentScript);
+        handlerSaveScript(currentScript);
+        props.onChange?.(scriptKey);
+    };
+    react.useEffect(()=>{
+        if (scriptKey) getScript(scriptKey).then((res)=>{
+            setScript(res.data);
+        });
+    }, [
+        scriptKey
+    ]);
+    react.useEffect(()=>()=>{
+            setScript('');
+        }, []);
+    return /*#__PURE__*/ jsx(ScriptContent, {
+        scriptKey: scriptKey,
+        value: script,
+        onChange: handleScriptChange
+    });
+};
+export { GroovyScriptLoader };

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

@@ -5,8 +5,12 @@ export interface GroovyScriptModalProps {
     open: boolean;
     /** 脚本类型 */
     type: ScriptType;
-    /** 当前脚本 */
+    /** 脚本 */
     script: string;
+    /** 脚本键 */
+    scriptKey: string;
+    /** 重置脚本 */
+    resetScript?: () => string;
     /** 变量映射列表 */
     variables: GroovyVariableMapping[];
     /** 确认回调 */
@@ -24,12 +28,18 @@ export interface GroovyScriptContent {
     type: ScriptType;
     /** 当前脚本 */
     script: string;
+    /** 脚本键 */
+    scriptKey: string;
     /** 变量映射列表 */
     variables: GroovyVariableMapping[];
     /** 确认回调 */
     onChange: (script: string) => void;
     /** 动作控制 */
     action?: React.Ref<DesignViewPluginAction>;
+    /** 重置脚本 */
+    resetScript?: () => string;
+    /** 是否只读 */
+    readonly?: boolean;
 }
 /**
  * 通用脚本配置弹框

package/dist/script-components/components/groovy-script-modal.js

@@ -22,9 +22,11 @@ const GroovyScriptContentComponent = (props)=>{
     return /*#__PURE__*/ jsx(GroovyContent, {
         action: actionRef,
         type: props.type,
+        scriptKey: props.scriptKey,
         script: content,
         variables: props.variables,
-        onChange: setContent
+        onChange: setContent,
+        resetScript: props.resetScript
     });
 };
 const GroovyScriptModal = (props)=>{

package/dist/script-components/modal/condition-config-modal.d.ts

@@ -3,8 +3,10 @@ import { GroovyVariableMapping } from "../typings";
 export interface ConditionConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 表单字段（用于动态生成变量） */
     variables?: GroovyVariableMapping[];
     /** 取消回调 */

package/dist/script-components/modal/condition-config-modal.js

@@ -29,6 +29,7 @@ const ConditionConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal, {
         onCancel: props.onCancel,
         title: "条件配置",
         width: "70%",
-        content: ConditionConfigContent
+        content: ConditionConfigContent,
+        scriptKey: props.scriptKey
     });
 export { ConditionConfigModal };

package/dist/script-components/modal/error-trigger-config-modal.d.ts

@@ -3,8 +3,10 @@ import { GroovyVariableMapping } from "../typings";
 export interface ErrorTriggerConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 表单字段（用于动态生成变量） */
     variables?: GroovyVariableMapping[];
     /** 取消回调 */

package/dist/script-components/modal/error-trigger-config-modal.js

@@ -29,6 +29,7 @@ const ErrorTriggerConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal, {
         onConfirm: props.onConfirm,
         onCancel: props.onCancel,
         title: "异常配置",
-        content: ErrorTriggerConfigContent
+        content: ErrorTriggerConfigContent,
+        scriptKey: props.scriptKey
     });
 export { ErrorTriggerConfigModal };

package/dist/script-components/modal/node-title-config-modal.d.ts

@@ -3,8 +3,10 @@ import { GroovyVariableMapping } from "../typings";
 export interface NodeTitleConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 表单字段（用于动态生成变量） */
     variables?: GroovyVariableMapping[];
     /** 取消回调 */

package/dist/script-components/modal/node-title-config-modal.js

@@ -29,6 +29,7 @@ const NodeTitleConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal, {
         onConfirm: props.onConfirm,
         onCancel: props.onCancel,
         title: "标题配置",
-        content: NodeTitleConfigContent
+        content: NodeTitleConfigContent,
+        scriptKey: props.scriptKey
     });
 export { NodeTitleConfigModal };

package/dist/script-components/modal/operator-create-config-modal.d.ts

@@ -2,8 +2,10 @@ import React from "react";
 interface OperatorCreateConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 取消回调 */
     onCancel: () => void;
     /** 确认回调 */

package/dist/script-components/modal/operator-create-config-modal.js

@@ -27,10 +27,11 @@ const OperatorCreateConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal,
         width: "70%",
         type: ScriptType.OPERATOR_CREATE,
         variables: [],
-        script: props.script,
         content: OperatorCreateConfigContent,
         open: props.open,
         onCancel: props.onCancel,
-        onConfirm: props.onConfirm
+        onConfirm: props.onConfirm,
+        scriptKey: props.scriptKey,
+        script: props.script
     });
 export { OperatorCreateConfigModal };

package/dist/script-components/modal/operator-load-config-modal.d.ts

@@ -2,8 +2,10 @@ import React from "react";
 interface OperatorLoadConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 取消回调 */
     onCancel: () => void;
     /** 确认回调 */

package/dist/script-components/modal/operator-load-config-modal.js

@@ -31,6 +31,7 @@ const OperatorLoadConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal, {
         content: OperatorLoadConfigContent,
         open: props.open,
         onCancel: props.onCancel,
-        onConfirm: props.onConfirm
+        onConfirm: props.onConfirm,
+        scriptKey: props.scriptKey
     });
 export { OperatorLoadConfigModal };

package/dist/script-components/modal/router-config-modal.d.ts

@@ -3,8 +3,10 @@ import { GroovyVariableMapping } from "../typings";
 export interface RouterConfigModalProps {
     /** 是否展示 **/
     open: boolean;
-    /** 当前脚本 */
+    /** 脚本内容 */
     script: string;
+    /** 脚本key */
+    scriptKey: string;
     /** 表单字段（用于动态生成变量） */
     variables?: GroovyVariableMapping[];
     /** 取消回调 */

package/dist/script-components/modal/router-config-modal.js

@@ -29,6 +29,7 @@ const RouterConfigModal = (props)=>/*#__PURE__*/ jsx(GroovyScriptModal, {
         onConfirm: props.onConfirm,
         onCancel: props.onCancel,
         title: "路由配置",
-        content: RouterConfigContent
+        content: RouterConfigContent,
+        scriptKey: props.scriptKey
     });
 export { RouterConfigModal };