Merge branch 'master' of http://82.157.175.59:3000/GenarrativeAI/Genarrative

src/components/game-shell/GameShellMainContent.tsx

@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from 'motion/react';
+import { lazy, Suspense } from 'react';
 
 import type { BottomTab } from '../../hooks/useGameFlow';
 import type {
@@ -8,6 +9,7 @@ import type {
   InventoryFlowUi,
   QuestFlowUi,
 } from '../../hooks/useStoryGeneration';
+import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
 import type {
   CompanionRenderState,
   CustomWorldProfile,
@@ -17,11 +19,38 @@ import type {
 } from '../../types';
 import { UI_CHROME } from '../../uiAssets';
 import type { GameCanvasEntitySelection } from '../GameCanvas';
-import { CharacterSelectionFlow } from './CharacterSelectionFlow';
-import { GameShellStoryPanels } from './GameShellStoryPanels';
-import { PreGameSelectionFlow, type SelectionStage } from './PreGameSelectionFlow';
+import type { SelectionStage } from './PreGameSelectionFlow';
 import type { GameShellAdventureStatistics } from './types';
 
+const CharacterSelectionFlow = lazy(async () => {
+  const module = await import('./CharacterSelectionFlow');
+  return {
+    default: module.CharacterSelectionFlow,
+  };
+});
+const PreGameSelectionFlow = lazy(async () => {
+  const module = await import('./PreGameSelectionFlow');
+  return {
+    default: module.PreGameSelectionFlow,
+  };
+});
+const GameShellStoryPanels = lazy(async () => {
+  const module = await import('./GameShellStoryPanels');
+  return {
+    default: module.GameShellStoryPanels,
+  };
+});
+
+function MainContentLoadingFallback({ label }: { label: string }) {
+  return (
+    <div className="flex h-full min-h-0 items-center justify-center">
+      <div className="rounded-2xl border border-white/10 bg-black/30 px-5 py-4 text-sm text-zinc-300">
+        {label}
+      </div>
+    </div>
+  );
+}
+
 export function GameShellMainContent({
   gameState,
   visibleGameState,
@@ -34,6 +63,7 @@ export function GameShellMainContent({
   setSelectionStage,
   isCharacterSelectionStage,
   hasSavedGame,
+  savedSnapshot,
   handleContinueGame,
   handleStartNewGame,
   handleCustomWorldSelect,
@@ -71,6 +101,7 @@ export function GameShellMainContent({
   setSelectionStage: (stage: SelectionStage) => void;
   isCharacterSelectionStage: boolean;
   hasSavedGame: boolean;
+  savedSnapshot: HydratedSavedGameSnapshot | null;
   handleContinueGame: () => void;
   handleStartNewGame: () => void;
   handleCustomWorldSelect: (customWorldProfile: CustomWorldProfile) => void;
@@ -110,15 +141,20 @@ export function GameShellMainContent({
     >
       <AnimatePresence mode="wait">
         {!gameState.worldType && (
-          <PreGameSelectionFlow
-            selectionStage={selectionStage}
-            setSelectionStage={setSelectionStage}
-            gameState={gameState}
-            hasSavedGame={hasSavedGame}
-            handleContinueGame={handleContinueGame}
-            handleStartNewGame={handleStartNewGame}
-            handleCustomWorldSelect={handleCustomWorldSelect}
-          />
+          <Suspense
+            fallback={<MainContentLoadingFallback label="正在加载平台首页..." />}
+          >
+            <PreGameSelectionFlow
+              selectionStage={selectionStage}
+              setSelectionStage={setSelectionStage}
+              gameState={gameState}
+              hasSavedGame={hasSavedGame}
+              savedSnapshot={savedSnapshot}
+              handleContinueGame={handleContinueGame}
+              handleStartNewGame={handleStartNewGame}
+              handleCustomWorldSelect={handleCustomWorldSelect}
+            />
+          </Suspense>
         )}
 
         {gameState.worldType && !gameState.playerCharacter && (
@@ -129,50 +165,58 @@ export function GameShellMainContent({
             exit={{ opacity: 0, y: -12 }}
             className="flex h-full min-h-0 flex-col"
           >
-            <CharacterSelectionFlow
-              worldType={gameState.worldType}
-              customWorldProfile={gameState.customWorldProfile}
-              onBack={() => {
-                handleBackToWorldSelect();
-                setSelectionStage('world');
-              }}
-              onConfirm={handleCharacterSelect}
-            />
+            <Suspense
+              fallback={<MainContentLoadingFallback label="正在加载角色选择..." />}
+            >
+              <CharacterSelectionFlow
+                worldType={gameState.worldType}
+                customWorldProfile={gameState.customWorldProfile}
+                onBack={() => {
+                  handleBackToWorldSelect();
+                  setSelectionStage('platform');
+                }}
+                onConfirm={handleCharacterSelect}
+              />
+            </Suspense>
           </motion.div>
         )}
 
         {visibleGameState.playerCharacter && visibleCurrentStory && (
           <motion.div key="story-flow" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex h-full min-h-0 flex-col">
-            <GameShellStoryPanels
-              visibleGameState={visibleGameState}
-              visibleCurrentStory={visibleCurrentStory}
-              isLoading={isLoading}
-              aiError={aiError}
-              bottomTab={bottomTab}
-              setBottomTab={setBottomTab}
-              displayedOptions={displayedOptions}
-              hideStoryOptions={hideStoryOptions}
-              canRefreshOptions={canRefreshOptions}
-              handleRefreshOptions={handleRefreshOptions}
-              handleSceneTransitionChoice={handleSceneTransitionChoice}
-              characterChatUi={characterChatUi}
-              inventoryUi={inventoryUi}
-              battleRewardUi={battleRewardUi}
-              questUi={questUi}
-              goalUi={goalUi}
-              companionRenderStates={companionRenderStates}
-              characterChatSummaries={characterChatSummaries}
-              openOverlayPanel={openOverlayPanel}
-              openCampModal={openCampModal}
-              openPartyMemberDetails={openPartyMemberDetails}
-              adventureStatistics={adventureStatistics}
-              musicVolume={musicVolume}
-              onMusicVolumeChange={onMusicVolumeChange}
-              onSaveAndExit={() => {
-                resetForSaveAndExit();
-                handleSaveAndExit();
-              }}
-            />
+            <Suspense
+              fallback={<MainContentLoadingFallback label="正在加载冒险面板..." />}
+            >
+              <GameShellStoryPanels
+                visibleGameState={visibleGameState}
+                visibleCurrentStory={visibleCurrentStory}
+                isLoading={isLoading}
+                aiError={aiError}
+                bottomTab={bottomTab}
+                setBottomTab={setBottomTab}
+                displayedOptions={displayedOptions}
+                hideStoryOptions={hideStoryOptions}
+                canRefreshOptions={canRefreshOptions}
+                handleRefreshOptions={handleRefreshOptions}
+                handleSceneTransitionChoice={handleSceneTransitionChoice}
+                characterChatUi={characterChatUi}
+                inventoryUi={inventoryUi}
+                battleRewardUi={battleRewardUi}
+                questUi={questUi}
+                goalUi={goalUi}
+                companionRenderStates={companionRenderStates}
+                characterChatSummaries={characterChatSummaries}
+                openOverlayPanel={openOverlayPanel}
+                openCampModal={openCampModal}
+                openPartyMemberDetails={openPartyMemberDetails}
+                adventureStatistics={adventureStatistics}
+                musicVolume={musicVolume}
+                onMusicVolumeChange={onMusicVolumeChange}
+                onSaveAndExit={() => {
+                  resetForSaveAndExit();
+                  handleSaveAndExit();
+                }}
+              />
+            </Suspense>
           </motion.div>
         )}
       </AnimatePresence>

src/components/game-shell/GameShellRuntime.tsx

@@ -1,11 +1,26 @@
+import { lazy, Suspense, useEffect } from 'react';
+
 import { UI_CHROME } from '../../uiAssets';
-import { GameShellCanvasStage } from './GameShellCanvasStage';
+import { useAuthUi } from '../auth/AuthUiContext';
 import { GameShellMainContent } from './GameShellMainContent';
-import { GameShellOverlays } from './GameShellOverlays';
 import type { GameShellProps } from './types';
 import { useGameShellRuntimeViewModel } from './useGameShellRuntimeViewModel';
 
+const GameShellOverlays = lazy(async () => {
+  const module = await import('./GameShellOverlays');
+  return {
+    default: module.GameShellOverlays,
+  };
+});
+const GameShellCanvasStage = lazy(async () => {
+  const module = await import('./GameShellCanvasStage');
+  return {
+    default: module.GameShellCanvasStage,
+  };
+});
+
 export function GameShellRuntime({session, story, entry, companions, audio}: GameShellProps) {
+  const authUi = useAuthUi();
   const {
     gameState,
     isLoading,
@@ -29,6 +44,7 @@ export function GameShellRuntime({session, story, entry, companions, audio}: Gam
   } = story;
   const {
     hasSavedGame,
+    savedSnapshot,
     handleContinueGame,
     handleStartNewGame,
     handleSaveAndExit,
@@ -80,6 +96,14 @@ export function GameShellRuntime({session, story, entry, companions, audio}: Gam
     companions,
   });
 
+  useEffect(() => {
+    authUi?.setGlobalAccountActionsVisible(Boolean(gameState.playerCharacter));
+
+    return () => {
+      authUi?.setGlobalAccountActionsVisible(true);
+    };
+  }, [authUi, gameState.playerCharacter]);
+
   return (
     <div
       className="fusion-pixel-app pixel-root-shell flex h-screen max-h-screen flex-col overflow-hidden font-sans text-zinc-100"
@@ -89,18 +113,20 @@ export function GameShellRuntime({session, story, entry, companions, audio}: Gam
         backgroundRepeat: 'repeat',
       }}
     >
-      <GameShellCanvasStage
-        gameState={gameState}
-        visibleGameState={visibleGameState}
-        hideSelectionHero={hideSelectionHero}
-        canvasCompanionRenderStates={canvasCompanionRenderStates}
-        dialogueIndicator={dialogueIndicator}
-        sceneTransitionPhase={sceneTransitionPhase}
-        sceneTransitionToken={sceneTransitionToken}
-        setSelectedSceneEntity={setSelectedSceneEntity}
-        setIsMapOpen={setIsMapOpen}
-        setSceneTransitionDurations={setSceneTransitionDurations}
-      />
+      <Suspense fallback={null}>
+        <GameShellCanvasStage
+          gameState={gameState}
+          visibleGameState={visibleGameState}
+          hideSelectionHero={hideSelectionHero}
+          canvasCompanionRenderStates={canvasCompanionRenderStates}
+          dialogueIndicator={dialogueIndicator}
+          sceneTransitionPhase={sceneTransitionPhase}
+          sceneTransitionToken={sceneTransitionToken}
+          setSelectedSceneEntity={setSelectedSceneEntity}
+          setIsMapOpen={setIsMapOpen}
+          setSceneTransitionDurations={setSceneTransitionDurations}
+        />
+      </Suspense>
 
       <GameShellMainContent
         gameState={gameState}
@@ -114,6 +140,7 @@ export function GameShellRuntime({session, story, entry, companions, audio}: Gam
         setSelectionStage={setSelectionStage}
         isCharacterSelectionStage={isCharacterSelectionStage}
         hasSavedGame={hasSavedGame}
+        savedSnapshot={savedSnapshot}
         handleContinueGame={handleContinueGame}
         handleStartNewGame={handleStartNewGame}
         handleCustomWorldSelect={handleCustomWorldSelect}
@@ -141,34 +168,35 @@ export function GameShellRuntime({session, story, entry, companions, audio}: Gam
         handleSaveAndExit={handleSaveAndExit}
       />
 
-      <GameShellOverlays
-        gameState={gameState}
-        isLoading={isLoading}
-        isMapOpen={isMapOpen}
-        setIsMapOpen={setIsMapOpen}
-        npcUi={npcUi}
-        characterChatUi={characterChatUi}
-        inventoryUi={inventoryUi}
-        companionRenderStates={companionRenderStates}
-        characterChatSummaries={characterChatSummaries}
-        overlayPanel={overlayPanel}
-        closeOverlayPanel={closeOverlayPanel}
-        openCampModal={openCampModal}
-        openPartyMemberDetails={openPartyMemberDetails}
-        shouldMountAdventureEntityModal={shouldMountAdventureEntityModal}
-        selectedSceneEntity={selectedSceneEntity}
-        closeAdventureEntityModal={closeAdventureEntityModal}
-        shouldMountCampModal={shouldMountCampModal}
-        showTeamModal={showTeamModal}
-        closeCampModal={closeCampModal}
-        onBenchCompanion={onBenchCompanion}
-        onActivateRosterCompanion={onActivateRosterCompanion}
-        shouldMountMapModal={shouldMountMapModal}
-        handleMapTravelToScene={handleMapTravelToScene}
-        shouldMountCharacterChatModal={shouldMountCharacterChatModal}
-        shouldMountNpcModals={shouldMountNpcModals}
-      />
+      <Suspense fallback={null}>
+        <GameShellOverlays
+          gameState={gameState}
+          isLoading={isLoading}
+          isMapOpen={isMapOpen}
+          setIsMapOpen={setIsMapOpen}
+          npcUi={npcUi}
+          characterChatUi={characterChatUi}
+          inventoryUi={inventoryUi}
+          companionRenderStates={companionRenderStates}
+          characterChatSummaries={characterChatSummaries}
+          overlayPanel={overlayPanel}
+          closeOverlayPanel={closeOverlayPanel}
+          openCampModal={openCampModal}
+          openPartyMemberDetails={openPartyMemberDetails}
+          shouldMountAdventureEntityModal={shouldMountAdventureEntityModal}
+          selectedSceneEntity={selectedSceneEntity}
+          closeAdventureEntityModal={closeAdventureEntityModal}
+          shouldMountCampModal={shouldMountCampModal}
+          showTeamModal={showTeamModal}
+          closeCampModal={closeCampModal}
+          onBenchCompanion={onBenchCompanion}
+          onActivateRosterCompanion={onActivateRosterCompanion}
+          shouldMountMapModal={shouldMountMapModal}
+          handleMapTravelToScene={handleMapTravelToScene}
+          shouldMountCharacterChatModal={shouldMountCharacterChatModal}
+          shouldMountNpcModals={shouldMountNpcModals}
+        />
+      </Suspense>
     </div>
   );
 }
-

src/components/game-shell/PlatformHomeView.tsx

@@ -0,0 +1,356 @@
+import type {
+  CustomWorldGalleryCard,
+  CustomWorldLibraryEntry,
+} from '../../../packages/shared/src/contracts/runtime';
+import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
+import type { CustomWorldProfile } from '../../types';
+import {
+  CHROME_ICONS,
+  getNineSliceStyle,
+  UI_CHROME,
+} from '../../uiAssets';
+import { useAuthUi } from '../auth/AuthUiContext';
+import { PixelIcon } from '../PixelIcon';
+import {
+  buildPlatformWorldTags,
+  describePlatformThemeLabel,
+  formatPlatformWorldTime,
+  type PlatformWorldCardLike,
+  resolvePlatformWorldCoverImage,
+  resolvePlatformWorldLeadPortrait,
+} from './platformWorldPresentation';
+
+function SectionHeader({
+  title,
+  detail,
+  actionLabel,
+  onAction,
+}: {
+  title: string;
+  detail: string;
+  actionLabel?: string;
+  onAction?: (() => void) | null;
+}) {
+  return (
+    <div className="mb-3 flex items-end justify-between gap-3">
+      <div>
+        <div className="text-[10px] tracking-[0.24em] text-zinc-500">
+          {detail}
+        </div>
+        <div className="mt-1 text-base font-bold text-white">{title}</div>
+      </div>
+      {actionLabel && onAction ? (
+        <button
+          type="button"
+          onClick={onAction}
+          className="rounded-full border border-white/10 bg-black/25 px-3 py-1.5 text-[11px] text-zinc-200 transition hover:border-white/20 hover:text-white"
+        >
+          {actionLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function EmptyShelf({
+  text,
+}: {
+  text: string;
+}) {
+  return (
+    <div
+      className="pixel-nine-slice pixel-panel rounded-[1.35rem] text-sm leading-6 text-zinc-300"
+      style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 16, paddingY: 14 })}
+    >
+      {text}
+    </div>
+  );
+}
+
+function WorldCard({
+  entry,
+  badge,
+  metaLabel,
+  onClick,
+}: {
+  entry: PlatformWorldCardLike;
+  badge: string;
+  metaLabel: string;
+  onClick: () => void;
+}) {
+  const coverImage = resolvePlatformWorldCoverImage(entry);
+  const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
+  const tags = buildPlatformWorldTags(entry);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="pixel-nine-slice pixel-pressable relative flex h-[15rem] w-[15.25rem] shrink-0 flex-col overflow-hidden text-left"
+      style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 14, paddingY: 14 })}
+    >
+      {coverImage ? (
+        <img
+          src={coverImage}
+          alt={entry.worldName}
+          className="absolute inset-0 h-full w-full object-cover opacity-40"
+          style={{ imageRendering: 'pixelated' }}
+        />
+      ) : null}
+      {leadPortrait ? (
+        <img
+          src={leadPortrait}
+          alt=""
+          aria-hidden="true"
+          className="absolute bottom-2 right-2 h-24 w-24 object-contain opacity-25"
+          style={{ imageRendering: 'pixelated' }}
+        />
+      ) : null}
+      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,14,0.12),rgba(8,10,14,0.9))]" />
+      <div className="relative z-10 flex h-full flex-col">
+        <div className="flex items-start justify-between gap-3">
+          <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[10px] tracking-[0.18em] text-amber-100">
+            {badge}
+          </span>
+          <span className="rounded-full border border-white/10 bg-black/35 px-2.5 py-1 text-[10px] text-zinc-100">
+            {metaLabel}
+          </span>
+        </div>
+        <div className="mt-auto">
+          <div className="line-clamp-1 text-xl font-black text-white">
+            {entry.worldName}
+          </div>
+          {entry.subtitle ? (
+            <div className="mt-1 line-clamp-1 text-[11px] tracking-[0.16em] text-zinc-300/85">
+              {entry.subtitle}
+            </div>
+          ) : null}
+          <div className="mt-2 line-clamp-2 text-xs leading-5 text-zinc-200/90">
+            {entry.summaryText || '等待补充世界摘要。'}
+          </div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            {tags.length > 0 ? (
+              tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-100"
+                >
+                  {tag}
+                </span>
+              ))
+            ) : (
+              <span className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-100">
+                {describePlatformThemeLabel(entry.themeMode)}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+export function PlatformHomeView({
+  hasSavedGame,
+  savedSnapshot,
+  featuredEntries,
+  latestEntries,
+  myEntries,
+  isLoadingPlatform,
+  platformError,
+  onContinueGame,
+  onRefresh,
+  onOpenCreateWorld,
+  onOpenGalleryDetail,
+  onOpenLibraryDetail,
+}: {
+  hasSavedGame: boolean;
+  savedSnapshot: HydratedSavedGameSnapshot | null;
+  featuredEntries: CustomWorldGalleryCard[];
+  latestEntries: CustomWorldGalleryCard[];
+  myEntries: CustomWorldLibraryEntry<CustomWorldProfile>[];
+  isLoadingPlatform: boolean;
+  platformError: string | null;
+  onContinueGame: () => void;
+  onRefresh: () => void;
+  onOpenCreateWorld: () => void;
+  onOpenGalleryDetail: (entry: CustomWorldGalleryCard) => void;
+  onOpenLibraryDetail: (entry: CustomWorldLibraryEntry<CustomWorldProfile>) => void;
+}) {
+  const authUi = useAuthUi();
+  const snapshotWorldName =
+    savedSnapshot?.gameState.customWorldProfile?.name ??
+    savedSnapshot?.gameState.currentScenePreset?.name ??
+    '继续冒险';
+  const snapshotCharacterName =
+    savedSnapshot?.gameState.playerCharacter?.title ??
+    savedSnapshot?.gameState.playerCharacter?.name ??
+    '旅人';
+  const featuredShelf = featuredEntries.slice(0, 6);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full border border-amber-300/20 bg-amber-500/10">
+            <PixelIcon src={CHROME_ICONS.refreshOptions} className="h-5 w-5" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-[10px] tracking-[0.24em] text-zinc-500">
+              GENARRATIVE PLATFORM
+            </div>
+            <div className="truncate text-lg font-black text-white">
+              自定义世界广场
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="rounded-full border border-white/10 bg-black/25 px-3 py-2 text-[11px] text-zinc-200 transition hover:border-white/20 hover:text-white"
+          >
+            刷新
+          </button>
+          {authUi?.user ? (
+            <button
+              type="button"
+              onClick={() => authUi.openAccountModal()}
+              className="rounded-full border border-white/10 bg-black/25 px-3 py-2 text-[11px] text-zinc-100 transition hover:border-white/20 hover:text-white"
+            >
+              {authUi.user.displayName}
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto pr-1 scrollbar-hide">
+        <div className="space-y-4 pb-2">
+          <button
+            type="button"
+            onClick={hasSavedGame ? onContinueGame : onOpenCreateWorld}
+            className="pixel-nine-slice pixel-pressable relative block w-full overflow-hidden text-left"
+            style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 18, paddingY: 16 })}
+          >
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(250,204,21,0.16),transparent_36%),linear-gradient(135deg,rgba(15,23,42,0.78),rgba(8,10,14,0.95))]" />
+            <div className="relative z-10 flex min-h-[10rem] flex-col justify-between">
+              <div className="flex items-start justify-between gap-4">
+                <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[10px] tracking-[0.2em] text-amber-100">
+                  {hasSavedGame ? 'CONTINUE' : 'CREATE'}
+                </span>
+                <div className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[11px] text-zinc-100">
+                  {hasSavedGame ? '继续冒险' : '创建世界'}
+                </div>
+              </div>
+              <div>
+                <div className="text-3xl font-black text-white">
+                  {hasSavedGame ? snapshotWorldName : '把第一页变成你的作品页'}
+                </div>
+                <div className="mt-2 max-w-[28rem] text-sm leading-6 text-zinc-200/88">
+                  {hasSavedGame
+                    ? `${snapshotCharacterName} 的上一次冒险已保存在云端，点这里直接回到故事现场。`
+                    : '从设定、角色到场景网络，一次生成一部可游玩的自定义 RPG，再决定是否发布到广场。'}
+                </div>
+              </div>
+            </div>
+          </button>
+
+          {platformError ? (
+            <div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
+              {platformError}
+            </div>
+          ) : null}
+
+          <section>
+            <SectionHeader
+              title="精选推荐"
+              detail="为你挑选"
+              actionLabel="看看最新"
+              onAction={onRefresh}
+            />
+            {isLoadingPlatform ? (
+              <EmptyShelf text="正在读取精选作品..." />
+            ) : featuredShelf.length > 0 ? (
+              <div className="flex gap-3 overflow-x-auto pb-1 scrollbar-hide">
+                {featuredShelf.map((entry) => (
+                  <WorldCard
+                    key={`${entry.ownerUserId}:${entry.profileId}:featured`}
+                    entry={entry}
+                    badge="推荐"
+                    metaLabel={describePlatformThemeLabel(entry.themeMode)}
+                    onClick={() => onOpenGalleryDetail(entry)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <EmptyShelf text="还没有公开作品，先创建你的第一个世界吧。" />
+            )}
+          </section>
+
+          <section>
+            <SectionHeader title="最新发布" detail="玩家广场" />
+            {isLoadingPlatform ? (
+              <EmptyShelf text="正在读取最新发布..." />
+            ) : latestEntries.length > 0 ? (
+              <div className="flex gap-3 overflow-x-auto pb-1 scrollbar-hide">
+                {latestEntries.map((entry) => (
+                  <WorldCard
+                    key={`${entry.ownerUserId}:${entry.profileId}:latest`}
+                    entry={entry}
+                    badge={formatPlatformWorldTime(entry.publishedAt)}
+                    metaLabel={entry.authorDisplayName}
+                    onClick={() => onOpenGalleryDetail(entry)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <EmptyShelf text="公开广场暂时还没有新作品。" />
+            )}
+          </section>
+
+          <section>
+            <SectionHeader title="我的作品" detail="草稿与已发布" />
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+              <button
+                type="button"
+                onClick={onOpenCreateWorld}
+                className="pixel-nine-slice pixel-pressable relative min-h-[13rem] overflow-hidden text-left"
+                style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 18, paddingY: 16 })}
+              >
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_36%),linear-gradient(180deg,rgba(8,10,14,0.2),rgba(8,10,14,0.92))]" />
+                <div className="relative z-10 flex h-full flex-col">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-sky-300/20 bg-sky-500/10">
+                    <PixelIcon src={CHROME_ICONS.refreshOptions} className="h-5 w-5" />
+                  </div>
+                  <div className="mt-auto">
+                    <div className="text-2xl font-black text-white">
+                      创建新世界
+                    </div>
+                    <div className="mt-2 text-sm leading-6 text-zinc-300">
+                      新建一个只属于你的世界设定，生成后先进入草稿库，再决定要不要发布。
+                    </div>
+                  </div>
+                </div>
+              </button>
+
+              {myEntries.map((entry) => (
+                <WorldCard
+                  key={`${entry.ownerUserId}:${entry.profileId}:mine`}
+                  entry={entry}
+                  badge={entry.visibility === 'published' ? '已发布' : '草稿'}
+                  metaLabel={entry.visibility === 'published' ? formatPlatformWorldTime(entry.publishedAt) : '仅自己可见'}
+                  onClick={() => onOpenLibraryDetail(entry)}
+                />
+              ))}
+            </div>
+            {!isLoadingPlatform && myEntries.length === 0 ? (
+              <div className="mt-3">
+                <EmptyShelf text="你还没有保存任何自定义世界，先创建一个草稿开始吧。" />
+              </div>
+            ) : null}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/game-shell/PlatformWorldDetailView.tsx

@@ -0,0 +1,278 @@
+import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
+import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
+import type { CustomWorldProfile } from '../../types';
+import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
+import {
+  buildPlatformWorldTags,
+  describePlatformThemeLabel,
+  formatPlatformWorldTime,
+  resolvePlatformWorldCoverImage,
+  resolvePlatformWorldLeadPortrait,
+} from './platformWorldPresentation';
+
+function ActionButton({
+  label,
+  onClick,
+  tone = 'default',
+  disabled = false,
+}: {
+  label: string;
+  onClick: () => void;
+  tone?: 'default' | 'primary' | 'danger';
+  disabled?: boolean;
+}) {
+  const toneClass =
+    tone === 'primary'
+      ? 'border-sky-300/25 bg-sky-500/10 text-sky-100 hover:border-sky-300/45 hover:text-white'
+      : tone === 'danger'
+        ? 'border-rose-400/25 bg-rose-500/10 text-rose-100 hover:border-rose-400/45 hover:text-white'
+        : 'border-white/10 bg-black/20 text-zinc-200 hover:border-white/20 hover:text-white';
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={`rounded-full border px-4 py-2 text-sm transition ${toneClass} ${disabled ? 'cursor-not-allowed opacity-55' : ''}`}
+    >
+      {label}
+    </button>
+  );
+}
+
+export function PlatformWorldDetailView({
+  entry,
+  isMutating,
+  error,
+  onBack,
+  onStartGame,
+  onContinueEdit,
+  onPublish,
+  onUnpublish,
+}: {
+  entry: CustomWorldLibraryEntry<CustomWorldProfile>;
+  isMutating: boolean;
+  error: string | null;
+  onBack: () => void;
+  onStartGame: () => void;
+  onContinueEdit?: (() => void) | null;
+  onPublish?: (() => void) | null;
+  onUnpublish?: (() => void) | null;
+}) {
+  const coverImage = resolvePlatformWorldCoverImage(entry);
+  const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
+  const previewCharacters = buildCustomWorldPlayableCharacters(entry.profile).slice(
+    0,
+    3,
+  );
+  const previewLandmarks = entry.profile.landmarks.slice(0, 3);
+  const tags = buildPlatformWorldTags(entry);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={onBack}
+          className="rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] text-zinc-300 transition hover:border-white/20 hover:text-white"
+        >
+          返回广场
+        </button>
+        <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] text-zinc-300">
+          {entry.visibility === 'published' ? '已发布' : '草稿'}
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto pr-1 scrollbar-hide">
+        <div className="space-y-4 pb-2">
+          <div
+            className="pixel-nine-slice relative overflow-hidden"
+            style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 18, paddingY: 16 })}
+          >
+            {coverImage ? (
+              <img
+                src={coverImage}
+                alt={entry.worldName}
+                className="absolute inset-0 h-full w-full object-cover opacity-38"
+                style={{ imageRendering: 'pixelated' }}
+              />
+            ) : null}
+            {leadPortrait ? (
+              <img
+                src={leadPortrait}
+                alt=""
+                aria-hidden="true"
+                className="absolute bottom-0 right-2 h-32 w-32 object-contain opacity-25"
+                style={{ imageRendering: 'pixelated' }}
+              />
+            ) : null}
+            <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,14,0.1),rgba(8,10,14,0.9))]" />
+            <div className="relative z-10">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[10px] tracking-[0.18em] text-amber-100">
+                  {describePlatformThemeLabel(entry.themeMode)}
+                </span>
+                <span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[10px] text-zinc-100">
+                  {entry.authorDisplayName}
+                </span>
+                <span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[10px] text-zinc-100">
+                  {entry.visibility === 'published'
+                    ? `发布于 ${formatPlatformWorldTime(entry.publishedAt)}`
+                    : '仅自己可见'}
+                </span>
+              </div>
+              <div className="mt-4 text-3xl font-black text-white">
+                {entry.worldName}
+              </div>
+              {entry.subtitle ? (
+                <div className="mt-2 text-sm tracking-[0.18em] text-zinc-300/88">
+                  {entry.subtitle}
+                </div>
+              ) : null}
+              <div className="mt-4 max-w-[36rem] text-sm leading-7 text-zinc-200/88">
+                {entry.summaryText || '等待补充世界摘要。'}
+              </div>
+              <div className="mt-4 flex flex-wrap gap-2">
+                {tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[10px] text-zinc-100"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
+            <div
+              className="pixel-nine-slice"
+              style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 16, paddingY: 14 })}
+            >
+              <div className="text-[10px] tracking-[0.22em] text-zinc-500">
+                世界信息
+              </div>
+              <div className="mt-3 grid grid-cols-2 gap-3 text-sm text-zinc-100 sm:grid-cols-4">
+                <div className="rounded-xl border border-white/10 bg-black/20 px-3 py-3">
+                  <div className="text-[10px] tracking-[0.18em] text-zinc-500">
+                    可玩角色
+                  </div>
+                  <div className="mt-2 text-lg font-bold">{entry.playableNpcCount}</div>
+                </div>
+                <div className="rounded-xl border border-white/10 bg-black/20 px-3 py-3">
+                  <div className="text-[10px] tracking-[0.18em] text-zinc-500">
+                    地标
+                  </div>
+                  <div className="mt-2 text-lg font-bold">{entry.landmarkCount}</div>
+                </div>
+                <div className="rounded-xl border border-white/10 bg-black/20 px-3 py-3">
+                  <div className="text-[10px] tracking-[0.18em] text-zinc-500">
+                    阵营
+                  </div>
+                  <div className="mt-2 text-lg font-bold">
+                    {entry.profile.majorFactions.length}
+                  </div>
+                </div>
+                <div className="rounded-xl border border-white/10 bg-black/20 px-3 py-3">
+                  <div className="text-[10px] tracking-[0.18em] text-zinc-500">
+                    冲突
+                  </div>
+                  <div className="mt-2 text-lg font-bold">
+                    {entry.profile.coreConflicts.length}
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-5">
+                <div className="text-[10px] tracking-[0.22em] text-zinc-500">
+                  关键角色
+                </div>
+                <div className="mt-3 grid gap-3 sm:grid-cols-3">
+                  {previewCharacters.map((character) => (
+                    <div
+                      key={character.id}
+                      className="rounded-2xl border border-white/10 bg-black/20 px-3 py-3"
+                    >
+                      <div className="line-clamp-1 text-sm font-bold text-white">
+                        {character.title}
+                      </div>
+                      <div className="mt-1 line-clamp-2 text-xs leading-5 text-zinc-300">
+                        {character.description}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="mt-5">
+                <div className="text-[10px] tracking-[0.22em] text-zinc-500">
+                  关键场景
+                </div>
+                <div className="mt-3 grid gap-3 sm:grid-cols-3">
+                  {previewLandmarks.map((landmark) => (
+                    <div
+                      key={landmark.id}
+                      className="rounded-2xl border border-white/10 bg-black/20 px-3 py-3"
+                    >
+                      <div className="line-clamp-1 text-sm font-bold text-white">
+                        {landmark.name}
+                      </div>
+                      <div className="mt-1 line-clamp-2 text-xs leading-5 text-zinc-300">
+                        {landmark.description}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div
+              className="pixel-nine-slice"
+              style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 16, paddingY: 14 })}
+            >
+              <div className="text-[10px] tracking-[0.22em] text-zinc-500">
+                操作
+              </div>
+              <div className="mt-4 flex flex-col gap-3">
+                <ActionButton
+                  label="开始游戏"
+                  onClick={onStartGame}
+                  tone="primary"
+                />
+                {onContinueEdit ? (
+                  <ActionButton
+                    label="继续创作"
+                    onClick={onContinueEdit}
+                    disabled={isMutating}
+                  />
+                ) : null}
+                {onPublish ? (
+                  <ActionButton
+                    label="发布到广场"
+                    onClick={onPublish}
+                    tone="primary"
+                    disabled={isMutating}
+                  />
+                ) : null}
+                {onUnpublish ? (
+                  <ActionButton
+                    label="下架作品"
+                    onClick={onUnpublish}
+                    tone="danger"
+                    disabled={isMutating}
+                  />
+                ) : null}
+              </div>
+              {error ? (
+                <div className="mt-4 rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
+                  {error}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/game-shell/platformWorldPresentation.ts

@@ -0,0 +1,90 @@
+import type {
+  CustomWorldGalleryCard,
+  CustomWorldLibraryEntry,
+} from '../../../packages/shared/src/contracts/runtime';
+import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
+import { resolveCustomWorldCampSceneImage } from '../../data/customWorldVisuals';
+import type { CustomWorldProfile } from '../../types';
+
+export type PlatformWorldCardLike =
+  | CustomWorldGalleryCard
+  | CustomWorldLibraryEntry<CustomWorldProfile>;
+
+export function isLibraryWorldEntry(
+  entry: PlatformWorldCardLike,
+): entry is CustomWorldLibraryEntry<CustomWorldProfile> {
+  return 'profile' in entry;
+}
+
+export function resolvePlatformWorldCoverImage(entry: PlatformWorldCardLike) {
+  if (entry.coverImageSrc) {
+    return entry.coverImageSrc;
+  }
+
+  if (isLibraryWorldEntry(entry)) {
+    return resolveCustomWorldCampSceneImage(entry.profile) ?? '';
+  }
+
+  return '';
+}
+
+export function resolvePlatformWorldLeadPortrait(
+  entry: PlatformWorldCardLike,
+) {
+  if (!isLibraryWorldEntry(entry)) {
+    return '';
+  }
+
+  return buildCustomWorldPlayableCharacters(entry.profile)[0]?.portrait ?? '';
+}
+
+export function buildPlatformWorldTags(entry: PlatformWorldCardLike) {
+  if (!isLibraryWorldEntry(entry)) {
+    return [
+      describePlatformThemeLabel(entry.themeMode),
+      `${entry.playableNpcCount} 角色`,
+      `${entry.landmarkCount} 地标`,
+    ];
+  }
+
+  return [
+    ...entry.profile.majorFactions.slice(0, 2),
+    ...entry.profile.coreConflicts.slice(0, 1),
+  ]
+    .map((value) => value.trim())
+    .filter(Boolean)
+    .slice(0, 3);
+}
+
+export function formatPlatformWorldTime(value: string | null) {
+  if (!value) {
+    return '未发布';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return date.toLocaleDateString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
+
+export function describePlatformThemeLabel(themeMode: PlatformWorldCardLike['themeMode']) {
+  switch (themeMode) {
+    case 'martial':
+      return '江湖';
+    case 'arcane':
+      return '灵脉';
+    case 'machina':
+      return '机巧';
+    case 'tide':
+      return '潮痕';
+    case 'rift':
+      return '裂界';
+    default:
+      return '回响';
+  }
+}

src/components/game-shell/types.ts

@@ -7,10 +7,11 @@ import type {
   QuestFlowUi,
   StoryGenerationNpcUi,
 } from '../../hooks/useStoryGeneration';
+import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
 import type {
   Character,
-  CustomWorldProfile,
   CompanionRenderState,
+  CustomWorldProfile,
   GameState,
   StoryMoment,
   StoryOption,
@@ -43,6 +44,7 @@ export interface GameShellStoryProps {
 
 export interface GameShellEntryProps {
   hasSavedGame: boolean;
+  savedSnapshot: HydratedSavedGameSnapshot | null;
   handleContinueGame: () => void;
   handleStartNewGame: () => void;
   handleSaveAndExit: () => void;

src/components/game-shell/useGameShellRuntimeViewModel.ts

@@ -153,7 +153,7 @@ export function useGameShellRuntimeViewModel(params: Pick<
   const shouldHideStoryOptions = sceneTransitionPhase !== 'idle';
   const hideSelectionHero =
     gameState.currentScene === 'Selection' &&
-    shellViewModel.selectionStage !== 'start';
+    shellViewModel.selectionStage !== 'platform';
 
   const dialogueIndicator = useMemo(
     () =>

src/components/game-shell/useGameShellViewModel.ts

@@ -30,7 +30,7 @@ export function useGameShellViewModel(params: {
     characterChatModalOpen,
     hasNpcModalOpen,
   } = params;
-  const [selectionStage, setSelectionStage] = useState<SelectionStage>('start');
+  const [selectionStage, setSelectionStage] = useState<SelectionStage>('platform');
   const [overlayPanel, setOverlayPanel] = useState<OverlayPanel>(null);
   const [selectedSceneEntity, setSelectedSceneEntity] = useState<GameCanvasEntitySelection | null>(null);
   const [showTeamModal, setShowTeamModal] = useState(false);
@@ -56,13 +56,13 @@ export function useGameShellViewModel(params: {
   const openCampModal = () => setShowTeamModal(true);
   const closeCampModal = () => setShowTeamModal(false);
 
-  const resetSelectionFlow = () => setSelectionStage('start');
+  const resetSelectionFlow = () => setSelectionStage('platform');
 
   const resetForSaveAndExit = () => {
     setSelectedSceneEntity(null);
     setOverlayPanel(null);
     setShowTeamModal(false);
-    setSelectionStage('start');
+    setSelectionStage('platform');
   };
 
   return {