@coding-flow/flow-design 0.1.3 → 0.1.5

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/operator-load.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
 import { Button, Form, Select, Space } from "antd";
 import { Field } from "@flowgram.ai/fixed-layout-editor";
@@ -6,6 +6,7 @@ import { EditOutlined } from "@ant-design/icons";
 import { GroovyScriptPreview } from "../../../../script-components/components/groovy-script-preview.js";
 import { OperatorLoadConfigModal } from "../../../../script-components/modal/operator-load-config-modal.js";
 import { GroovyScriptLoader } from "../../../../script-components/components/groovy-script-loader.js";
+import { MaxOperatorCountInput } from "../../../../script-components/components/action/components/max-operator-count.js";
 import { FieldTip } from "../../../field-tip/index.js";
 const SELECT_TYPE_OPTIONS = [
     {
@@ -102,23 +103,44 @@ const OperatorLoadStrategy = ()=>{
                 name: "OperatorLoadStrategy.selectType",
                 render: ({ field: { value: selectType } })=>{
                     const isRangeMode = 'INITIATOR_SELECT' === selectType || 'APPROVER_SELECT' === selectType;
-                    return /*#__PURE__*/ jsx(Form.Item, {
-                        label: /*#__PURE__*/ jsx(FieldTip, {
-                            label: isRangeMode ? "设定人员范围" : "当前操作人",
-                            description: isRangeMode ? "设定可选人员范围，留空表示不限范围（可选任意人）。" : "通过脚本设定该节点的操作人。"
-                        }),
-                        name: [
-                            "OperatorLoadStrategy",
-                            "script"
-                        ],
-                        children: /*#__PURE__*/ jsx(Field, {
-                            name: "OperatorLoadStrategy.script",
-                            render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(GroovyScriptLoader, {
-                                    content: OperatorLoadScriptContent,
-                                    value: value,
-                                    onChange: onChange
+                    return /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Form.Item, {
+                                label: /*#__PURE__*/ jsx(FieldTip, {
+                                    label: isRangeMode ? "设定人员范围" : "当前操作人",
+                                    description: isRangeMode ? "设定可选人员范围，留空表示不限范围（可选任意人）。" : "通过脚本设定该节点的操作人。"
+                                }),
+                                name: [
+                                    "OperatorLoadStrategy",
+                                    "script"
+                                ],
+                                children: /*#__PURE__*/ jsx(Field, {
+                                    name: "OperatorLoadStrategy.script",
+                                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(GroovyScriptLoader, {
+                                            content: OperatorLoadScriptContent,
+                                            value: value,
+                                            onChange: onChange
+                                        })
                                 })
-                        })
+                            }),
+                            isRangeMode && /*#__PURE__*/ jsx(Form.Item, {
+                                label: /*#__PURE__*/ jsx(FieldTip, {
+                                    label: "最大可选人数",
+                                    description: "限制发起人/审批人可选人数的最大值，-1 表示不限制；固定为 1 时即为单选。"
+                                }),
+                                name: [
+                                    "OperatorLoadStrategy",
+                                    "maxOperatorCount"
+                                ],
+                                children: /*#__PURE__*/ jsx(Field, {
+                                    name: "OperatorLoadStrategy.maxOperatorCount",
+                                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(MaxOperatorCountInput, {
+                                            value: value,
+                                            onChange: onChange
+                                        })
+                                })
+                            })
+                        ]
                     });
                 }
             })

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/script-components/components/action/components/add-audit.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Col, Form, Row } from "antd";
 import { OperatorLoadPluginView } from "../../../../plugins/view/operator-load-view.js";
+import { MaxOperatorCountInput } from "./max-operator-count.js";
 const AddAuditInput = (props)=>{
     const script = props.value || '';
     const handleChange = (value)=>{
@@ -12,15 +13,26 @@ const AddAuditInput = (props)=>{
         onChange: handleChange
     });
 };
