1

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -1,21 +1,32 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
 import type { BigFishWorkSummary } from '../../../packages/shared/src/contracts/bigFishWorkSummary';
+import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
 import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
 import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
 import type { CustomWorldProfile } from '../../types';
+import type { PlatformCreationTypeId } from '../platform-entry/platformEntryCreationTypes';
+import {
+  buildCreationWorkShelfItems,
+  type CreationWorkShelfItem,
+  type CreationWorkShelfMetricId,
+} from './creationWorkShelf';
 import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
 import { CustomWorldWorkCard } from './CustomWorldWorkCard';
 import {
   type CustomWorldWorkFilter,
   CustomWorldWorkTabs,
 } from './CustomWorldWorkTabs';
-import type { PlatformCreationTypeId } from '../platform-entry/platformEntryCreationTypes';
-import {
-  buildCreationWorkShelfItems,
-  type CreationWorkShelfItem,
-} from './creationWorkShelf';
+
+// 中文注释：草稿在手机端保持双列，已发布卡片由卡片自身跨两列展示公开指标。
+const WORK_GRID_CLASS =
+  'grid grid-cols-2 gap-2.5 sm:gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4';
+const WORK_METRIC_CACHE_KEY = 'genarrative.creationHub.publishedMetrics.v1';
+
+type WorkMetricSnapshot = Record<
+  string,
+  Partial<Record<CreationWorkShelfMetricId, number>>
+>;
 
 type CustomWorldCreationHubProps = {
   items: CustomWorldWorkSummary[];
@@ -29,15 +40,12 @@ type CustomWorldCreationHubProps = {
   onEnterPublished: (profileId: string) => void;
   onDeletePublished?: ((item: CustomWorldWorkSummary) => void) | null;
   deletingWorkId?: string | null;
-  onExperienceRpg?: ((item: CustomWorldWorkSummary) => void) | null;
   rpgLibraryEntries?: CustomWorldLibraryEntry<CustomWorldProfile>[];
   bigFishItems?: BigFishWorkSummary[];
   onOpenBigFishDetail?: (item: BigFishWorkSummary) => void;
-  onExperienceBigFish?: ((item: BigFishWorkSummary) => void) | null;
   onDeleteBigFish?: ((item: BigFishWorkSummary) => void) | null;
   puzzleItems?: PuzzleWorkSummary[];
   onOpenPuzzleDetail?: (item: PuzzleWorkSummary) => void;
-  onExperiencePuzzle?: ((profileId: string) => void) | null;
   onDeletePuzzle?: ((item: PuzzleWorkSummary) => void) | null;
 };
 
@@ -51,6 +59,59 @@ function EmptyState({ title }: { title: string }) {
   );
 }
 
