节点和连线编辑 (Node and Edge Editing)
Flow 组件支持对节点和连线进行可视化编辑。通过双击节点或连线，可以打开编辑面板进行属性修改。
功能特性 (Features)
- 节点编辑：双击节点打开编辑面板，支持修改标签、描述、尺寸、背景色、边框颜色、圆角等
- 连线编辑：双击连线打开编辑面板，支持修改标签、连线类型、颜色、宽度、动画效果等
- 撤销/重做：编辑操作支持撤销和重做
基础用法 (Basic Usage)
请双击下方流程图中的节点或连线，右侧会弹出对应的编辑面板，可修改标签、样式等属性。示例使用 v-model:nodes 与 v-model:edges，编辑后数据会同步到父组件。
节点与连线编辑
节点编辑面板 (Node Editing Panel)
双击节点后，会在右侧显示节点编辑面板，包含以下功能：
| 属性 | 说明 |
|---|---|
| 标签 | 节点显示的文本 |
| 描述 | 节点的描述信息 |
| 尺寸 | 节点的宽度和高度 |
| 背景色 | 节点背景颜色 |
| 边框颜色 | 节点边框颜色 |
| 圆角 | 节点边框圆角大小 |
连线编辑面板 (Edge Editing Panel)
双击连线后，会在右侧显示连线编辑面板，包含以下功能：
| 属性 | 说明 |
|---|---|
| 标签 | 连线上显示的文本 |
| 连线类型 | bezier（贝塞尔曲线）、smoothstep（平滑阶梯）、step（阶梯）、straight（直线） |
| 动画连线 | 是否启用连线流动动画 |
| 线条颜色 | 连线颜色 |
| 线条宽度 | 连线粗细 |
| 显示标签背景 | 是否显示标签背景 | | 标签背景色 | 标签背景颜色 |
只读模式 (Readonly Mode)
在 readonly 模式下，双击节点或连线不会打开编辑面板。
vue
<yh-flow :nodes="nodes" :edges="edges" readonly />注意事项 (Notes)
- 编辑功能默认启用，无需额外配置
- 编辑操作会自动保存到历史记录，支持撤销/重做
- 在只读模式下，编辑功能将被禁用
- 编辑面板采用固定定位显示在页面右侧