GenarrativeAI/Genarrative
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine play type integration flow and docs

Browse Source
This commit is contained in:
kdletters
2026-06-03 00:57:24 +08:00
parent dbe4c902b4
commit 67ba40c678
35 changed files with 2226 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
View File

@@ -560,7 +560,7 @@ test('creation hub shows RPG public work code from published library entry', ()
expect(screen.queryByText('CW-00000001')).toBeNull();
});
test('creation hub exposes persisted draft delete action directly on the card', () => {
test('creation hub keeps persisted draft delete action off the card header', () => {
const { container } = render(
<CustomWorldCreationHub
items={[{ ...baseDraftItem, profileId: 'profile-1' }]}
@@ -579,7 +579,7 @@ test('creation hub exposes persisted draft delete action directly on the card',
expect(
container.querySelector('.creation-work-card__swipe-underlay'),
).toBeTruthy();
expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
});
test('creation hub reveals persisted draft delete action from left swipe', () => {
@@ -641,6 +641,75 @@ test('creation hub reveals persisted draft delete action from keyboard', async (
expect(screen.queryByRole('button', { name: '分享' })).toBeNull();
});
test('creation hub reveals persisted draft delete action from long press menu', () => {
const { container } = render(
<CustomWorldCreationHub
items={[{ ...baseDraftItem, profileId: 'profile-1' }]}
loading={false}
error={null}
onRetry={() => {}}
onCreateType={noopCreateType}
onOpenDraft={() => {}}
onEnterPublished={() => {}}
onDeletePublished={() => {}}
entryConfig={testEntryConfig}
creationTypes={testCreationTypes}
/>,
);
const card = screen.getByRole('button', { name: /继续完善《潮雾列岛》/u });
fireEvent.contextMenu(card);
expect(
container.querySelector('.creation-work-card-shell--actions-visible'),
).toBeTruthy();
expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
});
test('creation hub gives every deletable work card a side delete action', () => {
const { container } = render(
<CustomWorldCreationHub
items={[{ ...baseDraftItem, profileId: 'profile-1' }]}
babyObjectMatchItems={[babyObjectMatchDraftItem]}
puzzleItems={[
{
workId: 'puzzle:side-delete',
profileId: 'puzzle-profile-side-delete',
ownerUserId: 'user-1',
authorDisplayName: '拼图作者',
levelName: '侧边删除拼图',
summary: '不同来源都应有侧边删除。',
themeTags: ['灯塔'],
coverImageSrc: null,
publicationStatus: 'draft',
updatedAt: new Date('2026-05-02T12:00:00.000Z').toISOString(),
publishedAt: null,
playCount: 0,
remixCount: 0,
likeCount: 0,
publishReady: true,
},
]}
loading={false}
error={null}
onRetry={() => {}}
onCreateType={noopCreateType}
onOpenDraft={() => {}}
onEnterPublished={() => {}}
onDeletePublished={() => {}}
onDeleteBabyObjectMatch={() => {}}
onDeletePuzzle={() => {}}
entryConfig={testEntryConfig}
creationTypes={testCreationTypes}
/>,
);
expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
expect(
container.querySelectorAll('.creation-work-card__swipe-underlay'),
).toHaveLength(3);
});
test('creation hub shows delete action for baby object match drafts', async () => {
const user = userEvent.setup();
const onDeleteBabyObjectMatch = vi.fn();
@@ -719,7 +788,7 @@ test('creation hub works-only tab filters bark battle draft and published works'
expect(onOpenBarkBattleDetail).toHaveBeenCalledWith(barkBattlePublishedItem);
});
test('creation hub published work delete action is directly visible', async () => {
test('creation hub published work delete action stays in revealed side actions', async () => {
const user = userEvent.setup();
const onDeletePuzzle = vi.fn();
const onOpenPuzzleDetail = vi.fn();
@@ -759,9 +828,11 @@ test('creation hub published work delete action is directly visible', async () =
/>,
);
expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
expect(screen.getByRole('button', { name: '分享' })).toBeTruthy();
screen.getByRole('button', { name: /查看详情《待删拼图》/u }).focus();
await user.keyboard('{ArrowLeft}');
await user.click(screen.getByRole('button', { name: '删除' }));
expect(onDeletePuzzle).toHaveBeenCalledWith(
@@ -770,7 +841,7 @@ test('creation hub published work delete action is directly visible', async () =
expect(onOpenPuzzleDetail).not.toHaveBeenCalled();
});
test('creation hub exposes work delete action directly on card', async () => {
test('creation hub reveals draft work delete action from keyboard', async () => {
const user = userEvent.setup();
const onDeletePuzzle = vi.fn();
const onOpenPuzzleDetail = vi.fn();
@@ -810,6 +881,10 @@ test('creation hub exposes work delete action directly on card', async () => {
/>,
);
expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
screen.getByRole('button', { name: /继续创作《直接删除拼图》/u }).focus();
await user.keyboard('{ArrowLeft}');
await user.click(screen.getByRole('button', { name: '删除' }));
expect(onDeletePuzzle).toHaveBeenCalledWith(
@@ -858,7 +933,9 @@ test('creation hub keeps swipe delete action available', async () => {
/>,
);
const card = screen.getByRole('button', { name: /查看详情《左滑删除拼图》/u });
const card = screen.getByRole('button', {
name: /查看详情《左滑删除拼图》/u,
});
fireEvent.touchStart(card, {
touches: [{ clientX: 180, clientY: 20 }],
});

7
src/components/custom-world-home/CustomWorldCreationHub.tsx
View File

@@ -22,6 +22,7 @@ import {
buildCreationWorkShelfItems,
type CreationWorkShelfItem,
type CreationWorkShelfMetricId,
type CreationWorkShelfRuntimeState,
} from './creationWorkShelf';
import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
import { CustomWorldWorkCard } from './CustomWorldWorkCard';
@@ -66,7 +67,9 @@ type CustomWorldCreationHubProps = {
onOpenJumpHopDetail?: (item: JumpHopWorkSummaryResponse) => void;
onDeleteJumpHop?: ((item: JumpHopWorkSummaryResponse) => void) | null;
woodenFishItems?: WoodenFishWorkSummaryResponse[];
onOpenWoodenFishDetail?: ((item: WoodenFishWorkSummaryResponse) => void) | null;
onOpenWoodenFishDetail?:
| ((item: WoodenFishWorkSummaryResponse) => void)
| null;
onDeleteWoodenFish?: ((item: WoodenFishWorkSummaryResponse) => void) | null;
puzzleItems?: PuzzleWorkSummary[];
onOpenPuzzleDetail?: (item: PuzzleWorkSummary) => void;
@@ -84,7 +87,7 @@ type CustomWorldCreationHubProps = {
onDeleteVisualNovel?: ((item: VisualNovelWorkSummary) => void) | null;
getWorkState?: (
item: CreationWorkShelfItem,
) => { isGenerating?: boolean; hasUnreadUpdate?: boolean } | null;
) => CreationWorkShelfRuntimeState | null;
onOpenShelfItem?: (item: CreationWorkShelfItem) => void;
mode?: 'full' | 'start-only' | 'works-only';
};

71
src/components/custom-world-home/CustomWorldWorkCard.tsx
View File

@@ -1,5 +1,6 @@
import {
BadgeCheck,
CircleAlert,
Clock3,
Loader2,
Share2,
@@ -439,11 +440,8 @@ export function CustomWorldWorkCard({
return;
}
updateSwipeOffset(
gesture,
event.clientX,
event.clientY,
() => event.preventDefault(),
updateSwipeOffset(gesture, event.clientX, event.clientY, () =>
event.preventDefault(),
);
};
@@ -473,9 +471,7 @@ export function CustomWorldWorkCard({
}
};
const beginTouchSwipeGesture = (
event: ReactTouchEvent<HTMLDivElement>,
) => {
const beginTouchSwipeGesture = (event: ReactTouchEvent<HTMLDivElement>) => {
if (swipeRevealWidth <= 0) {
return;
}
@@ -494,20 +490,15 @@ export function CustomWorldWorkCard({
};
};
const updateTouchSwipeGesture = (
event: ReactTouchEvent<HTMLDivElement>,
) => {
const updateTouchSwipeGesture = (event: ReactTouchEvent<HTMLDivElement>) => {
const gesture = swipeGestureRef.current;
const touch = event.touches[0];
if (!gesture || gesture.pointerId !== -1 || !touch) {
return;
}
updateSwipeOffset(
gesture,
touch.clientX,
touch.clientY,
() => event.preventDefault(),
updateSwipeOffset(gesture, touch.clientX, touch.clientY, () =>
event.preventDefault(),
);
};
@@ -676,8 +667,8 @@ export function CustomWorldWorkCard({
{displayTitle}
</span>
</div>
<div className="creation-work-card__quick-actions">
{canUseShareAction ? (
{canUseShareAction ? (
<div className="creation-work-card__quick-actions">
<button
type="button"
onClick={(event) => {
@@ -713,38 +704,8 @@ export function CustomWorldWorkCard({
>
<Share2 aria-hidden="true" className="h-4 w-4" />
</button>
) : null}
{onDelete ? (
<button
type="button"
onClick={(event) => {
event.stopPropagation();
suppressOpenRef.current = false;
closeSwipeActions();
onDelete();
}}
onKeyDown={(event) => {
event.stopPropagation();
}}
onPointerDown={(event) => {
event.stopPropagation();
}}
onTouchStart={(event) => {
event.stopPropagation();
}}
disabled={deleteBusy}
title={deleteBusy ? '删除中' : '删除作品'}
aria-label={deleteBusy ? '删除中' : '删除'}
className="creation-work-card__quick-action-button creation-work-card__quick-action-button--danger"
>
{deleteBusy ? (
<span className="text-xs leading-none">...</span>
) : (
<Trash2 aria-hidden="true" className="h-4 w-4" />
)}
</button>
) : null}
</div>
</div>
) : null}
</div>
<div className="creation-work-card__meta platform-category-game-item__meta">
@@ -762,6 +723,16 @@ export function CustomWorldWorkCard({
{item.summary}
</div>
{item.hasGenerationFailure ? (
<div
aria-label={item.generationFailureSummary ?? '生成失败'}
className="creation-work-card__failure-status"
>
<CircleAlert aria-hidden="true" className="h-3.5 w-3.5" />
<span>{item.generationFailureSummary ?? '生成失败'}</span>
</div>
) : null}
{isPublished ? (
<div className="creation-work-card__published-info">
{item.pointIncentive ? (

92
src/components/custom-world-home/creationWorkShelf.test.ts
View File

@@ -93,7 +93,9 @@ test('buildCreationWorkShelfItems maps wooden fish items with WF public code', (
expect(items[0]?.sharePath).toContain('/works/detail?work=WF-12345678');
expect(items[0]?.openActionLabel).toBe('查看详情');
expect(items[0]?.badges.some((badge) => badge.label === '敲木鱼')).toBe(true);
expect(items[0]?.metrics.find((metric) => metric.id === 'play-count')?.value).toBe(9);
expect(
items[0]?.metrics.find((metric) => metric.id === 'play-count')?.value,
).toBe(9);
expect(onOpenWoodenFishDetail).toHaveBeenCalledWith(woodenFishWork);
});
@@ -211,9 +213,9 @@ test('buildCreationWorkShelfItems keeps separate bark battle draft and published
expect(items.find((item) => item.status === 'published')?.id).toBe(
'BB-PUB00001',
);
expect(items.find((item) => item.status === 'published')?.publicWorkCode).toBe(
'BB-PUB00001',
);
expect(
items.find((item) => item.status === 'published')?.publicWorkCode,
).toBe('BB-PUB00001');
});
test('buildCreationWorkShelfItems falls back to deterministic RPG public work code when library entry is missing', () => {
@@ -303,10 +305,9 @@ test('buildCreationWorkShelfItems gives bark battle draft cover from character o
expect(items.find((item) => item.id === 'BB-COVER001')?.coverImageSrc).toBe(
'/draft-player-cover.png',
);
expect(items.find((item) => item.id === 'BB-COVER001')?.coverCharacterImageSrcs).toEqual([
'/draft-player-cover.png',
'/draft-opponent-cover.png',
]);
expect(
items.find((item) => item.id === 'BB-COVER001')?.coverCharacterImageSrcs,
).toEqual(['/draft-player-cover.png', '/draft-opponent-cover.png']);
expect(items.find((item) => item.id === 'BB-COVER002')?.coverImageSrc).toBe(
'/creation-type-references/bark-battle.webp',
);
@@ -457,14 +458,76 @@ test('buildCreationWorkShelfItems restores persisted generation state for puzzle
],
});
expect(items.find((item) => item.kind === 'puzzle')?.isGenerating).toBe(
true,
);
expect(items.find((item) => item.kind === 'puzzle')?.isGenerating).toBe(true);
expect(items.find((item) => item.kind === 'match3d')?.isGenerating).toBe(
true,
);
});
test('buildCreationWorkShelfItems lets failure notice override persisted generating copy', () => {
const items = buildCreationWorkShelfItems({
rpgItems: [],
bigFishItems: [],
puzzleItems: [
{
workId: 'puzzle:failed-generating',
profileId: 'puzzle-profile-failed-generating',
ownerUserId: 'user-1',
sourceSessionId: 'puzzle-session-failed-generating',
authorDisplayName: '测试作者',
levelName: '失败拼图',
summary: '正在生成拼图草稿。',
themeTags: [],
coverImageSrc: null,
publicationStatus: 'draft',
updatedAt: '2026-05-08T00:00:00.000Z',
publishedAt: null,
publishReady: false,
generationStatus: 'generating',
},
],
getItemState: (item) =>
item.kind === 'puzzle'
? {
isGenerating: false,
suppressPersistedGenerating: true,
summaryOverride: '拼图草稿生成失败，可重新打开处理。',
}
: null,
});
expect(items[0]?.isGenerating).toBe(false);
expect(items[0]?.summary).toBe('拼图草稿生成失败，可重新打开处理。');
});
test('persisted failed puzzle draft is not treated as generating', () => {
const items = buildCreationWorkShelfItems({
rpgItems: [],
bigFishItems: [],
puzzleItems: [
{
workId: 'puzzle:failed',
profileId: 'puzzle-profile-failed',
ownerUserId: 'user-1',
sourceSessionId: 'puzzle-session-failed',
authorDisplayName: '测试作者',
levelName: '失败拼图',
summary: '服务端已回写失败。',
themeTags: [],
coverImageSrc: null,
publicationStatus: 'draft',
updatedAt: '2026-05-08T00:00:00.000Z',
publishedAt: null,
publishReady: false,
generationStatus: 'failed',
},
],
});
expect(items[0]?.isGenerating).toBeFalsy();
expect(items[0]?.summary).toBe('服务端已回写失败。');
});
test('buildCreationWorkShelfItems maps baby object match local drafts', () => {
const onOpenBabyObjectMatchDetail = vi.fn();
const onDeleteBabyObjectMatch = vi.fn();
@@ -1088,7 +1151,6 @@ test('bark battle draft generating state only follows pending assets', () => {
).toBe(false);
});
test('CustomWorldWorkCard hides author on shelf draft and published cards', () => {
const buildItem = (
status: CreationWorkShelfItem['status'],
@@ -1110,7 +1172,11 @@ test('CustomWorldWorkCard hides author on shelf draft and published cards', () =
canDelete: false,
canShare: false,
badges: [
{ id: 'status', label: status === 'draft' ? '草稿' : '已发布', tone: 'neutral' },
{
id: 'status',
label: status === 'draft' ? '草稿' : '已发布',
tone: 'neutral',
},
{ id: 'type', label: '汪汪', tone: 'neutral' },
],
metrics: [],

59
src/components/custom-world-home/creationWorkShelf.ts
View File

@@ -125,6 +125,8 @@ export type CreationWorkShelfItem = {
kind: CreationWorkShelfKind;
status: CreationWorkShelfStatus;
isGenerating?: boolean;
hasGenerationFailure?: boolean;
generationFailureSummary?: string;
hasUnreadUpdate?: boolean;
title: string;
summary: string;
@@ -145,6 +147,16 @@ export type CreationWorkShelfItem = {
source: CreationWorkShelfSource;
};
export type CreationWorkShelfRuntimeState = {
isGenerating?: boolean;
hasGenerationFailure?: boolean;
generationFailureSummary?: string;
hasUnreadUpdate?: boolean;
suppressPersistedGenerating?: boolean;
titleOverride?: string;
summaryOverride?: string;
};
export function buildCreationWorkShelfItems(params: {
rpgItems: CustomWorldWorkSummary[];
rpgLibraryEntries?: CustomWorldLibraryEntry<CustomWorldProfile>[];
@@ -191,7 +203,7 @@ export function buildCreationWorkShelfItems(params: {
onDeleteVisualNovel?: (item: VisualNovelWorkSummary) => void;
getItemState?: (
item: CreationWorkShelfItem,
) => { isGenerating?: boolean; hasUnreadUpdate?: boolean } | null;
) => CreationWorkShelfRuntimeState | null;
}) {
const {
rpgItems,
@@ -307,18 +319,24 @@ export function buildCreationWorkShelfItems(params: {
.map((item) => {
const state = getItemState?.(item);
const persistedIsGenerating = isPersistedCreationWorkGenerating(item);
return state
const isGenerating = Boolean(
state?.isGenerating ||
(!state?.suppressPersistedGenerating && persistedIsGenerating),
);
return state || isGenerating
? {
...item,
isGenerating: Boolean(state.isGenerating || persistedIsGenerating),
hasUnreadUpdate: state.hasUnreadUpdate,
title: state?.titleOverride ?? item.title,
summary: state?.summaryOverride ?? item.summary,
isGenerating,
hasGenerationFailure:
state?.hasGenerationFailure ?? item.hasGenerationFailure,
generationFailureSummary:
state?.generationFailureSummary ??
item.generationFailureSummary,
hasUnreadUpdate: state?.hasUnreadUpdate,
}
: persistedIsGenerating
? {
...item,
isGenerating: true,
}
: item;
: item;
})
.sort(
(left, right) =>
@@ -327,7 +345,6 @@ export function buildCreationWorkShelfItems(params: {
);
}
function mergeBarkBattleShelfSourceItems(
items: readonly BarkBattleWorkSummary[],
): BarkBattleWorkSummary[] {
@@ -376,8 +393,8 @@ function mapRpgWorkToShelfItem(
: null;
const publicWorkCode =
item.status === 'published'
? (libraryEntry?.publicWorkCode?.trim() ||
(item.profileId ? buildCustomWorldPublicWorkCode(item.profileId) : null))
? libraryEntry?.publicWorkCode?.trim() ||
(item.profileId ? buildCustomWorldPublicWorkCode(item.profileId) : null)
: null;
const badges: CreationWorkShelfBadge[] = [
buildStatusBadge(item.status),
@@ -843,7 +860,9 @@ function mapWoodenFishWorkToShelfItem(
): CreationWorkShelfItem {
const status = item.publicationStatus === 'published' ? 'published' : 'draft';
const publicWorkCode =
status === 'published' ? buildWoodenFishPublicWorkCode(item.profileId) : null;
status === 'published'
? buildWoodenFishPublicWorkCode(item.profileId)
: null;
const title = item.workTitle.trim() || '敲木鱼';
const summary =
item.workDescription.trim() || (status === 'draft' ? '未填写作品描述' : '');
@@ -884,10 +903,7 @@ function mapWoodenFishWorkToShelfItem(
};
}
function resolveAuthorDisplayName(
...sources: Array<unknown>
) {
function resolveAuthorDisplayName(...sources: Array<unknown>) {
for (const source of sources) {
const authorDisplayName =
source &&
@@ -961,7 +977,8 @@ export function resolvePuzzleLevelCoverImageSrc(
const fallbackCandidateImageSrc = normalizeCoverImageSrc(
level.candidates[level.candidates.length - 1]?.imageSrc,
);
const candidateImageSrc = selectedCandidateImageSrc || fallbackCandidateImageSrc;
const candidateImageSrc =
selectedCandidateImageSrc || fallbackCandidateImageSrc;
if (
candidateImageSrc &&
@@ -984,7 +1001,9 @@ function resolveMatch3DWorkCoverImageSrc(item: Match3DWorkSummary) {
const topLevelContainerImageSrc =
normalizeCoverImageSrc(item.generatedBackgroundAsset?.containerImageSrc) ||
normalizeCoverImageSrc(item.generatedBackgroundAsset?.containerImageObjectKey);
normalizeCoverImageSrc(
item.generatedBackgroundAsset?.containerImageObjectKey,
);
if (topLevelContainerImageSrc) {
return topLevelContainerImageSrc;
}