@coding-flow/flow-design 0.0.45 → 0.0.47

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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-flow/flow-design",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "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.8",
     "@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-core": "0.0.45",
-    "@coding-flow/flow-icons": "0.0.45",
-    "@coding-flow/flow-types": "0.0.45",
-    "@coding-flow/flow-pc-ui": "0.0.45"
+    "@coding-flow/flow-core": "0.0.47",
+    "@coding-flow/flow-types": "0.0.47",
+    "@coding-flow/flow-pc-ui": "0.0.47",
+    "@coding-flow/flow-icons": "0.0.47"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/styled-components": "^5.1.36",
-    "@coding-flow/flow-core": "0.0.45",
-    "@coding-flow/flow-types": "0.0.45"
+    "@coding-flow/flow-core": "0.0.47",
+    "@coding-flow/flow-types": "0.0.47"
   },
   "scripts": {
     "build": "rslib build",