-const AddAuditActionForm = (props)=>/*#__PURE__*/ jsx(Row, {
-        children: /*#__PURE__*/ jsx(Col, {
-            span: 24,
-            children: /*#__PURE__*/ jsx(Form.Item, {
-                name: "script",
-                label: "加签人员范围",
-                help: "加签人员范围为空时，即为全部人员",
-                children: /*#__PURE__*/ jsx(AddAuditInput, {})
+const AddAuditActionForm = (props)=>/*#__PURE__*/ jsxs(Row, {
+        children: [
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "maxOperatorCount",
+                    label: "最大可选人数",
+                    help: "限制加签时可选人数的最大值，-1 表示不限制；固定为 1 时即为单选",
+                    children: /*#__PURE__*/ jsx(MaxOperatorCountInput, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "script",
+                    label: "加签人员范围",
+                    help: "加签人员范围为空时，即为全部人员",
+                    children: /*#__PURE__*/ jsx(AddAuditInput, {})
+                })
             })
-        })
+        ]
     });
 export { AddAuditActionForm };

package/dist/script-components/components/action/components/delegate.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { OperatorLoadPluginView } from "../../../../plugins/view/operator-load-view.js";
+import { MaxOperatorCountInput } from "./max-operator-count.js";
 import { Col, Form, Row } from "antd";
 const DelegateInput = (props)=>{
     const script = props.value || '';
@@ -12,15 +13,26 @@ const DelegateInput = (props)=>{
         onChange: handleChange
     });
 };
-const DelegateActionForm = (props)=>/*#__PURE__*/ jsx(Row, {
-        children: /*#__PURE__*/ jsx(Col, {
-            span: 24,
-            children: /*#__PURE__*/ jsx(Form.Item, {
-                name: "script",
-                label: "委派人员范围",
-                help: "委派人员范围为空时，即为全部人员",
-                children: /*#__PURE__*/ jsx(DelegateInput, {})
+const DelegateActionForm = (props)=>/*#__PURE__*/ jsxs(Row, {
+        children: [
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "maxOperatorCount",
+                    label: "最大可选人数",
+                    help: "限制委派时可选人数的最大值，-1 表示不限制；固定为 1 时即为单选",
+                    children: /*#__PURE__*/ jsx(MaxOperatorCountInput, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "script",
+                    label: "委派人员范围",
+                    help: "委派人员范围为空时，即为全部人员",
+                    children: /*#__PURE__*/ jsx(DelegateInput, {})
+                })
             })
-        })
+        ]
     });
 export { DelegateActionForm };

package/dist/script-components/components/action/components/max-operator-count.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * 最大可选人数的默认值，-1 表示不限制
+ */
+export declare const DEFAULT_MAX_OPERATOR_COUNT = -1;
+interface MaxOperatorCountInputProps {
+    value?: number;
+    onChange?: (value: number) => void;
+}
+/**
+ * 最大可选人数输入框
+ * 为空时按 -1（不限制）处理
+ */
+export declare const MaxOperatorCountInput: React.FC<MaxOperatorCountInputProps>;
+export {};

package/dist/script-components/components/action/components/max-operator-count.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { InputNumber } from "antd";
+const DEFAULT_MAX_OPERATOR_COUNT = -1;
+const MaxOperatorCountInput = (props)=>/*#__PURE__*/ jsx(InputNumber, {
+        style: {
+            width: '100%'
+        },
+        min: -1,
+        placeholder: "-1 表示不限制",
+        value: props.value ?? DEFAULT_MAX_OPERATOR_COUNT,
+        onChange: (val)=>{
+            props.onChange?.(val ?? DEFAULT_MAX_OPERATOR_COUNT);
+        }
+    });
+export { DEFAULT_MAX_OPERATOR_COUNT, MaxOperatorCountInput };

package/dist/script-components/components/action/components/transfer.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { OperatorLoadPluginView } from "../../../../plugins/view/operator-load-view.js";
+import { MaxOperatorCountInput } from "./max-operator-count.js";
 import { Col, Form, Row } from "antd";
 const TransferInput = (props)=>{
     const script = props.value || '';
@@ -12,15 +13,26 @@ const TransferInput = (props)=>{
         onChange: handleChange
     });
 };
