feat: add baby object match edutainment flow

src/components/edutainment-creation/BabyObjectMatchWorkspace.test.tsx

@@ -0,0 +1,47 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, test, vi } from 'vitest';
+
+import { BabyObjectMatchWorkspace } from './BabyObjectMatchWorkspace';
+
+test('baby object match workspace requires two item names before submit', async () => {
+  const user = userEvent.setup();
+  const onCreateDraft = vi.fn();
+
+  render(
+    <BabyObjectMatchWorkspace onBack={() => {}} onCreateDraft={onCreateDraft} />,
+  );
+
+  const submitButton = screen.getByRole('button', {
+    name: /生成宝贝识物草稿/u,
+  });
+  expect(submitButton).toHaveProperty('disabled', true);
+
+  await user.type(screen.getByLabelText('物品 A'), '苹果');
+  expect(submitButton).toHaveProperty('disabled', true);
+
+  await user.type(screen.getByLabelText('物品 B'), '香蕉');
+  expect(submitButton).toHaveProperty('disabled', false);
+
+  await user.click(submitButton);
+
+  expect(onCreateDraft).toHaveBeenCalledWith({
+    itemAName: '苹果',
+    itemBName: '香蕉',
+  });
+});
+
+test('baby object match workspace calls back when return button is clicked', async () => {
+  const user = userEvent.setup();
+  const onBack = vi.fn();
+
+  render(
+    <BabyObjectMatchWorkspace onBack={onBack} onCreateDraft={() => {}} />,
+  );
+
+  await user.click(screen.getByRole('button', { name: '返回' }));
+
+  expect(onBack).toHaveBeenCalledTimes(1);
+});

src/components/edutainment-creation/BabyObjectMatchWorkspace.tsx

@@ -0,0 +1,187 @@
+import { ArrowLeft, Gift, Loader2, WandSparkles } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import type { CreateBabyObjectMatchDraftRequest } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import { validateBabyObjectMatchItemNames } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+
+type BabyObjectMatchWorkspaceProps = {
+  isBusy?: boolean;
+  error?: string | null;
+  initialPayload?: CreateBabyObjectMatchDraftRequest | null;
+  onBack: () => void;
+  onCreateDraft: (payload: CreateBabyObjectMatchDraftRequest) => void;
+  showBackButton?: boolean;
+  title?: string | null;
+};
+
+type BabyObjectMatchFormState = {
+  itemAName: string;
+  itemBName: string;
+};
+
+function resolveInitialFormState(
+  initialPayload: CreateBabyObjectMatchDraftRequest | null | undefined,
+): BabyObjectMatchFormState {
+  return {
+    itemAName: initialPayload?.itemAName ?? '',
+    itemBName: initialPayload?.itemBName ?? '',
+  };
+}
+
+export function BabyObjectMatchWorkspace({
+  isBusy = false,
+  error = null,
+  initialPayload = null,
+  onBack,
+  onCreateDraft,
+  showBackButton = true,
+  title = null,
+}: BabyObjectMatchWorkspaceProps) {
+  const [formState, setFormState] = useState<BabyObjectMatchFormState>(() =>
+    resolveInitialFormState(initialPayload),
+  );
+  const appliedInitialKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const nextInitialKey = JSON.stringify(initialPayload ?? null);
+    if (appliedInitialKeyRef.current === nextInitialKey) {
+      return;
+    }
+
+    appliedInitialKeyRef.current = nextInitialKey;
+    setFormState(resolveInitialFormState(initialPayload));
+  }, [initialPayload]);
+
+  const validation = useMemo(
+    () => validateBabyObjectMatchItemNames(formState),
+    [formState],
+  );
+  const canSubmit = validation.valid && !isBusy;
+
+  const submitForm = () => {
+    if (!canSubmit) {
+      return;
+    }
+
+    onCreateDraft({
+      itemAName: validation.itemAName,
+      itemBName: validation.itemBName,
+    });
+  };
+
+  return (
+    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-hidden">
+      {showBackButton ? (
+        <div className="mb-3 flex shrink-0 items-center justify-between gap-3 sm:mb-4">
+          <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' : ''}`}
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            返回
+          </button>
+        </div>
+      ) : null}
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {title ? (
+          <div className="mb-3 shrink-0 sm:mb-5">
+            <div className="flex flex-wrap items-center gap-2">
+              <h1 className="m-0 text-3xl font-black leading-none tracking-normal text-[var(--platform-text-strong)] sm:text-7xl">
+                {title}
+              </h1>
+              <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-black text-emerald-700">
+                BETA
+              </span>
+            </div>
+          </div>
+        ) : null}
+
+        <section className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <div
+            className={`grid min-h-0 flex-1 gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(14rem,0.56fr)] ${isBusy ? 'opacity-55' : ''}`}
+          >
+            <div className="grid min-h-0 gap-3 sm:grid-cols-2 lg:grid-cols-1">
+              <label className="block min-h-0">
+                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
+                  物品 A
+                </span>
+                <input
+                  value={formState.itemAName}
+                  disabled={isBusy}
+                  placeholder=""
+                  onChange={(event) =>
+                    setFormState((current) => ({
+                      ...current,
+                      itemAName: event.target.value,
+                    }))
+                  }
+                  className="min-h-12 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-emerald-200 focus:bg-white focus:ring-2 focus:ring-emerald-100"
+                  aria-label="物品 A"
+                />
+              </label>
+              <label className="block min-h-0">
+                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
+                  物品 B
+                </span>
+                <input
+                  value={formState.itemBName}
+                  disabled={isBusy}
+                  placeholder=""
+                  onChange={(event) =>
+                    setFormState((current) => ({
+                      ...current,
+                      itemBName: event.target.value,
+                    }))
+                  }
+                  className="min-h-12 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-emerald-200 focus:bg-white focus:ring-2 focus:ring-emerald-100"
+                  aria-label="物品 B"
+                />
+              </label>
+            </div>
+
+            <div className="relative min-h-[8rem] overflow-hidden rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.78)]">
+              <div className="absolute -right-8 -top-8 h-28 w-28 rounded-full bg-emerald-200/42" />
+              <div className="absolute -bottom-10 left-6 h-24 w-24 rounded-full bg-amber-200/48" />
+              <div className="relative flex h-full min-h-[7rem] flex-col items-center justify-center gap-3 text-center">
+                <div className="grid h-14 w-14 place-items-center rounded-[1.1rem] bg-white/82 text-emerald-600 shadow-[0_12px_30px_rgba(16,185,129,0.14)]">
+                  <Gift className="h-7 w-7" />
+                </div>
+                <div className="text-lg font-black text-[var(--platform-text-strong)]">
+                  宝贝识物
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-2 shrink-0 space-y-3">
+            {error ? (
+              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
+                {error}
+              </div>
+            ) : null}
+          </div>
+        </section>
+      </div>
+
+      <div className="mt-2 flex shrink-0 justify-center pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:mt-3">
+        <button
+          type="button"
+          disabled={!canSubmit}
+          onClick={submitForm}
+          className={`platform-button platform-button--primary min-h-10 px-4 py-2 text-sm sm:min-h-11 sm:px-5 ${!canSubmit ? 'cursor-not-allowed opacity-55' : ''}`}
+        >
+          <span className="inline-flex items-center justify-center gap-2">
+            {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+            <WandSparkles className="h-4 w-4" />
+            <span>生成宝贝识物草稿</span>
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default BabyObjectMatchWorkspace;