继续沉淀结果页返回按钮
新增共享 PlatformBackActionButton 承接结果页轻量返回入口 将拼图方洞拼消消视觉小说等结果页返回按钮收口到共享组件 将拼消消跳一跳敲木鱼宝贝识物结果页返回按钮收口到共享组件 补充对应测试并更新 PlatformUiKit 收口计划与共享决策记录
This commit is contained in:
35
src/components/common/PlatformBackActionButton.test.tsx
Normal file
35
src/components/common/PlatformBackActionButton.test.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { expect, test } from 'vitest';
|
||||
|
||||
import { PlatformBackActionButton } from './PlatformBackActionButton';
|
||||
|
||||
test('renders compact back action button by default', () => {
|
||||
render(<PlatformBackActionButton />);
|
||||
|
||||
const button = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(button.className).toContain('platform-button--ghost');
|
||||
expect(button.className).toContain('min-h-0');
|
||||
expect(button.className).toContain('text-[11px]');
|
||||
expect(button.className).toContain('gap-1.5');
|
||||
expect(button.querySelector('svg')?.className.baseVal).toContain('h-3.5');
|
||||
});
|
||||
|
||||
test('supports regular variant and editor dark surface', () => {
|
||||
render(
|
||||
<PlatformBackActionButton
|
||||
label="返回编辑"
|
||||
variant="regular"
|
||||
surface="editorDark"
|
||||
/>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: '返回编辑' });
|
||||
|
||||
expect(button.className).toContain('platform-action-button--editor-dark');
|
||||
expect(button.className).toContain('text-sm');
|
||||
expect(button.className).toContain('gap-2');
|
||||
expect(button.querySelector('svg')?.className.baseVal).toContain('h-4');
|
||||
});
|
||||
58
src/components/common/PlatformBackActionButton.tsx
Normal file
58
src/components/common/PlatformBackActionButton.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import type { ButtonHTMLAttributes } from 'react';
|
||||
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
import { PlatformActionButton } from './PlatformActionButton';
|
||||
import type { PlatformActionButtonSurface } from './platformActionButtonModel';
|
||||
|
||||
type PlatformBackActionButtonVariant = 'compact' | 'regular';
|
||||
|
||||
type PlatformBackActionButtonProps = Omit<
|
||||
ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
'children'
|
||||
> & {
|
||||
label?: string;
|
||||
variant?: PlatformBackActionButtonVariant;
|
||||
surface?: PlatformActionButtonSurface;
|
||||
};
|
||||
|
||||
const VARIANT_CLASS: Record<PlatformBackActionButtonVariant, string> = {
|
||||
compact: 'gap-1.5 py-1.5 text-[11px]',
|
||||
regular: 'gap-2 py-2 text-sm',
|
||||
};
|
||||
|
||||
const ICON_CLASS: Record<PlatformBackActionButtonVariant, string> = {
|
||||
compact: 'h-3.5 w-3.5',
|
||||
regular: 'h-4 w-4',
|
||||
};
|
||||
|
||||
/**
|
||||
* 平台轻量返回动作按钮。
|
||||
* 统一结果页、工作台等白底场景里的“左箭头 + 返回文案”按钮骨架。
|
||||
*/
|
||||
export function PlatformBackActionButton({
|
||||
label = '返回',
|
||||
variant = 'compact',
|
||||
surface = 'platform',
|
||||
className,
|
||||
...buttonProps
|
||||
}: PlatformBackActionButtonProps) {
|
||||
return (
|
||||
<PlatformActionButton
|
||||
{...buttonProps}
|
||||
surface={surface}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className={[
|
||||
'min-h-0 self-start',
|
||||
VARIANT_CLASS[variant],
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
<ArrowLeft className={ICON_CLASS[variant]} />
|
||||
{label}
|
||||
</PlatformActionButton>
|
||||
);
|
||||
}
|
||||
@@ -235,3 +235,29 @@ test('baby object result blocks placeholder assets and exposes regeneration', as
|
||||
expect(onPublish).not.toHaveBeenCalled();
|
||||
expect(onStartTestRun).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('baby object result header back button reuses shared compact back action button', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<BabyObjectMatchResultView
|
||||
draft={createGeneratedDraft()}
|
||||
isBusy
|
||||
onBack={onBack}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-[11px]');
|
||||
expect(backButton.className).toContain('gap-1.5');
|
||||
expect(backButton.className).toContain('px-3');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-3.5');
|
||||
expect((backButton as HTMLButtonElement).disabled).toBe(true);
|
||||
|
||||
await user.click(backButton);
|
||||
|
||||
expect(onBack).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
Play,
|
||||
@@ -16,6 +15,7 @@ import {
|
||||
normalizeBabyObjectMatchTags,
|
||||
} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
||||
import { PlatformOverlayBadge } from '../common/PlatformOverlayBadge';
|
||||
import { PlatformPillBadge } from '../common/PlatformPillBadge';
|
||||
@@ -87,16 +87,11 @@ export function BabyObjectMatchResultView({
|
||||
<div className="platform-page-stage platform-remap-surface flex h-full min-h-0 flex-col overflow-hidden px-3 pb-3 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-4 xl:pt-4">
|
||||
<div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col">
|
||||
<div className="mb-3 flex shrink-0 items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
disabled={isBusy}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 gap-2 px-3 py-1.5 text-[11px]"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
className="px-3"
|
||||
/>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<PlatformPillBadge
|
||||
tone={isPublished ? 'success' : 'neutral'}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { beforeEach, expect, test, vi } from 'vitest';
|
||||
|
||||
import type { JumpHopWorkProfileResponse } from '../../../packages/shared/src/contracts/jumpHop';
|
||||
@@ -290,6 +290,32 @@ test('跳一跳草稿结果页不请求公开排行榜', () => {
|
||||
expect(screen.queryByText('排行榜')).toBeNull();
|
||||
});
|
||||
|
||||
test('跳一跳结果页头部返回按钮复用共享 back action button', () => {
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<JumpHopResultView
|
||||
profile={buildProfile()}
|
||||
onBack={onBack}
|
||||
onEdit={() => {}}
|
||||
onStartTestRun={() => {}}
|
||||
onPublish={() => {}}
|
||||
onRegenerateTiles={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-sm');
|
||||
expect(backButton.className).toContain('gap-2');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-4');
|
||||
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(onBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
function buildProfile(
|
||||
options: {
|
||||
publicationStatus?: JumpHopWorkProfileResponse['summary']['publicationStatus'];
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
} from '../../services/jump-hop/jumpHopRuntimeModel';
|
||||
import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformEmptyState } from '../common/PlatformEmptyState';
|
||||
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
||||
import { PlatformMediaTileGrid } from '../common/PlatformMediaTileGrid';
|
||||
@@ -331,15 +332,10 @@ export function JumpHopResultView({
|
||||
return (
|
||||
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-y-auto overscroll-contain px-3 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-3 sm:px-4 sm:pt-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 gap-2 py-2 text-sm"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
variant="regular"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<PlatformActionButton
|
||||
onClick={onRegenerateTiles}
|
||||
|
||||
@@ -148,6 +148,31 @@ function createReadyGeneratedItemAsset(index: number) {
|
||||
}
|
||||
|
||||
describe('Match3DResultView', () => {
|
||||
test('结果页头部返回按钮复用共享 compact back action button', () => {
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<Match3DResultView
|
||||
profile={createProfile()}
|
||||
onBack={onBack}
|
||||
onStartTestRun={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-[11px]');
|
||||
expect(backButton.className).toContain('gap-1.5');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain(
|
||||
'h-3.5',
|
||||
);
|
||||
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(onBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('标准白底面板使用 PlatformSubpanel lg 外壳', async () => {
|
||||
match3dSpritesheetParser.loadMatch3DSpritesheetAssetRegions.mockResolvedValue(
|
||||
Array.from({ length: 10 }, (_, index) => ({
|
||||
|
||||
@@ -53,6 +53,7 @@ import {
|
||||
import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenceImage';
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
import { PlatformIconButton } from '../common/PlatformIconButton';
|
||||
@@ -1354,18 +1355,11 @@ function Match3DResultHeader({
|
||||
|
||||
return (
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
disabled={isBusy}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 self-start py-1.5 text-[11px]"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
返回
|
||||
</span>
|
||||
</PlatformActionButton>
|
||||
variant="compact"
|
||||
/>
|
||||
{badge}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -222,3 +222,29 @@ test('结果页在素材未发布就绪时禁用发布,且不写入规则说
|
||||
).toBe(true);
|
||||
expect(screen.queryByText(/规则|玩法说明|拖动卡片|拼接完整/u)).toBeNull();
|
||||
});
|
||||
|
||||
test('结果页头部返回按钮复用共享 back action button', () => {
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<PuzzleClearResultView
|
||||
profile={createProfile()}
|
||||
onBack={onBack}
|
||||
onEdit={vi.fn()}
|
||||
onStartTestRun={vi.fn()}
|
||||
onPublish={vi.fn()}
|
||||
onRegenerateAtlas={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-sm');
|
||||
expect(backButton.className).toContain('gap-2');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-4');
|
||||
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(onBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ArrowLeft, Loader2, Play, RefreshCcw, Send } from 'lucide-react';
|
||||
import { Loader2, Play, RefreshCcw, Send } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import type {
|
||||
@@ -6,6 +6,7 @@ import type {
|
||||
PuzzleClearWorkProfileResponse,
|
||||
} from '../../../packages/shared/src/contracts/puzzleClear';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
||||
import { PlatformMediaTileGrid } from '../common/PlatformMediaTileGrid';
|
||||
import { PlatformStatGrid } from '../common/PlatformStatGrid';
|
||||
@@ -74,15 +75,10 @@ export function PuzzleClearResultView({
|
||||
return (
|
||||
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col px-3 pb-3 pt-3 sm:px-4 sm:pt-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 gap-2 py-2 text-sm"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
variant="regular"
|
||||
/>
|
||||
<PlatformActionButton
|
||||
onClick={onRegenerateAtlas}
|
||||
disabled={isBusy}
|
||||
|
||||
@@ -100,6 +100,29 @@ test('renders missing draft notice with shared PlatformEmptyState chrome', () =>
|
||||
expect(noticePanel?.className).toContain('text-[var(--platform-text-soft)]');
|
||||
});
|
||||
|
||||
test('renders shared compact back action button in result header', () => {
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<PuzzleResultView
|
||||
session={createSession()}
|
||||
onBack={onBack}
|
||||
onExecuteAction={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-[11px]');
|
||||
expect(backButton.className).toContain('gap-1.5');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-3.5');
|
||||
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(onBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
function createSession(
|
||||
overrides: Partial<PuzzleAgentSessionSnapshot> = {},
|
||||
): PuzzleAgentSessionSnapshot {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
MessageSquareText,
|
||||
@@ -23,6 +22,7 @@ import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenc
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { CreativeImageInputPanel } from '../common/CreativeImageInputPanel';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformEmptyState } from '../common/PlatformEmptyState';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
import { PlatformIconBadge } from '../common/PlatformIconBadge';
|
||||
@@ -425,18 +425,11 @@ function PuzzleResultHeader({
|
||||
|
||||
return (
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
disabled={isBusy}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 self-start py-1.5 text-[11px]"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
返回
|
||||
</span>
|
||||
</PlatformActionButton>
|
||||
variant="compact"
|
||||
/>
|
||||
{autoSaveBadge}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -98,6 +98,12 @@ test('square hole result view exposes test run and publish actions', async () =>
|
||||
|
||||
expect(screen.getByRole('button', { name: '试玩' })).toBeTruthy();
|
||||
expect(screen.getByRole('button', { name: '发布' })).toBeTruthy();
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-[11px]');
|
||||
expect(backButton.className).toContain('gap-1.5');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-3.5');
|
||||
|
||||
await user.clear(screen.getByLabelText('游戏名称'));
|
||||
await user.type(screen.getByLabelText('游戏名称'), '几何新挑战');
|
||||
@@ -109,7 +115,7 @@ test('square hole result view exposes test run and publish actions', async () =>
|
||||
await user.type(holePromptInput, '圆形洞口贴图');
|
||||
await user.click(screen.getByRole('button', { name: '试玩' }));
|
||||
await user.click(screen.getByRole('button', { name: '发布' }));
|
||||
await user.click(screen.getByRole('button', { name: '返回' }));
|
||||
await user.click(backButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onStartTestRun).toHaveBeenCalledTimes(1);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
ImagePlus,
|
||||
Images,
|
||||
@@ -30,6 +29,7 @@ import {
|
||||
} from '../../services/square-hole-works';
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
import { PlatformIconButton } from '../common/PlatformIconButton';
|
||||
@@ -467,16 +467,11 @@ function SquareHoleResultHeader({
|
||||
|
||||
return (
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
disabled={isBusy}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 self-start gap-1.5 px-3 py-1.5 text-[11px]"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
variant="compact"
|
||||
/>
|
||||
{badge}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -42,6 +42,31 @@ test('visual novel profile tab uses PlatformSubpanel shells', () => {
|
||||
expect(workTitlePanel?.className).toContain('rounded-[1.35rem]');
|
||||
});
|
||||
|
||||
test('visual novel result header back button reuses shared compact back action button', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<VisualNovelResultView
|
||||
draft={mockVisualNovelDraft}
|
||||
onBack={onBack}
|
||||
isBusy
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-[11px]');
|
||||
expect(backButton.className).toContain('gap-1.5');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-3.5');
|
||||
expect((backButton as HTMLButtonElement).disabled).toBe(true);
|
||||
|
||||
await user.click(backButton);
|
||||
|
||||
expect(onBack).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('visual novel profile media previews use PlatformMediaFrame aspects', () => {
|
||||
const draftWithCover = {
|
||||
...mockVisualNovelDraft,
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
ImagePlus,
|
||||
Images,
|
||||
@@ -42,6 +41,7 @@ import {
|
||||
} from '../../services/visual-novel-creation';
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
|
||||
import { PlatformEmptyState } from '../common/PlatformEmptyState';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
@@ -2058,16 +2058,11 @@ export function VisualNovelResultView({
|
||||
return (
|
||||
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full flex-col xl:max-w-[min(100%,96rem)]">
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
disabled={isBusy}
|
||||
className="min-h-0 self-start px-3 py-1.5 text-[11px]"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
variant="compact"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<PlatformIconButton
|
||||
disabled={isBusy}
|
||||
|
||||
@@ -115,3 +115,29 @@ test('结果页支持在试玩前编辑并保存主题信息', async () => {
|
||||
});
|
||||
await waitFor(() => expect(onStartTestRun).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
|
||||
test('结果页头部返回按钮复用共享 back action button', () => {
|
||||
const onBack = vi.fn();
|
||||
|
||||
render(
|
||||
<WoodenFishResultView
|
||||
profile={createDraft()}
|
||||
onBack={onBack}
|
||||
onEdit={() => {}}
|
||||
onStartTestRun={() => {}}
|
||||
onPublish={() => {}}
|
||||
onRegenerateHitObject={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const backButton = screen.getByRole('button', { name: '返回' });
|
||||
|
||||
expect(backButton.className).toContain('platform-button--ghost');
|
||||
expect(backButton.className).toContain('text-sm');
|
||||
expect(backButton.className).toContain('gap-2');
|
||||
expect(backButton.querySelector('svg')?.className.baseVal).toContain('h-4');
|
||||
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(onBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
WOODEN_FISH_DEFAULT_HIT_SOUND_ASSET,
|
||||
} from '../../services/wooden-fish/woodenFishDefaults';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
|
||||
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
||||
import { PlatformPillBadge } from '../common/PlatformPillBadge';
|
||||
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
||||
@@ -206,15 +207,10 @@ export function WoodenFishResultView({
|
||||
return (
|
||||
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col px-3 pb-3 pt-3 sm:px-4 sm:pt-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<PlatformActionButton
|
||||
<PlatformBackActionButton
|
||||
onClick={onBack}
|
||||
tone="ghost"
|
||||
size="xs"
|
||||
className="min-h-0 gap-2 py-2 text-sm"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
返回
|
||||
</PlatformActionButton>
|
||||
variant="regular"
|
||||
/>
|
||||
<PlatformActionButton
|
||||
onClick={onRegenerateHitObject}
|
||||
disabled={isBusy}
|
||||
|
||||
Reference in New Issue
Block a user