@coding-flow/flow-design 0.1.2 → 0.1.4

package/README.md

@@ -1,13 +1,13 @@
-# @coding-flow/flow-pc-design
+# @coding-flow/flow-design
 
-Flow Engine PC 端流程设计器组件库，提供节点配置、属性面板、脚本配置等功能。
+Flow Engine 流程设计器组件库，提供可视化流程设计、节点配置、属性面板、脚本配置等功能。
 
 ## 简介
 
-`flow-pc-design` 是 Flow Engine PC 端的流程设计器组件库，提供：
+`flow-design` 是 Flow Engine 的流程设计器组件库，提供：
 
-- 流程设计器（可视化流程设计）
-- 节点配置面板（15 种节点类型配置）
+- 流程设计器（基于 @flowgram.ai 的可视化流程设计）
+- 节点配置面板（19 种节点类型配置）
 - 属性面板（节点属性编辑）
 - 脚本配置器（Groovy 脚本编辑）
 - 变量选择器
@@ -15,7 +15,7 @@ Flow Engine PC 端流程设计器组件库，提供节点配置、属性面板
 
 ### 依赖关系
 
-- **依赖**: `@coding-flow/flow-core`, `@coding-flow/flow-types`, `@coding-flow/flow-pc-ui`
+- **依赖**: `@coding-flow/flow-core`、`@coding-flow/flow-types`、`@coding-flow/flow-icons`、`@coding-flow/flow-pc-ui`、`@flowgram.ai/fixed-layout-editor`、`@coding-script/script-engine`
 
 ## Setup
 
