fix: split recommendation layouts by breakpoint

src/components/platform-entry/PlatformEntryFlowShellImpl.tsx

@@ -410,6 +410,7 @@ import { PlatformFeedbackView } from './PlatformFeedbackView';
 import { PlatformWorkDetailView } from './PlatformWorkDetailView';
 import { usePlatformCreationAgentFlowController } from './usePlatformCreationAgentFlowController';
 import { usePlatformEntryBootstrap } from './usePlatformEntryBootstrap';
+import { usePlatformDesktopLayout } from './platformEntryResponsive';
 import { usePlatformEntryLibraryDetail } from './usePlatformEntryLibraryDetail';
 import { usePlatformEntryNavigation } from './usePlatformEntryNavigation';
 
@@ -2714,6 +2715,7 @@ export function PlatformEntryFlowShellImpl({
     authUi?.platformTheme === 'dark'
       ? 'platform-theme--dark'
       : 'platform-theme--light';
+  const isDesktopLayout = usePlatformDesktopLayout();
   const [showCreationTypeModal, setShowCreationTypeModal] = useState(false);
   const [selectedDetailEntry, setSelectedDetailEntry] =
     useState<CustomWorldLibraryEntry<CustomWorldProfile> | null>(null);
@@ -11758,6 +11760,7 @@ export function PlatformEntryFlowShellImpl({
 
   const recommendRuntimeContent = useMemo(() => {
     if (
+      isDesktopLayout ||
       selectionStage !== 'platform' ||
       platformBootstrap.platformTab !== 'home' ||
       !activeRecommendRuntimeKind
@@ -12164,10 +12167,12 @@ export function PlatformEntryFlowShellImpl({
     visualNovelSession,
     visualNovelWork,
     checkpointWoodenFishRuntimeRun,
+    isDesktopLayout,
   ]);
 
   useEffect(() => {
     if (
+      isDesktopLayout ||
       selectionStage !== 'platform' ||
       platformBootstrap.platformTab !== 'home' ||
       platformBootstrap.isLoadingPlatform
@@ -12223,6 +12228,7 @@ export function PlatformEntryFlowShellImpl({
     match3dRun,
     platformBootstrap.isLoadingPlatform,
     platformBootstrap.platformTab,
+    isDesktopLayout,
     puzzleRun,
     recommendRuntimeEntries,
     selectRecommendRuntimeEntry,
@@ -13462,6 +13468,7 @@ export function PlatformEntryFlowShellImpl({
               isLoadingPlatform={platformBootstrap.isLoadingPlatform}
               isLoadingDashboard={platformBootstrap.isLoadingDashboard}
               hasUnreadDraftUpdate={hasUnreadDraftUpdates}
+              isDesktopLayout={isDesktopLayout}
               isResumingSaveWorldKey={platformBootstrap.isResumingSaveWorldKey}
               platformError={
                 platformBootstrap.isLoadingPlatform

src/components/platform-entry/platformEntryResponsive.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export const PLATFORM_DESKTOP_LAYOUT_QUERY = '(min-width: 1024px)';
+
+export function getInitialPlatformDesktopLayout() {
+  if (
+    typeof window === 'undefined' ||
+    typeof window.matchMedia !== 'function'
+  ) {
+    return false;
+  }
+
+  return window.matchMedia(PLATFORM_DESKTOP_LAYOUT_QUERY).matches;
+}
+
+export function usePlatformDesktopLayout() {
+  const [isDesktopLayout, setIsDesktopLayout] = useState(
+    getInitialPlatformDesktopLayout,
+  );
+
+  useEffect(() => {
+    if (
+      typeof window === 'undefined' ||
+      typeof window.matchMedia !== 'function'
+    ) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(PLATFORM_DESKTOP_LAYOUT_QUERY);
+    const updateLayout = (event?: MediaQueryListEvent) => {
+      setIsDesktopLayout(event?.matches ?? mediaQuery.matches);
+    };
+
+    updateLayout();
+
+    // 平台页只挂载当前断点外壳，避免隐藏的移动端/桌面端内容重复抢占查询。
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', updateLayout);
+      return () => mediaQuery.removeEventListener('change', updateLayout);
+    }
+
+    mediaQuery.addListener(updateLayout);
+    return () => mediaQuery.removeListener(updateLayout);
+  }, []);
+
+  return isDesktopLayout;
+}