[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:industrial-chain-card-anchored-mixed-layout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 用于工业价值链仪表板的卡片锚定混合布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个面向查看场景的工业价值链仪表板：三张大型阶段卡片位于图谱画布内部，每一行卡片都锚定一棵独立的 relation-graph 树。用户会在背景中看到上游、中游和下游三个面板，看到将这些行连接到隐藏图根节点的正交桥接连线，以及围绕这些卡片分布的多个树形簇，而不是单一的一棵层级树。\n\n用户可以展开或折叠分支，可以通过浮动辅助窗口将所有分组展开到指定深度，可以点击空白画布清除选中和编辑状态，可以拖动或最小化辅助窗口，还可以打开一个次级设置浮层来调整滚轮模式、拖拽模式和图片导出。本示例的重点是这种组合方式：`RGSlotOnCanvas` 中的普通 HTML 会成为可见的锚定层，而真实的图节点则保留在其后方，并由一个自定义的混合布局控制器重新定位。\n\n## 数据是如何组织的\n\n源数据来自 `getMyAllColumnsData()`，它会返回三个列对象：`c1`、`c2` 和 `c3`。每一列都包含阶段名称、副标题、图标名称、主题颜色，以及一个由嵌套 `JsonNode` 树组成的 `items` 数组",true,500,1782615390982]