构建一个固定布局的网络拓扑监控面板

这个示例构建了什么

这个示例构建的是一个全屏网络拓扑监控面板，而不是通用的关系图。页面左侧展示三张上游服务卡片，中间是一个管理枢纽节点和一个调度节点，右侧则是一列纵向排列的执行服务器。用户可以平移、缩放，并使用内置工具栏检查整个场景；当节点被选中时，还会通过缩放和光环效果获得明显强调。

这个示例的主要价值在于，它展示了如何把 relation-graph 搭建成一个深色风格的运维看板，同时具备可预测的位置布局、按类别区分的节点皮肤，以及轻量级的监控覆盖层。

数据是如何组织的

当前生效的图数据直接定义在 MyGraph.tsx 中，分别是 RAW_NODES 和 RAW_LINES。节点列表同时混合了内容和布局提示：左侧三个服务节点已经带有固定坐标，而中心节点、调度节点以及执行服务器节点会在初始化期间补齐最终的 x 和 y 坐标。在图加载之前，代码会克隆原始数组，为这些缺失坐标的节点赋值，并给每条边增加 lineWidth: 2，然后再调用 setJsonData。

这种结构可以很好地映射到真实的运维数据。左侧节点可以代表采集服务、队列或网关；中心节点可以表示编排枢纽；调度节点可以表示分发器；右侧纵列则可以表示带状态文本的 worker、pod、agent 或边缘设备。尽管目录中还包含 my-data.ts，但当前实现中实际渲染的图仍然由 MyGraph.tsx 里的内联数组驱动。

relation-graph 是如何使用的

这个示例包裹在 RGProvider 中，因此 RGHooks.useGraphInstance() 可以访问已经挂载的图实例。RelationGraph 使用的是 fixed 布局，所以整个场景表现得更像一个手工编排的拓扑看板，而不是自动排布的图表。配置项还保留了内置工具栏、应用了深色背景、使用带左右连接点的曲线连线，并启用了滚轮缩放与拖拽平移。

自定义主要通过 RGSlotOnNode 完成。这个插槽渲染器会根据节点 id 进行分支，因此中心枢纽、服务卡片和执行服务器卡片都会获得不同的标记结构和样式。图实例 API 负责启动流程：setJsonData 加载准备好的节点和边，moveToCenter 将画布重新居中，zoomToFit 则在首次渲染时让整个拓扑完整显示在视口中。

当前示例没有编辑功能。它没有使用 line、canvas 或 viewport 插槽，而导入的辅助组件如 DraggableWindow、SimpleUISelect 和 SimpleUIBoolean 也没有参与当前的渲染路径。样式分散在图配置、JSX 中类似 Tailwind 的工具类，以及一个用于保持 .rg-map 深色背景的小型 SCSS 覆盖中。

关键交互

主要交互是视口检查。鼠标滚轮可以缩放图，拖拽可以平移，内置工具栏也始终可用于标准画布导航。组件挂载后，图会自动加载预处理后的数据，将拓扑居中，并缩放到完整可见，因此用户一开始就能看到完整场景。

次要交互是节点检查。当某个节点被选中时，自定义节点插槽会放大该卡片并添加类似脉冲的光环效果，让被检查的元素更加醒目，同时又不会改变拓扑结构。这个示例始终处于查看模式：用户可以检查和导航，但不能编辑节点、连线或布局。

关键代码片段

下面这段配置证明，该图被明确设置为一个固定布局、深色风格并带有内置导航能力的看板查看器。

const graphOptions: RGOptions = {
  debug: false,
  showToolBar: true,
  backgroundColor: '#0f172a', // Dark tech-style background
  layout: {
    layoutName: 'fixed' // Use fixed layout, manually control coordinates
  },
  // ...
  wheelEventAction: 'zoom',
  dragEventAction: 'move'
};

下面这个预处理步骤展示了示例如何把原始节点记录转换为一个分阶段布局的拓扑，并为枢纽、调度器和执行列显式设置坐标。

const nodes: JsonNode[] = RAW_NODES.map((node) => {
  const newNode = { ...node };

  if (node.id === 'centre') {
    newNode.x = 0;
    newNode.y = -49;
  }
  if (node.id === 'cron') {
    newNode.x = 250;
    newNode.y = -20;
  }

下面这段加载流程说明，relation-graph 的实例 API 负责启动时的数据绑定以及初始视口构图。

const lines: JsonLine[] = RAW_LINES.map(line => ({
    ...line,
    lineWidth: 2
}));

await graphInstance.setJsonData({ nodes, lines });
graphInstance.moveToCenter();
graphInstance.zoomToFit();

下面这个插槽分支是最直接的证据，说明该示例通过自定义节点渲染来表达拓扑中的语义角色。

{({ node, checked }: RGNodeSlotProps) => {
  const isCentre = node.id === 'centre';
  const isService = ['data', 'proxy', 'task'].includes(node.id);
  const isExe = node.id.startsWith('exe-');

  return (
    <div
      className={`
        relative flex flex-col items-center justify-center transition-all duration-300
        ${node.selected ? 'scale-110' : ''}
      `}

下面这段覆盖层标记说明，这种看板式框架本身就是示例的一部分，而不是图外部额外包裹的壳层。

<div className="absolute top-6 w-full z-10 pointer-events-none flex justify-center">
  <h1 className="text-2xl font-bold text-sky-400 tracking-widest uppercase flex items-center gap-3">
    <div className="w-8 h-1 bg-sky-500 rounded-full animate-pulse" />
    Network Topology Monitor
    <div className="w-8 h-1 bg-sky-500 rounded-full animate-pulse" />
  </h1>
</div>

这个示例的独特之处

和附近的示例相比，这个示例的场景特异性很强。对比数据表明，scene-network-2 是它最接近的邻近示例，但那个示例使用的是从左到右的树形布局，并带有画布级的 VPC 注释；而本示例使用的是手工编排的固定布局，包含中心枢纽、调度交接节点和右侧执行服务器列。因此，当目标是构建一个具有明确屏幕构图的监控看板，而不是一个仍然以树结构方式运作的拓扑图时，scene-network 会是更直接的参考。

这个示例也不同于其他使用固定布局和自定义节点的示例，例如 node-content-lines、models-relationship 和 table-relationship。那些示例更强调 DOM 端点、伪连线或参数端口布线。而这里的自定义节点主要用于表达监控语义：服务卡片、状态卡片、颜色编码告警以及看板可读性。对比结果还指出，固定坐标、挂载时执行 setJsonData 后再居中并适配视图、借助工具栏导航，以及深色覆盖层框架的组合，在这个库中属于相对少见的特性集合。

这种模式还适用于哪里

这种模式非常适合位置本身就具有语义的只读运维场景。团队可以把它改造成服务健康看板、批处理流水线、worker 集群监控面板、边缘设备监控，或内部的调度器与队列总览。只要界面布局需要在每次刷新后保持稳定，同样的结构也适用于制造站点地图或区域基础设施看板。

主要的扩展路径，是保留固定拓扑和自定义节点插槽，再把内联文本替换为来自真实后端的实时指标、告警或状态徽标。这样既能保留本示例以场景为中心的清晰表达，又能把它扩展为生产级监控界面。