-const TransferActionForm = (props)=>/*#__PURE__*/ jsx(Row, {
-        children: /*#__PURE__*/ jsx(Col, {
-            span: 24,
-            children: /*#__PURE__*/ jsx(Form.Item, {
-                name: "script",
-                label: "转办人员范围",
-                help: "转办人员范围为空时，即为全部人员",
-                children: /*#__PURE__*/ jsx(TransferInput, {})
+const TransferActionForm = (props)=>/*#__PURE__*/ jsxs(Row, {
+        children: [
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "maxOperatorCount",
+                    label: "最大可选人数",
+                    help: "限制转办时可选人数的最大值，-1 表示不限制；固定为 1 时即为单选",
+                    children: /*#__PURE__*/ jsx(MaxOperatorCountInput, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(Col, {
+                span: 24,
+                children: /*#__PURE__*/ jsx(Form.Item, {
+                    name: "script",
+                    label: "转办人员范围",
+                    help: "转办人员范围为空时，即为全部人员",
+                    children: /*#__PURE__*/ jsx(TransferInput, {})
+                })
             })
-        })
+        ]
     });
 export { TransferActionForm };

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { Button, Card, Form, Select, Space } from "antd";
+import { Button, Card, Form, Input, Select, Space } from "antd";
 import { useTargetWorkflowPresenter } from "./hooks/use-target-workflow-presenter.js";
 import { SubProcessOperatorPluginView } from "../../../plugins/view/sub-process-opreator-view.js";
 import { FormDataView } from "../form-data/index.js";
@@ -94,6 +94,17 @@ const SubProcessConfigItem = ({ form, index, removable, remove })=>{
                 children: /*#__PURE__*/ jsx(FormDataView, {
                     form: state.form
                 })
+            }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                name: [
+                    index,
+                    "workTitle"
+                ],
+                label: "子流程标题",
+                tooltip: "不填写时子流程使用流程定义标题；填写后该实例以自定义标题展示（issue #197）",
+                children: /*#__PURE__*/ jsx(Input, {
+                    placeholder: "不填则使用流程定义标题"
+                })
             })
         ]
     });

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

@@ -19,6 +19,10 @@ export declare class SubProcessPresenter {
     updateScript(values: SubProcessFormValues): void;
     private toFormData;
     private toScript;
+    /**
+     * 转义 Groovy 字符串字面量中的单引号，防止用户输入破坏脚本。
+     */
+    private escapeSingleQuotes;
     private isRecord;
     private isSubProcessConfig;
 }

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

@@ -48,6 +48,7 @@ class SubProcessPresenter {
         const meta = JSON.stringify(values);
         const requests = values.processes.map((config)=>{
             const formData = this.toFormData(config);
+            if (config.workTitle) return `request.toCreateRequest('${config.workId}', ${config.operatorId}, '${config.actionId}', '${formData}', '${this.escapeSingleQuotes(config.workTitle)}')`;
             return `request.toCreateRequest('${config.workId}', ${config.operatorId}, '${config.actionId}', '${formData}')`;
         }).join(',\n            ');
         return `
@@ -59,9 +60,12 @@ class SubProcessPresenter {
             ];
         }`;
     }
+    escapeSingleQuotes(value) {
+        return value.replace(/'/g, "\\'");
+    }
     isRecord(value) {
         return 'object' == typeof value && null !== value;
     }
-    isSubProcessConfig = (value)=>this.isRecord(value) && (void 0 === value.workId || 'string' == typeof value.workId) && (void 0 === value.actionId || 'string' == typeof value.actionId) && (void 0 === value.operatorId || 'string' == typeof value.operatorId || 'number' == typeof value.operatorId) && (void 0 === value.formData || 'string' == typeof value.formData);
+    isSubProcessConfig = (value)=>this.isRecord(value) && (void 0 === value.workId || 'string' == typeof value.workId) && (void 0 === value.actionId || 'string' == typeof value.actionId) && (void 0 === value.operatorId || 'string' == typeof value.operatorId || 'number' == typeof value.operatorId) && (void 0 === value.formData || 'string' == typeof value.formData) && (void 0 === value.workTitle || 'string' == typeof value.workTitle);
 }
 export { SubProcessPresenter };

package/dist/script-components/components/sub-process/typings/index.d.ts

@@ -11,6 +11,10 @@ export interface SubProcessConfig {
     actionId?: string;
     operatorId?: string | number;
     formData?: string;
+    /**
+     * 子流程标题；不填则子流程回落流程定义标题（issue #197）
+     */
+    workTitle?: string;
 }
 export interface SubProcessFormValues {
     processes: SubProcessConfig[];

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.3",
+  "version": "0.1.5",
   "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.3",
-    "@coding-flow/flow-icons": "0.1.3",
-    "@coding-flow/flow-pc-ui": "0.1.3",
-    "@coding-flow/flow-types": "0.1.3"
+    "@coding-flow/flow-core": "0.1.5",
+    "@coding-flow/flow-pc-ui": "0.1.5",
+    "@coding-flow/flow-types": "0.1.5",
+    "@coding-flow/flow-icons": "0.1.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/styled-components": "^5.1.36",
-    "@coding-flow/flow-core": "0.1.3",
-    "@coding-flow/flow-types": "0.1.3"
+    "@coding-flow/flow-core": "0.1.5",
+    "@coding-flow/flow-types": "0.1.5"
   },
   "scripts": {
     "build": "rslib build",