{"_id":"mldong-flow-designer-plus","_rev":"4821958-66a2dbaf0c22a76e175128e3","dist-tags":{"latest":"3.2.3"},"name":"mldong-flow-designer-plus","time":{"created":"2024-07-25T23:11:43.793Z","modified":"2026-10-14T02:05:20.156Z","1.0.0":"2024-07-25T15:08:07.532Z","1.0.1":"2024-07-25T15:22:12.989Z","1.0.2":"2024-07-27T05:58:30.244Z","1.0.3":"2024-07-27T09:48:49.659Z","1.0.4":"2024-07-27T11:19:10.533Z","1.0.5":"2024-07-28T01:10:40.859Z","1.0.6":"2024-07-29T12:46:33.057Z","1.0.7":"2024-07-30T15:40:17.758Z","1.0.8":"2024-07-30T16:30:55.696Z","1.0.9":"2024-11-15T02:18:19.439Z","1.0.10":"2024-11-15T03:29:38.776Z","1.0.11":"2024-12-03T13:54:12.777Z","1.0.12":"2024-12-03T14:42:12.093Z","1.0.13":"2024-12-04T13:08:57.294Z","1.0.14":"2024-12-13T02:21:07.960Z","1.0.15":"2025-01-01T04:15:56.849Z","1.0.16":"2025-01-01T08:16:12.203Z","2.0.0":"2025-01-12T14:36:13.513Z","2.0.1":"2025-01-25T14:48:24.274Z","2.0.2":"2025-01-25T15:10:44.389Z","2.0.3":"2025-05-20T08:13:18.396Z","2.0.4":"2025-05-20T08:19:07.854Z","2.0.5":"2025-06-05T14:47:57.617Z","2.0.6":"2025-08-19T08:11:13.422Z","2.0.7":"2025-09-02T11:27:52.178Z","2.0.8":"2026-03-03T09:36:10.099Z","2.0.9":"2026-03-04T07:19:27.634Z","2.0.10":"2026-04-28T10:01:50.087Z","2.0.11":"2026-05-23T06:44:44.194Z","2.0.12":"2026-05-28T14:26:41.300Z","2.0.13":"2026-07-05T07:53:39.453Z","3.0.0":"2026-07-30T14:53:00.099Z","3.0.1":"2026-07-30T15:05:06.053Z","3.0.2":"2026-07-31T17:35:37.002Z","3.0.3":"2026-08-05T08:45:25.638Z","3.1.0":"2026-08-08T03:04:18.328Z","3.1.1":"2026-08-13T02:02:42.091Z","3.2.0":"2026-09-20T14:33:50.941Z","3.2.1":"2026-09-21T14:42:53.662Z","3.2.2":"2026-09-27T02:25:32.624Z","3.2.3":"2026-10-14T02:05:03.419Z"},"versions":{"1.0.0":{"name":"mldong-flow-designer-plus","version":"1.0.0","keywords":["工作流","流程设计器","Web流程设计器","Vue3","LogicFlow","Element Plus","Ant Design of Vue3"],"author":{"name":"mldong"},"license":"Apache License 2.0","_id":"mldong-flow-designer-plus@1.0.0","maintainers":[{"name":"mldong","email":"mldong666@qq.com"}],"homepage":"https://gitee.com/mldong666/flow-designer","bugs":{"url":"https://gitee.com/mldong666/flow-designer/issues"},"dist":{"shasum":"d9f15942eff49591ecf81fb7a21cf65674bf846a","tarball":"https://registry.npmmirror.com/mldong-flow-designer-plus/-/mldong-flow-designer-plus-1.0.0.tgz","fileCount":101,"integrity":"sha512-IKBdtI72CJsLARQX6sghEXYOEDsPuFINpvEiriMLi8Rmd5RpnFrPhshuhjn3RwII4auz4C7mcFCusD3XRNWZQA==","signatures":[{"sig":"MEUCIEsudIHrd4Qe24qhkQxy6OTiQFdoxcT2uXYjsrv8anpHAiEApN6nDkplNTLh2p4QlI1W5r1KGOKwfd0CSiQ2uttPF4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3748997,"size":966057},"main":"lib/mldong-flow-designer-plus.umd.cjs","type":"module","gitHead":"a106571229b11030ada993b2dc80dacebbf92749","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:lib":"vue-tsc -b && vite build --config vite.config.lib.ts"},"_npmUser":{"name":"mldong","email":"mldong666@qq.com"},"_npmVersion":"7.21.0","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n```\n#### 只读模式\n```html\n\n \n\n\n```\n### 属性说明\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --- | --- | --- | --- | --- |\n| v-model:value | object | - | 流程图数据 | - |\n| theme | FDThemeConfig | - | 主题配置 | - |\n| highLight | FDHighLightType | 高亮配置 | - |\n| initDndPanel | boolean | true | 是否初始化拖拽面板 | - |\n| dndPanel | FDPatternItem | - | 拖拽面板配置 | - |\n| initControl | boolean | true | 是否初始化控制面板 | - |\n| control | FDControlItem | - | 控制面板配置 | - |\n| blankContextmenu | Function | - | 画布右键事件 | 1.0.16+ |\n| nodeClick | Function | - | 节点点击事件 | - |\n| edgeClick | Function | - | 边点击事件 | - |\n| drawerWidth | String | Number | 600px | 抽屉宽度 | - |\n| modalWidth | String | Number | 60% | 弹窗宽度 | - |\n| processForm | FDFormType | - | 流程表单配置 | - |\n| edgeForm | FDFormType | - | 边表单配置 | - |\n| defaultEdgeType | string | snaker:transition | 默认边 | - |\n| typePrefix | string | snaker: | 自定义节点/边类型前缀 | - |\n| viewer | boolean | false | 是否查看模式 | - |\n| dagreOptions | Object | - | [自动布局配置](https://site.logic-flow.cn/tutorial/extension/layout#%E5%B8%83%E5%B1%80%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9) | 2.0.8+ |\n| mode | `'canvas'` \\| `'dingtalk'` | `'canvas'` | 渲染模式：canvas 为拖拽画布，dingtalk 为钉钉风格树形设计器 | 3.0.0+ |\n| locale | `'zh-CN'` \\| `'en-US'` \\| string | 不传则沿用 `setLocale` 的全局值 | 内置文案语种 | 3.2.0+ |\n| messages | `Record` | - | 按语种覆盖/追加内置词条，如 `{ 'zh-CN': { 'fd.field.assignee': '办理人' } }` | 3.2.0+ |\n\n### 国际化（v3.2.0+）\n\n内置 zh-CN / en-US 双语，零额外依赖（peerDependencies 仍只有 vue）。语种 API 从包入口导出：\n\n```typescript\nimport Designer, { setLocale, getLocale, t, extendMessages, FD_MESSAGES_ZH } from 'mldong-flow-designer-plus'\n\nsetLocale('en-US') // 命令式切换\nextendMessages('zh-CN', { 'fd.field.assignee': '办理人' }) // 改术语，已渲染的表单会同步更新\nt('fd.dnd.task.label') // 取单条文案，支持 {name} 插值\n```\n\n宿主已有 i18n 时，把宿主当前语种透传到 `locale` prop 即可，无需引入第二套翻译体系：\n\n```vue\n\n```\n\n约定与边界：\n\n- **只有界面文案参与翻译**。节点显示名（`dndPanel.text`、`条件1`/`分支1`、默认流程里的 `text.value`）、\n `options[].value`、`defaultValue` 等会写进图数据或流程定义 JSON，任何语种下都保持原值——\n 切语言不会改写已保存的流程，新建节点也按创建时的语种取 `label`。\n- 缺 key 时回落 zh-CN 并打印一次告警；zh-CN 也没有则原样返回 key。\n- 切换语种的生效范围：表单、卡片、抽屉标题、钉钉模式控制条、钉钉模式加号面板默认项等 computed 渲染处即时更新；\n canvas 模式的 LogicFlow 拖拽面板与右键菜单在插件初始化时求值，需要重挂载设计器组件\n （宿主按整页刷新处理语种切换的场景无需额外处理）。\n- 表单标签列宽随语种变化（英文更长且标签不换行），值放在词条 `fd.labelWidth.*` 里；\n 自定义 `processForm` 时如需对齐，一并传 `labelWidth`。\n- 内置词条表 `FD_MESSAGES_ZH` / `FD_MESSAGES_EN` 已导出，宿主可直接并入自己的语言包。\n- 包同时提供 `lib/`（ESM/UMD）与随包发布的 `packages/` 源码，两者共用同一个语种单例\n （挂在 `globalThis`），但请固定一种引入方式，避免两份构建产物各自打进入口。\n#### FDThemeConfig\n```typescript\nexport declare type FDThemeConfig = {\n primaryColor?: string; // 主题色\n edgePrimaryColor?: string; // 边主题色\n activeColor?: string; // 进行时节点颜色\n historyColor?: string; // 历史节点/边颜色\n backgroundColor ?: string;// 画布背景颜色\n}\n```\n#### FDHighLightType\n```typescript\nexport declare type FDHighLightType = {\n historyNodeNames?: Array; // 历史节点名称\n historyEdgeNames?: Array; // 历史边名称\n activeNodeNames?: Array; // 活跃节点名称\n /**\n * 节点成员进度（可选，3.0.3+）：key=节点 id，value=该节点办理人列表及完成状态\n * 任意节点可带（历史节点 done、进行中节点 active）；会签节点额外带 type 区分并行/顺序\n * 钉钉模式 NodeCard 存在时渲染成员列表回显（✓已完成 / ▶当前轮到 / ·未处理）\n */\n nodeProgress?: {\n [nodeId: string]: {\n type?: 'PARALLEL' | 'SEQUENTIAL'; // 会签类型（仅会签节点）\n members: Array;\n }\n }\n}\n// 节点成员进度列表项\nexport declare type FDNodeProgressMember = {\n id: string; // 用户ID\n name: string; // 用户姓名（后端组装）\n done?: boolean; // 是否已完成（历史任务办理人）\n active?: boolean; // 当前轮到的办理人（进行中任务 / 顺序会签）\n}\n```\n#### FDPatternItem\n```typescript\nexport declare type FDPatternItem = {\n type?: string;\n text?: string;\n label?: string;\n icon?: string;\n className?: string;\n properties?: object;\n callback?: () => void;\n hide?: boolean; // 是否隐藏\n sort?: number; // 排序字段\n drawerTitle?: string;// 抽屉标题\n nodeClick?: (e: any) => void;\n form?: FDFormType; // 表单配置\n};\n```\n#### FDControlItem\n```typescript\nexport declare type FDControlItem = {\n key?: string; // 唯一编码\n iconClass?: string; // 图标类\n title?: string; // 标题\n text?: string; // 文本\n onClick?: Function // 事件函数\n hide?: boolean; // 是否隐藏\n sort?: number; // 排序字段\n}\n```\n#### FDFormType和FDFormItemType\n```typescript\n/**\n * 表单数据类型\n */\nexport declare type FDFormType = {\n labelWidth?: string;\n formItems: Array;\n} \n/**\n * 表单项数据类型\n */\nexport declare type FDFormItemType = {\n name: string; // 表单项名称\n label?: string; // 表单项标签\n component?: 'Input' | 'Select'; // 表单组件\n render?: (args: any) => VNode;\n componentProps?: any; // 表单组件属性\n} \n```\n### 事件\n| 事件名 | 说明 | 回调参数 | 版本 |\n| --- | --- | --- | --- |\n| on-init | 初始化事件 | (lf: any) => void | - |\n| on-render | 渲染事件 | (lf: any) => void | - |\n| on-save | 控制面板保存事件 | (graphData: any) => void | - |\n| node-click | 节点点击事件（两种模式统一暴露，与 nodeClick prop 回调并存） | ({ data, patternItem, lf }) => void | 3.0.0+ |\n| edge-click | 边点击事件（两种模式统一暴露，与 edgeClick prop 回调并存） | ({ data, patternItem, lf }) => void | 3.0.0+ |\n\n## 钉钉模式（v3.0.0+）\n\n通过 `mode=\"dingtalk\"` 启用钉钉风格树形设计器，替代拖拽画布。适合审批流等线性流程场景。\n\n### 启用方式\n\n```html\n\n```\n\n也可以通过流程定义数据中的 `mode` 字段自动识别：\n\n```json\n{ \"mode\": \"dingtalk\", \"nodes\": [...], \"edges\": [...] }\n```\n\n优先级：`prop > 数据字段 > 默认 'canvas'`\n\n### API 兼容\n\n钉钉模式暴露 `FDDesignerAPI`（`@on-init` / `@on-render` 回调参数），API 命名与 LogicFlow 实例一致：\n\n| 方法 | 说明 |\n|------|------|\n| `updateText(id, text)` | 更新节点显示文本 |\n| `setProperties(id, props)` | 设置节点属性（合并） |\n| `getProperties(id)` | 读取节点属性 |\n| `deleteProperty(id, key)` | 删除节点属性 |\n| `changeNodeId(oldId, newId)` | 修改节点 ID |\n| `getNodeDataById(id)` | 按 ID 查节点数据 |\n| `setProcessProperty(key, value)` | 设置流程属性 |\n| `getGraphData()` | 导出图数据 |\n| `render(data)` | 重新渲染 |\n| `graphModel` | Proxy，兼容 `lf.graphModel[key] = value` 写法 |\n| `eventCenter` | 事件总线 |\n\n业务方原有 vben5 的 `task-drawer` / `process-drawer` 等二次开发代码可在两种模式下复用。\n\n### 自研组件\n\n钉钉模式内置以下 UI 组件，零外部依赖：\n\n- **DingDrawer**：右侧滑出抽屉，class 驱动 slide 动画\n- **DingModal**：居中弹窗，zoom + fade 动画\n- **DingTooltip**：hover 提示，替代原生 title\n\n### dndPanel 合并策略\n\n业务方自定义的 `dndPanel`（含 `nodeClick` 等配置）会与钉钉模式默认项（审批节点 / 自定义节点 / 子流程）合并，业务方同名 type 优先。\n\n### 会签角标与成员进度回显（v3.0.3+）\n\n- **会签角标**：会签节点（fork/join 或带 countersign 属性）在 NodeCard 右上角渲染角标，区分并行/顺序会签\n- **成员进度回显**：`highLight.nodeProgress` 按节点 id 传入办理人列表，NodeCard 渲染成员列表（✓已完成 / ▶当前轮到 / ·未处理），适用于 viewer 只读模式展示审批进度\n\n### 空流程默认初始化（v3.0.3+）\n\n编辑模式下传入空的流程数据（无 nodes）时，自动初始化默认三节点（开始 → 审批人 → 结束），对齐 jeeflow-spec 发起申请约定；仅首次初始化，不会覆盖已有数据。\n\n## 钉钉精简包（v3.1.0+）\n\n包名 `mldong-flow-designer-dingtalk`，与双模式包**同一源码、同一版本号联动发布**，仅含钉钉风格树形设计器，**不含 LogicFlow 画布**，零 `@logicflow/*` 依赖，适合纯审批流场景极简引入。\n\n```shell\nnpm install mldong-flow-designer-dingtalk --registry=https://registry.npmmirror.com\n```\n\n```html\n\n \n\n```\n\n- 组件注册名、props/events 契约与双模式包的钉钉模式完全一致，两包可无缝切换\n- `@on-init` / `@on-render` 回调参数为 `FDDesignerAPI`（命名与 LogicFlow 实例对齐）\n- 需要 canvas 画布、存量画布流程兼容或双模式切换时，请使用双模式包 `mldong-flow-designer-plus`\n- 本地构建精简产物：`npm run build:lib:lite`（输出 `lib-lite/`）\n\n## 课程章节\n* 第一章·基础篇\n - 搭建Vue3脚手架工程\n - 改造成Vue3组件库目录结构\n - 集成LogicFlow\n - 自定义节点初探\n - 自定义svg节点\n - 自定义html节点\n - 自定义vue节点\n - 自定义vue节点优化\n - 自定义边\n - 主题配置\n - 拖拽面板\n - 控制面板\n* 第二章·进阶篇\n - 事件监听\n - 自定义事件\n - 数据转换 Adapter\n - 自定义插件初探\n - 自定义插件属性配置\n - svg图标处理(一)\n - svg图标处理(二)\n* 第三章·实现篇·组件初探\n - 流程设计器组件初步设计\n - 流程设计器数据双向绑定实现\n - 流程设计器配置数据类型定义\n - 流程设计器节点高亮实现\n - 流程设计器边高亮实现\n - 流程设计器高亮主题配置\n - 流程设计器设置高亮属性\n - 流程设计器高亮属性配置实现\n* 第四章·实现篇·拖拽面板\n - 拖拽元素·开始节点\n - 拖拽元素·结束节点\n - 开始节点和结束节点边连接规则\n - 拖拽元素·自定义任务节点\n - 拖拽元素·条件判断节点\n - 拖拽元素·分支与合并节点\n - 拖拽元素·子流程节点\n - 拖拽面板组件配置项·初探\n - 拖拽面板组件配置项·属性覆盖及隐藏控制\n - 拖拽面板组件配置项·节点事件\n - 拖拽面板组件配置项·边事件\n - 初始化事件注册自定义节点\n - 拖拽元素排序\n* 第五章·实现篇·UI适配\n - UI适配·初探\n - UI适配·Button组件(一)\n - UI适配·Button组件(二)\n - 增加UI适配器类\n - UI适配器优化\n - UI适配注意事项\n - UI适配·抽屉组件初探\n - UI适配·抽屉组件和节点边事件处理\n - UI适配·抽屉组件动态标题\n - UI适配·抽屉组件动态标题优化\n - UI适配·抽屉组件宽度配置\n - UI适配·antd表单\n - UI适配·element-plus表单\n* 第六章·实现篇·元数据表单\n - 元数据表单·简单数据结构\n - 元数据表单·开始节点和结束节点\n - 元数据表单·用户任务节点(一)\n - 元数据表单·用户任务节点(二)\n - 元数据表单·labelWidth属性处理\n - 元数据表单·其它拖拽节点\n - 元数据表单·流程表单和自定义配置\n - 元数据表单·自定义渲染函数\n - 元数据表单·自定义函数之v-model\n - 元数据表单·自定义组件实现v-model\n - 元数据表单·边表单和自定义配置\n* 第七章·实现篇·流程图数据\n - 流程图数据·节点和边表单赋值\n - 流程图数据·流程表单赋值\n - 流程图数据·表单数据变化监听处理初探\n - 流程图数据·表单数据变化监听处理优化\n - 流程图数据·流程表单数据变化监听处理\n - 流程图数据·修复上一步下一步bug\n* 第八章·实现篇·控制面板\n - 控制面板·配置化初探\n - 控制面板·配置化实现\n - 控制面板·自定义图标\n - 控制面板·查看流程数据弹窗适配\n - 控制面板·查看流程数据\n - 控制面板·查看流程数据复制\n - 控制面板·导入流程数据弹窗\n - 控制面板·导入流程数据逻辑处理\n - 控制面板·设置高亮数据\n - 控制面板·导入和高亮UI适配\n - 控制面板·保存按钮逻辑处理\n - 控制面板·清空逻辑处理\n* 第九章·打包部署篇\n - 打包发布篇·初探\n - 打包发布篇·云效流水线(一)\n - 打包发布篇·云效流水线(三)\n - 打包发布篇·依赖包安装测试\n - 打包发布篇·svg转base64处理\n - 打包发布篇·本地包调试\n - 打包发布篇·本地包调试错误修复\n - 打包发布篇·组件类型推导配置\n - 打包发布篇·组件类型推导之代码提示\n - 打包发布篇·组件定义类型导出\n - 打包发布篇·修复1.0.4版编译失败bug\n","_source_registry_name":"default","repository":{"url":"git+https://gitee.com/mldong/flow-designer.git","type":"git"}}