feat: add baby object match edutainment flow

2026-05-12 16:08:59 +08:00
parent cf074837a4
commit d41f260a2a
58 changed files with 5628 additions and 466 deletions
--- a/src/components/edutainment-result/BabyObjectMatchResultView.test.tsx
+++ b/src/components/edutainment-result/BabyObjectMatchResultView.test.tsx
@@ -0,0 +1,105 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, test, vi } from 'vitest';
+
+import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import {
+  BABY_OBJECT_MATCH_EDUTAINMENT_TAG,
+  BABY_OBJECT_MATCH_TEMPLATE_ID,
+  BABY_OBJECT_MATCH_TEMPLATE_NAME,
+} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import { BabyObjectMatchResultView } from './BabyObjectMatchResultView';
+
+vi.mock('../ResolvedAssetImage', () => ({
+  ResolvedAssetImage: ({
+    src,
+    alt,
+    className,
+  }: {
+    src?: string | null;
+    alt?: string;
+    className?: string;
+  }) => (src ? <img src={src} alt={alt} className={className} /> : null),
+}));
+
+function createDraft(overrides: Partial<BabyObjectMatchDraft> = {}) {
+  const draft: BabyObjectMatchDraft = {
+    draftId: 'baby-object-draft-1',
+    profileId: 'baby-object-profile-1',
+    templateId: BABY_OBJECT_MATCH_TEMPLATE_ID,
+    templateName: BABY_OBJECT_MATCH_TEMPLATE_NAME,
+    workTitle: '宝贝识物',
+    workDescription: '苹果和香蕉识物分类',
+    itemNames: ['苹果', '香蕉'],
+    itemAssets: [
+      {
+        itemId: 'baby-object-item-1',
+        itemName: '苹果',
+        imageSrc: 'data:image/svg+xml;utf8,a',
+        assetObjectId: null,
+        generationProvider: 'placeholder',
+        prompt: '苹果',
+      },
+      {
+        itemId: 'baby-object-item-2',
+        itemName: '香蕉',
+        imageSrc: 'data:image/svg+xml;utf8,b',
+        assetObjectId: null,
+        generationProvider: 'placeholder',
+        prompt: '香蕉',
+      },
+    ],
+    themeTags: ['宝贝识物'],
+    publicationStatus: 'draft',
+    createdAt: '2026-05-11T00:00:00.000Z',
+    updatedAt: '2026-05-11T00:00:00.000Z',
+    publishedAt: null,
+    ...overrides,
+  };
+
+  return draft;
+}
+
+test('baby object result publishes with exact edutainment tag', async () => {
+  const user = userEvent.setup();
+  const onPublish = vi.fn();
+
+  render(
+    <BabyObjectMatchResultView
+      draft={createDraft()}
+      onBack={() => {}}
+      onPublish={onPublish}
+    />,
+  );
+
+  await user.click(screen.getByRole('button', { name: '发布' }));
+
+  expect(onPublish).toHaveBeenCalledTimes(1);
+  expect(onPublish.mock.calls[0]?.[0].themeTags[0]).toBe(
+    BABY_OBJECT_MATCH_EDUTAINMENT_TAG,
+  );
+  expect(onPublish.mock.calls[0]?.[0].themeTags).toContain('宝贝识物');
+});
+
+test('baby object result exposes save and test run actions', async () => {
+  const user = userEvent.setup();
+  const onSaveDraft = vi.fn();
+  const onStartTestRun = vi.fn();
+
+  render(
+    <BabyObjectMatchResultView
+      draft={createDraft()}
+      onBack={() => {}}
+      onSaveDraft={onSaveDraft}
+      onStartTestRun={onStartTestRun}
+    />,
+  );
+
+  await user.click(screen.getByRole('button', { name: '保存草稿' }));
+  await user.click(screen.getByRole('button', { name: '试玩' }));
+
+  expect(onSaveDraft).toHaveBeenCalledTimes(1);
+  expect(onStartTestRun).toHaveBeenCalledTimes(1);
+});
--- a/src/components/edutainment-result/BabyObjectMatchResultView.tsx
+++ b/src/components/edutainment-result/BabyObjectMatchResultView.tsx
@@ -0,0 +1,166 @@
+import { ArrowLeft, CheckCircle2, Loader2, Play, Save, Tag } from 'lucide-react';
+import { useMemo } from 'react';
+
+import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import {
+  BABY_OBJECT_MATCH_EDUTAINMENT_TAG,
+  hasBabyObjectMatchRequiredTag,
+  normalizeBabyObjectMatchTags,
+} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import { ResolvedAssetImage } from '../ResolvedAssetImage';
+
+type BabyObjectMatchResultViewProps = {
+  draft: BabyObjectMatchDraft;
+  isBusy?: boolean;
+  error?: string | null;
+  onBack: () => void;
+  onSaveDraft?: (draft: BabyObjectMatchDraft) => void;
+  onPublish?: (draft: BabyObjectMatchDraft) => void;
+  onStartTestRun?: (draft: BabyObjectMatchDraft) => void;
+};
+
+function normalizeDraftForAction(draft: BabyObjectMatchDraft) {
+  return {
+    ...draft,
+    themeTags: normalizeBabyObjectMatchTags(draft.themeTags),
+    updatedAt: new Date().toISOString(),
+  };
+}
+
+export function BabyObjectMatchResultView({
+  draft,
+  isBusy = false,
+  error = null,
+  onBack,
+  onSaveDraft,
+  onPublish,
+  onStartTestRun,
+}: BabyObjectMatchResultViewProps) {
+  const normalizedDraft = useMemo(() => normalizeDraftForAction(draft), [draft]);
+  const publishReady =
+    normalizedDraft.itemNames.every((itemName) => itemName.trim()) &&
+    normalizedDraft.itemAssets.every((asset) => asset.imageSrc.trim()) &&
+    hasBabyObjectMatchRequiredTag(normalizedDraft.themeTags);
+  const isPublished = normalizedDraft.publicationStatus === 'published';
+
+  return (
+    <div className="platform-page-stage platform-remap-surface flex h-full min-h-0 flex-col overflow-hidden px-3 pb-3 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-4 xl:pt-4">
+      <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col">
+        <div className="mb-3 flex shrink-0 items-center justify-between gap-3">
+          <button
+            type="button"
+            onClick={onBack}
+            disabled={isBusy}
+            className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            返回
+          </button>
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-black text-emerald-700">
+              {isPublished ? '已发布' : '草稿'}
+            </span>
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto pr-0.5">
+          <section className="grid gap-3 lg:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+            <div className="rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/68 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.74)]">
+              <div className="text-sm font-black text-[var(--platform-text-soft)]">
+                模板
+              </div>
+              <h1 className="mt-2 m-0 text-3xl font-black leading-tight tracking-normal text-[var(--platform-text-strong)] sm:text-5xl">
+                {normalizedDraft.workTitle}
+              </h1>
+              <div className="mt-4 flex flex-wrap gap-2">
+                {normalizedDraft.themeTags.map((tag) => (
+                  <span
+                    key={tag}
+                    className={`inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-black ${
+                      tag === BABY_OBJECT_MATCH_EDUTAINMENT_TAG
+                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                        : 'border-[var(--platform-subpanel-border)] bg-white/72 text-[var(--platform-text-base)]'
+                    }`}
+                  >
+                    <Tag className="h-3 w-3" />
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              {normalizedDraft.itemAssets.map((asset) => (
+                <article
+                  key={asset.itemId}
+                  className="overflow-hidden rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/72 shadow-[inset_0_1px_0_rgba(255,255,255,0.76)]"
+                >
+                  <div className="relative aspect-square overflow-hidden bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))]">
+                    <ResolvedAssetImage
+                      src={asset.imageSrc}
+                      alt={asset.itemName}
+                      className="absolute inset-0 h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                    {asset.generationProvider === 'placeholder' ? (
+                      <span className="absolute right-2 top-2 rounded-full bg-white/86 px-2 py-0.5 text-[10px] font-black text-[var(--platform-text-soft)] shadow-sm">
+                        占位图
+                      </span>
+                    ) : null}
+                  </div>
+                  <div className="p-3">
+                    <div className="truncate text-lg font-black text-[var(--platform-text-strong)]">
+                      {asset.itemName}
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </section>
+
+          {error ? (
+            <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
+              {error}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-3 grid shrink-0 gap-2 pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:grid-cols-3">
+          <button
+            type="button"
+            disabled={isBusy || !onSaveDraft}
+            onClick={() => onSaveDraft?.(normalizedDraft)}
+            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+          >
+            <Save className="h-4 w-4" />
+            保存草稿
+          </button>
+          <button
+            type="button"
+            disabled={isBusy || !onStartTestRun}
+            onClick={() => onStartTestRun?.(normalizedDraft)}
+            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+          >
+            <Play className="h-4 w-4" />
+            试玩
+          </button>
+          <button
+            type="button"
+            disabled={isBusy || !publishReady || !onPublish}
+            onClick={() => onPublish?.(normalizedDraft)}
+            className="platform-button platform-button--primary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+          >
+            {isBusy ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle2 className="h-4 w-4" />
+            )}
+            发布
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BabyObjectMatchResultView;