优化前端首屏 tsx 冷加载

src/components/platform-entry/PlatformEntryFlowShellImpl.tsx

@@ -60,7 +60,7 @@ import {
   createMiniGameDraftGenerationState,
   type MiniGameDraftGenerationState,
 } from '../../services/miniGameDraftGenerationProgress';
-import { getPlatformProfileDashboard } from '../../services/platform-entry';
+import { getPlatformProfileDashboard } from '../../services/platform-entry/platformProfileClient';
 import {
   createPuzzleAgentSession,
   executePuzzleAgentAction,
@@ -81,15 +81,12 @@ import { deletePuzzleWork, listPuzzleWorks } from '../../services/puzzle-works';
 import { isSamePuzzlePublicWorkCode } from '../../services/publicWorkCode';
 import { deleteRpgCreationAgentSession } from '../../services/rpg-creation';
 import { rpgCreationPreviewAdapter } from '../../services/rpg-creation/rpgCreationPreviewAdapter';
-import { deleteRpgEntryWorldProfile } from '../../services/rpg-entry';
-import { getRpgEntryWorldGalleryDetailByCode } from '../../services/rpg-entry/rpgEntryLibraryClient';
+import {
+  deleteRpgEntryWorldProfile,
+  getRpgEntryWorldGalleryDetailByCode,
+} from '../../services/rpg-entry/rpgEntryLibraryClient';
 import type { CustomWorldProfile } from '../../types';
 import { useAuthUi } from '../auth/AuthUiContext';
-import { CustomWorldCreationHub } from '../custom-world-home/CustomWorldCreationHub';
-import { PuzzleAgentWorkspace } from '../puzzle-agent/PuzzleAgentWorkspace';
-import { PuzzleGalleryDetailView } from '../puzzle-gallery/PuzzleGalleryDetailView';
-import { PuzzleResultView } from '../puzzle-result/PuzzleResultView';
-import { PuzzleRuntimeShell } from '../puzzle-runtime/PuzzleRuntimeShell';
 import { useRpgCreationAgentOperationPolling } from '../rpg-entry/useRpgCreationAgentOperationPolling';
 import { useRpgCreationEnterWorld } from '../rpg-entry/useRpgCreationEnterWorld';
 import { useRpgCreationResultAutosave } from '../rpg-entry/useRpgCreationResultAutosave';
@@ -332,6 +329,41 @@ const BigFishRuntimeShell = lazy(async () => {
   };
 });
 
