继续收口生成页顶部返回按钮

抽出生成页共用返回按钮壳并复用共享图标按钮能力
将自定义世界生成页接入共享返回按钮壳
将汪汪声浪生成页接入共享返回按钮壳并保留禁用态
补充两个生成页返回按钮的样式与交互回归测试

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<BarkBattleImageGenerationBatchResult>(() => {}),
+    );
+
+    const { rerender } = render(
+      <BarkBattleGeneratingView
+        draft={draft}
+        isBusy
+        onBack={onBack}
+        onComplete={() => {}}
+        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(
+      <BarkBattleGeneratingView
+        draft={draft}
+        isBusy={false}
+        onBack={onBack}
+        onComplete={() => {}}
+        onError={() => {}}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: '返回编辑' }));
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
 });

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({
     <div className="relative isolate z-[1] -mx-3 -my-3 flex h-[calc(100%+1.5rem)] min-h-0 flex-col overflow-hidden bg-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-4 text-[#3d1f10] sm:mx-0 sm:my-0 sm:h-full sm:rounded-[2rem] sm:px-5 sm:pt-5 xl:px-6 xl:pb-5 xl:pt-5">
       <GenerationPageBackdrop />
       <div className="relative z-30 mx-auto mb-4 flex w-full max-w-[48rem] shrink-0 items-center justify-between gap-3 sm:mb-5">
-        <button
-          type="button"
+        <GenerationHeaderBackButton
+          label="返回编辑"
           onClick={onBack}
           disabled={isBusy}
-          className={`inline-flex items-center gap-2 rounded-full bg-transparent px-0 py-2 text-xs font-black text-[#171411] sm:text-sm ${isBusy ? 'opacity-45' : ''}`}
-        >
-          <ArrowLeft className="h-5 w-5" strokeWidth={2.6} />
-          <span className="break-keep">返回编辑</span>
-        </button>
+          disabledOpacity={0.45}
+        />
         <PlatformPillBadge
           tone="warning"
           size="xs"