From ec8f27cb287a18b887cdca33fe4a9cfb6a5bb93b Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Wed, 7 Oct 2026 01:51:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=8F=E8=B0=B1=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=9B=BE=E8=B0=B1=E8=A7=86=E5=9B=BE=EF=BC=9A=E6=A8=AA=E7=89=88?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=20+=20=E8=BF=9B=E5=85=A5=E6=97=B6=E6=8C=89?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E9=80=82=E9=85=8D=E5=B9=B6=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E4=BD=9C=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...�技术方案】游�共创与作�Fork-2026-10-03.md |   2 +-
 .../GameDistributionPages.test.tsx            | 140 ++++++++++++
 .../game-distribution/GameLineagePage.tsx     | 199 ++++++++++++------
 3 files changed, 277 insertions(+), 64 deletions(-)

diff --git a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
index ea645121d..d397794bb 100644
--- a/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
+++ b/docs/�技术方案】游�共创与作�Fork-2026-10-03.md
@@ -459,7 +459,7 @@ A 路线里那个必须��知�的互斥点已�按既有�法绕开：`cr
 - **「累计创作世代数�在�端计算**：�本作��树深度（�树最大代际 − 本作�代际），用详情页**已�请求的�一份 `/lineage` 数�**算，�新增请求�也�加�务端字段。
 - **移动端形�**（跟�仓库既有窄断点，`useIsMobileViewport`）：
   - **默认大纲�缩进树**（`LineageOutlineList`）：全宽行�层级用左缩进 + 肘形导线表达�主干链导线加粗用主题色；**无横�滚动**�无需缩放平移；行高 ≥44px，点击行 = 选中（无 hover）。
-  - **图谱视图为�选开关**：切到画布�支�拖拽平移 / 缩放；布局层支� `orientation: 'horizontal'`（根在左�代际��，兄弟分支沿纵�排开）——窄�上比顶→下更�横�空间。
+  - **图谱视图为�选开关**（形� B = **横版画布**，`orientation: 'horizontal'`：根在左�代际���兄弟分支沿纵�排开，窄�上比顶→下更�横�空间）：切到画布�支�拖拽平移 / 缩放；横版**�渲染左侧代际轴**，代际信�由节点自带角标承担。**�次进入按宽度适�**（整棵树横�看完；触�最�缩放时给出「�拖拽平移��示），并把**当�作�**用最��移拉进视�——贴最近的边，父代 / 兄弟�留在视�里，�会出现「�在 100% 缩放�一个节点都看�到�的空�。桌��为纵�画布 + 宽高�时适�并居中。
   - **信���用 bottom sheet**：从底部�起（�简介 / 授� / 核心改动说明 / �往体验 / Fork 此版本），�罩点击或关闭按钮收起；桌���画布�上浮层。
   - �包屑横��滚动且**当�项常驻��**；尊� `prefers-reduced-motion`；底部留 `env(safe-area-inset-bottom)`。
   - **移动端门���（2026-10-06）**：平�原有的「移动端仅支�作�展示�欢迎弹窗�看 `!isDesktopLayout`�忽略路由，会把公开�读的�谱树 / 共创主题页首�盖�。现在按**显�白��**��这三个 stage：`game-lineage` / `game-themes` / `game-theme`（清�在 `PlatformActiveMobileWelcomeDialog.tsx` 的 `MOBILE_WELCOME_EXEMPT_STAGES`，键�� stage �，���缀/范围匹�）。**创作 / 项目 / �布 / 我的 / 平�首页���门�**——那些�是「移动端�支�体验创作工具�的部分；弹窗文案未改（与���的事实�矛盾：�谱与主题页本身就是作�展示）。
diff --git a/src/components/game-distribution/GameDistributionPages.test.tsx b/src/components/game-distribution/GameDistributionPages.test.tsx
index f82904b8d..59202243e 100644
--- a/src/components/game-distribution/GameDistributionPages.test.tsx
+++ b/src/components/game-distribution/GameDistributionPages.test.tsx
@@ -3096,6 +3096,146 @@ describe('GameLineagePage 筛选器 / 主干线 / 信���（文档对�）
     expect(await screen.findByLabelText('创作�谱大纲')).toBeTruthy();
   });
 
+  /** 读画布视�状�：内容层的 `transform: translate(...) scale(...)`。 */
+  function readCanvasViewport(canvas: HTMLElement) {
+    const content = canvas.querySelector(
+      '.game-lineage-canvas__content',
+    ) as HTMLElement;
+    const match =
+      /translate\(([-\d.]+)px, ([-\d.]+)px\) scale\(([\d.]+)\)/u.exec(
+        content.style.transform,
+      );
+    if (!match) {
+      throw new Error(`无法解�画布 transform: ${content.style.transform}`);
+    }
+    return {
+      offsetX: Number.parseFloat(match[1]!),
+      offsetY: Number.parseFloat(match[2]!),
+      scale: Number.parseFloat(match[3]!),
+    };
+  }
+
+  /** 视�内��的节点�片：把内容层的 transform 应用到�片矩形，�与画布矩形求交。 */
+  function visibleCanvasCards(
+    canvas: HTMLElement,
+    view: { offsetX: number; offsetY: number; scale: number },
+  ) {
+    return [...canvas.querySelectorAll('.game-lineage-node')].filter((node) => {
+      const card = node as HTMLElement;
+      const left =
+        view.offsetX + Number.parseFloat(card.style.left) * view.scale;
+      const top = view.offsetY + Number.parseFloat(card.style.top) * view.scale;
+      const width = Number.parseFloat(card.style.width) * view.scale;
+      const height = Number.parseFloat(card.style.minHeight) * view.scale;
+      return (
+        left + width > 0 &&
+        top + height > 0 &&
+        left < canvas.clientWidth &&
+        top < canvas.clientHeight
+      );
+    });
+  }
+
+  it('图谱视图�次进入�适�并定�当�作�（�是 zoom 100% 的空�）', async () => {
+    setViewportWidth(390);
+    getGameLineageMock.mockResolvedValueOnce(tree);
+    // jsdom ��布局：给画布一个「真机尺寸�，适�与定��有�断言的数值。
+    const widthSpy = vi
+      .spyOn(Element.prototype, 'clientWidth', 'get')
+      .mockReturnValue(390);
+    const heightSpy = vi
+      .spyOn(Element.prototype, 'clientHeight', 'get')
+      .mockReturnValue(667);
+    try {
+      render(
+        <GameLineagePage
+          rootGameId="game-root"
+          onBack={vi.fn()}
+          onOpenDetail={vi.fn()}
+        />,
+      );
+
+      await screen.findByLabelText('创作�谱大纲');
+      fireEvent.click(screen.getByRole('button', { name: '图谱视图' }));
+
+      const canvas = (await screen.findByLabelText(
+        '创作�谱树',
+      )) as HTMLElement;
+      const view = readCanvasViewport(canvas);
+      // 窄�图谱视图是**横版**：代际沿 x 推进，且��渲染左侧代际轴（角标承担代际信�）。
+      expect(canvas.querySelector('.game-lineage-canvas__axis')).toBeNull();
+      expect(
+        new Set(
+          [...canvas.querySelectorAll('.game-lineage-node')].map((card) =>
+            Number.parseFloat((card as HTMLElement).style.left),
+          ),
+        ).size,
+      ).toBeGreaterThan(1);
+      expect(Math.round(view.scale * 100)).not.toBe(100);
+      expect(canvas.querySelector('.game-lineage-zoom')?.textContent).toBe(
+        `${Math.round(view.scale * 100)}%`,
+      );
+
+      const visible = visibleCanvasCards(canvas, view);
+      // 「一个节点都看�到�是最�的回归：这里至少�看到 3 个，且当�作�在视�内。
+      expect(visible.length).toBeGreaterThanOrEqual(3);
+      expect(visible).toContain(
+        canvas.querySelector('.game-lineage-node--anchor'),
+      );
+      expect(
+        visible.some((card) => card.getAttribute('data-generation') === '0'),
+      ).toBe(true);
+    } finally {
+      widthSpy.mockRestore();
+      heightSpy.mockRestore();
+    }
+  });
+
+  it('图谱视图缩放触底时把当�作�滚进视�（�上下文，��剩空�）', async () => {
+    setViewportWidth(320);
+    getGameLineageMock.mockResolvedValueOnce(tree);
+    const widthSpy = vi
+      .spyOn(Element.prototype, 'clientWidth', 'get')
+      .mockReturnValue(200);
+    const heightSpy = vi
+      .spyOn(Element.prototype, 'clientHeight', 'get')
+      .mockReturnValue(420);
+    try {
+      render(
+        <GameLineagePage
+          rootGameId="game-root"
+          // 锚点是**最�代**：树比视�宽�缩放已触底，必须��移把它拉进�。
+          highlightGameId="deep"
+          onBack={vi.fn()}
+          onOpenDetail={vi.fn()}
+        />,
+      );
+
+      await screen.findByLabelText('创作�谱大纲');
+      fireEvent.click(screen.getByRole('button', { name: '图谱视图' }));
+
+      const canvas = (await screen.findByLabelText(
+        '创作�谱树',
+      )) as HTMLElement;
+      const view = readCanvasViewport(canvas);
+      expect(view.scale).toBeGreaterThan(0);
+      expect(Math.round(view.scale * 100)).not.toBe(100);
+
+      const visible = visibleCanvasCards(canvas, view);
+      expect(visible).toContain(
+        canvas.querySelector('.game-lineage-node--anchor'),
+      );
+      // 当�作�进�了，但�是「�剩它�：父代�在视�里，用户看得到上下文。
+      expect(visible.length).toBeGreaterThanOrEqual(2);
+      expect(
+        visible.some((card) => card.getAttribute('data-generation') === '1'),
+      ).toBe(true);
+    } finally {
+      widthSpy.mockRestore();
+      heightSpy.mockRestore();
+    }
+  });
+
   it('窄��能点进详情页与查看完整�谱入�（大纲模��丢入�）', async () => {
     setViewportWidth(375);
     getGameLineageMock.mockResolvedValueOnce(tree);
diff --git a/src/components/game-distribution/GameLineagePage.tsx b/src/components/game-distribution/GameLineagePage.tsx
index d32035fe2..ca3535af0 100644
--- a/src/components/game-distribution/GameLineagePage.tsx
+++ b/src/components/game-distribution/GameLineagePage.tsx
@@ -325,6 +325,8 @@ export function GameLineagePage({
   );
   // 窄�用紧凑布局（更�的�片与间� + 更大的相对字�），��「桌�画布缩� + 字太��。
   const compactTree = isMobileViewport;
+  /** 窄�图谱视图用横版画布：代际信�交给节点角标，因此�渲染左侧代际轴层。 */
+  const horizontalCanvas = compactTree;
   const layout = useMemo(
     () =>
       buildLineageTreeLayout(
@@ -337,6 +339,9 @@ export function GameLineagePage({
               columnGap: 22,
               rowGap: 88,
               axisWidth: 72,
+              // 窄�图谱视图用横版（根在左�代际���兄弟沿纵�排开）：窄�上比顶→下更�横�空间，
+              // 纵�溢出交给滑动。代际信�由节点自带角标承担，所以横版�渲染代际轴（�下�的轴层）。
+              orientation: 'horizontal',
             }
           : undefined,
       ),
@@ -441,6 +446,68 @@ export function GameLineagePage({
     fitToView();
   }, [fitToView, layout.nodes.length, layout.width, normalizedRootId]);
 
+  /**
+   * 窄�「图谱视图�的�次定�：按**宽度**适�（整棵树横�看完），�把当�作�拉进视�。
+   *
+   * 为什么�独一�：窄�默认是大纲形�，画布**根本没挂载**（`viewportRef.current` 为 null），
+   * 上�那次自动适�其实什么都没�；用户切到图谱视图时画布是新挂载的，会�在
+   * `scale 1 / offset 0`——实测一个节点都看�到。桌��然是「宽高�时满足 + 居中�，
+   * ��这里影�。
+   */
+  const focusMobileCanvasOnAnchor = useCallback(() => {
+    const viewportElement = viewportRef.current;
+    if (!viewportElement || layout.nodes.length === 0) return;
+    const width = viewportElement.clientWidth;
+    const height = viewportElement.clientHeight;
+    const availableWidth = Math.max(1, width - FIT_PADDING * 2);
+    const fitWidth = availableWidth / Math.max(layout.width, 1);
+    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, fitWidth));
+    setFitHint(
+      scale > fitWidth + 0.001
+        ? '树较宽，已按最�缩放显示：拖拽平移查看。'
+        : '',
+    );
+    let offsetX = Math.max(FIT_PADDING, (width - layout.width * scale) / 2);
+    let offsetY = FIT_PADDING;
+    const anchorNode = layout.nodes.find((item) => item.gameId === anchorId);
+    if (anchorNode && width > 0 && height > 0) {
+      const left = offsetX + anchorNode.x * scale;
+      const right = left + anchorNode.width * scale;
+      const top = offsetY + anchorNode.y * scale;
+      const bottom = top + anchorNode.height * scale;
+      // ��**最��移**把当�作�拉进视�（贴到最近的边），��粗暴对中——
+      // 这样父代 / 兄弟�在视�里，用户一眼能看到上下文。
+      if (left < FIT_PADDING) offsetX += FIT_PADDING - left;
+      else if (right > width - FIT_PADDING) {
+        offsetX -= right - (width - FIT_PADDING);
+      }
+      if (top < FIT_PADDING) offsetY += FIT_PADDING - top;
+      else if (bottom > height - FIT_PADDING) {
+        offsetY -= bottom - (height - FIT_PADDING);
+      }
+    }
+    setViewport({ scale, offsetX, offsetY });
+  }, [anchorId, layout.nodes, layout.width]);
+
+  // �次真正「进入图谱视图�（或�了根作� / 锚点）定�一次；筛选�缩放�平移�抢视野。
+  const mobileFocusedForRef = useRef('');
+  useEffect(() => {
+    if (effectiveViewMode !== 'canvas' || !isMobileViewport) return;
+    if (layout.nodes.length === 0) return;
+    const key = `${normalizedRootId}:${layout.nodes.length}:${layout.width}:${anchorId}`;
+    if (mobileFocusedForRef.current === key) return;
+    mobileFocusedForRef.current = key;
+    focusMobileCanvasOnAnchor();
+  }, [
+    anchorId,
+    effectiveViewMode,
+    focusMobileCanvasOnAnchor,
+    isMobileViewport,
+    layout.nodes.length,
+    layout.width,
+    normalizedRootId,
+  ]);
+
   useEffect(
     () => () => {
       if (forkTimerRef.current !== null) {
@@ -753,40 +820,40 @@ export function GameLineagePage({
                   />
                 ) : null}
               </div>
-                  {pinnedChain.length > 0 ? (
-              <div
-                className="game-lineage-breadcrumb"
-                aria-label="已选中的路径"
-              >
-                {pinnedChain.map((crumb, index) => (
-                  <span
-                    key={crumb.gameId}
-                    className="game-lineage-breadcrumb__item"
-                  >
-                    {index > 0 ? <span aria-hidden="true">→</span> : null}
-                    <button
-                      type="button"
-                      className="game-lineage-breadcrumb__crumb"
-                      ref={
-                        crumb.gameId === pinnedGameId
-                          ? currentCrumbRef
-                          : undefined
-                      }
-                      onClick={() => setPinnedGameId(crumb.gameId)}
-                    >
-                      {`${generationAxisLabel(crumb.generation)}《${crumb.label}》`}
-                    </button>
-                  </span>
-                ))}
-                <button
-                  type="button"
-                  className="game-lineage-breadcrumb__clear"
-                  onClick={() => setPinnedGameId('')}
+              {pinnedChain.length > 0 ? (
+                <div
+                  className="game-lineage-breadcrumb"
+                  aria-label="已选中的路径"
                 >
-                  �消�定
-                </button>
-              </div>
-                  ) : null}
+                  {pinnedChain.map((crumb, index) => (
+                    <span
+                      key={crumb.gameId}
+                      className="game-lineage-breadcrumb__item"
+                    >
+                      {index > 0 ? <span aria-hidden="true">→</span> : null}
+                      <button
+                        type="button"
+                        className="game-lineage-breadcrumb__crumb"
+                        ref={
+                          crumb.gameId === pinnedGameId
+                            ? currentCrumbRef
+                            : undefined
+                        }
+                        onClick={() => setPinnedGameId(crumb.gameId)}
+                      >
+                        {`${generationAxisLabel(crumb.generation)}《${crumb.label}》`}
+                      </button>
+                    </span>
+                  ))}
+                  <button
+                    type="button"
+                    className="game-lineage-breadcrumb__clear"
+                    onClick={() => setPinnedGameId('')}
+                  >
+                    �消�定
+                  </button>
+                </div>
+              ) : null}
               {effectiveViewMode === 'outline' ? (
                 <LineageOutlineList
                   nodes={layout.nodes}
@@ -869,29 +936,35 @@ export function GameLineagePage({
                   {/*
                   代际轴是**固定层**：在 transform 之外，�置按视��算，字���缩放��，
                   因此放大或平移�轴标签始终在画布左侧�读，而�会被内容层带出去�掉。
+                  横版（窄�图谱视图）�渲染它：代际沿横�推进，节点自带的角标已承担代际信�。
                 */}
-                  <div className="game-lineage-canvas__axis" aria-hidden="true">
-                    {layout.axis.map((entry, index) => (
-                      <span
-                        key={entry.generation}
-                        className="game-lineage-axis"
-                        style={{
-                          top: viewport.offsetY + entry.y * viewport.scale,
-                          // 行高跟�缩放走：轴上的行与画布里的行始终对�。
-                          height:
-                            (layout.nodes[0]?.height ?? 0) * viewport.scale,
-                          borderTopWidth: index === 0 ? 0 : 1,
-                        }}
-                      >
-                        <span className="game-lineage-axis__label">
-                          {entry.label}
+                  {horizontalCanvas ? null : (
+                    <div
+                      className="game-lineage-canvas__axis"
+                      aria-hidden="true"
+                    >
+                      {layout.axis.map((entry, index) => (
+                        <span
+                          key={entry.generation}
+                          className="game-lineage-axis"
+                          style={{
+                            top: viewport.offsetY + entry.y * viewport.scale,
+                            // 行高跟�缩放走：轴上的行与画布里的行始终对�。
+                            height:
+                              (layout.nodes[0]?.height ?? 0) * viewport.scale,
+                            borderTopWidth: index === 0 ? 0 : 1,
+                          }}
+                        >
+                          <span className="game-lineage-axis__label">
+                            {entry.label}
+                          </span>
+                          <span className="game-lineage-axis__count">
+                            {entry.count}
+                          </span>
                         </span>
-                        <span className="game-lineage-axis__count">
-                          {entry.count}
-                        </span>
-                      </span>
-                    ))}
-                  </div>
+                      ))}
+                    </div>
+                  )}
                   {/*
                   画布内悬浮控件：放在**�下角**——左侧是代际轴�顶部是路径�包屑，
                   �下角是地图/画布类应用的习惯�置，也最�容易��根节点与主干。
@@ -960,15 +1033,15 @@ export function GameLineagePage({
                   「核心改动说明�是�端待补字段，缺失时整行�渲染。
                 */}
                   {selectedLayoutNode ? (
-                  <LineageInfoPanel
-                    node={selectedLayoutNode}
-                    game={selectedGame}
-                    isSheet={false}
-                    onClose={() => setPinnedGameId('')}
-                    onOpenDetail={onOpenDetail}
-                    onOpenFork={launchForkFromNode}
-                  />
-                ) : null}
+                    <LineageInfoPanel
+                      node={selectedLayoutNode}
+                      game={selectedGame}
+                      isSheet={false}
+                      onClose={() => setPinnedGameId('')}
+                      onOpenDetail={onOpenDetail}
+                      onOpenFork={launchForkFromNode}
+                    />
+                  ) : null}
                 </div>
               )}
               {/* 大纲模�下的 bottom sheet（桌�形�的��在画布内，�上一分支）。 */}