@@ -33,182 +33,6 @@ pnpm install
 pnpm run build
 ```
 
-监听模式构建:
-
-```bash
-pnpm run dev
-```
-
-## 核心功能
-
-### 流程设计器
-
-可视化流程设计器，支持：
-
-- 节点拖拽添加
-- 节点连线
-- 节点配置
-- 流程预览
-- 流程校验
-- 流程导入/导出
-
-```typescript
-import { WorkflowDesigner } from '@coding-flow/flow-pc-design';
-
-<WorkflowDesigner
-  workflow={workflow}
-  onChange={handleWorkflowChange}
-  onValidate={handleValidate}
-/>
-```
-
-### 节点配置
-
-支持 15 种节点类型的配置：
-
-**基础节点 (9 种)**:
-- `StartNode` - 开始节点
-- `EndNode` - 结束节点
-- `ApprovalNode` - 审批节点
-- `HandleNode` - 办理节点
-- `NotifyNode` - 通知节点
-- `RouterNode` - 路由节点
-- `SubProcessNode` - 子流程节点
-- `DelayNode` - 延迟节点
-- `TriggerNode` - 触发节点
-
-**块节点 (3 种)**:
-- `ConditionNode` - 条件节点
-- `ParallelNode` - 并行节点
-- `InclusiveNode` - 包容节点
-
-**分支节点 (3 种)**:
-- `ConditionBranchNode` - 条件分支
-- `ParallelBranchNode` - 并行分支
-- `InclusiveBranchNode` - 包容分支
-
-### 属性面板
-
-节点属性编辑：
-
-- 基本信息配置
-- 审批人配置
-- 表单权限配置
-- 通知配置
-- 超时策略配置
-
-### 脚本配置器
-
-Groovy 脚本编辑支持：
-
-- 语法高亮
-- 代码补全
-- 语法检查
-- 变量提示
-- TypeScript/Groovy 转换
-
-```typescript
-import { ScriptEditor } from '@coding-flow/flow-pc-design';
-
-<ScriptEditor
-  value={script}
-  onChange={handleScriptChange}
-  scriptType="CONDITION"
-  variables={availableVariables}
-/>
-```
-
-### 变量选择器
-
-流程变量选择：
-
-- 表单字段变量
-- 流程实例变量
-- 系统内置变量
-- 自定义变量
-
-```typescript
-import { VariablePicker } from '@coding-flow/flow-pc-design';
-
-<VariablePicker
-  variables={variables}
-  onSelect={handleVariableSelect}
-  filterTypes={['FORM_FIELD', 'INSTANCE']}
-/>
-```
-
-### 策略配置
-
-节点策略配置：
-
-- 多人审批策略（会签/或签）
-- 超时策略
-- 通知策略
-- 权限策略
-
-## 模块结构
-
-```
-flow-pc-design/
-├── src/
-│   ├── designer/       # 流程设计器
-│   ├── node-config/    # 节点配置组件
-│   ├── property-panel/ # 属性面板
-│   ├── script/         # 脚本编辑器
-│   ├── variable/       # 变量选择器
-│   ├── strategy/       # 策略配置
-│   ├── components/     # 公共组件
-│   └── index.ts        # 统一导出
-└── README.md
-```
-
-## 使用示例
-
-### 流程设计器
-
-```typescript
-import { WorkflowDesigner } from '@coding-flow/flow-pc-design';
-import type { Workflow } from '@coding-flow/flow-types';
-
-const MyWorkflowDesigner = () => {
-  const [workflow, setWorkflow] = useState<Workflow>({ ... });
-
-  return (
-    <WorkflowDesigner
-      workflow={workflow}
-      onChange={setWorkflow}
-      onSave={handleSave}
-      onPreview={handlePreview}
-    />
-  );
-};
-```
-
-### 脚本编辑器
-
-```typescript
-import { ScriptEditor } from '@coding-flow/flow-pc-design';
-import type { ScriptType } from '@coding-flow/flow-pc-design';
-
-const MyScriptEditor = () => {
-  const [script, setScript] = useState('');
-
-  return (
-    <ScriptEditor
-      value={script}
-      onChange={setScript}
-      scriptType="CONDITION"
-      variables={variables}
-      onInsertVariable={(variable) => {
-        setScript(prev => prev + variable);
-      }}
-    />
-  );
-};
-```
-
 ## Learn more
 
-- [Rslib documentation](https://lib.rsbuild.io/) - Rslib 特性和 API
-- [Flow Engine Docs](https://github.com/codingapi/flow-engine) - 完整文档
-- [CLAUDE.md](../../CLAUDE.md) - 开发指南
+- [Flow Engine Docs](https://github.com/codingapi/flow-engine) - 完整文档

package/dist/components/design-editor/node-components/strategy/advice.js

@@ -49,6 +49,25 @@ const AdviceStrategy = ()=>{
                             })
                         })
                 })
+            }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: /*#__PURE__*/ jsx(FieldTip, {
+                    label: "隐藏审批意见",
+                    description: "开启后，审批时不展示审批意见输入框，仅弹框确认。"
+                }),
+                name: [
+                    "AdviceStrategy",
+                    "adviceHidden"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "AdviceStrategy.adviceHidden",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Switch, {
+                                value: value,
+                                onChange: onChange
+                            })
+                        })
+                })
             })
         ]
     });

package/dist/components/design-editor/nodes/start/index.js

@@ -7,8 +7,7 @@ const StartNodeRegistry = {
         selectable: false,
         copyDisable: true,
         expandable: false,
-        addDisable: true,
-        editTitleDisable: true
+        addDisable: true
     },
     info: {
         icon: 'START',

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

@@ -1,3 +1,4 @@
+import { generateUUID } from "../../../utils/uuid.js";
 class WorkflowFormManager {
     form;
     formList;
@@ -45,7 +46,7 @@ class WorkflowFormManager {
         } else list.push(field);
         if (!exist) list.push({
             ...values,
-            id: crypto.randomUUID()
+            id: generateUUID()
         });
         const mainCode = this.form.code;
         if (code === mainCode) return {

package/dist/components/design-panel/tabs/setting.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
+import { InputNumber } from "antd";
 import { CardForm, Panel } from "@coding-flow/flow-pc-ui";
+import { FieldTip } from "../../field-tip/index.js";
 import { InterferePanel } from "../panels/workflow/interfere.js";
 import { UrgePanel } from "../panels/workflow/urge.js";
 import { useDesignContext } from "../hooks/use-design-context.js";
@@ -12,22 +14,37 @@ const TabSetting = ()=>{
     const workflowStrategyManager = new WorkflowStrategyManager();
     const resetFieldsValue = ()=>{
         const formData = workflowStrategyManager.toRender(state.workflow.strategies);
-        form.setFieldsValue(formData);
+        form.setFieldsValue({
+            ...formData,
+            maxNestDepth: state.workflow.maxNestDepth ?? 10
+        });
     };
     react.useEffect(()=>{
         resetFieldsValue();
     }, [
-        state.workflow.strategies
+        state.workflow.strategies,
+        state.workflow.maxNestDepth
     ]);
     react.useEffect(()=>{
         form.resetFields();
         resetFieldsValue();
         formActionContext.addAction({
-            save: ()=>workflowStrategyManager.toData(form.getFieldsValue()),
+            save: ()=>{
+                const formValues = form.getFieldsValue();
+                const strategyData = workflowStrategyManager.toData(formValues);
+                return {
+                    ...strategyData || {},
+                    maxNestDepth: formValues.maxNestDepth
+                };
+            },
             key: ()=>'setting',
             validate: ()=>new Promise((resolve, reject)=>{
                     form.validateFields().then((values)=>{
-                        resolve(workflowStrategyManager.toData(values));
+                        const strategyData = workflowStrategyManager.toData(values);
+                        resolve({
+                            ...strategyData || {},
+                            maxNestDepth: values.maxNestDepth
+                        });
                     }).catch(reject);
                 })
         });
@@ -42,6 +59,26 @@ const TabSetting = ()=>{
             }),
             /*#__PURE__*/ jsx(UrgePanel, {
                 form: form
+            }),
+            /*#__PURE__*/ jsx(CardForm, {
+                form: form,
+                title: "循环防护配置",
+                children: /*#__PURE__*/ jsx(CardForm.Item, {
+                    name: [
+                        "maxNestDepth"
+                    ],
+                    label: /*#__PURE__*/ jsx(FieldTip, {
+                        label: "最大嵌套深度",
+                        description: "子流程嵌套层数上限（默认 10）。运行期创建子流程时沿父链统计嵌套层数，超过该值将拒绝创建，用于兜底防护子流程创建自身/祖先流程等循环配置导致的无限递归。"
+                    }),
+                    children: /*#__PURE__*/ jsx(InputNumber, {
+                        min: 1,
+                        max: 100,
+                        style: {
+                            width: '100%'
+                        }
+                    })
+                })
             })
         ]
     });

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

@@ -16,6 +16,7 @@ export interface Workflow {
     operatorCreateScript: string;
     strategies?: any[];
     nodes?: FlowNode[];
+    maxNestDepth?: number;
 }
 export interface FlowNode {
     id: string;

package/dist/script-components/components/form-data/index.js

@@ -2,7 +2,7 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import react from "react";
 import { FormDataList } from "./components/list.js";
 import { Provider } from "react-redux";
-import { formDataStore } from "./store.js";
+import { createFormDataStore } from "./store.js";
 import { FormDataContext } from "./context/index.js";
 import { createFormDataContext, useFormDataContext } from "./hooks/use-form-data-context.js";
 const FormDataContent = (props)=>{
@@ -28,12 +28,16 @@ const FormDataContextContent = (props)=>{
         })
     });
 };
-const FormDataReduxContent = (props)=>/*#__PURE__*/ jsx(Provider, {
-        store: formDataStore,
+const FormDataReduxContent = (props)=>{
+    const storeRef = react.useRef(void 0);
+    if (!storeRef.current) storeRef.current = createFormDataStore();
+    return /*#__PURE__*/ jsx(Provider, {
+        store: storeRef.current,
         children: /*#__PURE__*/ jsx(FormDataContextContent, {
             ...props
         })
     });
+};
 const FormDataView = (props)=>{
     const form = props.form;
     if (form) return /*#__PURE__*/ jsx(FormDataReduxContent, {

package/dist/script-components/components/form-data/store.d.ts

@@ -5,11 +5,17 @@ export type FormDataStoreAction = {
 };
 export declare const formDataSlice: import("@reduxjs/toolkit").Slice<FormDataState, FormDataStoreAction, "formData", "formData", {}>;
 export declare const updateState: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<FormDataState> | ((prev: FormDataState) => Partial<FormDataState>), "formData/updateState">;
-export declare const formDataStore: import("@reduxjs/toolkit").EnhancedStore<{
+/**
+ * 按实例创建表单数据 store。
+ * 每个 FormDataView 使用独立的 store，避免多个子流程配置项共享模块级单例 store
+ * 导致表单数据互相覆盖、输入时被刷新。
+ */
+export declare const createFormDataStore: () => import("@reduxjs/toolkit").EnhancedStore<{
     formData: FormDataState;
 }, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
     dispatch: import("redux-thunk").ThunkDispatch<{
         formData: FormDataState;
     }, undefined, import("redux").UnknownAction>;
 }>, import("redux").StoreEnhancer]>>;
-export type FormDataReduxState = ReturnType<typeof formDataStore.getState>;
+export type FormDataStore = ReturnType<typeof createFormDataStore>;
+export type FormDataReduxState = ReturnType<FormDataStore['getState']>;

package/dist/script-components/components/form-data/store.js

@@ -13,9 +13,9 @@ const formDataSlice = createSlice({
     }
 });
 const { updateState } = formDataSlice.actions;
-const formDataStore = configureStore({
-    reducer: {
-        formData: formDataSlice.reducer
-    }
-});
-export { formDataSlice, formDataStore, updateState };
+const createFormDataStore = ()=>configureStore({
+        reducer: {
+            formData: formDataSlice.reducer
+        }
+    });
+export { createFormDataStore, formDataSlice, updateState };

package/dist/script-components/components/sub-process/index.js

@@ -102,7 +102,7 @@ const SubProcessView = (props)=>{
     const [form] = Form.useForm();
     const subProcessPresenter = useSubProcessPresenter(props);
     react.useEffect(()=>{
-        if (props.value) {
+        if (subProcessPresenter.isExternalChange(props.value)) {
             const data = subProcessPresenter.parserScript(props.value);
             form.resetFields();
             form.setFieldsValue({

package/dist/script-components/components/sub-process/presenters/sub-process-presenter.d.ts

@@ -1,7 +1,20 @@
 import { SubProcessFormValues, SubProcessViewProps } from "../typings";
 export declare class SubProcessPresenter {
     private readonly props;
+    /**
+     * 自身最后一次生成的脚本。
+     * 用于区分"自身编辑触发的脚本变更"与"外部脚本变更"，
+     * 避免编辑回填表单后再次重置表单，导致输入时表单自动刷新。
+     */
+    private lastEmittedScript?;
     constructor(props: SubProcessViewProps);
+    /**
+     * 判断脚本变更是否来自外部（非自身编辑产生）。
+     * 仅外部变更才需要将脚本解析结果回填到表单。
+     *
+     * @param value 当前脚本内容
+     */
+    isExternalChange(value: string | undefined): boolean;
     parserScript(value: string): SubProcessFormValues;
     updateScript(values: SubProcessFormValues): void;
     private toFormData;

package/dist/script-components/components/sub-process/presenters/sub-process-presenter.js

@@ -1,9 +1,14 @@
 import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
 class SubProcessPresenter {
     props;
+    lastEmittedScript;
     constructor(props){
         this.props = props;
     }
+    isExternalChange(value) {
+        if (!value) return false;
+        return value !== this.lastEmittedScript;
+    }
     parserScript(value) {
         const meta = GroovyScriptConvertorUtil.getScriptMeta(value);
         if (!meta) return {
@@ -25,7 +30,9 @@ class SubProcessPresenter {
         };
     }
     updateScript(values) {
-        this.props.onChange(this.toScript(values));
+        const script = this.toScript(values);
+        this.lastEmittedScript = script;
+        this.props.onChange(script);
     }
     toFormData(config) {
         if (config.formData) {

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from "./id";
+export * from "./uuid";

package/dist/utils/index.js

@@ -1 +1,2 @@
 export * from "./id.js";
+export * from "./uuid.js";

package/dist/utils/uuid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 生成 UUID v4。
+ * <p>优先使用原生 crypto.randomUUID（仅安全上下文与较新浏览器可用）；
+ * 回退到 crypto.getRandomValues 构造（非安全上下文同样可用）；
+ * 最后回退 Math.random 拼接，保证在打包后的生产环境（HTTP/旧浏览器）不抛错。
+ */
+export declare const generateUUID: () => string;

package/dist/utils/uuid.js

@@ -0,0 +1,16 @@
+const generateUUID = ()=>{
+    if ("u" > typeof crypto && 'function' == typeof crypto.randomUUID) return crypto.randomUUID();
+    if ("u" > typeof crypto && 'function' == typeof crypto.getRandomValues) {
+        const bytes = crypto.getRandomValues(new Uint8Array(16));
+        bytes[6] = 0x0f & bytes[6] | 0x40;
+        bytes[8] = 0x3f & bytes[8] | 0x80;
+        const hex = Array.from(bytes, (b)=>b.toString(16).padStart(2, '0')).join('');
+        return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c)=>{
+        const r = 16 * Math.random() | 0;
+        const v = 'x' === c ? r : 0x3 & r | 0x8;
+        return v.toString(16);
+    });
+};
+export { generateUUID };

package/package.json

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