From afb538ca8f28f1ca2d4d829438b47a400c268b6b Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Wed, 7 Oct 2026 16:12:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8E=E8=A7=84=E8=8C=83?=
 =?UTF-8?q?=EF=BC=9A=E6=90=AC=E5=87=BA=E5=8D=A1=E7=89=87=E7=9A=84=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=84=B1=E7=A6=BB=E5=8D=A1=E5=86=85=E4=BD=9C=E7=94=A8?=
 =?UTF-8?q?=E5=9F=9F=E5=B9=B6=E6=8C=89=E5=B9=B3=E5=8F=B0=E5=BA=A6=E9=87=8F?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E3=80=81=E5=B0=81=E9=9D=A2=E5=BC=BA=E5=88=B6?=
 =?UTF-8?q?=2016:9=20=E9=93=BA=E6=BB=A1=E3=80=81=E5=85=A8=E5=B1=8F=20overl?=
 =?UTF-8?q?ay=20=E6=A0=B7=E5=BC=8F=EF=BC=9B=E5=90=8C=E6=AD=A5=20=C2=A73.6.?=
 =?UTF-8?q?1=20=E4=BA=A4=E4=BA=92=E5=8F=A3=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...�技术方案】游�共创与作�Fork-2026-10-03.md |   9 +-
 .../game-distribution/gameDistribution.css    | 171 ++++++++++++++++--
 2 files changed, 165 insertions(+), 15 deletions(-)

