1

2026-05-08 11:44:42 +08:00
parent b08127031c
commit abf1f1ebea
249 changed files with 39411 additions and 887 deletions
--- a/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
@@ -117,6 +117,7 @@ test('creation hub reflects updated draft title summary and counts after rerende
  expect((puzzleButton as HTMLButtonElement).disabled).toBe(false);
  expect((match3dButton as HTMLButtonElement).disabled).toBe(false);
  expect(screen.getByText('反直觉形状分拣')).toBeTruthy();
+  expect(screen.queryByRole('button', { name: /智能创作/u })).toBeNull();
  expect(screen.queryByRole('button', { name: /角色扮演/u })).toBeNull();
  expect(screen.queryByRole('button', { name: /大鱼吃小鱼/u })).toBeNull();

--- a/src/components/custom-world-home/CustomWorldCreationHub.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.tsx
@@ -4,8 +4,9 @@ import type { BigFishWorkSummary } from '../../../packages/shared/src/contracts/
 import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
 import type { Match3DWorkSummary } from '../../../packages/shared/src/contracts/match3dWorks';
 import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
-import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
 import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
+import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
+import type { VisualNovelWorkSummary } from '../../../packages/shared/src/contracts/visualNovel';
 import type { CustomWorldProfile } from '../../types';
 import type { PlatformCreationTypeId } from '../platform-entry/platformEntryCreationTypes';
 import {
@@ -57,6 +58,10 @@ type CustomWorldCreationHubProps = {
  onDeletePuzzle?: ((item: PuzzleWorkSummary) => void) | null;
  onClaimPuzzlePointIncentive?: ((item: PuzzleWorkSummary) => void) | null;
  claimingPuzzleProfileId?: string | null;
+  visualNovelItems?: VisualNovelWorkSummary[];
+  onOpenVisualNovelDetail?: ((item: VisualNovelWorkSummary) => void) | null;
+  onDeleteVisualNovel?: ((item: VisualNovelWorkSummary) => void) | null;
+  mode?: 'full' | 'start-only' | 'works-only';
 };

 function EmptyState({ title }: { title: string }) {
@@ -149,6 +154,10 @@ export function CustomWorldCreationHub({
  onDeletePuzzle = null,
  onClaimPuzzlePointIncentive = null,
  claimingPuzzleProfileId = null,
+  visualNovelItems = [],
+  onOpenVisualNovelDetail = null,
+  onDeleteVisualNovel = null,
+  mode = 'full',
 }: CustomWorldCreationHubProps) {
  const [activeFilter, setActiveFilter] =
    useState<CustomWorldWorkFilter>('all');
@@ -161,11 +170,13 @@ export function CustomWorldCreationHub({
        match3dItems,
        squareHoleItems,
        puzzleItems,
+        visualNovelItems,
        canDeleteRpg: Boolean(onDeletePublished),
        canDeleteBigFish: Boolean(onDeleteBigFish),
        canDeleteMatch3D: Boolean(onDeleteMatch3D),
        canDeleteSquareHole: Boolean(onDeleteSquareHole),
        canDeletePuzzle: Boolean(onDeletePuzzle),
+        canDeleteVisualNovel: Boolean(onDeleteVisualNovel),
      }),
    [
      bigFishItems,
@@ -176,9 +187,11 @@ export function CustomWorldCreationHub({
      onDeleteSquareHole,
      onDeletePublished,
      onDeletePuzzle,
+      onDeleteVisualNovel,
      puzzleItems,
      rpgLibraryEntries,
      squareHoleItems,
+      visualNovelItems,
    ],
  );
  const [metricSnapshot] = useState<WorkMetricSnapshot>(() =>
@@ -206,6 +219,9 @@ export function CustomWorldCreationHub({
      case 'puzzle':
        onOpenPuzzleDetail?.(item.source.item);
        return;
+      case 'visual-novel':
+        onOpenVisualNovelDetail?.(item.source.item);
+        return;
      case 'big-fish':
        onOpenBigFishDetail?.(item.source.item);
        return;
@@ -239,6 +255,12 @@ export function CustomWorldCreationHub({
          onDeletePuzzle?.(sourceItem);
        };
      }
+      case 'visual-novel': {
+        const sourceItem = item.source.item;
+        return () => {
+          onDeleteVisualNovel?.(sourceItem);
+        };
+      }
      case 'big-fish': {
        const sourceItem = item.source.item;
        return () => {
@@ -277,23 +299,30 @@ export function CustomWorldCreationHub({
    };
  }

+  const showStartCard = mode !== 'works-only';
+  const showWorkShelf = mode !== 'start-only';
+
  return (
    <div className="platform-page-stage platform-remap-surface space-y-4 px-3 pb-4 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-5 xl:pt-5">
      <div className="space-y-4 xl:space-y-3">
-        <CustomWorldCreationStartCard
-          busy={createBusy}
-          error={createError}
-          onCreateType={onCreateType}
-        />
+        {showStartCard ? (
+          <CustomWorldCreationStartCard
+            busy={createBusy}
+            error={createError}
+            onCreateType={onCreateType}
+          />
+        ) : null}

-        <CustomWorldWorkTabs
-          activeFilter={activeFilter}
-          draftCount={draftCount}
-          publishedCount={publishedCount}
-          onChange={setActiveFilter}
-        />
+        {showWorkShelf ? (
+          <CustomWorldWorkTabs
+            activeFilter={activeFilter}
+            draftCount={draftCount}
+            publishedCount={publishedCount}
+            onChange={setActiveFilter}
+          />
+        ) : null}

-        {error ? (
+        {showWorkShelf && error ? (
          <div className="platform-banner platform-banner--danger rounded-[1.4rem] px-4 py-4 text-sm leading-7">
            <div>{error}</div>
            <button
@@ -306,49 +335,51 @@ export function CustomWorldCreationHub({
          </div>
        ) : null}

-        {loading ? (
-          <div className={WORK_GRID_CLASS}>
-            {Array.from({ length: 3 }).map((_, index) => (
-              <div
-                key={`skeleton-${index}`}
-                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-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-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" />
+        {showWorkShelf ? (
+          loading ? (
+            <div className={WORK_GRID_CLASS}>
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div
+                  key={`skeleton-${index}`}
+                  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-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-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>
-            ))}
-          </div>
-        ) : filteredItems.length > 0 ? (
-          <div className={WORK_GRID_CLASS}>
-            {filteredItems.map((item) => (
-              <CustomWorldWorkCard
-                key={`${item.kind}-${item.id}`}
-                item={item}
-                previousMetricValues={
-                  metricSnapshot[buildWorkMetricCacheItemKey(item)]
-                }
-                onOpen={() => handleOpenShelfItem(item)}
-                onDelete={buildDeleteAction(item)}
-                deleteBusy={deletingWorkId === item.id}
-                onClaimPointIncentive={buildPointIncentiveAction(item)}
-                pointIncentiveBusy={
-                  item.source.kind === 'puzzle' &&
-                  claimingPuzzleProfileId === item.source.item.profileId
-                }
-              />
-            ))}
-          </div>
-        ) : shelfItems.length === 0 ? (
-          <EmptyState title="还没有作品" />
-        ) : (
-          <EmptyState title="当前筛选下没有内容" />
-        )}
+              ))}
+            </div>
+          ) : filteredItems.length > 0 ? (
+            <div className={WORK_GRID_CLASS}>
+              {filteredItems.map((item) => (
+                <CustomWorldWorkCard
+                  key={`${item.kind}-${item.id}`}
+                  item={item}
+                  previousMetricValues={
+                    metricSnapshot[buildWorkMetricCacheItemKey(item)]
+                  }
+                  onOpen={() => handleOpenShelfItem(item)}
+                  onDelete={buildDeleteAction(item)}
+                  deleteBusy={deletingWorkId === item.id}
+                  onClaimPointIncentive={buildPointIncentiveAction(item)}
+                  pointIncentiveBusy={
+                    item.source.kind === 'puzzle' &&
+                    claimingPuzzleProfileId === item.source.item.profileId
+                  }
+                />
+              ))}
+            </div>
+          ) : shelfItems.length === 0 ? (
+            <EmptyState title="还没有作品" />
+          ) : (
+            <EmptyState title="当前筛选下没有内容" />
+          )
+        ) : null}
      </div>
    </div>
  );
--- a/src/components/custom-world-home/CustomWorldCreationStartCard.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationStartCard.tsx
@@ -52,13 +52,26 @@ export function CustomWorldCreationStartCard({
                onClick={() => {
                  onCreateType(item.id);
                }}
-                className={`platform-interactive-card relative flex min-h-[4rem] w-[11.25rem] shrink-0 snap-start flex-col overflow-hidden rounded-[1.15rem] border px-3 py-2.5 text-left transition sm:min-h-[8.5rem] sm:w-auto sm:rounded-[1.5rem] sm:px-4 sm:py-4 xl:min-h-[6.4rem] xl:px-3.5 xl:py-3 ${
+                className={`platform-creation-reference-card platform-interactive-card relative flex min-h-[4.6rem] w-[11.25rem] shrink-0 snap-start flex-col overflow-hidden rounded-[1.15rem] border p-0 text-left transition sm:min-h-[8.5rem] sm:w-auto sm:rounded-[1.5rem] xl:min-h-[6.4rem] ${
                  item.locked
                    ? 'cursor-not-allowed border-white/10 bg-white/8 text-zinc-300/70'
-                    : 'border-white/18 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.24),transparent_36%),linear-gradient(135deg,rgba(255,255,255,0.18),rgba(255,255,255,0.08))] text-white'
+                    : 'border-white/18 bg-white/16 text-white'
                } ${busy && !item.locked ? 'opacity-70' : ''}`}
              >
-                <div className="flex min-h-5 items-center justify-end gap-2 sm:items-start sm:gap-3">
+                <img
+                  src={item.imageSrc}
+                  alt=""
+                  className="absolute inset-0 h-full w-full object-cover"
+                  loading="lazy"
+                />
+                <div
+                  className={`absolute inset-0 ${
+                    item.locked
+                      ? 'bg-[linear-gradient(90deg,rgba(3,7,18,0.58),rgba(3,7,18,0.14)),linear-gradient(180deg,rgba(3,7,18,0.05)_0%,rgba(3,7,18,0.2)_42%,rgba(3,7,18,0.82)_100%)]'
+                      : 'bg-[linear-gradient(90deg,rgba(3,7,18,0.54),rgba(3,7,18,0.04)),linear-gradient(180deg,rgba(3,7,18,0.03)_0%,rgba(3,7,18,0.14)_42%,rgba(3,7,18,0.78)_100%)]'
+                  }`}
+                />
+                <div className="relative z-10 flex min-h-5 items-center justify-end gap-2 px-3 pt-2.5 sm:items-start sm:gap-3 sm:px-4 sm:pt-4 xl:px-3.5 xl:pt-3">
                  {item.locked ? (
                    <span className="platform-pill platform-pill--neutral px-2.5 text-xs text-[var(--platform-text-soft)] sm:px-3 sm:text-sm">
                      {item.badge}
@@ -71,13 +84,13 @@ export function CustomWorldCreationStartCard({
                  )}
                </div>

-                <div className="mt-auto pt-1.5 sm:pt-4 xl:pt-2">
-                  <div className="truncate text-base font-black leading-tight text-inherit sm:text-lg xl:text-base">
+                <div className="relative z-10 mt-auto px-3 pb-2.5 pt-1.5 text-white [text-shadow:0_1px_8px_rgba(0,0,0,0.76)] sm:px-4 sm:pb-4 sm:pt-4 xl:px-3.5 xl:pb-3 xl:pt-2">
+                  <div className="truncate text-base font-black leading-tight text-white sm:text-lg xl:text-base">
                    {item.title}
                  </div>
                  <div
                    className={`mt-1 truncate text-xs sm:mt-2 sm:text-sm xl:mt-1 xl:text-xs ${
-                      item.locked ? 'text-zinc-400' : 'text-zinc-200/82'
+                      item.locked ? 'text-white/72' : 'text-white/88'
                    }`}
                  >
                    {item.subtitle}
--- a/src/components/custom-world-home/creationWorkShelf.test.ts
+++ b/src/components/custom-world-home/creationWorkShelf.test.ts
@@ -0,0 +1,47 @@
+import { expect, test } from 'vitest';
+
+import { buildCreationWorkShelfItems } from './creationWorkShelf';
+
+test('buildCreationWorkShelfItems maps visual novel items with VN public code', () => {
+  const items = buildCreationWorkShelfItems({
+    rpgItems: [],
+    bigFishItems: [],
+    puzzleItems: [],
+    visualNovelItems: [
+      {
+        runtimeKind: 'visual-novel',
+        profileId: 'vn-profile-demo-12345678',
+        ownerUserId: 'user-1',
+        title: '雨夜终章',
+        description: '失踪列车上的选择。',
+        coverImageSrc: '/vn-cover.png',
+        tags: ['悬疑', '列车'],
+        publishStatus: 'published',
+        publishReady: true,
+        playCount: 12,
+        updatedAt: '2026-05-07T00:00:00.000Z',
+        publishedAt: '2026-05-07T00:00:00.000Z',
+      },
+      {
+        runtimeKind: 'visual-novel',
+        profileId: 'vn-profile-draft-00000001',
+        ownerUserId: 'user-1',
+        title: '',
+        description: '',
+        coverImageSrc: null,
+        tags: [],
+        publishStatus: 'draft',
+        publishReady: false,
+        playCount: 0,
+        updatedAt: '2026-05-06T00:00:00.000Z',
+        publishedAt: null,
+      },
+    ],
+  });
+
+  expect(items[0]?.kind).toBe('visual-novel');
+  expect(items[0]?.publicWorkCode).toBe('VN-12345678');
+  expect(items[0]?.sharePath).toContain('/works/detail?work=VN-12345678');
+  expect(items[1]?.status).toBe('draft');
+  expect(items[1]?.publicWorkCode).toBeNull();
+});
--- a/src/components/custom-world-home/creationWorkShelf.ts
+++ b/src/components/custom-world-home/creationWorkShelf.ts
@@ -3,6 +3,7 @@ import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contra
 import type { Match3DWorkSummary } from '../../../packages/shared/src/contracts/match3dWorks';
 import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
 import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
+import type { VisualNovelWorkSummary } from '../../../packages/shared/src/contracts/visualNovel';
 import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
 import { buildPublicWorkStagePath } from '../../routing/appPageRoutes';
 import {
@@ -10,6 +11,7 @@ import {
  buildMatch3DPublicWorkCode,
  buildPuzzlePublicWorkCode,
  buildSquareHolePublicWorkCode,
+  buildVisualNovelPublicWorkCode,
 } from '../../services/publicWorkCode';
 import type { CustomWorldProfile } from '../../types';

@@ -18,7 +20,8 @@ export type CreationWorkShelfKind =
  | 'big-fish'
  | 'match3d'
  | 'square-hole'
-  | 'puzzle';
+  | 'puzzle'
+  | 'visual-novel';
 export type CreationWorkShelfStatus = 'draft' | 'published';

 export type CreationWorkShelfBadgeTone = 'warm' | 'success' | 'neutral';
@@ -70,6 +73,10 @@ export type CreationWorkShelfSource =
  | {
      kind: 'puzzle';
      item: PuzzleWorkSummary;
+    }
+  | {
+      kind: 'visual-novel';
+      item: VisualNovelWorkSummary;
    };

 export type CreationWorkShelfItem = {
@@ -100,11 +107,13 @@ export function buildCreationWorkShelfItems(params: {
  match3dItems?: Match3DWorkSummary[];
  squareHoleItems?: SquareHoleWorkSummary[];
  puzzleItems: PuzzleWorkSummary[];
+  visualNovelItems?: VisualNovelWorkSummary[];
  canDeleteRpg?: boolean;
  canDeleteBigFish?: boolean;
  canDeleteMatch3D?: boolean;
  canDeleteSquareHole?: boolean;
  canDeletePuzzle?: boolean;
+  canDeleteVisualNovel?: boolean;
 }) {
  const {
    rpgItems,
@@ -113,11 +122,13 @@ export function buildCreationWorkShelfItems(params: {
    match3dItems = [],
    squareHoleItems = [],
    puzzleItems,
+    visualNovelItems = [],
    canDeleteRpg = false,
    canDeleteBigFish = false,
    canDeleteMatch3D = false,
    canDeleteSquareHole = false,
    canDeletePuzzle = false,
+    canDeleteVisualNovel = false,
  } = params;

  return [
@@ -136,6 +147,9 @@ export function buildCreationWorkShelfItems(params: {
    ...puzzleItems.map((item) =>
      mapPuzzleWorkToShelfItem(item, canDeletePuzzle),
    ),
+    ...visualNovelItems.map((item) =>
+      mapVisualNovelWorkToShelfItem(item, canDeleteVisualNovel),
+    ),
  ].sort(
    (left, right) =>
      getShelfItemTime(right.updatedAt) - getShelfItemTime(left.updatedAt),
@@ -337,6 +351,53 @@ function mapPuzzleWorkToShelfItem(
  };
 }

+function mapVisualNovelWorkToShelfItem(
+  item: VisualNovelWorkSummary,
+  canDelete: boolean,
+): CreationWorkShelfItem {
+  const status =
+    item.publishStatus === 'published' ? 'published' : 'draft';
+  const publicWorkCode =
+    status === 'published' ? buildVisualNovelPublicWorkCode(item.profileId) : null;
+  const title = item.title?.trim() || '未命名视觉小说';
+  const summary =
+    item.description?.trim() ||
+    (status === 'draft' ? '未填写作品描述' : '');
+
+  return {
+    id: item.profileId,
+    kind: 'visual-novel',
+    status,
+    title,
+    summary,
+    updatedAt: item.updatedAt,
+    coverImageSrc: item.coverImageSrc ?? null,
+    coverRenderMode: 'image',
+    coverCharacterImageSrcs: [],
+    publicWorkCode,
+    sharePath:
+      publicWorkCode && status === 'published'
+        ? buildPublicWorkStagePath('work-detail', publicWorkCode)
+        : null,
+    openActionLabel: status === 'published' ? '查看详情' : '继续创作',
+    canDelete,
+    canShare: status === 'published' && Boolean(publicWorkCode),
+    badges: [
+      buildStatusBadge(status),
+      { id: 'type', label: '视觉小说', tone: 'neutral' },
+    ],
+    metrics:
+      status === 'published'
+        ? buildPublishedMetrics({
+            playCount: item.playCount,
+            remixCount: 0,
+            likeCount: 0,
+          })
+        : [],
+    source: { kind: 'visual-novel', item },
+  };
+}
+
 function mapSquareHoleWorkToShelfItem(
  item: SquareHoleWorkSummary,
  canDelete: boolean,