+function buildWorkMetricCacheItemKey(item: CreationWorkShelfItem) {
+  return `${item.kind}:${item.id}`;
+}
+
+function readWorkMetricSnapshot(): WorkMetricSnapshot {
+  if (typeof window === 'undefined') {
+    return {};
+  }
+
+  try {
+    const rawSnapshot = window.sessionStorage.getItem(WORK_METRIC_CACHE_KEY);
+    if (!rawSnapshot) {
+      return {};
+    }
+
+    const parsed = JSON.parse(rawSnapshot) as WorkMetricSnapshot;
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeWorkMetricSnapshot(items: CreationWorkShelfItem[]) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const snapshot: WorkMetricSnapshot = {};
+  for (const item of items) {
+    if (item.status !== 'published' || item.metrics.length === 0) {
+      continue;
+    }
+
+    snapshot[buildWorkMetricCacheItemKey(item)] = Object.fromEntries(
+      item.metrics.map((metric) => [metric.id, metric.value]),
+    );
+  }
+
+  // 中文注释：缓存只作为下一次进入创作页的数字动画起点，真实展示值仍以接口返回为准。
+  if (Object.keys(snapshot).length === 0) {
+    return;
+  }
+
+  try {
+    window.sessionStorage.setItem(
+      WORK_METRIC_CACHE_KEY,
+      JSON.stringify(snapshot),
+    );
+  } catch {
+    // 中文注释：浏览器禁用 sessionStorage 时降级为无缓存动画，不影响作品列表使用。
+  }
+}
+
 export function CustomWorldCreationHub({
   items,
   loading,
@@ -63,15 +124,12 @@ export function CustomWorldCreationHub({
   onEnterPublished,
   onDeletePublished = null,
   deletingWorkId = null,
-  onExperienceRpg = null,
   rpgLibraryEntries = [],
   bigFishItems = [],
   onOpenBigFishDetail,
-  onExperienceBigFish = null,
   onDeleteBigFish = null,
   puzzleItems = [],
   onOpenPuzzleDetail,
-  onExperiencePuzzle = null,
   onDeletePuzzle = null,
 }: CustomWorldCreationHubProps) {
   const [activeFilter, setActiveFilter] =
@@ -97,6 +155,12 @@ export function CustomWorldCreationHub({
       rpgLibraryEntries,
     ],
   );
+  const [metricSnapshot] = useState<WorkMetricSnapshot>(() =>
+    readWorkMetricSnapshot(),
+  );
+  useEffect(() => {
+    writeWorkMetricSnapshot(shelfItems);
+  }, [shelfItems]);
   const draftCount = shelfItems.filter(
     (entry) => entry.status === 'draft',
   ).length;
@@ -131,33 +195,6 @@ export function CustomWorldCreationHub({
     }
   }
 
-  function buildExperienceAction(item: CreationWorkShelfItem) {
-    if (!item.canExperience) {
-      return null;
-    }
-
-    switch (item.source.kind) {
-      case 'puzzle': {
-        const sourceItem = item.source.item;
-        return () => {
-          onExperiencePuzzle?.(sourceItem.profileId);
-        };
-      }
-      case 'big-fish': {
-        const sourceItem = item.source.item;
-        return () => {
-          onExperienceBigFish?.(sourceItem);
-        };
-      }
-      case 'rpg': {
-        const sourceItem = item.source.item;
-        return () => {
-          onExperienceRpg?.(sourceItem);
-        };
-      }
-    }
-  }
-
   function buildDeleteAction(item: CreationWorkShelfItem) {
     if (!item.canDelete) {
       return null;
@@ -215,31 +252,33 @@ export function CustomWorldCreationHub({
         ) : null}
 
         {loading ? (
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <div className={WORK_GRID_CLASS}>
             {Array.from({ length: 3 }).map((_, index) => (
               <div
                 key={`skeleton-${index}`}
-                className="platform-subpanel min-h-[12rem] rounded-[1.6rem] p-5"
+                className="platform-subpanel min-h-[10.5rem] rounded-[1.2rem] p-3 sm:min-h-[12rem] sm:rounded-[1.6rem] sm:p-5"
               >
                 <div className="h-4 w-20 rounded-full bg-[var(--platform-track-fill)]" />
-                <div className="mt-6 h-8 w-36 rounded-full bg-[var(--platform-track-fill)]" />
-                <div className="mt-4 h-4 w-full rounded-full bg-[var(--platform-track-fill)]" />
+                <div className="mt-5 h-6 w-24 rounded-full bg-[var(--platform-track-fill)] sm:mt-6 sm:h-8 sm:w-36" />
+                <div className="mt-3 h-3 w-full rounded-full bg-[var(--platform-track-fill)] sm:mt-4 sm:h-4" />
                 <div className="mt-2 h-4 w-4/5 rounded-full bg-[var(--platform-track-fill)]" />
-                <div className="mt-8 flex gap-2">
-                  <div className="h-7 w-20 rounded-full bg-[var(--platform-track-fill)]" />
-                  <div className="h-7 w-20 rounded-full bg-[var(--platform-track-fill)]" />
+                <div className="mt-6 flex flex-col gap-2 sm:mt-8 sm:flex-row">
+                  <div className="h-6 w-16 rounded-full bg-[var(--platform-track-fill)] sm:h-7 sm:w-20" />
+                  <div className="h-6 w-16 rounded-full bg-[var(--platform-track-fill)] sm:h-7 sm:w-20" />
                 </div>
               </div>
             ))}
           </div>
         ) : filteredItems.length > 0 ? (
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <div className={WORK_GRID_CLASS}>
             {filteredItems.map((item) => (
               <CustomWorldWorkCard
                 key={`${item.kind}-${item.id}`}
                 item={item}
+                previousMetricValues={
+                  metricSnapshot[buildWorkMetricCacheItemKey(item)]
+                }
                 onOpen={() => handleOpenShelfItem(item)}
-                onExperience={buildExperienceAction(item)}
                 onDelete={buildDeleteAction(item)}
                 deleteBusy={deletingWorkId === item.id}
               />