From d489488ca2c75a09b2abc3a42ef0c64c792f89b0 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Fri, 5 Jun 2026 16:19:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A8=B3=E5=AE=9A=E6=8E=A8=E8=8D=90?=
 =?UTF-8?q?=E9=A1=B5=E6=8B=BC=E5=9B=BE=E4=B8=8B=E4=B8=80=E5=85=B3=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hermes/shared-memory/decision-log.md         |   2 +-
 ...�玩法创作】平�入�与玩法链路-2026-05-15.md |   4 +-
 .../PlatformEntryFlowShellImpl.tsx            |  49 ++++---
 .../RpgEntryHomeView.recharge.test.tsx        | 128 +++++++++++++++++-
 src/components/rpg-entry/RpgEntryHomeView.tsx | 125 ++++++++++++++++-
 src/index.css                                 |  25 ++++
 6 files changed, 299 insertions(+), 34 deletions(-)

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index 4888ef7b..04be2504 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -207,7 +207,7 @@
 ## 2026-05-26 推�页拼图下一关 pending 时�留当��行�
 
 - 背景：推�页嵌入拼图在点击“下一关�时，`advancePuzzleNextLevel` 的�务端请求会短暂处于 pending。旧逻辑把推��的 `isStartingRecommendEntry` 和拼图局部 busy 混在一起，导致外层直接切回“加载中...�，把当� `PuzzleRuntimeShell` 一起�载，视觉上�是切关闪回。
-- 决策：推�页嵌入拼图切关 pending 期间必须�留当��行�与棋盘，�让拼图壳内部 busy 表现承接�步；`isStartingRecommendEntry` �表示推�作�尚未真正�动出�，��把已有嵌入拼图 run 的局部 busy 一并当�整�加载�。若下一关�到相似作�，�端还必须把新作�写回推�缓存并�步 `activeRecommendEntryKey`，���行�进入新作�但推��元信��分享 / 点赞 / 改造和�续“下一个��锚定旧作�。
+- 决策：推�页嵌入拼图切关 pending 期间必须�留当��行�与棋盘，�让拼图壳内部 busy 表现承接�步；`isStartingRecommendEntry` �表示推�作�尚未真正�动出�，��把已有嵌入拼图 run 的局部 busy 一并当�整�加载�。若下一关�到相似作�，�端还必须把新作�写回推�缓存并�步 `activeRecommendEntryKey`，���行�进入新作�但推��元信��分享 / 点赞 / 改造和�续“下一个��锚定旧作�；但这个�步�属于�一个 run 内部推进，�得触�推� rail 切�动画�纵��移或�动���置。
 - 影�范围：`src/components/platform-entry/PlatformEntryFlowShellImpl.tsx`�`src/components/rpg-entry/RpgEntryHomeView.tsx`�推�页拼图切关测试与平�链路文档。
 - 验�方�：点击推�页拼图“下一关��，在 `advancePuzzleNextLevel` 未返回�，页��应�留 `puzzle-board`，且�出现 `加载中...` ��；返回相似作��，当�推��的 `作�信�` 应显示新作�标题。
 - 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
diff --git a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
index fa82cc45..063f48f8 100644
--- a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
+++ b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
@@ -126,7 +126,7 @@ RPG / 拼图等�行�存档�以 `/api/profile/save-archives` 的�端列
 - 拼图�行�顶部关�信�采用游�化铭牌样�：橘棕横�关��牌承载 `第 N 关` 和关��，左侧固定使用 `media/logo.png` �通形象；倒计时作为下挂米白�牌独立显示，紧贴铭牌但��挡棋盘。该样��改��行� HUD 视觉，�改�计时�暂��失败�步或关�推进规则。
 - 拼图�行�进行中关�的 `elapsedMs` �是结算字段，设置��的“当�用时�必须按 `startedAtMs`�暂�累计和冻结累计实时派生；��直接把进行中的 `currentLevel.elapsedMs` 当作展示值。
 - 推�页嵌入拼图�行�时，通关结算弹层必须挂到页�级 fixed 浮层，�能留在推��片视觉区内的 absolute 覆盖层；推�页滑动�片和�行�视�都使用 `overflow: hidden`，��内容区会�剪排行榜�下一关按钮和相似作��。
