抓大鹅F3实现

src/components/match3d-creation/Match3DDraftReadyView.tsx

@@ -0,0 +1,105 @@
+import { ArrowLeft, Edit3, Sparkles } from 'lucide-react';
+
+import type { Match3DAgentSessionSnapshot } from '../../../packages/shared/src/contracts/match3dAgent';
+
+type Match3DDraftReadyViewProps = {
+  session: Match3DAgentSessionSnapshot;
+  isBusy?: boolean;
+  error?: string | null;
+  onBack: () => void;
+};
+
+export function Match3DDraftReadyView({
+  session,
+  isBusy = false,
+  error = null,
+  onBack,
+}: Match3DDraftReadyViewProps) {
+  const draft = session.draft;
+  const title = draft?.gameName || '抓大鹅草稿';
+
+  return (
+    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-4xl flex-col">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={onBack}
+          disabled={isBusy}
+          className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
+        >
+          <span className="inline-flex items-center gap-1.5">
+            <ArrowLeft className="h-3.5 w-3.5" />
+            返回
+          </span>
+        </button>
+      </div>
+
+      <section className="platform-subpanel min-h-0 flex-1 overflow-y-auto rounded-[1.5rem] p-4 sm:p-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+          <div className="grid aspect-square w-full max-w-[10rem] shrink-0 place-items-center rounded-[1.2rem] bg-[radial-gradient(circle_at_30%_25%,rgba(190,242,100,0.36),transparent_34%),linear-gradient(135deg,rgba(16,185,129,0.18),rgba(251,146,60,0.16))] text-emerald-800">
+            <Sparkles className="h-10 w-10" />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="text-2xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-3xl">
+              {title}
+            </div>
+            <div className="mt-2 text-sm leading-6 text-[var(--platform-text-base)]">
+              {draft?.summaryText ?? session.lastAssistantReply ?? ''}
+            </div>
+
+            {draft ? (
+              <div className="mt-5 grid gap-2 sm:grid-cols-3">
+                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
+                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
+                    题材
+                  </div>
+                  <div className="mt-1 truncate text-sm font-semibold text-[var(--platform-text-strong)]">
+                    {draft.themeText}
+                  </div>
+                </div>
+                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
+                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
+                    消除
+                  </div>
+                  <div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
+                    {draft.clearCount} 次
+                  </div>
+                </div>
+                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
+                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
+                    难度
+                  </div>
+                  <div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
+                    {draft.difficulty}
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {error ? (
+              <div className="platform-banner platform-banner--danger mt-4 rounded-[1.25rem] text-sm leading-6">
+                {error}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </section>
+
+      <div className="mt-4 flex justify-end pb-[max(0.25rem,env(safe-area-inset-bottom))]">
+        <button
+          type="button"
+          disabled
+          className="platform-button platform-button--primary cursor-not-allowed opacity-55"
+        >
+          <span className="inline-flex items-center gap-2">
+            <Edit3 className="h-4 w-4" />
+            继续编辑
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Match3DDraftReadyView;