@coding-flow/flow-design 0.2.3 → 0.2.4

package/dist/api/workflow.d.ts

@@ -13,4 +13,9 @@ export declare const createCustomAction: () => Promise<import("@coding-flow/flow
 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>;
-export declare const importWorkflow: (file: string) => Promise<import("@coding-flow/flow-core").Response>;
+export interface WorkflowImportRequest {
+    file: string;
+    mode: 'REPLACE' | 'INCREMENTAL';
+}
+export declare const importWorkflow: (request: WorkflowImportRequest) => Promise<import("@coding-flow/flow-core").Response>;
+export declare const workflowCodeExists: (code: string) => Promise<import("@coding-flow/flow-core").Response>;

package/dist/api/workflow.js

@@ -33,5 +33,8 @@ const exportWorkflow = (id)=>{
     const filename = `workflow_${id}.json`;
     return httpClient.download('/api/cmd/workflow/export?id=' + id, filename);
 };
-const importWorkflow = (file)=>httpClient.post('/api/cmd/workflow/import', file);
-export { changeState, changeVersion, create, createCustomAction, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions };
+const importWorkflow = (request)=>httpClient.post('/api/cmd/workflow/import', request);
+const workflowCodeExists = (code)=>httpClient.get('/api/cmd/workflow/exists', {
+        code
+    });
+export { changeState, changeVersion, create, createCustomAction, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions, workflowCodeExists };

package/dist/components/design-import/design_import.module.js

@@ -0,0 +1,5 @@
+import "./design_import_module.css";
+const design_import_module = {
+    notice: "notice-HR83fb"
+};
+export { design_import_module as default };

package/dist/components/design-import/design_import_module.css

@@ -0,0 +1,4 @@
+.notice-HR83fb {
+  margin-bottom: 16px;
+}
+

package/dist/components/design-import/import-file.d.ts

@@ -0,0 +1,10 @@
+export interface WorkflowImportFileInfo {
+    code: string;
+    title: string;
+}
+/**
+ * 从V1迁移包或历史单流程文件中读取流程编码。
+ */
+export declare const readImportWorkflowInfo: (file: string) => WorkflowImportFileInfo;
+export declare const readImportWorkflowCode: (file: string) => string;
+export declare const validateResetImportCode: (file: string, currentWorkflowCode: string) => string;

package/dist/components/design-import/import-file.js

@@ -0,0 +1,33 @@
+const isJsonObject = (value)=>'object' == typeof value && null !== value && !Array.isArray(value);
+const decodeBase64File = (file)=>{
+    const separatorIndex = file.indexOf(',');
+    const encoded = separatorIndex >= 0 ? file.substring(separatorIndex + 1) : file;
+    const binary = globalThis.atob(encoded);
+    const bytes = Uint8Array.from(binary, (character)=>character.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+};
+const readImportWorkflowInfo = (file)=>{
+    let parsed;
+    try {
+        parsed = JSON.parse(decodeBase64File(file));
+    } catch  {
+        throw new Error('无法解析导入文件，请确认文件为有效的流程JSON文件');
+    }
+    if (!isJsonObject(parsed)) throw new Error('导入文件内容必须为JSON对象');
+    const workflow = parsed.workflow;
+    const workflowData = isJsonObject(workflow) ? workflow : parsed;
+    const code = workflowData.code;
+    if ('string' != typeof code || 0 === code.trim().length) throw new Error('导入文件中缺少流程编码');
+    const title = workflowData.title;
+    return {
+        code,
+        title: 'string' == typeof title && title.trim().length > 0 ? title : '未命名流程'
+    };
+};
+const readImportWorkflowCode = (file)=>readImportWorkflowInfo(file).code;
+const validateResetImportCode = (file, currentWorkflowCode)=>{
+    const importedCode = readImportWorkflowCode(file);
+    if (importedCode !== currentWorkflowCode) throw new Error(`导入流程编码“${importedCode}”与当前流程编码“${currentWorkflowCode}”不一致，无法重置导入`);
+    return importedCode;
+};
+export { readImportWorkflowCode, readImportWorkflowInfo, validateResetImportCode };

package/dist/components/design-import/index.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
+export type WorkflowImportScene = 'MANAGEMENT' | 'RESET';
 interface DesignImportProps {
     open: boolean;
     onClose: () => void;
+    scene?: WorkflowImportScene;
+    currentWorkflowCode?: string;
+    onImported?: (workId: string) => void;
 }
 export declare const DesignImport: React.FC<DesignImportProps>;
 export {};

package/dist/components/design-import/index.js

@@ -1,37 +1,138 @@
-import { jsx } from "react/jsx-runtime";
-import { Form, Modal, message } from "antd";
-import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Descriptions, Form, Modal, message } from "antd";
+import react from "react";
 import { Upload } from "./upload.js";
-import { importWorkflow } from "../../api/workflow.js";
+import { importWorkflow, workflowCodeExists } from "../../api/workflow.js";
 import { FlowMessageKey, FlowMessageRegistry } from "@coding-flow/flow-core";
+import { readImportWorkflowInfo, validateResetImportCode } from "./import-file.js";
+import design_import_module from "./design_import.module.js";
 const DesignImport = (props)=>{
     const [form] = Form.useForm();
-    return /*#__PURE__*/ jsx(Modal, {
-        title: "流程导入",
+    const [submitting, setSubmitting] = react.useState(false);
+    const [fileInfo, setFileInfo] = react.useState();
+    const resetImport = 'RESET' === props.scene;
+    react.useEffect(()=>{
+        if (!props.open) {
+            form.resetFields();
+            setFileInfo(void 0);
+        }
+    }, [
+        form,
+        props.open
+    ]);
+    const executeImport = async (values)=>{
+        setSubmitting(true);
+        try {
+            const result = await importWorkflow({
+                file: values.file,
+                mode: resetImport ? 'REPLACE' : 'INCREMENTAL'
+            });
+            if (result.success) {
+                message.success(FlowMessageRegistry.getInstance().get(FlowMessageKey.DESIGN_IMPORT_SUCCESS));
+                props.onImported?.(result.data);
+                props.onClose();
+            }
+        } finally{
+            setSubmitting(false);
+        }
+    };
+    const confirmImport = (values, info)=>{
+        Modal.confirm({
+            title: resetImport ? '确认重置导入' : '确认导入流程',
+            content: resetImport ? `重置导入将使用“${info.title}（${info.code}）”完全覆盖当前流程的全部版本和配置。该操作不可撤销，确认继续吗？` : `流程编码“${info.code}”已存在，系统将自动生成新编码并创建一条独立流程。确认继续吗？`,
+            okText: resetImport ? '确认重置' : '确认导入',
+            cancelText: '取消',
+            okButtonProps: resetImport ? {
+                danger: true
+            } : void 0,
+            onOk: ()=>executeImport(values)
+        });
+    };
+    const submitImport = async (values)=>{
+        let info;
+        try {
+            info = readImportWorkflowInfo(values.file);
+            if (resetImport) validateResetImportCode(values.file, props.currentWorkflowCode || '');
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : '无法解析导入流程信息');
+            return;
+        }
+        if (resetImport) return void confirmImport(values, info);
+        setSubmitting(true);
+        try {
+            const existsResult = await workflowCodeExists(info.code);
+            if (true === existsResult.data) return void confirmImport(values, info);
+        } finally{
+            setSubmitting(false);
+        }
+        await executeImport(values);
+    };
+    const handleFileChange = (changedValues)=>{
+        if (void 0 === changedValues.file) return;
+        if (!changedValues.file) return void setFileInfo(void 0);
+        try {
+            setFileInfo(readImportWorkflowInfo(changedValues.file));
+        } catch (error) {
+            setFileInfo(void 0);
+            message.error(error instanceof Error ? error.message : '无法解析导入流程信息');
+        }
+    };
+    return /*#__PURE__*/ jsxs(Modal, {
+        title: resetImport ? '重置导入' : '流程导入',
         open: props.open,
         onCancel: props.onClose,
         destroyOnHidden: true,
+        okText: resetImport ? '重置导入' : '导入',
+        confirmLoading: submitting,
         onOk: ()=>{
             form.submit();
         },
-        children: /*#__PURE__*/ jsx(Form, {
-            form: form,
-            layout: "vertical",
-            onFinish: (values)=>{
-                importWorkflow(values).then((res)=>{
-                    if (res.success) {
-                        message.success(FlowMessageRegistry.getInstance().get(FlowMessageKey.DESIGN_IMPORT_SUCCESS));
-                        props.onClose();
-                    }
-                });
-            },
-            children: /*#__PURE__*/ jsx(Form.Item, {
-                name: "file",
-                label: "流程设计文件",
-                help: "请选择导出的设计文件，文件格式为json格式",
-                children: /*#__PURE__*/ jsx(Upload, {})
+        children: [
+            /*#__PURE__*/ jsx(Alert, {
+                className: design_import_module.notice,
+                type: resetImport ? 'warning' : 'info',
+                showIcon: true,
+                message: resetImport ? '重置导入说明' : '流程导入说明',
+                description: resetImport ? '仅允许导入与当前流程编码一致的文件。确认后，当前流程的全部版本和配置将被导入数据覆盖。' : '系统会检测导入流程的编码。编码未占用时保留原编码；编码已存在时自动生成新编码，并创建一条独立流程。'
+            }),
+            /*#__PURE__*/ jsxs(Form, {
+                form: form,
+                layout: "vertical",
+                onFinish: submitImport,
+                onValuesChange: handleFileChange,
+                children: [
+                    /*#__PURE__*/ jsx(Form.Item, {
+                        name: "file",
+                        label: "流程设计文件",
+                        help: "请选择导出的设计文件，文件格式为json格式",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择流程设计文件'
+                            }
+                        ],
+                        children: /*#__PURE__*/ jsx(Upload, {})
+                    }),
+                    fileInfo && /*#__PURE__*/ jsx(Descriptions, {
+                        size: "small",
+                        bordered: true,
+                        column: 1,
+                        items: [
+                            {
+                                key: 'title',
+                                label: '流程名称',
+                                children: fileInfo.title
+                            },
+                            {
+                                key: 'code',
+                                label: '流程编码',
+                                children: fileInfo.code
+                            }
+                        ]
+                    })
+                ]
             })
-        })
+        ]
     });
 };
 export { DesignImport };

package/dist/components/design-import/upload.js

@@ -10,11 +10,14 @@ const fileToBase64 = (file)=>new Promise((resolve, reject)=>{
 const upload_Upload = (props)=>/*#__PURE__*/ jsx(Upload, {
         maxCount: 1,
         accept: ".json,application/json",
+        onRemove: ()=>{
+            props.onChange?.('');
+            return true;
+        },
         customRequest: async ({ file, onSuccess })=>{
             const currentFile = file;
             const base64 = await fileToBase64(currentFile);
             props.onChange?.(base64);
-            currentFile.name;
             const url = URL.createObjectURL(currentFile);
             onSuccess({
                 url: url,

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

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { Button, Form, Input, Popover, Space, Tabs, message } from "antd";
+import { Button, Divider, Form, Input, Popover, Space, Tabs, message } from "antd";
 import { LayoutHeaderHeight } from "../types.js";
 import { useDesignContext } from "../hooks/use-design-context.js";
-import { CloseOutlined, DownloadOutlined, SaveOutlined } from "@ant-design/icons";
+import { CloseOutlined, ExportOutlined, ImportOutlined, SaveOutlined } from "@ant-design/icons";
 import { EventBus, FlowMessageKey, FlowMessageRegistry } from "@coding-flow/flow-core";
 import { exportWorkflow } from "../../../api/workflow.js";
+import { DesignImport } from "../../design-import/index.js";
 const Left = ()=>/*#__PURE__*/ jsx("div", {
         style: {
             width: 150
@@ -86,36 +87,62 @@ const SaveAsButton = ()=>{
 };
 const Right = ()=>{
     const { state, context } = useDesignContext();
-    return /*#__PURE__*/ jsxs(Space, {
-        style: {
-            marginRight: 20
-        },
+    const [resetImportVisible, setResetImportVisible] = react.useState(false);
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Button, {
-                icon: /*#__PURE__*/ jsx(SaveOutlined, {}),
-                type: "primary",
-                loading: state.view.loading,
-                onClick: ()=>{
-                    context.save().then(()=>{
-                        message.success(FlowMessageRegistry.getInstance().get(FlowMessageKey.DESIGN_SAVE));
-                    });
-                },
-                children: "保存"
-            }),
-            /*#__PURE__*/ jsx(SaveAsButton, {}),
-            /*#__PURE__*/ jsx(Button, {
-                icon: /*#__PURE__*/ jsx(DownloadOutlined, {}),
-                onClick: ()=>{
-                    exportWorkflow(state.workflow.id);
+            /*#__PURE__*/ jsxs(Space, {
+                style: {
+                    marginRight: 20
                 },
-                children: "导出"
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(ExportOutlined, {}),
+                        onClick: ()=>{
+                            exportWorkflow(state.workflow.id);
+                        },
+                        children: "导出流程"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(ImportOutlined, {}),
+                        onClick: ()=>{
+                            setResetImportVisible(true);
+                        },
+                        children: "重置流程"
+                    }),
+                    /*#__PURE__*/ jsx(Divider, {
+                        type: "vertical"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(SaveOutlined, {}),
+                        type: "primary",
+                        loading: state.view.loading,
+                        onClick: ()=>{
+                            context.save().then(()=>{
+                                message.success(FlowMessageRegistry.getInstance().get(FlowMessageKey.DESIGN_SAVE));
+                            });
+                        },
+                        children: "保存"
+                    }),
+                    /*#__PURE__*/ jsx(SaveAsButton, {}),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(CloseOutlined, {}),
+                        onClick: ()=>{
+                            context.close();
+                        },
+                        children: "关闭"
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(Button, {
-                icon: /*#__PURE__*/ jsx(CloseOutlined, {}),
-                onClick: ()=>{
-                    context.close();
+            /*#__PURE__*/ jsx(DesignImport, {
+                open: resetImportVisible,
+                scene: "RESET",
+                currentWorkflowCode: state.workflow.code,
+                onImported: (workId)=>{
+                    context.getPresenter().loadDesign(workId);
                 },
-                children: "关闭"
+                onClose: ()=>{
+                    setResetImportVisible(false);
+                }
             })
         ]
     });

package/package.json

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