-- 推�页嵌入拼图�行�时，“下一关�应优先切到相似作�；如果当�推�候选为空，�回退到�作�下一关，��匿�推��在多关�作�上�续�留在�一作�内。下一关请求 pending 期间必须�留当� `PuzzleRuntimeShell` 和棋盘，�得把推��整体切回 `加载中...` ���；局部�步状�由拼图�行�自己的 busy 表现承接。�端返回的新关�属于其它作�时，�端必须�步 `selectedPuzzleDetail`�推�页 `puzzleGalleryEntries` 缓存和 `activeRecommendEntryKey`，让底部作�信��分享 / 点赞 / 改造和下一次“下一个�基准都指�新作�。
+- 推�页嵌入拼图�行�时，“下一关�应优先切到相似作�；如果当�推�候选为空，�回退到�作�下一关，��匿�推��在多关�作�上�续�留在�一作�内。下一关请求 pending 期间必须�留当� `PuzzleRuntimeShell` 和棋盘，�得把推��整体切回 `加载中...` ���；局部�步状�由拼图�行�自己的 busy 表现承接。�端返回的新关�属于其它作�时，�端必须�步 `selectedPuzzleDetail`�推�页 `puzzleGalleryEntries` 缓存和 `activeRecommendEntryKey`，让底部作�信��分享 / 点赞 / 改造和下一次“下一个�基准都指�新作�；但这�属于�一个 runtime run 内部推进，�能触�推� rail 切�动画�纵��移或�动���置，已挂载且 ready 的�行�画�应��稳定，��默更新作�信�和�作基准。
 - 推�页里的拼图作�如果从�行�进入“改造�结果页，返回平���清掉推�嵌入�的 `activeRecommendEntryKey` / `activeRecommendRuntimeKind` / `isStartingRecommendEntry`，��新按推�页自动�动逻辑进入作�，�能�用已�被清空的旧 `puzzleRun`。
 - 拼图�行��许�端低延迟交互表现，但通关�排行榜�奖励和作�状��以�端确认为准。
 
@@ -156,7 +156,7 @@ RPG / 拼图等�行�存档�以 `/api/profile/save-archives` 的�端列
 
 删除等破�性动作当�未接入 jump-hop 删除 API；如果�续�在作�架�供删除入�，必须先补��端/SpacetimeDB/�端整�删除链路，�开放按钮。
 
