后端告别手绘！TinyVue流程图组件跨端定制指南

掌握 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

五、实用配置项与常见避坑指南

1. 实用配置项说明

通过修改 createConfig() 生成的配置对象，可自定义图表的外观与行为：

2. 常见避坑指南

1. 文字溢出省略： 组件默认对过长文字做截断处理。当 label 字符长度超过 config.labelWidth 限定的宽度时，会自动截断并添加 ...。如需展示全称，增大 labelWidth 即可。
2. 大数量响应式卡顿（关键注意点）： 切勿直接将整个 chartData 或 chartConfig 声明为 Vue 的 ref 或 reactive。因为这些对象包含大量布局计算数据和配置，Vue 会将其转为深度 Proxy，在 Canvas 重绘时引发严重性能问题。务必使用 markRaw（或 toRaw）包裹后再传入组件。
3. 样式穿透覆盖： 如果使用 #content 等插槽，组件默认对 .tiny-flow-chart__node-item 设定 height: 24px。当嵌入下拉框等高度不固定的组件时，需在外部使用 :deep(.tiny-flow-chart__node-item) { height: auto !important; } 进行强制重置。

六、总结

总体而言，TinyVue 的 Flowchart 组件凭借“网格行列 + 相对方向控制 DSL”这一创新设计，有效解决了多层级、多流转流程图在不同分辨率屏幕下“画线难、对齐难”的痛点。无论是企业级审批流，还是流水线构建进度图，它都是兼顾开发效率与定制空间的理想选择。