From 21582cedc2b7369c47fa9f8a1b2cd3da4b5b0ed4 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Wed, 7 Oct 2026 17:07:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9E=E7=BA=BF=E9=94=9A=E7=82=B9=EF=BC=9A?=
 =?UTF-8?q?=E6=AF=8F=E6=9D=A1=E8=BE=B9=EF=BC=88=E5=90=AB=E6=89=87=E5=87=BA?=
 =?UTF-8?q?=EF=BC=89=E9=92=89=E4=BD=8F=E7=88=B6=E5=BA=95=E4=B8=AD=E7=82=B9?=
 =?UTF-8?q?/=E5=AD=90=E9=A1=B6=E4=B8=AD=E7=82=B9=EF=BC=9B=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83=E8=A1=A5=E9=94=9A=E7=82=B9=E5=AE=9A=E6=A0=87=EF=BC=88?=
 =?UTF-8?q?=E7=9C=9F=E6=9C=BA=2014=20=E7=AB=AF=E7=82=B9=20=CE=94x=3D0.00?=
 =?UTF-8?q?=EF=BC=89=E4=B8=8E=E7=B4=A7=E5=87=91=E5=8D=A1=20182?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...�技术方案】游�共创与作�Fork-2026-10-03.md |  7 ++++--
 .../lineageTreeLayout.test.ts                 | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
