[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:zodiac-compatibility-matcher":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 带动态结果卡片的双侧星座契合度匹配器\n\n## 这个示例构建了什么\n\n这个示例在一个 relation-graph 画布中构建了一个全屏星座契合度匹配器。用户会看到两组镜像分布的星座卡片，从左侧选择一个星座、从右侧选择一个星座，然后获得一张位于中央的大型结果卡片，用来汇总这对组合的优点和缺点。\n\n最重要的一点是，这张图不仅仅是一个查看器。它同时也是选择界面和结果展示界面。配对结果是通过图状态变化来揭示的，而不是通过打开单独的模态框或侧边面板来展示。\n\n## 数据是如何组织的\n\n图数据直接在 `MyGraph.tsx` 中以内联方式声明为一个 `RGJsonData` 对象，其中包含 `rootId: 'root'`、28 个节点和 26 条连线。其结构包括一个隐藏的脚手架根节点、两个固定的分组中心节点（`g1` 和 `g2`）、一个隐藏的汇总节点（`merge-result`），以及左右两侧各 12 张星座卡片。所有脚手架连线都以 `opacity: 0` 加载，因此它们用于组织布局，但不会成为主要的可见内容。\n\n在数据加载之前会做一层轻量预处理。每个节点都会得到 `node.dat",true,500,1782615403650]