+const CustomWorldCreationHub = lazy(async () => {
+  const module = await import('../custom-world-home/CustomWorldCreationHub');
+  return {
+    default: module.CustomWorldCreationHub,
+  };
+});
+
+const PuzzleAgentWorkspace = lazy(async () => {
+  const module = await import('../puzzle-agent/PuzzleAgentWorkspace');
+  return {
+    default: module.PuzzleAgentWorkspace,
+  };
+});
+
+const PuzzleResultView = lazy(async () => {
+  const module = await import('../puzzle-result/PuzzleResultView');
+  return {
+    default: module.PuzzleResultView,
+  };
+});
+
+const PuzzleGalleryDetailView = lazy(async () => {
+  const module = await import('../puzzle-gallery/PuzzleGalleryDetailView');
+  return {
+    default: module.PuzzleGalleryDetailView,
+  };
+});
+
+const PuzzleRuntimeShell = lazy(async () => {
+  const module = await import('../puzzle-runtime/PuzzleRuntimeShell');
+  return {
+    default: module.PuzzleRuntimeShell,
+  };
+});
+
 function LazyPanelFallback({ label }: { label: string }) {
   return (
     <div className="flex h-full min-h-0 items-center justify-center">
@@ -1647,97 +1679,99 @@ export function PlatformEntryFlowShellImpl({
   ]);
 
   const creationHubContent = (
-    <CustomWorldCreationHub
-      items={creationHubItems}
-      loading={
-        platformBootstrap.isLoadingPlatform ||
-        isBigFishLoadingLibrary ||
-        isPuzzleLoadingLibrary
-      }
-      error={
-        platformBootstrap.isLoadingPlatform ||
-        isBigFishLoadingLibrary ||
-        isPuzzleLoadingLibrary
-          ? null
-          : (platformBootstrap.platformError ??
-            sessionController.agentWorkspaceRestoreError ??
-            bigFishError ??
-            puzzleError)
-      }
-      onRetry={() => {
-        platformBootstrap.setPlatformError(null);
-        setBigFishError(null);
-        setPuzzleError(null);
-        void platformBootstrap.refreshCustomWorldWorks().catch((error) => {
-          platformBootstrap.setPlatformError(
-            resolveRpgCreationErrorMessage(error, '读取创作作品列表失败。'),
-          );
-        });
-        void refreshBigFishShelf();
-        void refreshPuzzleShelf();
-      }}
-      createError={
-        sessionController.creationTypeError ?? bigFishError ?? puzzleError
-      }
-      createBusy={
-        sessionController.isCreatingAgentSession ||
-        isBigFishBusy ||
-        isPuzzleBusy
-      }
-      onCreateType={handleCreationHubCreateType}
-      onOpenDraft={(item) => {
-        runProtectedAction(() => {
-          void detailNavigation.handleOpenCreationWork(item);
-        });
-      }}
-      onEnterPublished={(profileId) => {
-        runProtectedAction(() => {
-          const matchedWork = creationHubItems.find(
-            (entry) => entry.profileId === profileId,
-          );
-          if (!matchedWork) {
-            return;
-          }
-          void detailNavigation.handleOpenCreationWork(matchedWork);
-        });
-      }}
-      onDeletePublished={(item) => {
-        handleDeletePublishedWork(item);
-      }}
-      deletingWorkId={deletingCreationWorkId}
-      onExperienceRpg={(item) => {
-        handleExperienceRpgWork(item);
-      }}
-      rpgLibraryEntries={platformBootstrap.savedCustomWorldEntries}
-      bigFishItems={bigFishWorks}
-      onOpenBigFishDetail={(item) => {
-        runProtectedAction(() => {
-          void openBigFishDraft(item);
-        });
-      }}
-      onExperienceBigFish={(item) => {
-        runProtectedAction(() => {
-          void startBigFishRunFromWork(item);
-        });
-      }}
-      onDeleteBigFish={(item) => {
-        handleDeleteBigFishWork(item);
-      }}
-      puzzleItems={puzzleWorks}
-      onOpenPuzzleDetail={(item) => {
-        runProtectedAction(() => {
-          void openPuzzleDraft(item);
-        });
-      }}
-      onExperiencePuzzle={(profileId) => {
-        runProtectedAction(() => {
-          void startPuzzleRunFromProfile(profileId);
-        });
-      }}
-      onDeletePuzzle={(item) => {
-        handleDeletePuzzleWork(item);
-      }}
-    />
+    <Suspense fallback={<LazyPanelFallback label="正在加载创作中心..." />}>
+      <CustomWorldCreationHub
+        items={creationHubItems}
+        loading={
+          platformBootstrap.isLoadingPlatform ||
+          isBigFishLoadingLibrary ||
+          isPuzzleLoadingLibrary
+        }
+        error={
+          platformBootstrap.isLoadingPlatform ||
+          isBigFishLoadingLibrary ||
+          isPuzzleLoadingLibrary
+            ? null
+            : (platformBootstrap.platformError ??
+              sessionController.agentWorkspaceRestoreError ??
+              bigFishError ??
+              puzzleError)
+        }
+        onRetry={() => {
+          platformBootstrap.setPlatformError(null);
+          setBigFishError(null);
+          setPuzzleError(null);
+          void platformBootstrap.refreshCustomWorldWorks().catch((error) => {
+            platformBootstrap.setPlatformError(
+              resolveRpgCreationErrorMessage(error, '读取创作作品列表失败。'),
+            );
+          });
+          void refreshBigFishShelf();
+          void refreshPuzzleShelf();
+        }}
+        createError={
+          sessionController.creationTypeError ?? bigFishError ?? puzzleError
+        }
+        createBusy={
+          sessionController.isCreatingAgentSession ||
+          isBigFishBusy ||
+          isPuzzleBusy
+        }
+        onCreateType={handleCreationHubCreateType}
+        onOpenDraft={(item) => {
+          runProtectedAction(() => {
+            void detailNavigation.handleOpenCreationWork(item);
+          });
+        }}
+        onEnterPublished={(profileId) => {
+          runProtectedAction(() => {
+            const matchedWork = creationHubItems.find(
+              (entry) => entry.profileId === profileId,
+            );
+            if (!matchedWork) {
+              return;
+            }
+            void detailNavigation.handleOpenCreationWork(matchedWork);
+          });
+        }}
+        onDeletePublished={(item) => {
+          handleDeletePublishedWork(item);
+        }}
+        deletingWorkId={deletingCreationWorkId}
+        onExperienceRpg={(item) => {
+          handleExperienceRpgWork(item);
+        }}
+        rpgLibraryEntries={platformBootstrap.savedCustomWorldEntries}
+        bigFishItems={bigFishWorks}
+        onOpenBigFishDetail={(item) => {
+          runProtectedAction(() => {
+            void openBigFishDraft(item);
+          });
+        }}
+        onExperienceBigFish={(item) => {
+          runProtectedAction(() => {
+            void startBigFishRunFromWork(item);
+          });
+        }}
+        onDeleteBigFish={(item) => {
+          handleDeleteBigFishWork(item);
+        }}
+        puzzleItems={puzzleWorks}
+        onOpenPuzzleDetail={(item) => {
+          runProtectedAction(() => {
+            void openPuzzleDraft(item);
+          });
+        }}
+        onExperiencePuzzle={(profileId) => {
+          runProtectedAction(() => {
+            void startPuzzleRunFromProfile(profileId);
+          });
+        }}
+        onDeletePuzzle={(item) => {
+          handleDeletePuzzleWork(item);
+        }}
+      />
+    </Suspense>
   );
 
   return (
@@ -2074,21 +2108,23 @@ export function PlatformEntryFlowShellImpl({
             exit={{ opacity: 0, y: -12 }}
             className="flex h-full min-h-0 flex-col"
           >
-            <PuzzleAgentWorkspace
-              session={puzzleSession}
-              activeOperation={puzzleOperation}
-              streamingReplyText={streamingPuzzleReplyText}
-              isStreamingReply={isStreamingPuzzleReply}
-              isBusy={isPuzzleBusy || isStreamingPuzzleReply}
-              error={puzzleError}
-              onBack={leavePuzzleFlow}
-              onSubmitMessage={(payload) => {
-                void submitPuzzleMessage(payload);
-              }}
-              onExecuteAction={(payload) => {
-                void executePuzzleAction(payload);
-              }}
-            />
+            <Suspense fallback={<LazyPanelFallback label="正在加载拼图创作..." />}>
+              <PuzzleAgentWorkspace
+                session={puzzleSession}
+                activeOperation={puzzleOperation}
+                streamingReplyText={streamingPuzzleReplyText}
+                isStreamingReply={isStreamingPuzzleReply}
+                isBusy={isPuzzleBusy || isStreamingPuzzleReply}
+                error={puzzleError}
+                onBack={leavePuzzleFlow}
+                onSubmitMessage={(payload) => {
+                  void submitPuzzleMessage(payload);
+                }}
+                onExecuteAction={(payload) => {
+                  void executePuzzleAction(payload);
+                }}
+              />
+            </Suspense>
           </motion.div>
         )}
 
@@ -2145,18 +2181,20 @@ export function PlatformEntryFlowShellImpl({
             exit={{ opacity: 0, y: -12 }}
             className="flex h-full min-h-0 flex-col"
           >
-            <PuzzleResultView
-              session={puzzleSession}
-              author={authUi?.user ?? null}
-              isBusy={isPuzzleBusy}
-              error={puzzleError}
-              onBack={() => {
-                setSelectionStage('puzzle-agent-workspace');
-              }}
-              onExecuteAction={(payload) => {
-                void executePuzzleAction(payload);
-              }}
-            />
+            <Suspense fallback={<LazyPanelFallback label="正在加载拼图结果..." />}>
+              <PuzzleResultView
+                session={puzzleSession}
+                author={authUi?.user ?? null}
+                isBusy={isPuzzleBusy}
+                error={puzzleError}
+                onBack={() => {
+                  setSelectionStage('puzzle-agent-workspace');
+                }}
+                onExecuteAction={(payload) => {
+                  void executePuzzleAction(payload);
+                }}
+              />
+            </Suspense>
           </motion.div>
         )}
 
@@ -2168,31 +2206,33 @@ export function PlatformEntryFlowShellImpl({
             exit={{ opacity: 0, y: -12 }}
             className="flex h-full min-h-0 flex-col"
           >
-            <PuzzleGalleryDetailView
-              item={selectedPuzzleDetail}
-              isBusy={isPuzzleBusy}
-              error={puzzleError}
-              onBack={() => {
-                platformBootstrap.setPlatformTab(
-                  puzzleDetailReturnTarget?.tab ?? 'home',
-                );
-                setPuzzleDetailReturnTarget(null);
-                setSelectionStage('platform');
-              }}
-              onEdit={
-                selectedPuzzleDetail.ownerUserId === authUi?.user?.id &&
-                Boolean(selectedPuzzleDetail.sourceSessionId?.trim())
-                  ? () => {
-                      runProtectedAction(() => {
-                        void openPuzzleDraft(selectedPuzzleDetail);
-                      });
-                    }
-                  : null
-              }
-              onStartGame={() => {
-                void startPuzzleRunFromProfile(selectedPuzzleDetail.profileId);
-              }}
-            />
+            <Suspense fallback={<LazyPanelFallback label="正在加载拼图详情..." />}>
+              <PuzzleGalleryDetailView
+                item={selectedPuzzleDetail}
+                isBusy={isPuzzleBusy}
+                error={puzzleError}
+                onBack={() => {
+                  platformBootstrap.setPlatformTab(
+                    puzzleDetailReturnTarget?.tab ?? 'home',
+                  );
+                  setPuzzleDetailReturnTarget(null);
+                  setSelectionStage('platform');
+                }}
+                onEdit={
+                  selectedPuzzleDetail.ownerUserId === authUi?.user?.id &&
+                  Boolean(selectedPuzzleDetail.sourceSessionId?.trim())
+                    ? () => {
+                        runProtectedAction(() => {
+                          void openPuzzleDraft(selectedPuzzleDetail);
+                        });
+                      }
+                    : null
+                }
+                onStartGame={() => {
+                  void startPuzzleRunFromProfile(selectedPuzzleDetail.profileId);
+                }}
+              />
+            </Suspense>
           </motion.div>
         )}
 
@@ -2204,23 +2244,25 @@ export function PlatformEntryFlowShellImpl({
             exit={{ opacity: 0 }}
             className="fixed inset-0 z-[100]"
           >
-            <PuzzleRuntimeShell
-              run={puzzleRun}
-              isBusy={isPuzzleBusy || isPuzzleNextLevelGenerating}
-              error={puzzleError}
-              onBack={() => {
-                setSelectionStage('puzzle-gallery-detail');
-              }}
-              onSwapPieces={(payload) => {
-                void swapPuzzlePiecesInRun(payload);
-              }}
-              onDragPiece={(payload) => {
-                void dragPuzzlePiece(payload);
-              }}
-              onAdvanceNextLevel={() => {
-                void advancePuzzleLevel();
-              }}
-            />
+            <Suspense fallback={<LazyPanelFallback label="正在加载拼图玩法..." />}>
+              <PuzzleRuntimeShell
+                run={puzzleRun}
+                isBusy={isPuzzleBusy || isPuzzleNextLevelGenerating}
+                error={puzzleError}
+                onBack={() => {
+                  setSelectionStage('puzzle-gallery-detail');
+                }}
+                onSwapPieces={(payload) => {
+                  void swapPuzzlePiecesInRun(payload);
+                }}
+                onDragPiece={(payload) => {
+                  void dragPuzzlePiece(payload);
+                }}
+                onAdvanceNextLevel={() => {
+                  void advancePuzzleLevel();
+                }}
+              />
+            </Suspense>
             {isPuzzleNextLevelGenerating ? (
               <div className="fixed inset-0 z-[120] flex items-center justify-center bg-slate-950/62 px-5 backdrop-blur-sm">
                 <div className="flex max-w-[18rem] flex-col items-center gap-3 rounded-[1.5rem] border border-white/12 bg-slate-950/92 px-6 py-5 text-center text-white shadow-[0_28px_80px_rgba(0,0,0,0.35)]">