Skip to main content

拓扑图交互与配置

拓扑图的页签、搜索、高亮与缩放操作,以及关系图的只读约束与展示规则。

概述​

拓扑图是只读的关系图视图,没有可保存的全局属性。这里说明页面上的全部交互操作项,以及关系图的展示与布局规则。

两类关系图(实体关系、页面关系)共享同一套交互与展示逻辑:相同的搜索、高亮、缩放行为,相同的卡片样式与布局策略。

配置项​

配置项说明
页签切换在「实体关系」与「页面关系」之间切换;切换会更新地址栏 tab 参数(MetaEntityRelationGraph / MetaPageRelationGraph),刷新或分享链接后仍停留在同一页签
搜索框输入关键字实时过滤,匹配卡片名称、编码或行内容;命中数量显示在搜索框右侧
适应画布一键把整张关系图缩放并居中到画布内,同时清除当前选中与悬浮状态
切换应用跳转回应用首页,用于切换到其他应用查看其拓扑

搜索与高亮​

  • 搜索:关键字命中卡片名称、编码或卡片行的名称 / 编码时,命中的行以高亮底色标记,相关卡片保持正常显示,其余卡片与连线淡出。
  • 悬浮:鼠标移到某张卡片时,与该卡片有直接关系的卡片和连线保持显示,其余淡出。
  • 点击选中:点击卡片可固定选中状态;再次点击同一卡片或点击画布空白处取消选中。
  • 悬浮优先于点击选中:鼠标当前所在的卡片决定高亮目标。

画布操作​

操作说明
平移按住鼠标左键拖动画布
缩放鼠标滚轮缩放,以鼠标位置为中心,缩放范围约 0.1 ~ 3
适应画布点击工具栏「适应画布」按钮

关系图禁止编辑:节点与连线均不可拖动、不可新增或删除锚点、不可连线,避免误操作改变图结构。

卡片与配色​

实体编辑器中打开的资源卡片遵循统一配色:

卡片类型配色说明
当前应用实体 / 页面主题色当前应用内的资源
外部实体灰色渐变属于其他应用的被引用实体,不展示字段
未知实体警示红色渐变引用已失效(资源不存在)

卡片右上角的箭头链接可打开对应资源编辑页;卡片内带链接的行同样可直接打开对应资源。

下一步​

展示与布局参数​

以下内容面向技术实现与 AI 检索。前端使用 X6(@antv/x6)渲染只读关系图,卡片基于 foreignObject 自定义形状 meta-topology-card。

卡片尺寸常量​

常量值含义
ENTITY_NODE_WIDTH260卡片宽度
ENTITY_HEADER_HEIGHT44卡片头部高度
FIELD_ROW_HEIGHT24每行高度
ENTITY_BOTTOM_PADDING8卡片底部内边距
EXTERNAL_NODE_HEIGHT76无行卡片高度(44 + 24 + 8)
HEADER_TITLE_MAX_LENGTH16卡片标题最长保留字符数,超出以省略号截断
HEADER_CODE_MAX_LENGTH20卡片副标题(编码 / 标题)最长保留字符数

卡片高度按行数计算:entityNodeHeight(rowCount) = 44 + rowCount * 24 + 8。

布局常量​

常量值含义
COLUMN_GAP60列间距(承载多条连线时会自动加宽)
GROUP_GAP160主卡片块与下方卡片块之间的垂直间距
ROW_GAP40同列相邻卡片之间的垂直间距
LANE_MARGIN28连线与卡片保持的间距
LANE_WIDTH14同一间隙内相邻连线之间的水平间距
APPROACH_CLEARANCE18连线进入卡片前保持的间距
CANVAS_MIN_HEIGHT320画布最小高度
CANVAS_BOTTOM_GAP24画布底部预留间距,避免页面出现滚动条

列数由 pickColumnCount 依据卡片数量、总高度与画布宽高比择优确定,使关系图尽量贴合画布形状;卡片按原始顺序通过 splitColumns 均衡分列(使最高列尽可能矮)。

只读画布配置​

关系图的 X6 图实例关键配置:

配置项值含义
panning.enabledtrue允许平移
panning.eventTypes['leftMouseDown']鼠标左键拖动平移
mousewheel.enabledtrue允许滚轮缩放
mousewheel.zoomAtMousePositiontrue以鼠标位置为中心缩放
mousewheel.minScale / maxScale0.1 / 3缩放范围
interacting.nodeMovablefalse节点不可拖动
interacting.edgeMovablefalse连线不可拖动
interacting.vertexAddable / vertexDeletablefalse不可增删连线拐点
interacting.magnetConnectablefalse不可手动连线

画布尺寸由容器实测高度动态计算,切换页签或调整窗口时自动重算,保证画布占满剩余空间且页面本身不产生滚动条。