-推�页匿�游玩���定为跳一跳。移动端一级 `推�` Tab 是内嵌�行�刷��，会自动选择推�作�并�动对应玩法；桌�端首页��动这套移动推��行�，而是渲染桌��现壳，展示 `今日游�`�`推�`�`作�分类` 等桌�内容。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平�壳和首页视图必须共用�一个判断，��桌��现页与移动推�页�时挂载���触�请求或�动�行�。推�页嵌入�行��动时按真实身份分�：已登录用户或本地已有 access token 时继续使用账� Bearer，但请求选项必须是 local auth impact，���� 401 清空整站登录�；�有确认为匿�访客时�申请短期 Runtime Guest Token，并�把它作为局部请求头传给�行�客户端，�写入全局登录���触� refresh，也�把匿���伪装�普通用户。当�覆盖矩阵为：跳一跳�视觉�说�抓大鹅 Match3D�方洞挑战�拼图�敲木鱼�大鱼��鱼�汪汪声浪。�个模�的�动请求�推�页内�续�行�动作以�需�上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分�；公开读�入���匿�读�，创作�个人作��删除��布�Remix 等账�/所有�动作���普通用户鉴�。
+推�页匿�游玩���定为跳一跳。移动端一级 `推�` Tab 是内嵌�行�刷��，会自动选择推�作�并�动对应玩法；桌�端首页��动这套移动推��行�，而是渲染桌��现壳，展示 `今日游�`�`推�`�`作�分类` 等桌�内容。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平�壳和首页视图必须共用�一个判断，��桌��现页与移动推�页�时挂载���触�请求或�动�行�。移动端推�页�动或切�作�时先展示当�作���，嵌入 runtime 在��下层加载；�有对应�行� run / profile 已准备且 lazy runtime 组件完�挂载�，�����，�在中途展示“加载中�文案。拼图下一关在�一个 run 内推进到相似作�时�视为推�作�切�，�能�新显示�动��。推�页嵌入�行��动时按真实身份分�：已登录用户或本地已有 access token 时继续使用账� Bearer，但请求选项必须是 local auth impact，���� 401 清空整站登录�；�有确认为匿�访客时�申请短期 Runtime Guest Token，并�把它作为局部请求头传给�行�客户端，�写入全局登录���触� refresh，也�把匿���伪装�普通用户。当�覆盖矩阵为：跳一跳�视觉�说�抓大鹅 Match3D�方洞挑战�拼图�敲木鱼�大鱼��鱼�汪汪声浪。�个模�的�动请求�推�页内�续�行�动作以�需�上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分�；公开读�入���匿�读�，创作�个人作��删除��布�Remix 等账�/所有�动作���普通用户鉴�。
 
 ## 敲木鱼
 
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
index c87120ba..b4d77e98 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -545,6 +545,7 @@ type BabyObjectMatchGenerationPhase = 'generating' | 'ready' | 'failed';
 
 type RecommendRuntimeState = {
   activeKind: RecommendRuntimeKind | null;
+  barkBattlePublishedConfig: BarkBattlePublishedConfig | null;
   babyObjectMatchDraft: BabyObjectMatchDraft | null;
   bigFishRun: BigFishRuntimeSnapshotResponse | null;
   jumpHopRun: JumpHopRunResponse['run'] | null;
@@ -730,7 +731,7 @@ function isRecommendRuntimeReadyForEntry(
     return Boolean(state.visualNovelRun);
   }
   if (expectedKind === 'bark-battle') {
-    return true;
+    return Boolean(state.barkBattlePublishedConfig);
   }
   if (expectedKind === 'edutainment') {
     return Boolean(state.babyObjectMatchDraft);
@@ -15003,6 +15004,29 @@ export function PlatformEntryFlowShellImpl({
     isDesktopLayout,
   ]);
 
+  const activeRecommendEntry =
+    activeRecommendEntryKey && !isDesktopLayout
+      ? (recommendRuntimeEntries.find(
+          (entry) =>
+            getPlatformPublicGalleryEntryKey(entry) ===
+            activeRecommendEntryKey,
+        ) ?? null)
+      : null;
+  const isActiveRecommendRuntimeReady =
+    activeRecommendEntry !== null &&
+    isRecommendRuntimeReadyForEntry(activeRecommendEntry, {
+      activeKind: activeRecommendRuntimeKind,
+      barkBattlePublishedConfig,
+      babyObjectMatchDraft,
+      bigFishRun,
+      jumpHopRun,
+      match3dRun,
+      puzzleRun,
+      squareHoleRun,
+      visualNovelRun,
+      woodenFishRun,
+    });
+
   useEffect(() => {
     if (
       isDesktopLayout ||
@@ -15020,25 +15044,6 @@ export function PlatformEntryFlowShellImpl({
       return;
     }
 
-    const activeRecommendEntry = activeRecommendEntryKey
-      ? (recommendRuntimeEntries.find(
-          (entry) =>
-            getPlatformPublicGalleryEntryKey(entry) === activeRecommendEntryKey,
-        ) ?? null)
-      : null;
-    const isActiveRecommendRuntimeReady =
-      activeRecommendEntry !== null &&
-      isRecommendRuntimeReadyForEntry(activeRecommendEntry, {
-        activeKind: activeRecommendRuntimeKind,
-        babyObjectMatchDraft,
-        bigFishRun,
-        jumpHopRun,
-        match3dRun,
-        puzzleRun,
-        squareHoleRun,
-        visualNovelRun,
-        woodenFishRun,
-      });
     if (
       (activeRecommendEntry !== null && isActiveRecommendRuntimeReady) ||
       isStartingRecommendEntry
@@ -15054,9 +15059,12 @@ export function PlatformEntryFlowShellImpl({
   }, [
     activeRecommendEntryKey,
     activeRecommendRuntimeKind,
+    activeRecommendEntry,
+    barkBattlePublishedConfig,
     babyObjectMatchDraft,
     bigFishRun,
     jumpHopRun,
+    isActiveRecommendRuntimeReady,
     isStartingRecommendEntry,
     match3dRun,
     platformBootstrap.isLoadingPlatform,
@@ -16399,6 +16407,7 @@ export function PlatformEntryFlowShellImpl({
               onOpenRecommendGalleryDetail={openRecommendGalleryDetail}
               recommendRuntimeContent={recommendRuntimeContent}
               activeRecommendEntryKey={activeRecommendEntryKey}
+              isRecommendRuntimeReady={isActiveRecommendRuntimeReady}
               isStartingRecommendEntry={
                 isStartingRecommendEntry ||
                 isBigFishBusy ||
diff --git a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
index 07f39d36..20f7a2f9 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
@@ -823,6 +823,7 @@ function renderLoggedOutHomeView(
       | 'recommendRuntimeContent'
       | 'activeRecommendEntryKey'
       | 'isStartingRecommendEntry'
+      | 'isRecommendRuntimeReady'
       | 'recommendRuntimeError'
       | 'onSelectNextRecommendEntry'
       | 'onSelectPreviousRecommendEntry'
@@ -883,6 +884,7 @@ function renderLoggedOutHomeView(
         }
         activeRecommendEntryKey={overrides.activeRecommendEntryKey}
         isStartingRecommendEntry={overrides.isStartingRecommendEntry}
+        isRecommendRuntimeReady={overrides.isRecommendRuntimeReady}
         recommendRuntimeError={overrides.recommendRuntimeError}
         onSelectNextRecommendEntry={overrides.onSelectNextRecommendEntry}
         onSelectPreviousRecommendEntry={
@@ -3703,7 +3705,10 @@ test('logged out mobile recommend page renders runtime instead of cover', () =>
   );
 
   expect(screen.getByTestId('recommend-runtime')).toBeTruthy();
-  expect(document.querySelector('.platform-recommend-cover-only')).toBeNull();
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover'),
+  ).toBeTruthy();
+  expect(screen.queryByText('加载中...')).toBeNull();
   expect(
     document.querySelector('.platform-public-work-card__cover'),
   ).toBeNull();
@@ -3712,7 +3717,7 @@ test('logged out mobile recommend page renders runtime instead of cover', () =>
   expect(onOpenGalleryDetail).not.toHaveBeenCalled();
 });
 
-test('mobile recommend loading state is themed instead of hardcoded black', () => {
+test('mobile recommend startup keeps cover visible without loading copy', () => {
   renderLoggedOutHomeView(vi.fn(), {
     latestEntries: [puzzlePublicEntry],
     activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
@@ -3720,8 +3725,123 @@ test('mobile recommend loading state is themed instead of hardcoded black', () =
     recommendRuntimeContent: null,
   });
 
-  expect(document.querySelector('.platform-recommend-cover-only')).toBeNull();
-  expect(screen.getByText('加载中...')).toBeTruthy();
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover'),
+  ).toBeTruthy();
+  expect(screen.queryByText('加载中...')).toBeNull();
+  expect(screen.getAllByText('奇幻拼图').length).toBeGreaterThan(0);
+});
+
+test('mobile recommend next level keeps runtime visual stable when active work changes', async () => {
+  const animationCallbacks: FrameRequestCallback[] = [];
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    writable: true,
+    value: vi.fn((callback: FrameRequestCallback) => {
+      animationCallbacks.push(callback);
+      return animationCallbacks.length;
+    }),
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    writable: true,
+    value: vi.fn(),
+  });
+  const firstEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-feed-1',
+    profileId: 'puzzle-profile-feed-1',
+    ownerUserId: 'user-feed-1',
+    publicWorkCode: 'PZ-FEED1',
+    worldName: '当�拼图',
+    coverImageSrc: 'current-cover.png',
+  } satisfies PlatformPublicGalleryCard;
+  const similarEntry = {
+    ...puzzlePublicEntry,
+    workId: 'puzzle-work-similar-1',
+    profileId: 'puzzle-profile-similar-1',
+    ownerUserId: 'user-feed-2',
+    publicWorkCode: 'PZ-SIMILAR1',
+    worldName: '相似拼图',
+    coverImageSrc: 'similar-cover.png',
+  } satisfies PlatformPublicGalleryCard;
+
+  const { rerender } = renderLoggedOutHomeView(vi.fn(), {
+    latestEntries: [firstEntry, similarEntry],
+    activeRecommendEntryKey: 'puzzle:user-feed-1:puzzle-profile-feed-1',
+    isRecommendRuntimeReady: true,
+  });
+
+  act(() => {
+    animationCallbacks.splice(0).forEach((callback) => callback(16));
+  });
+  await waitFor(() => {
+    expect(
+      document.querySelector('.platform-recommend-runtime-cover')?.className,
+    ).toContain('platform-recommend-runtime-cover--hidden');
+  });
+
+  rerender(
+    <AuthUiContext.Provider
+      value={{
+        user: null,
+        canAccessProtectedData: false,
+        openLoginModal: vi.fn(),
+        requireAuth: vi.fn(),
+        openSettingsModal: vi.fn(),
+        openAccountModal: vi.fn(),
+        setCurrentUser: vi.fn(),
+        logout: vi.fn(async () => undefined),
+        musicVolume: 0.42,
+        setMusicVolume: vi.fn(),
+        platformTheme: 'light',
+        setPlatformTheme: vi.fn(),
+        isHydratingSettings: false,
+        isPersistingSettings: false,
+        settingsError: null,
+      }}
+    >
+      <RpgEntryHomeView
+        activeTab="home"
+        isDesktopLayout={false}
+        onTabChange={vi.fn()}
+        hasSavedGame={false}
+        savedSnapshot={null}
+        saveEntries={[]}
+        saveError={null}
+        featuredEntries={[]}
+        latestEntries={[firstEntry, similarEntry]}
+        myEntries={[]}
+        historyEntries={[]}
+        profileDashboard={null}
+        isLoadingPlatform={false}
+        isLoadingDashboard={false}
+        isResumingSaveWorldKey={null}
+        platformError={null}
+        dashboardError={null}
+        onContinueGame={vi.fn()}
+        onResumeSave={vi.fn()}
+        onOpenCreateWorld={vi.fn()}
+        onOpenCreateTypePicker={vi.fn()}
+        onOpenGalleryDetail={vi.fn()}
+        recommendRuntimeContent={<div data-testid="recommend-runtime" />}
+        activeRecommendEntryKey="puzzle:user-feed-2:puzzle-profile-similar-1"
+        isRecommendRuntimeReady
+        onOpenLibraryDetail={vi.fn()}
+        onSearchPublicCode={vi.fn()}
+      />
+    </AuthUiContext.Provider>,
+  );
+
+  const rail = document.querySelector(
+    '.platform-recommend-swipe-rail',
+  ) as HTMLElement | null;
+  expect(rail?.className).toContain('platform-recommend-swipe-rail--settled');
+  expect(rail?.style.transform).toBe('translate3d(0, 0px, 0)');
+  expect(screen.getByLabelText('相似拼图 作�信�')).toBeTruthy();
+  expect(
+    document.querySelector('.platform-recommend-runtime-cover')?.className,
+  ).toContain('platform-recommend-runtime-cover--hidden');
 });
 
 test('logged in recommend runtime preloads adjacent work previews and drag switches like video feed', () => {
diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx
index 9d2a37d9..6766dbc8 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.tsx
@@ -39,6 +39,7 @@ import {
   type CSSProperties,
   type PointerEvent,
   type ReactNode,
+  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -195,6 +196,7 @@ export interface RpgEntryHomeViewProps {
   recommendRuntimeContent?: ReactNode;
   activeRecommendEntryKey?: string | null;
   isStartingRecommendEntry?: boolean;
+  isRecommendRuntimeReady?: boolean;
   recommendRuntimeError?: string | null;
   onSelectNextRecommendEntry?: (activeEntryKey?: string | null) => void;
   onSelectPreviousRecommendEntry?: (activeEntryKey?: string | null) => void;
@@ -946,6 +948,115 @@ function RecommendRuntimePreviewCard({
   );
 }
 
+function RecommendRuntimeCover({
+  entry,
+  className = '',
+}: {
+  entry: PlatformPublicGalleryCard;
+  className?: string;
+}) {
+  const coverImage = resolvePlatformWorldCoverImage(entry);
+  const fallbackCoverImage = resolvePlatformWorldFallbackCoverImage(entry);
+
+  return (
+    <div
+      className={`platform-recommend-runtime-cover ${className}`}
+      aria-hidden="true"
+    >
+      {coverImage || fallbackCoverImage ? (
+        <PlatformWorkCoverArtwork
+          entry={entry}
+          imageSrc={coverImage}
+          fallbackSrc={fallbackCoverImage}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      ) : (
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_22%_18%,rgba(255,255,255,0.28),transparent_30%),linear-gradient(135deg,rgba(255,118,117,0.42),rgba(89,164,255,0.34))]" />
+      )}
+      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.34))]" />
+    </div>
+  );
+}
+
+function RecommendRuntimeMountedProbe({
+  onMounted,
+}: {
+  onMounted: () => void;
+}) {
+  useEffect(() => {
+    const animationFrameId = window.requestAnimationFrame(onMounted);
+    return () => window.cancelAnimationFrame(animationFrameId);
+  }, [onMounted]);
+
+  return null;
+}
+
+function RecommendRuntimeVisual({
+  entry,
+  runtimeContent,
+  isStarting,
+  isRuntimeReady,
+}: {
+  entry: PlatformPublicGalleryCard;
+  runtimeContent?: ReactNode;
+  isStarting: boolean;
+  isRuntimeReady: boolean;
+}) {
+  const [isRuntimeMounted, setIsRuntimeMounted] = useState(false);
+  const activeEntryKey = buildPublicGalleryCardKey(entry);
+  const previousEntryKeyRef = useRef(activeEntryKey);
+
+  useEffect(() => {
+    if (previousEntryKeyRef.current === activeEntryKey) {
+      return;
+    }
+    previousEntryKeyRef.current = activeEntryKey;
+    setIsRuntimeMounted((currentValue) => {
+      // 中文注释：拼图推��“下一关�会在�一个 run 内切到相似作�；
+      // 此时�更新作�信�和分享基准，�应�显��造��行�闪跳。
+      if (currentValue && !isStarting && isRuntimeReady) {
+        return currentValue;
+      }
+      return false;
+    });
+  }, [activeEntryKey, isRuntimeReady, isStarting]);
+
+  const handleRuntimeMounted = useCallback(() => {
+    if (!isStarting && isRuntimeReady) {
+      setIsRuntimeMounted(true);
+    }
+  }, [isRuntimeReady, isStarting]);
+
+  const shouldShowCover =
+    !runtimeContent || isStarting || !isRuntimeReady || !isRuntimeMounted;
+
+  return (
+    <div className="platform-recommend-runtime-visual">
+      {runtimeContent ? (
+        <Suspense fallback={null}>
+          <div
+            className="platform-recommend-runtime-viewport"
+            aria-hidden={shouldShowCover}
+          >
+            {runtimeContent}
+          </div>
+          <RecommendRuntimeMountedProbe
+            key={activeEntryKey}
+            onMounted={handleRuntimeMounted}
+          />
+        </Suspense>
+      ) : null}
+      <RecommendRuntimeCover
+        entry={entry}
+        className={
+          shouldShowCover ? '' : 'platform-recommend-runtime-cover--hidden'
+        }
+      />
+    </div>
+  );
+}
+
 function RecommendSwipeCard({
   entry,
   authorAvatarUrl,
@@ -4023,6 +4134,7 @@ export function RpgEntryHomeView({
   recommendRuntimeContent,
   activeRecommendEntryKey = null,
   isStartingRecommendEntry = false,
+  isRecommendRuntimeReady = false,
   recommendRuntimeError = null,
   onSelectNextRecommendEntry,
   onSelectPreviousRecommendEntry,
@@ -5687,10 +5799,6 @@ export function RpgEntryHomeView({
             {recommendRuntimeError}
           </button>
         </section>
-      ) : isStartingRecommendEntry ? (
-        <section className="platform-recommend-runtime-panel">
-          <div className="platform-recommend-runtime-state">加载中...</div>
-        </section>
       ) : activeRecommendEntry ? (
         <div
           ref={recommendCardStageRef}
@@ -5732,9 +5840,12 @@ export function RpgEntryHomeView({
                 )}
                 isActive
                 visual={
-                  <div className="platform-recommend-runtime-viewport">
-                    {recommendRuntimeContent}
-                  </div>
+                  <RecommendRuntimeVisual
+                    entry={activeRecommendEntry}
+                    runtimeContent={recommendRuntimeContent}
+                    isStarting={isStartingRecommendEntry}
+                    isRuntimeReady={isRecommendRuntimeReady}
+                  />
                 }
                 onDragPointerDown={beginRecommendDrag}
                 onDragPointerMove={moveRecommendDrag}
diff --git a/src/index.css b/src/index.css
index 4df24a40..fc2baa82 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4831,6 +4831,31 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     pointer-events: auto;
   }
 
+  .platform-recommend-runtime-visual {
+    position: absolute;
+    inset: 0;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--platform-recommend-runtime-fill);
+  }
+
+  .platform-recommend-runtime-cover {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    overflow: hidden;
+    background: var(--platform-recommend-runtime-fill);
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity 420ms ease;
+    will-change: opacity;
+  }
+
+  .platform-recommend-runtime-cover--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .platform-recommend-swipe-stage {
     position: relative;
     flex: 1 1 auto;