掌握 OpenTiny TinyVue Flowchart 流程图组件：从入门到深度定制实战全攻略
一、组件核心机制与设计理念
在后台管理系统开发中，我们经常需要绘制清晰的审批流程图或业务步骤图。过去，实现这一功能往往需要引入 JointJS、G6、AntV X6 或 Formily 等重量级图表库。
回顾实际开发场景，许多项目并不需要如此复杂的图表能力。我们真正需要的是一个轻量、具备状态管理、支持点击交互、能够响应式适应的步骤或审批流程图。正因如此，TinyVue 的 Flowchart 组件应运而生。
它的架构设计极具巧思，采用了 **“Canvas 绘制连线 + DOM 渲染节点”** 的混合方案：
- 节点（Nodes）： 使用绝对定位的 Vue DOM 元素渲染。这意味着开发者可以借助 Vue 插槽（Slots）深度定制节点外观、交互行为，甚至嵌入复杂的下拉菜单（Popover/Select）等组件。
- 连线（Links）： 在背景层通过 Canvas 绘制。基于高性能 Canvas API 保证流畅度，组件内部自研的网格相对运动 DSL，巧妙解决了响应式布局下连线路径的自适应问题。
二、核心数据模型与 DSL 解析
要高效使用该组件，需要准备两个核心对象：data 和 config。
1. 节点网格定位系统
Flowchart 中节点定位并非固定 px 像素值，而是基于一套虚拟网格（Grid）系统：
const node = createNode(name, status, label, date, items, row, col, other)
row与col： 分别表示节点在虚拟网格中的行、列索引（从 0 开始）。- 自动计算坐标： 组件根据配置的
config.width、config.height、config.cols、config.rows，自动将画布划分为网格，并计算出每个节点的绝对定位坐标。开发者只需告知节点位于哪个网格单元即可。 status（状态码）： 预设四种状态：1（已完成）、2（进行中）、3（未开始/等待）、4（失败/异常）。
2. 独创连线相对路径描述语法 (p)
这是组件最亮眼的设计之一。传统流程图需要提供所有转折点的精确像素坐标，而 TinyVue 允许开发者使用方向与比例组成的相对描述字符串 p 来定义连线轨迹：
createLink(from, to, p, status, style)
在参数 p 中（例如 '0 r0.5 t1 c r1.5'），每条指令代表相对于网格宽度或高度的移动。语法详解：
- 方向指令：
r(Right) /l(Left) 用于水平移动，数值乘以单列宽cw。b(Bottom) /t(Top) 用于垂直移动，数值乘以单行高rh。
- 步长数值： 例如
r0.5表示向右移动0.5倍列宽；t1表示向上移动1倍行高。 - 圆角指令
c： 在拐弯处渲染平滑圆弧（基于 Canvas 的arcTo，默认半径8px）。
源码逻辑透视
在 renderless/src/flowchart/index.ts 中，解析语法的核心正则如下：
const regDir = /^([lrtb])(d+(.d+)?)$/
const regDirC = /^([lrtb])(d+(.d+)?)c$/
若 p 参数缺失，组件默认在两个节点间绘制直线。若提供 p 参数，则按指令序列通过 lineTo 或 arcTo 计算路径，确保在响应式布局下连线完美对齐。
三、Vue 3 Composition API 实战示例
理论讲解再多，不如一个实际案例直观。下面是一个基础 Flowchart 组件应用：
四、进阶：使用插槽自定义节点
当默认图标和文字无法满足复杂交互需求时（例如需要在节点下方展示处理人列表、悬浮卡片、表单或按钮），Flowchart 提供的插槽便可发挥价值。
1. 提供的作用域插槽（Scoped Slots）
#icon="params"：自定义节点图标#label="params"：自定义节点文字展示#content="params"：自定义节点底部内容区（可结合 Popover 使用）
2. 实战：在节点底部定制处理人 Popover
{{ user.name }} ({{ user.role }}) -
{{ user.status }}
处理人({{ params.node.info.items.length }})
五、实用配置项与常见避坑指南
1. 实用配置项说明
通过修改 createConfig() 生成的配置对象，可自定义图表的外观与行为：
| 配置属性 | 类型 | 默认值 | 作用说明 |
|---|---|---|---|
width / height | number | 1024 / 420 | 画布容器的宽高 |
rows / cols | number | 8 / 8 | 虚拟网格划分的行数与列数 |
colors | object | { 1: '#1890ff', ... } | 不同状态码对应的色彩方案 |
listWidth | number | 62 | 节点底部内容容器的宽度（使用插槽时强烈建议改大，否则文本易重叠） |
adjustPos | function | null | 钩子函数，允许对特定节点的具体 (x, y) 像素坐标进行微调 |
drawLink | function | null | 自定义 Canvas 连线绘制逻辑的钩子，用于实现高级线条特效 |
2. 常见避坑指南
- 文字溢出省略：
组件默认对过长文字做截断处理。当
label字符长度超过config.labelWidth限定的宽度时，会自动截断并添加...。如需展示全称，增大labelWidth即可。 - 大数量响应式卡顿（关键注意点）：
切勿直接将整个
chartData或chartConfig声明为 Vue 的ref或reactive。因为这些对象包含大量布局计算数据和配置，Vue 会将其转为深度 Proxy，在 Canvas 重绘时引发严重性能问题。务必使用markRaw（或toRaw）包裹后再传入组件。 - 样式穿透覆盖：
如果使用
#content等插槽，组件默认对.tiny-flow-chart__node-item设定height: 24px。当嵌入下拉框等高度不固定的组件时，需在外部使用:deep(.tiny-flow-chart__node-item) { height: auto !important; }进行强制重置。
六、总结
总体而言，TinyVue 的 Flowchart 组件凭借“网格行列 + 相对方向控制 DSL”这一创新设计，有效解决了多层级、多流转流程图在不同分辨率屏幕下“画线难、对齐难”的痛点。无论是企业级审批流，还是流水线构建进度图，它都是兼顾开发效率与定制空间的理想选择。
