@coding-flow/flow-design 0.1.3 → 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-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/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.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.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-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.3",
-    "@coding-flow/flow-types": "0.1.3"
+    "@coding-flow/flow-types": "0.1.4",
+    "@coding-flow/flow-core": "0.1.4"
   },
   "scripts": {
     "build": "rslib build",