组件样式管理逻辑
relation-graph 采用“CSS 变量 + 类名体系”的样式架构。
这种方式可以同时支持：
- 全局默认样式
- 节点/连线级别的局部覆盖
并且能与缩略图等内置能力保持一致。
1. 样式入口
图谱根节点是 .relation-graph。
大量样式变量定义在该层，例如：
--rg-background-color--rg-node-color、--rg-node-border-color、--rg-node-border-width、--rg-node-border-radius--rg-node-font-color、--rg-node-font-size--rg-line-color、--rg-line-width、--rg-line-fontcolor、--rg-line-fontsize--rg-checked-item-bg-color
这些变量会被节点/连线 DOM 结构和状态类共同消费。
2. DOM 分层结构（概念）
画布和视图主要层级：
.rg-map.rg-canvas-behind（canvas 插槽底层）.rg-map-canvas（节点与连线主层）.rg-canvas-above（canvas-above 前景层）
核心容器：
- 节点容器
.rg-nodes-container - 连线容器
.rg-lines-container - 线条文字容器
.rg-linetext-container
3. 节点样式链路
节点相关类：
.rg-node-peel（状态与变量承载层）.rg-node（节点本体）.rg-node-text（文本）
状态类：
.rg-node-checked.rg-node-selected.rg-node-dragging
覆盖示例：
.my-graph .relation-graph .rg-node-peel .rg-node {
border-radius: 10px;
}
.my-graph .relation-graph .rg-node-peel.rg-node-checked > .rg-node {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}
4. 连线样式链路
连线相关类：
.rg-line-peel.rg-line（线条主体）.rg-line-bg（更宽的点击热区）.rg-line-label（线条文字）
状态类：
.rg-line-checked
覆盖示例：
.my-graph .relation-graph .rg-line-peel .rg-line {
stroke-dasharray: 8 4;
}
.my-graph .relation-graph .rg-linetext-container .rg-line-label {
font-weight: 600;
}
5. 编辑器与视图层组件样式
常见视图层类：
.rg-editing-ctrl、.rg-editing-connect-ctrl.rg-selection.rg-miniview.rg-toolbar
你可以通过这些类统一工具栏、缩略图、框选层的视觉风格。
6. 关键实践原则
不要只在插槽内部用局部 CSS 去定义节点背景/边框、连线颜色/粗细。
推荐的“样式数据来源”是：
- 节点核心外观：
node.color、node.borderColor、node.borderWidth、node.borderRadius或图谱默认值。 - 连线核心外观：
line.color、line.lineWidth或图谱默认值。
原因：
- relation-graph（尤其
RGMiniView）依赖这些数据字段与 CSS 变量进行一致渲染。
7. 推荐样式策略
- 用
RGOptions定义全局基线。 - 用节点/连线数据字段做局部差异化。
- 用更高优先级选择器做主题级微调。
- 显式定义选中/拖拽等状态样式，避免状态混乱。