index 71d24c2d7..9994d0eb6 100644
--- a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
+++ b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
@@ -469,9 +469,10 @@ A 路线里那个必须��知�的互斥点已�按既有�法绕开：`cr
   - **����有动作按钮**：「打开作� / 开始共创�已从��移除（用户�径：看��决定�了共创，必须点进去看）——**整�就是入�**（`GameCard` 本身是 `<button>`，点击 → 作�详情；��节点点击�导航）。
   - **图谱语义走角标槽**：第 N 代 / 主干 / 当�作� / 父代-�代 / `▶N`（�树�计）全部通过 `badges` 槽承载；高亮 / �暗 / 主干线状��在外层最薄 wrapper 的 class（wrapper �负责定�与连线锚点��改�内视觉）。选中/高亮改为**悬�或键盘�焦**驱动（点击已让�给「进详情�）。
   - **��**：`.game-card--lineage .game-cover { aspect-ratio: 16/9; min-height: 0 }` + 图片 `100%×100% + object-fit: cover`（统一 16:9 铺满）。
-  - **层高常�按新�实测�算**：真机实测（212 宽画布��标题两行）�高 **231.5px** → `LINEAGE_CARD_BASE_HEIGHT = 214` / `TITLE_LINE_HEIGHT = 20`（两行估算 234 ≥ 实测）；�行字符数按实测�行� `10`；紧凑� `210 / +20`。层间� = 上一层最高� + `rowGap`，实测无��。
+  - **层高常�按新�实测�算**：真机实测（212 宽画布��标题两行）�高 **231.5px** → `LINEAGE_CARD_BASE_HEIGHT = 214` / `TITLE_LINE_HEIGHT = 20`（两行估算 234 ≥ 实测）；�行字符数按实测�行� `10`；紧凑� **`182 / +20`**（窄视� 390×844 / 360×800��宽 148�两行标题实测 **196px** ⇒ 估算 202 ≥ 实测，留 6px）。层间� = 上一层最高� + `rowGap`，冷�动实测层间空隙 **107 / 107 / 107**（层盒 `0..232 / 318..550 / 656..888 / 994..1226`），层内零��。
+  - **连线锚点�径（2026-10-07 真机定标）**：竖版 `from = 父盒下边中点`�`to = �盒上边中点`；横版 `from = 父盒�边中点`�`to = �盒左边中点`。**水平方�严格�在�片中心**：真机 7 �边 × 两端共 14 个端点，用 `path.getPointAtLength(0|len)` + `getScreenCTM()` ��到视��标与 `getBoundingClientRect()` ��标系比较，�差 **全部 0.00px**（节点盒内左�内边�相等 ⇒ �片中心 == 盒中心，实测 `cardCenter − nodeCenter = 0`）。**�存在任何横�扇出�移**：一个父带多个�时，��边从�一个父中点出���自�到���的中点（`lineageTreeLayout.test.ts` 已用 `toEqual` 钉���边，�扇出边）。纵�锚点�的是**布局盒**（`node.y` / `node.y + 估算层高`）而�是�片自身的矩形：节点盒实际渲染高度 = �片 + 上下内边�（`11.2px×2` + `1px 边框`），比估算层高高，所以父端锚点�在�片底边**上方约 9.7px**（被�片盖�，���）��端锚点�在��上边**上方约 12.2px**（一段空地）；两端留白**�与这组 CSS 度�有关��边�定**，因此视觉上��连线一致。
   - **大纲行（移动端列表形�）继续用 `LineageNodeContent`**：它是**列表行**�是�片（行内�留「打开作� / 开始共创�，是移动端的既有设计），因此该组件未被删除；若产��求连大纲也�化，��独处�。
-    - **层高按该层最高�片**：布局新增输入 `cardHeights`（�个节点的�片高度，由**纯函数** `estimateLineageCardHeight` 估算：基础高 + (标题行数−1)×行高，标题行数按字符宽度估�上� 2 行）。竖版 `第 N 层的 y = 上一层 y + 上一层最高�片高度 + rowGap`，层内所有�片�该层最大高度（�层等高，`min-height` 撑开），因此「�层里有一张 2 行标题的高��也�会被下一层压�；横版（窄�图谱）槽�高�全局最大�片高。**�测� DOM**（纯函数��测�离线�算，�会先渲染��排抖动）。常�由真机校准（**�片改为广场�组件��测**）：桌�两行标题实测 231.5px → � 214 / +20；�行字符数� 10；窄�紧凑� 210 / +20（估算 ≥ 实测，�多�少）。
+    - **层高按该层最高�片**：布局新增输入 `cardHeights`（�个节点的�片高度，由**纯函数** `estimateLineageCardHeight` 估算：基础高 + (标题行数−1)×行高，标题行数按字符宽度估�上� 2 行）。竖版 `第 N 层的 y = 上一层 y + 上一层最高�片高度 + rowGap`，层内所有�片�该层最大高度（�层等高，`min-height` 撑开），因此「�层里有一张 2 行标题的高��也�会被下一层压�；横版（窄�图谱）槽�高�全局最大�片高。**�测� DOM**（纯函数��测�离线�算，�会先渲染��排抖动）。常�由真机校准（**�片改为广场�组件��测**）：桌�两行标题实测 231.5px → � 214 / +20；�行字符数� 10；窄�紧凑� **182 / +20**（实测两行 196px ⇒ 估算 202，�多�少）。
     - **代际轴按层高画**：`LineageGenerationAxisEntry` 增加 `height`（该层层高），轴的�一行高度跟�层高走（��拿「第一个节点的高度�凑）。
     - **角标组移到��下方**（��用深色�丸压在��图上），并且**上色**——�类语义一色�**全部�自平�既有 `--platform-*` ��，�新增色值**：代际 = 中性（neutral）｜**主干 = 暖色（warm，强调）**｜**当�作� = 主色实心（accent solid）**｜父代 = cool｜�代 = success｜▶游玩数 = 中性。组内�是 flex + gap + ��行（**����**），并有 1px 边框��在浅色�片上有边界。
     - **�片底部��**：作者行独立一行�更�更淡（`--platform-text-muted`）；�作区是**两个等��按钮**（`flex: 1 1 0`�`min-height: 2rem` = 32px 触控目标��圆角�内边�），`打开作�` = 次�（�边），`**开始共创**` = 主�（填充/�色）；窄��许�行但��切。大纲行��径（`打开作�` �边 / `开始共创` 填充）。
@@ -1093,6 +1094,8 @@ procedure ��求**�信�务身份**（归属判定� `owner_user_id`，
 | �谱画布（`layout="stacked"`）节点**��显示作者�** | 原因：`LineageNodeContent` �在 `layout === 'inline'` 渲染作者行，画布传 `stacked` → 作者整列消失（`aria-label` 里�有，故�有视觉缺失）。修� `9cf30517d`：仅**窄�紧凑�片**�作者，其余两�形�都渲染。�验：本地夹具脚本（�谱/血缘） → **188/188 PASS**（原唯一 FAIL「�览器视觉：�版节点显示作者��转绿）；1440 桌�截图���片上有「演示作者甲/乙/丙/�� | ✅ 已修并�验 |
 | 移动端切「图谱视图�（横�画布）**�会�始定�到当�作�** | 修�� 390 宽实测：`zoom=100%`�`transform: matrix(1,0,0,1,0,0)`，画布�视区 `x 37–353`，当�作�节点头部 `x 457–633` → 0/8 节点��。修� `ec8f27cb2`（横版画布 + 进入时按宽度适�并定�当�作�）。�验（360/390/414 三档）：`zoom=35%`�当�作�在画布内���节点 **7/8（360�390）/ 8/8（414）** | ✅ 已修并�验 |
 | （�留备注）窄�图谱视图里点�片会跳详情 | 窄�紧凑�片整�是「打开详情�按钮，没有��定区域 → 信���/�包屑的窄�验�改由**大纲形�**�（点行弹底部 sheet��包屑出现并被滚进视�，三档� PASS）。�是缺陷，但窄�画布下确实没有「�定�入� | � 记录 |
+| **连线锚点是��在�片水平中心**（2026-10-07 定标，用户点����数值） | 方法：`path.getPointAtLength(0)` / `(len)` �端点 + `path.getScreenCTM()` ��到视��标，与 `card.getBoundingClientRect()` **�一�标系**比较（�手算 `scale(0.6)`）。演示树 7 �边 × 两端 = 14 个端点，`Δx` **全部 0.00px**（父/��中心与端点 x 完全相等）；�一批还�到 `cardCenter − nodeCenter = 0.00`（节点盒左�内边�相等 ⇒ �片在盒内精确居中），故早期一次「13.8px�是**�对错误**（按最近�中心匹�）�是错�。纵�：父端锚点在�底边上方 9.7px（被�片盖�）��端在��顶边上方 12.2px，�边�定（�� = 节点盒 `11.2px` 上下内边� + `1px` 边框，� §3.6.1）。原始数� `%TEMP%\lineage-cardunify-verify\anchor-table.json`�截图 `05-anchor-table.png` | ✅ 已验� |
+| **「expected 304 to be 344�（差 40px）定性** | **结论：我的断言写错，�是布局错�**。elbow 路径末点是写� `… V 344`（无逗�）的，我用 `/(\d+),(\d+)/g` 抓「最�一个�标对�时抓到的是圆角 `Q 348,292 348,304` 的**曲线控制点**（`348,304`），它当然�等于端点。��三�：① 纯函数打�（`lineageTreeLayout.test.ts` 临时 `console.log`）显示 4 �边的 `from/to` 与父底中点 / �顶中点**�字段相等**；② 已把断言补�「对**�一�边**（�一父多�扇出）`toEqual` 父底中点 / �顶中点 + 路径首点 = from + 路径末段以 `to.y` 结尾�并常驻测试（本轮�交）；③ 真机 14 端点 Δx 全 0.00。**因此「横�扇出�移�这��设被�掉**，连线�存在横�扇出 | ✅ 已定性并�地断言 |
 
 ### 5.7 AGC 客户端共创页 / 「开始共创�确认页与外壳滚动链（2026-10-07）实施��
 
diff --git a/src/components/game-distribution/lineageTreeLayout.test.ts b/src/components/game-distribution/lineageTreeLayout.test.ts
index 96d79e8f2..fd765f6a4 100644
--- a/src/components/game-distribution/lineageTreeLayout.test.ts
+++ b/src/components/game-distribution/lineageTreeLayout.test.ts
@@ -225,12 +225,36 @@ describe('buildLineageTreeLayout', () => {
       node('root', 0, null),
       node('a', 1, 'root'),
       node('b', 1, 'root'),
+      node('a1', 2, 'a'),
+      node('b1', 2, 'b'),
     ]);
     const elbow = branched.edges.find((item) => item.childGameId === 'a')!;
     expect(elbow.path).toContain(' V ');
     expect(elbow.path).toContain(' H ');
     expect(elbow.path).toContain(' Q ');
     expect(elbow.path).not.toContain(' C ');
+
+    // �一�边（�「一个父 + 多个��的扇出边）都必须钉在父�下边中点 / ��上边中点上，
+    // ��许任何横�扇出�移：图谱连线垂直�在�片水平中心（真机��径）。
+    const byId = new Map(branched.nodes.map((item) => [item.gameId, item]));
+    expect(branched.edges).toHaveLength(4);
+    for (const item of branched.edges) {
+      const parent = byId.get(item.parentGameId)!;
+      const child = byId.get(item.childGameId)!;
+      expect(item.from).toEqual({
+        x: parent.x + parent.width / 2,
+        y: parent.y + parent.height,
+      });
+      expect(item.to).toEqual({
+        x: child.x + child.width / 2,
+        y: child.y,
+      });
+      // 路径首点 = 父锚点；路径末点写在最�一段 V/H 里（曲线控制点�是端点）。
+      expect(item.path.startsWith(`M ${item.from.x},${item.from.y}`)).toBe(
+        true,
+      );
+      expect(item.path.trimEnd().endsWith(` ${item.to.y}`)).toBe(true);
+    }
   });
 
   it('确定性：�一输入两次调用结果�字段相�', () => {