@coding-flow/flow-design 0.0.49 → 0.0.51

package/dist/components/design-panel/layout/header.js

@@ -15,7 +15,7 @@ const Left = ()=>/*#__PURE__*/ jsx("div", {
 const SaveAsButton = ()=>{
     const [visible, setVisible] = react.useState(false);
     const [form] = Form.useForm();
-    const { context } = useDesignContext();
+    const { context, state } = useDesignContext();
     react.useEffect(()=>{
         if (!visible) form.resetFields();
     }, [
@@ -62,6 +62,7 @@ const SaveAsButton = ()=>{
                                     form.submit();
                                 },
                                 type: "primary",
+                                loading: state.view.loading,
                                 children: "确定"
                             }),
                             /*#__PURE__*/ jsx(Button, {
@@ -93,6 +94,7 @@ const Right = ()=>{
             /*#__PURE__*/ jsx(Button, {
                 icon: /*#__PURE__*/ jsx(SaveOutlined, {}),
                 type: "primary",
+                loading: state.view.loading,
                 onClick: ()=>{
                     context.save().then(()=>{
                         message.success("流程已经保存.");

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

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Provider } from "react-redux";
+import { Spin } from "antd";
 import { DesignPanelContext } from "../context/index.js";
 import { createDesignContext } from "../hooks/use-design-context.js";
 import { designStore } from "../store.js";
@@ -8,16 +9,21 @@ import { Header } from "./header.js";
 import { Footer } from "./footer.js";
 import { Body } from "./body.js";
 const DesignPanelLayoutScope = (props)=>{
-    const { context } = createDesignContext(props);
+    const { context, state } = createDesignContext(props);
     return /*#__PURE__*/ jsx(DesignPanelContext.Provider, {
         value: context,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: props.className,
-            children: [
-                /*#__PURE__*/ jsx(Header, {}),
-                /*#__PURE__*/ jsx(Body, {}),
-                /*#__PURE__*/ jsx(Footer, {})
-            ]
+        children: /*#__PURE__*/ jsx(Spin, {
+            spinning: state.view.loading,
+            tip: state.view.loadingText,
+            size: "large",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: props.className,
+                children: [
+                    /*#__PURE__*/ jsx(Header, {}),
+                    /*#__PURE__*/ jsx(Body, {}),
+                    /*#__PURE__*/ jsx(Footer, {})
+                ]
+            })
         })
     });
 };

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

@@ -25,6 +25,7 @@ export declare class Presenter {
     addWorkflowSubForm(values: any): void;
     updateWorkflowFormField(code: string, values: any): void;
     importWorkflowForm(selectedForm: FlowForm): void;
+    private setLoading;
     save(versionName?: string): Promise<void>;
     getNodeManager(): NodeManger;
     createNode(form: string, type: string): Promise<any>;

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

@@ -110,20 +110,35 @@ class Presenter {
         };
         this.updateWorkflowForm(updatedForm);
     }
+    setLoading(loading, loadingText) {
+        this.dispatch((prevState)=>({
+                ...prevState,
+                view: {
+                    ...prevState.view,
+                    loading,
+                    loadingText
+                }
+            }));
+    }
     async save(versionName) {
-        const values = this.formActionContext.save();
-        this.updateWorkflow(values);
-        const latest = {
-            ...this.state,
-            workflow: this.mergeWorkflow(this.state.workflow, values)
-        };
-        const convertor = new WorkflowConvertor(latest.workflow);
-        const apiData = convertor.toApi();
-        await this.api.save({
-            ...apiData,
-            versionName
-        });
-        console.log('save latest:', apiData);
+        this.setLoading(true, '正在保存...');
+        try {
+            const values = this.formActionContext.save();
+            this.updateWorkflow(values);
+            const latest = {
+                ...this.state,
+                workflow: this.mergeWorkflow(this.state.workflow, values)
+            };
+            const convertor = new WorkflowConvertor(latest.workflow);
+            const apiData = convertor.toApi();
+            await this.api.save({
+                ...apiData,
+                versionName
+            });
+            console.log('save latest:', apiData);
+        } finally{
+            this.setLoading(false);
+        }
     }
     getNodeManager() {
         return new NodeManger(this.state.workflow.nodes || []);
@@ -152,17 +167,23 @@ class Presenter {
         this.dispatch(initStateData);
     }
     loadDesign(id) {
+        this.setLoading(true, '正在加载流程...');
         this.api.load(id).then((result)=>{
             const convertor = new WorkflowConvertor(result);
             const renderData = convertor.toRender();
             this.updateWorkflow(renderData);
+        }).finally(()=>{
+            this.setLoading(false);
         });
     }
     createDesign() {
+        this.setLoading(true, '正在创建流程...');
         this.api.create().then((result)=>{
             const convertor = new WorkflowConvertor(result);
             const renderData = convertor.toRender();
             this.updateWorkflow(renderData);
+        }).finally(()=>{
+            this.setLoading(false);
         });
     }
 }

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

@@ -33,6 +33,8 @@ export interface FlowNode {
 export interface State {
     view: {
         tabPanel: TabPanelType;
+        loading: boolean;
+        loadingText?: string;
     };
     workflow: Workflow;
 }

package/dist/components/design-panel/types.js

@@ -1,7 +1,8 @@
 const LayoutHeaderHeight = 50;
 const initStateData = {
     view: {
-        tabPanel: 'base'
+        tabPanel: 'base',
+        loading: false
     },
     workflow: {
         id: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-flow/flow-design",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "flow-engine design components ",
   "type": "module",
   "keywords": [
@@ -49,16 +49,16 @@
     "nanoid": "^5.1.6",
     "react-redux": "^9.2.0",
     "styled-components": "^5.3.11",
-    "@coding-flow/flow-core": "0.0.49",
-    "@coding-flow/flow-icons": "0.0.49",
-    "@coding-flow/flow-types": "0.0.49",
-    "@coding-flow/flow-pc-ui": "0.0.49"
+    "@coding-flow/flow-core": "0.0.51",
+    "@coding-flow/flow-icons": "0.0.51",
+    "@coding-flow/flow-types": "0.0.51",
+    "@coding-flow/flow-pc-ui": "0.0.51"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/styled-components": "^5.1.36",
-    "@coding-flow/flow-core": "0.0.49",
-    "@coding-flow/flow-types": "0.0.49"
+    "@coding-flow/flow-core": "0.0.51",
+    "@coding-flow/flow-types": "0.0.51"
   },
   "scripts": {
     "build": "rslib build",