使用 Canvas Slot 锚点构建多云拓扑看板

这个示例构建了什么

这个示例构建的是一个固定的、仪表盘风格的基础设施看板，而不是传统的节点连线图。可见场景是一个包含 Dr. Peng Data Center、Tencent Cloud 和 Azure Cloud 的三面板拓扑视图，每个面板内都放置了带有硬件详情的白色服务器清单卡片。

用户主要通过常规图谱导航来查看这个预先构建好的拓扑。其显著行为在于，relation-graph 位于自定义 HTML 场景之后，只有在组件完成挂载阶段初始化之后才会绘制弯曲连接线层。

数据是如何组织的

该示例不会通过 setJsonData 加载标准的 nodes 和 lines 数据集，也不会执行独立的 doLayout 预处理步骤。相反，每个云面板都定义了一个内联服务器对象数组，并在 RGSlotOnCanvas 中将这些对象直接映射为卡片标记。

每个服务器对象都包含 id、name 和 ip，其中 id 会被复用为 RGConnectTarget 的 targetId。同一组 id 还会在 addFakeLines(...) 中再次被引用，因此这里的数据模型本质上是面向选定 DOM 标签的端点注册表。在真实系统中，这种模式同样可以表示应用实例、数据库集群、区域网关，或需要固定在预设计运维看板中的机架设备。

relation-graph 是如何使用的

relation-graph 在这里被配置为一个固定的连接线图层。图谱选项将 layout.layoutName = "fixed"，使用矩形节点和标准曲线连线，强制使用左右方向的连接点，并通过让节点透明且无边框来隐藏内置节点外观。青色的默认连线颜色和宽度确立了拓扑的视觉强调风格。

主要的组合发生在 RGSlotOnCanvas 中，整个看板都作为绝对定位的 HTML 在其中渲染。RGConnectTarget 被附着在选定的服务器名称标签上，这让 fake line 可以绑定到普通 DOM 内容，而不是绑定到可见的图谱节点。随后通过 RGHooks.useGraphInstance() 稍作等待，注册四条 fake line，使场景重新居中、适配视口，并最终移除加载遮罩。

样式文件只做了少量图谱外观清理。它在实际效果上最主要的作用，是进一步强化透明节点渲染，使服务器卡片保持为唯一可见的内容。

关键交互

这个示例有意保持为纯查看模式。它没有点击处理器、编辑控件，也没有由选择驱动的数据更新。

真正有意义的交互包括：

初始化完成前，会有一个加载遮罩阻止看板显示。
挂载后，图谱会稍作等待，绘制连接线集合，使场景重新居中，并缩放到适配状态。
场景显示后，用户可以通过图谱的常规视口导航来查看这个预设拓扑。

关键代码片段

下面这段代码展示了图谱如何被配置为一个固定且几乎不可见的渲染层，位于自定义 HTML 内容之后。

const userGraphOptions: RGOptions = {
    debug: false,
    layout: {
        layoutName: 'fixed'
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultLineColor: 'rgba(0, 186, 189, 1)',
    defaultLineWidth: 2,
};

下面这段代码展示了挂载阶段的启动模式：等待场景就绪，按 DOM 目标 id 添加 fake line，然后对视口执行居中和适配。

const initializeGraph = async () => {
    await graphInstance.sleep(1000);
    graphInstance.addFakeLines([
        { id: '1', from: 'el-1-1', to: 'el-1-3', lineShape: 6, lineWidth: 2 },
        { id: '2', from: 'el-1-2', to: 'el-1-4', lineShape: 6, lineWidth: 2 },
        { id: '3', from: 'el-2-1', to: 'el-1-4', lineShape: 6, lineWidth: 2 },
        { id: '4', from: 'el-3-1', to: 'el-1-3', lineShape: 6, lineWidth: 2 }
    ]);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
    setGLoading(false);
};

下面这段代码展示了“数据到端点”的映射模式：内联服务器元数据变成卡片 UI，而服务器 id 会被提升为 RGConnectTarget。

{[
    { id: 'el-1-1', name: '#数据库服务器01', ip: '292.118.12.14' },
    { id: 'el-1-2', name: '#数据库服务器02', ip: '292.118.12.14' },
    { id: 'el-1-3', name: '#应用服务器01', ip: '292.118.12.14' },
    { id: 'el-1-4', name: '#应用服务器02', ip: '292.118.12.14' }
].map((server) => (
    <div key={server.id} className="...">
        <RGConnectTarget targetId={server.id} className="w-fit">
            <div className="text-[14px] text-[#333] font-bold w-fit">{server.name}</div>
        </RGConnectTarget>
    </div>
))}

下面这段代码展示了整个基础设施场景是在 canvas slot 中渲染的，而不是作为可见图谱节点来渲染。

<RelationGraph options={userGraphOptions}>
    <RGSlotOnCanvas>
        <div className="w-[400px] h-[800px] absolute -left-[250px] top-0 bg-[#74ff053d] rounded-tr-[10px]">
            <div className="w-fit px-[20px] h-[40px] ... bg-[#74ff053d]">
                <CloudIcon />
                Dr. Peng Data Center
            </div>
            {/* server cards */}
        </div>
    </RGSlotOnCanvas>
</RelationGraph>

这个示例的独特之处

与附近的 inventory-structure-diagram 和 interest-group 等示例相比，这个 demo 不会根据用户选择来重建连接关系。它会为一个现成的基础设施看板挂载一组预定连接线，因此当关系场景应当作为静态仪表盘的一部分自动出现时，它更适合作为起点。

与 rg-connect-target 相比，它不太像一个端点能力演示场，而更像一份具体场景配方。它的独特组合在于：固定布局的 canvas-slot 组合方式、透明的图谱节点样式、服务器卡片内标签级别的 RGConnectTarget 锚点，以及挂载阶段通过 addFakeLines() 完成的启动过程。

与 scene-network-2 相比，可见的服务器根本不是图谱节点。这个示例更进一步地把重点放在 HTML 场景组合上，通过在普通 canvas-slot 标记中保留这些卡片，并只把 relation-graph 用作连接线图层和视口控制。

这种受加载状态控制的显示方式，也让这个示例在偏查看型的 canvas-slot demo 中显得比较特别。看板会一直保持暗化状态，直到延迟的连接线注册和视口适配完成；当一个场景需要以“已经稳定就绪”的状态呈现时，这种方式很有用。

这种模式还适用于哪里

这种模式非常适合那些 UI 布局必须保持自定义且像素级可控的基础设施与运维界面：

带有手工设计环境面板的多区域服务地图
连接设备、网关和告警组件的安全监控看板
只需要让选定标签显示关系线的数据中心或机架仪表盘
将卡片、计数器和状态面板与连接线覆盖层混合在一起的业务流程墙

当团队已经拥有一个成型的 HTML 仪表盘，并希望让 relation-graph 在不把整个界面转换为传统图谱数据集的前提下增加连接语义时，它也可以作为一种扩展模式使用。

基于画布插槽的云基础设施拓扑