diff --git a/src/components/CustomWorldGenerationView.test.tsx b/src/components/CustomWorldGenerationView.test.tsx index 3bb5ff5d..54557e3a 100644 --- a/src/components/CustomWorldGenerationView.test.tsx +++ b/src/components/CustomWorldGenerationView.test.tsx @@ -1,7 +1,8 @@ /* @vitest-environment jsdom */ +import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; -import { describe, expect, test } from 'vitest'; +import { describe, expect, test, vi } from 'vitest'; import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime'; import { CustomWorldGenerationView } from './CustomWorldGenerationView'; @@ -104,6 +105,12 @@ describe('CustomWorldGenerationView', () => { expect( screen.getByRole('button', { name: '返回创作中心' }).className, ).toContain('text-xs'); + expect( + screen.getByRole('button', { name: '返回创作中心' }).className, + ).toContain('bg-transparent'); + expect( + screen.getByRole('button', { name: '返回创作中心' }).className, + ).toContain('gap-2'); expect(screen.getByText('世界建设中')).toBeTruthy(); expect(screen.getByText('世界建设中').className).toContain('text-xs'); expect(screen.getByText('世界建设中').className).toContain( @@ -289,4 +296,29 @@ describe('CustomWorldGenerationView', () => { expect(screen.queryByText('大鱼吃小鱼题材')).toBeNull(); expect(screen.getByTestId('generation-page-background-video')).toBeTruthy(); }); + + test('keeps the shared generation back button click behavior', async () => { + const user = userEvent.setup(); + const onBack = vi.fn(); + + render( + {}} + onRetry={() => {}} + backLabel="返回创作中心" + settingDescription={null} + settingActionLabel={null} + progressTitle="大鱼吃小鱼草稿生成进度" + />, + ); + + await user.click(screen.getByRole('button', { name: '返回创作中心' })); + + expect(onBack).toHaveBeenCalledTimes(1); + }); }); diff --git a/src/components/CustomWorldGenerationView.tsx b/src/components/CustomWorldGenerationView.tsx index 44a75b4e..9c786a9c 100644 --- a/src/components/CustomWorldGenerationView.tsx +++ b/src/components/CustomWorldGenerationView.tsx @@ -1,11 +1,10 @@ -import { ArrowLeft } from 'lucide-react'; - import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime'; import type { CustomWorldStructuredAnchorEntry } from '../services/customWorldAgentGenerationProgress'; import { PlatformActionButton } from './common/PlatformActionButton'; import { PlatformPillBadge } from './common/PlatformPillBadge'; import { GenerationCurrentStepCard, + GenerationHeaderBackButton, GenerationPageBackdrop, GenerationProgressHero, } from './GenerationProgressHero'; @@ -137,14 +136,7 @@ export function CustomWorldGenerationView({
- + void; + disabled?: boolean; + disabledOpacity?: number; + className?: string; +}; + function clampGenerationProgress(value: number) { return Math.max(0, Math.min(100, Math.round(value))); } @@ -51,6 +60,34 @@ function buildGenerationRingMetrics(progressValue: number) { }; } +export function GenerationHeaderBackButton({ + label, + onClick, + disabled = false, + disabledOpacity, + className, +}: GenerationHeaderBackButtonProps) { + return ( + } + > + {label} + + ); +} + export function GenerationPageBackdrop() { const videoRef = useRef(null); diff --git a/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx b/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx index c2dae743..56358b6a 100644 --- a/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx +++ b/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx @@ -1,5 +1,6 @@ /* @vitest-environment jsdom */ +import userEvent from '@testing-library/user-event'; import { render, screen, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; @@ -87,6 +88,12 @@ describe('BarkBattleGeneratingView', () => { expect( screen.getByRole('button', { name: '返回编辑' }).className, ).toContain('text-xs'); + expect( + screen.getByRole('button', { name: '返回编辑' }).className, + ).toContain('bg-transparent'); + expect( + screen.getByRole('button', { name: '返回编辑' }).className, + ).toContain('gap-2'); expect(screen.getByText('生成中').className).toContain('text-[11px]'); expect(screen.getByText('生成中').className).toContain( 'border-[var(--platform-warm-border)]', @@ -479,4 +486,42 @@ describe('BarkBattleGeneratingView', () => { ); }); }); + + it('keeps the shared generation back button disabled state and click behavior', async () => { + const user = userEvent.setup(); + const onBack = vi.fn(); + vi.mocked(generateAllBarkBattleImageAssets).mockReturnValue( + new Promise(() => {}), + ); + + const { rerender } = render( + {}} + onError={() => {}} + />, + ); + + const busyBackButton = screen.getByRole('button', { name: '返回编辑' }); + expect(busyBackButton.getAttribute('disabled')).toBe(''); + expect(busyBackButton.style.opacity).toBe('0.45'); + + await user.click(busyBackButton); + expect(onBack).not.toHaveBeenCalled(); + + rerender( + {}} + onError={() => {}} + />, + ); + + await user.click(screen.getByRole('button', { name: '返回编辑' })); + expect(onBack).toHaveBeenCalledTimes(1); + }); }); diff --git a/src/components/bark-battle-creation/BarkBattleGeneratingView.tsx b/src/components/bark-battle-creation/BarkBattleGeneratingView.tsx index 7d7d4245..8c4d0929 100644 --- a/src/components/bark-battle-creation/BarkBattleGeneratingView.tsx +++ b/src/components/bark-battle-creation/BarkBattleGeneratingView.tsx @@ -1,4 +1,3 @@ -import { ArrowLeft } from 'lucide-react'; import { useEffect, useMemo, useRef, useState } from 'react'; import type { BarkBattleDraftConfig } from '../../../packages/shared/src/contracts/barkBattle'; @@ -15,6 +14,7 @@ import { import { PlatformPillBadge } from '../common/PlatformPillBadge'; import { GenerationCurrentStepCard, + GenerationHeaderBackButton, GenerationPageBackdrop, GenerationProgressHero, } from '../GenerationProgressHero'; @@ -367,15 +367,12 @@ export function BarkBattleGeneratingView({
- + disabledOpacity={0.45} + />