diff --git a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
index 05b5b46d0..f92356b15 100644
--- a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
+++ b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
@@ -483,9 +483,16 @@ A 路线里那个必须��知�的互斥点已�按既有�法绕开：`cr
 - **画布交互硬化（2026-10-07，用户�径）**：① **滚轮�缩放画布**——React 的 `onWheel` 挂在根容器上且是 **passive** 的（`preventDefault` 无效 ⇒ 页�跟�滚），因此改为在**画布元素本身**挂原生 `wheel` 监�并显� `{ passive: false }`（�绑 `window`）；② **拖动�选中/�拖走文本**——画布容器 `user-select: none` + `touch-action: none` + `overscroll-behavior: contain`，拖动期间把 `user-select: none` 压到 `document.body`（跨出画布也有效，�手��），并对 `selectstart` / `dragstart` 挂原生阻止�画布内图片 `-webkit-user-drag: none; pointer-events: none`；指针�获（`setPointerCapture`）��移出容器�跟手；③ **平移边界**：`clampLineagePan`（纯函数）��任何时刻至少 `LINEAGE_PAN_KEEP_PX = 96` �素内容��，拖到底/拖到顶�会把内容拖飞。真机实测（Chromium，1440×900）：滚轮�缩放 60%→65%�`window.scrollY` 与平�滚动容器 `scrollTop` **都��**；两次连续拖动��移 +120px 且 `window.getSelection()` 始终为空字符串。
 - **「一键开始共创��置与未安装检测（2026-10-07，用户�径）**：按钮从共创信��**�到主�作行**（与「立�玩 / 收��并列，��主�作视觉��；�内����出现）。未安装检测：纯 web **拿�到系统级安装信�**，�能�「唤起��览器是�被接管�间接判断（`blur` / `visibilitychange`，超时 `FORK_LAUNCH_FALLBACK_DELAY_MS = 1200ms`）；**未接管 / 移动端视为「没有客户端�→ 打开与顶�「下载客户端��一个下载入�**（`requestClientDownload()` 事件 → `ClientDownloadEntry` 弹窗），并�留手动�制作� ID 的�级路径与一�人��示。**局�**：慢�动的客户端/被用户�消的系统确认框/�些�派� blur 的环境都会误判�「未安装�，代价�是多打开一个下载入�（用户�关掉�试），�会阻断正常路径；�客户端（��应深链）走�一�兜底。
 - **共创信���留「标签 + 数� + 入��（2026-10-07，用户�径）**：�里�留世代/授�标签�父代文案�数�概览（游玩�计与分解�累计�生物�累计创作世代数）�「查看创作�谱�与所属主题 tag；**派生作��列表（�原「热门�生��）整�移除**（`CoCreationHotDerived` 组件与其 `.co-creation-hot*` 样�已删除，零引用），改由�谱页**图下方**的「父代 / �代�两�清�承担（父代 = 祖先链根→直接父；�代 = **直接�代**�按**热度（自身 `playCount`）��**��热度���务端创建�）。选「直接�代�的�由：与 `forkCount`/「被改编 N���径（数字与�片数一致）�与画布「�看父代与�代�开关�义�更深的层级已由上�的树表达。
+- **交互�径（2026-10-07 二次修正，�自真机�馈）**：
+  - **滚轮 = 画布竖�平移**（��是缩放）：原生� passive 监��绑在**画布元素**上并 `preventDefault`，所以外部页�与平�滚动容器都**�滚**；平移到边界过 `clampLineagePan`。**`Ctrl`/`⌘` + 滚轮 = 缩放**（�留通用手势与触控�缩放能力），**`Shift` + 滚轮 = 横�平移**（内容超宽时用）。两个按钮（`ZoomIn` / `ZoomOut`）与「总览�（原「适应窗��，2026-10-07 改�）负责缩放与全览。
+  - **拖动阈值**：按下时**��获指针��拦默认**；移动超过 `DRAG_START_THRESHOLD_PX = 4` �算拖动，此时� `setPointerCapture` + �选 + `preventDefault`。原因：在**容器**上按下��获会把 `pointerup`/`click` �定�到容器，**�片按钮点�动**（真机�现：鼠标点「打开作��8s 超时�键盘 Enter 正常 ⇒ 纯指针路径被�掉）。纯点击完全走�览器原生 `click`。
+  - **「全�查看�谱�= 真·全� overlay**：`createPortal` 到 `document.body` + `position: fixed; inset: 0`（实测 overlay 矩形 1440×900 == `innerWidth/innerHeight`），`role="dialog"` + `aria-modal="true"`，`Esc` 与「关闭�都�关，打开时焦点进 overlay�关闭�回触�按钮，`body` 滚动�定并在关闭时��；移动端�样整�并留 `env(safe-area-inset-*)`；里�就是 `GameLineagePage embedded`（**�一套画布**，点选/拖动/滚轮/��全部�一份实现），打开时�载内嵌那棵树���画布。独立 `/games/lineage` 页�与共创�的「查看创作�谱��是页�级入�。
+  - **被�出信��的按钮必须脱离�内作用域**：`.game-fork-remix-*` / `.co-creation-fork-primary*` / `.game-fork-lineage-link` 原先都写� `.game-detail-info-card .xxx`，�到主�作行/正文区��**选择器��命中**，按钮退回�览器默认样�（细边框�无内边�）。现已把这些选择器**去作用域化**，并按平�度�对�主�作行：主�作「一键开始共创�= 实心强调�高 48 / 圆角 16 / 内边� 0 16（与「立�玩��项一致，实测数值相�）；次级「全�查看�谱�= �边 pill。
+  - **��固定 16:9 且铺满**：`.game-lineage-node__cover` 强制 `aspect-ratio: 16 / 9` + `flex: 0 0 auto`（��被纵� flex 拉伸），内层 `.game-cover` / `img` `100%×100%` + `object-fit: cover; object-position: center`。三处（画布�片 / 大纲行 / 图谱下方父代�代清�）共用�一套；无��时�由 `GameCover` 给����（兜底未丢）。真机实测��比例 **1.778 = 16:9**。
+  - **图谱交互**：节点�片与图下方父代/�代清�**�项都�点开详情**（真机鼠标点击与键盘 `Enter` 都验�过），焦点样���。
 - **截断 / 空树 / ��用父节点**在两�形�下都有�级：截断�示�空��以�「原作�已��用�的��节点（��焦���点进详情��展示被删作�标题与作者�）。
 - **「共创�页签�径（2026-10-07，用户�径）**：页签与「游��页签**�用�一个 `GameGalleryPage`**（`scope="forkable"`），数��自公开目录并带 `forkable=1`（分页/游标/去�/末页/失败�全部沿用已实现的「加载更多�）；**�务端尚未生效期间客户端�兜一层�义过滤**（`forkAuthorization !== 'forbidden'`，未知按�止失败关闭），两��径一致��务端上线�等价幂等。页签��指�共创主题列表（主题列表页与路由�留，无页签入�）；页�标题 `game-co-creation` → 「共创 - 陶泥儿�，路由 `/games/co-creation`，移动端门��样按「�读�览 = 作�展示���。空�为「暂时没有开放共创的作��。
-- **�始适��径（2026-10-07 �核）**：�次进入按**宽高�时 fit**（`min(scaleX, scaleY)` + `FIT_PADDING`）并**水平垂直都居中**；若这个比例低于�读下� `READABLE_MIN_SCALE = 0.6`，就**�强行全览**，改用�读缩放 + 平移，并给出明确�示「树较大：已按�读缩放显示（其余代际在视�外），拖拽平移查看，或点「适应窗��看全树。�——两�情况下都**�会**在没有�示的��下把最深的代际丢在视�外。窄�「图谱视图��按**宽度**适�（�上文）。
+- **�始适��径（2026-10-07 �核）**：�次进入按**宽高�时 fit**（`min(scaleX, scaleY)` + `FIT_PADDING`）并**水平垂直都居中**；若这个比例低于�读下� `READABLE_MIN_SCALE = 0.6`，就**�强行全览**，改用�读缩放 + 平移，并给出明确�示「树较大：已按�读缩放显示（其余代际在视�外），拖拽平移查看，或点「总览�看全树。�——两�情况下都**�会**在没有�示的��下把最深的代际丢在视�外。窄�「图谱视图��按**宽度**适�（�上文）。
 - **主干线唯一性�核（2026-10-07，真实数�）**：演示树 `共创演示·A0｜星海工�`（8 节点�`playCount` 全 0，仅 A111 = 1）实测 **�代�好一个主干**：A0（0 代）/ A1（1 代）/ A11（2 代）/ A111（3 代）；A2�A3�A12�A21 **都�是**主干。�代并列 0 热度时�「�代中**创建时间最早**�的那个（`/lineage` 契约�「代际����代按创建时间���，布局�按输入顺�稳定�第一个），因此结果确定���渲染�化。**结论：主干逻辑未改**；新增「�代 isTrunk 数��好 1�的断言把它钉�（`lineageTreeLayout.test.ts`）。
 
 #### 3.6.2 AGC 客户端：「共创�列表页与「开始共创�确认页（2026-10-07 补充）
diff --git a/src/components/game-distribution/gameDistribution.css b/src/components/game-distribution/gameDistribution.css
index 3dba9fc11..344ac0a82 100644
--- a/src/components/game-distribution/gameDistribution.css
+++ b/src/components/game-distribution/gameDistribution.css
@@ -355,7 +355,7 @@
   color: var(--platform-text-soft);
 }
 /* �谱入�：与�内文字�节�的次级按钮，窄�也�网格�行收在侧�里。 */
-.game-detail-info-card .game-fork-lineage-link {
+.game-fork-lineage-link {
   justify-self: start;
   border: 1px solid var(--platform-surface-border);
   border-radius: 999px;
@@ -367,14 +367,14 @@
   font-weight: 700;
   cursor: pointer;
 }
-.game-detail-info-card .game-fork-lineage-link:hover {
+.game-fork-lineage-link:hover {
   background: rgba(199, 101, 61, 0.12);
 }
 /*
  * 「改造这个作��：入� + 展开�的获�方���。都在共创信��内，
  * 窄��网格�行与 `overflow-wrap: anywhere` 收在侧�里，�产生横�溢出。
  */
-.game-detail-info-card .game-fork-remix-link {
+.game-fork-remix-link {
   justify-self: start;
   border: 1px solid var(--platform-accent-strong);
   border-radius: 999px;
@@ -386,10 +386,10 @@
   font-weight: 700;
   cursor: pointer;
 }
-.game-detail-info-card .game-fork-remix-link:hover {
+.game-fork-remix-link:hover {
   background: rgba(199, 101, 61, 0.2);
 }
-.game-detail-info-card .game-fork-remix-panel {
+.game-fork-remix-panel {
   display: grid;
   justify-items: start;
   gap: 0.35rem;
@@ -403,27 +403,27 @@
   font-size: 0.76rem;
   line-height: 1.6;
 }
-.game-detail-info-card .game-fork-remix-steps {
+.game-fork-remix-steps {
   color: var(--platform-text-base);
   overflow-wrap: anywhere;
 }
-.game-detail-info-card .game-fork-remix-value {
+.game-fork-remix-value {
   min-width: 0;
   color: var(--platform-text-soft);
   overflow-wrap: anywhere;
 }
-.game-detail-info-card .game-fork-remix-value code {
+.game-fork-remix-value code {
   color: var(--platform-text-strong);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.72rem;
   overflow-wrap: anywhere;
 }
-.game-detail-info-card .game-fork-remix-actions {
+.game-fork-remix-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
 }
-.game-detail-info-card .game-fork-remix-copy {
+.game-fork-remix-copy {
   border: 1px solid var(--platform-surface-border);
   border-radius: 999px;
   padding: 0.2rem 0.7rem;
@@ -434,11 +434,11 @@
   font-weight: 600;
   cursor: pointer;
 }
-.game-detail-info-card .game-fork-remix-note {
+.game-fork-remix-note {
   color: var(--platform-text-soft);
   overflow-wrap: anywhere;
 }
-.game-detail-info-card .game-fork-remix-status {
+.game-fork-remix-status {
   color: var(--platform-text-soft);
   font-size: 0.74rem;
   overflow-wrap: anywhere;
@@ -798,7 +798,7 @@
   color: var(--platform-text-soft);
   font-size: 0.76rem;
 }
-.game-detail-info-card .co-creation-fork-primary {
+.co-creation-fork-primary {
   align-self: stretch;
   justify-content: center;
   padding: 0.45rem 0.9rem;
@@ -806,7 +806,7 @@
   background: rgba(199, 101, 61, 0.14);
   font-size: 0.86rem;
 }
-.game-detail-info-card .co-creation-fork-primary--blocked {
+.co-creation-fork-primary--blocked {
   border-color: var(--platform-surface-border);
   background: var(--platform-surface-muted, rgba(0, 0, 0, 0.04));
   color: var(--platform-text-soft);
@@ -2702,3 +2702,146 @@
 .lineage-relation__main:hover {
   border-color: var(--platform-surface-hover-border);
 }
+
+/*
+ * 「一键开始共创�在主�作行里：**必须与「立�玩��一套视觉��**。
+ *
+ * 为什么需�这段：按钮原先�在 `.game-detail-info-card` 里，样�被�内作用域套�
+ * （`.game-detail-info-card .game-fork-remix-link` / `.co-creation-fork-primary`）；
+ * �到 `actions` 主�作行�**选择器��命中**，按钮退回�览器默认样�（细边框 + 无内边�），
+ * 于是与「立�玩��是一个�级。这里把它按平�主�作按钮的度�固定下�（实心强调�lg 高度）。
+ */
+.game-fork-remix-link.co-creation-fork-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  gap: 0.35rem;
+  /* 与主�作行里的「立�玩��项对�（实测：高 48 / 圆角 16 / 内边� 0 16 / 字� 15）。 */
+  min-height: 3rem;
+  padding: 0 1rem;
+  border: 1px solid var(--platform-button-primary-border);
+  border-radius: 1rem;
+  background: var(--platform-button-primary-solid);
+  color: var(--platform-button-primary-text);
+  font: inherit;
+  font-size: 0.94rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.game-fork-remix-link.co-creation-fork-primary:hover {
+  background: var(--platform-accent-strong, var(--platform-accent));
+}
+/* �止共创：置�但�点（点了给原因），与平� disabled 观感一致。 */
+.co-creation-fork-primary--blocked,
+.game-fork-remix-link.co-creation-fork-primary--blocked {
+  border-color: var(--platform-surface-border);
+  background: var(--platform-surface-muted, rgba(0, 0, 0, 0.04));
+  color: var(--platform-text-soft);
+  cursor: not-allowed;
+}
+/* 「全�查看�谱�= 次级动作（�边），别和主�作抢焦点。 */
+.game-fork-lineage-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  min-height: 2rem;
+  padding: 0 0.85rem;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 999px;
+  background: var(--platform-button-secondary-fill);
+  color: var(--platform-button-secondary-text);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.game-fork-lineage-link:hover {
+  border-color: var(--platform-surface-hover-border);
+}
+
+/*
+ * 「全�查看�谱�的真·全� overlay：portal 到 body + position:fixed inset:0，
+ * 因此��详情页/平� tab ��的宽度�max-width�overflow 约�（之�是路由跳转，��副实）。
+ * 移动端�样整�，并给刘海/底部�留安全区。
+ */
+.lineage-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+  background: var(--platform-body-fill, #fff);
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}
+.lineage-fullscreen__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid var(--platform-surface-border);
+  background: var(--platform-surface, #fff);
+}
+.lineage-fullscreen__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+}
+.lineage-fullscreen__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  padding: 0 1rem;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 999px;
+  background: var(--platform-button-secondary-fill);
+  color: var(--platform-button-secondary-text);
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.lineage-fullscreen__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0.75rem 1rem 1rem;
+}
+/* overlay 里让画布�掉整�高度（内嵌时的高度上�是为详情页排版的）。 */
+.lineage-fullscreen__body .game-lineage-canvas {
+  height: min(48rem, 74vh);
+}
+
+/*
+ * ��固定 **16:9 且必须铺满**（2026-10-07 用户�径：「��固定 16：9，并且图片一定�铺满，��留空白�）。
+ * 之�画布�片的�� `aspect-ratio` 是 `auto`�且作为纵� flex �项被拉伸，图片��上�截 → 下�截是空白；
+ * 大纲/关系行的��虽然 16:9，但内部图片被撑到 192px 高��露出一� → 也�是「铺满�。
+ * 这里把三处统一：容器强制 16:9（`flex: 0 0 auto` 防止被 flex 拉伸）�
+ * 内层 wrapper 与 img 100%×100% + `object-fit: cover`。无��时的���由 `GameCover` 自己给（�留兜底）。
+ */
+.game-lineage-node__cover {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+.game-lineage-node__cover .game-cover,
+.game-lineage-node__cover .game-cover__image,
+.game-lineage-node__cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.game-lineage-node__cover img {
+  object-fit: cover;
+  object-position: center;
+}