自定义节点（#node）

节点插槽用于完全定制节点内容渲染。

1. 各平台写法

• Vue：#node
• React：<RGSlotOnNode>
• Svelte：slot="node"

2. 插槽参数

常见参数：

• node: RGNode
• checked?: boolean
• dragging?: boolean

3. 基础示例（React）

<RelationGraph options={graphOptions}>
  <RGSlotOnNode>
    {({ node, checked, dragging }) => (
      <div className="my-node">
        <div>{node.text}</div>
        <div>Checked: {String(checked)}</div>
        <div>Dragging: {String(dragging)}</div>
      </div>
    )}
  </RGSlotOnNode>
</RelationGraph>

4. 关键样式原则

不要只在节点插槽局部 CSS 里定义节点背景/边框语义。

建议通过以下数据字段定义核心外观：

• node.color
• node.borderColor
• node.borderWidth
• node.borderRadius
• 或 RGOptions 中的全局默认值

原因：这些值会影响主视图与缩略图的一致渲染。

5. 实践建议

• 按 node.type 进行模板分发。
• 插槽负责表现层，业务动作由事件/实例 API 驱动。
• 把业务元数据放在 node.data，避免污染结构字段。

6. 下一步阅读

• 插槽系统概览
• 自定义连线 (#line)
• 组件样式管理逻辑
• 节点数据模型