fix: polish bark battle creation flow

src/components/bark-battle-creation/BarkBattleConfigEditor.tsx

@@ -1,8 +1,9 @@
 import { ArrowLeft, Loader2, Play } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { BarkBattleConfigEditorPayload } from '../../../packages/shared/src/contracts/barkBattle';
 import type { BarkBattleDifficultyPreset } from '../../../packages/shared/src/contracts/barkBattle';
+import { buildBarkBattleDefaultOnomatopoeia } from '../../games/bark-battle/application/BarkBattleConfig';
 import { BarkBattlePreviewCard } from './BarkBattlePreviewCard';
 
 export type BarkBattleConfigEditorProps = {
@@ -14,17 +15,26 @@ export type BarkBattleConfigEditorProps = {
   title?: string | null;
 };
 
-const THEME_OPTIONS = [
-  { value: 'sunny-yard', label: '阳光院子' },
-  { value: 'neon-park', label: '霓虹公园' },
-  { value: 'moonlight-rooftop', label: '月光天台' },
-];
-
 const DIFFICULTY_OPTIONS: Array<{ value: BarkBattleDifficultyPreset; label: string }> = [
   { value: 'easy', label: '轻松' },
   { value: 'normal', label: '标准' },
   { value: 'hard', label: '硬核' },
 ];
+const FIELD_LABEL_CLASS =
+  'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]';
+const ACCENT_FIELD_LABEL_CLASS =
+  'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm';
+const DEFAULT_THEME_DESCRIPTION = '阳光草坪上的圆形声浪擂台';
+const DEFAULT_PLAYER_IMAGE_DESCRIPTION = '戴红色围巾的勇敢小狗';
+const DEFAULT_OPPONENT_IMAGE_DESCRIPTION = '戴蓝色头带的活力小狗';
+
+function buildDefaultOnomatopoeiaText(params: {
+  themeDescription: string;
+  playerImageDescription: string;
+  opponentImageDescription: string;
+}) {
+  return buildBarkBattleDefaultOnomatopoeia(params).join('\n');
+}
 
 export function BarkBattleConfigEditor({
   isBusy = false,
@@ -36,46 +46,72 @@ export function BarkBattleConfigEditor({
 }: BarkBattleConfigEditorProps) {
   const [title, setTitle] = useState('我的声浪竞技场');
   const [description, setDescription] = useState('');
-  const [themePreset, setThemePreset] = useState('sunny-yard');
-  const [playerDogSkinPreset, setPlayerDogSkinPreset] = useState('主角');
-  const [opponentDogSkinPreset, setOpponentDogSkinPreset] = useState('对手');
-  const [playerCharacterImageSrc, setPlayerCharacterImageSrc] = useState('');
-  const [opponentCharacterImageSrc, setOpponentCharacterImageSrc] = useState('');
-  const [uiBackgroundImageSrc, setUiBackgroundImageSrc] = useState('');
-  const [barkSoundSrc, setBarkSoundSrc] = useState('');
+  const [themeDescription, setThemeDescription] = useState(
+    DEFAULT_THEME_DESCRIPTION,
+  );
+  const [playerImageDescription, setPlayerImageDescription] = useState(
+    DEFAULT_PLAYER_IMAGE_DESCRIPTION,
+  );
+  const [opponentImageDescription, setOpponentImageDescription] = useState(
+    DEFAULT_OPPONENT_IMAGE_DESCRIPTION,
+  );
+  const [isOnomatopoeiaCustomized, setIsOnomatopoeiaCustomized] =
+    useState(false);
+  const [onomatopoeiaText, setOnomatopoeiaText] = useState(() =>
+    buildDefaultOnomatopoeiaText({
+      themeDescription: DEFAULT_THEME_DESCRIPTION,
+      playerImageDescription: DEFAULT_PLAYER_IMAGE_DESCRIPTION,
+      opponentImageDescription: DEFAULT_OPPONENT_IMAGE_DESCRIPTION,
+    }),
+  );
   const [difficultyPreset, setDifficultyPreset] = useState<BarkBattleDifficultyPreset>('normal');
   const [localError, setLocalError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (isOnomatopoeiaCustomized) {
+      return;
+    }
+    setOnomatopoeiaText(
+      buildDefaultOnomatopoeiaText({
+        themeDescription,
+        playerImageDescription,
+        opponentImageDescription,
+      }),
+    );
+  }, [
+    isOnomatopoeiaCustomized,
+    themeDescription,
+    playerImageDescription,
+    opponentImageDescription,
+  ]);
+
+  const onomatopoeia = useMemo(
+    () =>
+      onomatopoeiaText
+        .split(/[\n,，、/|]+/u)
+        .map((word) => word.trim())
+        .filter(Boolean)
+        .slice(0, 24),
+    [onomatopoeiaText],
+  );
+
   const payload = useMemo<BarkBattleConfigEditorPayload>(
     () => ({
       title: title.trim(),
       description: description.trim(),
-      themePreset,
-      playerDogSkinPreset,
-      opponentDogSkinPreset,
-      ...(playerCharacterImageSrc.trim()
-        ? { playerCharacterImageSrc: playerCharacterImageSrc.trim() }
-        : {}),
-      ...(opponentCharacterImageSrc.trim()
-        ? { opponentCharacterImageSrc: opponentCharacterImageSrc.trim() }
-        : {}),
-      ...(uiBackgroundImageSrc.trim()
-        ? { uiBackgroundImageSrc: uiBackgroundImageSrc.trim() }
-        : {}),
-      ...(barkSoundSrc.trim() ? { barkSoundSrc: barkSoundSrc.trim() } : {}),
+      themeDescription: themeDescription.trim(),
+      playerImageDescription: playerImageDescription.trim(),
+      opponentImageDescription: opponentImageDescription.trim(),
+      onomatopoeia,
       difficultyPreset,
-      leaderboardEnabled: true,
     }),
     [
       title,
       description,
-      themePreset,
-      playerDogSkinPreset,
-      opponentDogSkinPreset,
-      playerCharacterImageSrc,
-      opponentCharacterImageSrc,
-      uiBackgroundImageSrc,
-      barkSoundSrc,
+      themeDescription,
+      playerImageDescription,
+      opponentImageDescription,
+      onomatopoeia,
       difficultyPreset,
     ],
   );
@@ -87,6 +123,14 @@ export function BarkBattleConfigEditor({
       setLocalError('请先填写作品标题');
       return;
     }
+    if (!payload.themeDescription) {
+      setLocalError('请先填写主题/场景描述');
+      return;
+    }
+    if (!payload.playerImageDescription || !payload.opponentImageDescription) {
+      setLocalError('请先填写双方形象描述');
+      return;
+    }
     setLocalError(null);
     void action(payload);
   };
@@ -94,7 +138,7 @@ export function BarkBattleConfigEditor({
 
   return (
     <section
-      className="platform-remap-surface mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col overflow-y-auto overscroll-y-contain pr-0.5"
+      className="platform-remap-surface mx-auto flex min-h-full w-full max-w-5xl flex-col overflow-visible lg:min-h-0 lg:flex-1 lg:overflow-y-auto lg:overscroll-y-contain lg:pr-0.5"
       aria-label="汪汪声浪轻配置编辑器"
     >
       {showBackButton && onBack ? (
@@ -113,7 +157,7 @@ export function BarkBattleConfigEditor({
         </div>
       ) : null}
 
-      <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex min-h-0 flex-col lg:flex-1">
         {headingTitle ? (
           <div className="mb-3 shrink-0 sm:mb-5">
             <div className="flex flex-wrap items-center gap-2">
@@ -128,13 +172,11 @@ export function BarkBattleConfigEditor({
         ) : null}
 
         <div
-          className={`grid flex-1 gap-3 lg:grid-cols-[minmax(0,1.12fr)_minmax(17rem,0.88fr)] ${isBusy ? 'opacity-55' : ''}`}
+          className={`grid gap-3 lg:flex-1 lg:grid-cols-[minmax(0,1.12fr)_minmax(17rem,0.88fr)] ${isBusy ? 'opacity-55' : ''}`}
         >
           <div className="flex flex-col gap-3 pr-0 lg:pr-1">
             <label className="block shrink-0">
-              <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                作品标题
-              </span>
+              <span className={FIELD_LABEL_CLASS}>作品标题</span>
               <input
                 value={title}
                 disabled={isBusy}
@@ -146,9 +188,7 @@ export function BarkBattleConfigEditor({
             </label>
 
             <label className="block shrink-0">
-              <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                简介
-              </span>
+              <span className={FIELD_LABEL_CLASS}>简介</span>
               <textarea
                 value={description}
                 disabled={isBusy}
@@ -162,28 +202,7 @@ export function BarkBattleConfigEditor({
 
             <div className="grid shrink-0 gap-2.5 sm:grid-cols-2">
               <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  主题背景
-                </span>
-                <select
-                  value={themePreset}
-                  disabled={isBusy}
-                  onChange={(event) => setThemePreset(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-black text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  aria-label="主题背景"
-                >
-                  {THEME_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-
-              <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  难度预设
-                </span>
+                <span className={FIELD_LABEL_CLASS}>难度预设</span>
                 <select
                   value={difficultyPreset}
                   disabled={isBusy}
@@ -202,92 +221,64 @@ export function BarkBattleConfigEditor({
                   ))}
                 </select>
               </label>
-
-              <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  玩家角色设定
-                </span>
-                <input
-                  value={playerDogSkinPreset}
-                  disabled={isBusy}
-                  onChange={(event) => setPlayerDogSkinPreset(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-black text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  aria-label="玩家角色设定"
-                />
-              </label>
-
-              <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  对手角色设定
-                </span>
-                <input
-                  value={opponentDogSkinPreset}
-                  disabled={isBusy}
-                  onChange={(event) => setOpponentDogSkinPreset(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-black text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  aria-label="对手角色设定"
-                />
-              </label>
             </div>
 
+            <label className="block shrink-0">
+              <span className={ACCENT_FIELD_LABEL_CLASS}>
+                主题/场景描述
+              </span>
+              <textarea
+                value={themeDescription}
+                disabled={isBusy}
+                onChange={(event) => setThemeDescription(event.target.value)}
+                className="h-[5.5rem] min-h-[5.5rem] w-full resize-none rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base leading-6 text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
+                maxLength={240}
+                placeholder=""
+                aria-label="主题/场景描述"
+              />
+            </label>
+
             <div className="grid shrink-0 gap-2.5 sm:grid-cols-2">
               <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  玩家形象
-                </span>
-                <input
-                  value={playerCharacterImageSrc}
+                <span className={FIELD_LABEL_CLASS}>玩家形象描述</span>
+                <textarea
+                  value={playerImageDescription}
                   disabled={isBusy}
-                  onChange={(event) => setPlayerCharacterImageSrc(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  placeholder=""
-                  aria-label="玩家形象"
+                  onChange={(event) => setPlayerImageDescription(event.target.value)}
+                  className="h-[5rem] min-h-[5rem] w-full resize-none rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm font-semibold leading-6 text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
+                  maxLength={220}
+                  aria-label="玩家形象描述"
                 />
               </label>
 
               <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  对手形象
-                </span>
-                <input
-                  value={opponentCharacterImageSrc}
+                <span className={FIELD_LABEL_CLASS}>对手形象描述</span>
+                <textarea
+                  value={opponentImageDescription}
                   disabled={isBusy}
-                  onChange={(event) => setOpponentCharacterImageSrc(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  placeholder=""
-                  aria-label="对手形象"
-                />
-              </label>
-
-              <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  UI背景
-                </span>
-                <input
-                  value={uiBackgroundImageSrc}
-                  disabled={isBusy}
-                  onChange={(event) => setUiBackgroundImageSrc(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  placeholder=""
-                  aria-label="UI背景"
-                />
-              </label>
-
-              <label className="block">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  狗叫音效
-                </span>
-                <input
-                  value={barkSoundSrc}
-                  disabled={isBusy}
-                  onChange={(event) => setBarkSoundSrc(event.target.value)}
-                  className="h-11 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 text-sm font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
-                  placeholder=""
-                  aria-label="狗叫音效"
+                  onChange={(event) => setOpponentImageDescription(event.target.value)}
+                  className="h-[5rem] min-h-[5rem] w-full resize-none rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm font-semibold leading-6 text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
+                  maxLength={220}
+                  aria-label="对手形象描述"
                 />
               </label>
             </div>
 
+            <label className="block shrink-0">
+              <span className={ACCENT_FIELD_LABEL_CLASS}>拟声词</span>
+              <textarea
+                value={onomatopoeiaText}
+                disabled={isBusy}
+                onChange={(event) => {
+                  setIsOnomatopoeiaCustomized(true);
+                  setOnomatopoeiaText(event.target.value);
+                }}
+                className="h-[6.5rem] min-h-[6.5rem] w-full resize-none rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm font-black leading-6 text-[var(--platform-text-strong)] outline-none transition focus:border-rose-200 focus:bg-white focus:ring-2 focus:ring-rose-100"
+                maxLength={260}
+                aria-label="拟声词"
+              />
+            </label>
+
             {visibleError ? (
               <div className="platform-banner platform-banner--danger shrink-0 rounded-2xl text-sm leading-6">
                 {visibleError}
@@ -299,7 +290,7 @@ export function BarkBattleConfigEditor({
         </div>
       </div>
 
-      <div className="mt-3 flex shrink-0 flex-wrap justify-center gap-2 pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:mt-4">
+      <div className="mt-4 flex shrink-0 flex-wrap justify-center gap-2 pb-[calc(env(safe-area-inset-bottom,0px)+0.75rem)] sm:mt-4 lg:pb-[max(0.25rem,env(safe-area-inset-bottom))]">
         <button
           type="button"
           disabled={isBusy}