feat: add edutainment drawing and visual package flows

.codex/skills/gpt-image-2-apimart/scripts/generate-anthro-cat-illustrations.mjs

@@ -0,0 +1,351 @@
+import { Buffer } from 'node:buffer';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const skillRoot = path.resolve(__dirname, '..');
+const repoRoot = path.resolve(skillRoot, '..', '..', '..');
+const defaultOutDir = path.join(repoRoot, 'public', 'anthro-cat-illustrations');
+const defaultTimeoutMs = 180000;
+
+const prompts = [
+  {
+    id: 'cat-barista',
+    title: '咖啡师猫咪',
+    subject:
+      '一只奶油色猫咪像人一样双足站立，穿深绿色围裙，在温暖咖啡馆吧台前专注拉花，爪子扶着咖啡杯，蓬松尾巴自然弯起，童书级精致插画，柔和自然光，主体清晰。',
+  },
+  {
+    id: 'cat-detective',
+    title: '侦探猫咪',
+    subject:
+      '一只黑白猫咪像侦探一样双足站在雨后街角，穿短风衣和小帽子，单爪拿放大镜，另一只爪插兜，路灯和湿润石板路反光，电影感但可爱，插画风格。',
+  },
+  {
+    id: 'cat-dancer',
+    title: '舞者猫咪',
+    subject:
+      '一只橘猫以拟人舞者姿态单脚旋转，穿轻盈舞台披肩，前爪展开，尾巴形成优雅弧线，背景是暖色小剧场灯光，动作灵动，精致插画。',
+  },
+  {
+    id: 'cat-knight',
+    title: '骑士猫咪',
+    subject:
+      '一只银灰猫咪像小骑士一样站在苔藓石台上，披短斗篷，双爪握着细剑指向地面，姿态勇敢但可亲，远处森林微光，奇幻插画风格。',
+  },
+  {
+    id: 'cat-painter',
+    title: '画家猫咪',
+    subject:
+      '一只三花猫咪双足站在画架前，穿宽松蓝色工作衫，一爪拿画笔一爪托调色盘，鼻尖有颜料点，窗边画室阳光明亮，温柔手绘插画。',
+  },
+  {
+    id: 'cat-astronaut',
+    title: '宇航员猫咪',
+    subject:
+      '一只白猫咪以拟人宇航员姿态站在月面，透明头盔内露出猫脸，尾巴在宇航服后轻轻翘起，爪子向远处蓝色星球敬礼，梦幻插画风格。',
+  },
+];
+
+const args = new Map();
+for (let index = 2; index < process.argv.length; index += 1) {
+  const raw = process.argv[index];
+  if (raw.startsWith('--')) {
+    const next = process.argv[index + 1];
+    if (next && !next.startsWith('--')) {
+      args.set(raw, next);
+      index += 1;
+    } else {
+      args.set(raw, true);
+    }
+  }
+}
+
+function readDotenv(fileName) {
+  const filePath = path.join(repoRoot, fileName);
+  if (!existsSync(filePath)) {
+    return {};
+  }
+
+  const values = {};
+  for (const line of readFileSync(filePath, 'utf8').split(/\r?\n/u)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) {
+      continue;
+    }
+    const match = /^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/u.exec(trimmed);
+    if (!match) {
+      continue;
+    }
+    let value = match[2].trim();
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    values[match[1]] = value;
+  }
+  return values;
+}
+
+function resolveEnv() {
+  const loaded = {
+    ...readDotenv('.env.example'),
+    ...readDotenv('.env.local'),
+    ...readDotenv('.env.secrets.local'),
+    ...process.env,
+  };
+  return {
+    baseUrl: String(loaded.VECTOR_ENGINE_BASE_URL || '')
+      .trim()
+      .replace(/\/+$/u, ''),
+    apiKey: String(loaded.VECTOR_ENGINE_API_KEY || '').trim(),
+    timeoutMs: Number.parseInt(
+      String(loaded.VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS || defaultTimeoutMs),
+      10,
+    ),
+  };
+}
+
+function buildVectorEngineImagesGenerationUrl(baseUrl) {
+  return baseUrl.endsWith('/v1')
+    ? `${baseUrl}/images/generations`
+    : `${baseUrl}/v1/images/generations`;
+}
+
+function buildPrompt(entry) {
+  return [
+    '请生成一张高清 1:1 方形插画。',
+    `画面主体：${entry.subject}`,
+    '要求：猫咪保留清晰猫脸、猫耳、猫尾和毛发质感，但身体姿态像人一样自然；构图完整，角色占画面主体，适合作为项目插画素材。',
+    '避免：文字、水印、边框、按钮、UI 元素、低清晰度、过度写实恐怖感、畸形肢体、多余手指。',
+  ].join('');
+}
+
+function collectStringsByKey(value, targetKey, output) {
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collectStringsByKey(entry, targetKey, output));
+    return;
+  }
+  if (!value || typeof value !== 'object') {
+    return;
+  }
+
+  for (const [key, nested] of Object.entries(value)) {
+    if (key === targetKey) {
+      if (typeof nested === 'string' && nested.trim()) {
+        output.push(nested.trim());
+      }
+      if (Array.isArray(nested)) {
+        nested.forEach((entry) => {
+          if (typeof entry === 'string' && entry.trim()) {
+            output.push(entry.trim());
+          }
+        });
+      }
+    }
+    collectStringsByKey(nested, targetKey, output);
+  }
+}
+
+function extractImageUrls(payload) {
+  const urls = [];
+  collectStringsByKey(payload, 'url', urls);
+  collectStringsByKey(payload, 'image', urls);
+  collectStringsByKey(payload, 'image_url', urls);
+  return [...new Set(urls)].filter((url) => /^https?:\/\//u.test(url));
+}
+
+function extractBase64Images(payload) {
+  const values = [];
+  collectStringsByKey(payload, 'b64_json', values);
+  return values;
+}
+
+function inferExtensionFromContentType(contentType) {
+  const normalized = contentType.split(';')[0]?.trim().toLowerCase();
+  if (normalized === 'image/png') {
+    return 'png';
+  }
+  if (normalized === 'image/webp') {
+    return 'webp';
+  }
+  if (normalized === 'image/gif') {
+    return 'gif';
+  }
+  return 'jpg';
+}
+
+function inferExtensionFromBytes(bytes) {
+  if (bytes.subarray(0, 8).equals(Buffer.from('\x89PNG\r\n\x1A\n', 'binary'))) {
+    return 'png';
+  }
+  if (bytes.subarray(0, 3).equals(Buffer.from([0xff, 0xd8, 0xff]))) {
+    return 'jpg';
+  }
+  if (
+    bytes.subarray(0, 4).toString('ascii') === 'RIFF' &&
+    bytes.subarray(8, 12).toString('ascii') === 'WEBP'
+  ) {
+    return 'webp';
+  }
+  return 'png';
+}
+
+async function fetchJson(url, options, timeoutMs) {
+  const abortController = new AbortController();
+  const timer = setTimeout(() => abortController.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, {
+      ...options,
+      signal: abortController.signal,
+    });
+    const text = await response.text();
+    if (!response.ok) {
+      throw new Error(`VectorEngine ${response.status}: ${text.slice(0, 600)}`);
+    }
+    return JSON.parse(text);
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      throw new Error(`VectorEngine request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function downloadUrl(url, timeoutMs) {
+  const abortController = new AbortController();
+  const timer = setTimeout(() => abortController.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, { signal: abortController.signal });
+    if (!response.ok) {
+      throw new Error(`download ${response.status}`);
+    }
+    const bytes = Buffer.from(await response.arrayBuffer());
+    return {
+      bytes,
+      extension: inferExtensionFromContentType(
+        response.headers.get('content-type') || 'image/jpeg',
+      ),
+    };
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      throw new Error(`Generated image download timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function generateOne(env, entry, outDir) {
+  const requestBody = {
+    model: 'gpt-image-2-all',
+    prompt: buildPrompt(entry),
+    n: 1,
+    size: '1024x1024',
+  };
+  const payload = await fetchJson(
+    buildVectorEngineImagesGenerationUrl(env.baseUrl),
+    {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${env.apiKey}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    },
+    env.timeoutMs,
+  );
+
+  const urls = extractImageUrls(payload);
+  const b64Images = extractBase64Images(payload);
+
+  let image;
+  if (urls[0]) {
+    image = await downloadUrl(urls[0], env.timeoutMs);
+  } else if (b64Images[0]) {
+    const bytes = Buffer.from(b64Images[0], 'base64');
+    image = {
+      bytes,
+      extension: inferExtensionFromBytes(bytes),
+    };
+  } else {
+    throw new Error(`VectorEngine returned no image for ${entry.id}`);
+  }
+
+  mkdirSync(outDir, { recursive: true });
+  const outputPath = path.join(outDir, `${entry.id}.${image.extension}`);
+  writeFileSync(outputPath, image.bytes);
+  return outputPath;
+}
+
+const dryRun = args.has('--dry-run') || !args.has('--live');
+const outDir = path.resolve(String(args.get('--out-dir') || defaultOutDir));
+const limit = Number.parseInt(String(args.get('--limit') || '0'), 10);
+const selectedPrompts = limit > 0 ? prompts.slice(0, limit) : prompts;
+
+if (dryRun) {
+  const env = resolveEnv();
+  console.log(
+    JSON.stringify(
+      {
+        mode: 'dry-run',
+        outDir,
+        count: selectedPrompts.length,
+        hasBaseUrl: Boolean(env.baseUrl),
+        hasApiKey: Boolean(env.apiKey),
+        requests: selectedPrompts.map((entry) => ({
+          id: entry.id,
+          title: entry.title,
+          body: {
+            model: 'gpt-image-2-all',
+            prompt: buildPrompt(entry),
+            n: 1,
+            size: '1024x1024',
+          },
+        })),
+      },
+      null,
+      2,
+    ),
+  );
+  process.exit(0);
+}
+
+const env = resolveEnv();
+if (!env.baseUrl || !env.apiKey) {
+  console.error(
+    JSON.stringify({
+      ok: false,
+      error: 'Missing VECTOR_ENGINE_BASE_URL or VECTOR_ENGINE_API_KEY',
+      hasBaseUrl: Boolean(env.baseUrl),
+      hasApiKey: Boolean(env.apiKey),
+    }),
+  );
+  process.exit(1);
+}
+
+const generated = [];
+for (const entry of selectedPrompts) {
+  console.log(`Generating ${entry.id}...`);
+  generated.push(await generateOne(env, entry, outDir));
+}
+
+console.log(
+  JSON.stringify(
+    {
+      ok: true,
+      count: generated.length,
+      files: generated,
+    },
+    null,
+    2,
+  ),
+);

.hermes/shared-memory/decision-log.md

@@ -103,6 +103,22 @@
 - 验证方式：执行 `npm run check:encoding`、`node scripts/check-wechat-miniprogram-auth-smoke.mjs`、`cargo test -p shared-contracts wechat_bind_phone_request_accepts_mini_program_phone_code --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server wechat_miniprogram_bind_phone_code_activates_pending_user --manifest-path server-rs/Cargo.toml -- --nocapture`。
 - 关联文档：`docs/technical/WECHAT_MINIPROGRAM_WEB_VIEW_SHELL_2026-05-03.md`。
 
+## 2026-05-13 宝贝爱画先作为寓教于乐独立本地 Demo 落地
+
+- 背景：第三关 `宝贝爱画` 需要默认出现在“发现 / 寓教于乐”板块下方，但本阶段只验证画板、手部绘制、绘画魔法和本地保存闭环，不进入创作模板、公开作品或正式持久化。
+- 决策：`baby-love-drawing / 宝贝爱画` 先作为独立运行态接入，入口由发现页寓教于乐默认卡片打开，并支持 `/runtime/baby-love-drawing` 直达；关闭 `VITE_ENABLE_EDUTAINMENT_ENTRY` 时前端不展示频道/卡片且直达路由回落主应用。绘画魔法统一走 `POST /api/creation/edutainment/baby-love-drawing/magic` 后端安全代理，使用 VectorEngine `gpt-image-2-all` 与原始画布 Data URL 参考图生成绘本风图片；保存只写 localStorage，正式持久化后续再设计。
+- 影响范围：`packages/shared/src/contracts/edutainmentBabyDrawing.ts`、`src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx`、`src/services/edutainment-baby-drawing/`、`src/routing/appRoutes.tsx`、`src/components/rpg-entry/RpgEntryHomeView.tsx`、`server-rs/crates/api-server/src/edutainment_baby_drawing.rs`、`src/index.css`、宝贝爱画 PRD 与技术方案。
+- 验证方式：执行宝贝爱画 model/runtime/service/route 定向测试、`npm run typecheck`、定向 ESLint、`cargo test -p api-server edutainment_baby_drawing --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server resolves_runtime_paths_to_creation_type_ids --manifest-path server-rs/Cargo.toml` 和编码检查；真实魔法生成需配置 `VECTOR_ENGINE_BASE_URL` 与 `VECTOR_ENGINE_API_KEY`。
+- 关联文档：`docs/prd/BABY_LOVE_DRAWING_EDUTAINMENT_LEVEL_PRD_2026-05-13.md`、`docs/technical/BABY_LOVE_DRAWING_RUNTIME_DEMO_IMPLEMENTATION_2026-05-13.md`。
+
+## 2026-05-12 宝贝识物创作同时生成玩法视觉主题包
+
+- 背景：`宝贝识物` 创作原本只根据两个关键词生成物品透明图，运行态背景、UI、礼物盒和篮子仍使用固定 CSS 绘本风，无法根据“小猪佩琪 / 奥特曼”或“苹果 / 橘子”等创作者提示词做主题化包装。
+- 决策：`POST /api/creation/edutainment/baby-object-match/assets` 同一次 image-2 / VectorEngine 调用链返回两个物品图和 `visualPackage`。视觉包包含 `background`、`ui-frame`、`gift-box`、`basket`、`smoke-puff` 五类资源；总风格保持寓教于乐明亮卡通绘本插画风，主题按两个物品关键词匹配，水果偏果园自然，动漫角色 / 玩具偏动漫玩具。物品图和礼物盒 / 篮子 / UI / 烟雾特效资源走透明 PNG 后处理，背景为清爽不遮挡玩法区的环境图；运行态中礼物盒按约 2 倍视觉尺寸展示、篮子按约 1.5 倍展示，礼物盒打开时使用 `smoke-puff` 弹出中央物品并移除礼盒。前端草稿保存该包，运行态消费该包；旧草稿以 `visualPackage = null` 继续使用 CSS 兜底。
+- 影响范围：`packages/shared/src/contracts/edutainmentBabyObject.ts`、`server-rs/crates/api-server/src/edutainment_baby_object.rs`、`src/services/edutainment-baby-object/babyObjectMatchClient.ts`、`src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.tsx`、`src/index.css`、宝贝识物 PRD 与技术方案。
+- 验证方式：执行宝贝识物 service / runtime 定向测试、`cargo test -p api-server edutainment_baby_object --manifest-path server-rs/Cargo.toml`、相关 ESLint 与编码检查；真实生图需配置 `VECTOR_ENGINE_BASE_URL` 与 `VECTOR_ENGINE_API_KEY`。
+- 关联文档：`docs/prd/BABY_OBJECT_MATCH_EDUTAINMENT_TEMPLATE_PRD_2026-05-11.md`、`docs/technical/BABY_OBJECT_MATCH_CREATION_PUBLISH_IMPLEMENTATION_2026-05-11.md`。
+
 ## 2026-05-11 拼图与抓大鹅结果页音频资产复用通用创作音频链路
 
 - 背景：拼图和抓大鹅结果页需要接入 Suno 背景音乐，抓大鹅还需要物体点击音效，但当前两类作品没有独立的作品级音频表或 metadata 字段。

.hermes/shared-memory/pitfalls.md

@@ -85,15 +85,55 @@
 - 验证：运行 `npx vitest run src\services\useMocapInput.test.ts src\components\child-motion-demo\ChildMotionWarmupDemo.test.tsx`，并在本地硬件服务启动后进入 `/child-motion-demo` 实测站位、招手、左右手挥动和跳跃阶段。
 - 关联：`src/services/useMocapInput.ts`、`src/components/child-motion-demo/ChildMotionWarmupDemo.tsx`、`docs/technical/CHILD_MOTION_DEMO_WARMUP_IMPLEMENTATION_SPEC_2026-05-09.md`。
 
+## 儿童动作 Demo 左右手阶段误通过先查身体侧映射和手臂展开阈值
+
+- 现象：热身关“挥动左手 / 挥动右手”阶段，用户只是手自然下垂、横向小幅抖动，或挥了相反侧手，也可能被判定通过。
+- 原因：本地 mocap 的 handedness 当前按摄像头视角输出，不能直接当作用户身体左/右；同时左右手阶段的目标是确认现实空间安全，需要验证手臂向外打开和上下摆动角度，不能只看手部 `x` 轨迹范围。
+- 处理：热身关中用户左手应消费 camera-right，用户右手应消费 camera-left；左右手阶段只在同侧肩肘腕外展、手腕非自然下垂、连续有效帧、横向范围、上下摆动范围、肩腕角度范围和上下方向变化全部达标时完成，并记录轨迹空间包络、角度范围和最大外展距离。
+- 验证：运行 `npx vitest run src\components\child-motion-demo\ChildMotionWarmupDemo.test.tsx src\components\child-motion-demo\childMotionWarmupModel.test.ts`，确认相反侧手、自然下垂、单纯横向轨迹不会完成，真实展开上下摆动可以完成。
+- 关联：`src/components/child-motion-demo/ChildMotionWarmupDemo.tsx`、`src/components/child-motion-demo/childMotionWarmupModel.ts`、`docs/technical/CHILD_MOTION_DEMO_WARMUP_IMPLEMENTATION_SPEC_2026-05-09.md`。
+
+## 儿童动作 Demo 角色轮廓抽搐先查 mocap 坐标防抖和渲染分层
+
+- 现象：`/child-motion-demo` 中间半透明小人在真实硬件驱动下左右轻微来回摆，移动过程中看起来忽大忽小，用户很难稳定停在目标圆环内。
+- 原因：`general.body.center_norm.x` 原始值逐包直接写入 `avatarX` 时，硬件坐标小噪声会直接驱动位置保持判定和 CSS 动画；如果角色外层同时承担横向定位和跳跃 `transform`，半透明 PNG 在移动时也更容易出现重采样抖动观感。
+- 处理：mocap 身体中心进入角色位置前必须先 clamp，再经过小幅死区、低通阻尼和单包最大步长限制；键盘 A/D 调试输入仍保持即时。角色 DOM 外层只负责横向定位，内层 sprite 负责轮廓图和跳跃位移，避免同一层 `transform` 同时表达多种运动。
+- 验证：运行 `npx vitest run src\components\child-motion-demo\ChildMotionWarmupDemo.test.tsx src\components\child-motion-demo\childMotionWarmupModel.test.ts src\services\useMocapInput.test.ts src\services\child-motion-demo\childMotionDebugInput.test.ts`，并用真实硬件进入站位阶段观察小幅身体晃动不会导致角色频繁左右跳动。
+- 关联：`src/components/child-motion-demo/ChildMotionWarmupDemo.tsx`、`src/index.css`、`docs/technical/CHILD_MOTION_DEMO_WARMUP_IMPLEMENTATION_SPEC_2026-05-09.md`。
+
 ## 宝贝识物选篮误触发先查多套判定和残余轨迹
 
 - 现象：`宝贝识物` 运行态打开礼物盒或反馈结束后，当前物品被连续送入左侧或右侧篮子，或硬件动作名偶发命中导致未做明确横移动作也触发选篮。
 - 原因：选篮如果同时消费 `wave_left_hand` / `wave_right_hand` / `wave` 动作名和手部轨迹，或在 `correct` / `wrong` 反馈阶段继续累计手部路径，会把抓握、反馈期间残留移动或未知侧别手部误算成下一次选篮。
-- 处理：宝贝识物选篮只使用明确 `leftHand` / `rightHand` 的连续横向轨迹阈值；侧别为 `unknown` 的手部轨迹不参与选篮；礼物盒打开和反馈阶段清空轨迹，不在非 `active` 阶段累计路径。礼物盒激活仍使用 `open_palm -> grab` 抓握序列。
+- 处理：宝贝识物选篮只使用明确 `leftHand` / `rightHand` 的连续横向轨迹阈值；侧别为 `unknown` 的手部轨迹不参与选篮；反馈阶段清空轨迹，不在非 `active` 阶段累计路径。进入关卡和每次正确反馈结束后自动弹出物品，不再用 `open_palm -> grab` 抓握序列激活礼物盒。
 - 补充：当前本地 mocap 的 handedness 是摄像头视角，宝贝识物选篮前需要换算为用户身体视角；`rightHand` 轨迹代表玩家左手并进入左篮，`leftHand` 轨迹代表玩家右手并进入右篮。键鼠调试不走该换算，仍保持鼠标左键=左篮、右键=右篮。
 - 验证：运行 `npm run test -- src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.test.tsx src/services/useMocapInput.test.ts`，确认动作名负向测试、未知侧别负向测试和左右手横向轨迹测试通过。
 - 关联：`src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.tsx`、`docs/technical/BABY_OBJECT_MATCH_CREATION_PUBLISH_IMPLEMENTATION_2026-05-11.md`。
 
+## 宝贝爱画左右手反了先查 mocap 摄像头视角换算
+
+- 现象：`宝贝爱画` 中真实硬件下左手指示器和右手画笔表现反向，用户抬右手却出现左手选色指示器，或抬左手却驱动画笔 / 橡皮。
+- 原因：本地 mocap 的 handedness 当前按摄像头视角输出，不能直接当成用户身体左 / 右；宝贝爱画初版直接消费 `latestCommand.leftHand/rightHand`，漏做摄像头视角到用户身体视角的换算。
+- 处理：宝贝爱画运行态消费 mocap 前先换算：`rightHand` 作为用户左手，用于颜色悬停和左手指示器；`leftHand` 作为用户右手，用于画笔 / 橡皮光标、绘制、擦除和工具切换。键鼠调试输入不做该换算，继续保持鼠标左键为左手、右键为右手。
+- 验证：运行 `npm run test -- src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.test.tsx src/components/edutainment-runtime/babyLoveDrawingModel.test.ts`，确认 camera-left 驱动用户右手画笔、camera-right 渲染用户左手选色指示器。
+- 关联：`src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx`、`docs/technical/BABY_LOVE_DRAWING_RUNTIME_DEMO_IMPLEMENTATION_2026-05-13.md`。
+
+## 宝贝识物创作卡在准备结果页先查长耗时 image-2 请求
+
+- 现象：`/creation/baby-object-match` 创作生成停在“准备结果页”，约 3 分钟后显示“生成失败 / 请求超时”；后端日志可能出现同一路由 `status=502 latency_ms=231291`，或前端已失败但后端稍后返回 200。
+- 原因：宝贝识物一次创作会生成 2 张物品图和 `background`、`ui-frame`、`gift-box`、`basket`、`smoke-puff` 5 张视觉包装图。旧前端只等待 180 秒并对长耗时 POST 自动重试，容易在 VectorEngine 仍在生成时先 abort，再重复发起第二次生成；上游某张图超过后端 `VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS` 或返回 5xx 时会表现为 502。
+- 处理：`babyObjectMatchClient` 对 `/api/creation/edutainment/baby-object-match/assets` 使用 10 分钟超时并取消自动重试；后端并发启动物品图和视觉主题包生成，并把该路由的 VectorEngine 单图请求等待预算提升到至少 8 分钟，按资源类别输出开始、完成和耗时日志。
+- 验证：运行 `npm run test -- src/services/edutainment-baby-object/babyObjectMatchClient.test.ts src/services/miniGameDraftGenerationProgress.test.ts`、`cargo test -p api-server edutainment_baby_object --manifest-path server-rs/Cargo.toml` 和编码检查；真实联调时查看 `宝贝识物 image-2 资源生成完成` 耗时是否小于前端超时，若仍 502 再看 `VectorEngine 图片生成上游错误` 的 `upstreamStatus/raw_excerpt`。
+- 关联：`src/services/edutainment-baby-object/babyObjectMatchClient.ts`、`src/services/miniGameDraftGenerationProgress.ts`、`server-rs/crates/api-server/src/edutainment_baby_object.rs`、`docs/technical/BABY_OBJECT_MATCH_CREATION_PUBLISH_IMPLEMENTATION_2026-05-11.md`。
+
+## 寓教于乐作品和宝贝识物模板同时消失先查入口种子
+
+- 现象：发现页“寓教于乐”分类下已发布的宝贝识物作品突然消失，同时创作界面模板选项中也看不到或无法正常展示 `宝贝识物`。
+- 原因：创作入口配置事实源已迁到 SpacetimeDB `creation_entry_type_config`；前端用 `baby-object-match` 入口可见性同时控制创作模板展示和发现页宝贝识物公开作品合入。若默认种子或后台配置缺少 `baby-object-match` 行，两条链路会一起被判定为不可见。
+- 处理：确认 `server-rs/crates/spacetime-module/src/runtime/creation_entry_config.rs` 默认种子包含 `id=baby-object-match`、`title=宝贝识物`、`visible=true`、`open=true`、`sort_order=90`；api-server 测试降级配置也要同步包含该类型。入口图片路径需指向真实存在资源，避免卡片图片 404。
+- 验证：运行 `cargo test -p module-runtime default_creation_entry_types_include_baby_object_match --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server test_creation_entry_config_response_keeps_baby_object_match_visible --manifest-path server-rs/Cargo.toml`、`cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml` 和 `npm run test -- src/components/platform-entry/platformEntryCreationTypes.test.ts`。
+- 关联：`server-rs/crates/spacetime-module/src/runtime/creation_entry_config.rs`、`server-rs/crates/api-server/src/creation_entry_config.rs`、`docs/technical/NEW_WORK_ENTRY_CONFIG_2026-05-01.md`。
+
 ## 儿童动作 Demo 绘本风资源未生成先查 VectorEngine 配置
 
 - 现象：`/child-motion-demo` 已经呈现绘本草地风格，但 `public/child-motion-demo/picture-book-grass-stage.png`、`picture-book-grass-floor.png`、`picture-book-ground-ring.png`、`picture-book-character-outline.png`、`picture-book-ui-panel.png` 或 `picture-book-ui-button.png` 不存在，Network 里对应图片返回 404，或运行 `npm run assets:child-motion-demo -- --live` 返回缺少 VectorEngine 配置。
@@ -234,8 +274,8 @@
 
 - 现象：本地 `npm run dev` 因 `3101` 已占用、重复发布 SpacetimeDB wasm 编译太慢，或只想检查 `spacetime-module` 语法而被完整联调链路拖慢。
 - 原因：`npm run dev` 默认同时启动 SpacetimeDB standalone、发布 `server-rs/crates/spacetime-module`、启动 Rust `api-server`、主站 Vite 与后台 Vite；并非每个阶段都需要完整重启和重新发布。
-- 处理：`npm run dev` 启动后会把实际 SpacetimeDB URL 记录到 `server-rs/.spacetimedb/local/data/dev-rust-spacetime-url`。下次启动即使没有传 `--skip-spacetime`，脚本也会先检查 `spacetime.pid` 对应进程和该 URL 是否在线；在线则直接复用现有宿主。确认需要新启动 SpacetimeDB 时，脚本先检测 `3101`，被占用则输出占用进程并选择最近可用端口，保证 publish 与 `api-server` 都连接同一个实际 SpacetimeDB URL。`api-server` 启动前也会检测 `8082` 并选择最近可用端口。Windows / Git Bash 下不要用 `tr/head/xargs` 管道读取 `spacetime.pid` 或 URL 记录，脚本应使用 Node 读取并短重试，避免 `tr: read error: Device or resource busy`；未修改 `spacetime-module` 时使用 `npm run dev -- --skip-publish`；只查模块语法时执行 `cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml`。`npm run dev` 会在启动前检查 SpacetimeDB、api-server、主站 Vite、后台 Vite 端口，不可用时自动寻找后续可用端口，并把实际端口传给 publish、后端环境变量和前端代理目标。
-- 验证：`--skip-spacetime` 后脚本复用现有 `http://127.0.0.1:3101`；`3101` 或 `8082` 被其他进程占用时，脚本输出占用进程并使用最近可用端口；`--skip-publish` 后不再进入 publish 阶段；`cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml` 能完成 Rust 语法和类型检查。端口漂移时控制台会打印 `[dev:ports] ... 不可用，改用 ...`，后续 `[dev:rust] web/admin web/rust api/spacetime` 地址应与实际端口一致。
+- 处理：`npm run dev` 启动后会把实际 SpacetimeDB URL 记录到 `server-rs/.spacetimedb/local/data/dev-rust-spacetime-url`。下次启动即使没有传 `--skip-spacetime`，脚本也会先检查 `spacetime.pid` 对应进程和该 URL 是否在线；在线则直接复用现有宿主。确认需要新启动 SpacetimeDB 时，脚本先检测 `3101`，被占用则输出占用进程并选择最近可用端口，保证 publish 与 `api-server` 都连接同一个实际 SpacetimeDB URL。显式传 `--skip-spacetime` 时表示复用既有宿主，脚本不再对 SpacetimeDB 端口做可用性漂移；`--spacetime-port 3101` 就是后端要连接的实际端口，避免被误改到空闲但未启动的 `3102`。`api-server` 启动前也会检测 `8082` 并选择最近可用端口。Windows / Git Bash 下不要用 `tr/head/xargs` 管道读取 `spacetime.pid` 或 URL 记录，脚本应使用 Node 读取并短重试，避免 `tr: read error: Device or resource busy`；未修改 `spacetime-module` 时使用 `npm run dev -- --skip-publish`；只查模块语法时执行 `cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml`。`npm run dev` 会在启动前检查 SpacetimeDB、api-server、主站 Vite、后台 Vite 端口，不可用时自动寻找后续可用端口，并把实际端口传给 publish、后端环境变量和前端代理目标。
+- 验证：`--skip-spacetime` 后脚本复用现有 `http://127.0.0.1:3101`；日志中的 `[dev:rust] spacetime:` 不应漂移到没有服务的 `3102`；`GET /api/creation-entry/config` 不应返回连接空端口导致的 `502`。`3101` 或 `8082` 被其他进程占用时，脚本输出占用进程并使用最近可用端口；`--skip-publish` 后不再进入 publish 阶段；`cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml` 能完成 Rust 语法和类型检查。端口漂移时控制台会打印 `[dev:ports] ... 不可用，改用 ...`，后续 `[dev:rust] web/admin web/rust api/spacetime` 地址应与实际端口一致。
 - 关联：`docs/technical/RUST_LOCAL_AND_REMOTE_DEPLOYMENT_SCRIPTS_2026-04-22.md`、`scripts/dev-rust-stack.sh`。
 
 ## 本地 SpacetimeDB publish 401 可清本地库重发

docs/design/README.md

@@ -5,6 +5,7 @@
 ## 文档列表
 
 - [CHILD_MOTION_DEMO_WARMUP_LEVEL_DESIGN_2026-05-09.md](./CHILD_MOTION_DEMO_WARMUP_LEVEL_DESIGN_2026-05-09.md)：4-8 岁儿童动作识别互动玩法 Demo 固定热身关的横屏体验流程、识别目标、表现需求与待确认事项。
+- [TAONIER_BRAND_LOGO_CONCEPTS_2026-05-13.md](./TAONIER_BRAND_LOGO_CONCEPTS_2026-05-13.md)：候选产品名“陶泥儿”的品牌定位归纳、gpt-image-2 Logo 概念图和主标选择建议。
 - [CUSTOM_WORLD_CREATOR_INPUT_AND_AI_BOUNDARY_DESIGN_2026-04-06.md](./CUSTOM_WORLD_CREATOR_INPUT_AND_AI_BOUNDARY_DESIGN_2026-04-06.md)：自定义世界里陶泥儿主输入与 AI 分工边界设计。
 - [CUSTOM_WORLD_CREATOR_MANUAL_AI_SYSTEM_BALANCE_DESIGN_2026-04-12.md](./CUSTOM_WORLD_CREATOR_MANUAL_AI_SYSTEM_BALANCE_DESIGN_2026-04-12.md)：自定义世界创作里“手填锚点 / AI 可改初稿 / 系统托管层”的平衡设计。
 - [CUSTOM_WORLD_CREATOR_PURE_AGENT_COMPARISON_AND_CONVERSION_DESIGN_2026-04-12.md](./CUSTOM_WORLD_CREATOR_PURE_AGENT_COMPARISON_AND_CONVERSION_DESIGN_2026-04-12.md)：纯 Agent 式创作工具与结构化工作台方案的优缺点对比，以及转型设计。

docs/design/TAONIER_BRAND_LOGO_CONCEPTS_2026-05-13.md

@@ -0,0 +1,423 @@
+# 陶泥儿品牌 Logo 概念稿
+
+> 本稿是围绕候选产品名“陶泥儿”的品牌视觉探索，不替代当前已冻结的“百梦”正式命名口径。若后续确认更名，需要另起产品命名、前后端文案和商标检索落地方案。
+
+## 1. 品牌定位归纳
+
+“陶泥儿”适合承接的不是传统陶艺或儿童黏土，而是“把灵感塑形成可玩内容”的 AI 创作平台隐喻。
+
+核心关键词：
+
+- 精品：作品不是随手糊出来，而是经过 AI 辅助打磨、可被消费和传播的轻精品内容。
+- UGC：用户是主要造物者，平台降低创作门槛。
+- 创作：从一句脑洞、一个梗、一张图，生成小游戏、互动作品或可分享内容。
+- 裂变与梗：名字要支持“开捏”“捏个梗”“捏个小游戏”这类用户语言。
+- 轻度休闲：体验应松弛、即时、好玩，不走硬核生产工具气质。
+- AI：AI 是塑形能力，不是冷冰冰的技术标签。
+
+推荐品牌主张：
+
+```text
+把脑洞捏成小游戏
+```
+
+备选表达：
+
+```text
+捏个脑洞，马上开玩
+AI 开捏，人人会创作
+随手造梗，随心开玩
+```
+
+## 2. 生成原则
+
+本轮使用仓库 GPT-image-2 / VectorEngine 工作流生成 Logo 概念图，生成时刻意要求“无文字 Logo 图标”。
+
+原因：
+
+- AI 生图直接生成中文品牌字容易出现笔画错误，不适合作为正式字标。
+- 当前阶段更适合先确定图形符号方向，再由设计师或前端继续做矢量化、字标搭配和多尺寸适配。
+- 图标需要优先服务 App icon、平台左上角品牌、分享卡片和加载页，而不是一次性海报图。
+
+生成文件：
+
+```text
+public/branding/taonier-logo-v3-concepts/
+├─ taonier-logo-v3-contact-sheet.png
+├─ taonier-v3-finger-spark.png
+├─ taonier-v3-seed-pop.png
+├─ taonier-v3-magic-dot.png
+├─ taonier-v3-work-gem.png
+└─ taonier-v3-soft-t.png
+
+public/branding/taonier-logo-magic-dot-concepts/
+├─ taonier-logo-magic-dot-contact-sheet.png
+├─ taonier-magic-dot-orbit.png
+├─ taonier-magic-dot-seal.png
+├─ taonier-magic-dot-squish.png
+├─ taonier-magic-dot-mold.png
+└─ taonier-magic-dot-bloom.png
+
+public/branding/taonier-logo-flat-concepts/
+├─ taonier-logo-flat-contact-sheet.png
+├─ taonier-flat-play-clay.png
+├─ taonier-flat-spark-clay.png
+├─ taonier-flat-meme-smile.png
+├─ taonier-flat-loop-mold.png
+└─ taonier-flat-seal-blocks.png
+
+public/branding/taonier-logo-concepts/
+├─ taonier-logo-contact-sheet.png
+├─ taonier-clay-spark.png
+├─ taonier-play-mold.png
+├─ taonier-meme-bubble.png
+├─ taonier-creation-loop.png
+└─ taonier-premium-seal.png
+```
+
+生成脚本：
+
+```text
+scripts/generate-taonier-logo-concepts.mjs
+```
+
+## 3. V3-03 一捏成型延展
+
+这一组专门沿 V3 “一捏成型”继续打磨。目标是保留“两个软形触点 + 中央作品核”的成型瞬间，同时降低括号感、碰撞特效感和功能按钮感。
+
+![陶泥儿 Logo 一捏成型延展总览](../../public/branding/taonier-logo-magic-dot-concepts/taonier-logo-magic-dot-contact-sheet.png)
+
+### 3.1 捏合星核
+
+![捏合星核](../../public/branding/taonier-logo-magic-dot-concepts/taonier-magic-dot-orbit.png)
+
+定位：一捏成型方向的主标首选。
+
+这个方向最稳地保留了“左右合拢、中央成型”的核心动作，中心青绿色星核形成了明确焦点，整体比原 V3-03 更完整，也没有明显播放器、聊天或表情联想。
+
+优点：
+
+- 结构清楚，第一眼能看出“合拢生成”。
+- 元素少，小尺寸适配潜力好。
+- 中央星核可以做加载、生成成功、发布完成等动效延展。
+
+风险：
+
+- 左右软形仍有一点括号感，后续矢量化可把外轮廓做得更不对称、更像被捏塑的软泥。
+
+建议用途：主 Logo 备选首选、AI 生成按钮、启动动效核心符号。
+
+### 3.2 成型印记
+
+![成型印记](../../public/branding/taonier-logo-magic-dot-concepts/taonier-magic-dot-seal.png)
+
+定位：完整主标感最强的延展方向。
+
+这个方向把左右触点收成一个更完整的软形图腾，减少了“两个括号”的割裂感。视觉上更像独立品牌符号，但也因此少了一点“捏合动作”的即时感。
+
+建议用途：主 Logo 强备选；若选择它，后续应去掉背景底色并强化中心负形星点。
+
+### 3.3 软泥合拍
+
+![软泥合拍](../../public/branding/taonier-logo-magic-dot-concepts/taonier-magic-dot-squish.png)
+
+定位：轻松、年轻、动效友好。
+
+这个方向的上下软形更活泼，适合表达“啪嗒一下成型”。但静态 Logo 中的黄色星点和短线略像特效贴纸，主标使用前需要继续简化。
+
+建议用途：生成中动效、运营图、互动反馈，不建议直接定为主 Logo。
+
+### 3.4 灵感模口
+
+![灵感模口](../../public/branding/taonier-logo-magic-dot-concepts/taonier-magic-dot-mold.png)
+
+定位：最有“模口 / 造物容器”意味。
+
+这个方向图形独特，和“从软泥模口里生成作品”的隐喻贴合。但外形复杂度比 01、02 更高，边缘细节在小尺寸下可能损失。
+
+建议用途：主 Logo 备选探索，适合继续做专业矢量简化。
+
+### 3.5 捏开灵感
+
+![捏开灵感](../../public/branding/taonier-logo-magic-dot-concepts/taonier-magic-dot-bloom.png)
+
+定位：温和、包裹、生成容器。
+
+这个方向亲和、平衡，但整体像眼睛 / 容器 / 开合结构，陶泥儿的“捏”动作弱一些。
+
+建议用途：AI 生成入口、等待态、创作容器辅助图形。
+
+## 4. V3 抽象主标候选
+
+V3 根据评审反馈重新避开了五个问题：播放三角、褐色陶土主色、聊天气泡 / 表情包、循环符号，以及过多碎元素。方向转为更抽象、更亮眼、更像长期主 Logo 的符号。
+
+![陶泥儿 Logo V3 概念总览](../../public/branding/taonier-logo-v3-concepts/taonier-logo-v3-contact-sheet.png)
+
+### 4.1 灵感捏痕
+
+![灵感捏痕](../../public/branding/taonier-logo-v3-concepts/taonier-v3-finger-spark.png)
+
+定位：主 Logo 首选。
+
+这个方向用醒目的珊瑚红软形、指纹捏痕和星点负形建立记忆点。它不再依赖“陶泥的褐色”，而是用“被捏过的痕迹”表达陶泥儿的核心动作：用户把脑洞捏成作品。
+
+优点：
+
+- 第一眼足够醒目，远离旧版褐色和播放器感。
+- 指纹捏痕有独特性，能承接“人人创作”和“亲手塑形”。
+- 元素少，适合继续矢量化和小尺寸适配。
+
+风险：
+
+- 指纹弧线后续需要进一步简化，避免在 24px 以下变糊。
+- 星点比例要克制，避免变成普通灵感图标。
+
+建议用途：主 Logo、App icon、平台顶栏、启动页、生成按钮。
+
+### 4.2 脑洞种子
+
+![脑洞种子](../../public/branding/taonier-logo-v3-concepts/taonier-v3-seed-pop.png)
+
+定位：创意生长与新手友好。
+
+这个方向从“灵感发芽”切入，比陶泥更偏创造生命力。它亲和、可爱，但容易让用户联想到教育、植物、儿童启蒙或种植类产品。
+
+建议用途：新手引导、创作孵化、儿童 / 寓教于乐支线，不建议作为主 Logo。
+
+### 4.3 一捏成型
+
+![一捏成型](../../public/branding/taonier-logo-v3-concepts/taonier-v3-magic-dot.png)
+
+定位：AI 把灵感合成为作品的瞬间。
+
+这个方向很简洁，用左右两个软形触点和中心星点表达“捏合”。它避开了播放器和聊天气泡，也能做动效，但静态图形目前稍像碰撞特效或括号，需要继续重绘增强独特轮廓。
+
+建议用途：生成按钮、AI 施法动效、主 Logo 备选微调方向。
+
+### 4.4 作品胶囊
+
+![作品胶囊](../../public/branding/taonier-logo-v3-concepts/taonier-v3-work-gem.png)
+
+定位：精品内容和作品沉淀。
+
+这个方向更稳、更精品，青绿色也比褐色更吸睛。但整体像水滴、宝石或通用内容图标，和“捏”这个动作的关系弱。
+
+建议用途：精选作品、作品库、创作者中心，不建议优先做主 Logo。
+
+### 4.5 软体 T 形
+
+![软体 T 形](../../public/branding/taonier-logo-v3-concepts/taonier-v3-soft-t.png)
+
+定位：英文辅助名 / Taonier 的抽象首字母。
+
+这个方向试图做更品牌化的抽象符号，但当前形体还不够自然，也未形成足够强的“陶泥儿”心智。若未来英文名确定为 `Taonier` 或类似形式，可以继续沿这个方向做专业字母标重绘。
+
+建议用途：英文标识探索，不作为当前主 Logo 首选。
+
+## 5. V2 扁平矢量候选
+
+第一批图形偏 3D 和拟物，更适合作为吉祥物、运营图或启动页气氛图，不适合作为长期主 Logo。V2 已把约束收紧为扁平、矢量、少元素、强轮廓和小尺寸可识别。
+
+![陶泥儿 Logo 扁平概念总览](../../public/branding/taonier-logo-flat-concepts/taonier-logo-flat-contact-sheet.png)
+
+### 5.1 扁平开捏
+
+![扁平开捏](../../public/branding/taonier-logo-flat-concepts/taonier-flat-play-clay.png)
+
+定位：最直接的主 Logo 候选。
+
+这个方向用一团柔软陶泥承载播放符号，用户一眼能理解“点开玩 / 马上玩”，同时外形保留“捏出来”的不规则软泥感。
+
+优点：
+
+- 识别速度最快，移动端小尺寸也成立。
+- 符合主流 App Logo 语言，亲和、不重、不技术冷。
+- 和“把脑洞捏成小游戏”的主张绑定最强。
+
+风险：
+
+- 播放符号是常见母题，后续矢量化时要通过不规则软泥外轮廓、颜色和字标形成独特资产。
+
+建议用途：主 Logo 首选、App icon、平台顶栏、分享卡片角标。
+
+### 5.2 灵感泥星
+
+![灵感泥星](../../public/branding/taonier-logo-flat-concepts/taonier-flat-spark-clay.png)
+
+定位：AI 创作与灵感生成。
+
+这个方向比“扁平开捏”更品牌化，中心负形星点表达灵感、AI 生成和创意爆发。它没有播放符号那么直白，但更容易和“陶泥儿”的创作平台气质绑定。
+
+优点：
+
+- 图形更简洁，品牌记忆点强。
+- 陶泥心智、AI 灵感和精品感比较平衡。
+- 适合未来扩成字标、启动页和生成态动效。
+
+风险：
+
+- 对“小游戏/马上玩”的表达弱于播放符号。
+
+建议用途：主 Logo 强备选、创作首页、AI 生成按钮和品牌主视觉。
+
+### 5.3 造梗笑泥
+
+![造梗笑泥](../../public/branding/taonier-logo-flat-concepts/taonier-flat-meme-smile.png)
+
+定位：社交传播和玩梗亲和力。
+
+这个方向的气泡与笑脸非常亲和，适合表达“分享快乐”和“造梗”。但它和聊天、社区类产品的通用图形过近，作为主 Logo 可能会让用户误判产品品类。
+
+建议用途：社区、评论、分享、活动贴纸，不建议做主 Logo。
+
+### 5.4 共创泥环
+
+![共创泥环](../../public/branding/taonier-logo-flat-concepts/taonier-flat-loop-mold.png)
+
+定位：AI 与用户共创闭环。
+
+这个方向表达共创与循环，但生成结果带有偏柔和彩虹渐变的视觉倾向，与“陶泥儿”的软泥名称关联不够直观，也不如 01/02 容易记住。
+
+建议用途：创作流程、共创能力、生成进度辅助图形。
+
+### 5.5 精品泥印
+
+![精品泥印](../../public/branding/taonier-logo-flat-concepts/taonier-flat-seal-blocks.png)
+
+定位：精品作品和内容集合。
+
+这个方向像内容平台或作品库入口，能表达图片、用户、游戏等多形态内容。但图形元素较多，主标识别不如 01/02 凝练。
+
+建议用途：精选作品、作品集、创作者中心、内容品质标识。
+
+## 6. V1 立体探索
+
+### 6.1 灵感陶团
+
+![灵感陶团](../../public/branding/taonier-logo-concepts/taonier-clay-spark.png)
+
+定位：AI 共创与灵感造物。
+
+这个方向把“陶泥”作为主视觉，内部用发光火花和节点表达 AI 赋能。它最贴“陶泥儿”名字本身，也能说明平台不是普通小游戏集合，而是从灵感生成作品的创作容器。
+
+优点：
+
+- 与“陶泥儿”的名称绑定最强。
+- 有 AI、创作、造物的综合含义。
+- 适合启动页、品牌介绍、创作首页空状态。
+
+风险：
+
+- 小尺寸下细节偏多，需要后续矢量化时压缩节点和纹理。
+- 如果色彩处理不当，会回到手工陶艺联想。
+
+建议用途：品牌主视觉备选、官网/启动页、创作入口图形。
+
+### 6.2 开玩模具
+
+![开玩模具](../../public/branding/taonier-logo-concepts/taonier-play-mold.png)
+
+定位：把脑洞捏成小游戏。
+
+这个方向用软陶捏出播放符号，最直接地连接“创作”和“马上玩”。它比单纯陶泥团更有产品动作，也更适合轻休闲、小游戏、短内容传播。
+
+优点：
+
+- 识别强，小尺寸也清楚。
+- 与轻度休闲小游戏的关系最直接。
+- 适合作为 App icon 和主 Logo 图形。
+
+风险：
+
+- 播放符号相对常见，需要后续在外轮廓、捏痕和色彩上做独特性。
+- 如果三角形过硬，会削弱“陶泥儿”的柔软感。
+
+建议用途：主 Logo 首选、App icon、分享卡片角标、加载态图形。
+
+### 6.3 造梗气泡
+
+![造梗气泡](../../public/branding/taonier-logo-concepts/taonier-meme-bubble.png)
+
+定位：社交传播、玩梗、裂变。
+
+这个方向把陶泥变形成聊天气泡和表情，强调“梗”和“传播”。它最有社交平台感，也适合表情包、活动贴纸和运营视觉。
+
+优点：
+
+- 传播感强，年轻、轻松、容易做 IP 化。
+- 能承接社区、评论、分享和玩梗场景。
+- 比较容易延展成贴纸和表情包。
+
+风险：
+
+- 偏软萌，可能削弱“精品 AI 创作平台”的质感。
+- 作为主 Logo 容易显得像聊天或表情产品。
+
+建议用途：社区模块、活动运营、IP 辅助形象，不建议作为唯一主 Logo。
+
+### 6.4 共创回路
+
+![共创回路](../../public/branding/taonier-logo-concepts/taonier-creation-loop.png)
+
+定位：AI 与用户共同迭代生成。
+
+这个方向用软陶带形成循环和造物轨迹，表达“灵感 -> AI 塑形 -> 用户修改 -> 作品传播”的闭环。它比其他方向更抽象，也更有平台级和工具级气质。
+
+优点：
+
+- 高级、简洁，避免儿童化。
+- 适合表达 AI 共创、迭代和作品循环。
+- 可用于创作者工作台或生成进度标识。
+
+风险：
+
+- 与“陶泥儿”名称的直观关联较弱。
+- 缺少小游戏和玩梗的即时识别。
+
+建议用途：创作流程标识、AI 共创能力图标、品牌辅助图形。
+
+### 6.5 精品泥印
+
+![精品泥印](../../public/branding/taonier-logo-concepts/taonier-premium-seal.png)
+
+定位：精品内容、作品认证、创作者成果。
+
+这个方向像一个被压印的软陶徽章，中间有方块和火花，比较适合表达“作品被打磨成型”。它的内容平台感强于游戏入口感。
+
+优点：
+
+- 精品感和作品库气质较强。
+- 适合作品认证、精选、创作者徽章。
+- 与“陶泥压印”隐喻相对自然。
+
+风险：
+
+- 细节较多，主 Logo 小尺寸可读性不如“开玩模具”。
+- 徽章感偏静态，轻休闲的即时性稍弱。
+
+建议用途：精选作品标识、创作者荣誉、内容品质标签。
+
+## 7. 推荐结论
+
+优先级建议：
+
+```text
+主 Logo 首选：V3 01 灵感捏痕
+一捏成型首选：V3-03 延展 01 捏合星核
+完整主标备选：V3-03 延展 02 成型印记
+英文标识探索：V3 05 软体 T 形
+精品内容辅助：V3 04 作品胶囊
+新手 / 寓教于乐辅助：V3 02 脑洞种子
+```
+
+若要兼顾主流、亲和、醒目和“陶泥儿”的动作隐喻，优先继续打磨 V3 “灵感捏痕”。
+若想把 Logo 做得更抽象、更像 AI 生成瞬间，可以继续打磨 V3-03 延展中的“捏合星核”或“成型印记”。
+V1 的 3D 图标不建议直接作为主 Logo，只适合做运营图、吉祥物探索或风格参考；V2 的播放、气泡、碎元素方向本轮已降级为历史探索。
+
+## 8. 后续落地建议
+
+1. 先围绕 V3 “灵感捏痕”做 3 到 5 个专业矢量微调版：减少指纹线条、强化软形轮廓、测试深色 / 浅色底。
+2. 同步对 V3-03 “捏合星核”做一版更独特的轮廓重绘，弱化括号感，保留中央成型星核。
+3. 字标不要直接使用生图结果，应单独设计“陶泥儿”中文字标，并准备英文辅助名。
+4. 正式应用前做商标近似检索，重点覆盖第 9、35、38、41、42 类。
+5. 若确认替换“百梦”，再更新现有命名规范文档、前端品牌组件、HTML metadata、后台和后端默认文案。

docs/prd/BABY_LOVE_DRAWING_EDUTAINMENT_LEVEL_PRD_2026-05-13.md

@@ -0,0 +1,101 @@
+# 宝贝爱画寓教于乐独立关卡 PRD 2026-05-13
+
+## 1. 目标
+
+新增寓教于乐内容线独立关卡：
+
+```text
+宝贝爱画
+```
+
+工程 ID 固定为：
+
+```text
+baby-love-drawing
+```
+
+该关卡默认出现在“发现 / 寓教于乐”板块下方。当前阶段只做本地 Demo 保存，验证完成后再补正式持久化。
+
+## 2. 关卡结构
+
+启动宝贝爱画后进入绘画运行态：
+
+1. 屏幕中央是带边框的空白画板；
+2. 画板边框内是可绘画区域；
+3. 画板外左侧展示彩虹 7 色；
+4. 画板外右侧中下方展示画笔和橡皮；
+5. 用户进入内容后默认手持画笔；
+6. 手持画笔或橡皮时，屏幕上实时显示跟随右手位置的工具图案标识。
+
+## 3. 输入规则
+
+颜色选择：
+
+1. 仅检测左手；
+2. 左手悬停在某个颜色区域 1.5 秒后，选中该颜色；
+3. 颜色固定为彩虹 7 色。
+
+工具切换：
+
+1. 右手移动到画笔或橡皮工具区域；
+2. 右手握拳后，将手里的工具切换为对应工具。
+
+绘画与擦除：
+
+1. 右手在画布区域握拳时，当前工具生效；
+2. 当前工具为画笔时留下轨迹；
+3. 当前工具为橡皮时擦除轨迹；
+4. 右手张开时，画笔或橡皮抬起，不在画布上生效。
+
+按钮选择：
+
+1. 完成；
+2. 使用绘画魔法；
+3. 保存；
+4. 再画一张；
+5. 返回。
+
+以上按钮都使用任一手悬停 2 秒完成选中。
+
+## 4. 绘画魔法
+
+用户完成绘画后，可使用“绘画魔法”。
+
+绘画魔法使用 image-2，以用户绘画内容和笔触轨迹生成对应绘本风格图片内容。
+
+前端不得直接读取、拼接或暴露图片生成密钥。image-2 调用必须通过后端代理。
+
+## 5. 保存规则
+
+当前只做本地 Demo 保存。
+
+保存规则：
+
+1. 魔法生成前保存，只保存一张原图；
+2. 若用户未保存原图，直接点击魔法生成，则魔法生成后保存时同时保存原图和魔法图；
+3. 保存完毕后，可继续“再画一张”或“返回”。
+
+## 6. 展示与开关
+
+宝贝爱画只属于寓教于乐内容线。
+
+`VITE_ENABLE_EDUTAINMENT_ENTRY` 关闭时：
+
+1. 不展示“发现 / 寓教于乐”频道；
+2. 不展示宝贝爱画默认卡片；
+3. 不允许通过 `/runtime/baby-love-drawing` 直达运行态。
+
+## 7. 验收
+
+1. 寓教于乐开启时，“发现 / 寓教于乐”下方展示“宝贝爱画”默认关卡卡片；
+2. 寓教于乐关闭时，不展示宝贝爱画，也不能直达运行态；
+3. 进入后展示空白画板、彩虹 7 色、画笔和橡皮；
+4. 默认工具为画笔；
+5. 左手悬停颜色 1.5 秒后选中颜色；
+6. 右手移动到工具区并握拳后切换画笔或橡皮；
+7. 右手握拳在画布内绘制或擦除，张开时不生效；
+8. 任一手悬停按钮 2 秒后触发按钮；
+9. 完成后可保存原图；
+10. 完成后可使用绘画魔法生成绘本风格图片；
+11. 未保存原图直接使用绘画魔法后，保存会同时保存原图和魔法图；
+12. 保存后可再画一张或返回。

docs/prd/BABY_OBJECT_MATCH_EDUTAINMENT_TEMPLATE_PRD_2026-05-11.md

@@ -29,11 +29,24 @@
 2. 模板名称：`宝贝识物`；
 3. 两个物品；
 4. 两个物品图；
-5. 作品标签。
+5. 游戏视觉主题包；
+6. 作品标签。
 
-物品图使用 VectorEngine `gpt-image-2-all` / image-2 生成。图片生成只能走后端或后续后端预留接口，前端不得泄露 `VECTOR_ENGINE_API_KEY`。
+物品图使用 VectorEngine `gpt-image-2-all` / image-2 生成。图片生成只能走后端接口，前端不得读取、拼接或暴露 `VECTOR_ENGINE_API_KEY`。
 
-本地 Demo 阶段若真实生图接口未接入完成，允许前端 service 返回明确标记为 `placeholder` 的占位图形，用于打通创作到结果页的交互链路；该占位结果不得伪装成正式 image-2 资产。
+每个关键词只生成一张围绕该关键词的单一物品形象。生成 prompt 必须锁定寓教于乐板块统一的卡通绘本草地舞台插画风，但最终画面不生成背景、场景、氛围渲染、人物、手、篮子、礼物盒、文字、水印或 UI。服务端必须把生成结果转成透明 PNG，并执行透明抠图后处理；只有透明抠图后的素材才允许写入草稿 `itemAssets` 并进入游戏运行态。
+
+同一次创作还必须使用 image-2 生成游戏视觉主题包，包含背景环境、UI 装饰框、礼物盒、篮子和烟雾弹出特效资源。主题包必须继续保持寓教于乐插画风，并根据用户填写的两个物品关键词匹配主题：例如关键词偏动漫角色或玩具时，背景环境和元素可使用动漫、玩具主题；关键词偏水果时，背景环境和元素可匹配果园、自然主题；其它关键词按其语义匹配合适主题。主题包不得改变关卡玩法规则，不新增文字说明、额外按钮或额外判定规则。
+
+视觉主题包的资源边界：
+
+1. 背景环境图不做透明抠图，但必须保证屏幕中间、中下方和底部左右篮子区域清爽，不遮挡放大后的物品、礼物盒和篮子；
+2. UI 装饰框用于字幕条和计数器风格化包装，只生成装饰边框和主题点缀，不生成文字、数字或按钮；
+3. 礼物盒资源输出为透明 PNG，运行态按当前礼盒视觉的 2 倍尺寸展示，素材主体必须饱满清晰；
+4. 篮子资源输出为透明 PNG，运行态按当前篮子视觉的 1.5 倍尺寸展示，左右篮子仍固定为两个物品对应选项，篮子造型资源可以复用同一张主题篮子图；
+5. 烟雾弹出特效资源输出为透明 PNG，用于礼物盒打开瞬间覆盖开盒区域并承接中央物品弹出，不生成物品、篮子、礼物盒或文字。
+
+当前本地 Demo 阶段已接入真实 image-2 资源链路。创作提交必须成功获得 `generationProvider = "vector-engine-gpt-image-2"` 的两个物品透明 PNG 和完整视觉主题包后，才能进入结果页、试玩或发布；若后端接口、登录态、VectorEngine 配置或上游生成失败，前端必须停留在生成失败状态并展示错误，不得静默回退为占位图。历史草稿中若仍存在 `generationProvider = "placeholder"` 的占位资源，结果页必须提示重新生成，试玩和发布前必须先补齐 image-2 资源。
 
 ## 4. 标签规则
 
@@ -63,6 +76,8 @@
 
 试玩按钮进入宝贝识物首关运行态，运行态消费当前草稿中的两个物品名称和两张物品图，不重新生成或改写物品内容。
 
+若草稿包含视觉主题包，运行态还必须消费该主题包中的背景环境、UI 装饰、礼物盒、篮子和烟雾弹出特效资源；旧草稿或接口失败时允许回退到当前 CSS 绘本风兜底。
+
 ## 6. 发布后体验
 
 发布完成后作品应进入寓教于乐内容线，并在寓教于乐入口开启时可被板块消费。
@@ -73,27 +88,30 @@
 
 本 PRD 同步约束首关运行态，已确认规则包括：
 
-1. 礼物盒打开在本地调试绑定 `F` 键；
+1. 进入关卡后礼物盒自动打开并弹出首个随机物品；
 2. 每轮仅中间礼物盒跳出的物品随机；左右两侧篮子固定为当前草稿两个物品的顺序；
 3. 下一关按钮当前占位；
 4. 不新增用户未确认的计时、失败次数、分数、体力或难度递增。
 5. 屏幕中上方字幕固定为“将物品放入对应的篮子里”。
-6. 礼物盒位于屏幕中下方，任意手抬起后打开并跳出下一个随机物品。
+6. 礼物盒位于屏幕中下方并按当前视觉放大一倍，首次进入关卡和每次正确反馈结束后的新轮次都从上方落下后自动打开。
 7. 屏幕下方左侧和右侧分别展示两个固定篮子，左侧固定使用草稿第一个物品图，右侧固定使用草稿第二个物品图。
-8. 明确左手连续横向移动达到阈值时将当前物品送入左侧篮子，明确右手连续横向移动达到阈值时将当前物品送入右侧篮子；选篮不使用动作名判定，侧别未知的手部轨迹不参与选篮。
-9. 正确时展示“真棒”字幕和正确特效；错误时展示“再想一想吧”字幕和错误特效，物品回到中央。
-10. 成功 20 次后展示“恭喜你！小朋友！”字幕和特效，并展示“再来一次”和“下一关”按钮。
-11. 当前本地 Demo 阶段音效与语音播报接口只预留调用点，不在前端写死外部硬件或服务接口。
+8. 左右篮子按当前视觉放大 50%。
+9. 礼物盒打开时播放烟雾特效，中央物品从烟雾特效中弹出；物品弹出后礼物盒从舞台移除。
+10. 明确左手连续横向移动达到阈值时将当前物品送入左侧篮子，明确右手连续横向移动达到阈值时将当前物品送入右侧篮子；选篮不使用动作名判定，侧别未知的手部轨迹不参与选篮。
+11. 正确时展示“真棒”字幕和正确特效；错误时展示“再想一想吧”字幕和错误特效，物品回到中央。
+12. 成功 20 次后展示“恭喜你！小朋友！”字幕和特效，并展示“再来一次”和“下一关”按钮。
+13. 当前本地 Demo 阶段音效与语音播报接口只预留调用点，不在前端写死外部硬件或服务接口。
 
 ## 8. 验收
 
 1. 创作入口显示 `宝贝识物` 并可进入模板表单。
 2. 未填写任一物品名称时不能生成草稿。
 3. 生成草稿后进入结果页，展示两个物品名称和物品图。
-4. 草稿标签中始终包含精确 `寓教于乐`。
-5. 发布 payload 始终包含精确 `寓教于乐`。
-6. 发布完成后出现分享弹窗或发布完成状态。
-7. 前端不读取或暴露 VectorEngine 密钥。
-8. 结果页试玩进入宝贝识物运行态，不再显示“试玩关卡正在接入中”。
-9. 运行态可通过 `F` 打开礼物盒，通过鼠标左键拖动映射左手横向移动，通过鼠标右键拖动映射右手横向移动。
-10. 成功 20 次后出现“再来一次”和“下一关”按钮。
+4. 生成草稿后包含视觉主题包，主题包含背景环境、UI 装饰框、礼物盒、篮子和烟雾弹出特效资源。
+5. 草稿标签中始终包含精确 `寓教于乐`。
+6. 发布 payload 始终包含精确 `寓教于乐`。
+7. 发布完成后出现分享弹窗或发布完成状态。
+8. 前端不读取或暴露 VectorEngine 密钥。
+9. 结果页试玩进入宝贝识物运行态，不再显示“试玩关卡正在接入中”。
+10. 运行态通过鼠标左键拖动映射左手横向移动，通过鼠标右键拖动映射右手横向移动。
+11. 成功 20 次后出现“再来一次”和“下一关”按钮。

docs/prd/README.md

@@ -4,6 +4,7 @@
 
 ## 重点入口
 
+- [宝贝爱画寓教于乐独立关卡 PRD](./BABY_LOVE_DRAWING_EDUTAINMENT_LEVEL_PRD_2026-05-13.md)：定义寓教于乐内容线的 `宝贝爱画` 独立本地 Demo 关卡，覆盖画板、七色选择、画笔/橡皮、手部绘画、完成、image-2 绘画魔法、本地保存和关闭入口隐藏边界。
 - [宝贝识物寓教于乐模板 PRD](./BABY_OBJECT_MATCH_EDUTAINMENT_TEMPLATE_PRD_2026-05-11.md)：定义寓教于乐内容线的 `宝贝识物` 创作模板，覆盖两个物品名称输入、image-2 物品图生成、精确 `寓教于乐` 标签、结果页和发布边界。
 - [AI 原生幕间文字游戏模板 PRD：参考 MOKU 的剧本模拟器闭环](./AI_NATIVE_TEXT_GAME_TEMPLATE_MOKU_REFERENCE_PRD_2026-05-05.md)：参考 MOKU / 幕间类 AI 文游的剧本游乐场、自由行动、AI GM、记忆和模拟器强反馈经验，但只落为陶泥儿 `text-game` 模板，复用平台接口，不迁入外部社区、支付、私有存档或回放。
 - [AI 原生视觉小说模板 PRD：TXT 玩法平台化接入](./AI_NATIVE_VISUAL_NOVEL_TEMPLATE_PRD_2026-05-05.md)：参考 `Interactive-fiction-backend` / `Interactive-fiction-frontend` 的 TXT 玩法经验，但只保留视觉小说模板创作与运行闭环，完全使用 Genarrative 平台接口，并明确删除回放和外部平台功能。

docs/technical/BABY_LOVE_DRAWING_RUNTIME_DEMO_IMPLEMENTATION_2026-05-13.md

@@ -0,0 +1,202 @@
+# 宝贝爱画本地 Demo 运行态实现方案 2026-05-13
+
+## 1. 范围
+
+本方案落地寓教于乐独立关卡：
+
+```text
+baby-love-drawing / 宝贝爱画
+```
+
+当前范围只做本地 Demo 闭环：
+
+1. 寓教于乐频道默认关卡卡片；
+2. 独立运行态；
+3. mocap 与开发者调试输入；
+4. Canvas 绘制和擦除；
+5. image-2 绘画魔法后端代理；
+6. localStorage 本地保存；
+7. 直达路由开关保护。
+
+本阶段不接正式持久化表，不新增作品发布、作品号、公开详情或搜索入口。
+
+## 2. 前端接入点
+
+已新增页面阶段：
+
+```text
+baby-love-drawing-runtime
+```
+
+已新增路由：
+
+```text
+/runtime/baby-love-drawing
+```
+
+已新增文件：
+
+```text
+packages/shared/src/contracts/edutainmentBabyDrawing.ts
+src/services/edutainment-baby-drawing/babyDrawingClient.ts
+src/components/edutainment-runtime/babyLoveDrawingModel.ts
+src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx
+server-rs/crates/api-server/src/edutainment_baby_drawing.rs
+```
+
+已接入：
+
+1. `src/components/rpg-entry/RpgEntryHomeView.tsx`：寓教于乐频道默认展示宝贝爱画卡片；
+2. `src/components/platform-entry/PlatformEntryFlowShellImpl.tsx`：启动宝贝爱画运行态；
+3. `src/components/platform-entry/platformEntryTypes.ts`：扩展 `SelectionStage`；
+4. `src/routing/appPageRoutes.ts`：扩展路由；
+5. `src/routing/appRoutes.tsx`：直达路由开关保护；
+6. `src/index.css`：补齐寓教于乐默认关卡卡片和宝贝爱画运行态样式；
+7. `server-rs/crates/api-server/src/app.rs`：挂载绘画魔法后端路由。
+
+## 3. 契约
+
+契约放在：
+
+```text
+packages/shared/src/contracts/edutainmentBabyDrawing.ts
+```
+
+核心字段：
+
+1. `templateId = "baby-love-drawing"`；
+2. `templateName = "宝贝爱画"`；
+3. `originalImageSrc` 保存原始画布图；
+4. `magicImageSrc` 保存 image-2 魔法图，可为 `null`；
+5. `strokeTrace` 保存画笔和橡皮轨迹；
+6. `saveMode = "original-only" | "original-and-magic"` 记录保存结果。
+
+## 4. 运行态模型
+
+运行态状态：
+
+```text
+drawing
+finished
+magicPending
+magicReady
+saved
+```
+
+工具：
+
+```text
+brush
+eraser
+```
+
+颜色：
+
+```text
+红、橙、黄、绿、青、蓝、紫
+```
+
+按钮悬停：
+
+1. 颜色选择只接受左手悬停，阈值 1500ms；
+2. 按钮选择接受任一手悬停，阈值 2000ms；
+3. 工具切换只接受右手在工具区域握拳。
+4. 画笔 / 橡皮光标位置只接受右手坐标；左手缺帧或左手移动不得重置、替换或驱动画笔位置。
+5. 左手需要显示独立位置指示器，帮助用户确认当前是否悬停在目标颜色上；该指示器只表达左手位置，不参与画笔 / 橡皮操作。
+6. 本地 mocap handedness 当前按摄像头视角输出，宝贝爱画运行态消费前需要换算为用户身体视角：`rightHand` 作为用户左手，`leftHand` 作为用户右手。键鼠调试输入不做该换算。
+7. 真实硬件短暂缺失某只手时，显示层保留上一帧位置约 320ms 并做轻微坐标平滑；绘制层仍只在当前帧确认用户右手存在时生效。
+8. 为避免左手抢画笔，本关不做动态 handedness 换手纠正；`rightHand` 永远只进入用户左手选色通道，`leftHand` 永远只进入用户右手画笔通道。若硬件侧 handedness 继续抖动，宁可右手画笔短暂停住，也不允许左手驱动画笔。
+9. 右手画笔通道增加单帧最大位移门禁；若 camera-left 候选点相对上一帧右手位置出现不合理大跳，判定为不可信帧，只保留上一帧光标并停止绘制。
+
+## 5. Canvas 绘制
+
+画板使用 DOM Canvas。
+
+绘制规则：
+
+1. 右手在画板内且状态为 `grab` 时生效；
+2. 工具为 `brush` 时，以当前颜色绘制连续线段；
+3. 工具为 `eraser` 时，以 `destination-out` 擦除；
+4. 右手状态为 `open_palm` 或离开画板时结束当前笔画；
+5. 当前帧没有右手坐标时只结束当前笔画，不把左手坐标用于绘制、擦除或光标定位；
+6. 每条笔画记录工具、颜色、点位和时间。
+
+## 6. 绘画魔法
+
+前端 service：
+
+```text
+createBabyDrawingMagicImage(payload)
+```
+
+后端接口：
+
+```text
+POST /api/creation/edutainment/baby-love-drawing/magic
+```
+
+请求体：
+
+```json
+{
+  "originalImageSrc": "data:image/png;base64,...",
+  "strokeTrace": []
+}
+```
+
+响应体：
+
+```json
+{
+  "magicImageSrc": "data:image/png;base64,...",
+  "generationProvider": "vector-engine-gpt-image-2",
+  "prompt": "..."
+}
+```
+
+后端使用 VectorEngine `gpt-image-2-all`，把原始画布图作为参考图，生成绘本风格图片。
+
+本地未配置 VectorEngine 或接口失败时，前端允许提示错误并保留原图保存能力；不得把失败伪装成正式魔法图。
+
+后端接入约束：
+
+1. 接口需要 Bearer 鉴权；
+2. 请求体限制为 8MB；
+3. `originalImageSrc` 只接受图片 Data URL；
+4. 笔触数量上限为 600 条；
+5. 上游参考图字段使用 VectorEngine 统一契约 `image`；
+6. 关闭入口时，`creation_entry_config` 路由熔断可识别 `baby-love-drawing`。
+
+## 7. 本地保存
+
+本地保存使用：
+
+```text
+localStorage key = genarrative.edutainmentBabyDrawing.localDrawings.v1
+```
+
+保存策略：
+
+1. 魔法生成前保存：`saveMode = "original-only"`，只保存 `originalImageSrc`；
+2. 未保存原图直接生成魔法后保存：`saveMode = "original-and-magic"`，保存 `originalImageSrc` 和 `magicImageSrc`；
+3. 保存后展示“再画一张”和“返回”。
+
+## 8. 验收命令
+
+```bash
+npm run test -- src/components/edutainment-runtime/babyLoveDrawingModel.test.ts src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.test.tsx src/services/edutainment-baby-drawing/babyDrawingClient.test.ts src/routing/appRoutes.test.ts
+cargo test -p api-server edutainment_baby_drawing --manifest-path server-rs/Cargo.toml
+cargo test -p api-server resolves_runtime_paths_to_creation_type_ids --manifest-path server-rs/Cargo.toml
+npx eslint src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx src/components/edutainment-runtime/babyLoveDrawingModel.ts src/services/edutainment-baby-drawing/babyDrawingClient.ts src/routing/appRoutes.tsx --ext .ts,.tsx --max-warnings 0
+npm run typecheck
+npm run check:encoding
+```
+
+## 9. 已覆盖测试
+
+1. `src/components/edutainment-runtime/babyLoveDrawingModel.test.ts`：颜色 / 按钮悬停阈值、坐标归一化、笔触追加；
+2. `src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.test.tsx`：画板、七色、画笔 / 橡皮、完成保存、返回按钮、左手位置指示器、mocap 摄像头视角到用户身体视角换算、左手输入不替换画笔光标位置、左手短暂缺帧不闪烁、用户左手不能抢占右手画笔、camera-left 大跳不接入画笔；
+3. `src/services/edutainment-baby-drawing/babyDrawingClient.test.ts`：原图保存、原图加魔法图保存、后端魔法接口请求；
+4. `src/routing/appRoutes.test.ts`：`/runtime/baby-love-drawing` 开启可达、关闭回落主应用；
+5. `server-rs/crates/api-server/src/edutainment_baby_drawing.rs` 内部单测：prompt、Data URL 校验、PNG 输出和轨迹范围摘要；
+6. `server-rs/crates/api-server/src/creation_entry_config.rs` 路由映射单测：确认后端熔断可识别 `baby-love-drawing`。

docs/technical/BABY_OBJECT_MATCH_CREATION_PUBLISH_IMPLEMENTATION_2026-05-11.md

@@ -30,13 +30,15 @@ baby-object-match
 宝贝识物
 ```
 
-入口文件：
+工程接入文件：
 
-1. `src/config/newWorkEntryConfig.ts`
+1. `server-rs/crates/spacetime-module/src/runtime/creation_entry_config.rs`
 2. `src/components/platform-entry/platformEntryCreationTypes.ts`
 3. `src/components/platform-entry/PlatformEntryCreationTypeModal.tsx`
 4. `src/components/platform-entry/PlatformEntryFlowShellImpl.tsx`
 
+`src/config/newWorkEntryConfig.ts` 已迁移删除，不再作为入口事实源。`baby-object-match` 必须存在于 SpacetimeDB `creation_entry_type_config` 默认种子中，默认展示名为 `宝贝识物`、`visible=true`、`open=true`、`sortOrder=90`；前端只通过 `GET /api/creation-entry/config` 读取后端配置并在 `platformEntryCreationTypes.ts` 做展示派生。
+
 `baby-object-match` 必须复用 `VITE_ENABLE_EDUTAINMENT_ENTRY` 开关；开关关闭时，创作类型弹层不展示 `宝贝识物`，创作页作品架不展示本地宝贝识物草稿或已发布作品卡，公开发现、搜索、详情、作品号和浏览历史也继续完全不可见。
 
 新增阶段：
@@ -62,7 +64,8 @@ packages/shared/src/contracts/edutainmentBabyObject.ts
 2. `BabyObjectMatchDraft.templateName = "宝贝识物"`；
 3. `BabyObjectMatchDraft.themeTags` 必须包含精确 `寓教于乐`；
 4. `BabyObjectMatchItemAsset.generationProvider` 首版允许为 `vector-engine-gpt-image-2` 或 `placeholder`；
-5. `BabyObjectMatchPublishRequest.draft.themeTags` 发布前必须归一化补齐 `寓教于乐`。
+5. `BabyObjectMatchDraft.visualPackage` 可选承载背景环境、UI 装饰框、礼物盒、篮子和烟雾弹出特效五类视觉资源；
+6. `BabyObjectMatchPublishRequest.draft.themeTags` 发布前必须归一化补齐 `寓教于乐`。
 
 ## 4. Service 边界
 
@@ -76,9 +79,64 @@ src/services/edutainment-baby-object/babyObjectMatchClient.ts
 
 1. `createBabyObjectMatchDraft(payload)`；
 2. `saveBabyObjectMatchDraft(draft)`；
-3. `publishBabyObjectMatchWork(payload)`。
+3. `publishBabyObjectMatchWork(payload)`；
+4. `deleteLocalBabyObjectMatchDraft(profileId)`；
+5. `regenerateBabyObjectMatchDraftAssets(draft)`；
+6. `hasBabyObjectMatchPlaceholderAssets(draft)`。
 
-当前后端正式接口未在本线程扩表落地，因此 service 先走本地 Demo 存储，并把 asset 结果标记为 `placeholder`。后续后端接入时，应替换为：
+当前后端正式作品持久化接口未在本线程扩表落地，因此 service 仍使用本地 Demo 存储草稿和发布状态。由于 image-2 会返回多张 base64 PNG 大图，本地 Demo 草稿必须优先写入 IndexedDB `genarrative-edutainment-baby-object-drafts/drafts`，不得把完整草稿 JSON 写入 `localStorage`；`localStorage` 仅作为旧版小草稿迁移读取来源，读取后迁移到 IndexedDB 并清理旧 key，避免触发浏览器 `Storage` 配额错误。
+
+物品图片生成已接入后端 image-2 接口：
+
+```text
+POST /api/creation/edutainment/baby-object-match/assets
+```
+
+请求体：
+
+```json
+{
+  "itemNames": ["苹果", "香蕉"]
+}
+```
+
+响应体：
+
+```json
+{
+  "assets": [
+    {
+      "itemId": "baby-object-item-1",
+      "itemName": "苹果",
+      "imageSrc": "data:image/png;base64,...",
+      "assetObjectId": null,
+      "generationProvider": "vector-engine-gpt-image-2",
+      "prompt": "..."
+    }
+  ],
+  "visualPackage": {
+    "themePrompt": "...",
+    "assets": [
+      {
+        "assetId": "baby-object-visual-background",
+        "assetKind": "background",
+        "imageSrc": "data:image/png;base64,...",
+        "assetObjectId": null,
+        "generationProvider": "vector-engine-gpt-image-2",
+        "prompt": "..."
+      }
+    ]
+  }
+}
+```
+
+该接口返回物品透明 PNG data URL，以及同一次创作生成的视觉主题包。本地 Demo 阶段暂不写入 OSS 或 SpacetimeDB `asset_object`。当前创作链路必须真实拿到 `generationProvider = "vector-engine-gpt-image-2"` 的物品图和视觉主题包后才允许进入结果页；若本地未配置 VectorEngine、登录态失效、接口返回 401/5xx、上游生成失败或响应缺少任一资源，前端 service 必须抛出错误并停留在生成失败状态，不得静默回退到占位图。
+
+由于一次创作会生成 2 张物品图和 `background`、`ui-frame`、`gift-box`、`basket`、`smoke-puff` 5 张视觉包装图，该请求属于长耗时 image-2 链路。前端 `babyObjectMatchClient` 对该 POST 使用 10 分钟请求超时，且不做自动重试，避免第一次生成仍在后端执行时又发起第二次重复生成。后端同时启动物品图与视觉主题包生成，并把该路由的 VectorEngine 单图请求等待预算提升到至少 8 分钟，避免某张图 3 分钟附近仍在生成时被后端提前断开。后端日志记录每类资源的开始、完成和耗时，排查时优先按同一次 HTTP 请求查看 `宝贝识物 image-2 物品资源生成完成`、`宝贝识物 image-2 视觉资源生成完成` 与 `VectorEngine 图片生成上游错误`。
+
+历史本地草稿中若已保存 `generationProvider = "placeholder"` 的旧占位资源，结果页必须提示“重新生成 image-2 资源”，并禁用试玩和发布。用户点击重新生成、发布或试玩前，前端统一调用 `regenerateBabyObjectMatchDraftAssets(draft)` 补齐资源；补齐失败时保留在结果页并展示错误。
+
+后续正式作品持久化接入时，应补齐：
 
 ```text
 POST /api/creation/edutainment/baby-object-match/drafts
@@ -88,6 +146,25 @@ POST /api/creation/edutainment/baby-object-match/drafts/{draftId}/publish
 
 图片生成必须在后端调用 VectorEngine `gpt-image-2-all`，不得从前端直接调用外部图片接口。
 
+后端 image-2 prompt 约束：
+
+1. 锁定寓教于乐板块统一的卡通绘本草地舞台插画风；
+2. 每张图只能围绕对应关键词生成一个单一物品；
+3. 不生成背景、场景、氛围渲染、人物、手、篮子、礼物盒、文字、水印或 UI；
+4. 优先要求纯白或透明抠图友好的干净背景，服务端再统一转透明 PNG 并执行背景 alpha 清理；
+5. 返回 `generationProvider = "vector-engine-gpt-image-2"` 的素材必须已经完成透明抠图。
+
+后端视觉主题包 prompt 约束：
+
+1. 同一次请求根据两个物品关键词生成 `background`、`ui-frame`、`gift-box`、`basket`、`smoke-puff` 五类资源；
+2. 总风格继续锁定寓教于乐明亮卡通绘本插画风；
+3. 若关键词偏动漫角色、玩具或公仔，背景环境和 UI 元素匹配动漫、玩具主题；若关键词偏水果，匹配果园、自然主题；其它关键词按语义匹配合适主题；
+4. 背景环境图使用非透明 16:9 图，但必须保证中间、中下方和底部左右篮子区域清爽，给放大后的礼物盒、中央物品和左右篮子预留空间，不画入礼物盒、篮子、物品、人物、文字或操作 UI；
+5. UI 装饰框、礼物盒、篮子和烟雾弹出特效使用透明 PNG 后处理，不生成文字、数字、按钮、人物或待分类物品；
+6. `gift-box` 提示词必须面向运行态约 2 倍视觉尺寸生成主体饱满的大号礼物盒，`basket` 提示词必须面向运行态约 1.5 倍视觉尺寸生成可读性高的大号篮子；
+7. `smoke-puff` 只生成礼物盒打开瞬间使用的柔和烟雾云朵特效，不生成礼物盒、篮子、物品或文字；
+8. 左右篮子的固定选项规则不受主题包影响，运行态只把 `basket` 作为篮子造型包装复用。
+
 ## 5. UI 边界
 
 工作台只展示两个必填输入和生成按钮。
@@ -107,27 +184,37 @@ src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.tsx
 运行态直接消费 `BabyObjectMatchDraft`，必须使用草稿中的两个物品名称和物品图。
 每轮只随机当前从礼物盒跳出的物品；左右篮子不随机交换，左侧固定为草稿 `itemAssets[0]`，右侧固定为草稿 `itemAssets[1]`。
 
+若草稿包含 `visualPackage`，运行态通过背景图片层、CSS 变量和图片节点消费：
+
+1. `background`：作为舞台最底层 `ResolvedAssetImage` 背景图；存在该资源时必须关闭默认草地兜底层，避免生成场景被 CSS 草地遮住或弱化；
+2. `ui-frame`：作为字幕条和计数器装饰背景；
+3. `gift-box`：替换 CSS 礼物盒主体，按旧视觉约 2 倍尺寸展示，只在礼盒入场和打开阶段存在；
+4. `basket`：替换篮子主体造型，按旧视觉约 1.5 倍尺寸展示，左右两侧复用同一张主题篮子图；
+5. `smoke-puff`：作为礼物盒打开和中央物品弹出期间的透明烟雾特效资源。
+
+旧草稿或接口失败时 `visualPackage = null`，运行态继续使用现有 CSS 绘本风兜底。
+
 首关状态机：
 
-1. `waiting`：礼物盒关闭，等待任意手抬起；
-2. `active`：当前物品停留在屏幕中央；
-3. `correct`：展示“真棒”反馈，成功次数加 1；
-4. `wrong`：展示“再想一想吧”反馈，当前物品回到中央；
-5. `complete`：成功次数达到 20，展示“恭喜你！小朋友！”和按钮。
+1. `gift-entering`：礼物盒从上方落下入场动画阶段，不接受动作判定；
+2. `gift-opening`：礼物盒打开并播放烟雾特效阶段，不接受动作判定；
+3. `item-appearing`：礼物盒从舞台移除，当前物品从烟雾中出现并停稳，不接受动作判定；
+4. `active`：物品彻底出现后才开放选篮判定；
+5. `correct`：展示“真棒”反馈，对应篮筐播放正确特效并停顿，成功次数加 1；特效完全结束后重新进入 `gift-entering`，下一轮礼物盒从上方落下；
+6. `wrong`：展示“再想一想吧”反馈，物品弹回中央；反馈结束后回到 `active`，不重新随机物品；
+7. `complete`：成功次数达到 20，展示“恭喜你！小朋友！”和按钮。
 
 动作输入：
 
-1. 任意手完成一次 `open_palm -> grab` 抓握序列：打开礼物盒并生成当前物品；
-2. 左手连续横向移动达到阈值：将当前物品送入左侧篮子；
-3. 右手连续横向移动达到阈值：将当前物品送入右侧篮子。
+1. 左手连续横向移动达到阈值：将当前物品送入左侧篮子；
+2. 右手连续横向移动达到阈值：将当前物品送入右侧篮子。
 
-运行态直接通过 `useMocapInput` 消费本地 mocap WebSocket `/stream`。选篮只使用明确 `leftHand` 或 `rightHand` 的连续横向轨迹阈值，不再通过 `wave_left_hand`、`wave_right_hand`、`wave` 等动作名触发；侧别为 `unknown` 的手部轨迹也不参与选篮，以避免多套判定误命中和连续误触发。当前本地 mocap 输出的 handedness 按摄像头视角标记，宝贝识物运行态必须先换算为用户身体视角：`rightHand` 轨迹映射玩家左手并进入左侧篮子，`leftHand` 轨迹映射玩家右手并进入右侧篮子。草稿试玩、发布后正式体验和热身关后的本地 Demo 都复用同一个运行态，因此三条入口都必须具备同一套动作控制能力。
+运行态直接通过 `useMocapInput` 消费本地 mocap WebSocket `/stream`。选篮只使用明确 `leftHand` 或 `rightHand` 的连续横向轨迹阈值，不再通过 `wave_left_hand`、`wave_right_hand`、`wave` 等动作名触发；侧别为 `unknown` 的手部轨迹也不参与选篮，以避免多套判定误命中和连续误触发。动作判定只在 `active` 阶段开放，礼盒入场、礼盒打开、物品出现、正确反馈和错误反馈阶段收到的动作包必须清空轨迹并忽略，不允许跨阶段补判定。当前本地 mocap 输出的 handedness 按摄像头视角标记，宝贝识物运行态必须先换算为用户身体视角：`rightHand` 轨迹映射玩家左手并进入左侧篮子，`leftHand` 轨迹映射玩家右手并进入右侧篮子。草稿试玩、发布后正式体验和热身关后的本地 Demo 都复用同一个运行态，因此三条入口都必须具备同一套动作控制能力。
 
 开发者调试输入：
 
-1. `F`：映射任意手抬起，打开礼物盒并生成当前物品；
-2. 鼠标左键按下并拖动：映射左手轨迹，抬起后将当前物品送入左侧篮子；
-3. 鼠标右键按下并拖动：映射右手轨迹，抬起后将当前物品送入右侧篮子。
+1. 鼠标左键按下并拖动：映射左手轨迹，抬起后将当前物品送入左侧篮子；
+2. 鼠标右键按下并拖动：映射右手轨迹，抬起后将当前物品送入右侧篮子。
 
 运行态不得新增计时、失败次数、分数、体力或难度递增规则。
 
@@ -154,6 +241,7 @@ src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.tsx
 
 ```bash
 npm run test -- src/components/platform-entry/platformEntryCreationTypes.test.ts src/components/edutainment-creation/BabyObjectMatchWorkspace.test.tsx src/components/edutainment-result/BabyObjectMatchResultView.test.tsx src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.test.tsx src/components/child-motion-demo/ChildMotionWarmupDemo.test.tsx src/services/edutainment-baby-object/babyObjectMatchClient.test.ts
+cargo test -p api-server edutainment_baby_object --manifest-path server-rs/Cargo.toml
 npx vitest run src/components/platform-entry/platformEdutainmentVisibility.test.ts src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/custom-world-home/creationWorkShelf.test.ts src/services/useMocapInput.test.ts src/services/child-motion-demo/childMotionDebugInput.test.ts src/routing/appRoutes.test.ts
 npx eslint src/components/platform-entry/platformEntryCreationTypes.ts src/components/platform-entry/platformEntryCreationTypes.test.ts src/components/platform-entry/PlatformEntryFlowShellImpl.tsx --ext .ts,.tsx --max-warnings 0
 npm run check:encoding

docs/technical/CHILD_MOTION_DEMO_WARMUP_IMPLEMENTATION_SPEC_2026-05-09.md

@@ -170,6 +170,9 @@
 3. 位置类状态必须满足“到达绿色圆环并保持 2 秒”。
 4. 动作类状态没有最长等待时间。
 5. 动作类状态等待 3 秒后可以播放对应引导动画。
+6. 每个步骤进入时需要先展示本步骤文字字幕和语音播报入口，约 1 秒后再进入可交互阶段并展示绿色圆环、手势引导等检测提示。
+7. 步骤完成后需要先进入完成停顿阶段，当前停顿约 0.8 秒；停顿期间保留完成反馈位置，后续可在该阶段补充完成特效或音效，再切换到下一步骤。
+8. 入场等待和完成停顿阶段不消费动作完成判定，避免用户上一步残留动作直接触发下一步。
 
 ### 6.3 开发者调试输入
 
@@ -368,6 +371,17 @@
 
 用户完成挥动左手。
 
+当前本地 mocap 的 handedness 按摄像头视角输出，热身关内需要先换算成用户身体视角再判断：摄像头右侧手对应用户左手。挥动左手不是普通横向轨迹检测，而是用于确认现实环境中用户左侧手臂打开空间足够和安全。
+
+完成条件必须同时满足：
+
+1. 使用用户身体左手轨迹。
+2. 手腕在左肩外侧达到最小外展距离。
+3. 手腕不能处于自然下垂低位。
+4. 最近连续有效帧中，手臂存在足够上下摆动幅度。
+5. 最近连续有效帧中，肩膀到手腕向量的角度变化达到阈值。
+6. 至少出现一次上下摆动方向变化。
+
 #### 完成反馈
 
 ```text
@@ -376,7 +390,7 @@
 
 #### 数据记录
 
-记录用户挥动左手的空间，保存为该用户对应的行为坐标。
+记录用户挥动左手的轨迹、空间包络、角度范围和最大外展距离，保存为该用户对应的行为坐标。
 
 ---
 
@@ -398,6 +412,17 @@
 
 用户完成挥动右手。
 
+当前本地 mocap 的 handedness 按摄像头视角输出，热身关内需要先换算成用户身体视角再判断：摄像头左侧手对应用户右手。挥动右手不是普通横向轨迹检测，而是用于确认现实环境中用户右侧手臂打开空间足够和安全。
+
+完成条件必须同时满足：
+
+1. 使用用户身体右手轨迹。
+2. 手腕在右肩外侧达到最小外展距离。
+3. 手腕不能处于自然下垂低位。
+4. 最近连续有效帧中，手臂存在足够上下摆动幅度。
+5. 最近连续有效帧中，肩膀到手腕向量的角度变化达到阈值。
+6. 至少出现一次上下摆动方向变化。
+
 #### 完成反馈
 
 ```text
@@ -406,7 +431,7 @@
 
 #### 数据记录
 
-记录用户挥动右手的空间，保存为该用户对应的行为坐标。
+记录用户挥动右手的轨迹、空间包络、角度范围和最大外展距离，保存为该用户对应的行为坐标。
 
 ---
 
@@ -653,18 +678,21 @@
 3. 鼠标左键按下并拖动映射左手轨迹。
 4. 鼠标右键按下并拖动映射右手轨迹。
 5. 空格键映射原地跳跃。
+6. 调试输入只在步骤可交互阶段触发步骤完成；步骤入场字幕阶段和完成停顿阶段会忽略完成判定，便于观察节奏和后续补充特效。
 
 当前硬件和动作检测接口接入：
 
 1. 浏览器摄像头视频流已接入舞台背景。
 2. 热身关全流程已通过 `src/services/useMocapInput.ts` 接入本地 mocap WebSocket `/stream`；动作数据源状态优先于浏览器背景摄像头状态展示。
 3. mocap 包支持从 `general.body.center_norm` 读取身体中心，位置类步骤使用该身体中心更新角色剪影横向位置并完成圆环保持检测。
-4. mocap 包支持从 `actions/action/gesture/gestures/event/name/type` 读取动作名，并支持 `hands[]`、`leftHand/rightHand`、`left_hand/right_hand` 读取左右手坐标。
-5. `hands[].landmarks` 存在时优先用手腕和 MCP 点计算掌心中心；掌心点不足时退回 wrist landmark，再退回 hand 直出坐标。
-6. `wave_greeting` 可由 `wave/wave_greeting/hand_wave/open_palm` 等动作或 open palm 手势完成。
-7. `wave_left_hand` 和 `wave_right_hand` 优先消费对应左右手动作名；当硬件只持续输出手部坐标时，也可以根据连续手部横向轨迹完成挥手检测。
-8. `jump_once` 消费 `jump/jump_once/hop` 等跳跃动作事件完成。
-9. 键盘 `A/D/Space` 与鼠标左右键拖拽仍保留为本地 Demo 调试兜底，不代表正式硬件口径。
+4. 身体中心横向坐标进入角色剪影前必须做输入稳定化处理：先 clamp 到 `0..1`，再使用小幅死区、低通阻尼和单包最大步长限制，避免硬件噪声造成角色左右误判、画面抽搐或视觉上的忽大忽小。当前实现参数为死区 `0.012`、阻尼系数 `0.28`、单包最大步长 `0.035`；位置保持检测使用稳定化后的角色坐标。
+5. 角色剪影渲染需要把水平位移和跳跃表现拆开：外层只负责横向定位，内层资源只负责轮廓图和跳跃位移，避免 `left` 与 `transform` 同时抢占导致半透明资源重采样抖动。
+6. mocap 包支持从 `actions/action/gesture/gestures/event/name/type` 读取动作名，并支持 `hands[]`、`leftHand/rightHand`、`left_hand/right_hand` 读取左右手坐标。
+7. `hands[].landmarks` 存在时优先用手腕和 MCP 点计算掌心中心；掌心点不足时退回 wrist landmark，再退回 hand 直出坐标。
+8. `wave_greeting` 只消费左手、右手或未知单手的连续横向挥手轨迹，不再使用 `wave`、`hand_wave`、`open_palm`、张手状态或动作名直接完成判定；进入轨迹判定前必须先满足抬手有效区：优先使用 `hands[].landmarks.wrist` 与 `general.limb_nodes` 的同侧 `*_elbow` / `*_shoulder` 判断，当前阈值为 `wrist.y <= elbow.y + 0.04`，缺少肘部时使用 `wrist.y <= shoulder.y + 0.08`；缺少同侧肘部和肩膀参考时不允许招呼通过，不再使用身体中心兜底判断抬手。轨迹阈值为至少 5 个连续抬手点，横向 `x` 范围差值不小于 `0.075`，且至少出现 1 次横向方向变化，避免“手刚露出画面”或“手自然下垂抖动”被误判为招手。
+9. `wave_left_hand` 和 `wave_right_hand` 只消费用户身体侧对应手的连续坐标轨迹，不再使用动作名、张手状态或 primary hand 兜底完成判定；本地 mocap handedness 当前按摄像头视角输出，因此用户左手使用 camera-right，用户右手使用 camera-left。完成判定必须同时满足对应肩肘腕外展、手腕非自然下垂、连续有效帧、横向范围、上下摆动范围、肩腕角度范围和上下方向变化，当前阈值为连续外展点不少于 5 个、横向 `x` 范围不小于 `0.055`、垂直 `y` 范围不小于 `0.08`、肩腕角度范围不小于 `28°`、外展距离不小于 `0.12`、手腕相对肩膀外侧距离不小于 `0.1`；后续以真实体验结果继续调参。
+10. `jump_once` 消费 `jump/jump_once/hop` 等跳跃动作事件完成。
+11. 键盘 `A/D/Space` 与鼠标左右键拖拽仍保留为本地 Demo 调试兜底，不代表正式硬件口径。
 
 当前未接入但已保留边界：
 
@@ -682,14 +710,17 @@
 5. 当前已生成并接入以下正式 Demo 资源：
    - `public/child-motion-demo/picture-book-grass-stage.png`：默认草地舞台背景。
    - `public/child-motion-demo/picture-book-foreground-grass-v2.png`：底部前景草坪条，只覆盖舞台下沿，不作为整块地板拉伸。
-   - `public/child-motion-demo/picture-book-ground-ring-v2.png`：已按透视绘制的地面椭圆指示环，CSS 只等比缩放。
+   - `public/child-motion-demo/picture-book-ground-ring-v3.png`：已按透视绘制的浅蓝与暖黄色地面椭圆指示环，和草地材质做明显区分，CSS 只等比缩放。
    - `public/child-motion-demo/picture-book-character-outline-v2.png`：半透明用户角色轮廓，使用独立去背后处理避免内部填充被误删。
    - `public/child-motion-demo/picture-book-hud-strip-v2.png`：顶部 HUD 细长软纸条。
    - `public/child-motion-demo/picture-book-calibration-strip-v2.png`：右下角五格热身状态条。
    - `public/child-motion-demo/picture-book-start-panel-v2.png`：开始按钮背后的轻盈托盘。
    - `public/child-motion-demo/picture-book-ui-button-v2.png`：开始按钮绘本风按钮底图。
+   - `public/child-motion-demo/picture-book-wave-cat-body-guide-v6.png`：招手阶段中央猫咪身体底座资源，按可动纸偶结构只包含猫头、短身体和肩部连接点，不再和旧猫头、胸口或猫爪资源叠加。
+   - `public/child-motion-demo/picture-book-wave-cat-arm-guide-v6.png`：招手阶段左右独立手臂资源，也用于左右手阶段单手提示；网页用同一拆件镜像复用，并围绕肩部挂点做挥手摆动动画。
 6. v2 资源按最终用途拆分，CSS 必须按资源原始比例、`aspect-ratio` 或 `background-size: contain / auto` 等方式等比使用；禁止把方形面板强行拉伸为 HUD、状态条或地板，也禁止把底部草坪扩展成覆盖角色脚下的大色块。
-7. 若后续补充或重绘资源，应先运行 `npm run assets:child-motion-demo -- --dry-run` 核对 prompt 和输出路径，再使用 `--live --only <asset-id>` 小批量生成；仅调整透明去背、裁切、画布归一或品红边缘时，可用 `npm run assets:child-motion-demo -- --live --postprocess-only --force --only <asset-id>` 复用 `tmp/child-motion-demo-assets/` 中的源图，不额外请求 image-2；不得把 `VECTOR_ENGINE_API_KEY`、源图或中间预览图提交到仓库。
+7. 猫咪招手引导资源使用 `cat-guide` 透明后处理：先由 image-2 生成品红底源图，再通过边缘背景连通区域去背，避免把浅粉、淡橘和暖棕主体误删。源图只保存在 `tmp/child-motion-demo-assets/`，正式页面只引用 `public/child-motion-demo/` 下的最终 PNG。
+8. 若后续补充或重绘资源，应先运行 `npm run assets:child-motion-demo -- --dry-run` 核对 prompt 和输出路径，再使用 `--live --only <asset-id>` 小批量生成；仅调整透明去背、裁切、画布归一或品红边缘时，可用 `npm run assets:child-motion-demo -- --live --postprocess-only --force --only <asset-id>` 复用 `tmp/child-motion-demo-assets/` 中的源图，不额外请求 image-2；不得把 `VECTOR_ENGINE_API_KEY`、源图或中间预览图提交到仓库。
 
 已执行的定向验证命令：
 

docs/technical/DEV_RUST_STACK_PORT_CONFLICT_PRECHECK_2026-05-09.md

@@ -32,6 +32,8 @@ process didn't exit successfully: `server-rs\target\debug\api-server.exe`
 
 主站和后台 Vite 也追加 `--strictPort`，避免默认漂移到 `3001`、`3103` 等端口后让浏览器继续访问旧页面。
 
+`--skip-spacetime` 是复用既有 SpacetimeDB 宿主的模式。该模式下脚本不会再把 SpacetimeDB 端口纳入可用性漂移；如果传入 `--spacetime-port 3101`，后端就会连接 `http://127.0.0.1:3101`。这可以避免 `3101` 已有 SpacetimeDB 在线时，端口工具误把它当作冲突并改到空闲的 `3102`，导致 api-server 连接空端口后 `/api/creation-entry/config`、作品架和公开图库接口同时返回 `502`。
+
 ## 排障步骤
 
 PowerShell 查看默认端口占用：
@@ -72,3 +74,4 @@ node scripts/run-bash-script.mjs scripts/dev-rust-stack.sh \
 1. `bash -n scripts/dev-rust-stack.sh` 通过。
 2. 默认端口被占用时重新运行完整栈，脚本应在 publish 前失败并打印占用进程。
 3. 清理占用进程或换端口后，重新启动时不再出现 Vite 端口漂移或 `api-server` `AddrInUse`。
+4. 复用 SpacetimeDB 时执行 `npm run dev -- --skip-spacetime --skip-publish --spacetime-port 3101`，启动日志里的 `[dev:rust] spacetime:` 应保持为 `http://127.0.0.1:3101`，并且 `GET /api/creation-entry/config` 不应因连接 `3102` 这类空端口而失败。

docs/technical/NEW_WORK_ENTRY_CONFIG_2026-05-01.md

@@ -9,6 +9,7 @@
 1. 新建作品入口配置统一存放在 SpacetimeDB 的 `creation_entry_config` / `creation_entry_type_config` 表；默认种子位于 `server-rs/crates/spacetime-module/src/runtime/creation_entry_config.rs`。
 2. `visible` 控制玩法是否展示在创作 Tab 模板入口、新建作品入口和创作类型弹层中。
 3. `open` 控制玩法是否允许点击创建以及对应创作 / runtime API 路由是否放行；`open: false` 时入口保持展示但禁用，并由 `api-server` 熔断对应玩法 API。
+   - 前端作品架、发现页聚合和预加载只应请求 `open: true` 的玩法接口；`open: false` 的未开放玩法可以展示为敬请期待入口，但不得把对应 API 熔断错误透传到草稿页或发现页。
 4. `title`、`subtitle`、`badge` 控制玩法卡片文案。
 5. `startCard` 控制旧创作中心顶部新建作品模块的标题、辅助文案和移动端角标文案；当前创作 Tab 首屏标题固定在 `PlatformEntryFlowShellImpl.tsx`，不再由 `startCard` 控制。
 6. `typeModal` 控制平台创作类型弹层标题和描述。
@@ -28,6 +29,21 @@
 | AIRP | 是 | 否 | 保留入口，显示敬请期待 |
 | 视觉小说 | 是 | 否 | 保留入口，显示敬请期待，暂不允许创建视觉小说草稿 |
 | 智能创作 | 否 | 是 | 入口隐藏，既有 `creative-agent` 链路保留 |
+| 宝贝识物 | 是 | 是 | 寓教于乐首关模板，必须由 `creation_entry_type_config` 默认种子或后台入口开关保持存在 |
+
+## 排障约束
+
+`baby-object-match` 是寓教于乐创作模板和发现页宝贝识物作品合流的共同开关。若 `creation_entry_type_config` 缺少该行，前端会同时出现“创作界面没有宝贝识物模板”和“寓教于乐分类下已发布作品消失”的现象。
+
+默认种子必须包含：
+
+- `id = baby-object-match`
+- `title = 宝贝识物`
+- `visible = true`
+- `open = true`
+- `sort_order = 90`
+
+入口图首版复用 `/child-motion-demo/picture-book-grass-stage.png`，后续如生成专属 image-2 入口图，可通过后台入口开关更新 `imageSrc`。
 
 ## 验收
 

docs/technical/README.md

@@ -5,6 +5,7 @@
 ## 文档列表
 
 - [WECHAT_MINIPROGRAM_WEB_VIEW_SHELL_2026-05-03.md](./WECHAT_MINIPROGRAM_WEB_VIEW_SHELL_2026-05-03.md)：记录微信小程序 `web-view` 壳的最小接入范围、需要填写的 H5 业务域名、微信后台配置、`npm run check:wechat-miniprogram-auth` 可重复登录链路 smoke 和后续原生化边界。
+- [BABY_LOVE_DRAWING_RUNTIME_DEMO_IMPLEMENTATION_2026-05-13.md](./BABY_LOVE_DRAWING_RUNTIME_DEMO_IMPLEMENTATION_2026-05-13.md)：冻结寓教于乐 `宝贝爱画` 独立本地 Demo 运行态实现方案，明确发现页默认卡片、`/runtime/baby-love-drawing` 路由、画板交互、mocap/键鼠调试映射、本地保存和 VectorEngine image-2 绘画魔法后端代理。
 - [BARK_BATTLE_BACKEND_DDD_TECHNICAL_PLAN_2026-05-11.md](./BARK_BATTLE_BACKEND_DDD_TECHNICAL_PLAN_2026-05-11.md)：冻结“汪汪声浪大作战 / bark-battle”后端 DDD 技术方案，明确 `server-rs + Axum + SpacetimeDB` 分层边界、shared contracts、作品配置、runtime run、派生成绩、排行榜、`work_play_start` 埋点、migration/绑定生成策略，以及不保存原始麦克风音频的隐私与反作弊约束。
 - [BARK_BATTLE_2D_RUNTIME_TECHNICAL_PLAN_2026-05-11.md](./BARK_BATTLE_2D_RUNTIME_TECHNICAL_PLAN_2026-05-11.md)：冻结“汪汪声浪大作战 / bark-battle”2D 浏览器 runtime 技术方案，明确 Phaser + TypeScript + Vite 选型、纯 TS simulation 与 Phaser renderer/DOM HUD 边界、Web Audio 输入适配、移动端权限降级和后续测试验证命令。
 - [PUBLIC_WORK_DETAIL_NOT_FOUND_RECOVERY_2026-05-11.md](./PUBLIC_WORK_DETAIL_NOT_FOUND_RECOVERY_2026-05-11.md)：记录直接访问公开作品详情深链时作品不存在或已下架的回首页修复，避免关闭提示后停在 `work-detail` 空状态白屏。

docs/technical/RUST_LOCAL_AND_REMOTE_DEPLOYMENT_SCRIPTS_2026-04-22.md

@@ -36,8 +36,9 @@ npm run dev:rust
 
 1. `npm run dev` / `npm run dev:rust` 会先检查 SpacetimeDB、Rust `api-server`、主站 Vite、后台 Vite 需要使用的端口。
 2. 如果优先端口不可用，脚本会从该端口开始向后寻找可用端口，并将解析后的端口覆盖到后续 `spacetime start`、`spacetime publish --server`、`GENARRATIVE_API_PORT`、`RUST_SERVER_TARGET`、`GENARRATIVE_RUNTIME_SERVER_TARGET`、`ADMIN_API_TARGET` 与 Vite 启动参数。
-3. 控制台会打印 `[dev:ports] ... 可用` 或 `[dev:ports] ... 不可用，改用 ...`，排查代理错配时以该日志和后续 `[dev:rust] web/admin web/rust api/spacetime` 实际地址为准。
-4. 单独 `npm run dev:web` 也会检查主站 Vite 端口；`WEB_PORT` 或默认 `3000` 不可用时，会自动切到后续可用端口并继续严格端口启动。
+3. 显式传入 `--skip-spacetime` 时，脚本不会对 SpacetimeDB 端口做可用性漂移；此时 `--spacetime-port` 表示要复用的既有 SpacetimeDB 地址。后端会直接使用该地址，避免 `3101` 已有可用宿主时被误改到空闲但未启动的 `3102`。
+4. 控制台会打印 `[dev:ports] ... 可用` 或 `[dev:ports] ... 不可用，改用 ...`，排查代理错配时以该日志和后续 `[dev:rust] web/admin web/rust api/spacetime` 实际地址为准。
+5. 单独 `npm run dev:web` 也会检查主站 Vite 端口；`WEB_PORT` 或默认 `3000` 不可用时，会自动切到后续可用端口并继续严格端口启动。
 
 默认流程：
 
@@ -70,7 +71,7 @@ Vite 代理覆盖范围：
 
 本地联调跳过策略：
 
-1. 如果 `3101` 已被当前可复用的 SpacetimeDB standalone 占用，脚本会优先按 `spacetime.pid` 与 `dev-rust-spacetime-url` 复用该宿主；如果确认不是可复用宿主，则会先输出占用进程并选择最近可用端口。也可显式使用 `npm run dev -- --skip-spacetime` 跳过 SpacetimeDB 宿主启动，或用 `--spacetime-port` 指定起始探测端口。
+1. 如果 `3101` 已被当前可复用的 SpacetimeDB standalone 占用，脚本会优先按 `spacetime.pid` 与 `dev-rust-spacetime-url` 复用该宿主；如果确认不是可复用宿主，则会先输出占用进程并选择最近可用端口。也可显式使用 `npm run dev -- --skip-spacetime --spacetime-port 3101` 跳过 SpacetimeDB 宿主启动并复用 `http://127.0.0.1:3101`。在 `--skip-spacetime` 模式下，`--spacetime-port` 不是起始探测端口，而是必须已经在线的目标端口。
 2. 如果当前没有修改 `server-rs/crates/spacetime-module`，可使用 `npm run dev -- --skip-publish` 跳过数据库发布，降低本地启动时的 SpacetimeDB wasm 编译耗时。
 3. 如果当前阶段只需要检查 `spacetime-module` 语法，不需要重新发布本地数据库，可执行 `cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml`。该命令只做 Rust 编译检查，不生成新数据库，也不刷新 bindings。
 

packages/shared/src/contracts/edutainmentBabyDrawing.ts

@@ -0,0 +1,85 @@
+export const BABY_LOVE_DRAWING_TEMPLATE_ID = 'baby-love-drawing';
+export const BABY_LOVE_DRAWING_TEMPLATE_NAME = '宝贝爱画';
+export const BABY_LOVE_DRAWING_EDUTAINMENT_TAG = '寓教于乐';
+
+export type BabyLoveDrawingTemplateId =
+  typeof BABY_LOVE_DRAWING_TEMPLATE_ID;
+
+export type BabyLoveDrawingTool = 'brush' | 'eraser';
+
+export type BabyLoveDrawingSaveMode =
+  | 'original-only'
+  | 'original-and-magic';
+
+export type BabyLoveDrawingGenerationProvider =
+  | 'vector-engine-gpt-image-2'
+  | 'local-demo';
+
+export type BabyLoveDrawingPoint = {
+  x: number;
+  y: number;
+  t: number;
+};
+
+export type BabyLoveDrawingStroke = {
+  strokeId: string;
+  tool: BabyLoveDrawingTool;
+  color: string;
+  points: BabyLoveDrawingPoint[];
+};
+
+export type BabyLoveDrawingRecord = {
+  drawingId: string;
+  templateId: BabyLoveDrawingTemplateId;
+  templateName: typeof BABY_LOVE_DRAWING_TEMPLATE_NAME;
+  originalImageSrc: string;
+  magicImageSrc: string | null;
+  strokeTrace: BabyLoveDrawingStroke[];
+  saveMode: BabyLoveDrawingSaveMode;
+  themeTags: string[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type CreateBabyLoveDrawingMagicRequest = {
+  originalImageSrc: string;
+  strokeTrace: BabyLoveDrawingStroke[];
+};
+
+export type CreateBabyLoveDrawingMagicResponse = {
+  magicImageSrc: string;
+  generationProvider: BabyLoveDrawingGenerationProvider;
+  prompt: string;
+};
+
+export type SaveBabyLoveDrawingRequest = {
+  originalImageSrc: string;
+  magicImageSrc?: string | null;
+  strokeTrace: BabyLoveDrawingStroke[];
+};
+
+export type SaveBabyLoveDrawingResponse = {
+  record: BabyLoveDrawingRecord;
+};
+
+export const BABY_LOVE_DRAWING_RAINBOW_COLORS = [
+  { id: 'red', label: '红', value: '#ef4444' },
+  { id: 'orange', label: '橙', value: '#f97316' },
+  { id: 'yellow', label: '黄', value: '#facc15' },
+  { id: 'green', label: '绿', value: '#22c55e' },
+  { id: 'cyan', label: '青', value: '#06b6d4' },
+  { id: 'blue', label: '蓝', value: '#3b82f6' },
+  { id: 'purple', label: '紫', value: '#a855f7' },
+] as const;
+
+export type BabyLoveDrawingRainbowColorId =
+  (typeof BABY_LOVE_DRAWING_RAINBOW_COLORS)[number]['id'];
+
+export function normalizeBabyLoveDrawingTags(tags: string[]) {
+  return [
+    ...new Set([
+      BABY_LOVE_DRAWING_EDUTAINMENT_TAG,
+      ...tags.map((tag) => tag.trim()).filter(Boolean),
+    ]),
+  ];
+}

packages/shared/src/contracts/edutainmentBabyObject.ts

@@ -2,8 +2,7 @@ export const BABY_OBJECT_MATCH_TEMPLATE_ID = 'baby-object-match';
 export const BABY_OBJECT_MATCH_TEMPLATE_NAME = '宝贝识物';
 export const BABY_OBJECT_MATCH_EDUTAINMENT_TAG = '寓教于乐';
 
-export type BabyObjectMatchTemplateId =
-  typeof BABY_OBJECT_MATCH_TEMPLATE_ID;
+export type BabyObjectMatchTemplateId = typeof BABY_OBJECT_MATCH_TEMPLATE_ID;
 
 export type BabyObjectMatchAssetProvider =
   | 'vector-engine-gpt-image-2'
@@ -20,6 +19,27 @@ export type BabyObjectMatchItemAsset = {
   prompt: string;
 };
 
+export type BabyObjectMatchVisualAssetKind =
+  | 'background'
+  | 'ui-frame'
+  | 'gift-box'
+  | 'basket'
+  | 'smoke-puff';
+
+export type BabyObjectMatchVisualAsset = {
+  assetId: string;
+  assetKind: BabyObjectMatchVisualAssetKind;
+  imageSrc: string;
+  assetObjectId: string | null;
+  generationProvider: BabyObjectMatchAssetProvider;
+  prompt: string;
+};
+
+export type BabyObjectMatchVisualPackage = {
+  themePrompt: string;
+  assets: BabyObjectMatchVisualAsset[];
+};
+
 export type BabyObjectMatchDraft = {
   draftId: string;
   profileId: string;
@@ -29,6 +49,7 @@ export type BabyObjectMatchDraft = {
   workDescription: string;
   itemNames: [string, string];
   itemAssets: [BabyObjectMatchItemAsset, BabyObjectMatchItemAsset];
+  visualPackage?: BabyObjectMatchVisualPackage | null;
   themeTags: string[];
   publicationStatus: BabyObjectMatchPublicationStatus;
   createdAt: string;
@@ -41,6 +62,15 @@ export type CreateBabyObjectMatchDraftRequest = {
   itemBName: string;
 };
 
+export type GenerateBabyObjectMatchAssetsRequest = {
+  itemNames: [string, string];
+};
+
+export type GenerateBabyObjectMatchAssetsResponse = {
+  assets: [BabyObjectMatchItemAsset, BabyObjectMatchItemAsset];
+  visualPackage?: BabyObjectMatchVisualPackage | null;
+};
+
 export type BabyObjectMatchDraftResponse = {
   draft: BabyObjectMatchDraft;
 };

packages/shared/src/index.ts

@@ -6,6 +6,7 @@ export type * from './contracts/creationAgentDocumentInput';
 export type * from './contracts/creationAudio';
 export type * from './contracts/creativeAgent';
 export type * from './contracts/customWorldAgent';
+export * from './contracts/edutainmentBabyDrawing';
 export * from './contracts/edutainmentBabyObject';
 export type * from './contracts/hyper3d';
 export * from './contracts/match3dAgent';

scripts/dev-rust-stack.sh

@@ -106,6 +106,11 @@ NODE
 resolve_dev_stack_ports() {
   local key
   local value
+  local spacetime_port_args=()
+
+  if [[ "${SKIP_SPACETIME}" -ne 1 ]]; then
+    spacetime_port_args+=("spacetime:${SPACETIME_HOST}:${SPACETIME_PORT}")
+  fi
 
   while IFS='=' read -r key value; do
     case "${key}" in
@@ -115,7 +120,7 @@ resolve_dev_stack_ports() {
     esac
   done < <(
     node "${REPO_ROOT}/scripts/dev-stack-port-utils.mjs" resolve-dev-stack \
-      "spacetime:${SPACETIME_HOST}:${SPACETIME_PORT}" \
+      "${spacetime_port_args[@]}" \
       "api:${API_TARGET_HOST}:${API_PORT}" \
       "web:${WEB_HOST}:${WEB_PORT}" \
       "adminWeb:${ADMIN_WEB_TARGET_HOST}:${ADMIN_WEB_PORT}"

scripts/generate-child-motion-demo-assets.mjs

@@ -270,6 +270,368 @@ const assetDefinitions = [
       chromaKeyNote,
     ].join(''),
   },
+  {
+    id: 'wave-cat-head-guide',
+    output: 'picture-book-wave-cat-head-guide-v1.png',
+    sourceOutput: 'picture-book-wave-cat-head-guide-v1-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.76,
+      fillHeight: 0.76,
+      anchorY: 'center',
+      padding: 22,
+    },
+    prompt: [
+      '请生成儿童动作互动游戏招手提示中央使用的卡通猫猫头资产，只画猫猫头，不要身体和爪子。',
+      '主体是一只原创绘本卡通猫猫头，圆润、亲切、表情开心，适合夹在左右两只猫爪中间作为挥手引导。',
+      '猫头可以是浅米白、淡橘、柔和浅棕和浅蓝绿色高光，轮廓清晰，五官简洁可爱，不能像真实照片或具体 IP 角色。',
+      '资产需要轻盈半透明、水彩纸张质感，缩小后仍能清楚看出猫脸和耳朵，边缘不要有复杂毛发。',
+      '整体风格必须和参考背景一致：明亮、温暖、卡通绘本、草地游戏舞台气质。',
+      '不要文字、数字、按钮、面板、人物、全身动物、品牌符号、水印、真实照片质感、厚重阴影或科技感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-paw-guide',
+    output: 'picture-book-wave-cat-paw-guide-v1.png',
+    sourceOutput: 'picture-book-wave-cat-paw-guide-v1-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.82,
+      fillHeight: 0.82,
+      anchorY: 'center',
+      padding: 22,
+    },
+    prompt: [
+      '请生成儿童动作互动游戏的挥手引导猫爪资产，只画一只猫爪和一小段前臂，用于网页左右镜像复用。',
+      '主体是一段从画面下方斜向上伸出的柔软卡通猫前臂，末端是圆润猫爪，不展示手指细节，爪垫可以用几个浅色圆形简化表达。',
+      '猫爪需要像儿童绘本里的玩偶圆爪，简洁可爱，适合放在猫猫头左右两侧做左右摆动动画。',
+      '资产需要半透明、轻盈，轮廓清晰，缩小后仍能看出前臂和猫爪；边缘不要复杂毛发，不要尖爪。',
+      '颜色使用浅米白、淡橘、柔和草绿色和浅蓝绿色水彩高光，风格和参考背景一致，明亮、温暖、卡通绘本、轻微纸张纹理。',
+      '不要文字、数字、按钮、面板、人物全身、完整动物、真实照片质感、厚重阴影或科技感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-head-guide-v2',
+    output: 'picture-book-wave-cat-head-guide-v2.png',
+    sourceOutput: 'picture-book-wave-cat-head-guide-v2-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.72,
+      fillHeight: 0.72,
+      anchorY: 'center',
+      padding: 24,
+    },
+    prompt: [
+      '请重新设计一版儿童动作互动游戏招手提示中央使用的原创绘本卡通猫猫头资产，只画猫猫头，不要身体和爪子。',
+      '主体是一只圆润的小猫头，像贴在游戏舞台中央的柔软绘本贴纸，轮廓大而简洁，表情开心、友好、轻轻张嘴微笑。',
+      '五官必须更简化：大眼睛、短鼻子、小嘴巴、短胡须即可；不要长胡须伸出太远，不要复杂毛发，不要真实猫毛细节。',
+      '色彩使用浅奶油白、淡橘和少量浅草绿或天空蓝高光，整体更轻、更通透，适合叠在明亮草地舞台上。',
+      '边缘是柔和水彩描边和轻微纸张纹理，缩小到舞台中央后仍能一眼看出是可爱的猫猫头。',
+      '不要文字、数字、按钮、面板、人物、全身动物、品牌符号、水印、真实照片质感、厚重阴影或科技感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-paw-guide-v2',
+    output: 'picture-book-wave-cat-paw-guide-v2.png',
+    sourceOutput: 'picture-book-wave-cat-paw-guide-v2-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.74,
+      fillHeight: 0.78,
+      anchorY: 'center',
+      padding: 24,
+    },
+    prompt: [
+      '请重新设计一版儿童动作互动游戏挥手引导猫爪资产，只画一只圆润猫爪和很短一段前臂，用于网页左右镜像复用。',
+      '主体是大号圆猫爪，爪面朝向观众，爪垫用一个浅粉色大圆垫和几个浅粉色小圆垫简化表达，前臂只保留短短一截，不要画成长手臂。',
+      '猫爪要像儿童绘本贴纸或软玩具爪子，轮廓饱满、简洁、可爱，适合放在猫猫头左右两侧做挥动动画。',
+      '色彩与猫猫头统一：浅奶油白、淡橘、柔和浅粉或淡桃色爪垫和少量浅草绿或天空蓝高光；整体半透明、轻盈、无厚重阴影。',
+      '爪垫必须保持明亮柔和，禁止黑色、灰色、深棕色、深色阴影或高反差硬边。',
+      '缩小后必须清楚看出猫爪轮廓和爪垫；不要尖爪、不要手指细节、不要真实皮肤或真实毛发质感。',
+      '不要文字、数字、按钮、面板、人物全身、完整动物、真实照片质感、厚重阴影或科技感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'ground-ring-v3',
+    output: 'picture-book-ground-ring-v3.png',
+    sourceOutput: 'picture-book-ground-ring-v3-source.png',
+    size: '1536x512',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1200,
+      canvasHeight: 520,
+      fit: 'contain',
+      fillWidth: 0.92,
+      fillHeight: 0.78,
+      anchorY: 'center',
+      padding: 24,
+    },
+    prompt: [
+      '请重新设计儿童动作互动游戏地面位置指示环资产，用于放在绿色草地上，必须和草皮明显区分。',
+      '主体是单个贴在地面上的透视椭圆指示环，不是完整背景，不要依赖网页后期压扁。',
+      '样式像浅蓝天空色和暖黄色软垫组成的绘本地贴：外圈为浅蓝白水彩描边，内圈有柔和暖黄色或奶油色高光，中心留空透明。',
+      '圆环边缘可以有少量星星光点、短虚线或纸贴边，但不要用大面积绿色草叶作为主体，避免和草地混在一起。',
+      '禁止使用粉紫色、品红色、紫色外圈、玫红光晕或任何接近 #ff00ff 的颜色；这些颜色会被当成透明背景删除。',
+      '除纯色品红背景外，主体只能使用浅蓝、白色、奶油黄、暖黄色、浅橙和极少量浅草绿。',
+      '整体要明亮、温暖、儿童绘本风，和草地舞台统一但有清楚视觉对比；不要科技感，不要霓虹，不要金属材质。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-torso-guide-v3',
+    output: 'picture-book-wave-cat-torso-guide-v3.png',
+    sourceOutput: 'picture-book-wave-cat-torso-guide-v3-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.62,
+      fillHeight: 0.58,
+      anchorY: 'bottom',
+      padding: 24,
+    },
+    prompt: [
+      '请为输入图中的橘白绘本猫猫头补充一个可单独叠放在头部下方的猫猫上半身胸口资产。',
+      '只画短短的上半身胸口、脖子下沿、圆润肩膀和一点点短前肢根部；不要画头、耳朵、眼睛、嘴巴、胡须、完整爪子、腿或脚。',
+      '主体必须是橘白小猫身体，色彩和输入图一致：浅奶油白为主，淡橘色斑纹点缀，柔和浅棕描边，少量浅草绿或天空蓝高光。',
+      '形状像儿童绘本贴纸里的圆润上半身，底部自然截断，适合网页叠在猫头下面形成半身猫猫。',
+      '两侧不要伸出长手臂，左右猫爪会由网页单独叠加。',
+      '禁止黑色、黑白猫、大面积深色毛、真实毛发、尖锐漫画黑线、高反差阴影。',
+      '不要文字、数字、按钮、面板、人物、完整动物、品牌符号、水印、真实照片质感、厚重阴影或科技感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-body-guide-v4',
+    output: 'picture-book-wave-cat-body-guide-v4.png',
+    sourceOutput: 'picture-book-wave-cat-body-guide-v4-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    useWaveCatHeadReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.78,
+      fillHeight: 0.88,
+      anchorY: 'bottom',
+      padding: 24,
+    },
+    prompt: [
+      '请按参考结构重新绘制儿童动作互动游戏中央招手提示的猫咪身体主体资源。',
+      '主体结构参考用户草图：正面半身猫咪，圆猫头在上方，两个三角耳朵，头下方接一个简单圆润躯干，躯干到胸口和腰部一半为止。',
+      '本资源只包含猫头、耳朵、脖子、躯干和肩部连接点，不要画任何手臂、前臂、手掌、猫爪、腿或脚；左右肩膀两侧要留出手臂接入空间。',
+      '角色必须是橘白猫：主体毛色 80% 为浅奶油白和温暖淡橘色，少量浅棕描边；只能有小面积深棕眼睛和细线五官。',
+      '五官简洁可爱：大眼睛、短鼻子、小嘴巴、短胡须；躯干为浅奶油白和淡橘色斑纹，边缘柔和水彩描边。',
+      '整体像儿童绘本贴纸，半透明、轻盈，缩小到舞台中央后仍能看清猫头和半身结构。',
+      '禁止画手臂或猫爪，禁止黑色、灰色、黑白猫、奶牛猫、虎斑深色块、大面积深棕毛、真实毛发、尖锐漫画黑线、高反差阴影、文字、数字、按钮、面板、水印和真实照片质感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-arm-guide-v4',
+    output: 'picture-book-wave-cat-arm-guide-v4.png',
+    sourceOutput: 'picture-book-wave-cat-arm-guide-v4-source.png',
+    size: '1024x1024',
+    transparent: true,
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.7,
+      fillHeight: 0.82,
+      anchorY: 'bottom',
+      padding: 24,
+    },
+    prompt: [
+      '请按参考结构重新绘制儿童动作互动游戏猫咪挥手动画用的单侧手臂资源。',
+      '只画一条橘白猫咪手臂：从肩膀连接处开始，弯曲向上，包含上臂、前臂和末端圆猫爪，整体像用户草图中单侧向上挥动的弯曲手臂。',
+      '资源需要适合网页左右镜像复用：默认绘制一条从画面下方肩部连接点向上弯到画面左上方的手臂，肩部连接点在资源下方内侧，方便 CSS 设置旋转轴。',
+      '猫爪末端是圆润猫爪，爪垫浅粉或淡桃色，不要尖爪；手臂粗细均匀、短而可爱，不要画成长人类手臂。',
+      '角色必须是橘白猫手臂：主体毛色 80% 为浅奶油白和温暖淡橘色，淡橘斑纹点缀，柔和浅棕描边，爪垫浅粉或淡桃色。',
+      '整体像儿童绘本贴纸，半透明、轻盈，边缘清晰，缩小后仍能看出弯曲手臂和圆猫爪。',
+      '不要画猫头、躯干、另一只手臂、完整动物、腿、脚、文字、数字、按钮、面板、水印、真实照片质感、黑色、灰色、黑白毛、黑灰重阴影或深色大面积毛。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-body-guide-v5',
+    output: 'picture-book-wave-cat-body-guide-v5.png',
+    sourceOutput: 'picture-book-wave-cat-body-guide-v5-source.png',
+    size: '1024x1024',
+    transparent: true,
+    transparencyCleanup: 'cat-guide',
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    useWaveCatHeadReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.72,
+      fillHeight: 0.88,
+      anchorY: 'bottom',
+      padding: 22,
+    },
+    prompt: [
+      '请按用户参考结构重新绘制儿童动作互动游戏中央招手提示的猫咪身体主体资源，用作动画底座。主体必须是正面纸偶结构：一个大圆猫头、两个三角耳朵、头下方连接短脖子和圆润半身躯干，画到上半身和腰部一半即可。',
+      '本资源只包含猫头、耳朵、五官、脖子、躯干、圆润肩膀和两侧肩部连接点；绝对不要画任何手臂、前臂、手掌、猫爪、小手、小脚、腿、脚或尾巴。左右肩膀外侧需要留出干净的手臂接入空间，方便网页单独叠加手臂动画。',
+      '请保持输入猫猫头的暖橘白绘本风格：头顶和耳朵外侧有淡橘色块，脸和肚子为浅奶油白，少量浅橘斑纹，五官只用小面积深棕眼睛和暖棕细线。',
+      '所有描边必须是柔和暖棕或浅橘棕，不要使用纯黑描边；资源自身保持清晰不透明，网页会统一设置半透明效果，不要在图片里主动降低主体透明度。',
+      '整体像儿童绘本贴纸或可动纸偶底座，结构简单、比例可爱，缩小到舞台中央后仍能看清大猫头、小身体和肩部挂点。',
+      '禁止画手臂或猫爪，禁止黑色、灰色、黑白猫、奶牛猫、虎斑深色块、大面积深棕毛、真实毛发、尖锐漫画黑线、高反差阴影、文字、数字、按钮、面板、水印和真实照片质感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-arm-guide-v5',
+    output: 'picture-book-wave-cat-arm-guide-v5.png',
+    sourceOutput: 'picture-book-wave-cat-arm-guide-v5-source.png',
+    size: '1024x1024',
+    transparent: true,
+    transparencyCleanup: 'cat-guide',
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    useWaveCatHeadReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.58,
+      fillHeight: 0.86,
+      anchorY: 'bottom',
+      padding: 20,
+    },
+    prompt: [
+      '请按用户参考结构重新绘制儿童动作互动游戏猫咪挥手动画用的单侧手臂手部资源。只画一条猫咪手臂：从底部肩膀连接点开始，包含短上臂、弯曲前臂和末端圆猫爪，像可动纸偶的一条独立手臂。',
+      '默认绘制一条向左上方举起的手臂，肩膀连接点在画面底部偏内侧，圆猫爪在画面上方；资源需要适合网页左右镜像复用和围绕肩膀连接点旋转摆动。',
+      '猫爪用类似多啦A梦圆手的圆润简化形状，不展示手指细节，不要尖爪；爪面可以有浅粉或淡桃色圆形爪垫。手臂短而可爱，比例像小猫上肢，不要画成人类长手臂。',
+      '请保持输入猫猫头的暖橘白绘本风格：手臂主体为浅奶油白和淡橘色，少量浅橘斑纹，爪垫浅粉或淡桃色，柔和暖棕描边。',
+      '所有描边必须是柔和暖棕或浅橘棕，不要使用纯黑描边；资源自身保持清晰不透明，网页会统一设置半透明效果，不要在图片里主动降低主体透明度。',
+      '不要画猫头、躯干、另一只手臂、完整动物、腿、脚、文字、数字、按钮、面板、水印、真实照片质感、黑色、灰色、黑白毛、黑灰重阴影或深色大面积毛。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-body-guide-v6',
+    output: 'picture-book-wave-cat-body-guide-v6.png',
+    sourceOutput: 'picture-book-wave-cat-body-guide-v6-source.png',
+    size: '1024x1024',
+    transparent: true,
+    transparencyCleanup: 'cat-guide',
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    useWaveCatHeadReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.68,
+      fillHeight: 0.86,
+      anchorY: 'bottom',
+      padding: 22,
+    },
+    prompt: [
+      '请重新绘制儿童动作互动游戏中央招手提示的猫咪身体主体资源，严格按可动纸偶拆件结构生成。主体只有一只正面橘白猫：大圆猫头、两个三角耳朵、短脖子、梨形半身躯干，底部自然截断。',
+      '身体两侧只允许出现圆润肩膀轮廓和一个很小的肩部连接圆点或肩窝标记；绝对不要画伸出的手臂、前臂、手掌、猫爪、小手、小脚、腿、脚或尾巴。肩膀外侧必须留空，后续网页会单独叠加两条手臂。',
+      '猫咪造型参考输入猫猫头的暖橘白配色：头顶、耳朵外侧和身体侧边为淡橘色，脸和肚子为浅奶油白，少量浅橘斑纹；五官使用暖棕细线和小面积深棕眼睛。',
+      '请避免粉色大背景、避免主体外侧彩色光晕，主体贴纸外轮廓之外必须直接是纯色背景；线条为柔和暖棕或浅橘棕，不要纯黑粗描边。',
+      '资源自身保持清晰不透明，半透明效果由网页 CSS 控制；整体像儿童绘本可动纸偶底座，缩小后仍能看清大猫头、短身体、肩部连接点。',
+      '禁止手臂、爪子、小手、脚、尾巴；禁止黑色、灰色、黑白猫、奶牛猫、虎斑深色块、大面积深棕毛、真实毛发、尖锐漫画黑线、高反差阴影、文字、数字、按钮、面板、水印和真实照片质感。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
+  {
+    id: 'wave-cat-arm-guide-v6',
+    output: 'picture-book-wave-cat-arm-guide-v6.png',
+    sourceOutput: 'picture-book-wave-cat-arm-guide-v6-source.png',
+    size: '1024x1024',
+    transparent: true,
+    transparencyCleanup: 'cat-guide',
+    useBackgroundReference: true,
+    useLayoutReference: true,
+    useWaveCatHeadReference: true,
+    layoutNormalization: {
+      canvasWidth: 1024,
+      canvasHeight: 1024,
+      fit: 'contain',
+      fillWidth: 0.74,
+      fillHeight: 0.88,
+      anchorY: 'bottom',
+      padding: 20,
+    },
+    prompt: [
+      '请重新绘制儿童动作互动游戏猫咪挥手动画用的单侧手臂资源，严格作为可动纸偶拆件。只画一条橘白猫手臂：底部是肩膀连接端，向左上方弯曲，末端是一只简化圆猫手。',
+      '猫手必须像多啦A梦式圆手或软玩具圆爪：一个完整圆润手掌，不画手指，不画黑色或深色爪垫，不画粉色爪垫点，不画尖爪。手臂短而厚实，像小猫上肢，不要成人类长手臂。',
+      '资源必须适合网页左右镜像复用和围绕肩部连接点旋转：肩膀连接端在画面底部偏内侧，圆手在画面上方，四周留透明空白。',
+      '颜色参考输入猫猫头：浅奶油白和淡橘色为主体，少量浅橘斑纹，柔和暖棕或浅橘棕描边；不要纯黑粗描边。',
+      '请避免粉色大背景、避免主体外侧彩色光晕，主体贴纸外轮廓之外必须直接是纯色背景。资源自身保持清晰不透明，半透明效果由网页 CSS 控制。',
+      '不要画猫头、躯干、另一只手臂、完整动物、腿、脚、文字、数字、按钮、面板、水印、真实照片质感、黑色、灰色、黑白毛、黑灰重阴影或深色大面积毛。',
+      styleReferenceNote,
+      noStretchNote,
+      chromaKeyNote,
+    ].join(''),
+  },
 ];
 
 const args = new Map();
@@ -443,6 +805,12 @@ function buildRequestBody(asset, size) {
       path.join(intermediateDir, layoutReferenceOutput),
     );
   }
+  if (asset.useWaveCatHeadReference) {
+    pushReferenceImage(
+      body,
+      path.join(assetDir, 'picture-book-wave-cat-head-guide-v2.png'),
+    );
+  }
   return body;
 }
 
@@ -670,6 +1038,93 @@ function removeCharacterOutlineChromaKey(sourcePath, finalPath) {
   }
 }
 
+function removeCatGuideChromaKey(sourcePath, finalPath) {
+  const script = [
+    'from collections import deque',
+    'from PIL import Image',
+    'import sys',
+    'source, out = sys.argv[1], sys.argv[2]',
+    'im = Image.open(source).convert("RGBA")',
+    'px = im.load()',
+    'w, h = im.size',
+    'corner_samples = [im.getpixel((0, 0)), im.getpixel((w - 1, 0)), im.getpixel((0, h - 1)), im.getpixel((w - 1, h - 1))]',
+    'key = tuple(sorted([p[i] for p in corner_samples])[len(corner_samples) // 2] for i in range(3))',
+    'def is_magenta_bg(r, g, b):',
+    '    if r > 170 and b > 145 and g < 185 and min(r, b) - g > 36:',
+    '        return True',
+    '    return r > 140 and b > 90 and r > g + 35 and b > g + 10',
+    'def is_bg_candidate(x, y):',
+    '    r, g, b, a = px[x, y]',
+    '    if a <= 10:',
+    '        return True',
+    '    dist = ((r - key[0]) ** 2 + (g - key[1]) ** 2 + (b - key[2]) ** 2) ** 0.5',
+    '    if is_magenta_bg(r, g, b):',
+    '        return True',
+    '    if key[0] < 32 and key[1] < 32 and key[2] < 32:',
+    '        return dist < 34 and max(r, g, b) < 55',
+    '    if key[0] > 225 and key[1] > 225 and key[2] > 225:',
+    '        return dist < 34 and min(r, g, b) > 210',
+    '    return dist < 72',
+    'visited = bytearray(w * h)',
+    'queue = deque()',
+    'def push(x, y):',
+    '    if x < 0 or y < 0 or x >= w or y >= h:',
+    '        return',
+    '    index = y * w + x',
+    '    if visited[index] or not is_bg_candidate(x, y):',
+    '        return',
+    '    visited[index] = 1',
+    '    queue.append((x, y))',
+    'for x in range(w):',
+    '    push(x, 0)',
+    '    push(x, h - 1)',
+    'for y in range(h):',
+    '    push(0, y)',
+    '    push(w - 1, y)',
+    'while queue:',
+    '    x, y = queue.popleft()',
+    '    push(x + 1, y)',
+    '    push(x - 1, y)',
+    '    push(x, y + 1)',
+    '    push(x, y - 1)',
+    'for _ in range(3):',
+    '    extra = []',
+    '    for y in range(1, h - 1):',
+    '        for x in range(1, w - 1):',
+    '            index = y * w + x',
+    '            if visited[index] or not is_bg_candidate(x, y):',
+    '                continue',
+    '            touches_bg = any(visited[(y + dy) * w + x + dx] for dy in (-1, 0, 1) for dx in (-1, 0, 1) if dx or dy)',
+    '            if touches_bg:',
+    '                extra.append(index)',
+    '    if not extra:',
+    '        break',
+    '    for index in extra:',
+    '        visited[index] = 1',
+    'for y in range(h):',
+    '    for x in range(w):',
+    '        r, g, b, a = px[x, y]',
+    '        if visited[y * w + x]:',
+    '            px[x, y] = (r, g, b, 0)',
+    '        else:',
+    '            if a <= 10:',
+    '                a = 255',
+    '            px[x, y] = (r, g, b, a)',
+    'im.save(out)',
+  ].join('\n');
+
+  const result = spawnSync('python', ['-c', script, sourcePath, finalPath], {
+    cwd: repoRoot,
+    encoding: 'utf8',
+  });
+
+  if (result.status !== 0) {
+    throw new Error(
+      `Failed to clean cat guide transparency: ${(result.stderr || result.stdout).trim()}`,
+    );
+  }
+}
+
 function normalizeTransparentAsset(finalPath, layoutNormalization) {
   if (!layoutNormalization) {
     return;
@@ -857,6 +1312,8 @@ async function generateAsset(asset, env, size, force) {
       removeUiPanelChromaKey(opaqueSourcePath, finalPath);
     } else if (asset.transparencyCleanup === 'character-outline') {
       removeCharacterOutlineChromaKey(opaqueSourcePath, finalPath);
+    } else if (asset.transparencyCleanup === 'cat-guide') {
+      removeCatGuideChromaKey(opaqueSourcePath, finalPath);
     } else {
       removeChromaKey(opaqueSourcePath, finalPath);
     }
@@ -917,6 +1374,8 @@ async function generateAsset(asset, env, size, force) {
       removeUiPanelChromaKey(opaqueSourcePath, finalPath);
     } else if (asset.transparencyCleanup === 'character-outline') {
       removeCharacterOutlineChromaKey(opaqueSourcePath, finalPath);
+    } else if (asset.transparencyCleanup === 'cat-guide') {
+      removeCatGuideChromaKey(opaqueSourcePath, finalPath);
     } else {
       removeChromaKey(opaqueSourcePath, finalPath);
     }

scripts/generate-taonier-logo-concepts.mjs

@@ -0,0 +1,480 @@
+import { Buffer } from 'node:buffer';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+
+const repoRoot = process.cwd();
+const outputDir = path.join(
+  repoRoot,
+  'public',
+  'branding',
+  'taonier-logo-concepts',
+);
+const defaultTimeoutMs = 420000;
+
+const dimensionalConcepts = [
+  {
+    id: 'taonier-clay-spark',
+    title: '灵感陶团',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字 Logo 图标。产品是精品 AI UGC 创作与轻休闲小游戏平台，核心理念是把脑洞、梗和小游戏像陶泥一样捏出来。图标主体是一团被轻轻捏塑的温润陶泥，内部自然形成一枚发光灵感火花和少量 AI 节点点线，整体高级、亲切、年轻、有传播感。使用暖陶土色、奶白、薄荷绿、深墨色少量点缀，居中构图，适合作为 App icon 和品牌主标。禁止文字、字母、汉字、水印、按钮、界面元素、复杂背景、儿童黏土课风格。',
+  },
+  {
+    id: 'taonier-play-mold',
+    title: '开玩模具',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字 Logo 图标。产品强调 AI 创作、UGC、自制小游戏、玩梗传播和轻度休闲。图标主体是一枚柔软陶泥捏成的圆角播放符号，播放三角像被手指压出的模具凹槽，周围有两三颗精品感小星点和像素级小方块，表达“捏个脑洞，马上开玩”。风格是现代品牌标志，柔软但不幼稚，干净、可缩小识别。禁止文字、字母、汉字、水印、真实陶艺工具、UI 按钮、教程感。',
+  },
+  {
+    id: 'taonier-meme-bubble',
+    title: '造梗气泡',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字 Logo 图标。产品是 AI UGC 创作社区，主打精品内容、梗传播、裂变分享、休闲小游戏。图标用一团软陶泥变形成聊天气泡和小表情的组合，气泡边缘像被揉捏过，中心有抽象笑脸和创意火花，但不要做儿童玩具感。品牌气质年轻、松弛、聪明、有社交传播力。配色使用陶土橙、奶白、清爽蓝绿和少量深色轮廓。禁止文字、字母、汉字、水印、复杂场景、表情包文字。',
+  },
+  {
+    id: 'taonier-creation-loop',
+    title: '共创回路',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字 Logo 图标。产品理念是 AI 与用户共同把灵感塑形成可玩的 UGC 作品。图标主体由两条柔软陶泥带构成循环造物轨迹，形成一个抽象无限符号和手工捏塑旋涡，中间嵌入一颗小型游戏棋子或星点，表达共创、迭代、传播和精品打磨。风格简洁高级、几何清楚、移动端小尺寸仍可识别。禁止文字、字母、汉字、水印、复杂阴影、科技冷硬金属感。',
+  },
+  {
+    id: 'taonier-premium-seal',
+    title: '精品泥印',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字 Logo 图标。产品主打精品 AI 创作、UGC 作品和轻小游戏发布。图标是一个被压印过的软陶徽章，外形像圆润印章但更现代，中间有抽象火花、小游戏方块和一处捏痕，表达“精品内容由脑洞塑形”。整体要有品牌信任感和高级手作质感，不要像儿童陶艺班。使用暖陶土、奶油白、莓红或湖蓝少量点缀，清晰居中。禁止文字、字母、汉字、水印、传统篆刻字、真实照片。',
+  },
+];
+
+const flatConcepts = [
+  {
+    id: 'taonier-flat-play-clay',
+    title: '扁平开捏',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。产品是 AI UGC 创作与轻休闲小游戏平台，主张“把脑洞捏成小游戏”。图标只使用一个柔软圆润的陶泥形主轮廓，内部用极简负形播放三角表达“马上开玩”，整体像现代 App icon 的核心符号。风格要求：flat vector logo, clean geometric, friendly, mainstream, memorable, high contrast, scalable, minimal shapes, solid colors, subtle 2D shadow only。配色使用暖陶土橙、奶油白、清爽薄荷绿或深墨色，最多 3 个主色。禁止：3D、立体、拟物、厚重阴影、渐变高光、照片质感、复杂纹理、中文字、英文字母、水印、UI 按钮、复杂背景、吉祥物。',
+  },
+  {
+    id: 'taonier-flat-spark-clay',
+    title: '灵感泥星',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。产品强调 AI 创作、UGC、造梗、精品轻小游戏。图形主体是一枚圆润陶泥团，中心用简洁四角星或火花负形表达灵感和 AI 生成，外轮廓要一眼像“可塑形的软泥”，但必须保持现代、主流、亲和、有记忆点。风格要求：flat vector brand mark, simple silhouette, app icon ready, no realism, no texture, no 3D, crisp edges, 2D friendly illustration。最多 3 色，暖陶土 + 奶油白 + 少量蓝绿。禁止文字、字母、水印、复杂小节点、儿童手工课风格。',
+  },
+  {
+    id: 'taonier-flat-meme-smile',
+    title: '造梗笑泥',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。产品主打 UGC、玩梗传播、裂变分享和轻休闲小游戏。图形是一团被捏成圆润聊天气泡的陶泥，内部只保留极简笑脸或一颗小星点，表达“造梗”和“分享快乐”。整体要像主流社交娱乐 App 的 Logo，亲和、轻松、容易记住，小尺寸清楚。风格要求：flat vector logo, simple, bold, friendly, clean, no gradients, no 3D, no mascot complexity。配色不超过 3 色。禁止中文字、英文字母、水印、表情包文字、复杂装饰、立体高光。',
+  },
+  {
+    id: 'taonier-flat-loop-mold',
+    title: '共创泥环',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。产品理念是用户与 AI 共同把灵感塑形成可玩的 UGC 作品。图形用一条柔软陶泥带形成简洁闭环或抽象无限符号，中间留出小星点负形，表达共创、迭代、传播和精品打磨。视觉要主流、简洁、亲和，不要科技冷硬。风格要求：flat vector symbol, clean loop mark, minimal, memorable, scalable, solid colors, crisp silhouette, suitable for app icon。禁止 3D、拟物、厚阴影、复杂渐变、文字、字母、水印。',
+  },
+  {
+    id: 'taonier-flat-seal-blocks',
+    title: '精品泥印',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。产品强调精品 AI 作品、UGC 创作和小游戏发布。图形是一枚现代软陶印记，外形为圆角徽章或圆润印章，内部用 2 到 3 个简洁小方块和一颗星点表达“作品”“小游戏”“精品内容”。整体应像可长期使用的品牌主标，主流、干净、亲和、有辨识度。风格要求：flat vector logo, bold simple shapes, app icon ready, minimal color palette, no realism, no texture。禁止文字、字母、水印、传统篆刻、3D、复杂阴影、拟物陶艺。',
+  },
+];
+
+const v3Concepts = [
+  {
+    id: 'taonier-v3-finger-spark',
+    title: '灵感捏痕',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。不要使用播放三角、聊天气泡、笑脸、循环无限符号、褐色陶土主色、碎片小元素。产品是 AI UGC 创作与轻休闲小游戏平台，核心是“把脑洞捏成可玩的作品”。图形主体是一个醒目的圆润软形，内部只有一枚极简指纹捏痕与小火花负形，表达“被手指一捏，灵感成型”。风格：主流 App icon、flat vector、bold simple silhouette、friendly、memorable、high contrast、可缩小识别。配色：珊瑚橙或莓红作为主色，奶油白负形，少量青绿色投影或边缘点缀，最多 3 色。画面居中，留白干净。禁止文字、字母、水印、3D、拟物、厚阴影、渐变高光、照片质感、复杂纹理、表情包感、UI 按钮。',
+  },
+  {
+    id: 'taonier-v3-seed-pop',
+    title: '脑洞种子',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。不要使用播放三角、聊天气泡、笑脸、无限循环、传统印章、褐色主色或多碎元素。产品主打 AI 创作、UGC、梗传播、精品轻小游戏。图标主体是一颗圆润明亮的“脑洞种子”：像软泥被捏成的一颗种子/小芽，顶部有一个简洁星点缺口，表达灵感生长、内容生成、人人创作。风格：flat vector logo, simple, mainstream, warm, lively, app icon ready, strong outline, minimal shapes。配色使用高饱和青绿、珊瑚粉、奶油白、深墨色中的 2-3 色，不要大面积褐色。禁止文字、字母、水印、3D、拟物、照片、复杂渐变、表情、儿童黏土课风格。',
+  },
+  {
+    id: 'taonier-v3-magic-dot',
+    title: '一捏成型',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。避开播放按钮、聊天气泡、笑脸、循环符号、褐色陶土和堆叠小图标。产品理念是用户轻轻一捏，AI 把脑洞生成小游戏和 UGC 作品。图形由两个圆润手捏触点和中间一个闪光成型点组成，像“捏合灵感”的瞬间，但不要画真实手指。整体应非常简洁，有强记忆点，像主流创作娱乐 App 的标志。风格：flat vector, iconic, minimal, friendly, bold shape, clear at 32px。配色：亮紫红或珊瑚红主色，奶油白负形，青绿色小面积辅助。禁止文字、字母、水印、3D、厚阴影、渐变高光、复杂纹理。',
+  },
+  {
+    id: 'taonier-v3-work-gem',
+    title: '作品胶囊',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。不要使用播放三角、聊天气泡、笑脸、循环无限符号、褐色主色、多枚小卡片或碎图标。产品强调精品 AI UGC 作品和轻小游戏创作。图形主体是一枚被捏成圆角宝石/胶囊的抽象作品符号，内部只有一条柔软弧线切面和一个小星点，表达“脑洞被打磨成精品”。风格：flat vector logo, premium but friendly, simple, memorable, app icon, solid colors, no texture。配色：湖蓝或青绿主色，珊瑚橙点缀，奶白负形，深墨小轮廓可选。禁止文字、字母、水印、3D、复杂渐变、照片质感、游戏手柄、图片卡片、用户头像。',
+  },
+  {
+    id: 'taonier-v3-soft-t',
+    title: '软体 T 形',
+    prompt:
+      '为中文产品“陶泥儿”设计一个无文字扁平矢量 Logo 图标。尝试做一个抽象但亲和的品牌首字母符号，灵感来自 Taonier / 陶泥儿 的 T 和“被捏塑的软泥”。不要出现真实字母 T 的硬直排版，而是用一笔圆润软形构成可记忆的图腾。必须避开播放三角、聊天气泡、笑脸、循环符号、褐色陶土主色和碎元素。风格：flat vector brand mark, modern, friendly, bold, iconic, simple silhouette, app icon ready。配色：明亮珊瑚红、奶油白、薄荷青或深墨，最多 3 色。禁止文字、英文字母直出、汉字、水印、3D、拟物、厚阴影、复杂纹理。',
+  },
+];
+
+const magicDotConcepts = [
+  {
+    id: 'taonier-magic-dot-orbit',
+    title: '捏合星核',
+    prompt:
+      '围绕“陶泥儿”V3 方案“一捏成型”做 Logo 延展。设计一个无文字扁平矢量主标：两个圆润软泥触点从左右轻轻合拢，中心不是碰撞爆炸，而是一颗稳定的星核/作品核，外形要形成完整、可记忆的品牌符号。必须避免播放三角、聊天气泡、笑脸、循环无限符号、褐色陶土、真实手指、括号感、爆炸特效和碎元素。风格：flat vector logo, iconic, minimal, friendly, mainstream app icon, strong silhouette, clear at 32px。配色：珊瑚红或莓红主形，奶油白负形，青绿色只做中心小面积，最多 3 色。无文字、无字母、无水印、无 3D、无厚阴影、无拟物。',
+  },
+  {
+    id: 'taonier-magic-dot-seal',
+    title: '成型印记',
+    prompt:
+      '围绕“陶泥儿”V3 方案“一捏成型”做 Logo 延展。设计一个无文字扁平矢量主标：图形像一枚被两侧轻轻按压成型的软形印记，中心留出一个简洁星点或小圆孔，表达 AI 把脑洞塑形成作品。整体要比原本左右括号更完整，外轮廓形成一个独特图腾。禁止播放按钮、聊天气泡、笑脸、循环符号、褐色陶土主色、多小图标、真实手、爆炸火花。风格：flat vector, bold simple shape, friendly premium, memorable, app icon ready, solid colors。配色：亮珊瑚、奶油白、薄荷青或深墨，最多 3 色。',
+  },
+  {
+    id: 'taonier-magic-dot-squish',
+    title: '软泥合拍',
+    prompt:
+      '围绕“陶泥儿”V3 方案“一捏成型”做 Logo 延展。设计一个无文字扁平矢量 Logo：两个软泥形不是分散的括号，而是上下错位地挤压出中心灵感点，像“啪嗒一捏，作品成型”的瞬间。图形需要亲和、轻松、年轻，但不做表情包。必须保持元素极少，只有两块主形和一个中心成型点。禁止播放三角、聊天气泡、笑脸、无限循环、褐色主色、复杂渐变、拟物质感、真实手指、文字、字母。风格：flat vector brand mark, simple, memorable, high contrast, scalable。配色：莓红、奶白、青绿或明黄点缀。',
+  },
+  {
+    id: 'taonier-magic-dot-mold',
+    title: '灵感模口',
+    prompt:
+      '围绕“陶泥儿”V3 方案“一捏成型”做 Logo 延展。设计一个无文字扁平矢量主标：外形像一个被捏开的柔软模口，中心浮出一颗极简星点，表达从软泥模口里生成作品。它应该是一眼可记住的抽象符号，不像聊天框、不像播放键、不像括号。风格：flat vector logo, modern, friendly, clean, bold, minimal, app icon。配色使用高识别珊瑚红或玫粉主色，奶油白负形，少量青绿点缀。禁止褐色陶土、真实陶艺、3D、高光、厚阴影、复杂小碎片、文字、水印。',
+  },
+  {
+    id: 'taonier-magic-dot-bloom',
+    title: '捏开灵感',
+    prompt:
+      '围绕“陶泥儿”V3 方案“一捏成型”做 Logo 延展。设计一个无文字扁平矢量 Logo：用两片圆润软形夹出中央一颗灵感点，整体像一个正在打开的创意容器，但不要像花朵、聊天气泡或笑脸。图形要完整、主流、亲和、醒目，适合 App icon 和品牌主标。禁止播放三角、聊天气泡、笑脸、循环符号、褐色陶土、碎元素、真实手、复杂花瓣。风格：flat vector, minimal brand mark, strong silhouette, warm, youthful, memorable。配色：珊瑚红、奶油白、青绿，最多 3 色。',
+  },
+];
+
+const handsConcepts = [
+  {
+    id: 'taonier-hands-cradle-spark',
+    title: '托住灵感',
+    prompt:
+      '围绕“陶泥儿”Logo 方向 03 的“上下两只手托住灵感”的感觉继续打磨。设计一个无文字扁平矢量主标：上下两片圆润软掌状形体像手但不要画真实手指，轻轻托住中央一颗简洁灵感星核，表达用户与 AI 一起把脑洞捏成作品。整体要完整、主流、亲和、醒目，适合 App icon。避免播放三角、聊天气泡、笑脸、眼睛、花朵、循环符号、褐色陶土、多碎元素和真实手掌插画。风格：flat vector logo, bold simple silhouette, friendly, memorable, premium but warm, clear at 32px。配色：上方珊瑚红、下方青绿色、中央奶油白或金色小星，最多 3 色。无文字、无字母、无水印、无 3D、无厚阴影。',
+  },
+  {
+    id: 'taonier-hands-pinched-gem',
+    title: '合捏成珠',
+    prompt:
+      '围绕“陶泥儿”Logo 方向 03 的“上下两只手”感觉做延展。设计一个无文字扁平矢量主标：上下一对抽象软手 / 软泥掌从两侧微微合捏，中间形成一颗小圆珠或作品核。图形要像品牌符号，不像手势教学图；保留托举与成型的温柔感。禁止播放三角、聊天气泡、笑脸、眼睛、花朵、褐色主色、真实手指、复杂掌纹、碎小图标。风格：flat vector, minimal, mainstream app logo, high contrast, iconic, friendly。配色：莓红、奶白、薄荷青、少量深墨，最多 3 色。',
+  },
+  {
+    id: 'taonier-hands-soft-bowl',
+    title: '创意托碗',
+    prompt:
+      '围绕“陶泥儿”Logo 方向 03 的上下手感做主标延展。设计一个无文字扁平矢量 Logo：下方是一片像手掌也像软泥托碗的圆润形体，上方是一片较小软形轻轻压合，中间浮出星点，表达“轻托脑洞、AI 捏成作品”。整体要简洁、有包容感、年轻亲和。避免像眼睛、嘴巴、聊天气泡、播放器、花朵、真实手掌、儿童黏土课。风格：flat vector logo, bold simple shape, app icon ready, clean, memorable。配色：青绿主托、珊瑚红上形、奶白中心，最多 3 色。',
+  },
+  {
+    id: 'taonier-hands-formed-seal',
+    title: '双掌泥印',
+    prompt:
+      '围绕“陶泥儿”Logo 方向 03 的上下两只手感觉做更完整的图腾。设计一个无文字扁平矢量主标：两片抽象软掌上下扣合，外轮廓形成一个圆润印记，中心保留一个星形负空间，像“被双手捏出的创意印记”。要有主流品牌感，不要像宗教手势、医疗关怀、儿童手工。禁止播放三角、聊天气泡、笑脸、眼睛、花朵、循环符号、褐色陶土、真实手指、复杂纹理。风格：flat vector, iconic, simple, friendly premium, solid colors, scalable。配色：珊瑚红、奶油白、青绿或深墨，最多 3 色。',
+  },
+  {
+    id: 'taonier-hands-pop-capsule',
+    title: '掌心开捏',
+    prompt:
+      '围绕“陶泥儿”Logo 方向 03 的“上下两只手托住灵感”感觉做更活泼版本。设计一个无文字扁平矢量 Logo：上下两片软掌像打开的胶囊，中央小星点从掌心弹出，表达“脑洞被捏出来”。图形需要有传播感、亲和力、记忆点，但不要像表情包或聊天软件。禁止播放三角、聊天气泡、笑脸、眼睛、花朵、褐色陶土、真实手指、碎元素。风格：flat vector brand mark, simple, bold, youthful, app icon, high contrast。配色：亮珊瑚红、薄荷青、奶白，最多 3 色。',
+  },
+];
+
+const args = new Map();
+for (let index = 2; index < process.argv.length; index += 1) {
+  const raw = process.argv[index];
+  if (!raw.startsWith('--')) {
+    continue;
+  }
+  const next = process.argv[index + 1];
+  if (next && !next.startsWith('--')) {
+    args.set(raw, next);
+    index += 1;
+  } else {
+    args.set(raw, true);
+  }
+}
+
+const style = String(args.get('--style') || 'dimensional').trim();
+const concepts =
+  style === 'flat'
+    ? flatConcepts
+    : style === 'v3'
+      ? v3Concepts
+      : style === 'magic'
+        ? magicDotConcepts
+        : style === 'hands'
+          ? handsConcepts
+      : dimensionalConcepts;
+const selectedOutputDir =
+  style === 'flat'
+    ? path.join(repoRoot, 'public', 'branding', 'taonier-logo-flat-concepts')
+    : style === 'v3'
+      ? path.join(repoRoot, 'public', 'branding', 'taonier-logo-v3-concepts')
+      : style === 'magic'
+        ? path.join(
+            repoRoot,
+            'public',
+            'branding',
+            'taonier-logo-magic-dot-concepts',
+          )
+        : style === 'hands'
+          ? path.join(
+              repoRoot,
+              'public',
+              'branding',
+              'taonier-logo-hands-concepts',
+            )
+    : outputDir;
+
+function readDotenv(fileName) {
+  const filePath = path.join(repoRoot, fileName);
+  if (!existsSync(filePath)) {
+    return {};
+  }
+
+  const values = {};
+  for (const line of readFileSync(filePath, 'utf8').split(/\r?\n/u)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) {
+      continue;
+    }
+    const match = /^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/u.exec(trimmed);
+    if (!match) {
+      continue;
+    }
+    let value = match[2].trim();
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    values[match[1]] = value;
+  }
+  return values;
+}
+
+function resolveEnv() {
+  const loaded = {
+    ...readDotenv('.env.example'),
+    ...readDotenv('.env.local'),
+    ...readDotenv('.env.secrets.local'),
+    ...process.env,
+  };
+  return {
+    baseUrl: String(loaded.VECTOR_ENGINE_BASE_URL || '')
+      .trim()
+      .replace(/\/+$/u, ''),
+    apiKey: String(loaded.VECTOR_ENGINE_API_KEY || '').trim(),
+    timeoutMs: Number.parseInt(
+      String(loaded.VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS || defaultTimeoutMs),
+      10,
+    ),
+  };
+}
+
+function buildUrl(baseUrl) {
+  return baseUrl.endsWith('/v1')
+    ? `${baseUrl}/images/generations`
+    : `${baseUrl}/v1/images/generations`;
+}
+
+function collectStringsByKey(value, targetKey, output) {
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collectStringsByKey(entry, targetKey, output));
+    return;
+  }
+  if (!value || typeof value !== 'object') {
+    return;
+  }
+  for (const [key, nested] of Object.entries(value)) {
+    if (key === targetKey) {
+      if (typeof nested === 'string' && nested.trim()) {
+        output.push(nested.trim());
+      }
+      if (Array.isArray(nested)) {
+        nested.forEach((entry) => {
+          if (typeof entry === 'string' && entry.trim()) {
+            output.push(entry.trim());
+          }
+        });
+      }
+    }
+    collectStringsByKey(nested, targetKey, output);
+  }
+}
+
+function extractImageUrls(payload) {
+  const urls = [];
+  collectStringsByKey(payload, 'url', urls);
+  collectStringsByKey(payload, 'image', urls);
+  collectStringsByKey(payload, 'image_url', urls);
+  return [...new Set(urls)].filter((url) => /^https?:\/\//u.test(url));
+}
+
+function extractBase64Images(payload) {
+  const values = [];
+  collectStringsByKey(payload, 'b64_json', values);
+  return values;
+}
+
+function inferExtensionFromBytes(bytes) {
+  if (bytes.subarray(0, 8).equals(Buffer.from('\x89PNG\r\n\x1A\n', 'binary'))) {
+    return 'png';
+  }
+  if (bytes.subarray(0, 3).equals(Buffer.from([0xff, 0xd8, 0xff]))) {
+    return 'jpg';
+  }
+  if (
+    bytes.subarray(0, 4).toString('ascii') === 'RIFF' &&
+    bytes.subarray(8, 12).toString('ascii') === 'WEBP'
+  ) {
+    return 'webp';
+  }
+  return 'png';
+}
+
+async function fetchJson(url, options, timeoutMs) {
+  const abortController = new AbortController();
+  const timer = setTimeout(() => abortController.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, {
+      ...options,
+      signal: abortController.signal,
+    });
+    const text = await response.text();
+    if (!response.ok) {
+      throw new Error(`VectorEngine ${response.status}: ${text.slice(0, 600)}`);
+    }
+    return JSON.parse(text);
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      throw new Error(`VectorEngine request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function downloadUrl(url, timeoutMs) {
+  const abortController = new AbortController();
+  const timer = setTimeout(() => abortController.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, { signal: abortController.signal });
+    if (!response.ok) {
+      throw new Error(`download ${response.status}`);
+    }
+    return Buffer.from(await response.arrayBuffer());
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      throw new Error(`Generated image download timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function generateConcept(env, concept) {
+  const requestBody = {
+    model: 'gpt-image-2-all',
+    prompt: concept.prompt,
+    n: 1,
+    size: '1024x1024',
+  };
+  const payload = await fetchJson(
+    buildUrl(env.baseUrl),
+    {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${env.apiKey}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    },
+    env.timeoutMs,
+  );
+
+  const urls = extractImageUrls(payload);
+  const b64Images = extractBase64Images(payload);
+  let bytes;
+  if (urls[0]) {
+    bytes = await downloadUrl(urls[0], env.timeoutMs);
+  } else if (b64Images[0]) {
+    bytes = Buffer.from(b64Images[0], 'base64');
+  } else {
+    throw new Error(`VectorEngine returned no image for ${concept.id}`);
+  }
+
+  mkdirSync(selectedOutputDir, { recursive: true });
+  const extension = inferExtensionFromBytes(bytes);
+  const outputPath = path.join(selectedOutputDir, `${concept.id}.${extension}`);
+  writeFileSync(outputPath, bytes);
+  return outputPath;
+}
+
+const dryRun = args.has('--dry-run') || !args.has('--live');
+const onlyIds = String(args.get('--only') || '')
+  .split(',')
+  .map((value) => value.trim())
+  .filter(Boolean);
+const limit = Number.parseInt(String(args.get('--limit') || '0'), 10);
+const selected = concepts
+  .filter((concept) => !onlyIds.length || onlyIds.includes(concept.id))
+  .slice(0, limit > 0 ? limit : concepts.length);
+
+if (dryRun) {
+  console.log(
+    JSON.stringify(
+      {
+        mode: 'dry-run',
+        style,
+        outputDir: selectedOutputDir,
+        count: selected.length,
+        requests: selected.map((concept) => ({
+          id: concept.id,
+          title: concept.title,
+          body: {
+            model: 'gpt-image-2-all',
+            prompt: concept.prompt,
+            n: 1,
+            size: '1024x1024',
+          },
+        })),
+      },
+      null,
+      2,
+    ),
+  );
+  process.exit(0);
+}
+
+const env = resolveEnv();
+if (!env.baseUrl || !env.apiKey) {
+  console.error(
+    JSON.stringify({
+      ok: false,
+      error: 'Missing VECTOR_ENGINE_BASE_URL or VECTOR_ENGINE_API_KEY',
+      hasBaseUrl: Boolean(env.baseUrl),
+      hasApiKey: Boolean(env.apiKey),
+    }),
+  );
+  process.exit(1);
+}
+
+const generated = [];
+for (const concept of selected) {
+  console.log(`Generating ${concept.id}...`);
+  generated.push(await generateConcept(env, concept));
+}
+
+console.log(
+  JSON.stringify(
+    {
+      ok: true,
+      count: generated.length,
+      files: generated,
+    },
+    null,
+    2,
+  ),
+);

server-rs/crates/api-server/src/app.rs

@@ -77,6 +77,8 @@ use crate::{
         generate_custom_world_opening_cg, generate_custom_world_scene_image,
         generate_custom_world_scene_npc, upload_custom_world_cover_image,
     },
+    edutainment_baby_drawing::create_baby_love_drawing_magic,
+    edutainment_baby_object::generate_baby_object_match_assets,
     error_middleware::normalize_error_response,
     health::health_check,
     hyper3d_generation::{
@@ -184,6 +186,7 @@ use crate::{
 const PUZZLE_REFERENCE_IMAGE_BODY_LIMIT_BYTES: usize = 12 * 1024 * 1024;
 const PROFILE_FEEDBACK_BODY_LIMIT_BYTES: usize = 6 * 1024 * 1024;
 const HYPER3D_IMAGE_TO_MODEL_BODY_LIMIT_BYTES: usize = 56 * 1024 * 1024;
+const BABY_LOVE_DRAWING_MAGIC_BODY_LIMIT_BYTES: usize = 8 * 1024 * 1024;
 
 // 统一由这里构造 Axum 路由树，后续再逐项挂接中间件与业务路由。
 pub fn build_router(state: AppState) -> Router {
@@ -647,6 +650,24 @@ pub fn build_router(state: AppState) -> Router {
             "/api/creation-entry/config",
             get(get_creation_entry_config_handler),
         )
+        .route(
+            "/api/creation/edutainment/baby-object-match/assets",
+            post(generate_baby_object_match_assets).route_layer(middleware::from_fn_with_state(
+                state.clone(),
+                require_bearer_auth,
+            )),
+        )
+        .route(
+            "/api/creation/edutainment/baby-love-drawing/magic",
+            post(create_baby_love_drawing_magic)
+                .layer(DefaultBodyLimit::max(
+                    BABY_LOVE_DRAWING_MAGIC_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
+        )
         .route(
             "/api/runtime/settings",
             get(get_runtime_settings)

server-rs/crates/api-server/src/creation_entry_config.rs

@@ -90,6 +90,12 @@ pub fn resolve_creation_entry_route_id(path: &str) -> Option<&'static str> {
     if normalized.starts_with("/api/creation/visual-novel") {
         return Some("visual-novel");
     }
+    if normalized.starts_with("/api/creation/edutainment/baby-object-match") {
+        return Some("baby-object-match");
+    }
+    if normalized.starts_with("/api/creation/edutainment/baby-love-drawing") {
+        return Some("baby-love-drawing");
+    }
     None
 }
 
@@ -112,40 +118,11 @@ pub(crate) fn test_creation_entry_config_response()
             title: module_runtime::DEFAULT_CREATION_ENTRY_MODAL_TITLE.to_string(),
             description: module_runtime::DEFAULT_CREATION_ENTRY_MODAL_DESCRIPTION.to_string(),
         },
-        creation_types: vec![
-            test_creation_type("rpg", false, true, 10),
-            test_creation_type("big-fish", false, true, 20),
-            test_creation_type("puzzle", true, true, 30),
-            test_creation_type("match3d", true, true, 40),
-            test_creation_type("square-hole", false, true, 50),
-            test_creation_type("visual-novel", true, false, 60),
-            test_creation_type("airp", true, false, 70),
-            test_creation_type("creative-agent", false, true, 80),
-        ],
+        creation_types: module_runtime::default_creation_entry_type_snapshots(0),
         updated_at_micros: 0,
     })
 }
 
-#[cfg(test)]
-fn test_creation_type(
-    id: &str,
-    visible: bool,
-    open: bool,
-    sort_order: i32,
-) -> module_runtime::CreationEntryTypeSnapshot {
-    module_runtime::CreationEntryTypeSnapshot {
-        id: id.to_string(),
-        title: id.to_string(),
-        subtitle: "测试入口".to_string(),
-        badge: "测试".to_string(),
-        image_src: format!("/creation-type-references/{id}.webp"),
-        visible,
-        open,
-        sort_order,
-        updated_at_micros: 0,
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -172,6 +149,29 @@ mod tests {
             resolve_creation_entry_route_id("/api/creation/visual-novel/sessions"),
             Some("visual-novel"),
         );
+        assert_eq!(
+            resolve_creation_entry_route_id("/api/creation/edutainment/baby-object-match/assets"),
+            Some("baby-object-match"),
+        );
+        assert_eq!(
+            resolve_creation_entry_route_id("/api/creation/edutainment/baby-love-drawing/magic"),
+            Some("baby-love-drawing"),
+        );
         assert_eq!(resolve_creation_entry_route_id("/healthz"), None);
     }
+
+    #[test]
+    fn test_creation_entry_config_response_keeps_baby_object_match_visible() {
+        let config = test_creation_entry_config_response();
+        let baby_object_match = config
+            .creation_types
+            .iter()
+            .find(|item| item.id == "baby-object-match")
+            .expect("test creation entry config should include baby-object-match");
+
+        assert_eq!(baby_object_match.title, "宝贝识物");
+        assert!(baby_object_match.visible);
+        assert!(baby_object_match.open);
+        assert_eq!(baby_object_match.sort_order, 90);
+    }
 }

server-rs/crates/api-server/src/edutainment_baby_drawing.rs

@@ -0,0 +1,337 @@
+use axum::{
+    Json,
+    extract::{Extension, State, rejection::JsonRejection},
+    http::StatusCode,
+    response::Response,
+};
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64_STANDARD};
+use image::{ColorType, ImageEncoder, codecs::png::PngEncoder};
+use serde::{Deserialize, Serialize};
+use serde_json::{Value, json};
+
+use crate::{
+    api_response::json_success_body,
+    http_error::AppError,
+    openai_image_generation::{
+        DownloadedOpenAiImage, build_openai_image_http_client, create_openai_image_generation,
+        require_openai_image_settings,
+    },
+    request_context::RequestContext,
+    state::AppState,
+};
+
+const BABY_LOVE_DRAWING_PROVIDER: &str = "vector-engine-gpt-image-2";
+const BABY_LOVE_DRAWING_IMAGE_SIZE: &str = "1024x1024";
+const BABY_LOVE_DRAWING_MAX_STROKES: usize = 600;
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct CreateBabyLoveDrawingMagicRequest {
+    original_image_src: String,
+    #[serde(default)]
+    stroke_trace: Vec<BabyLoveDrawingStrokePayload>,
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct BabyLoveDrawingStrokePayload {
+    stroke_id: String,
+    tool: String,
+    color: String,
+    #[serde(default)]
+    points: Vec<BabyLoveDrawingPointPayload>,
+}
+
+#[derive(Debug, Deserialize)]
+struct BabyLoveDrawingPointPayload {
+    x: f64,
+    y: f64,
+    t: f64,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct CreateBabyLoveDrawingMagicResponse {
+    magic_image_src: String,
+    generation_provider: String,
+    prompt: String,
+}
+
+pub async fn create_baby_love_drawing_magic(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    payload: Result<Json<CreateBabyLoveDrawingMagicRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        baby_love_drawing_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "edutainment-baby-drawing",
+                "message": error.body_text(),
+            })),
+        )
+    })?;
+    validate_magic_request(&payload)
+        .map_err(|error| baby_love_drawing_error_response(&request_context, error))?;
+
+    let settings = require_openai_image_settings(&state)
+        .map_err(|error| baby_love_drawing_error_response(&request_context, error))?;
+    let http_client = build_openai_image_http_client(&settings)
+        .map_err(|error| baby_love_drawing_error_response(&request_context, error))?;
+    let prompt = build_baby_love_drawing_magic_prompt(payload.stroke_trace.as_slice());
+    let reference_images = vec![payload.original_image_src.trim().to_string()];
+    let generated = create_openai_image_generation(
+        &http_client,
+        &settings,
+        prompt.as_str(),
+        Some(build_baby_love_drawing_negative_prompt()),
+        BABY_LOVE_DRAWING_IMAGE_SIZE,
+        1,
+        reference_images.as_slice(),
+        "宝贝爱画绘画魔法图片生成失败",
+    )
+    .await
+    .map_err(|error| baby_love_drawing_error_response(&request_context, error))?;
+    let generated_image = generated.images.into_iter().next().ok_or_else(|| {
+        baby_love_drawing_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "vector-engine",
+                "message": "宝贝爱画绘画魔法没有返回图片。",
+            })),
+        )
+    })?;
+    let magic_image_src = build_png_data_url(generated_image)
+        .map_err(|error| baby_love_drawing_error_response(&request_context, error))?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        CreateBabyLoveDrawingMagicResponse {
+            magic_image_src,
+            generation_provider: BABY_LOVE_DRAWING_PROVIDER.to_string(),
+            prompt,
+        },
+    ))
+}
+
+fn validate_magic_request(payload: &CreateBabyLoveDrawingMagicRequest) -> Result<(), AppError> {
+    let original_image_src = payload.original_image_src.trim();
+    if !original_image_src.starts_with("data:image/") || !original_image_src.contains(";base64,") {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "edutainment-baby-drawing",
+                "message": "绘画原图必须是图片 Data URL。",
+            })),
+        );
+    }
+
+    if payload.stroke_trace.len() > BABY_LOVE_DRAWING_MAX_STROKES {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "edutainment-baby-drawing",
+                "message": "绘画笔触数量过多，请重新完成绘画后再使用魔法。",
+            })),
+        );
+    }
+
+    Ok(())
+}
+
+fn build_baby_love_drawing_magic_prompt(stroke_trace: &[BabyLoveDrawingStrokePayload]) -> String {
+    let stroke_count = stroke_trace.len();
+    let brush_count = stroke_trace
+        .iter()
+        .filter(|stroke| stroke.tool.trim() == "brush")
+        .count();
+    let eraser_count = stroke_trace
+        .iter()
+        .filter(|stroke| stroke.tool.trim() == "eraser")
+        .count();
+    let color_summary = summarize_stroke_colors(stroke_trace);
+    let trace_bounds = summarize_trace_bounds(stroke_trace);
+
+    format!(
+        "根据参考图中的儿童绘画内容，为寓教于乐独立关卡“宝贝爱画”生成一张绘本风格图片。\n\
+        必须保留小朋友原始画面的主体构图、线条方向、颜色关系和童趣笔触，不要改成与原图无关的新内容。\n\
+        输出风格：明亮、温暖、柔和、卡通绘本风格，适合 4-8 岁儿童，画面干净，边缘柔和，有轻微纸面质感。\n\
+        笔触信息：总笔触 {stroke_count} 条，画笔 {brush_count} 条，橡皮 {eraser_count} 条，主要颜色 {color_summary}，绘制范围 {trace_bounds}。\n\
+        不要生成文字、水印、Logo、按钮、UI 面板、真实照片风、恐怖或成人化内容。"
+    )
+}
+
+fn summarize_stroke_colors(stroke_trace: &[BabyLoveDrawingStrokePayload]) -> String {
+    let mut colors = Vec::new();
+    for stroke in stroke_trace {
+        if stroke.stroke_id.trim().is_empty() {
+            continue;
+        }
+        let color = stroke.color.trim();
+        if color.is_empty() || colors.iter().any(|value| value == color) {
+            continue;
+        }
+        colors.push(color.to_string());
+        if colors.len() >= 5 {
+            break;
+        }
+    }
+
+    if colors.is_empty() {
+        "无明显颜色记录".to_string()
+    } else {
+        colors.join("、")
+    }
+}
+
+fn summarize_trace_bounds(stroke_trace: &[BabyLoveDrawingStrokePayload]) -> String {
+    let mut min_x = 1.0_f64;
+    let mut min_y = 1.0_f64;
+    let mut max_x = 0.0_f64;
+    let mut max_y = 0.0_f64;
+    let mut has_point = false;
+
+    for point in stroke_trace.iter().flat_map(|stroke| stroke.points.iter()) {
+        if !(point.x.is_finite() && point.y.is_finite() && point.t.is_finite()) {
+            continue;
+        }
+        has_point = true;
+        min_x = min_x.min(point.x.clamp(0.0, 1.0));
+        min_y = min_y.min(point.y.clamp(0.0, 1.0));
+        max_x = max_x.max(point.x.clamp(0.0, 1.0));
+        max_y = max_y.max(point.y.clamp(0.0, 1.0));
+    }
+
+    if !has_point {
+        return "无可用坐标记录".to_string();
+    }
+
+    format!("x {:.2}-{:.2}, y {:.2}-{:.2}", min_x, max_x, min_y, max_y)
+}
+
+fn build_baby_love_drawing_negative_prompt() -> &'static str {
+    "文字，水印，Logo，按钮，UI，面板，复杂背景，真实照片风，恐怖元素，成人化内容，攻击性内容，替换原图主体，完全无关的新画面"
+}
+
+fn build_png_data_url(image: DownloadedOpenAiImage) -> Result<String, AppError> {
+    let png_bytes = normalize_generated_image_to_png(image.bytes.as_slice())?;
+    Ok(format!(
+        "data:image/png;base64,{}",
+        BASE64_STANDARD.encode(png_bytes)
+    ))
+}
+
+fn normalize_generated_image_to_png(source: &[u8]) -> Result<Vec<u8>, AppError> {
+    let rgba_image = image::load_from_memory(source)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "vector-engine",
+                "message": format!("解析宝贝爱画魔法图片失败：{error}"),
+            }))
+        })?
+        .to_rgba8();
+    let (width, height) = rgba_image.dimensions();
+    let mut encoded = Vec::new();
+    let encoder = PngEncoder::new(&mut encoded);
+    encoder
+        .write_image(rgba_image.as_raw(), width, height, ColorType::Rgba8.into())
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "vector-engine",
+                "message": format!("转换宝贝爱画魔法图片为 PNG 失败：{error}"),
+            }))
+        })?;
+
+    Ok(encoded)
+}
+
+fn baby_love_drawing_error_response(request_context: &RequestContext, error: AppError) -> Response {
+    error.into_response_with_context(Some(request_context))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn sample_request() -> CreateBabyLoveDrawingMagicRequest {
+        CreateBabyLoveDrawingMagicRequest {
+            original_image_src: "data:image/png;base64,abcd".to_string(),
+            stroke_trace: vec![BabyLoveDrawingStrokePayload {
+                stroke_id: "stroke-1".to_string(),
+                tool: "brush".to_string(),
+                color: "#ef4444".to_string(),
+                points: vec![
+                    BabyLoveDrawingPointPayload {
+                        x: 0.2,
+                        y: 0.3,
+                        t: 1.0,
+                    },
+                    BabyLoveDrawingPointPayload {
+                        x: 0.7,
+                        y: 0.8,
+                        t: 2.0,
+                    },
+                ],
+            }],
+        }
+    }
+
+    #[test]
+    fn magic_prompt_keeps_child_drawing_and_picture_book_style() {
+        let request = sample_request();
+        let prompt = build_baby_love_drawing_magic_prompt(request.stroke_trace.as_slice());
+
+        assert!(prompt.contains("宝贝爱画"));
+        assert!(prompt.contains("绘本风格"));
+        assert!(prompt.contains("保留小朋友原始画面"));
+        assert!(prompt.contains("#ef4444"));
+        assert!(prompt.contains("x 0.20-0.70"));
+    }
+
+    #[test]
+    fn magic_request_requires_image_data_url() {
+        let request = sample_request();
+        assert!(validate_magic_request(&request).is_ok());
+
+        let invalid = CreateBabyLoveDrawingMagicRequest {
+            original_image_src: "https://example.test/image.png".to_string(),
+            ..sample_request()
+        };
+
+        assert!(validate_magic_request(&invalid).is_err());
+    }
+
+    #[test]
+    fn normalizes_png_to_png_data_url() {
+        let mut source = Vec::new();
+        let pixels = vec![255u8; 4 * 2 * 2];
+        let encoder = PngEncoder::new(&mut source);
+        encoder
+            .write_image(pixels.as_slice(), 2, 2, ColorType::Rgba8.into())
+            .expect("test png should encode");
+
+        let image_src = build_png_data_url(DownloadedOpenAiImage {
+            bytes: source,
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        })
+        .expect("test png should normalize");
+
+        assert!(image_src.starts_with("data:image/png;base64,"));
+    }
+
+    #[test]
+    fn trace_summary_ignores_invalid_points() {
+        let mut request = sample_request();
+        request.stroke_trace[0]
+            .points
+            .push(BabyLoveDrawingPointPayload {
+                x: f64::NAN,
+                y: 0.1,
+                t: 3.0,
+            });
+
+        assert_eq!(
+            summarize_trace_bounds(request.stroke_trace.as_slice()),
+            "x 0.20-0.70, y 0.30-0.80",
+        );
+    }
+}

server-rs/crates/api-server/src/edutainment_baby_object.rs

@@ -0,0 +1,642 @@
+use std::time::Instant;
+
+use axum::{
+    Json,
+    extract::{Extension, State, rejection::JsonRejection},
+    http::StatusCode,
+    response::Response,
+};
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64_STANDARD};
+use futures_util::{StreamExt, stream::FuturesUnordered};
+use image::{ColorType, ImageEncoder, codecs::png::PngEncoder};
+use serde::{Deserialize, Serialize};
+use serde_json::{Value, json};
+
+use crate::{
+    api_response::json_success_body,
+    character_visual_assets::try_apply_background_alpha_to_png,
+    http_error::AppError,
+    openai_image_generation::{
+        DownloadedOpenAiImage, OpenAiImageSettings, build_openai_image_http_client,
+        create_openai_image_generation, require_openai_image_settings,
+    },
+    request_context::RequestContext,
+    state::AppState,
+};
+
+const BABY_OBJECT_MATCH_PROVIDER: &str = "vector-engine-gpt-image-2";
+const BABY_OBJECT_MATCH_IMAGE_SIZE: &str = "1024x1024";
+const BABY_OBJECT_MATCH_BACKGROUND_IMAGE_SIZE: &str = "1536x1024";
+const BABY_OBJECT_MATCH_VECTOR_ENGINE_REQUEST_TIMEOUT_MS: u64 = 480_000;
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct GenerateBabyObjectMatchAssetsRequest {
+    item_names: Vec<String>,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct GenerateBabyObjectMatchAssetsResponse {
+    assets: Vec<BabyObjectMatchItemAssetPayload>,
+    visual_package: BabyObjectMatchVisualPackagePayload,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct BabyObjectMatchItemAssetPayload {
+    item_id: String,
+    item_name: String,
+    image_src: String,
+    asset_object_id: Option<String>,
+    generation_provider: String,
+    prompt: String,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+enum BabyObjectMatchVisualAssetKind {
+    Background,
+    UiFrame,
+    GiftBox,
+    Basket,
+    SmokePuff,
+}
+
+impl BabyObjectMatchVisualAssetKind {
+    fn asset_id(self) -> &'static str {
+        match self {
+            Self::Background => "baby-object-visual-background",
+            Self::UiFrame => "baby-object-visual-ui-frame",
+            Self::GiftBox => "baby-object-visual-gift-box",
+            Self::Basket => "baby-object-visual-basket",
+            Self::SmokePuff => "baby-object-visual-smoke-puff",
+        }
+    }
+
+    fn contract_kind(self) -> &'static str {
+        match self {
+            Self::Background => "background",
+            Self::UiFrame => "ui-frame",
+            Self::GiftBox => "gift-box",
+            Self::Basket => "basket",
+            Self::SmokePuff => "smoke-puff",
+        }
+    }
+
+    fn requires_transparency(self) -> bool {
+        !matches!(self, Self::Background)
+    }
+
+    fn image_size(self) -> &'static str {
+        match self {
+            Self::Background => BABY_OBJECT_MATCH_BACKGROUND_IMAGE_SIZE,
+            Self::UiFrame | Self::GiftBox | Self::Basket | Self::SmokePuff => {
+                BABY_OBJECT_MATCH_IMAGE_SIZE
+            }
+        }
+    }
+
+    fn failure_context(self) -> &'static str {
+        match self {
+            Self::Background => "宝贝识物背景环境图片生成失败",
+            Self::UiFrame => "宝贝识物 UI 装饰图片生成失败",
+            Self::GiftBox => "宝贝识物礼物盒图片生成失败",
+            Self::Basket => "宝贝识物篮子图片生成失败",
+            Self::SmokePuff => "宝贝识物烟雾特效图片生成失败",
+        }
+    }
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct BabyObjectMatchVisualPackagePayload {
+    theme_prompt: String,
+    assets: Vec<BabyObjectMatchVisualAssetPayload>,
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct BabyObjectMatchVisualAssetPayload {
+    asset_id: String,
+    asset_kind: String,
+    image_src: String,
+    asset_object_id: Option<String>,
+    generation_provider: String,
+    prompt: String,
+}
+
+pub async fn generate_baby_object_match_assets(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    payload: Result<Json<GenerateBabyObjectMatchAssetsRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        baby_object_match_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "edutainment-baby-object",
+                "message": error.body_text(),
+            })),
+        )
+    })?;
+    let item_names = normalize_item_names(payload.item_names)
+        .map_err(|error| baby_object_match_error_response(&request_context, error))?;
+
+    let settings = require_openai_image_settings(&state)
+        .map_err(|error| baby_object_match_error_response(&request_context, error))?;
+    let settings = with_baby_object_match_image_timeout(settings);
+    let http_client = build_openai_image_http_client(&settings)
+        .map_err(|error| baby_object_match_error_response(&request_context, error))?;
+
+    let request_started_at = Instant::now();
+    tracing::info!(
+        item_count = item_names.len(),
+        "宝贝识物 image-2 资源生成开始"
+    );
+    let (assets, visual_package) = tokio::try_join!(
+        build_baby_object_match_item_assets(&http_client, &settings, item_names.as_slice()),
+        build_baby_object_match_visual_package(&http_client, &settings, item_names.as_slice()),
+    )
+    .map_err(|error| baby_object_match_error_response(&request_context, error))?;
+    tracing::info!(
+        elapsed_ms = request_started_at.elapsed().as_millis() as u64,
+        "宝贝识物 image-2 资源生成完成"
+    );
+
+    Ok(json_success_body(
+        Some(&request_context),
+        GenerateBabyObjectMatchAssetsResponse {
+            assets,
+            visual_package,
+        },
+    ))
+}
+
+fn normalize_item_names(item_names: Vec<String>) -> Result<Vec<String>, AppError> {
+    let normalized = item_names
+        .into_iter()
+        .map(|value| value.trim().to_string())
+        .collect::<Vec<_>>();
+
+    if normalized.len() != 2 || normalized.iter().any(|value| value.is_empty()) {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "edutainment-baby-object",
+                "message": "请填写两个物品名称。",
+            })),
+        );
+    }
+
+    Ok(normalized)
+}
+
+fn build_baby_object_match_item_prompt(item_name: &str) -> String {
+    format!(
+        "为儿童动作 Demo 玩法“宝贝识物”生成物品素材。关键词：{item_name}。\n\
+        风格必须与寓教于乐板块统一：明亮、温暖、卡通绘本质感，适合 4-8 岁儿童，物体边缘清晰，色彩干净，能自然放在草地舞台插画中。\n\
+        画面只允许出现一个围绕关键词“{item_name}”的单一物品主体，不要生成组合物、多个物体、人物、手、篮子、礼物盒或玩法 UI。\n\
+        不要生成背景、场景、氛围渲染、阴影地面、文字、水印、边框或按钮。背景必须是纯白或直接透明，便于服务端做透明抠图。\n\
+        输出为居中完整物品，留少量透明安全边距，最终素材将作为透明 PNG 进入游戏。"
+    )
+}
+
+fn build_baby_object_match_negative_prompt() -> &'static str {
+    "背景，场景，草地，天空，房间，光效氛围，多个物品，组合套装，人物，手，篮子，礼物盒，包装文字，标签文字，水印，Logo，UI，按钮，边框，真实照片风，复杂投影"
+}
+
+fn with_baby_object_match_image_timeout(mut settings: OpenAiImageSettings) -> OpenAiImageSettings {
+    settings.request_timeout_ms = settings
+        .request_timeout_ms
+        .max(BABY_OBJECT_MATCH_VECTOR_ENGINE_REQUEST_TIMEOUT_MS);
+    settings
+}
+
+async fn build_baby_object_match_item_assets(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    item_names: &[String],
+) -> Result<Vec<BabyObjectMatchItemAssetPayload>, AppError> {
+    let mut pending = FuturesUnordered::new();
+
+    // 中文注释：两个物品图互不依赖，并发生成可缩短创作等待时间。
+    for (index, item_name) in item_names.iter().cloned().enumerate() {
+        let prompt = build_baby_object_match_item_prompt(item_name.as_str());
+        pending.push(async move {
+            let asset_started_at = Instant::now();
+            tracing::info!(
+                asset_kind = "item",
+                item_index = index + 1,
+                item_name = %item_name,
+                "宝贝识物 image-2 物品资源生成开始"
+            );
+            let generated = create_openai_image_generation(
+                http_client,
+                settings,
+                prompt.as_str(),
+                Some(build_baby_object_match_negative_prompt()),
+                BABY_OBJECT_MATCH_IMAGE_SIZE,
+                1,
+                &[],
+                "宝贝识物物品图片生成失败",
+            )
+            .await?;
+            let generated_image = generated.images.into_iter().next().ok_or_else(|| {
+                AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                    "provider": "vector-engine",
+                    "message": "宝贝识物物品图片生成没有返回图片。",
+                }))
+            })?;
+            let image_src = build_transparent_png_data_url(generated_image)?;
+            tracing::info!(
+                asset_kind = "item",
+                item_index = index + 1,
+                item_name = %item_name,
+                elapsed_ms = asset_started_at.elapsed().as_millis() as u64,
+                "宝贝识物 image-2 物品资源生成完成"
+            );
+
+            Ok::<_, AppError>(BabyObjectMatchItemAssetPayload {
+                item_id: format!("baby-object-item-{}", index + 1),
+                item_name,
+                image_src,
+                asset_object_id: None,
+                generation_provider: BABY_OBJECT_MATCH_PROVIDER.to_string(),
+                prompt,
+            })
+        });
+    }
+
+    let mut assets = Vec::with_capacity(item_names.len());
+    while let Some(result) = pending.next().await {
+        assets.push(result?);
+    }
+    assets.sort_by_key(|asset| asset.item_id.clone());
+
+    Ok(assets)
+}
+
+async fn build_baby_object_match_visual_package(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    item_names: &[String],
+) -> Result<BabyObjectMatchVisualPackagePayload, AppError> {
+    let package_started_at = Instant::now();
+    let theme_prompt = build_baby_object_match_visual_theme_prompt(item_names);
+    let kinds = [
+        BabyObjectMatchVisualAssetKind::Background,
+        BabyObjectMatchVisualAssetKind::UiFrame,
+        BabyObjectMatchVisualAssetKind::GiftBox,
+        BabyObjectMatchVisualAssetKind::Basket,
+        BabyObjectMatchVisualAssetKind::SmokePuff,
+    ];
+    let mut pending = FuturesUnordered::new();
+    tracing::info!(
+        asset_count = kinds.len(),
+        "宝贝识物 image-2 视觉主题包生成开始"
+    );
+
+    for kind in kinds.iter().copied() {
+        let prompt = build_baby_object_match_visual_asset_prompt(kind, item_names, &theme_prompt);
+        pending.push(async move {
+            let asset_started_at = Instant::now();
+            let asset_kind = kind.contract_kind();
+            tracing::info!(asset_kind, "宝贝识物 image-2 视觉资源生成开始");
+            let generated = create_openai_image_generation(
+                http_client,
+                settings,
+                prompt.as_str(),
+                Some(build_baby_object_match_visual_negative_prompt(kind)),
+                kind.image_size(),
+                1,
+                &[],
+                kind.failure_context(),
+            )
+            .await?;
+            let generated_image = generated.images.into_iter().next().ok_or_else(|| {
+                AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                    "provider": "vector-engine",
+                    "message": format!("{}：VectorEngine 没有返回图片。", kind.failure_context()),
+                }))
+            })?;
+            let image_src = if kind.requires_transparency() {
+                build_transparent_png_data_url(generated_image)?
+            } else {
+                build_png_data_url(generated_image)?
+            };
+            tracing::info!(
+                asset_kind,
+                elapsed_ms = asset_started_at.elapsed().as_millis() as u64,
+                "宝贝识物 image-2 视觉资源生成完成"
+            );
+
+            Ok::<_, AppError>(BabyObjectMatchVisualAssetPayload {
+                asset_id: kind.asset_id().to_string(),
+                asset_kind: asset_kind.to_string(),
+                image_src,
+                asset_object_id: None,
+                generation_provider: BABY_OBJECT_MATCH_PROVIDER.to_string(),
+                prompt,
+            })
+        });
+    }
+
+    let mut assets = Vec::with_capacity(kinds.len());
+    while let Some(result) = pending.next().await {
+        assets.push(result?);
+    }
+    assets.sort_by_key(|asset| match asset.asset_kind.as_str() {
+        "background" => 0,
+        "ui-frame" => 1,
+        "gift-box" => 2,
+        "basket" => 3,
+        "smoke-puff" => 4,
+        _ => 5,
+    });
+    tracing::info!(
+        elapsed_ms = package_started_at.elapsed().as_millis() as u64,
+        "宝贝识物 image-2 视觉主题包生成完成"
+    );
+
+    Ok(BabyObjectMatchVisualPackagePayload {
+        theme_prompt,
+        assets,
+    })
+}
+
+fn build_baby_object_match_visual_theme_prompt(item_names: &[String]) -> String {
+    let item_a = item_names.first().map(String::as_str).unwrap_or_default();
+    let item_b = item_names.get(1).map(String::as_str).unwrap_or_default();
+    let theme_hint = resolve_baby_object_match_theme_hint(item_names);
+
+    format!(
+        "根据创作者填写的两个物品关键词“{item_a}”和“{item_b}”，为儿童动作 Demo 玩法“宝贝识物”生成一套完整游戏视觉包装。\n\
+        视觉必须保持寓教于乐板块统一的明亮、温暖、卡通绘本插画风，适合 4-8 岁儿童。\n\
+        主题匹配：{theme_hint}\n\
+        所有资源需要围绕这两个关键词形成统一主题，但不能改变物品识别和左右篮子固定规则。"
+    )
+}
+
+fn resolve_baby_object_match_theme_hint(item_names: &[String]) -> &'static str {
+    let joined = item_names.join(" ").to_lowercase();
+    let fruit_keywords = [
+        "苹果",
+        "橘子",
+        "桔子",
+        "香蕉",
+        "葡萄",
+        "草莓",
+        "西瓜",
+        "梨",
+        "桃",
+        "水果",
+        "apple",
+        "orange",
+        "banana",
+        "grape",
+        "strawberry",
+        "watermelon",
+        "fruit",
+    ];
+    let character_keywords = [
+        "佩琪",
+        "小猪佩奇",
+        "小猪佩琪",
+        "奥特曼",
+        "动漫",
+        "动画",
+        "卡通",
+        "玩具",
+        "角色",
+        "公仔",
+        "peppa",
+        "ultraman",
+        "anime",
+        "cartoon",
+        "toy",
+        "doll",
+        "figure",
+    ];
+
+    if fruit_keywords
+        .iter()
+        .any(|keyword| joined.contains(keyword))
+    {
+        return "若关键词属于水果，背景环境和 UI 元素匹配果园、自然、阳光、树叶等主题。";
+    }
+
+    if character_keywords
+        .iter()
+        .any(|keyword| joined.contains(keyword))
+    {
+        return "若关键词属于动漫角色、玩具或公仔，背景环境和 UI 元素匹配动漫、玩具房、儿童玩具等主题。";
+    }
+
+    "根据关键词语义自然匹配合适主题，保持儿童寓教于乐插画风。"
+}
+
+fn build_baby_object_match_visual_asset_prompt(
+    kind: BabyObjectMatchVisualAssetKind,
+    item_names: &[String],
+    theme_prompt: &str,
+) -> String {
+    let item_a = item_names.first().map(String::as_str).unwrap_or_default();
+    let item_b = item_names.get(1).map(String::as_str).unwrap_or_default();
+    let base = format!(
+        "{theme_prompt}\n\
+        当前两个关键词：{item_a}、{item_b}。\n\
+        输出必须是无文字、无水印、无 Logo 的游戏美术资源。"
+    );
+
+    match kind {
+        BabyObjectMatchVisualAssetKind::Background => format!(
+            "{base}\n\
+            生成游戏背景环境图。背景需要根据关键词主题匹配环境，例如水果可偏果园自然，动漫角色或玩具可偏动漫玩具主题。\n\
+            保持中间、屏幕中下方和底部左右篮子区域清爽，给放大后的礼物盒、中央物品和左右大篮子预留足够空间，不能画入礼物盒、篮子、物品、人物、文字或操作 UI。"
+        ),
+        BabyObjectMatchVisualAssetKind::UiFrame => format!(
+            "{base}\n\
+            生成透明 PNG 的 UI 装饰框资源，用于字幕条和计数器的风格化包装。\n\
+            只生成柔和装饰边框、贴纸感边缘和少量主题点缀，不生成任何文字、数字、按钮、图标说明或大面积背景。背景需要纯白或透明友好，便于抠图。"
+        ),
+        BabyObjectMatchVisualAssetKind::GiftBox => format!(
+            "{base}\n\
+            生成透明 PNG 的大号礼物盒资源。礼物盒会在游戏中以约 2 倍视觉尺寸展示，需要主体饱满、轮廓清晰、中心构图、边缘安全留白少，打开动画时可被烟雾遮罩后移除。\n\
+            礼物盒要与关键词主题匹配，可以带主题贴纸感装饰，但不能出现任何文字、人物、手、篮子或待分类物品。背景需要纯白或透明友好，便于抠图。"
+        ),
+        BabyObjectMatchVisualAssetKind::Basket => format!(
+            "{base}\n\
+            生成透明 PNG 的大号篮子资源，游戏左右两侧会复用同一个篮子造型并以约 1.5 倍视觉尺寸展示。篮子主体要饱满、开口清晰、可读性高、边缘安全留白少。\n\
+            篮子要与关键词主题匹配，可以有主题色和贴纸感边缘，但不能出现任何文字、礼物盒、人物、手或待分类物品。背景需要纯白或透明友好，便于抠图。"
+        ),
+        BabyObjectMatchVisualAssetKind::SmokePuff => format!(
+            "{base}\n\
+            生成透明 PNG 的烟雾弹出特效资源，用于礼物盒打开瞬间。画面只允许出现一团柔和、圆润、儿童绘本风的云朵烟雾和少量主题色星点，不要生成礼物盒、篮子、物品、人物、手、文字或 UI。\n\
+            烟雾需要中心构图、边缘柔和、透明边界干净，适合覆盖礼物盒打开区域并衬托中央物品弹出。背景需要纯白或透明友好，便于抠图。"
+        ),
+    }
+}
+
+fn build_baby_object_match_visual_negative_prompt(
+    kind: BabyObjectMatchVisualAssetKind,
+) -> &'static str {
+    match kind {
+        BabyObjectMatchVisualAssetKind::Background => {
+            "文字，数字，水印，Logo，按钮，说明面板，人物，手，礼物盒，篮子，中心物品，复杂前景遮挡，真实照片风，暗黑风"
+        }
+        BabyObjectMatchVisualAssetKind::UiFrame => {
+            "文字，数字，水印，Logo，按钮，复杂面板，大面积实心背景，人物，手，礼物盒，篮子，物品主体，真实照片风"
+        }
+        BabyObjectMatchVisualAssetKind::GiftBox => {
+            "文字，数字，水印，Logo，人物，手，篮子，待分类物品，大面积背景，场景，真实照片风"
+        }
+        BabyObjectMatchVisualAssetKind::Basket => {
+            "文字，数字，水印，Logo，人物，手，礼物盒，待分类物品，大面积背景，场景，真实照片风"
+        }
+        BabyObjectMatchVisualAssetKind::SmokePuff => {
+            "文字，数字，水印，Logo，人物，手，礼物盒，篮子，待分类物品，大面积背景，场景，真实照片风，硬边爆炸，火焰"
+        }
+    }
+}
+
+fn build_transparent_png_data_url(image: DownloadedOpenAiImage) -> Result<String, AppError> {
+    let png_bytes = normalize_generated_image_to_png(image.bytes.as_slice())?;
+    let transparent_png_bytes =
+        try_apply_background_alpha_to_png(png_bytes.as_slice()).unwrap_or(png_bytes);
+    Ok(format!(
+        "data:image/png;base64,{}",
+        BASE64_STANDARD.encode(transparent_png_bytes)
+    ))
+}
+
+fn build_png_data_url(image: DownloadedOpenAiImage) -> Result<String, AppError> {
+    let png_bytes = normalize_generated_image_to_png(image.bytes.as_slice())?;
+    Ok(format!(
+        "data:image/png;base64,{}",
+        BASE64_STANDARD.encode(png_bytes)
+    ))
+}
+
+fn normalize_generated_image_to_png(source: &[u8]) -> Result<Vec<u8>, AppError> {
+    let rgba_image = image::load_from_memory(source)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "vector-engine",
+                "message": format!("解析宝贝识物物品图片失败：{error}"),
+            }))
+        })?
+        .to_rgba8();
+    let (width, height) = rgba_image.dimensions();
+    let mut encoded = Vec::new();
+    let encoder = PngEncoder::new(&mut encoded);
+    encoder
+        .write_image(rgba_image.as_raw(), width, height, ColorType::Rgba8.into())
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "vector-engine",
+                "message": format!("转换宝贝识物物品图片为 PNG 失败：{error}"),
+            }))
+        })?;
+
+    Ok(encoded)
+}
+
+fn baby_object_match_error_response(request_context: &RequestContext, error: AppError) -> Response {
+    error.into_response_with_context(Some(request_context))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn prompt_locks_single_transparent_object_constraints() {
+        let prompt = build_baby_object_match_item_prompt("苹果");
+
+        assert!(prompt.contains("苹果"));
+        assert!(prompt.contains("卡通绘本"));
+        assert!(prompt.contains("单一物品"));
+        assert!(prompt.contains("不要生成背景"));
+        assert!(prompt.contains("透明 PNG"));
+        assert!(prompt.contains("纯白或直接透明"));
+    }
+
+    #[test]
+    fn visual_theme_prompt_maps_fruit_keywords_to_nature_theme() {
+        let names = vec!["苹果".to_string(), "橘子".to_string()];
+        let prompt = build_baby_object_match_visual_theme_prompt(names.as_slice());
+
+        assert!(prompt.contains("寓教于乐"));
+        assert!(prompt.contains("卡通绘本"));
+        assert!(prompt.contains("果园"));
+        assert!(prompt.contains("自然"));
+    }
+
+    #[test]
+    fn visual_theme_prompt_maps_character_keywords_to_toy_theme() {
+        let names = vec!["小猪佩琪".to_string(), "奥特曼".to_string()];
+        let prompt = build_baby_object_match_visual_theme_prompt(names.as_slice());
+
+        assert!(prompt.contains("寓教于乐"));
+        assert!(prompt.contains("动漫"));
+        assert!(prompt.contains("玩具"));
+    }
+
+    #[test]
+    fn visual_asset_prompt_keeps_background_clear_for_playfield() {
+        let names = vec!["苹果".to_string(), "香蕉".to_string()];
+        let theme_prompt = build_baby_object_match_visual_theme_prompt(names.as_slice());
+        let prompt = build_baby_object_match_visual_asset_prompt(
+            BabyObjectMatchVisualAssetKind::Background,
+            names.as_slice(),
+            theme_prompt.as_str(),
+        );
+
+        assert!(prompt.contains("背景环境图"));
+        assert!(prompt.contains("中间"));
+        assert!(prompt.contains("屏幕中下方"));
+        assert!(prompt.contains("无文字"));
+    }
+
+    #[test]
+    fn normalize_item_names_requires_two_non_empty_names() {
+        let names = normalize_item_names(vec![" 苹果 ".to_string(), "香蕉".to_string()])
+            .expect("two names should be valid");
+
+        assert_eq!(names, vec!["苹果".to_string(), "香蕉".to_string()]);
+        assert!(normalize_item_names(vec!["苹果".to_string()]).is_err());
+        assert!(normalize_item_names(vec!["苹果".to_string(), " ".to_string()]).is_err());
+    }
+
+    #[test]
+    fn baby_object_match_image_timeout_keeps_long_generation_alive() {
+        let settings = with_baby_object_match_image_timeout(OpenAiImageSettings {
+            base_url: "https://vector.example".to_string(),
+            api_key: "secret".to_string(),
+            request_timeout_ms: 180_000,
+        });
+
+        assert_eq!(
+            settings.request_timeout_ms,
+            BABY_OBJECT_MATCH_VECTOR_ENGINE_REQUEST_TIMEOUT_MS
+        );
+    }
+
+    #[test]
+    fn normalizes_png_to_transparent_png_data_url() {
+        let mut source = Vec::new();
+        let pixels = vec![255u8; 4 * 2 * 2];
+        let encoder = PngEncoder::new(&mut source);
+        encoder
+            .write_image(pixels.as_slice(), 2, 2, ColorType::Rgba8.into())
+            .expect("test png should encode");
+
+        let image_src = build_transparent_png_data_url(DownloadedOpenAiImage {
+            bytes: source,
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        })
+        .expect("test png should normalize");
+
+        assert!(image_src.starts_with("data:image/png;base64,"));
+    }
+}

server-rs/crates/api-server/src/main.rs

@@ -34,6 +34,8 @@ mod custom_world_asset_prompts;
 mod custom_world_foundation_draft;
 mod custom_world_result_prompts;
 mod custom_world_rpg_draft_prompts;
+mod edutainment_baby_drawing;
+mod edutainment_baby_object;
 mod error_middleware;
 mod health;
 mod http_error;

server-rs/crates/module-runtime/src/application.rs

@@ -46,6 +46,137 @@ pub fn build_creation_entry_config_response(
     }
 }
 
+pub fn default_creation_entry_type_snapshots(
+    updated_at_micros: i64,
+) -> Vec<CreationEntryTypeSnapshot> {
+    vec![
+        build_default_creation_entry_type_snapshot(
+            "rpg",
+            "文字冒险",
+            "经典 RPG 体验",
+            "内测",
+            "/creation-type-references/rpg.webp",
+            false,
+            true,
+            10,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "big-fish",
+            "摸鱼",
+            "轻量闯关玩法",
+            "可创建",
+            "/creation-type-references/big-fish.webp",
+            false,
+            true,
+            20,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "puzzle",
+            "拼图",
+            "拼图关卡创作",
+            "可创建",
+            "/creation-type-references/puzzle.webp",
+            true,
+            true,
+            30,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "match3d",
+            "抓大鹅",
+            "3D 消除关卡",
+            "可创建",
+            "/creation-type-references/match3d.webp",
+            true,
+            true,
+            40,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "square-hole",
+            "方洞",
+            "形状投放挑战",
+            "可创建",
+            "/creation-type-references/square-hole.webp",
+            false,
+            true,
+            50,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "visual-novel",
+            "视觉小说",
+            "分支叙事体验",
+            "敬请期待",
+            "/creation-type-references/visual-novel.webp",
+            true,
+            false,
+            60,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "airp",
+            "AI RPG",
+            "原生角色扮演",
+            "即将开放",
+            "/creation-type-references/airp.webp",
+            true,
+            false,
+            70,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "creative-agent",
+            "智能体创作",
+            "对话式创作实验",
+            "内测",
+            "/creation-type-references/creative-agent.webp",
+            false,
+            true,
+            80,
+            updated_at_micros,
+        ),
+        build_default_creation_entry_type_snapshot(
+            "baby-object-match",
+            "宝贝识物",
+            "亲子识物分类",
+            "可创建",
+            "/child-motion-demo/picture-book-grass-stage.png",
+            true,
+            true,
+            90,
+            updated_at_micros,
+        ),
+    ]
+}
+
+#[allow(clippy::too_many_arguments)]
+fn build_default_creation_entry_type_snapshot(
+    id: &str,
+    title: &str,
+    subtitle: &str,
+    badge: &str,
+    image_src: &str,
+    visible: bool,
+    open: bool,
+    sort_order: i32,
+    updated_at_micros: i64,
+) -> CreationEntryTypeSnapshot {
+    CreationEntryTypeSnapshot {
+        id: id.to_string(),
+        title: title.to_string(),
+        subtitle: subtitle.to_string(),
+        badge: badge.to_string(),
+        image_src: image_src.to_string(),
+        visible,
+        open,
+        sort_order,
+        updated_at_micros,
+    }
+}
+
 pub fn build_runtime_setting_record(snapshot: RuntimeSettingSnapshot) -> RuntimeSettingsRecord {
     RuntimeSettingsRecord {
         user_id: snapshot.user_id,

server-rs/crates/module-runtime/src/lib.rs

@@ -209,6 +209,25 @@ mod tests {
         assert_eq!(settings.platform_theme, RuntimePlatformTheme::Light);
     }
 
+    #[test]
+    fn default_creation_entry_types_include_baby_object_match() {
+        let configs = default_creation_entry_type_snapshots(1);
+        let baby_object_match = configs
+            .iter()
+            .find(|item| item.id == "baby-object-match")
+            .expect("baby-object-match creation entry should be seeded");
+
+        assert_eq!(baby_object_match.title, "宝贝识物");
+        assert_eq!(baby_object_match.subtitle, "亲子识物分类");
+        assert!(baby_object_match.visible);
+        assert!(baby_object_match.open);
+        assert_eq!(baby_object_match.sort_order, 90);
+        assert_eq!(
+            baby_object_match.image_src,
+            "/child-motion-demo/picture-book-grass-stage.png"
+        );
+    }
+
     #[test]
     fn normalized_clamps_music_volume_into_valid_range() {
         let low = RuntimeSettings::normalized(-1.0, RuntimePlatformTheme::Light);

server-rs/crates/spacetime-module/src/runtime/creation_entry_config.rs

@@ -212,119 +212,18 @@ fn migrate_visual_novel_entry_from_old_open_default(ctx: &ReducerContext, now: T
 }
 
 fn default_creation_entry_type_configs(now: Timestamp) -> Vec<CreationEntryTypeConfig> {
-    vec![
-        build_creation_entry_type_seed(
-            "rpg",
-            "文字冒险",
-            "经典 RPG 体验",
-            "内测",
-            "/creation-type-references/rpg.webp",
-            false,
-            true,
-            10,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "big-fish",
-            "摸鱼",
-            "轻量闯关玩法",
-            "可创建",
-            "/creation-type-references/big-fish.webp",
-            false,
-            true,
-            20,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "puzzle",
-            "拼图",
-            "拼图关卡创作",
-            "可创建",
-            "/creation-type-references/puzzle.webp",
-            true,
-            true,
-            30,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "match3d",
-            "抓大鹅",
-            "3D 消除关卡",
-            "可创建",
-            "/creation-type-references/match3d.webp",
-            true,
-            true,
-            40,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "square-hole",
-            "方洞",
-            "形状投放挑战",
-            "可创建",
-            "/creation-type-references/square-hole.webp",
-            false,
-            true,
-            50,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "visual-novel",
-            "视觉小说",
-            "分支叙事体验",
-            "敬请期待",
-            "/creation-type-references/visual-novel.webp",
-            true,
-            false,
-            60,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "airp",
-            "AI RPG",
-            "原生角色扮演",
-            "即将开放",
-            "/creation-type-references/airp.webp",
-            true,
-            false,
-            70,
-            now,
-        ),
-        build_creation_entry_type_seed(
-            "creative-agent",
-            "智能体创作",
-            "对话式创作实验",
-            "内测",
-            "/creation-type-references/creative-agent.webp",
-            false,
-            true,
-            80,
-            now,
-        ),
-    ]
-}
-
-#[allow(clippy::too_many_arguments)]
-fn build_creation_entry_type_seed(
-    id: &str,
-    title: &str,
-    subtitle: &str,
-    badge: &str,
-    image_src: &str,
-    visible: bool,
-    open: bool,
-    sort_order: i32,
-    now: Timestamp,
-) -> CreationEntryTypeConfig {
-    CreationEntryTypeConfig {
-        id: id.to_string(),
-        title: title.to_string(),
-        subtitle: subtitle.to_string(),
-        badge: badge.to_string(),
-        image_src: image_src.to_string(),
-        visible,
-        open,
-        sort_order,
-        updated_at: now,
-    }
+    module_runtime::default_creation_entry_type_snapshots(now.to_micros_since_unix_epoch())
+        .into_iter()
+        .map(|snapshot| CreationEntryTypeConfig {
+            id: snapshot.id,
+            title: snapshot.title,
+            subtitle: snapshot.subtitle,
+            badge: snapshot.badge,
+            image_src: snapshot.image_src,
+            visible: snapshot.visible,
+            open: snapshot.open,
+            sort_order: snapshot.sort_order,
+            updated_at: now,
+        })
+        .collect()
 }

spacetime.local.json

@@ -1,3 +1,3 @@
 {
-  "database": "xushi-p4wfr"
+  "database": "genarrative-dev-edu"
 }

src/components/child-motion-demo/ChildMotionWarmupDemo.test.tsx

@@ -1,6 +1,7 @@
 /* @vitest-environment jsdom */
 
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 
 import { ChildMotionWarmupDemo } from './ChildMotionWarmupDemo';
@@ -13,11 +14,41 @@ const mocapMock = vi.hoisted(() => ({
   status: 'connected' as 'idle' | 'connecting' | 'connected' | 'error',
   command: null as null | {
     actions: string[];
-    hands?: Array<{ x: number; y: number; state: string; side: string }>;
-    primaryHand?: { x: number; y: number; state: string; side: string } | null;
-    leftHand?: { x: number; y: number; state: string; side: string } | null;
-    rightHand?: { x: number; y: number; state: string; side: string } | null;
+    hands?: Array<{
+      x: number;
+      y: number;
+      state: string;
+      side: string;
+      wrist?: { x: number; y: number } | null;
+    }>;
+    primaryHand?: {
+      x: number;
+      y: number;
+      state: string;
+      side: string;
+      wrist?: { x: number; y: number } | null;
+    } | null;
+    leftHand?: {
+      x: number;
+      y: number;
+      state: string;
+      side: string;
+      wrist?: { x: number; y: number } | null;
+    } | null;
+    rightHand?: {
+      x: number;
+      y: number;
+      state: string;
+      side: string;
+      wrist?: { x: number; y: number } | null;
+    } | null;
     bodyCenter?: { x: number; y: number } | null;
+    bodyJoints?: {
+      leftShoulder?: { x: number; y: number } | null;
+      rightShoulder?: { x: number; y: number } | null;
+      leftElbow?: { x: number; y: number } | null;
+      rightElbow?: { x: number; y: number } | null;
+    };
   },
   receivedAtMs: 1,
 }));
@@ -66,15 +97,170 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
+function setMocapBodyCenter(x: number) {
+  mocapMock.command = {
+    actions: [],
+    bodyCenter: { x, y: 0.6 },
+    hands: [],
+    primaryHand: null,
+    leftHand: null,
+    rightHand: null,
+  };
+  mocapMock.receivedAtMs += 1;
+}
+
+async function advanceWarmupTime(ms: number) {
+  await act(async () => {
+    vi.advanceTimersByTime(ms);
+  });
+}
+
+async function revealCurrentStepCue() {
+  await advanceWarmupTime(1100);
+}
+
+async function completeCurrentPositionStepByHold() {
+  await advanceWarmupTime(2200);
+  await advanceWarmupTime(900);
+}
+
+async function completeCurrentNarrationStep() {
+  await revealCurrentStepCue();
+  await advanceWarmupTime(1000);
+  await advanceWarmupTime(900);
+}
+
+async function sendMocapLeftHandTrack(
+  rerender: (ui: ReactElement) => void,
+  points: number[],
+  options: { raised?: boolean } = {},
+) {
+  for (const x of points) {
+    const y = options.raised ? 0.34 : 0.72;
+    const wrist = { x, y };
+    mocapMock.command = {
+      actions: [],
+      bodyCenter: { x: 0.5, y: 0.7 },
+      bodyJoints: {
+        leftShoulder: { x: 0.4, y: 0.42 },
+        leftElbow: { x: 0.36, y: 0.5 },
+      },
+      hands: [{ x, y, state: 'unknown', side: 'left', wrist }],
+      primaryHand: { x, y, state: 'unknown', side: 'left', wrist },
+      leftHand: { x, y, state: 'unknown', side: 'left', wrist },
+      rightHand: null,
+    };
+    mocapMock.receivedAtMs += 1;
+    await act(async () => {
+      rerender(<ChildMotionWarmupDemo />);
+    });
+  }
+}
+
+function setMocapCameraHandTrackPoint({
+  cameraSide,
+  x,
+  y,
+}: {
+  cameraSide: 'left' | 'right';
+  x: number;
+  y: number;
+}) {
+  const wrist = { x, y };
+  const hand = { x, y, state: 'unknown', side: cameraSide, wrist };
+  const command = {
+    actions: [],
+    bodyCenter: { x: 0.5, y: 0.7 },
+    bodyJoints: {
+      leftShoulder: { x: 0.62, y: 0.48 },
+      leftElbow: { x: 0.7, y: 0.5 },
+      rightShoulder: { x: 0.38, y: 0.48 },
+      rightElbow: { x: 0.3, y: 0.5 },
+    },
+    hands: [hand],
+    primaryHand: hand,
+    leftHand: null as null | typeof hand,
+    rightHand: null as null | typeof hand,
+  };
+
+  if (cameraSide === 'left') {
+    command.leftHand = hand;
+  } else {
+    command.rightHand = hand;
+  }
+
+  mocapMock.command = command;
+  mocapMock.receivedAtMs += 1;
+}
+
+async function sendMocapCameraHandTrack(
+  rerender: (ui: ReactElement) => void,
+  cameraSide: 'left' | 'right',
+  points: Array<{ x: number; y: number }>,
+) {
+  for (const point of points) {
+    setMocapCameraHandTrackPoint({ cameraSide, ...point });
+    await act(async () => {
+      rerender(<ChildMotionWarmupDemo />);
+    });
+  }
+}
+
+async function sendPlayerLeftArmSwingTrack(
+  rerender: (ui: ReactElement) => void,
+) {
+  await sendMocapCameraHandTrack(rerender, 'right', [
+    { x: 0.2, y: 0.5 },
+    { x: 0.16, y: 0.42 },
+    { x: 0.13, y: 0.34 },
+    { x: 0.15, y: 0.43 },
+    { x: 0.19, y: 0.51 },
+  ]);
+}
+
+async function sendPlayerRightArmSwingTrack(
+  rerender: (ui: ReactElement) => void,
+) {
+  await sendMocapCameraHandTrack(rerender, 'left', [
+    { x: 0.8, y: 0.5 },
+    { x: 0.84, y: 0.42 },
+    { x: 0.87, y: 0.34 },
+    { x: 0.85, y: 0.43 },
+    { x: 0.81, y: 0.51 },
+  ]);
+}
+
+async function completeGreetingByWaveTrack(
+  rerender: (ui: ReactElement) => void,
+) {
+  await sendMocapLeftHandTrack(rerender, [0.42, 0.51, 0.58, 0.49, 0.43], {
+    raised: true,
+  });
+}
+
 test('renders the warmup stage and starts with the center ring step', () => {
   render(<ChildMotionWarmupDemo />);
 
   expect(screen.getByTestId('child-motion-demo')).toBeTruthy();
   expect(screen.getByText('来到圆圈这里')).toBeTruthy();
-  expect(screen.getByLabelText('绿色圆环')).toBeTruthy();
+  expect(screen.queryByLabelText('绿色圆环')).toBeNull();
   expect(screen.getByText('请横屏体验')).toBeTruthy();
 });
 
+test('shows narration first before revealing the step cue', async () => {
+  vi.useFakeTimers();
+  render(<ChildMotionWarmupDemo />);
+
+  expect(screen.getByText('来到圆圈这里')).toBeTruthy();
+  expect(screen.queryByLabelText('绿色圆环')).toBeNull();
+  expect(screen.getByTestId('child-motion-stage').dataset.stepPhase).toBe('intro');
+
+  await advanceWarmupTime(1000);
+
+  expect(screen.getByLabelText('绿色圆环')).toBeTruthy();
+  expect(screen.getByTestId('child-motion-stage').dataset.stepPhase).toBe('active');
+});
+
 test('re-entering within the same runtime session opens the start button', () => {
   markChildMotionWarmupCompletedInRuntime();
 
@@ -113,16 +299,35 @@ test('developer keyboard input moves the avatar and triggers jump state', () =>
   expect(avatar.className).toContain('child-motion-avatar--jumping');
 });
 
+test('mocap body center dampens small jitter before moving the avatar', async () => {
+  setMocapBodyCenter(0.5);
+  const { rerender } = render(<ChildMotionWarmupDemo />);
+
+  expect(screen.getByTestId('child-motion-avatar').getAttribute('style')).toContain(
+    'left: 50%',
+  );
+
+  setMocapBodyCenter(0.508);
+  await act(async () => {
+    rerender(<ChildMotionWarmupDemo />);
+  });
+  expect(screen.getByTestId('child-motion-avatar').getAttribute('style')).toContain(
+    'left: 50%',
+  );
+
+  setMocapBodyCenter(0.34);
+  await act(async () => {
+    rerender(<ChildMotionWarmupDemo />);
+  });
+
+  const style = screen.getByTestId('child-motion-avatar').getAttribute('style');
+  expect(style).toContain('left: 46.5%');
+  expect(style).not.toContain('left: 34%');
+});
+
 test('mocap body center keeps the warmup flow on the motion data source', async () => {
   vi.useFakeTimers();
-  mocapMock.command = {
-    actions: [],
-    bodyCenter: { x: 0.5, y: 0.6 },
-    hands: [],
-    primaryHand: null,
-    leftHand: null,
-    rightHand: null,
-  };
+  setMocapBodyCenter(0.5);
   const { rerender, unmount } = render(<ChildMotionWarmupDemo />);
 
   expect(screen.queryByText('摄像头暂不可用，已切换到本地演示')).toBeNull();
@@ -131,63 +336,39 @@ test('mocap body center keeps the warmup flow on the motion data source', async
     'left: 50%',
   );
 
-  await act(async () => {
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeCurrentPositionStepByHold();
   await vi.waitFor(() => {
     expect(screen.getByText('打个招呼')).toBeTruthy();
   });
 
-  mocapMock.command = {
-    actions: ['open_palm'],
-    bodyCenter: { x: 0.5, y: 0.6 },
-    hands: [{ x: 0.48, y: 0.34, state: 'open_palm', side: 'left' }],
-    primaryHand: { x: 0.48, y: 0.34, state: 'open_palm', side: 'left' },
-    leftHand: { x: 0.48, y: 0.34, state: 'open_palm', side: 'left' },
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-    vi.advanceTimersByTime(1000);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeGreetingByWaveTrack(rerender);
+  await advanceWarmupTime(900);
 
   await vi.waitFor(() => {
     expect(screen.getByText('准备热身')).toBeTruthy();
   });
 
-  await act(async () => {
-    vi.advanceTimersByTime(1000);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await completeCurrentNarrationStep();
 
   await vi.waitFor(() => {
     expect(screen.getByRole('heading', { name: '向左一步' })).toBeTruthy();
   });
 
-  mocapMock.command = {
-    actions: [],
-    bodyCenter: { x: 0.34, y: 0.6 },
-    hands: [],
-    primaryHand: null,
-    leftHand: null,
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
+  await revealCurrentStepCue();
+  for (const targetX of [0.34, 0.34, 0.34, 0.34, 0.34]) {
+    setMocapBodyCenter(targetX);
+    await act(async () => {
+      rerender(<ChildMotionWarmupDemo />);
+    });
+  }
   await vi.waitFor(() => {
     expect(screen.getByTestId('child-motion-avatar').getAttribute('style')).toContain(
-      'left: 34%',
+      'left: 37',
     );
   });
-  await act(async () => {
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await completeCurrentPositionStepByHold();
 
   await vi.waitFor(() => {
     expect(screen.getByRole('heading', { name: '回到中间来' })).toBeTruthy();
@@ -199,18 +380,17 @@ test('mocap body center keeps the warmup flow on the motion data source', async
   vi.useRealTimers();
 });
 
-test('mocap open palm completes the greeting wave step', async () => {
+test('mocap greeting requires a real horizontal wave track', async () => {
   vi.useFakeTimers();
   const { rerender, unmount } = render(<ChildMotionWarmupDemo />);
 
-  await act(async () => {
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeCurrentPositionStepByHold();
   await vi.waitFor(() => {
     expect(screen.getByText('打个招呼')).toBeTruthy();
   });
 
+  await revealCurrentStepCue();
   mocapMock.command = {
     actions: ['open_palm'],
     hands: [{ x: 0.46, y: 0.34, state: 'open_palm', side: 'left' }],
@@ -222,7 +402,35 @@ test('mocap open palm completes the greeting wave step', async () => {
   await act(async () => {
     rerender(<ChildMotionWarmupDemo />);
   });
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '打个招呼' })).toBeTruthy();
 
+  await sendMocapLeftHandTrack(rerender, [0.42, 0.51, 0.58, 0.49, 0.43], {
+    raised: false,
+  });
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '打个招呼' })).toBeTruthy();
+
+  for (const x of [0.42, 0.51, 0.58, 0.49, 0.43]) {
+    const wrist = { x, y: 0.34 };
+    mocapMock.command = {
+      actions: [],
+      bodyCenter: { x: 0.5, y: 0.7 },
+      hands: [{ x, y: 0.34, state: 'unknown', side: 'left', wrist }],
+      primaryHand: { x, y: 0.34, state: 'unknown', side: 'left', wrist },
+      leftHand: { x, y: 0.34, state: 'unknown', side: 'left', wrist },
+      rightHand: null,
+    };
+    mocapMock.receivedAtMs += 1;
+    await act(async () => {
+      rerender(<ChildMotionWarmupDemo />);
+    });
+  }
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '打个招呼' })).toBeTruthy();
+
+  await completeGreetingByWaveTrack(rerender);
+  await advanceWarmupTime(900);
   await vi.waitFor(() => {
     expect(screen.getByText('准备热身')).toBeTruthy();
   });
@@ -232,117 +440,89 @@ test('mocap open palm completes the greeting wave step', async () => {
   vi.useRealTimers();
 });
 
-test('mocap hand tracks complete left and right wave steps only after movement is visible', async () => {
+test('mocap arm swing steps require body-side mapping and vertical open arm motion', async () => {
   vi.useFakeTimers();
   const { rerender, unmount } = render(<ChildMotionWarmupDemo />);
 
   const advancePositionStep = async (key: string, code: string) => {
+    await revealCurrentStepCue();
     await act(async () => {
       fireEvent.keyDown(window, { key, code });
     });
-    await act(async () => {
-      vi.advanceTimersByTime(2100);
-      await vi.runOnlyPendingTimersAsync();
-    });
+    await completeCurrentPositionStepByHold();
     await act(async () => {
       fireEvent.keyUp(window, { key, code });
     });
   };
 
-  await act(async () => {
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeCurrentPositionStepByHold();
   await vi.waitFor(() => {
     expect(screen.getByText('打个招呼')).toBeTruthy();
   });
 
-  mocapMock.command = {
-    actions: ['open_palm'],
-    hands: [{ x: 0.48, y: 0.34, state: 'open_palm', side: 'left' }],
-    primaryHand: { x: 0.48, y: 0.34, state: 'open_palm', side: 'left' },
-    leftHand: { x: 0.48, y: 0.34, state: 'open_palm', side: 'left' },
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
+  await revealCurrentStepCue();
+  await completeGreetingByWaveTrack(rerender);
 
-  await act(async () => {
-    vi.advanceTimersByTime(1000);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await advanceWarmupTime(900);
+  await completeCurrentNarrationStep();
   await advancePositionStep('a', 'KeyA');
-  await act(async () => {
-    vi.advanceTimersByTime(120);
-    await vi.runOnlyPendingTimersAsync();
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeCurrentPositionStepByHold();
   await advancePositionStep('d', 'KeyD');
-  await act(async () => {
-    vi.advanceTimersByTime(120);
-    await vi.runOnlyPendingTimersAsync();
-    vi.advanceTimersByTime(2100);
-    await vi.runOnlyPendingTimersAsync();
-  });
+  await revealCurrentStepCue();
+  await completeCurrentPositionStepByHold();
   await vi.waitFor(() => {
     expect(screen.getByRole('heading', { name: '挥动左手' })).toBeTruthy();
   });
 
-  mocapMock.command = {
-    actions: [],
-    leftHand: { x: 0.3, y: 0.38, state: 'unknown', side: 'left' },
-    primaryHand: { x: 0.3, y: 0.38, state: 'unknown', side: 'left' },
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
-  mocapMock.command = {
-    actions: [],
-    leftHand: { x: 0.39, y: 0.36, state: 'unknown', side: 'left' },
-    primaryHand: { x: 0.39, y: 0.36, state: 'unknown', side: 'left' },
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
-  mocapMock.command = {
-    actions: [],
-    leftHand: { x: 0.31, y: 0.34, state: 'unknown', side: 'left' },
-    primaryHand: { x: 0.31, y: 0.34, state: 'unknown', side: 'left' },
-    rightHand: null,
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
+  await revealCurrentStepCue();
+  await sendMocapCameraHandTrack(rerender, 'left', [
+    { x: 0.78, y: 0.5 },
+    { x: 0.86, y: 0.5 },
+    { x: 0.79, y: 0.5 },
+    { x: 0.87, y: 0.5 },
+    { x: 0.8, y: 0.5 },
+  ]);
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '挥动左手' })).toBeTruthy();
 
+  await sendMocapCameraHandTrack(rerender, 'right', [
+    { x: 0.32, y: 0.74 },
+    { x: 0.24, y: 0.74 },
+    { x: 0.31, y: 0.74 },
+    { x: 0.23, y: 0.74 },
+    { x: 0.3, y: 0.74 },
+  ]);
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '挥动左手' })).toBeTruthy();
+
+  await sendPlayerLeftArmSwingTrack(rerender);
+
+  await advanceWarmupTime(900);
   await vi.waitFor(() => {
     expect(screen.getByRole('heading', { name: '挥动右手' })).toBeTruthy();
   });
 
-  mocapMock.command = {
-    actions: ['right_hand_wave'],
-    leftHand: null,
-    primaryHand: { x: 0.64, y: 0.35, state: 'unknown', side: 'right' },
-    rightHand: { x: 0.64, y: 0.35, state: 'unknown', side: 'right' },
-  };
-  mocapMock.receivedAtMs += 1;
-  await act(async () => {
-    rerender(<ChildMotionWarmupDemo />);
-  });
+  await revealCurrentStepCue();
+  await sendMocapCameraHandTrack(rerender, 'right', [
+    { x: 0.2, y: 0.5 },
+    { x: 0.16, y: 0.42 },
+    { x: 0.13, y: 0.34 },
+    { x: 0.15, y: 0.43 },
+    { x: 0.19, y: 0.51 },
+  ]);
+  await advanceWarmupTime(900);
+  expect(screen.getByRole('heading', { name: '挥动右手' })).toBeTruthy();
 
+  await sendPlayerRightArmSwingTrack(rerender);
+
+  await advanceWarmupTime(900);
   await vi.waitFor(() => {
     expect(screen.getByRole('heading', { name: '原地跳一下' })).toBeTruthy();
   });
+  await advanceWarmupTime(720);
   await act(async () => {
-    vi.advanceTimersByTime(720);
-    await vi.runOnlyPendingTimersAsync();
     unmount();
   });
   vi.useRealTimers();

src/components/child-motion-demo/ChildMotionWarmupDemo.tsx

@@ -1,7 +1,4 @@
-import type {
-  CSSProperties,
-  PointerEvent as ReactPointerEvent,
-} from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
@@ -14,6 +11,7 @@ import type {
   MocapConnectionStatus,
   MocapHandInput,
   MocapInputCommand,
+  MocapPointInput,
 } from '../../services/useMocapInput';
 import { useMocapInput } from '../../services/useMocapInput';
 import { BabyObjectMatchRuntimeShell } from '../edutainment-runtime/BabyObjectMatchRuntimeShell';
@@ -38,7 +36,13 @@ import {
 type DragHand = 'left' | 'right';
 type CameraAccessState = 'idle' | 'requesting' | 'ready' | 'blocked';
 type MotionSourceState = 'connecting' | 'ready' | 'waiting' | 'offline';
-type WarmupMocapGestureIntent = 'greeting' | 'left-hand' | 'right-hand' | 'jump';
+type WarmupStepPhase = 'intro' | 'active' | 'complete';
+type WarmupMocapGestureIntent =
+  | 'greeting'
+  | 'left-hand'
+  | 'right-hand'
+  | 'jump';
+type WarmupBodyHandSide = 'left' | 'right';
 
 const CHILD_MOTION_BABY_OBJECT_DEMO_DRAFT: BabyObjectMatchDraft = {
   draftId: 'child-motion-demo-baby-object-draft',
@@ -68,6 +72,7 @@ const CHILD_MOTION_BABY_OBJECT_DEMO_DRAFT: BabyObjectMatchDraft = {
       prompt: '香蕉',
     },
   ],
+  visualPackage: null,
   themeTags: [BABY_OBJECT_MATCH_EDUTAINMENT_TAG, '宝贝识物'],
   publicationStatus: 'published',
   createdAt: '2026-05-11T00:00:00.000Z',
@@ -75,8 +80,24 @@ const CHILD_MOTION_BABY_OBJECT_DEMO_DRAFT: BabyObjectMatchDraft = {
   publishedAt: '2026-05-11T00:00:00.000Z',
 };
 
-const WARMUP_MOCAP_WAVE_MIN_POINTS = 3;
 const WARMUP_MOCAP_WAVE_MIN_X_RANGE = 0.055;
+const WARMUP_ARM_SWING_MIN_POINTS = 5;
+const WARMUP_ARM_SWING_MIN_VERTICAL_RANGE = 0.08;
+const WARMUP_ARM_SWING_MIN_ANGLE_RANGE_DEG = 28;
+const WARMUP_ARM_SWING_MIN_REACH = 0.12;
+const WARMUP_ARM_SWING_MIN_OUTWARD_X = 0.1;
+const WARMUP_ARM_SWING_DIRECTION_EPSILON = 0.012;
+const WARMUP_GREETING_WAVE_MIN_POINTS = 5;
+const WARMUP_GREETING_WAVE_MIN_X_RANGE = 0.075;
+const WARMUP_GREETING_WAVE_MIN_DIRECTION_CHANGES = 1;
+const WARMUP_GREETING_WAVE_DIRECTION_EPSILON = 0.008;
+const WARMUP_GREETING_WRIST_ABOVE_ELBOW_MARGIN = 0.04;
+const WARMUP_GREETING_WRIST_ABOVE_SHOULDER_MARGIN = 0.08;
+const WARMUP_STEP_INTRO_DELAY_MS = 1000;
+const WARMUP_STEP_COMPLETE_PAUSE_MS = 820;
+const AVATAR_MOCAP_DEAD_ZONE = 0.012;
+const AVATAR_MOCAP_SMOOTHING = 0.28;
+const AVATAR_MOCAP_MAX_STEP = 0.035;
 
 function clampMotionUnit(value: number) {
   return Math.max(0, Math.min(1, value));
@@ -103,16 +124,54 @@ function formatPercent(value: number | null) {
   return `${Math.round(value * 100)}%`;
 }
 
+function formatAvatarLeftPercent(value: number) {
+  return `${Math.round(clampMotionUnit(value) * 1000) / 10}%`;
+}
+
+function resolveMocapHandWithBodySide(
+  command: MocapInputCommand,
+  side: WarmupBodyHandSide,
+) {
+  // 本地 mocap 的 handedness 目前是摄像头视角：画面右侧手对应用户身体左手。
+  return side === 'left' ? command.rightHand : command.leftHand;
+}
+
+function resolveMocapJointWithBodySide(
+  command: MocapInputCommand,
+  side: WarmupBodyHandSide,
+  joint: 'shoulder' | 'elbow',
+) {
+  const joints = command.bodyJoints;
+  if (side === 'left') {
+    return joint === 'shoulder' ? joints?.rightShoulder : joints?.rightElbow;
+  }
+
+  return joint === 'shoulder' ? joints?.leftShoulder : joints?.leftElbow;
+}
+
 function mocapHandToChildMotionPoint(
   hand: MocapHandInput | null | undefined,
+  command?: MocapInputCommand,
+  bodySide?: WarmupBodyHandSide,
 ): ChildMotionPoint | null {
   if (!hand) {
     return null;
   }
 
+  const armMetrics =
+    command && bodySide
+      ? resolveWarmupArmMetrics(hand, command, bodySide)
+      : null;
+
   return {
     x: clampMotionUnit(hand.x),
     y: clampMotionUnit(hand.y),
+    isRaised: command
+      ? isWarmupGreetingHandRaised(hand, command, bodySide)
+      : undefined,
+    isArmExtended: armMetrics?.isExtended,
+    armAngleDeg: armMetrics?.angleDeg,
+    armReach: armMetrics?.reach,
   };
 }
 
@@ -166,20 +225,180 @@ function hasWarmupMocapAction(
   return command.actions.some((action) => expectedActions.includes(action));
 }
 
-function hasWarmupMocapWavePath(points: ChildMotionPoint[]) {
-  if (points.length < WARMUP_MOCAP_WAVE_MIN_POINTS) {
+function countWarmupVerticalDirectionChanges(points: ChildMotionPoint[]) {
+  let previousDirection = 0;
+  let directionChanges = 0;
+
+  for (let index = 1; index < points.length; index += 1) {
+    const delta = points[index]!.y - points[index - 1]!.y;
+    if (Math.abs(delta) < WARMUP_ARM_SWING_DIRECTION_EPSILON) {
+      continue;
+    }
+
+    const direction = Math.sign(delta);
+    if (previousDirection !== 0 && direction !== previousDirection) {
+      directionChanges += 1;
+    }
+    previousDirection = direction;
+  }
+
+  return directionChanges;
+}
+
+function hasWarmupArmSwingPath(points: ChildMotionPoint[]) {
+  const extendedPoints = points.filter((point) => point.isArmExtended);
+  if (extendedPoints.length < WARMUP_ARM_SWING_MIN_POINTS) {
     return false;
   }
 
-  const xValues = points.map((point) => point.x);
+  const xValues = extendedPoints.map((point) => point.x);
+  const yValues = extendedPoints.map((point) => point.y);
+  const angleValues = extendedPoints
+    .map((point) => point.armAngleDeg)
+    .filter((angle): angle is number => typeof angle === 'number');
+  const xRange = Math.max(...xValues) - Math.min(...xValues);
+  const yRange = Math.max(...yValues) - Math.min(...yValues);
+  const angleRange =
+    angleValues.length > 0
+      ? Math.max(...angleValues) - Math.min(...angleValues)
+      : 0;
+
   return (
-    Math.max(...xValues) - Math.min(...xValues) >=
-    WARMUP_MOCAP_WAVE_MIN_X_RANGE
+    xRange >= WARMUP_MOCAP_WAVE_MIN_X_RANGE &&
+    yRange >= WARMUP_ARM_SWING_MIN_VERTICAL_RANGE &&
+    angleRange >= WARMUP_ARM_SWING_MIN_ANGLE_RANGE_DEG &&
+    countWarmupVerticalDirectionChanges(extendedPoints) >= 1
   );
 }
 
+function countWarmupHorizontalDirectionChanges(points: ChildMotionPoint[]) {
+  let previousDirection = 0;
+  let directionChanges = 0;
+
+  for (let index = 1; index < points.length; index += 1) {
+    const delta = points[index]!.x - points[index - 1]!.x;
+    if (Math.abs(delta) < WARMUP_GREETING_WAVE_DIRECTION_EPSILON) {
+      continue;
+    }
+
+    const direction = Math.sign(delta);
+    if (previousDirection !== 0 && direction !== previousDirection) {
+      directionChanges += 1;
+    }
+    previousDirection = direction;
+  }
+
+  return directionChanges;
+}
+
+function hasWarmupGreetingWavePath(points: ChildMotionPoint[]) {
+  const raisedPoints = points.filter((point) => point.isRaised);
+  if (raisedPoints.length < WARMUP_GREETING_WAVE_MIN_POINTS) {
+    return false;
+  }
+
+  const xValues = raisedPoints.map((point) => point.x);
+  const xRange = Math.max(...xValues) - Math.min(...xValues);
+  return (
+    xRange >= WARMUP_GREETING_WAVE_MIN_X_RANGE &&
+    countWarmupHorizontalDirectionChanges(raisedPoints) >=
+      WARMUP_GREETING_WAVE_MIN_DIRECTION_CHANGES
+  );
+}
+
+function isWarmupGreetingHandRaised(
+  hand: MocapHandInput,
+  command: MocapInputCommand,
+  bodySide?: WarmupBodyHandSide,
+) {
+  const wrist = hand.wrist ?? { x: hand.x, y: hand.y };
+  const elbow = bodySide
+    ? resolveMocapJointWithBodySide(command, bodySide, 'elbow')
+    : hand.side === 'left'
+      ? command.bodyJoints?.leftElbow
+      : hand.side === 'right'
+        ? command.bodyJoints?.rightElbow
+        : null;
+  if (elbow) {
+    return wrist.y <= elbow.y + WARMUP_GREETING_WRIST_ABOVE_ELBOW_MARGIN;
+  }
+
+  const shoulder = bodySide
+    ? resolveMocapJointWithBodySide(command, bodySide, 'shoulder')
+    : hand.side === 'left'
+      ? command.bodyJoints?.leftShoulder
+      : hand.side === 'right'
+        ? command.bodyJoints?.rightShoulder
+        : null;
+  if (shoulder) {
+    return wrist.y <= shoulder.y + WARMUP_GREETING_WRIST_ABOVE_SHOULDER_MARGIN;
+  }
+
+  return false;
+}
+
+function getWarmupPointDistance(left: MocapPointInput, right: MocapPointInput) {
+  return Math.hypot(left.x - right.x, left.y - right.y);
+}
+
+function resolveWarmupArmMetrics(
+  hand: MocapHandInput,
+  command: MocapInputCommand,
+  bodySide: WarmupBodyHandSide,
+) {
+  const wrist = hand.wrist ?? { x: hand.x, y: hand.y };
+  const shoulder = resolveMocapJointWithBodySide(command, bodySide, 'shoulder');
+  if (!shoulder) {
+    return null;
+  }
+
+  const elbow = resolveMocapJointWithBodySide(command, bodySide, 'elbow');
+  const reach = getWarmupPointDistance(shoulder, wrist);
+  const outwardX =
+    bodySide === 'left' ? shoulder.x - wrist.x : wrist.x - shoulder.x;
+  const upperArmReach = elbow ? getWarmupPointDistance(shoulder, elbow) : null;
+  const angleDeg =
+    (Math.atan2(shoulder.y - wrist.y, Math.abs(wrist.x - shoulder.x)) * 180) /
+    Math.PI;
+  const isNotDrooping = elbow
+    ? wrist.y <= elbow.y + WARMUP_GREETING_WRIST_ABOVE_ELBOW_MARGIN
+    : wrist.y <= shoulder.y + WARMUP_GREETING_WRIST_ABOVE_SHOULDER_MARGIN;
+  const isExtended =
+    outwardX >= WARMUP_ARM_SWING_MIN_OUTWARD_X &&
+    reach >= WARMUP_ARM_SWING_MIN_REACH &&
+    (!upperArmReach || reach >= upperArmReach * 1.2) &&
+    isNotDrooping;
+
+  return {
+    angleDeg,
+    reach,
+    isExtended,
+  };
+}
+
 function resolveAvatarXFromMocap(command: MocapInputCommand) {
-  return command.bodyCenter?.x ?? null;
+  const bodyCenterX = command.bodyCenter?.x;
+  if (typeof bodyCenterX !== 'number' || !Number.isFinite(bodyCenterX)) {
+    return null;
+  }
+
+  return clampMotionUnit(bodyCenterX);
+}
+
+function resolveDampedAvatarX(current: number, target: number) {
+  const clampedCurrent = clampMotionUnit(current);
+  const clampedTarget = clampMotionUnit(target);
+  const delta = clampedTarget - clampedCurrent;
+  if (Math.abs(delta) <= AVATAR_MOCAP_DEAD_ZONE) {
+    return clampedCurrent;
+  }
+
+  const smoothedDelta = delta * AVATAR_MOCAP_SMOOTHING;
+  const limitedDelta =
+    Math.sign(smoothedDelta) *
+    Math.min(Math.abs(smoothedDelta), AVATAR_MOCAP_MAX_STEP);
+
+  return clampMotionUnit(clampedCurrent + limitedDelta);
 }
 
 function resolveWarmupMocapGestureIntent(
@@ -193,22 +412,9 @@ function resolveWarmupMocapGestureIntent(
 ): WarmupMocapGestureIntent | null {
   if (stepId === 'wave_greeting') {
     if (
-      hasWarmupMocapAction(command, [
-        'wave',
-        'wave_greeting',
-        'hand_wave',
-        'hello',
-        'greeting',
-        'open_palm',
-        'handwave',
-        'wavehand',
-        '招手',
-        '挥手',
-      ]) ||
-      command.hands?.some((hand) => hand.state === 'open_palm') ||
-      hasWarmupMocapWavePath(paths.leftHandPath) ||
-      hasWarmupMocapWavePath(paths.rightHandPath) ||
-      hasWarmupMocapWavePath(paths.primaryHandPath)
+      hasWarmupGreetingWavePath(paths.leftHandPath) ||
+      hasWarmupGreetingWavePath(paths.rightHandPath) ||
+      hasWarmupGreetingWavePath(paths.primaryHandPath)
     ) {
       return 'greeting';
     }
@@ -216,43 +422,27 @@ function resolveWarmupMocapGestureIntent(
 
   if (
     stepId === 'wave_left_hand' &&
-    (hasWarmupMocapAction(command, [
-      'left_wave',
-      'wave_left',
-      'left_hand_wave',
-      'wave_left_hand',
-      'left_handwave',
-      'lefthand_wave',
-      'lefthandwave',
-      '左手挥手',
-      '挥动左手',
-    ]) ||
-      hasWarmupMocapWavePath(paths.leftHandPath))
+    hasWarmupArmSwingPath(paths.leftHandPath)
   ) {
     return 'left-hand';
   }
 
   if (
     stepId === 'wave_right_hand' &&
-    (hasWarmupMocapAction(command, [
-      'right_wave',
-      'wave_right',
-      'right_hand_wave',
-      'wave_right_hand',
-      'right_handwave',
-      'righthand_wave',
-      'righthandwave',
-      '右手挥手',
-      '挥动右手',
-    ]) ||
-      hasWarmupMocapWavePath(paths.rightHandPath))
+    hasWarmupArmSwingPath(paths.rightHandPath)
   ) {
     return 'right-hand';
   }
 
   if (
     stepId === 'jump_once' &&
-    hasWarmupMocapAction(command, ['jump', 'jump_once', 'hop', '跳跃', '原地跳'])
+    hasWarmupMocapAction(command, [
+      'jump',
+      'jump_once',
+      'hop',
+      '跳跃',
+      '原地跳',
+    ])
   ) {
     return 'jump';
   }
@@ -304,16 +494,18 @@ function ChildMotionAvatar({
       className={`child-motion-avatar ${isJumping ? 'child-motion-avatar--jumping' : ''}`}
       data-testid="child-motion-avatar"
       style={{
-        left: `${avatarX * 100}%`,
+        left: formatAvatarLeftPercent(avatarX),
       }}
       aria-label="用户角色剪影"
     >
-      <span className="child-motion-avatar__head" />
-      <span className="child-motion-avatar__body" />
-      <span className="child-motion-avatar__arm child-motion-avatar__arm--left" />
-      <span className="child-motion-avatar__arm child-motion-avatar__arm--right" />
-      <span className="child-motion-avatar__leg child-motion-avatar__leg--left" />
-      <span className="child-motion-avatar__leg child-motion-avatar__leg--right" />
+      <span className="child-motion-avatar__sprite" aria-hidden="true">
+        <span className="child-motion-avatar__head" />
+        <span className="child-motion-avatar__body" />
+        <span className="child-motion-avatar__arm child-motion-avatar__arm--left" />
+        <span className="child-motion-avatar__arm child-motion-avatar__arm--right" />
+        <span className="child-motion-avatar__leg child-motion-avatar__leg--left" />
+        <span className="child-motion-avatar__leg child-motion-avatar__leg--right" />
+      </span>
     </div>
   );
 }
@@ -329,10 +521,12 @@ function ChildMotionRing({
     <div
       className={`child-motion-ring ${progress > 0 ? 'child-motion-ring--active' : ''}`}
       data-testid="child-motion-ring"
-      style={{
-        left: `${targetX * 100}%`,
-        '--child-motion-ring-progress': `${Math.round(progress * 360)}deg`,
-      } as CSSProperties}
+      style={
+        {
+          left: `${targetX * 100}%`,
+          '--child-motion-ring-progress': `${Math.round(progress * 360)}deg`,
+        } as CSSProperties
+      }
       aria-label="绿色圆环"
     >
       <span className="child-motion-ring__core" />
@@ -358,12 +552,16 @@ function ChildMotionGestureGuide({
   return (
     <div className="child-motion-gesture-guide" aria-hidden="true">
       {isGreeting ? (
-        <span className="child-motion-gesture-guide__wave">挥手</span>
+        <span className="child-motion-gesture-guide__wave-cat">
+          <span className="child-motion-gesture-guide__wave-cat-body" />
+          <span className="child-motion-gesture-guide__wave-cat-arm child-motion-gesture-guide__wave-cat-arm--left" />
+          <span className="child-motion-gesture-guide__wave-cat-arm child-motion-gesture-guide__wave-cat-arm--right" />
+        </span>
       ) : null}
       {isLeft || isRight ? (
         <>
           <span
-            className={`child-motion-gesture-guide__hand child-motion-gesture-guide__hand--${isLeft ? 'left' : 'right'}`}
+            className={`child-motion-gesture-guide__arm child-motion-gesture-guide__arm--${isLeft ? 'left' : 'right'}`}
           />
           {activePath.map((point, index) => (
             <span
@@ -378,7 +576,9 @@ function ChildMotionGestureGuide({
           ))}
         </>
       ) : null}
-      {isJump ? <span className="child-motion-gesture-guide__jump">跳</span> : null}
+      {isJump ? (
+        <span className="child-motion-gesture-guide__jump">跳</span>
+      ) : null}
     </div>
   );
 }
@@ -418,6 +618,9 @@ export function ChildMotionWarmupDemo() {
   const [stepId, setStepId] = useState<ChildMotionWarmupStepId>(() =>
     hasCompletedChildMotionWarmupInRuntime() ? 'level_select' : 'center_arrive',
   );
+  const [stepPhase, setStepPhase] = useState<WarmupStepPhase>(() =>
+    hasCompletedChildMotionWarmupInRuntime() ? 'active' : 'intro',
+  );
   const [isBabyObjectRuntimeOpen, setIsBabyObjectRuntimeOpen] = useState(false);
   const [avatarX, setAvatarX] = useState(CHILD_MOTION_CENTER_X);
   const [calibration, setCalibration] = useState(
@@ -429,18 +632,21 @@ export function ChildMotionWarmupDemo() {
   const [rightHandPath, setRightHandPath] = useState<ChildMotionPoint[]>([]);
   const [activeHand, setActiveHand] = useState<DragHand | null>(null);
   const [isJumping, setIsJumping] = useState(false);
-  const [justCompletedText, setJustCompletedText] = useState<string | null>(null);
-  const [cameraAccessState, setCameraAccessState] =
-    useState<CameraAccessState>(() =>
-      typeof navigator === 'undefined' ||
-      !navigator.mediaDevices?.getUserMedia
+  const [justCompletedText, setJustCompletedText] = useState<string | null>(
+    null,
+  );
+  const [cameraAccessState, setCameraAccessState] = useState<CameraAccessState>(
+    () =>
+      typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia
         ? 'blocked'
         : 'idle',
-    );
+  );
   const holdCompletionRef = useRef(false);
   const cameraVideoRef = useRef<HTMLVideoElement | null>(null);
   const cameraStreamRef = useRef<MediaStream | null>(null);
   const handledMocapPacketKeyRef = useRef<string | null>(null);
+  const completionTimeoutRef = useRef<number | null>(null);
+  const feedbackTimeoutRef = useRef<number | null>(null);
 
   const step = getChildMotionWarmupStep(stepId);
   const mocapInput = useMocapInput({
@@ -453,6 +659,10 @@ export function ChildMotionWarmupDemo() {
   const stepIndex = getStepIndex(stepId);
   const progressPercent = Math.round((stepIndex / 12) * 100);
   const holdProgress = getHoldProgress(stepId, avatarX, holdStartedAt, nowMs);
+  const isStepActive = stepPhase === 'active';
+  const shouldShowStepCues = stepPhase !== 'intro';
+  const displayHoldProgress =
+    stepPhase === 'complete' && step.kind === 'position' ? 1 : holdProgress;
   const targetX = step.target ? getChildMotionTargetX(step.target) : null;
   const motionSourceState = getMotionSourceState(
     mocapInput.status,
@@ -462,6 +672,10 @@ export function ChildMotionWarmupDemo() {
 
   const completeStep = useCallback(
     (completion: Parameters<typeof applyChildMotionWarmupCompletion>[2]) => {
+      if (stepPhase !== 'active') {
+        return;
+      }
+
       setCalibration((current) =>
         applyChildMotionWarmupCompletion(stepId, current, completion),
       );
@@ -471,15 +685,31 @@ export function ChildMotionWarmupDemo() {
         markChildMotionWarmupCompletedInRuntime();
       }
 
-      setJustCompletedText(
-        stepId === 'warmup_finish' || stepId === 'jump_once' ? null : '真棒',
-      );
-      window.setTimeout(() => setJustCompletedText(null), 720);
-      setStepId(nextStep);
+      const completionText =
+        stepId === 'warmup_finish' || stepId === 'jump_once' ? null : '真棒';
+      setJustCompletedText(completionText);
+      setStepPhase('complete');
       setHoldStartedAt(null);
       holdCompletionRef.current = false;
+
+      if (feedbackTimeoutRef.current !== null) {
+        window.clearTimeout(feedbackTimeoutRef.current);
+      }
+      feedbackTimeoutRef.current = window.setTimeout(() => {
+        feedbackTimeoutRef.current = null;
+        setJustCompletedText(null);
+      }, WARMUP_STEP_COMPLETE_PAUSE_MS);
+
+      if (completionTimeoutRef.current !== null) {
+        window.clearTimeout(completionTimeoutRef.current);
+      }
+      completionTimeoutRef.current = window.setTimeout(() => {
+        completionTimeoutRef.current = null;
+        setStepId(nextStep);
+        setStepPhase(nextStep === 'level_select' ? 'active' : 'intro');
+      }, WARMUP_STEP_COMPLETE_PAUSE_MS);
     },
-    [stepId],
+    [stepId, stepPhase],
   );
 
   useEffect(() => {
@@ -487,6 +717,18 @@ export function ChildMotionWarmupDemo() {
     return () => window.clearInterval(timer);
   }, []);
 
+  useEffect(
+    () => () => {
+      if (completionTimeoutRef.current !== null) {
+        window.clearTimeout(completionTimeoutRef.current);
+      }
+      if (feedbackTimeoutRef.current !== null) {
+        window.clearTimeout(feedbackTimeoutRef.current);
+      }
+    },
+    [],
+  );
+
   useEffect(() => {
     const videoElement = cameraVideoRef.current;
     if (
@@ -561,10 +803,24 @@ export function ChildMotionWarmupDemo() {
     setHoldStartedAt(null);
     setLeftHandPath([]);
     setRightHandPath([]);
-  }, [stepId]);
+    handledMocapPacketKeyRef.current = null;
+
+    if (step.kind === 'levelSelect') {
+      setStepPhase('active');
+      return;
+    }
+
+    setStepPhase('intro');
+    const timeout = window.setTimeout(
+      () =>
+        setStepPhase((current) => (current === 'intro' ? 'active' : current)),
+      WARMUP_STEP_INTRO_DELAY_MS,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [step.kind, stepId]);
 
   useEffect(() => {
-    if (step.kind !== 'position') {
+    if (step.kind !== 'position' || !isStepActive) {
       return;
     }
 
@@ -575,11 +831,12 @@ export function ChildMotionWarmupDemo() {
     }
 
     setHoldStartedAt((current) => current ?? Date.now());
-  }, [avatarX, step]);
+  }, [avatarX, isStepActive, step]);
 
   useEffect(() => {
     if (
       step.kind !== 'position' ||
+      !isStepActive ||
       holdStartedAt === null ||
       holdCompletionRef.current ||
       nowMs - holdStartedAt < CHILD_MOTION_HOLD_DURATION_MS
@@ -589,10 +846,13 @@ export function ChildMotionWarmupDemo() {
 
     holdCompletionRef.current = true;
     completeStep({ type: 'position', avatarX });
-  }, [avatarX, completeStep, holdStartedAt, nowMs, step.kind]);
+  }, [avatarX, completeStep, holdStartedAt, isStepActive, nowMs, step.kind]);
 
   useEffect(() => {
-    if (step.kind !== 'narration' && step.kind !== 'finish') {
+    if (
+      !isStepActive ||
+      (step.kind !== 'narration' && step.kind !== 'finish')
+    ) {
       return;
     }
 
@@ -603,10 +863,10 @@ export function ChildMotionWarmupDemo() {
         : CHILD_MOTION_NARRATION_DURATION_MS,
     );
     return () => window.clearTimeout(timeout);
-  }, [completeStep, step.kind]);
+  }, [completeStep, isStepActive, step.kind]);
 
   useEffect(() => {
-    if (step.kind !== 'gesture' || !mocapInput.latestCommand) {
+    if (step.kind !== 'gesture' || !isStepActive || !mocapInput.latestCommand) {
       return;
     }
 
@@ -619,25 +879,32 @@ export function ChildMotionWarmupDemo() {
       return;
     }
 
-    const primaryPoint = mocapHandToChildMotionPoint(command.primaryHand);
+    const leftBodyHand = resolveMocapHandWithBodySide(command, 'left');
+    const rightBodyHand = resolveMocapHandWithBodySide(command, 'right');
+    const primaryBodySide =
+      command.primaryHand === leftBodyHand
+        ? 'left'
+        : command.primaryHand === rightBodyHand
+          ? 'right'
+          : undefined;
+    const primaryPoint = mocapHandToChildMotionPoint(
+      command.primaryHand,
+      command,
+      primaryBodySide,
+    );
     const primaryHandSide = command.primaryHand?.side ?? 'unknown';
     const fallbackPrimaryToLeft =
       Boolean(primaryPoint) &&
-      !command.leftHand &&
-      (primaryHandSide === 'left' ||
-        primaryHandSide === 'unknown' ||
-        stepId === 'wave_left_hand' ||
-        stepId === 'wave_greeting');
+      !leftBodyHand &&
+      (primaryBodySide === 'left' ||
+        (primaryHandSide === 'unknown' && stepId === 'wave_greeting'));
     const fallbackPrimaryToRight =
-      Boolean(primaryPoint) &&
-      !command.rightHand &&
-      (primaryHandSide === 'right' ||
-        stepId === 'wave_right_hand');
+      Boolean(primaryPoint) && !rightBodyHand && primaryBodySide === 'right';
     const leftPoint =
-      mocapHandToChildMotionPoint(command.leftHand) ??
+      mocapHandToChildMotionPoint(leftBodyHand, command, 'left') ??
       (fallbackPrimaryToLeft ? primaryPoint : null);
     const rightPoint =
-      mocapHandToChildMotionPoint(command.rightHand) ??
+      mocapHandToChildMotionPoint(rightBodyHand, command, 'right') ??
       (fallbackPrimaryToRight ? primaryPoint : null);
     const nextLeftHandPath = leftPoint
       ? appendWarmupMocapPoint(leftHandPath, leftPoint)
@@ -646,7 +913,7 @@ export function ChildMotionWarmupDemo() {
       ? appendWarmupMocapPoint(rightHandPath, rightPoint)
       : rightHandPath;
     const nextPrimaryHandPath = primaryPoint
-      ? command.primaryHand?.side === 'right'
+      ? primaryBodySide === 'right'
         ? nextRightHandPath
         : nextLeftHandPath
       : [];
@@ -675,14 +942,14 @@ export function ChildMotionWarmupDemo() {
     }
 
     if (intent === 'right-hand') {
-      const path = [...nextRightHandPath, rightPoint ?? primaryPoint].filter(
+      const path = [...nextRightHandPath, rightPoint].filter(
         (point): point is ChildMotionPoint => Boolean(point),
       );
       completeStep({ type: 'right-hand', path: path.slice(-16) });
       return;
     }
 
-    const path = [...nextLeftHandPath, leftPoint ?? primaryPoint].filter(
+    const path = [...nextLeftHandPath, leftPoint].filter(
       (point): point is ChildMotionPoint => Boolean(point),
     );
     completeStep({ type: 'left-hand', path: path.slice(-16) });
@@ -693,12 +960,13 @@ export function ChildMotionWarmupDemo() {
     mocapInput.rawPacketPreview?.receivedAtMs,
     mocapInput.rawPacketPreview?.text,
     rightHandPath,
+    isStepActive,
     step.kind,
     stepId,
   ]);
 
   useEffect(() => {
-    if (!mocapInput.latestCommand) {
+    if (stepPhase === 'complete' || !mocapInput.latestCommand) {
       return;
     }
 
@@ -707,11 +975,12 @@ export function ChildMotionWarmupDemo() {
       return;
     }
 
-    setAvatarX(nextAvatarX);
+    setAvatarX((current) => resolveDampedAvatarX(current, nextAvatarX));
   }, [
     mocapInput.latestCommand,
     mocapInput.rawPacketPreview?.receivedAtMs,
     mocapInput.rawPacketPreview?.text,
+    stepPhase,
   ]);
 
   useEffect(() => {
@@ -720,6 +989,10 @@ export function ChildMotionWarmupDemo() {
         return;
       }
 
+      if (stepPhase === 'complete') {
+        return;
+      }
+
       const key = event.key.toLowerCase();
       if (key === 'a') {
         setAvatarX(0.34);
@@ -735,7 +1008,7 @@ export function ChildMotionWarmupDemo() {
         event.preventDefault();
         setIsJumping(true);
         window.setTimeout(() => setIsJumping(false), 360);
-        if (stepId === 'jump_once') {
+        if (stepId === 'jump_once' && isStepActive) {
           completeStep({ type: 'jump', jumpSpace: 0.14 });
         }
       }
@@ -743,12 +1016,17 @@ export function ChildMotionWarmupDemo() {
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [completeStep, stepId]);
+  }, [completeStep, isStepActive, stepId, stepPhase]);
 
   useEffect(() => {
     const handleKeyUp = (event: KeyboardEvent) => {
       const key = event.key.toLowerCase();
-      if (key === 'a' || key === 'd' || event.code === 'KeyA' || event.code === 'KeyD') {
+      if (
+        key === 'a' ||
+        key === 'd' ||
+        event.code === 'KeyA' ||
+        event.code === 'KeyD'
+      ) {
         setAvatarX(CHILD_MOTION_CENTER_X);
       }
     };
@@ -758,6 +1036,10 @@ export function ChildMotionWarmupDemo() {
   }, []);
 
   const handleStagePointerDown = (event: ReactPointerEvent<HTMLElement>) => {
+    if (!isStepActive) {
+      return;
+    }
+
     if (event.button !== 0 && event.button !== 2) {
       return;
     }
@@ -805,6 +1087,10 @@ export function ChildMotionWarmupDemo() {
         : [...rightHandPath, point].slice(-16);
     setActiveHand(null);
 
+    if (!isStepActive) {
+      return;
+    }
+
     if (stepId === 'wave_greeting') {
       completeStep({ type: 'left-hand', path: completedPath });
       return;
@@ -824,7 +1110,10 @@ export function ChildMotionWarmupDemo() {
     setIsBabyObjectRuntimeOpen(true);
   };
 
-  const lineText = useMemo(() => step.spokenLines.join('，'), [step.spokenLines]);
+  const lineText = useMemo(
+    () => step.spokenLines.join('，'),
+    [step.spokenLines],
+  );
 
   if (isBabyObjectRuntimeOpen) {
     return (
@@ -845,8 +1134,9 @@ export function ChildMotionWarmupDemo() {
       </div>
 
       <section
-        className="child-motion-stage"
+        className={`child-motion-stage child-motion-stage--${stepPhase}`}
         data-testid="child-motion-stage"
+        data-step-phase={stepPhase}
         onPointerDown={handleStagePointerDown}
         onPointerMove={handleStagePointerMove}
         onPointerUp={handleStagePointerUp}
@@ -870,10 +1160,10 @@ export function ChildMotionWarmupDemo() {
           </div>
         ) : null}
         <div className="child-motion-floor" aria-hidden="true" />
-        {targetX !== null && step.kind === 'position' ? (
-          <ChildMotionRing targetX={targetX} progress={holdProgress} />
+        {shouldShowStepCues && targetX !== null && step.kind === 'position' ? (
+          <ChildMotionRing targetX={targetX} progress={displayHoldProgress} />
         ) : null}
-        {step.kind === 'gesture' ? (
+        {shouldShowStepCues && step.kind === 'gesture' ? (
           <ChildMotionGestureGuide
             stepId={stepId}
             leftHandPath={leftHandPath}
@@ -882,7 +1172,9 @@ export function ChildMotionWarmupDemo() {
         ) : null}
         <ChildMotionAvatar avatarX={avatarX} isJumping={isJumping} />
         {justCompletedText ? (
-          <div className="child-motion-floating-reward">{justCompletedText}</div>
+          <div className="child-motion-floating-reward">
+            {justCompletedText}
+          </div>
         ) : null}
 
         <div className="child-motion-hud child-motion-hud--top">

src/components/child-motion-demo/childMotionWarmupModel.test.ts

@@ -60,14 +60,25 @@ describe('childMotionWarmupModel', () => {
       {
         type: 'left-hand',
         path: [
-          { x: 0.3, y: 0.4 },
-          { x: 0.34, y: 0.32 },
+          { x: 0.3, y: 0.4, armAngleDeg: 12, armReach: 0.2 },
+          { x: 0.34, y: 0.32, armAngleDeg: 44, armReach: 0.28 },
+        ],
+      },
+    );
+    const withRightHand = applyChildMotionWarmupCompletion(
+      'wave_right_hand',
+      withLeftHand,
+      {
+        type: 'right-hand',
+        path: [
+          { x: 0.7, y: 0.42, armAngleDeg: 10, armReach: 0.22 },
+          { x: 0.82, y: 0.3, armAngleDeg: 46, armReach: 0.31 },
         ],
       },
     );
     const completed = applyChildMotionWarmupCompletion(
       'jump_once',
-      withLeftHand,
+      withRightHand,
       {
         type: 'jump',
         jumpSpace: 0.14,
@@ -77,6 +88,16 @@ describe('childMotionWarmupModel', () => {
     expect(completed.leftBoundary).toBeCloseTo(0.16);
     expect(completed.rightBoundary).toBeCloseTo(0.16);
     expect(completed.leftHandPath).toHaveLength(2);
+    expect(completed.leftHandSpace).toEqual({
+      minX: 0.3,
+      maxX: 0.34,
+      minY: 0.32,
+      maxY: 0.4,
+      minAngleDeg: 12,
+      maxAngleDeg: 44,
+      maxReach: 0.28,
+    });
+    expect(completed.rightHandSpace?.maxReach).toBe(0.31);
     expect(completed.jumpSpace).toBe(0.14);
   });
 });

src/components/child-motion-demo/childMotionWarmupModel.ts

@@ -32,6 +32,20 @@ export type ChildMotionWarmupStep = {
 export type ChildMotionPoint = {
   x: number;
   y: number;
+  isRaised?: boolean;
+  isArmExtended?: boolean;
+  armAngleDeg?: number;
+  armReach?: number;
+};
+
+export type ChildMotionHandSpace = {
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+  minAngleDeg: number | null;
+  maxAngleDeg: number | null;
+  maxReach: number | null;
 };
 
 export type ChildMotionWarmupCalibration = {
@@ -39,6 +53,8 @@ export type ChildMotionWarmupCalibration = {
   rightBoundary: number | null;
   leftHandPath: ChildMotionPoint[];
   rightHandPath: ChildMotionPoint[];
+  leftHandSpace: ChildMotionHandSpace | null;
+  rightHandSpace: ChildMotionHandSpace | null;
   jumpSpace: number | null;
 };
 
@@ -206,10 +222,39 @@ export function createEmptyChildMotionCalibration(): ChildMotionWarmupCalibratio
     rightBoundary: null,
     leftHandPath: [],
     rightHandPath: [],
+    leftHandSpace: null,
+    rightHandSpace: null,
     jumpSpace: null,
   };
 }
 
+function resolveChildMotionHandSpace(
+  path: ChildMotionPoint[],
+): ChildMotionHandSpace | null {
+  if (path.length === 0) {
+    return null;
+  }
+
+  const xValues = path.map((point) => point.x);
+  const yValues = path.map((point) => point.y);
+  const angleValues = path
+    .map((point) => point.armAngleDeg)
+    .filter((angle): angle is number => typeof angle === 'number');
+  const reachValues = path
+    .map((point) => point.armReach)
+    .filter((reach): reach is number => typeof reach === 'number');
+
+  return {
+    minX: Math.min(...xValues),
+    maxX: Math.max(...xValues),
+    minY: Math.min(...yValues),
+    maxY: Math.max(...yValues),
+    minAngleDeg: angleValues.length > 0 ? Math.min(...angleValues) : null,
+    maxAngleDeg: angleValues.length > 0 ? Math.max(...angleValues) : null,
+    maxReach: reachValues.length > 0 ? Math.max(...reachValues) : null,
+  };
+}
+
 export function applyChildMotionWarmupCompletion(
   stepId: ChildMotionWarmupStepId,
   calibration: ChildMotionWarmupCalibration,
@@ -233,6 +278,7 @@ export function applyChildMotionWarmupCompletion(
     return {
       ...calibration,
       leftHandPath: completion.path,
+      leftHandSpace: resolveChildMotionHandSpace(completion.path),
     };
   }
 
@@ -240,6 +286,7 @@ export function applyChildMotionWarmupCompletion(
     return {
       ...calibration,
       rightHandPath: completion.path,
+      rightHandSpace: resolveChildMotionHandSpace(completion.path),
     };
   }
 

src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx

@@ -5,9 +5,10 @@ import userEvent from '@testing-library/user-event';
 import { afterEach, expect, test, vi } from 'vitest';
 
 import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
 import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
-import { derivePlatformCreationTypes } from '../platform-entry/platformEntryCreationTypes';
 import type { CreationEntryConfig } from '../../services/creationEntryConfigService';
+import { derivePlatformCreationTypes } from '../platform-entry/platformEntryCreationTypes';
 import { CustomWorldCreationHub } from './CustomWorldCreationHub';
 
 const noopCreateType = () => {};
@@ -189,6 +190,40 @@ const hiddenSquareHoleItem: SquareHoleWorkSummary = {
   sourceSessionId: 'square-hole-session-hidden',
 };
 
+const babyObjectMatchDraftItem: BabyObjectMatchDraft = {
+  draftId: 'baby-object-draft-delete',
+  profileId: 'baby-object-profile-delete',
+  templateId: 'baby-object-match',
+  templateName: '宝贝识物',
+  workTitle: '宝贝识物删除测试',
+  workDescription: '苹果和香蕉识物分类',
+  itemNames: ['苹果', '香蕉'],
+  itemAssets: [
+    {
+      itemId: 'baby-object-item-1',
+      itemName: '苹果',
+      imageSrc: '/apple.png',
+      assetObjectId: null,
+      generationProvider: 'placeholder',
+      prompt: '苹果',
+    },
+    {
+      itemId: 'baby-object-item-2',
+      itemName: '香蕉',
+      imageSrc: '/banana.png',
+      assetObjectId: null,
+      generationProvider: 'placeholder',
+      prompt: '香蕉',
+    },
+  ],
+  visualPackage: null,
+  themeTags: ['寓教于乐'],
+  publicationStatus: 'draft',
+  createdAt: new Date('2026-05-11T10:00:00.000Z').toISOString(),
+  updatedAt: new Date('2026-05-11T10:00:00.000Z').toISOString(),
+  publishedAt: null,
+};
+
 test('creation hub reflects updated draft title summary and counts after rerender', async () => {
   const user = userEvent.setup();
   const onCreateType = vi.fn();
@@ -462,6 +497,34 @@ test('creation hub shows delete action for persisted rpg drafts', () => {
   expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
 });
 
+test('creation hub shows delete action for baby object match drafts', async () => {
+  const user = userEvent.setup();
+  const onDeleteBabyObjectMatch = vi.fn();
+  const onOpenBabyObjectMatchDetail = vi.fn();
+
+  render(
+    <CustomWorldCreationHub
+      items={[]}
+      babyObjectMatchItems={[babyObjectMatchDraftItem]}
+      loading={false}
+      error={null}
+      onRetry={() => {}}
+      onCreateType={noopCreateType}
+      onOpenDraft={() => {}}
+      onEnterPublished={() => {}}
+      onOpenBabyObjectMatchDetail={onOpenBabyObjectMatchDetail}
+      onDeleteBabyObjectMatch={onDeleteBabyObjectMatch}
+      entryConfig={testEntryConfig}
+      creationTypes={testCreationTypes}
+    />,
+  );
+
+  await user.click(screen.getByRole('button', { name: '删除' }));
+
+  expect(onDeleteBabyObjectMatch).toHaveBeenCalledWith(babyObjectMatchDraftItem);
+  expect(onOpenBabyObjectMatchDetail).not.toHaveBeenCalled();
+});
+
 test('creation hub published work delete action is available beside share without opening card', async () => {
   const user = userEvent.setup();
   const onDeletePuzzle = vi.fn();

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -68,6 +68,7 @@ type CustomWorldCreationHubProps = {
   claimingPuzzleProfileId?: string | null;
   babyObjectMatchItems?: BabyObjectMatchDraft[];
   onOpenBabyObjectMatchDetail?: ((item: BabyObjectMatchDraft) => void) | null;
+  onDeleteBabyObjectMatch?: ((item: BabyObjectMatchDraft) => void) | null;
   visualNovelItems?: VisualNovelWorkSummary[];
   onOpenVisualNovelDetail?: ((item: VisualNovelWorkSummary) => void) | null;
   onDeleteVisualNovel?: ((item: VisualNovelWorkSummary) => void) | null;
@@ -172,6 +173,7 @@ export function CustomWorldCreationHub({
   claimingPuzzleProfileId = null,
   babyObjectMatchItems = [],
   onOpenBabyObjectMatchDetail = null,
+  onDeleteBabyObjectMatch = null,
   visualNovelItems = [],
   onOpenVisualNovelDetail = null,
   onDeleteVisualNovel = null,
@@ -202,6 +204,7 @@ export function CustomWorldCreationHub({
         canDeleteSquareHole:
           isSquareHoleCreationVisible && Boolean(onDeleteSquareHole),
         canDeletePuzzle: Boolean(onDeletePuzzle),
+        canDeleteBabyObjectMatch: Boolean(onDeleteBabyObjectMatch),
         canDeleteVisualNovel: Boolean(onDeleteVisualNovel),
         onOpenRpgDraft: onOpenDraft,
         onEnterRpgPublished: onEnterPublished,
@@ -216,6 +219,7 @@ export function CustomWorldCreationHub({
         onDeletePuzzle: onDeletePuzzle ?? undefined,
         onClaimPuzzlePointIncentive: onClaimPuzzlePointIncentive ?? undefined,
         onOpenBabyObjectMatchDetail: onOpenBabyObjectMatchDetail ?? undefined,
+        onDeleteBabyObjectMatch: onDeleteBabyObjectMatch ?? undefined,
         onOpenVisualNovelDetail: onOpenVisualNovelDetail ?? undefined,
         onDeleteVisualNovel: onDeleteVisualNovel ?? undefined,
         getItemState: getWorkState,
@@ -231,6 +235,7 @@ export function CustomWorldCreationHub({
       onDeleteSquareHole,
       onDeletePublished,
       onDeletePuzzle,
+      onDeleteBabyObjectMatch,
       onDeleteVisualNovel,
       onClaimPuzzlePointIncentive,
       onOpenBigFishDetail,
@@ -269,6 +274,7 @@ export function CustomWorldCreationHub({
   );
 
   function handleOpenShelfItem(item: CreationWorkShelfItem) {
+    onOpenShelfItem?.(item);
     switch (item.source.kind) {
       case 'puzzle':
         onOpenPuzzleDetail?.(item.source.item);
@@ -379,8 +385,7 @@ export function CustomWorldCreationHub({
                     metricSnapshot[buildWorkMetricCacheItemKey(item)]
                   }
                   onOpen={() => {
-                    onOpenShelfItem?.(item);
-                    item.actions.open();
+                    handleOpenShelfItem(item);
                   }}
                   onDelete={buildDeleteAction(item)}
                   deleteBusy={deletingWorkId === item.id}

src/components/custom-world-home/creationWorkShelf.test.ts

@@ -87,6 +87,8 @@ test('buildCreationWorkShelfItems attaches open and delete actions through shelf
 });
 
 test('buildCreationWorkShelfItems maps baby object match local drafts', () => {
+  const onOpenBabyObjectMatchDetail = vi.fn();
+  const onDeleteBabyObjectMatch = vi.fn();
   const baseDraft: BabyObjectMatchDraft = {
     draftId: 'baby-object-draft-1',
     profileId: 'baby-object-profile-12345678',
@@ -113,6 +115,7 @@ test('buildCreationWorkShelfItems maps baby object match local drafts', () => {
         prompt: '香蕉',
       },
     ],
+    visualPackage: null,
     themeTags: ['寓教于乐'],
     publicationStatus: 'draft',
     createdAt: '2026-05-11T00:00:00.000Z',
@@ -135,14 +138,23 @@ test('buildCreationWorkShelfItems maps baby object match local drafts', () => {
         updatedAt: '2026-05-11T01:00:00.000Z',
       },
     ],
+    canDeleteBabyObjectMatch: true,
+    onOpenBabyObjectMatchDetail,
+    onDeleteBabyObjectMatch,
   });
 
+  items[1]?.actions.open();
+  items[1]?.actions.delete?.();
+
   expect(items[0]?.kind).toBe('baby-object-match');
   expect(items[0]?.status).toBe('published');
   expect(items[0]?.publicWorkCode).toBe('BO-87654321');
   expect(items[0]?.sharePath).toContain('/works/detail?work=BO-87654321');
   expect(items[1]?.status).toBe('draft');
   expect(items[1]?.publicWorkCode).toBeNull();
+  expect(items[1]?.canDelete).toBe(true);
+  expect(onOpenBabyObjectMatchDetail).toHaveBeenCalledWith(baseDraft);
+  expect(onDeleteBabyObjectMatch).toHaveBeenCalledWith(baseDraft);
 });
 
 test('buildCreationWorkShelfItems sorts works by latest updatedAt across timestamp formats', () => {

src/components/custom-world-home/creationWorkShelf.ts

@@ -130,6 +130,7 @@ export function buildCreationWorkShelfItems(params: {
   canDeleteMatch3D?: boolean;
   canDeleteSquareHole?: boolean;
   canDeletePuzzle?: boolean;
+  canDeleteBabyObjectMatch?: boolean;
   canDeleteVisualNovel?: boolean;
   onOpenRpgDraft?: (item: CustomWorldWorkSummary) => void;
   onEnterRpgPublished?: (profileId: string) => void;
@@ -144,6 +145,7 @@ export function buildCreationWorkShelfItems(params: {
   onDeletePuzzle?: (item: PuzzleWorkSummary) => void;
   onClaimPuzzlePointIncentive?: (item: PuzzleWorkSummary) => void;
   onOpenBabyObjectMatchDetail?: (item: BabyObjectMatchDraft) => void;
+  onDeleteBabyObjectMatch?: (item: BabyObjectMatchDraft) => void;
   onOpenVisualNovelDetail?: (item: VisualNovelWorkSummary) => void;
   onDeleteVisualNovel?: (item: VisualNovelWorkSummary) => void;
   getItemState?: (
@@ -164,6 +166,7 @@ export function buildCreationWorkShelfItems(params: {
     canDeleteMatch3D = false,
     canDeleteSquareHole = false,
     canDeletePuzzle = false,
+    canDeleteBabyObjectMatch = false,
     canDeleteVisualNovel = false,
     onOpenRpgDraft,
     onEnterRpgPublished,
@@ -178,6 +181,7 @@ export function buildCreationWorkShelfItems(params: {
     onDeletePuzzle,
     onClaimPuzzlePointIncentive,
     onOpenBabyObjectMatchDetail,
+    onDeleteBabyObjectMatch,
     onOpenVisualNovelDetail,
     onDeleteVisualNovel,
     getItemState,
@@ -217,8 +221,9 @@ export function buildCreationWorkShelfItems(params: {
       }),
     ),
     ...babyObjectMatchItems.map((item) =>
-      mapBabyObjectMatchDraftToShelfItem(item, {
+      mapBabyObjectMatchDraftToShelfItem(item, canDeleteBabyObjectMatch, {
         onOpen: onOpenBabyObjectMatchDetail,
+        onDelete: onDeleteBabyObjectMatch,
       }),
     ),
     ...visualNovelItems.map((item) =>
@@ -467,6 +472,7 @@ function mapPuzzleWorkToShelfItem(
 
 function mapBabyObjectMatchDraftToShelfItem(
   item: BabyObjectMatchDraft,
+  canDelete: boolean,
   adapter: WorkShelfAdapter<BabyObjectMatchDraft>,
 ): CreationWorkShelfItem {
   const status = item.publicationStatus === 'published' ? 'published' : 'draft';
@@ -495,7 +501,7 @@ function mapBabyObjectMatchDraftToShelfItem(
         ? buildPublicWorkStagePath('work-detail', publicWorkCode)
         : null,
     openActionLabel: status === 'published' ? '查看详情' : '继续创作',
-    canDelete: false,
+    canDelete,
     canShare: status === 'published' && Boolean(publicWorkCode),
     badges: [
       buildStatusBadge(status),

src/components/edutainment-result/BabyObjectMatchResultView.test.tsx

@@ -51,6 +51,7 @@ function createDraft(overrides: Partial<BabyObjectMatchDraft> = {}) {
         prompt: '香蕉',
       },
     ],
+    visualPackage: null,
     themeTags: ['宝贝识物'],
     publicationStatus: 'draft',
     createdAt: '2026-05-11T00:00:00.000Z',
@@ -62,13 +63,81 @@ function createDraft(overrides: Partial<BabyObjectMatchDraft> = {}) {
   return draft;
 }
 
+function createGeneratedDraft() {
+  return createDraft({
+    itemAssets: [
+      {
+        itemId: 'baby-object-item-1',
+        itemName: '苹果',
+        imageSrc: 'data:image/png;base64,a',
+        assetObjectId: null,
+        generationProvider: 'vector-engine-gpt-image-2',
+        prompt: '苹果',
+      },
+      {
+        itemId: 'baby-object-item-2',
+        itemName: '香蕉',
+        imageSrc: 'data:image/png;base64,b',
+        assetObjectId: null,
+        generationProvider: 'vector-engine-gpt-image-2',
+        prompt: '香蕉',
+      },
+    ],
+    visualPackage: {
+      themePrompt: '果园主题',
+      assets: [
+        {
+          assetId: 'baby-object-visual-background',
+          assetKind: 'background',
+          imageSrc: 'data:image/png;base64,background',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'background',
+        },
+        {
+          assetId: 'baby-object-visual-ui-frame',
+          assetKind: 'ui-frame',
+          imageSrc: 'data:image/png;base64,ui',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'ui',
+        },
+        {
+          assetId: 'baby-object-visual-gift-box',
+          assetKind: 'gift-box',
+          imageSrc: 'data:image/png;base64,gift',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'gift',
+        },
+        {
+          assetId: 'baby-object-visual-basket',
+          assetKind: 'basket',
+          imageSrc: 'data:image/png;base64,basket',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'basket',
+        },
+        {
+          assetId: 'baby-object-visual-smoke-puff',
+          assetKind: 'smoke-puff',
+          imageSrc: 'data:image/png;base64,smoke',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'smoke',
+        },
+      ],
+    },
+  });
+}
+
 test('baby object result publishes with exact edutainment tag', async () => {
   const user = userEvent.setup();
   const onPublish = vi.fn();
 
   render(
     <BabyObjectMatchResultView
-      draft={createDraft()}
+      draft={createGeneratedDraft()}
       onBack={() => {}}
       onPublish={onPublish}
     />,
@@ -90,7 +159,7 @@ test('baby object result exposes save and test run actions', async () => {
 
   render(
     <BabyObjectMatchResultView
-      draft={createDraft()}
+      draft={createGeneratedDraft()}
       onBack={() => {}}
       onSaveDraft={onSaveDraft}
       onStartTestRun={onStartTestRun}
@@ -103,3 +172,38 @@ test('baby object result exposes save and test run actions', async () => {
   expect(onSaveDraft).toHaveBeenCalledTimes(1);
   expect(onStartTestRun).toHaveBeenCalledTimes(1);
 });
+
+test('baby object result blocks placeholder assets and exposes regeneration', async () => {
+  const user = userEvent.setup();
+  const onPublish = vi.fn();
+  const onStartTestRun = vi.fn();
+  const onRegenerateAssets = vi.fn();
+
+  render(
+    <BabyObjectMatchResultView
+      draft={createDraft()}
+      onBack={() => {}}
+      onPublish={onPublish}
+      onStartTestRun={onStartTestRun}
+      onRegenerateAssets={onRegenerateAssets}
+    />,
+  );
+
+  expect(
+    screen.getByText('当前作品仍是占位资源，请重新生成 image-2 资源后再试玩或发布。'),
+  ).toBeTruthy();
+  expect(
+    (screen.getByRole('button', { name: '试玩' }) as HTMLButtonElement)
+      .disabled,
+  ).toBe(true);
+  expect(
+    (screen.getByRole('button', { name: '发布' }) as HTMLButtonElement)
+      .disabled,
+  ).toBe(true);
+
+  await user.click(screen.getByRole('button', { name: '重新生成资源' }));
+
+  expect(onRegenerateAssets).toHaveBeenCalledTimes(1);
+  expect(onPublish).not.toHaveBeenCalled();
+  expect(onStartTestRun).not.toHaveBeenCalled();
+});

src/components/edutainment-result/BabyObjectMatchResultView.tsx

@@ -1,4 +1,12 @@
-import { ArrowLeft, CheckCircle2, Loader2, Play, Save, Tag } from 'lucide-react';
+import {
+  ArrowLeft,
+  CheckCircle2,
+  Loader2,
+  Play,
+  RefreshCw,
+  Save,
+  Tag,
+} from 'lucide-react';
 import { useMemo } from 'react';
 
 import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
@@ -17,6 +25,7 @@ type BabyObjectMatchResultViewProps = {
   onSaveDraft?: (draft: BabyObjectMatchDraft) => void;
   onPublish?: (draft: BabyObjectMatchDraft) => void;
   onStartTestRun?: (draft: BabyObjectMatchDraft) => void;
+  onRegenerateAssets?: (draft: BabyObjectMatchDraft) => void;
 };
 
 function normalizeDraftForAction(draft: BabyObjectMatchDraft) {
@@ -27,6 +36,14 @@ function normalizeDraftForAction(draft: BabyObjectMatchDraft) {
   };
 }
 
+const REQUIRED_VISUAL_ASSET_KINDS = [
+  'background',
+  'ui-frame',
+  'gift-box',
+  'basket',
+  'smoke-puff',
+] as const;
+
 export function BabyObjectMatchResultView({
   draft,
   isBusy = false,
@@ -35,12 +52,29 @@ export function BabyObjectMatchResultView({
   onSaveDraft,
   onPublish,
   onStartTestRun,
+  onRegenerateAssets,
 }: BabyObjectMatchResultViewProps) {
   const normalizedDraft = useMemo(() => normalizeDraftForAction(draft), [draft]);
+  const hasGeneratedAssets =
+    normalizedDraft.itemAssets.every(
+      (asset) =>
+        asset.generationProvider === 'vector-engine-gpt-image-2' &&
+        asset.imageSrc.startsWith('data:image/png;base64,'),
+    ) &&
+    Boolean(normalizedDraft.visualPackage) &&
+    REQUIRED_VISUAL_ASSET_KINDS.every((kind) =>
+      normalizedDraft.visualPackage!.assets.some(
+        (asset) =>
+          asset.assetKind === kind &&
+          asset.generationProvider === 'vector-engine-gpt-image-2' &&
+          asset.imageSrc.startsWith('data:image/png;base64,'),
+      ),
+    );
   const publishReady =
     normalizedDraft.itemNames.every((itemName) => itemName.trim()) &&
     normalizedDraft.itemAssets.every((asset) => asset.imageSrc.trim()) &&
-    hasBabyObjectMatchRequiredTag(normalizedDraft.themeTags);
+    hasBabyObjectMatchRequiredTag(normalizedDraft.themeTags) &&
+    hasGeneratedAssets;
   const isPublished = normalizedDraft.publicationStatus === 'published';
 
   return (
@@ -123,9 +157,15 @@ export function BabyObjectMatchResultView({
               {error}
             </div>
           ) : null}
+
+          {!hasGeneratedAssets ? (
+            <div className="platform-banner mt-3 rounded-2xl text-sm leading-6">
+              当前作品仍是占位资源，请重新生成 image-2 资源后再试玩或发布。
+            </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">
+        <div className="mt-3 grid shrink-0 gap-2 pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:grid-cols-4">
           <button
             type="button"
             disabled={isBusy || !onSaveDraft}
@@ -137,7 +177,20 @@ export function BabyObjectMatchResultView({
           </button>
           <button
             type="button"
-            disabled={isBusy || !onStartTestRun}
+            disabled={isBusy || !onRegenerateAssets}
+            onClick={() => onRegenerateAssets?.(normalizedDraft)}
+            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+          >
+            {isBusy ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            重新生成资源
+          </button>
+          <button
+            type="button"
+            disabled={isBusy || !hasGeneratedAssets || !onStartTestRun}
             onClick={() => onStartTestRun?.(normalizedDraft)}
             className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
           >

src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.test.tsx

@@ -0,0 +1,246 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+
+import { BabyLoveDrawingRuntimeShell } from './BabyLoveDrawingRuntimeShell';
+
+const saveBabyLoveDrawingMock = vi.fn();
+const createBabyLoveDrawingMagicImageMock = vi.fn();
+
+const mocapMock = vi.hoisted(() => ({
+  command: null as null | {
+    actions: string[];
+    leftHand?: {
+      x: number;
+      y: number;
+      state: 'open_palm' | 'grab' | 'unknown';
+      side: 'left';
+    } | null;
+    rightHand?: {
+      x: number;
+      y: number;
+      state: 'open_palm' | 'grab' | 'unknown';
+      side: 'right';
+    } | null;
+  },
+}));
+
+vi.mock('../../services/useMocapInput', () => ({
+  useMocapInput: () => ({
+    status: 'idle',
+    latestCommand: mocapMock.command,
+    rawPacketPreview: null,
+    error: null,
+  }),
+}));
+
+vi.mock('../../services/edutainment-baby-drawing', () => ({
+  createBabyLoveDrawingMagicImage: (...args: unknown[]) =>
+    createBabyLoveDrawingMagicImageMock(...args),
+  saveBabyLoveDrawing: (...args: unknown[]) => saveBabyLoveDrawingMock(...args),
+}));
+
+function installCanvasMock() {
+  const context = {
+    save: vi.fn(),
+    restore: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    fillRect: vi.fn(),
+    drawImage: vi.fn(),
+    set fillStyle(_value: string) {},
+    set strokeStyle(_value: string) {},
+    set lineWidth(_value: number) {},
+    set lineCap(_value: CanvasLineCap) {},
+    set lineJoin(_value: CanvasLineJoin) {},
+    set globalCompositeOperation(_value: GlobalCompositeOperation) {},
+  } as unknown as CanvasRenderingContext2D;
+
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+  vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL').mockReturnValue(
+    'data:image/png;base64,original',
+  );
+}
+
+beforeEach(() => {
+  installCanvasMock();
+  mocapMock.command = null;
+  saveBabyLoveDrawingMock.mockReturnValue({
+    record: {
+      drawingId: 'baby-love-drawing-local-1',
+      templateId: 'baby-love-drawing',
+      templateName: '宝贝爱画',
+      originalImageSrc: 'data:image/png;base64,original',
+      magicImageSrc: null,
+      strokeTrace: [],
+      saveMode: 'original-only',
+      themeTags: ['寓教于乐', '宝贝爱画'],
+      createdAt: '2026-05-13T08:00:00.000Z',
+      updatedAt: '2026-05-13T08:00:00.000Z',
+    },
+  });
+  createBabyLoveDrawingMagicImageMock.mockResolvedValue({
+    magicImageSrc: 'data:image/png;base64,magic',
+    generationProvider: 'vector-engine-gpt-image-2',
+    prompt: '绘本风格',
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+test('renders drawing board, seven colors and tool buttons', () => {
+  render(<BabyLoveDrawingRuntimeShell />);
+
+  expect(screen.getByTestId('baby-love-drawing-runtime')).toBeTruthy();
+  expect(screen.getByLabelText('画板')).toBeTruthy();
+  expect(screen.getByLabelText('红')).toBeTruthy();
+  expect(screen.getByLabelText('紫')).toBeTruthy();
+  expect(screen.getAllByRole('button')).toHaveLength(11);
+  expect(screen.getByLabelText('画笔')).toBeTruthy();
+  expect(screen.getByLabelText('橡皮')).toBeTruthy();
+});
+
+test('finish then save stores original drawing in local demo service', () => {
+  render(<BabyLoveDrawingRuntimeShell />);
+
+  fireEvent.click(screen.getByRole('button', { name: '完成' }));
+  fireEvent.click(screen.getByRole('button', { name: '保存' }));
+
+  expect(saveBabyLoveDrawingMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      originalImageSrc: 'data:image/png;base64,original',
+      magicImageSrc: null,
+    }),
+  );
+  expect(screen.getByText('已保存')).toBeTruthy();
+});
+
+test('back button calls onBack callback', () => {
+  const onBack = vi.fn();
+  render(<BabyLoveDrawingRuntimeShell onBack={onBack} />);
+
+  fireEvent.click(screen.getByLabelText('返回'));
+
+  expect(onBack).toHaveBeenCalledTimes(1);
+});
+
+test('mocap camera-left hand drives the player right hand brush cursor', () => {
+  mocapMock.command = {
+    actions: [],
+    leftHand: { x: 0.72, y: 0.34, state: 'open_palm', side: 'left' },
+    rightHand: null,
+  };
+  const { container, rerender } = render(<BabyLoveDrawingRuntimeShell />);
+  const cursor = container.querySelector(
+    '.baby-love-drawing-runtime__cursor',
+  ) as HTMLElement;
+
+  expect(cursor.style.left).toBe('72%');
+  expect(cursor.style.top).toBe('34%');
+
+  mocapMock.command = {
+    actions: [],
+    leftHand: null,
+    rightHand: { x: 0.18, y: 0.82, state: 'grab', side: 'right' },
+  };
+  rerender(<BabyLoveDrawingRuntimeShell />);
+
+  expect(cursor.style.left).toBe('72%');
+  expect(cursor.style.top).toBe('34%');
+});
+
+test('mocap camera-right hand renders the player left hand color indicator', () => {
+  mocapMock.command = {
+    actions: [],
+    leftHand: null,
+    rightHand: { x: 0.16, y: 0.42, state: 'open_palm', side: 'right' },
+  };
+  const { container } = render(<BabyLoveDrawingRuntimeShell />);
+  const indicator = container.querySelector(
+    '.baby-love-drawing-runtime__left-hand-indicator',
+  ) as HTMLElement;
+
+  expect(indicator).toBeTruthy();
+  expect(indicator.style.left).toBe('16%');
+  expect(indicator.style.top).toBe('42%');
+});
+
+test('left hand indicator stays visible through brief mocap hand loss', () => {
+  vi.useFakeTimers();
+  mocapMock.command = {
+    actions: [],
+    leftHand: null,
+    rightHand: { x: 0.16, y: 0.42, state: 'open_palm', side: 'right' },
+  };
+  const { container, rerender } = render(<BabyLoveDrawingRuntimeShell />);
+
+  vi.advanceTimersByTime(120);
+  mocapMock.command = {
+    actions: [],
+    leftHand: null,
+    rightHand: null,
+  };
+  rerender(<BabyLoveDrawingRuntimeShell />);
+
+  const indicator = container.querySelector(
+    '.baby-love-drawing-runtime__left-hand-indicator',
+  ) as HTMLElement;
+  expect(indicator).toBeTruthy();
+  expect(indicator.style.left).toBe('16%');
+  expect(indicator.style.top).toBe('42%');
+});
+
+test('player left hand never takes over the right hand brush cursor', () => {
+  mocapMock.command = {
+    actions: [],
+    leftHand: { x: 0.68, y: 0.32, state: 'open_palm', side: 'left' },
+    rightHand: { x: 0.18, y: 0.78, state: 'open_palm', side: 'right' },
+  };
+  const { container, rerender } = render(<BabyLoveDrawingRuntimeShell />);
+  const cursor = container.querySelector(
+    '.baby-love-drawing-runtime__cursor',
+  ) as HTMLElement;
+
+  expect(cursor.style.left).toBe('68%');
+  expect(cursor.style.top).toBe('32%');
+
+  mocapMock.command = {
+    actions: [],
+    leftHand: null,
+    rightHand: { x: 0.7, y: 0.3, state: 'grab', side: 'right' },
+  };
+  rerender(<BabyLoveDrawingRuntimeShell />);
+
+  expect(cursor.style.left).toBe('68%');
+  expect(cursor.style.top).toBe('32%');
+});
+
+test('large camera-left jump is rejected to prevent left hand stealing brush', () => {
+  mocapMock.command = {
+    actions: [],
+    leftHand: { x: 0.72, y: 0.34, state: 'open_palm', side: 'left' },
+    rightHand: null,
+  };
+  const { container, rerender } = render(<BabyLoveDrawingRuntimeShell />);
+  const cursor = container.querySelector(
+    '.baby-love-drawing-runtime__cursor',
+  ) as HTMLElement;
+
+  expect(cursor.style.left).toBe('72%');
+  expect(cursor.style.top).toBe('34%');
+
+  mocapMock.command = {
+    actions: [],
+    leftHand: { x: 0.16, y: 0.82, state: 'grab', side: 'left' },
+    rightHand: null,
+  };
+  rerender(<BabyLoveDrawingRuntimeShell />);
+
+  expect(cursor.style.left).toBe('72%');
+  expect(cursor.style.top).toBe('34%');
+});

src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx

@@ -0,0 +1,932 @@
+import {
+  ArrowLeft,
+  Brush,
+  Check,
+  Eraser,
+  ImagePlus,
+  RotateCcw,
+  Save,
+  Sparkles,
+} from 'lucide-react';
+import {
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import type {
+  BabyLoveDrawingPoint,
+  BabyLoveDrawingRecord,
+  BabyLoveDrawingStroke,
+  BabyLoveDrawingTool,
+} from '../../../packages/shared/src/contracts/edutainmentBabyDrawing';
+import { BABY_LOVE_DRAWING_RAINBOW_COLORS } from '../../../packages/shared/src/contracts/edutainmentBabyDrawing';
+import {
+  createBabyLoveDrawingMagicImage,
+  saveBabyLoveDrawing,
+} from '../../services/edutainment-baby-drawing';
+import type { MocapHandInput } from '../../services/useMocapInput';
+import { useMocapInput } from '../../services/useMocapInput';
+import {
+  appendPointToStroke,
+  BABY_LOVE_DRAWING_BRUSH_SIZE,
+  BABY_LOVE_DRAWING_DEFAULT_COLOR,
+  BABY_LOVE_DRAWING_ERASER_SIZE,
+  type BabyLoveDrawingBounds,
+  type BabyLoveDrawingHandPoint,
+  type BabyLoveDrawingHoverTarget,
+  type BabyLoveDrawingPhase,
+  createBabyDrawingStroke,
+  hasHoverCompleted,
+  isPointInsideBounds,
+  resolveHoverProgress,
+  toCanvasPoint,
+} from './babyLoveDrawingModel';
+
+type BabyLoveDrawingRuntimeShellProps = {
+  onBack?: () => void;
+};
+
+type ActionButtonId = 'finish' | 'magic' | 'save' | 'restart' | 'back';
+
+type RectMap = {
+  canvas: BabyLoveDrawingBounds | null;
+  colors: Record<string, BabyLoveDrawingBounds>;
+  tools: Record<BabyLoveDrawingTool, BabyLoveDrawingBounds | null>;
+  buttons: Record<ActionButtonId, BabyLoveDrawingBounds | null>;
+};
+
+type ActiveStrokeState = {
+  stroke: BabyLoveDrawingStroke;
+  lastPoint: BabyLoveDrawingPoint;
+};
+
+const BABY_LOVE_DRAWING_HAND_LOSS_GRACE_MS = 320;
+const BABY_LOVE_DRAWING_HAND_SMOOTHING = 0.38;
+const BABY_LOVE_DRAWING_RIGHT_HAND_MAX_FRAME_JUMP = 0.28;
+
+const EMPTY_RECT_MAP: RectMap = {
+  canvas: null,
+  colors: {},
+  tools: {
+    brush: null,
+    eraser: null,
+  },
+  buttons: {
+    finish: null,
+    magic: null,
+    save: null,
+    restart: null,
+    back: null,
+  },
+};
+
+function pointFromPointer(
+  event: ReactPointerEvent<HTMLElement>,
+  element: HTMLElement,
+): BabyLoveDrawingHandPoint {
+  const rect = element.getBoundingClientRect();
+  const width = rect.width || 1;
+  const height = rect.height || 1;
+
+  return {
+    x: Math.max(0, Math.min(1, (event.clientX - rect.left) / width)),
+    y: Math.max(0, Math.min(1, (event.clientY - rect.top) / height)),
+    state: event.buttons ? 'grab' : 'open_palm',
+  };
+}
+
+function handToPoint(hand: MocapHandInput | null | undefined) {
+  if (!hand) {
+    return null;
+  }
+
+  return {
+    x: hand.x,
+    y: hand.y,
+    state: hand.state,
+  } satisfies BabyLoveDrawingHandPoint;
+}
+
+function commandToPlayerLeftHand(command: {
+  rightHand?: MocapHandInput | null;
+}) {
+  // 本地 mocap handedness 当前按摄像头视角输出：画面右侧手对应用户身体左手。
+  return handToPoint(command.rightHand);
+}
+
+function commandToPlayerRightHand(command: {
+  leftHand?: MocapHandInput | null;
+}) {
+  // 本地 mocap handedness 当前按摄像头视角输出：画面左侧手对应用户身体右手。
+  return handToPoint(command.leftHand);
+}
+
+function smoothHandPoint(
+  previous: BabyLoveDrawingHandPoint | null,
+  next: BabyLoveDrawingHandPoint,
+): BabyLoveDrawingHandPoint {
+  if (!previous) {
+    return next;
+  }
+
+  return {
+    x:
+      previous.x +
+      (next.x - previous.x) * BABY_LOVE_DRAWING_HAND_SMOOTHING,
+    y:
+      previous.y +
+      (next.y - previous.y) * BABY_LOVE_DRAWING_HAND_SMOOTHING,
+    state: next.state,
+  };
+}
+
+function getHandPointDistance(
+  left: BabyLoveDrawingHandPoint,
+  right: BabyLoveDrawingHandPoint,
+) {
+  return Math.hypot(left.x - right.x, left.y - right.y);
+}
+
+function canAcceptRightHandPoint(
+  previous: BabyLoveDrawingHandPoint | null,
+  next: BabyLoveDrawingHandPoint | null,
+) {
+  if (!next || !previous) {
+    return Boolean(next);
+  }
+
+  return (
+    getHandPointDistance(previous, next) <=
+    BABY_LOVE_DRAWING_RIGHT_HAND_MAX_FRAME_JUMP
+  );
+}
+
+function sameHoverTarget(
+  left: BabyLoveDrawingHoverTarget,
+  right: BabyLoveDrawingHoverTarget,
+) {
+  if (!left || !right) {
+    return left === right;
+  }
+
+  return left.kind === right.kind && left.id === right.id;
+}
+
+function findTargetInBounds<T extends string>(
+  point: BabyLoveDrawingHandPoint | null,
+  bounds: Record<T, BabyLoveDrawingBounds | null>,
+): T | null {
+  if (!point) {
+    return null;
+  }
+
+  for (const [id, rect] of Object.entries(bounds) as Array<
+    [T, BabyLoveDrawingBounds | null]
+  >) {
+    if (rect && isPointInsideBounds(point, rect)) {
+      return id;
+    }
+  }
+
+  return null;
+}
+
+function drawStrokeSegment(
+  context: CanvasRenderingContext2D,
+  stroke: BabyLoveDrawingStroke,
+  from: BabyLoveDrawingPoint,
+  to: BabyLoveDrawingPoint,
+  width: number,
+  height: number,
+) {
+  context.save();
+  context.lineCap = 'round';
+  context.lineJoin = 'round';
+  context.lineWidth =
+    stroke.tool === 'brush'
+      ? BABY_LOVE_DRAWING_BRUSH_SIZE
+      : BABY_LOVE_DRAWING_ERASER_SIZE;
+  if (stroke.tool === 'eraser') {
+    context.globalCompositeOperation = 'destination-out';
+    context.strokeStyle = 'rgba(0,0,0,1)';
+  } else {
+    context.globalCompositeOperation = 'source-over';
+    context.strokeStyle = stroke.color;
+  }
+  context.beginPath();
+  context.moveTo(from.x * width, from.y * height);
+  context.lineTo(to.x * width, to.y * height);
+  context.stroke();
+  context.restore();
+}
+
+export function BabyLoveDrawingRuntimeShell({
+  onBack,
+}: BabyLoveDrawingRuntimeShellProps) {
+  const shellRef = useRef<HTMLElement | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const rectMapRef = useRef<RectMap>(EMPTY_RECT_MAP);
+  const activeStrokeRef = useRef<ActiveStrokeState | null>(null);
+  const hoverTargetRef = useRef<BabyLoveDrawingHoverTarget>(null);
+  const hoverStartedAtRef = useRef<number | null>(null);
+  const hoverCompletedKeyRef = useRef<string | null>(null);
+  const previousToolGrabRef = useRef<string | null>(null);
+  const visibleLeftHandRef = useRef<BabyLoveDrawingHandPoint | null>(null);
+  const visibleRightHandRef = useRef<BabyLoveDrawingHandPoint | null>(null);
+  const leftHandSeenAtRef = useRef<number | null>(null);
+  const rightHandSeenAtRef = useRef<number | null>(null);
+  const [phase, setPhase] = useState<BabyLoveDrawingPhase>('drawing');
+  const [selectedColor, setSelectedColor] = useState<string>(
+    BABY_LOVE_DRAWING_DEFAULT_COLOR,
+  );
+  const [selectedTool, setSelectedTool] =
+    useState<BabyLoveDrawingTool>('brush');
+  const [strokes, setStrokes] = useState<BabyLoveDrawingStroke[]>([]);
+  const [rightHandPoint, setRightHandPoint] =
+    useState<BabyLoveDrawingHandPoint | null>(null);
+  const [leftHandPoint, setLeftHandPoint] =
+    useState<BabyLoveDrawingHandPoint | null>(null);
+  const [hoverTarget, setHoverTarget] =
+    useState<BabyLoveDrawingHoverTarget>(null);
+  const [hoverProgress, setHoverProgress] = useState(0);
+  const [originalImageSrc, setOriginalImageSrc] = useState<string | null>(null);
+  const [magicImageSrc, setMagicImageSrc] = useState<string | null>(null);
+  const [savedRecord, setSavedRecord] = useState<BabyLoveDrawingRecord | null>(
+    null,
+  );
+  const [error, setError] = useState<string | null>(null);
+  const { latestCommand } = useMocapInput({ enabled: true });
+
+  const canUseMagic = phase === 'finished' || phase === 'magicReady';
+  const canSave = phase === 'finished' || phase === 'magicReady';
+
+  const actionButtons = useMemo(
+    () => [
+      {
+        id: 'finish' as const,
+        label: '完成',
+        icon: Check,
+        visible: phase === 'drawing',
+      },
+      {
+        id: 'magic' as const,
+        label: phase === 'magicPending' ? '魔法中' : '使用绘画魔法',
+        icon: Sparkles,
+        visible: phase === 'finished' || phase === 'magicReady' || phase === 'magicPending',
+      },
+      {
+        id: 'save' as const,
+        label: '保存',
+        icon: Save,
+        visible: canSave,
+      },
+      {
+        id: 'restart' as const,
+        label: '再画一张',
+        icon: RotateCcw,
+        visible: phase === 'saved',
+      },
+      {
+        id: 'back' as const,
+        label: '返回',
+        icon: ArrowLeft,
+        visible: phase === 'saved',
+      },
+    ],
+    [canSave, phase],
+  );
+
+  const updateRectMap = useCallback(() => {
+    const shell = shellRef.current;
+    if (!shell) {
+      return;
+    }
+
+    const shellRect = shell.getBoundingClientRect();
+    const toUnitBounds = (element: Element | null): BabyLoveDrawingBounds | null => {
+      if (!(element instanceof HTMLElement)) {
+        return null;
+      }
+
+      const rect = element.getBoundingClientRect();
+      return {
+        left: (rect.left - shellRect.left) / shellRect.width,
+        top: (rect.top - shellRect.top) / shellRect.height,
+        width: rect.width / shellRect.width,
+        height: rect.height / shellRect.height,
+      };
+    };
+    const colors: Record<string, BabyLoveDrawingBounds> = {};
+    BABY_LOVE_DRAWING_RAINBOW_COLORS.forEach((color) => {
+      const rect = toUnitBounds(
+        shell.querySelector(`[data-baby-drawing-color="${color.id}"]`),
+      );
+      if (rect) {
+        colors[color.id] = rect;
+      }
+    });
+
+    rectMapRef.current = {
+      canvas: toUnitBounds(shell.querySelector('[data-baby-drawing-canvas]')),
+      colors,
+      tools: {
+        brush: toUnitBounds(shell.querySelector('[data-baby-drawing-tool="brush"]')),
+        eraser: toUnitBounds(shell.querySelector('[data-baby-drawing-tool="eraser"]')),
+      },
+      buttons: {
+        finish: toUnitBounds(shell.querySelector('[data-baby-drawing-button="finish"]')),
+        magic: toUnitBounds(shell.querySelector('[data-baby-drawing-button="magic"]')),
+        save: toUnitBounds(shell.querySelector('[data-baby-drawing-button="save"]')),
+        restart: toUnitBounds(shell.querySelector('[data-baby-drawing-button="restart"]')),
+        back: toUnitBounds(shell.querySelector('[data-baby-drawing-button="back"]')),
+      },
+    };
+  }, []);
+
+  useEffect(() => {
+    updateRectMap();
+    window.addEventListener('resize', updateRectMap);
+    return () => window.removeEventListener('resize', updateRectMap);
+  }, [updateRectMap]);
+
+  useEffect(() => {
+    updateRectMap();
+  }, [actionButtons, phase, updateRectMap]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    const resizeCanvas = () => {
+      const rect = canvas.getBoundingClientRect();
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const nextWidth = Math.max(1, Math.floor(rect.width * dpr));
+      const nextHeight = Math.max(1, Math.floor(rect.height * dpr));
+      if (canvas.width === nextWidth && canvas.height === nextHeight) {
+        return;
+      }
+
+      const previousImage = canvas.toDataURL('image/png');
+      canvas.width = nextWidth;
+      canvas.height = nextHeight;
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return;
+      }
+      context.fillStyle = '#fffdf4';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      if (previousImage) {
+        const image = new Image();
+        image.onload = () => {
+          context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        };
+        image.src = previousImage;
+      }
+    };
+
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+    return () => window.removeEventListener('resize', resizeCanvas);
+  }, []);
+
+  const clearCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext('2d');
+    if (!canvas || !context) {
+      return;
+    }
+
+    context.globalCompositeOperation = 'source-over';
+    context.fillStyle = '#fffdf4';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }, []);
+
+  useEffect(() => {
+    clearCanvas();
+  }, [clearCanvas]);
+
+  const captureOriginalImage = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return null;
+    }
+
+    return canvas.toDataURL('image/png');
+  }, []);
+
+  const finishDrawing = useCallback(() => {
+    const imageSrc = captureOriginalImage();
+    if (!imageSrc) {
+      return;
+    }
+
+    activeStrokeRef.current = null;
+    setOriginalImageSrc(imageSrc);
+    setPhase('finished');
+    setError(null);
+  }, [captureOriginalImage]);
+
+  const restartDrawing = useCallback(() => {
+    activeStrokeRef.current = null;
+    hoverTargetRef.current = null;
+    hoverStartedAtRef.current = null;
+    hoverCompletedKeyRef.current = null;
+    setPhase('drawing');
+    setSelectedColor(BABY_LOVE_DRAWING_DEFAULT_COLOR);
+    setSelectedTool('brush');
+    setStrokes([]);
+    setOriginalImageSrc(null);
+    setMagicImageSrc(null);
+    setSavedRecord(null);
+    setError(null);
+    setHoverTarget(null);
+    setHoverProgress(0);
+    clearCanvas();
+  }, [clearCanvas]);
+
+  const saveCurrentDrawing = useCallback(() => {
+    const imageSrc = originalImageSrc ?? captureOriginalImage();
+    if (!imageSrc) {
+      return;
+    }
+
+    const response = saveBabyLoveDrawing({
+      originalImageSrc: imageSrc,
+      magicImageSrc,
+      strokeTrace: strokes,
+    });
+    setOriginalImageSrc(imageSrc);
+    setSavedRecord(response.record);
+    setPhase('saved');
+    setError(null);
+  }, [captureOriginalImage, magicImageSrc, originalImageSrc, strokes]);
+
+  const generateMagicImage = useCallback(async () => {
+    const imageSrc = originalImageSrc ?? captureOriginalImage();
+    if (!imageSrc || phase === 'magicPending') {
+      return;
+    }
+
+    setOriginalImageSrc(imageSrc);
+    setPhase('magicPending');
+    setError(null);
+    try {
+      const response = await createBabyLoveDrawingMagicImage({
+        originalImageSrc: imageSrc,
+        strokeTrace: strokes,
+      });
+      setMagicImageSrc(response.magicImageSrc);
+      setPhase('magicReady');
+    } catch (magicError) {
+      setError(
+        magicError instanceof Error
+          ? magicError.message
+          : '生成宝贝爱画魔法图片失败。',
+      );
+      setPhase('finished');
+    }
+  }, [captureOriginalImage, originalImageSrc, phase, strokes]);
+
+  const triggerButton = useCallback(
+    (buttonId: string) => {
+      if (buttonId === 'finish' && phase === 'drawing') {
+        finishDrawing();
+        return;
+      }
+
+      if (buttonId === 'magic' && canUseMagic) {
+        void generateMagicImage();
+        return;
+      }
+
+      if (buttonId === 'save' && canSave) {
+        saveCurrentDrawing();
+        return;
+      }
+
+      if (buttonId === 'restart' && phase === 'saved') {
+        restartDrawing();
+        return;
+      }
+
+      if (buttonId === 'back' && phase === 'saved') {
+        onBack?.();
+      }
+    },
+    [
+      canSave,
+      canUseMagic,
+      finishDrawing,
+      generateMagicImage,
+      onBack,
+      phase,
+      restartDrawing,
+      saveCurrentDrawing,
+    ],
+  );
+
+  const applyHoverTarget = useCallback(
+    (nextTarget: BabyLoveDrawingHoverTarget) => {
+      const currentTarget = hoverTargetRef.current;
+      const now = Date.now();
+      if (!sameHoverTarget(currentTarget, nextTarget)) {
+        hoverTargetRef.current = nextTarget;
+        hoverStartedAtRef.current = nextTarget ? now : null;
+        hoverCompletedKeyRef.current = null;
+        setHoverTarget(nextTarget);
+        setHoverProgress(0);
+        return;
+      }
+
+      const startedAt = hoverStartedAtRef.current;
+      const progress = resolveHoverProgress(nextTarget, startedAt, now);
+      setHoverProgress(progress);
+      if (!hasHoverCompleted(nextTarget, startedAt, now) || !nextTarget) {
+        return;
+      }
+
+      const completeKey = `${nextTarget.kind}:${nextTarget.id}`;
+      if (hoverCompletedKeyRef.current === completeKey) {
+        return;
+      }
+
+      hoverCompletedKeyRef.current = completeKey;
+      if (nextTarget.kind === 'color') {
+        const color = BABY_LOVE_DRAWING_RAINBOW_COLORS.find(
+          (item) => item.id === nextTarget.id,
+        );
+        if (color) {
+          setSelectedColor(color.value);
+          setSelectedTool('brush');
+        }
+        return;
+      }
+
+      triggerButton(nextTarget.id);
+    },
+    [triggerButton],
+  );
+
+  const updateToolFromRightHand = useCallback((point: BabyLoveDrawingHandPoint | null) => {
+    if (!point || point.state !== 'grab') {
+      previousToolGrabRef.current = null;
+      return;
+    }
+
+    const tool = findTargetInBounds(point, rectMapRef.current.tools);
+    if (!tool) {
+      previousToolGrabRef.current = null;
+      return;
+    }
+
+    if (previousToolGrabRef.current === tool) {
+      return;
+    }
+
+    previousToolGrabRef.current = tool;
+    setSelectedTool(tool);
+  }, []);
+
+  const drawWithRightHand = useCallback(
+    (point: BabyLoveDrawingHandPoint | null) => {
+      const canvasBounds = rectMapRef.current.canvas;
+      const canvas = canvasRef.current;
+      const context = canvas?.getContext('2d');
+      if (
+        phase !== 'drawing' ||
+        !point ||
+        point.state !== 'grab' ||
+        !canvasBounds ||
+        !canvas ||
+        !context ||
+        !isPointInsideBounds(point, canvasBounds)
+      ) {
+        activeStrokeRef.current = null;
+        return;
+      }
+
+      const nextPoint = toCanvasPoint(point, canvasBounds);
+      const activeStroke = activeStrokeRef.current;
+      if (!activeStroke) {
+        const stroke = createBabyDrawingStroke(
+          selectedTool,
+          selectedColor,
+          nextPoint,
+        );
+        activeStrokeRef.current = {
+          stroke,
+          lastPoint: nextPoint,
+        };
+        setStrokes((current) => [...current, stroke]);
+        return;
+      }
+
+      const nextStroke = appendPointToStroke(activeStroke.stroke, nextPoint);
+      drawStrokeSegment(
+        context,
+        nextStroke,
+        activeStroke.lastPoint,
+        nextPoint,
+        canvas.width,
+        canvas.height,
+      );
+      activeStrokeRef.current = {
+        stroke: nextStroke,
+        lastPoint: nextPoint,
+      };
+      setStrokes((current) =>
+        current.map((stroke) =>
+          stroke.strokeId === nextStroke.strokeId ? nextStroke : stroke,
+        ),
+      );
+    },
+    [phase, selectedColor, selectedTool],
+  );
+
+  const updateInteraction = useCallback(
+    (
+      nextLeftHand: BabyLoveDrawingHandPoint | null,
+      nextRightHand: BabyLoveDrawingHandPoint | null,
+    ) => {
+      const now = Date.now();
+      const previousLeftHand = visibleLeftHandRef.current;
+      const previousRightHand = visibleRightHandRef.current;
+      const acceptedRightHand = canAcceptRightHandPoint(
+        previousRightHand,
+        nextRightHand,
+      )
+        ? nextRightHand
+        : null;
+      const visibleLeftHand = nextLeftHand
+        ? smoothHandPoint(previousLeftHand, nextLeftHand)
+        : previousLeftHand &&
+            leftHandSeenAtRef.current !== null &&
+            now - leftHandSeenAtRef.current <=
+              BABY_LOVE_DRAWING_HAND_LOSS_GRACE_MS
+          ? previousLeftHand
+          : null;
+      const visibleRightHand = acceptedRightHand
+        ? smoothHandPoint(previousRightHand, acceptedRightHand)
+        : previousRightHand &&
+            rightHandSeenAtRef.current !== null &&
+            now - rightHandSeenAtRef.current <=
+              BABY_LOVE_DRAWING_HAND_LOSS_GRACE_MS
+          ? previousRightHand
+          : null;
+      const activeRightHand = acceptedRightHand ? visibleRightHand : null;
+
+      if (nextLeftHand) {
+        leftHandSeenAtRef.current = now;
+      }
+      if (acceptedRightHand) {
+        rightHandSeenAtRef.current = now;
+      }
+
+      visibleLeftHandRef.current = visibleLeftHand;
+      visibleRightHandRef.current = visibleRightHand;
+      setLeftHandPoint(visibleLeftHand);
+      setRightHandPoint(visibleRightHand);
+      updateToolFromRightHand(activeRightHand);
+      drawWithRightHand(activeRightHand);
+
+      const colorId = findTargetInBounds(
+        visibleLeftHand,
+        rectMapRef.current.colors,
+      );
+      const buttonId =
+        findTargetInBounds(visibleLeftHand, rectMapRef.current.buttons) ??
+        findTargetInBounds(visibleRightHand, rectMapRef.current.buttons);
+      const nextHoverTarget: BabyLoveDrawingHoverTarget = colorId
+        ? { kind: 'color', id: colorId }
+        : buttonId
+          ? { kind: 'button', id: buttonId }
+          : null;
+      applyHoverTarget(nextHoverTarget);
+    },
+    [applyHoverTarget, drawWithRightHand, updateToolFromRightHand],
+  );
+
+  useEffect(() => {
+    if (!latestCommand) {
+      return;
+    }
+
+    updateInteraction(
+      commandToPlayerLeftHand(latestCommand),
+      commandToPlayerRightHand(latestCommand),
+    );
+  }, [latestCommand, updateInteraction]);
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {
+    const point = pointFromPointer(event, event.currentTarget);
+    if (event.button === 2) {
+      updateInteraction(leftHandPoint, { ...point, state: 'grab' as const });
+      return;
+    }
+
+    updateInteraction({ ...point, state: 'open_palm' as const }, null);
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {
+    const point = pointFromPointer(event, event.currentTarget);
+    const nextState: BabyLoveDrawingHandPoint['state'] = event.buttons
+      ? 'grab'
+      : 'open_palm';
+    const nextPoint: BabyLoveDrawingHandPoint = {
+      ...point,
+      state: nextState,
+    };
+    if (event.buttons === 2) {
+      updateInteraction(leftHandPoint, nextPoint);
+      return;
+    }
+    updateInteraction(nextPoint, null);
+  };
+
+  const handlePointerUp = (event: ReactPointerEvent<HTMLElement>) => {
+    const point = pointFromPointer(event, event.currentTarget);
+    if (event.button === 2) {
+      updateInteraction(leftHandPoint, { ...point, state: 'open_palm' as const });
+      return;
+    }
+
+    updateInteraction({ ...point, state: 'open_palm' as const }, null);
+  };
+
+  return (
+    <main
+      ref={shellRef}
+      className="baby-love-drawing-runtime"
+      data-testid="baby-love-drawing-runtime"
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      <button
+        type="button"
+        className="baby-love-drawing-runtime__back"
+        onClick={onBack}
+        aria-label="返回"
+        title="返回"
+      >
+        <ArrowLeft className="h-5 w-5" />
+      </button>
+
+      <div className="baby-love-drawing-runtime__colors" aria-label="颜色">
+        {BABY_LOVE_DRAWING_RAINBOW_COLORS.map((color) => (
+          <button
+            key={color.id}
+            type="button"
+            data-baby-drawing-color={color.id}
+            className={`baby-love-drawing-runtime__color${
+              selectedColor === color.value
+                ? ' baby-love-drawing-runtime__color--active'
+                : ''
+            }`}
+            style={{ '--baby-drawing-color': color.value } as CSSProperties}
+            aria-label={color.label}
+            title={color.label}
+          />
+        ))}
+      </div>
+
+      <section className="baby-love-drawing-runtime__board">
+        <canvas
+          ref={canvasRef}
+          data-baby-drawing-canvas
+          className="baby-love-drawing-runtime__canvas"
+          aria-label="画板"
+        />
+        {magicImageSrc && phase !== 'drawing' ? (
+          <img
+            src={magicImageSrc}
+            alt="绘画魔法结果"
+            className="baby-love-drawing-runtime__magic-image"
+          />
+        ) : null}
+        {phase === 'magicPending' ? (
+          <div className="baby-love-drawing-runtime__magic-pending">
+            <Sparkles className="h-7 w-7" />
+            绘画魔法
+          </div>
+        ) : null}
+      </section>
+
+      <div className="baby-love-drawing-runtime__tools" aria-label="工具">
+        <button
+          type="button"
+          data-baby-drawing-tool="brush"
+          className={`baby-love-drawing-runtime__tool${
+            selectedTool === 'brush'
+              ? ' baby-love-drawing-runtime__tool--active'
+              : ''
+          }`}
+          aria-label="画笔"
+          title="画笔"
+        >
+          <Brush className="h-7 w-7" />
+        </button>
+        <button
+          type="button"
+          data-baby-drawing-tool="eraser"
+          className={`baby-love-drawing-runtime__tool${
+            selectedTool === 'eraser'
+              ? ' baby-love-drawing-runtime__tool--active'
+              : ''
+          }`}
+          aria-label="橡皮"
+          title="橡皮"
+        >
+          <Eraser className="h-7 w-7" />
+        </button>
+      </div>
+
+      <div className="baby-love-drawing-runtime__actions">
+        {actionButtons
+          .filter((button) => button.visible)
+          .map((button) => {
+            const Icon = button.icon;
+            const isHovering =
+              hoverTarget?.kind === 'button' && hoverTarget.id === button.id;
+            return (
+              <button
+                key={button.id}
+                type="button"
+                data-baby-drawing-button={button.id}
+                className="baby-love-drawing-runtime__action"
+                disabled={button.id === 'magic' && phase === 'magicPending'}
+                onClick={() => triggerButton(button.id)}
+              >
+                <Icon className="h-4 w-4" />
+                <span>{button.label}</span>
+                {isHovering ? (
+                  <span
+                    className="baby-love-drawing-runtime__action-progress"
+                    style={
+                      {
+                        '--baby-drawing-hover-progress': `${hoverProgress * 100}%`,
+                      } as CSSProperties
+                    }
+                  />
+                ) : null}
+              </button>
+            );
+          })}
+      </div>
+
+      {error ? (
+        <div className="baby-love-drawing-runtime__error">{error}</div>
+      ) : null}
+
+      {savedRecord ? (
+        <div className="baby-love-drawing-runtime__saved" role="status">
+          <ImagePlus className="h-5 w-5" />
+          已保存
+        </div>
+      ) : null}
+
+      {leftHandPoint ? (
+        <div
+          className="baby-love-drawing-runtime__left-hand-indicator"
+          aria-hidden="true"
+          style={
+            {
+              left: `${leftHandPoint.x * 100}%`,
+              top: `${leftHandPoint.y * 100}%`,
+            } as CSSProperties
+          }
+        >
+          <span />
+        </div>
+      ) : null}
+
+      <div
+        className={`baby-love-drawing-runtime__cursor baby-love-drawing-runtime__cursor--${selectedTool}`}
+        style={
+          {
+            left: `${(rightHandPoint?.x ?? 0.5) * 100}%`,
+            top: `${(rightHandPoint?.y ?? 0.5) * 100}%`,
+            '--baby-drawing-color': selectedColor,
+          } as CSSProperties
+        }
+      >
+        {selectedTool === 'brush' ? (
+          <Brush className="h-5 w-5" />
+        ) : (
+          <Eraser className="h-5 w-5" />
+        )}
+      </div>
+    </main>
+  );
+}
+
+export default BabyLoveDrawingRuntimeShell;

src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.test.tsx

@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import { expect, test, vi } from 'vitest';
 
 import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
@@ -17,11 +17,21 @@ vi.mock('../ResolvedAssetImage', () => ({
     src,
     alt,
     className,
+    'data-testid': dataTestId,
   }: {
     src?: string | null;
     alt?: string;
     className?: string;
-  }) => (src ? <img src={src} alt={alt} className={className} /> : null),
+    'data-testid'?: string;
+  }) =>
+    src ? (
+      <img
+        src={src}
+        alt={alt}
+        className={className}
+        data-testid={dataTestId}
+      />
+    ) : null,
 }));
 
 vi.mock('../../services/useMocapInput', () => ({
@@ -60,6 +70,7 @@ function createDraft(): BabyObjectMatchDraft {
         prompt: '香蕉',
       },
     ],
+    visualPackage: null,
     themeTags: [BABY_OBJECT_MATCH_EDUTAINMENT_TAG, '宝贝识物'],
     publicationStatus: 'published',
     createdAt: '2026-05-11T00:00:00.000Z',
@@ -68,6 +79,57 @@ function createDraft(): BabyObjectMatchDraft {
   };
 }
 
+function createVisualPackageDraft(): BabyObjectMatchDraft {
+  return {
+    ...createDraft(),
+    visualPackage: {
+      themePrompt: '果园主题',
+      assets: [
+        {
+          assetId: 'baby-object-visual-background',
+          assetKind: 'background',
+          imageSrc: 'data:image/png;base64,background',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: '背景',
+        },
+        {
+          assetId: 'baby-object-visual-ui-frame',
+          assetKind: 'ui-frame',
+          imageSrc: 'data:image/png;base64,ui',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: 'UI',
+        },
+        {
+          assetId: 'baby-object-visual-gift-box',
+          assetKind: 'gift-box',
+          imageSrc: 'data:image/png;base64,gift',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: '礼盒',
+        },
+        {
+          assetId: 'baby-object-visual-basket',
+          assetKind: 'basket',
+          imageSrc: 'data:image/png;base64,basket',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: '篮子',
+        },
+        {
+          assetId: 'baby-object-visual-smoke-puff',
+          assetKind: 'smoke-puff',
+          imageSrc: 'data:image/png;base64,smoke',
+          assetObjectId: null,
+          generationProvider: 'vector-engine-gpt-image-2',
+          prompt: '烟雾',
+        },
+      ],
+    },
+  };
+}
+
 function createMocapInput(
   overrides: Partial<UseMocapInputResult> = {},
 ): UseMocapInputResult {
@@ -146,7 +208,26 @@ function dragHand(stage: HTMLElement, button: 0 | 2) {
   });
 }
 
-test('opens the gift box with F and shows the next item', () => {
+async function advanceRoundIntro() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(620);
+  });
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(640);
+  });
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(620);
+  });
+}
+
+async function advanceFeedback() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(1200);
+  });
+}
+
+test('shows the first gift item after gift and item animations', async () => {
+  vi.useFakeTimers();
   render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
@@ -154,23 +235,92 @@ test('opens the gift box with F and shows the next item', () => {
     />,
   );
 
-  expect(
-    within(screen.getByTestId('baby-object-current-item')).queryByAltText(
-      '苹果',
-    ),
-  ).toBeNull();
-
-  fireEvent.keyDown(window, { key: 'f', code: 'KeyF' });
-
   expect(screen.getByText('将物品放入对应的篮子里')).toBeTruthy();
+  expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
+
+  await advanceRoundIntro();
+
   expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '苹果',
-    ),
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
   ).toBeTruthy();
+  vi.useRealTimers();
 });
 
-test('keeps left and right baskets fixed while only the gift item is random', () => {
+test('applies generated visual package to stage, gift box, baskets, smoke and hud', async () => {
+  vi.useFakeTimers();
+  const { container } = render(
+    <BabyObjectMatchRuntimeShell draft={createVisualPackageDraft()} />,
+  );
+  const stage = container.querySelector('.baby-object-runtime__stage');
+  if (!(stage instanceof HTMLElement)) {
+    throw new Error('Missing baby object runtime stage');
+  }
+
+  expect(stage.classList.contains('baby-object-runtime__stage--skinned')).toBe(
+    true,
+  );
+  expect(
+    screen
+      .getByTestId('baby-object-background-image')
+      .getAttribute('src'),
+  ).toBe('data:image/png;base64,background');
+  expect(
+    stage.style.getPropertyValue('--baby-object-ui-frame-image'),
+  ).toContain('ui');
+  expect(stage.style.getPropertyValue('--baby-object-smoke-image')).toContain(
+    'smoke',
+  );
+  expect(screen.getByAltText('礼物盒')).toBeTruthy();
+  expect(
+    container.querySelector('.baby-object-runtime__basket-shell-image'),
+  ).toBeTruthy();
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(620);
+  });
+
+  expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
+  vi.useRealTimers();
+});
+
+test('removes the gift box after smoke releases the current item', async () => {
+  vi.useFakeTimers();
+  render(
+    <BabyObjectMatchRuntimeShell
+      draft={createVisualPackageDraft()}
+      random={createRandomSequence([0])}
+    />,
+  );
+
+  expect(screen.getByLabelText('礼物盒')).toBeTruthy();
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(620);
+  });
+
+  expect(screen.getByLabelText('礼物盒')).toBeTruthy();
+  expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(640);
+  });
+
+  expect(screen.queryByLabelText('礼物盒')).toBeNull();
+  expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(620);
+  });
+
+  expect(screen.queryByLabelText('礼物盒')).toBeNull();
+  expect(
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
+  ).toBeTruthy();
+  vi.useRealTimers();
+});
+
+test('keeps left and right baskets fixed while only the gift item is random', async () => {
+  vi.useFakeTimers();
   render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
@@ -178,109 +328,28 @@ test('keeps left and right baskets fixed while only the gift item is random', ()
     />,
   );
 
-  fireEvent.keyDown(window, { key: 'f', code: 'KeyF' });
+  await advanceRoundIntro();
 
   expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '香蕉',
-    ),
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('香蕉'),
   ).toBeTruthy();
   expect(screen.getByLabelText('左侧篮子 苹果')).toBeTruthy();
   expect(screen.getByLabelText('右侧篮子 香蕉')).toBeTruthy();
+  vi.useRealTimers();
 });
 
-test('mocap open palm followed by grab opens the gift box', () => {
-  const { rerender } = render(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={createRandomSequence([0, 0])}
-      mocapInput={createMocapInput()}
-    />,
-  );
-
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={createRandomSequence([0, 0])}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'open-left', receivedAtMs: 1 },
-      })}
-    />,
-  );
-
-  expect(
-    within(screen.getByTestId('baby-object-current-item')).queryByAltText(
-      '苹果',
-    ),
-  ).toBeNull();
-
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={createRandomSequence([0, 0])}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'grab', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'grab-left', receivedAtMs: 2 },
-      })}
-    />,
-  );
-
-  expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '苹果',
-    ),
-  ).toBeTruthy();
-});
-
-test('mocap camera-right hand movement sends the player left hand item into the left basket', () => {
+test('mocap camera-right hand movement sends the player left hand item into the left basket', async () => {
   vi.useFakeTimers();
   const random = createRandomSequence([0, 0]);
   const { rerender } = render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
       random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'right' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'right' },
-          leftHand: null,
-          rightHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'right' },
-        },
-        rawPacketPreview: { text: 'open-camera-right', receivedAtMs: 1 },
-      })}
+      mocapInput={createMocapInput()}
     />,
   );
 
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'grab', side: 'right' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'grab', side: 'right' },
-          leftHand: null,
-          rightHand: { x: 0.5, y: 0.5, state: 'grab', side: 'right' },
-        },
-        rawPacketPreview: { text: 'grab-camera-right', receivedAtMs: 2 },
-      })}
-    />,
-  );
+  await advanceRoundIntro();
 
   rerender(
     <BabyObjectMatchRuntimeShell
@@ -294,7 +363,10 @@ test('mocap camera-right hand movement sends the player left hand item into the
           leftHand: null,
           rightHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
         },
-        rawPacketPreview: { text: 'camera-right-horizontal-1', receivedAtMs: 3 },
+        rawPacketPreview: {
+          text: 'camera-right-horizontal-1',
+          receivedAtMs: 1,
+        },
       })}
     />,
   );
@@ -311,7 +383,10 @@ test('mocap camera-right hand movement sends the player left hand item into the
           leftHand: null,
           rightHand: { x: 0.24, y: 0.45, state: 'open_palm', side: 'right' },
         },
-        rawPacketPreview: { text: 'camera-right-horizontal-2', receivedAtMs: 4 },
+        rawPacketPreview: {
+          text: 'camera-right-horizontal-2',
+          receivedAtMs: 2,
+        },
       })}
     />,
   );
@@ -328,7 +403,10 @@ test('mocap camera-right hand movement sends the player left hand item into the
           leftHand: null,
           rightHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
         },
-        rawPacketPreview: { text: 'camera-right-horizontal-3', receivedAtMs: 5 },
+        rawPacketPreview: {
+          text: 'camera-right-horizontal-3',
+          receivedAtMs: 3,
+        },
       })}
     />,
   );
@@ -347,7 +425,10 @@ test('mocap camera-right hand movement sends the player left hand item into the
           leftHand: null,
           rightHand: { x: 0.31, y: 0.45, state: 'open_palm', side: 'right' },
         },
-        rawPacketPreview: { text: 'camera-right-horizontal-4', receivedAtMs: 6 },
+        rawPacketPreview: {
+          text: 'camera-right-horizontal-4',
+          receivedAtMs: 4,
+        },
       })}
     />,
   );
@@ -357,42 +438,18 @@ test('mocap camera-right hand movement sends the player left hand item into the
   vi.useRealTimers();
 });
 
-test('mocap camera-left hand movement sends the player right hand item into the right basket', () => {
+test('mocap camera-left hand movement sends the player right hand item into the right basket', async () => {
   vi.useFakeTimers();
   const random = createRandomSequence([0, 0]);
   const { rerender } = render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
       random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'open-camera-left', receivedAtMs: 1 },
-      })}
+      mocapInput={createMocapInput()}
     />,
   );
 
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'grab', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'grab-camera-left', receivedAtMs: 2 },
-      })}
-    />,
-  );
+  await advanceRoundIntro();
 
   rerender(
     <BabyObjectMatchRuntimeShell
@@ -406,7 +463,7 @@ test('mocap camera-left hand movement sends the player right hand item into the
           leftHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
           rightHand: null,
         },
-        rawPacketPreview: { text: 'camera-left-horizontal-1', receivedAtMs: 3 },
+        rawPacketPreview: { text: 'camera-left-horizontal-1', receivedAtMs: 1 },
       })}
     />,
   );
@@ -423,7 +480,7 @@ test('mocap camera-left hand movement sends the player right hand item into the
           leftHand: { x: 0.8, y: 0.45, state: 'open_palm', side: 'left' },
           rightHand: null,
         },
-        rawPacketPreview: { text: 'camera-left-horizontal-2', receivedAtMs: 4 },
+        rawPacketPreview: { text: 'camera-left-horizontal-2', receivedAtMs: 2 },
       })}
     />,
   );
@@ -440,7 +497,7 @@ test('mocap camera-left hand movement sends the player right hand item into the
           leftHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
           rightHand: null,
         },
-        rawPacketPreview: { text: 'camera-left-horizontal-3', receivedAtMs: 5 },
+        rawPacketPreview: { text: 'camera-left-horizontal-3', receivedAtMs: 3 },
       })}
     />,
   );
@@ -459,7 +516,7 @@ test('mocap camera-left hand movement sends the player right hand item into the
           leftHand: { x: 0.73, y: 0.45, state: 'open_palm', side: 'left' },
           rightHand: null,
         },
-        rawPacketPreview: { text: 'camera-left-horizontal-4', receivedAtMs: 6 },
+        rawPacketPreview: { text: 'camera-left-horizontal-4', receivedAtMs: 4 },
       })}
     />,
   );
@@ -469,41 +526,18 @@ test('mocap camera-left hand movement sends the player right hand item into the
   vi.useRealTimers();
 });
 
-test('mocap action names do not select a basket without horizontal hand movement', () => {
+test('mocap action names do not select a basket without horizontal hand movement', async () => {
+  vi.useFakeTimers();
   const random = createRandomSequence([0, 0]);
   const { rerender } = render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
       random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'open-left', receivedAtMs: 1 },
-      })}
+      mocapInput={createMocapInput()}
     />,
   );
 
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'grab', side: 'left' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          leftHand: { x: 0.5, y: 0.5, state: 'grab', side: 'left' },
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'grab-left', receivedAtMs: 2 },
-      })}
-    />,
-  );
+  await advanceRoundIntro();
 
   rerender(
     <BabyObjectMatchRuntimeShell
@@ -517,7 +551,7 @@ test('mocap action names do not select a basket without horizontal hand movement
           leftHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
           rightHand: null,
         },
-        rawPacketPreview: { text: 'action-only-wave', receivedAtMs: 3 },
+        rawPacketPreview: { text: 'action-only-wave', receivedAtMs: 1 },
       })}
     />,
   );
@@ -525,47 +559,23 @@ test('mocap action names do not select a basket without horizontal hand movement
   expect(screen.queryByText('真棒')).toBeNull();
   expect(screen.queryByText('再想一想吧')).toBeNull();
   expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '苹果',
-    ),
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
   ).toBeTruthy();
+  vi.useRealTimers();
 });
 
-test('mocap unknown hand horizontal movement does not select a basket', () => {
+test('mocap unknown hand horizontal movement does not select a basket', async () => {
+  vi.useFakeTimers();
   const random = createRandomSequence([0, 0]);
   const { rerender } = render(
     <BabyObjectMatchRuntimeShell
       draft={createDraft()}
       random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'unknown' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'unknown' },
-          leftHand: null,
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'open-unknown', receivedAtMs: 1 },
-      })}
+      mocapInput={createMocapInput()}
     />,
   );
 
-  rerender(
-    <BabyObjectMatchRuntimeShell
-      draft={createDraft()}
-      random={random}
-      mocapInput={createMocapInput({
-        latestCommand: {
-          actions: [],
-          hands: [{ x: 0.5, y: 0.5, state: 'grab', side: 'unknown' }],
-          primaryHand: { x: 0.5, y: 0.5, state: 'grab', side: 'unknown' },
-          leftHand: null,
-          rightHand: null,
-        },
-        rawPacketPreview: { text: 'grab-unknown', receivedAtMs: 2 },
-      })}
-    />,
-  );
+  await advanceRoundIntro();
 
   for (let index = 0; index < 4; index += 1) {
     const x = [0.22, 0.24, 0.22, 0.31][index] ?? 0.22;
@@ -583,7 +593,7 @@ test('mocap unknown hand horizontal movement does not select a basket', () => {
           },
           rawPacketPreview: {
             text: `unknown-horizontal-${index + 1}`,
-            receivedAtMs: index + 3,
+            receivedAtMs: index + 1,
           },
         })}
       />,
@@ -593,13 +603,12 @@ test('mocap unknown hand horizontal movement does not select a basket', () => {
   expect(screen.queryByText('真棒')).toBeNull();
   expect(screen.queryByText('再想一想吧')).toBeNull();
   expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '苹果',
-    ),
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
   ).toBeTruthy();
+  vi.useRealTimers();
 });
 
-test('left hand horizontal drag sends a correct item into the left basket', () => {
+test('left hand horizontal drag sends a correct item into the left basket', async () => {
   vi.useFakeTimers();
   const { container } = render(
     <BabyObjectMatchRuntimeShell
@@ -612,26 +621,30 @@ test('left hand horizontal drag sends a correct item into the left basket', () =
     throw new Error('Missing baby object runtime stage');
   }
 
-  fireEvent.keyDown(window, { key: 'f', code: 'KeyF' });
+  await advanceRoundIntro();
   dragHand(stage, 0);
 
   expect(screen.getByText('真棒')).toBeTruthy();
   expect(screen.getByLabelText('成功次数').textContent).toBe('1/20');
+  expect(screen.getByLabelText('左侧篮子 苹果').className).toContain(
+    'baby-object-runtime__basket--correct',
+  );
 
-  act(() => {
-    vi.advanceTimersByTime(800);
-  });
+  await advanceFeedback();
 
   expect(screen.queryByText('真棒')).toBeNull();
+  expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
+  expect(screen.getByLabelText('礼物盒')).toBeTruthy();
+
+  await advanceRoundIntro();
+
   expect(
-    within(screen.getByTestId('baby-object-current-item')).queryByAltText(
-      '苹果',
-    ),
-  ).toBeNull();
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
+  ).toBeTruthy();
   vi.useRealTimers();
 });
 
-test('wrong basket keeps the item active after feedback', () => {
+test('ignores drag input until the item animation finishes', async () => {
   vi.useFakeTimers();
   const { container } = render(
     <BabyObjectMatchRuntimeShell
@@ -644,26 +657,86 @@ test('wrong basket keeps the item active after feedback', () => {
     throw new Error('Missing baby object runtime stage');
   }
 
-  fireEvent.keyDown(window, { key: 'f', code: 'KeyF' });
+  dragHand(stage, 0);
+
+  expect(screen.queryByText('真棒')).toBeNull();
+  expect(screen.getByLabelText('成功次数').textContent).toBe('0/20');
+
+  await advanceRoundIntro();
+  dragHand(stage, 0);
+
+  expect(screen.getByText('真棒')).toBeTruthy();
+  expect(screen.getByLabelText('成功次数').textContent).toBe('1/20');
+  vi.useRealTimers();
+});
+
+test('correct placement automatically shows the next gift item', async () => {
+  vi.useFakeTimers();
+  const { container } = render(
+    <BabyObjectMatchRuntimeShell
+      draft={createDraft()}
+      random={createRandomSequence([0, 0.99])}
+    />,
+  );
+  const stage = container.querySelector('.baby-object-runtime__stage');
+  if (!(stage instanceof HTMLElement)) {
+    throw new Error('Missing baby object runtime stage');
+  }
+
+  expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
+
+  await advanceRoundIntro();
+
+  expect(
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
+  ).toBeTruthy();
+
+  dragHand(stage, 0);
+
+  expect(screen.getByText('真棒')).toBeTruthy();
+
+  await advanceFeedback();
+
+  expect(screen.queryByText('真棒')).toBeNull();
+  expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
+
+  await advanceRoundIntro();
+
+  expect(
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('香蕉'),
+  ).toBeTruthy();
+  vi.useRealTimers();
+});
+
+test('wrong basket keeps the item active after feedback', async () => {
+  vi.useFakeTimers();
+  const { container } = render(
+    <BabyObjectMatchRuntimeShell
+      draft={createDraft()}
+      random={createRandomSequence([0, 0])}
+    />,
+  );
+  const stage = container.querySelector('.baby-object-runtime__stage');
+  if (!(stage instanceof HTMLElement)) {
+    throw new Error('Missing baby object runtime stage');
+  }
+
+  await advanceRoundIntro();
   dragHand(stage, 2);
 
   expect(screen.getByText('再想一想吧')).toBeTruthy();
   expect(screen.getByLabelText('成功次数').textContent).toBe('0/20');
 
-  act(() => {
-    vi.advanceTimersByTime(800);
-  });
+  await advanceFeedback();
 
   expect(screen.queryByText('再想一想吧')).toBeNull();
   expect(
-    within(screen.getByTestId('baby-object-current-item')).getByAltText(
-      '苹果',
-    ),
+    within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
   ).toBeTruthy();
   vi.useRealTimers();
 });
 
-test('twenty correct placements completes the level', () => {
+test('twenty correct placements completes the level', async () => {
   vi.useFakeTimers();
   const randomValues = Array.from({ length: 40 }, () => 0);
   const { container } = render(
@@ -678,11 +751,9 @@ test('twenty correct placements completes the level', () => {
   }
 
   for (let index = 0; index < 20; index += 1) {
-    fireEvent.keyDown(window, { key: 'f', code: 'KeyF' });
+    await advanceRoundIntro();
     dragHand(stage, 0);
-    act(() => {
-      vi.advanceTimersByTime(800);
-    });
+    await advanceFeedback();
   }
 
   expect(screen.getAllByText('恭喜你！小朋友！').length).toBeGreaterThan(0);

src/components/edutainment-runtime/BabyObjectMatchRuntimeShell.tsx

@@ -6,6 +6,7 @@ import {
   SkipForward,
 } from 'lucide-react';
 import {
+  type CSSProperties,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
@@ -16,6 +17,8 @@ import {
 import type {
   BabyObjectMatchDraft,
   BabyObjectMatchItemAsset,
+  BabyObjectMatchVisualAsset,
+  BabyObjectMatchVisualAssetKind,
 } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
 import type {
   MocapHandInput,
@@ -26,7 +29,10 @@ import { useMocapInput } from '../../services/useMocapInput';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 
 const BABY_OBJECT_MATCH_SUCCESS_TARGET = 20;
-const BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS = 760;
+const BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS = 620;
+const BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS = 640;
+const BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS = 620;
+const BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS = 1180;
 const BABY_OBJECT_MATCH_MIN_HORIZONTAL_MOVE_DISTANCE = 0.05;
 const BABY_OBJECT_MATCH_HAND_PATH_LIMIT = 16;
 
@@ -41,7 +47,14 @@ type BabyObjectMatchRuntimeShellProps = {
 };
 
 type BasketSide = 'left' | 'right';
-type RuntimePhase = 'waiting' | 'active' | 'correct' | 'wrong' | 'complete';
+type RuntimePhase =
+  | 'gift-entering'
+  | 'gift-opening'
+  | 'item-appearing'
+  | 'active'
+  | 'correct'
+  | 'wrong'
+  | 'complete';
 
 type RuntimeRound = {
   item: BabyObjectMatchItemAsset;
@@ -65,23 +78,16 @@ type RuntimeMocapHandPaths = {
 };
 
 type BabyObjectMatchRandom = () => number;
-
-const OPEN_PALM_ACTIONS = [
-  'open_palm',
-  'open_palm_up',
-  'open',
-  'palm',
-  'hand_open',
-];
-
-const GRAB_ACTIONS = [
-  'grab',
-  'grabbing',
-  'close',
-  'fist',
-  'closed_fist',
-  'closed',
-];
+type BabyObjectMatchStageStyle = CSSProperties &
+  Partial<
+    Record<
+      | '--baby-object-ui-frame-image'
+      | '--baby-object-gift-box-image'
+      | '--baby-object-basket-image'
+      | '--baby-object-smoke-image',
+      string
+    >
+  >;
 
 function pickRandomIndex(length: number, random: BabyObjectMatchRandom) {
   if (length <= 1) {
@@ -114,10 +120,6 @@ function isHorizontalDrag(dragState: DragState) {
   );
 }
 
-function hasMocapAction(command: MocapInputCommand, actions: string[]) {
-  return command.actions.some((action) => actions.includes(action));
-}
-
 function mocapHandToRuntimePoint(
   hand: MocapHandInput | null | undefined,
 ): RuntimeHandPoint | null {
@@ -165,26 +167,6 @@ function resolveMocapHandPaths(
   } satisfies RuntimeMocapHandPaths;
 }
 
-function hasOpenPalmMocapHand(command: MocapInputCommand) {
-  return (
-    hasMocapAction(command, OPEN_PALM_ACTIONS) ||
-    Boolean(command.hands?.some((hand) => hand.state === 'open_palm')) ||
-    command.leftHand?.state === 'open_palm' ||
-    command.rightHand?.state === 'open_palm' ||
-    command.primaryHand?.state === 'open_palm'
-  );
-}
-
-function hasGrabMocapHand(command: MocapInputCommand) {
-  return (
-    hasMocapAction(command, GRAB_ACTIONS) ||
-    Boolean(command.hands?.some((hand) => hand.state === 'grab')) ||
-    command.leftHand?.state === 'grab' ||
-    command.rightHand?.state === 'grab' ||
-    command.primaryHand?.state === 'grab'
-  );
-}
-
 function resolveMocapHorizontalMoveSide(
   paths: RuntimeMocapHandPaths,
 ): BasketSide | null {
@@ -208,6 +190,20 @@ function buildMocapPacketKey(
     : JSON.stringify(command);
 }
 
+function findVisualAsset(
+  draft: BabyObjectMatchDraft,
+  kind: BabyObjectMatchVisualAssetKind,
+): BabyObjectMatchVisualAsset | null {
+  return (
+    draft.visualPackage?.assets.find((asset) => asset.assetKind === kind) ??
+    null
+  );
+}
+
+function buildCssImageValue(src: string) {
+  return `url("${src.replace(/"/gu, '\\"')}")`;
+}
+
 export function BabyObjectMatchRuntimeShell({
   draft,
   embedded = false,
@@ -217,33 +213,92 @@ export function BabyObjectMatchRuntimeShell({
   onBack,
   onNextLevel,
 }: BabyObjectMatchRuntimeShellProps) {
-  const randomRef = useRef<BabyObjectMatchRandom>(random ?? (() => Math.random()));
+  const randomRef = useRef<BabyObjectMatchRandom>(
+    random ?? (() => Math.random()),
+  );
+  const introTimerRef = useRef<number | null>(null);
   const feedbackTimerRef = useRef<number | null>(null);
   const dragStateRef = useRef<DragState | null>(null);
   const handledMocapPacketKeyRef = useRef<string | null>(null);
-  const hasOpenPalmBeforeGrabRef = useRef(false);
+  const latestMocapPacketKeyRef = useRef<string | null>(null);
   const mocapHandPathsRef = useRef<RuntimeMocapHandPaths>({
     left: [],
     right: [],
   });
-  const [phase, setPhase] = useState<RuntimePhase>('waiting');
+  const [phase, setPhase] = useState<RuntimePhase>('gift-entering');
   const [successCount, setSuccessCount] = useState(0);
-  const [round, setRound] = useState<RuntimeRound | null>(null);
+  const [round, setRound] = useState<RuntimeRound | null>(() =>
+    buildRuntimeRound(draft, randomRef.current),
+  );
   const [feedbackText, setFeedbackText] = useState<string | null>(null);
   const [lastTargetSide, setLastTargetSide] = useState<BasketSide | null>(null);
   const liveMocapInput = useMocapInput({
     enabled: enableMocapInput && !mocapInput,
   });
   const resolvedMocapInput = mocapInput ?? liveMocapInput;
+  const backgroundAsset = findVisualAsset(draft, 'background');
+  const uiFrameAsset = findVisualAsset(draft, 'ui-frame');
+  const giftBoxAsset = findVisualAsset(draft, 'gift-box');
+  const basketAsset = findVisualAsset(draft, 'basket');
+  const smokeAsset = findVisualAsset(draft, 'smoke-puff');
+  const stageStyle: BabyObjectMatchStageStyle = {
+    ...(uiFrameAsset
+      ? {
+          '--baby-object-ui-frame-image': buildCssImageValue(
+            uiFrameAsset.imageSrc,
+          ),
+        }
+      : {}),
+    ...(giftBoxAsset
+      ? {
+          '--baby-object-gift-box-image': buildCssImageValue(
+            giftBoxAsset.imageSrc,
+          ),
+        }
+      : {}),
+    ...(basketAsset
+      ? {
+          '--baby-object-basket-image': buildCssImageValue(
+            basketAsset.imageSrc,
+          ),
+        }
+      : {}),
+    ...(smokeAsset
+      ? {
+          '--baby-object-smoke-image': buildCssImageValue(
+            smokeAsset.imageSrc,
+          ),
+        }
+      : {}),
+  };
 
   const progressText = `${successCount}/${BABY_OBJECT_MATCH_SUCCESS_TARGET}`;
   const isComplete = phase === 'complete';
   const currentItem = round?.item ?? null;
+  const isJudgementOpen = phase === 'active';
+  const shouldShowCurrentItem =
+    currentItem &&
+    (phase === 'item-appearing' ||
+      phase === 'active' ||
+      phase === 'correct' ||
+      phase === 'wrong');
+  const shouldShowGift = phase === 'gift-entering' || phase === 'gift-opening';
+  const shouldShowSmoke =
+    phase === 'gift-opening' || phase === 'item-appearing';
 
   useEffect(() => {
     randomRef.current = random ?? (() => Math.random());
   }, [random]);
 
+  useEffect(() => {
+    latestMocapPacketKeyRef.current = resolvedMocapInput.latestCommand
+      ? buildMocapPacketKey(
+          resolvedMocapInput.latestCommand,
+          resolvedMocapInput.rawPacketPreview,
+        )
+      : null;
+  }, [resolvedMocapInput.latestCommand, resolvedMocapInput.rawPacketPreview]);
+
   const clearFeedbackTimer = useCallback(() => {
     if (feedbackTimerRef.current !== null) {
       window.clearTimeout(feedbackTimerRef.current);
@@ -251,33 +306,65 @@ export function BabyObjectMatchRuntimeShell({
     }
   }, []);
 
-  const openGiftBox = useCallback(() => {
-    if (phase !== 'waiting') {
-      return;
+  const clearIntroTimer = useCallback(() => {
+    if (introTimerRef.current !== null) {
+      window.clearTimeout(introTimerRef.current);
+      introTimerRef.current = null;
     }
+  }, []);
 
-    clearFeedbackTimer();
-    setFeedbackText(null);
-    setLastTargetSide(null);
-    setRound(buildRuntimeRound(draft, randomRef.current));
-    setPhase('active');
-  }, [clearFeedbackTimer, draft, phase]);
-
-  const resetRuntime = useCallback(() => {
-    clearFeedbackTimer();
+  const resetInputPaths = useCallback(() => {
     dragStateRef.current = null;
     handledMocapPacketKeyRef.current = null;
-    hasOpenPalmBeforeGrabRef.current = false;
     mocapHandPathsRef.current = { left: [], right: [] };
+  }, []);
+
+  useEffect(() => {
+    clearIntroTimer();
+
+    if (phase === 'gift-entering') {
+      introTimerRef.current = window.setTimeout(() => {
+        introTimerRef.current = null;
+        setPhase('gift-opening');
+      }, BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS);
+      return clearIntroTimer;
+    }
+
+    if (phase === 'gift-opening') {
+      introTimerRef.current = window.setTimeout(() => {
+        introTimerRef.current = null;
+        setPhase('item-appearing');
+      }, BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS);
+      return clearIntroTimer;
+    }
+
+    if (phase === 'item-appearing') {
+      introTimerRef.current = window.setTimeout(() => {
+        introTimerRef.current = null;
+        resetInputPaths();
+        handledMocapPacketKeyRef.current = latestMocapPacketKeyRef.current;
+        setPhase('active');
+      }, BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS);
+      return clearIntroTimer;
+    }
+
+    return clearIntroTimer;
+  }, [clearIntroTimer, phase, resetInputPaths]);
+
+  const resetRuntime = useCallback(() => {
+    clearIntroTimer();
+    clearFeedbackTimer();
+    resetInputPaths();
     setSuccessCount(0);
-    setRound(null);
+    setRound(buildRuntimeRound(draft, randomRef.current));
     setFeedbackText(null);
     setLastTargetSide(null);
-    setPhase('waiting');
-  }, [clearFeedbackTimer]);
+    setPhase('gift-entering');
+  }, [clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths]);
 
   const finishFeedback = useCallback(
     (nextSuccessCount: number, wasCorrect: boolean) => {
+      clearIntroTimer();
       clearFeedbackTimer();
       feedbackTimerRef.current = window.setTimeout(() => {
         feedbackTimerRef.current = null;
@@ -289,25 +376,26 @@ export function BabyObjectMatchRuntimeShell({
             return;
           }
 
-          setRound(null);
+          setRound(buildRuntimeRound(draft, randomRef.current));
           setFeedbackText(null);
           setLastTargetSide(null);
-          setPhase('waiting');
+          resetInputPaths();
+          setPhase('gift-entering');
           return;
         }
 
         setFeedbackText(null);
         setLastTargetSide(null);
-        mocapHandPathsRef.current = { left: [], right: [] };
+        resetInputPaths();
         setPhase('active');
       }, BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS);
     },
-    [clearFeedbackTimer],
+    [clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths],
   );
 
   const sendItemToBasket = useCallback(
     (side: BasketSide) => {
-      if (phase !== 'active' || !round) {
+      if (!isJudgementOpen || !round) {
         return;
       }
 
@@ -326,18 +414,16 @@ export function BabyObjectMatchRuntimeShell({
       setPhase('wrong');
       finishFeedback(successCount, false);
     },
-    [finishFeedback, phase, round, successCount],
+    [finishFeedback, isJudgementOpen, round, successCount],
   );
 
-  useEffect(() => clearFeedbackTimer, [clearFeedbackTimer]);
-
-  useEffect(() => {
-    if (phase === 'waiting') {
-      mocapHandPathsRef.current = { left: [], right: [] };
-      return;
-    }
-    hasOpenPalmBeforeGrabRef.current = false;
-  }, [phase]);
+  useEffect(
+    () => () => {
+      clearIntroTimer();
+      clearFeedbackTimer();
+    },
+    [clearFeedbackTimer, clearIntroTimer],
+  );
 
   useEffect(() => {
     const command = resolvedMocapInput.latestCommand;
@@ -354,60 +440,28 @@ export function BabyObjectMatchRuntimeShell({
     }
     handledMocapPacketKeyRef.current = packetKey;
 
-    if (phase === 'waiting') {
-      if (hasGrabMocapHand(command) && hasOpenPalmBeforeGrabRef.current) {
-        hasOpenPalmBeforeGrabRef.current = false;
-        mocapHandPathsRef.current = { left: [], right: [] };
-        openGiftBox();
-        return;
-      }
-      if (hasOpenPalmMocapHand(command)) {
-        hasOpenPalmBeforeGrabRef.current = true;
-      }
+    if (!isJudgementOpen) {
+      resetInputPaths();
       return;
     }
 
-    if (phase !== 'active') {
-      mocapHandPathsRef.current = { left: [], right: [] };
-      return;
-    }
-
-    const nextPaths = resolveMocapHandPaths(
-      command,
-      mocapHandPathsRef.current,
-    );
+    const nextPaths = resolveMocapHandPaths(command, mocapHandPathsRef.current);
     mocapHandPathsRef.current = nextPaths;
 
     const targetSide = resolveMocapHorizontalMoveSide(nextPaths);
     if (targetSide) {
       sendItemToBasket(targetSide);
-      mocapHandPathsRef.current = { left: [], right: [] };
+      resetInputPaths();
     }
   }, [
     isComplete,
-    openGiftBox,
-    phase,
+    isJudgementOpen,
+    resetInputPaths,
     resolvedMocapInput.latestCommand,
     resolvedMocapInput.rawPacketPreview,
     sendItemToBasket,
   ]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key.toLowerCase() !== 'f') {
-        return;
-      }
-
-      event.preventDefault();
-      openGiftBox();
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [openGiftBox]);
-
   const getPointerUnitX = (
     event: ReactPointerEvent<HTMLElement>,
     element: HTMLElement,
@@ -418,6 +472,10 @@ export function BabyObjectMatchRuntimeShell({
   };
 
   const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {
+    if (!isJudgementOpen) {
+      return;
+    }
+
     if (event.button !== 0 && event.button !== 2) {
       return;
     }
@@ -436,6 +494,11 @@ export function BabyObjectMatchRuntimeShell({
   };
 
   const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {
+    if (!isJudgementOpen) {
+      dragStateRef.current = null;
+      return;
+    }
+
     if (!dragStateRef.current) {
       return;
     }
@@ -469,13 +532,26 @@ export function BabyObjectMatchRuntimeShell({
       data-testid="baby-object-match-runtime"
     >
       <section
-        className="baby-object-runtime__stage"
+        className={`baby-object-runtime__stage${
+          backgroundAsset ? ' baby-object-runtime__stage--skinned' : ''
+        }`}
+        style={stageStyle}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
         onPointerCancel={handlePointerUp}
         onContextMenu={(event) => event.preventDefault()}
       >
+        {backgroundAsset ? (
+          <ResolvedAssetImage
+            src={backgroundAsset.imageSrc}
+            alt=""
+            className="baby-object-runtime__background-image"
+            data-testid="baby-object-background-image"
+            aria-hidden="true"
+          />
+        ) : null}
+
         {onBack ? (
           <button
             type="button"
@@ -496,25 +572,65 @@ export function BabyObjectMatchRuntimeShell({
           {progressText}
         </div>
 
-        <div
-          className={`baby-object-runtime__gift${phase === 'active' || phase === 'correct' || phase === 'wrong' ? ' baby-object-runtime__gift--open' : ''}`}
-          aria-label="礼物盒"
-        >
-          <Gift className="baby-object-runtime__gift-icon" />
-        </div>
+        {shouldShowGift ? (
+          <div
+            className={`baby-object-runtime__gift${
+              giftBoxAsset ? ' baby-object-runtime__gift--skinned' : ''
+            }${
+              phase === 'gift-entering'
+                ? ' baby-object-runtime__gift--entering'
+                : ''
+            }${
+              phase === 'gift-opening'
+                ? ' baby-object-runtime__gift--opening baby-object-runtime__gift--open'
+                : ''
+            }`}
+            aria-label="礼物盒"
+          >
+            {giftBoxAsset ? (
+              <ResolvedAssetImage
+                src={giftBoxAsset.imageSrc}
+                alt="礼物盒"
+                className="baby-object-runtime__gift-image"
+              />
+            ) : (
+              <Gift className="baby-object-runtime__gift-icon" />
+            )}
+          </div>
+        ) : null}
+
+        {shouldShowSmoke ? (
+          <div
+            className={`baby-object-runtime__smoke${
+              smokeAsset ? ' baby-object-runtime__smoke--skinned' : ''
+            }${
+              phase === 'item-appearing'
+                ? ' baby-object-runtime__smoke--releasing'
+                : ''
+            }`}
+            data-testid="baby-object-smoke-effect"
+            aria-hidden="true"
+          />
+        ) : null}
 
         <div
           className={`baby-object-runtime__item${
+            shouldShowCurrentItem ? ' baby-object-runtime__item--visible' : ''
+          }${
+            phase === 'item-appearing'
+              ? ' baby-object-runtime__item--appearing'
+              : ''
+          }${
             phase === 'correct'
               ? ` baby-object-runtime__item--to-${lastTargetSide ?? 'left'}`
               : phase === 'wrong'
                 ? ` baby-object-runtime__item--wrong-${lastTargetSide ?? 'left'}`
-              : ''
+                : ''
           }`}
           data-testid="baby-object-current-item"
           aria-live="polite"
         >
-          {currentItem ? (
+          {shouldShowCurrentItem ? (
             <>
               <ResolvedAssetImage
                 src={currentItem.imageSrc}
@@ -555,12 +671,17 @@ export function BabyObjectMatchRuntimeShell({
 
         <div className="baby-object-runtime__baskets">
           {(['left', 'right'] as const).map((side) => {
-            const basketItem = round?.baskets[side] ?? draft.itemAssets[side === 'left' ? 0 : 1];
+            const basketItem =
+              round?.baskets[side] ?? draft.itemAssets[side === 'left' ? 0 : 1];
 
             return (
               <div
                 key={side}
-                className={`baby-object-runtime__basket baby-object-runtime__basket--${side}`}
+                className={`baby-object-runtime__basket baby-object-runtime__basket--${side}${
+                  phase === 'correct' && lastTargetSide === side
+                    ? ' baby-object-runtime__basket--correct'
+                    : ''
+                }`}
                 aria-label={`${side === 'left' ? '左侧' : '右侧'}篮子 ${basketItem.itemName}`}
               >
                 <div className="baby-object-runtime__basket-icon">
@@ -570,7 +691,21 @@ export function BabyObjectMatchRuntimeShell({
                     className="baby-object-runtime__basket-image"
                   />
                 </div>
-                <div className="baby-object-runtime__basket-body" />
+                <div
+                  className={`baby-object-runtime__basket-body${
+                    basketAsset
+                      ? ' baby-object-runtime__basket-body--skinned'
+                      : ''
+                  }`}
+                >
+                  {basketAsset ? (
+                    <ResolvedAssetImage
+                      src={basketAsset.imageSrc}
+                      alt=""
+                      className="baby-object-runtime__basket-shell-image"
+                    />
+                  ) : null}
+                </div>
               </div>
             );
           })}

src/components/edutainment-runtime/babyLoveDrawingModel.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, test } from 'vitest';
+
+import {
+  appendPointToStroke,
+  BABY_LOVE_DRAWING_BUTTON_HOVER_MS,
+  BABY_LOVE_DRAWING_COLOR_HOVER_MS,
+  createBabyDrawingStroke,
+  hasHoverCompleted,
+  isPointInsideBounds,
+  resolveHoverProgress,
+  toCanvasPoint,
+} from './babyLoveDrawingModel';
+
+describe('babyLoveDrawingModel', () => {
+  test('completes color hover after 1.5 seconds', () => {
+    const target = { kind: 'color' as const, id: 'red' };
+
+    expect(
+      hasHoverCompleted(
+        target,
+        1000,
+        1000 + BABY_LOVE_DRAWING_COLOR_HOVER_MS - 1,
+      ),
+    ).toBe(false);
+    expect(
+      hasHoverCompleted(
+        target,
+        1000,
+        1000 + BABY_LOVE_DRAWING_COLOR_HOVER_MS,
+      ),
+    ).toBe(true);
+  });
+
+  test('completes button hover after 2 seconds', () => {
+    const target = { kind: 'button' as const, id: 'finish' };
+
+    expect(
+      hasHoverCompleted(
+        target,
+        1000,
+        1000 + BABY_LOVE_DRAWING_BUTTON_HOVER_MS - 1,
+      ),
+    ).toBe(false);
+    expect(
+      hasHoverCompleted(
+        target,
+        1000,
+        1000 + BABY_LOVE_DRAWING_BUTTON_HOVER_MS,
+      ),
+    ).toBe(true);
+  });
+
+  test('clamps hover progress and canvas point into unit bounds', () => {
+    const bounds = {
+      left: 0.25,
+      top: 0.2,
+      width: 0.5,
+      height: 0.4,
+    };
+
+    expect(resolveHoverProgress(null, null, 1000)).toBe(0);
+    expect(resolveHoverProgress({ kind: 'color', id: 'red' }, 0, 999999)).toBe(
+      1,
+    );
+    expect(isPointInsideBounds({ x: 0.4, y: 0.3 }, bounds)).toBe(true);
+    expect(isPointInsideBounds({ x: 0.1, y: 0.3 }, bounds)).toBe(false);
+    expect(toCanvasPoint({ x: 0.5, y: 0.4 }, bounds)).toMatchObject({
+      x: 0.5,
+      y: 0.5,
+    });
+    expect(toCanvasPoint({ x: 0.9, y: 0.9 }, bounds)).toMatchObject({
+      x: 1,
+      y: 1,
+    });
+  });
+
+  test('creates and extends stroke trace without mutating previous stroke', () => {
+    const stroke = createBabyDrawingStroke('brush', '#ef4444', {
+      x: 0.1,
+      y: 0.2,
+      t: 1,
+    });
+    const nextStroke = appendPointToStroke(stroke, {
+      x: 0.3,
+      y: 0.4,
+      t: 2,
+    });
+
+    expect(stroke.points).toHaveLength(1);
+    expect(nextStroke.points).toHaveLength(2);
+    expect(nextStroke).toMatchObject({
+      tool: 'brush',
+      color: '#ef4444',
+    });
+  });
+});

src/components/edutainment-runtime/babyLoveDrawingModel.ts

@@ -0,0 +1,135 @@
+import type {
+  BabyLoveDrawingPoint,
+  BabyLoveDrawingStroke,
+  BabyLoveDrawingTool,
+} from '../../../packages/shared/src/contracts/edutainmentBabyDrawing';
+import { BABY_LOVE_DRAWING_RAINBOW_COLORS } from '../../../packages/shared/src/contracts/edutainmentBabyDrawing';
+
+export const BABY_LOVE_DRAWING_COLOR_HOVER_MS = 1500;
+export const BABY_LOVE_DRAWING_BUTTON_HOVER_MS = 2000;
+export const BABY_LOVE_DRAWING_BRUSH_SIZE = 10;
+export const BABY_LOVE_DRAWING_ERASER_SIZE = 30;
+
+export type BabyLoveDrawingPhase =
+  | 'drawing'
+  | 'finished'
+  | 'magicPending'
+  | 'magicReady'
+  | 'saved';
+
+export type BabyLoveDrawingHoverTarget =
+  | {
+      kind: 'color';
+      id: string;
+    }
+  | {
+      kind: 'button';
+      id: string;
+    }
+  | null;
+
+export type BabyLoveDrawingHandPoint = {
+  x: number;
+  y: number;
+  state: 'open_palm' | 'grab' | 'unknown';
+};
+
+export type BabyLoveDrawingBounds = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+export const BABY_LOVE_DRAWING_DEFAULT_COLOR =
+  BABY_LOVE_DRAWING_RAINBOW_COLORS[0].value;
+
+export function clampBabyDrawingUnit(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(1, value));
+}
+
+export function normalizeBabyDrawingPoint(
+  point: Pick<BabyLoveDrawingHandPoint, 'x' | 'y'>,
+): BabyLoveDrawingPoint {
+  return {
+    x: clampBabyDrawingUnit(point.x),
+    y: clampBabyDrawingUnit(point.y),
+    t: Date.now(),
+  };
+}
+
+export function isPointInsideBounds(
+  point: Pick<BabyLoveDrawingHandPoint, 'x' | 'y'>,
+  bounds: BabyLoveDrawingBounds,
+) {
+  return (
+    point.x >= bounds.left &&
+    point.x <= bounds.left + bounds.width &&
+    point.y >= bounds.top &&
+    point.y <= bounds.top + bounds.height
+  );
+}
+
+export function toCanvasPoint(
+  point: Pick<BabyLoveDrawingHandPoint, 'x' | 'y'>,
+  bounds: BabyLoveDrawingBounds,
+) {
+  return {
+    x: clampBabyDrawingUnit((point.x - bounds.left) / bounds.width),
+    y: clampBabyDrawingUnit((point.y - bounds.top) / bounds.height),
+    t: Date.now(),
+  };
+}
+
+export function appendPointToStroke(
+  stroke: BabyLoveDrawingStroke,
+  point: BabyLoveDrawingPoint,
+): BabyLoveDrawingStroke {
+  return {
+    ...stroke,
+    points: [...stroke.points, point],
+  };
+}
+
+export function createBabyDrawingStroke(
+  tool: BabyLoveDrawingTool,
+  color: string,
+  point: BabyLoveDrawingPoint,
+): BabyLoveDrawingStroke {
+  return {
+    strokeId: `baby-drawing-stroke-${Date.now()}-${Math.random()
+      .toString(36)
+      .slice(2, 8)}`,
+    tool,
+    color,
+    points: [point],
+  };
+}
+
+export function resolveHoverProgress(
+  target: BabyLoveDrawingHoverTarget,
+  startedAtMs: number | null,
+  nowMs: number,
+) {
+  if (!target || startedAtMs === null) {
+    return 0;
+  }
+
+  const duration =
+    target.kind === 'color'
+      ? BABY_LOVE_DRAWING_COLOR_HOVER_MS
+      : BABY_LOVE_DRAWING_BUTTON_HOVER_MS;
+  return clampBabyDrawingUnit((nowMs - startedAtMs) / duration);
+}
+
+export function hasHoverCompleted(
+  target: BabyLoveDrawingHoverTarget,
+  startedAtMs: number | null,
+  nowMs: number,
+) {
+  return resolveHoverProgress(target, startedAtMs, nowMs) >= 1;
+}

src/components/platform-entry/PlatformEntryFlowShellImpl.tsx

@@ -150,8 +150,11 @@ import {
 } from '../../services/customWorldAgentUiState';
 import {
   createBabyObjectMatchDraft,
+  deleteLocalBabyObjectMatchDraft,
+  hasBabyObjectMatchPlaceholderAssets,
   listLocalBabyObjectMatchDrafts,
   publishBabyObjectMatchWork,
+  regenerateBabyObjectMatchDraftAssets,
   saveBabyObjectMatchDraft,
 } from '../../services/edutainment-baby-object';
 import { match3dCreationClient } from '../../services/match3d-creation';
@@ -323,6 +326,7 @@ import type { PlatformCreationTypeId } from './platformEntryCreationTypes';
 import {
   derivePlatformCreationTypes,
   getVisiblePlatformCreationTypes,
+  isPlatformCreationTypeOpen,
   isPlatformCreationTypeVisible,
 } from './platformEntryCreationTypes';
 import {
@@ -1963,6 +1967,15 @@ const BabyObjectMatchRuntimeShell = lazy(async () => {
   };
 });
 
+const BabyLoveDrawingRuntimeShell = lazy(async () => {
+  const module = await import(
+    '../edutainment-runtime/BabyLoveDrawingRuntimeShell'
+  );
+  return {
+    default: module.BabyLoveDrawingRuntimeShell,
+  };
+});
+
 const VisualNovelResultView = lazy(async () => {
   const module = await import('../visual-novel-result/VisualNovelResultView');
   return {
@@ -2301,6 +2314,10 @@ export function PlatformEntryFlowShellImpl({
     creationEntryTypes,
     'baby-object-match',
   );
+  const isVisualNovelCreationOpen = isPlatformCreationTypeOpen(
+    creationEntryTypes,
+    'visual-novel',
+  );
   const [profilePlayStats, setProfilePlayStats] =
     useState<ProfilePlayStatsResponse | null>(null);
   const [profilePlayStatsError, setProfilePlayStatsError] = useState<
@@ -2718,6 +2735,12 @@ export function PlatformEntryFlowShellImpl({
   }, [resolvePuzzleErrorMessage]);
 
   const refreshVisualNovelShelf = useCallback(async () => {
+    if (!isVisualNovelCreationOpen) {
+      setVisualNovelWorks([]);
+      visualNovelErrorSetterRef.current(null);
+      return [];
+    }
+
     setIsVisualNovelLoadingLibrary(true);
 
     try {
@@ -2733,9 +2756,15 @@ export function PlatformEntryFlowShellImpl({
     } finally {
       setIsVisualNovelLoadingLibrary(false);
     }
-  }, [resolvePuzzleErrorMessage]);
+  }, [isVisualNovelCreationOpen, resolvePuzzleErrorMessage]);
 
   const refreshVisualNovelGallery = useCallback(async () => {
+    if (!isVisualNovelCreationOpen) {
+      setVisualNovelGalleryEntries([]);
+      visualNovelErrorSetterRef.current(null);
+      return [];
+    }
+
     try {
       const galleryResponse = await listVisualNovelGallery();
       setVisualNovelGalleryEntries(galleryResponse.works);
@@ -2747,7 +2776,7 @@ export function PlatformEntryFlowShellImpl({
       );
       return [];
     }
-  }, [resolvePuzzleErrorMessage]);
+  }, [isVisualNovelCreationOpen, resolvePuzzleErrorMessage]);
 
   const handleRpgDraftGenerationStarted = useCallback(
     (sessionId: string) => {
@@ -2775,8 +2804,8 @@ export function PlatformEntryFlowShellImpl({
     [markDraftReady, platformBootstrap],
   );
 
-  const refreshBabyObjectMatchShelf = useCallback(() => {
-    setBabyObjectMatchDrafts(listLocalBabyObjectMatchDrafts());
+  const refreshBabyObjectMatchShelf = useCallback(async () => {
+    setBabyObjectMatchDrafts(await listLocalBabyObjectMatchDrafts());
   }, []);
 
   const sessionController = useRpgCreationSessionController({
@@ -3004,7 +3033,7 @@ export function PlatformEntryFlowShellImpl({
         ...match3dPublicEntries,
         ...puzzlePublicEntries,
         ...squareHolePublicEntries,
-        ...visualNovelPublicEntries,
+        ...(isVisualNovelCreationOpen ? visualNovelPublicEntries : []),
         ...babyObjectMatchPublicEntries,
       ],
     ).slice(0, 6);
@@ -3012,6 +3041,7 @@ export function PlatformEntryFlowShellImpl({
     babyObjectMatchDrafts,
     isBigFishCreationVisible,
     isBabyObjectMatchVisible,
+    isVisualNovelCreationOpen,
     bigFishGalleryEntries,
     match3dGalleryEntries,
     platformBootstrap.publishedGalleryEntries,
@@ -3032,9 +3062,11 @@ export function PlatformEntryFlowShellImpl({
           ...squareHoleGalleryEntries.map(
             mapSquareHoleWorkToPlatformGalleryCard,
           ),
-          ...visualNovelGalleryEntries.map(
-            mapVisualNovelWorkToPlatformGalleryCard,
-          ),
+          ...(isVisualNovelCreationOpen
+            ? visualNovelGalleryEntries.map(
+                mapVisualNovelWorkToPlatformGalleryCard,
+              )
+            : []),
           ...(isBabyObjectMatchVisible
             ? babyObjectMatchDrafts
                 .filter((draft) => draft.publicationStatus === 'published')
@@ -3046,6 +3078,7 @@ export function PlatformEntryFlowShellImpl({
       babyObjectMatchDrafts,
       isBabyObjectMatchVisible,
       isBigFishCreationVisible,
+      isVisualNovelCreationOpen,
       bigFishGalleryEntries,
       match3dGalleryEntries,
       platformBootstrap.publishedGalleryEntries,
@@ -3112,14 +3145,17 @@ export function PlatformEntryFlowShellImpl({
     [pendingDraftShelfItems, puzzleWorks],
   );
   const visualNovelShelfItems = useMemo(
-    () => [
-      ...buildPendingVisualNovelWorks(
-        pendingDraftShelfItems['visual-novel'],
-        visualNovelWorks,
-      ),
-      ...visualNovelWorks,
-    ],
-    [pendingDraftShelfItems, visualNovelWorks],
+    () =>
+      isVisualNovelCreationOpen
+        ? [
+            ...buildPendingVisualNovelWorks(
+              pendingDraftShelfItems['visual-novel'],
+              visualNovelWorks,
+            ),
+            ...visualNovelWorks,
+          ]
+        : [],
+    [isVisualNovelCreationOpen, pendingDraftShelfItems, visualNovelWorks],
   );
   const getCreationWorkShelfState = useCallback(
     (item: CreationWorkShelfItem) => {
@@ -4886,7 +4922,7 @@ export function PlatformEntryFlowShellImpl({
       try {
         const response = await createBabyObjectMatchDraft(payload);
         setBabyObjectMatchDraft(response.draft);
-        refreshBabyObjectMatchShelf();
+        void refreshBabyObjectMatchShelf();
         setBabyObjectMatchGenerationPhase('ready');
         setBabyObjectMatchGenerationState((current) =>
           current
@@ -5239,7 +5275,7 @@ export function PlatformEntryFlowShellImpl({
       try {
         const response = await saveBabyObjectMatchDraft({ draft });
         setBabyObjectMatchDraft(response.draft);
-        refreshBabyObjectMatchShelf();
+        void refreshBabyObjectMatchShelf();
       } catch (error) {
         setBabyObjectMatchError(
           resolvePuzzleErrorMessage(error, '保存宝贝识物草稿失败。'),
@@ -5251,14 +5287,52 @@ export function PlatformEntryFlowShellImpl({
     [refreshBabyObjectMatchShelf, resolvePuzzleErrorMessage],
   );
 
+  const ensureBabyObjectMatchGeneratedAssets = useCallback(
+    async (draft: BabyObjectMatchDraft) => {
+      if (!hasBabyObjectMatchPlaceholderAssets(draft)) {
+        return draft;
+      }
+
+      const response = await regenerateBabyObjectMatchDraftAssets(draft);
+      setBabyObjectMatchDraft(response.draft);
+      void refreshBabyObjectMatchShelf();
+
+      return response.draft;
+    },
+    [refreshBabyObjectMatchShelf],
+  );
+
+  const regenerateBabyObjectMatchResultAssets = useCallback(
+    async (draft: BabyObjectMatchDraft) => {
+      setBabyObjectMatchError(null);
+      setIsBabyObjectMatchBusy(true);
+      try {
+        await ensureBabyObjectMatchGeneratedAssets(draft);
+      } catch (error) {
+        setBabyObjectMatchError(
+          resolvePuzzleErrorMessage(
+            error,
+            '重新生成宝贝识物 image-2 资源失败。',
+          ),
+        );
+      } finally {
+        setIsBabyObjectMatchBusy(false);
+      }
+    },
+    [ensureBabyObjectMatchGeneratedAssets, resolvePuzzleErrorMessage],
+  );
+
   const publishBabyObjectMatchResultDraft = useCallback(
     async (draft: BabyObjectMatchDraft) => {
       setBabyObjectMatchError(null);
       setIsBabyObjectMatchBusy(true);
       try {
-        const response = await publishBabyObjectMatchWork({ draft });
+        const generatedDraft = await ensureBabyObjectMatchGeneratedAssets(draft);
+        const response = await publishBabyObjectMatchWork({
+          draft: generatedDraft,
+        });
         setBabyObjectMatchDraft(response.draft);
-        refreshBabyObjectMatchShelf();
+        void refreshBabyObjectMatchShelf();
         openPublishShareModal({
           title: response.draft.workTitle,
           publicWorkCode:
@@ -5268,13 +5342,17 @@ export function PlatformEntryFlowShellImpl({
         });
       } catch (error) {
         setBabyObjectMatchError(
-          resolvePuzzleErrorMessage(error, '发布宝贝识物作品失败。'),
+          resolvePuzzleErrorMessage(
+            error,
+            '生成宝贝识物 image-2 资源失败，请重试后再发布。',
+          ),
         );
       } finally {
         setIsBabyObjectMatchBusy(false);
       }
     },
     [
+      ensureBabyObjectMatchGeneratedAssets,
       openPublishShareModal,
       refreshBabyObjectMatchShelf,
       resolvePuzzleErrorMessage,
@@ -5282,40 +5360,66 @@ export function PlatformEntryFlowShellImpl({
   );
 
   const startBabyObjectMatchRuntimeFromDraft = useCallback(
-    (
+    async (
       draft: BabyObjectMatchDraft,
       returnStage: BabyObjectMatchRuntimeReturnStage = 'baby-object-match-result',
       options: { embedded?: boolean } = {},
     ) => {
-      setBabyObjectMatchDraft(draft);
-      setBabyObjectMatchFormPayload({
-        itemAName: draft.itemNames[0],
-        itemBName: draft.itemNames[1],
-      });
-      setBabyObjectMatchRuntimeReturnStage(returnStage);
       setBabyObjectMatchError(null);
-      if (!options.embedded) {
-        setSelectionStage('baby-object-match-runtime');
-        const publicWorkCode =
-          draft.publicationStatus === 'published'
-            ? buildBabyObjectMatchPublicWorkCode(draft.profileId)
-            : null;
-        if (publicWorkCode) {
-          pushAppHistoryPath(
-            buildPublicWorkStagePath(
-              'baby-object-match-runtime',
-              publicWorkCode,
-            ),
-          );
+      setIsBabyObjectMatchBusy(true);
+      try {
+        const generatedDraft =
+          await ensureBabyObjectMatchGeneratedAssets(draft);
+        setBabyObjectMatchDraft(generatedDraft);
+        setBabyObjectMatchFormPayload({
+          itemAName: generatedDraft.itemNames[0],
+          itemBName: generatedDraft.itemNames[1],
+        });
+        setBabyObjectMatchRuntimeReturnStage(returnStage);
+        if (!options.embedded) {
+          setSelectionStage('baby-object-match-runtime');
+          const publicWorkCode =
+            generatedDraft.publicationStatus === 'published'
+              ? buildBabyObjectMatchPublicWorkCode(generatedDraft.profileId)
+              : null;
+          if (publicWorkCode) {
+            pushAppHistoryPath(
+              buildPublicWorkStagePath(
+                'baby-object-match-runtime',
+                publicWorkCode,
+              ),
+            );
+          }
         }
+        return true;
+      } catch (error) {
+        const message = resolvePuzzleErrorMessage(
+          error,
+          '生成宝贝识物 image-2 资源失败，请重试后再试玩。',
+        );
+        setBabyObjectMatchError(message);
+        if (options.embedded) {
+          setActiveRecommendRuntimeError(message);
+        }
+        return false;
+      } finally {
+        setIsBabyObjectMatchBusy(false);
       }
-      return true;
     },
-    [setSelectionStage],
+    [
+      ensureBabyObjectMatchGeneratedAssets,
+      resolvePuzzleErrorMessage,
+      setSelectionStage,
+    ],
   );
 
+  const startBabyLoveDrawingRuntime = useCallback(() => {
+    setSelectionStage('baby-love-drawing-runtime');
+    pushAppHistoryPath('/runtime/baby-love-drawing');
+  }, [setSelectionStage]);
+
   const resolveBabyObjectMatchRuntimeDraft = useCallback(
-    (entry: PlatformPublicGalleryCard) => {
+    async (entry: PlatformPublicGalleryCard) => {
       if (!isEdutainmentGalleryEntry(entry)) {
         return null;
       }
@@ -5324,7 +5428,7 @@ export function PlatformEntryFlowShellImpl({
         babyObjectMatchDrafts.find(
           (draft) => draft.profileId === entry.profileId,
         ) ??
-        listLocalBabyObjectMatchDrafts().find(
+        (await listLocalBabyObjectMatchDrafts()).find(
           (draft) => draft.profileId === entry.profileId,
         ) ??
         null
@@ -5334,12 +5438,12 @@ export function PlatformEntryFlowShellImpl({
   );
 
   const startBabyObjectMatchRuntimeFromEntry = useCallback(
-    (
+    async (
       entry: PlatformPublicGalleryCard,
       returnStage: BabyObjectMatchRuntimeReturnStage = 'work-detail',
       options: { embedded?: boolean } = {},
     ) => {
-      const draft = resolveBabyObjectMatchRuntimeDraft(entry);
+      const draft = await resolveBabyObjectMatchRuntimeDraft(entry);
       if (!draft) {
         setPublicWorkDetailError(
           '当前宝贝识物作品缺少本地草稿，暂时无法进入玩法。',
@@ -5347,7 +5451,11 @@ export function PlatformEntryFlowShellImpl({
         return false;
       }
 
-      return startBabyObjectMatchRuntimeFromDraft(draft, returnStage, options);
+      return await startBabyObjectMatchRuntimeFromDraft(
+        draft,
+        returnStage,
+        options,
+      );
     },
     [resolveBabyObjectMatchRuntimeDraft, startBabyObjectMatchRuntimeFromDraft],
   );
@@ -6968,7 +7076,7 @@ export function PlatformEntryFlowShellImpl({
         return;
       }
 
-      runProtectedAction(() => {
+      runProtectedAction(async () => {
         setIsPublicWorkDetailBusy(true);
         setIsPuzzleBusy(true);
         setPuzzleError(null);
@@ -7447,6 +7555,67 @@ export function PlatformEntryFlowShellImpl({
     ],
   );
 
+  const handleDeleteBabyObjectMatchWork = useCallback(
+    (work: BabyObjectMatchDraft) => {
+      if (deletingCreationWorkId) {
+        return;
+      }
+      const noticeKeys = collectDraftNoticeKeys('baby-object-match', [
+        work.profileId,
+        work.draftId,
+      ]);
+      const displayName = work.workTitle.trim() || work.templateName;
+
+      requestDeleteCreationWork({
+        id: work.profileId,
+        title: displayName,
+        detail:
+          work.publicationStatus === 'published'
+            ? '删除后会从你的作品列表和寓教于乐板块中移除。'
+            : '删除后会从你的作品列表中移除。',
+        run: () => {
+          setDeletingCreationWorkId(work.profileId);
+          setBabyObjectMatchError(null);
+
+          void deleteLocalBabyObjectMatchDraft(work.profileId)
+            .then((nextDrafts) => {
+              markDraftNoticeSeen(noticeKeys);
+              setBabyObjectMatchDrafts(nextDrafts);
+              setBabyObjectMatchDraft((current) =>
+                current?.profileId === work.profileId ? null : current,
+              );
+              if (
+                babyObjectMatchDraft?.profileId === work.profileId &&
+                (selectionStage === 'baby-object-match-result' ||
+                  selectionStage === 'baby-object-match-runtime')
+              ) {
+                enterCreateTab();
+                setSelectionStage('platform');
+              }
+            })
+            .catch((error) => {
+              setBabyObjectMatchError(
+                resolvePuzzleErrorMessage(error, '删除宝贝识物作品失败。'),
+              );
+            })
+            .finally(() => {
+              setDeletingCreationWorkId(null);
+            });
+        },
+      });
+    },
+    [
+      babyObjectMatchDraft?.profileId,
+      deletingCreationWorkId,
+      enterCreateTab,
+      markDraftNoticeSeen,
+      requestDeleteCreationWork,
+      resolvePuzzleErrorMessage,
+      selectionStage,
+      setSelectionStage,
+    ],
+  );
+
   const clearSelectedPublicWorkAuthor = useCallback(() => {
     publicWorkAuthorRequestKeyRef.current += 1;
     setSelectedPublicWorkAuthor(null);
@@ -8641,7 +8810,7 @@ export function PlatformEntryFlowShellImpl({
 
       if (isEdutainmentGalleryEntry(selectedPublicWorkDetail)) {
         setPublicWorkDetailError(null);
-        startBabyObjectMatchRuntimeFromEntry(
+        void startBabyObjectMatchRuntimeFromEntry(
           selectedPublicWorkDetail,
           'work-detail',
         );
@@ -8773,9 +8942,13 @@ export function PlatformEntryFlowShellImpl({
             { embedded: true },
           );
         } else if (isEdutainmentGalleryEntry(entry)) {
-          started = startBabyObjectMatchRuntimeFromEntry(entry, 'platform', {
-            embedded: true,
-          });
+          started = await startBabyObjectMatchRuntimeFromEntry(
+            entry,
+            'platform',
+            {
+              embedded: true,
+            },
+          );
         } else {
           started = true;
         }
@@ -9328,7 +9501,7 @@ export function PlatformEntryFlowShellImpl({
         return;
       }
 
-      runProtectedAction(() => {
+      runProtectedAction(async () => {
         setPublicWorkDetailError(null);
 
         // 中文注释：自有公开作品必须恢复原草稿，不能复用 remix 复制链路。
@@ -9396,7 +9569,7 @@ export function PlatformEntryFlowShellImpl({
         }
 
         if (isEdutainmentGalleryEntry(entry)) {
-          const matchedDraft = resolveBabyObjectMatchRuntimeDraft(entry);
+          const matchedDraft = await resolveBabyObjectMatchRuntimeDraft(entry);
           if (!matchedDraft) {
             setPublicWorkDetailError('这份宝贝识物缺少可编辑草稿。');
             return;
@@ -9623,8 +9796,8 @@ export function PlatformEntryFlowShellImpl({
           mapVisualNovelWorkToPublicWorkDetail(matchedEntry),
         );
       };
-      const tryOpenBabyObjectMatchGalleryEntry = () => {
-        const entries = listLocalBabyObjectMatchDrafts().filter(
+      const tryOpenBabyObjectMatchGalleryEntry = async () => {
+        const entries = (await listLocalBabyObjectMatchDrafts()).filter(
           (draft) => draft.publicationStatus === 'published',
         );
         const matchedDraft = entries.find((draft) => {
@@ -9667,7 +9840,7 @@ export function PlatformEntryFlowShellImpl({
         }
 
         if (shouldSearchBabyObjectFirst) {
-          tryOpenBabyObjectMatchGalleryEntry();
+          await tryOpenBabyObjectMatchGalleryEntry();
           return;
         }
 
@@ -9927,11 +10100,14 @@ export function PlatformEntryFlowShellImpl({
       if (isSquareHoleCreationVisible) {
         void refreshSquareHoleGallery();
       }
-      void refreshVisualNovelGallery();
+      if (isVisualNovelCreationOpen) {
+        void refreshVisualNovelGallery();
+      }
     }
   }, [
     isBigFishCreationVisible,
     isSquareHoleCreationVisible,
+    isVisualNovelCreationOpen,
     refreshBigFishGallery,
     refreshMatch3DGallery,
     refreshPuzzleGallery,
@@ -9951,11 +10127,14 @@ export function PlatformEntryFlowShellImpl({
       if (isSquareHoleCreationVisible) {
         void refreshSquareHoleShelf();
       }
-      void refreshVisualNovelShelf();
-      refreshBabyObjectMatchShelf();
+      if (isVisualNovelCreationOpen) {
+        void refreshVisualNovelShelf();
+      }
+      void refreshBabyObjectMatchShelf();
     }
   }, [
     isSquareHoleCreationVisible,
+    isVisualNovelCreationOpen,
     platformBootstrap.canReadProtectedData,
     platformBootstrap.platformTab,
     refreshBabyObjectMatchShelf,
@@ -9998,7 +10177,7 @@ export function PlatformEntryFlowShellImpl({
             isMatch3DLoadingLibrary ||
             (isSquareHoleCreationVisible && isSquareHoleLoadingLibrary) ||
             isPuzzleLoadingLibrary ||
-            isVisualNovelLoadingLibrary ||
+            (isVisualNovelCreationOpen && isVisualNovelLoadingLibrary) ||
             isBabyObjectMatchBusy
           }
           error={
@@ -10007,7 +10186,7 @@ export function PlatformEntryFlowShellImpl({
             isMatch3DLoadingLibrary ||
             (isSquareHoleCreationVisible && isSquareHoleLoadingLibrary) ||
             isPuzzleLoadingLibrary ||
-            isVisualNovelLoadingLibrary ||
+            (isVisualNovelCreationOpen && isVisualNovelLoadingLibrary) ||
             isBabyObjectMatchBusy
               ? null
               : (platformBootstrap.platformError ??
@@ -10017,7 +10196,7 @@ export function PlatformEntryFlowShellImpl({
                 (isSquareHoleCreationVisible ? squareHoleError : null) ??
                 puzzleShelfError ??
                 puzzleError ??
-                visualNovelError ??
+                (isVisualNovelCreationOpen ? visualNovelError : null) ??
                 babyObjectMatchError)
           }
           onRetry={() => {
@@ -10053,8 +10232,10 @@ export function PlatformEntryFlowShellImpl({
               void refreshSquareHoleShelf();
             }
             void refreshPuzzleShelf();
-            void refreshVisualNovelShelf();
-            refreshBabyObjectMatchShelf();
+            if (isVisualNovelCreationOpen) {
+              void refreshVisualNovelShelf();
+            }
+            void refreshBabyObjectMatchShelf();
           }}
           createError={
             creationEntryConfigError ??
@@ -10064,7 +10245,7 @@ export function PlatformEntryFlowShellImpl({
             (isSquareHoleCreationVisible ? squareHoleError : null) ??
             puzzleCreationError ??
             puzzleError ??
-            visualNovelError ??
+            (isVisualNovelCreationOpen ? visualNovelError : null) ??
             babyObjectMatchError
           }
           createBusy={
@@ -10076,8 +10257,8 @@ export function PlatformEntryFlowShellImpl({
             isMatch3DBusy ||
             (isSquareHoleCreationVisible && isSquareHoleBusy) ||
             isPuzzleBusy ||
-            isVisualNovelBusy ||
-            isVisualNovelStreamingReply ||
+            (isVisualNovelCreationOpen && isVisualNovelBusy) ||
+            (isVisualNovelCreationOpen && isVisualNovelStreamingReply) ||
             isBabyObjectMatchBusy
           }
           entryConfig={creationEntryConfig}
@@ -10174,6 +10355,9 @@ export function PlatformEntryFlowShellImpl({
               openBabyObjectMatchDraft(item);
             });
           }}
+          onDeleteBabyObjectMatch={(item) => {
+            handleDeleteBabyObjectMatchWork(item);
+          }}
           visualNovelItems={visualNovelShelfItems}
           onOpenVisualNovelDetail={(item) => {
             runProtectedAction(() => {
@@ -10408,6 +10592,7 @@ export function PlatformEntryFlowShellImpl({
               onOpenCreateWorld={openCreationTypePicker}
               onOpenCreateTypePicker={openCreationTypePicker}
               onOpenGalleryDetail={openPublicGalleryDetail}
+              onOpenBabyLoveDrawing={startBabyLoveDrawingRuntime}
               onOpenRecommendGalleryDetail={openRecommendGalleryDetail}
               recommendRuntimeContent={recommendRuntimeContent}
               activeRecommendEntryKey={activeRecommendEntryKey}
@@ -11159,8 +11344,11 @@ export function PlatformEntryFlowShellImpl({
                   onPublish={(draft) => {
                     void publishBabyObjectMatchResultDraft(draft);
                   }}
+                  onRegenerateAssets={(draft) => {
+                    void regenerateBabyObjectMatchResultAssets(draft);
+                  }}
                   onStartTestRun={(draft) => {
-                    startBabyObjectMatchRuntimeFromDraft(
+                    void startBabyObjectMatchRuntimeFromDraft(
                       draft,
                       'baby-object-match-result',
                     );
@@ -11192,6 +11380,26 @@ export function PlatformEntryFlowShellImpl({
             </motion.div>
           )}
 
+        {selectionStage === 'baby-love-drawing-runtime' && (
+          <motion.div
+            key="baby-love-drawing-runtime"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[100]"
+          >
+            <Suspense
+              fallback={<LazyPanelFallback label="正在加载宝贝爱画..." />}
+            >
+              <BabyLoveDrawingRuntimeShell
+                onBack={() => {
+                  setSelectionStage('platform');
+                }}
+              />
+            </Suspense>
+          </motion.div>
+        )}
+
         {selectionStage === 'square-hole-agent-workspace' && (
           <motion.div
             key="square-hole-agent-workspace"
@@ -12094,7 +12302,18 @@ export function PlatformEntryFlowShellImpl({
       {creationEntryConfig ? (
         <PlatformEntryCreationTypeModal
           isOpen={showCreationTypeModal}
-          isBusy={sessionController.isCreatingAgentSession}
+          isBusy={
+            sessionController.isCreatingAgentSession ||
+            isCreativeAgentBusy ||
+            isCreativeAgentStreaming ||
+            isBigFishBusy ||
+            isMatch3DBusy ||
+            isSquareHoleBusy ||
+            isPuzzleBusy ||
+            (isVisualNovelCreationOpen && isVisualNovelBusy) ||
+            (isVisualNovelCreationOpen && isVisualNovelStreamingReply) ||
+            isBabyObjectMatchBusy
+          }
           error={
             creationEntryConfigError ??
             bigFishError ??
@@ -12102,7 +12321,7 @@ export function PlatformEntryFlowShellImpl({
             match3dError ??
             squareHoleError ??
             puzzleCreationError ??
-            visualNovelError ??
+            (isVisualNovelCreationOpen ? visualNovelError : null) ??
             babyObjectMatchError ??
             puzzleError ??
             sessionController.creationTypeError
@@ -12110,7 +12329,18 @@ export function PlatformEntryFlowShellImpl({
           entryConfig={creationEntryConfig}
           creationTypes={creationEntryTypes}
           onClose={() => {
-            if (sessionController.isCreatingAgentSession) {
+            if (
+              sessionController.isCreatingAgentSession ||
+              isCreativeAgentBusy ||
+              isCreativeAgentStreaming ||
+              isBigFishBusy ||
+              isMatch3DBusy ||
+              isSquareHoleBusy ||
+              isPuzzleBusy ||
+              (isVisualNovelCreationOpen && isVisualNovelBusy) ||
+              (isVisualNovelCreationOpen && isVisualNovelStreamingReply) ||
+              isBabyObjectMatchBusy
+            ) {
               return;
             }
             setShowCreationTypeModal(false);

src/components/platform-entry/platformEntryCreationTypes.test.ts

@@ -3,6 +3,7 @@ import { afterEach, expect, test, vi } from 'vitest';
 import {
   derivePlatformCreationTypes,
   getVisiblePlatformCreationTypes,
+  isPlatformCreationTypeOpen,
   isPlatformCreationTypeVisible,
 } from './platformEntryCreationTypes';
 
@@ -109,6 +110,9 @@ test('visible platform creation types hide invisible cards and put locked cards
   );
   expect(isPlatformCreationTypeVisible(cards, 'hidden')).toBe(false);
   expect(isPlatformCreationTypeVisible(cards, 'open')).toBe(true);
+  expect(isPlatformCreationTypeOpen(cards, 'hidden')).toBe(false);
+  expect(isPlatformCreationTypeOpen(cards, 'locked')).toBe(false);
+  expect(isPlatformCreationTypeOpen(cards, 'open')).toBe(true);
   expect(
     cards.every((item) =>
       item.imageSrc.startsWith('/creation-type-references/'),
@@ -123,7 +127,7 @@ test('edutainment switch hides baby object match creation entry from database co
       title: '宝贝识物',
       subtitle: '亲子识物分类',
       badge: '可创建',
-      imageSrc: '/creation-type-references/baby-object-match.webp',
+      imageSrc: '/child-motion-demo/picture-book-grass-stage.png',
       visible: true,
       open: true,
       sortOrder: 1,
@@ -152,7 +156,7 @@ test('edutainment switch hides baby object match creation entry from database co
       title: '宝贝识物',
       subtitle: '亲子识物分类',
       badge: '可创建',
-      imageSrc: '/creation-type-references/baby-object-match.webp',
+      imageSrc: '/child-motion-demo/picture-book-grass-stage.png',
       visible: true,
       open: true,
       sortOrder: 1,

src/components/platform-entry/platformEntryCreationTypes.ts

@@ -32,6 +32,15 @@ export function isPlatformCreationTypeVisible(
   return creationTypes.some((item) => item.id === id && !item.hidden);
 }
 
+export function isPlatformCreationTypeOpen(
+  creationTypes: readonly PlatformCreationTypeCard[],
+  id: PlatformCreationTypeId,
+) {
+  return creationTypes.some(
+    (item) => item.id === id && !item.hidden && !item.locked,
+  );
+}
+
 /**
  * 创作入口卡片只做展示派生；配置事实源来自后端 API / SpacetimeDB，前端不再保留入口默认配置。
  */

src/components/platform-entry/platformEntryTypes.ts

@@ -41,6 +41,7 @@ export type SelectionStage =
   | 'baby-object-match-generating'
   | 'baby-object-match-result'
   | 'baby-object-match-runtime'
+  | 'baby-love-drawing-runtime'
   | 'puzzle-agent-workspace'
   | 'puzzle-generating'
   | 'puzzle-onboarding'

src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx

@@ -142,6 +142,8 @@ import {
   listSquareHoleGallery,
   listSquareHoleWorks,
 } from '../../services/square-hole-works';
+import { listVisualNovelGallery } from '../../services/visual-novel-runtime';
+import { listVisualNovelWorks } from '../../services/visual-novel-works';
 import { type CustomWorldProfile, WorldType } from '../../types';
 import {
   AuthUiContext,
@@ -318,6 +320,17 @@ const testCreationEntryConfig = {
       sortOrder: 80,
       updatedAtMicros: 1,
     },
+    {
+      id: 'baby-object-match',
+      title: '宝贝识物',
+      subtitle: '亲子识物分类',
+      badge: '可创建',
+      imageSrc: '/child-motion-demo/picture-book-grass-stage.png',
+      visible: true,
+      open: true,
+      sortOrder: 90,
+      updatedAtMicros: 1,
+    },
   ],
 } satisfies CreationEntryConfig;
 
@@ -526,6 +539,28 @@ vi.mock('../../services/square-hole-works', () => ({
   listSquareHoleWorks: vi.fn(),
 }));
 
+vi.mock('../../services/visual-novel-runtime', () => ({
+  listVisualNovelGallery: vi.fn(),
+  startVisualNovelRun: vi.fn(),
+  streamVisualNovelRuntimeAction: vi.fn(),
+}));
+
+vi.mock('../../services/visual-novel-works', () => ({
+  deleteVisualNovelWork: vi.fn(),
+  getVisualNovelWorkDetail: vi.fn(),
+  listVisualNovelWorks: vi.fn(),
+  publishVisualNovelWork: vi.fn(),
+  updateVisualNovelWork: vi.fn(),
+}));
+
+vi.mock('../../services/visual-novel-creation', () => ({
+  compileVisualNovelWorkProfile: vi.fn(),
+  createVisualNovelSession: vi.fn(),
+  executeVisualNovelAction: vi.fn(),
+  getVisualNovelSession: vi.fn(),
+  streamVisualNovelMessage: vi.fn(),
+}));
+
 vi.mock('../../services/creative-agent', () => ({
   cancelCreativeAgentSession: vi.fn(),
   confirmCreativePuzzleTemplate: vi.fn(),
@@ -1946,6 +1981,8 @@ beforeEach(() => {
   vi.mocked(upsertProfileBrowseHistory).mockResolvedValue([]);
   vi.mocked(clearProfileBrowseHistory).mockResolvedValue([]);
   vi.mocked(deleteRpgEntryWorldProfile).mockResolvedValue([]);
+  vi.mocked(listVisualNovelGallery).mockResolvedValue({ works: [] });
+  vi.mocked(listVisualNovelWorks).mockResolvedValue({ works: [] });
   vi.mocked(recordBigFishPlay).mockResolvedValue({ items: [] });
   vi.mocked(recordRpgEntryWorldGalleryPlay).mockImplementation(
     async (ownerUserId, profileId) => ({
@@ -2804,6 +2841,9 @@ test('create tab shows template tabs and embeds puzzle form by default', async (
   expect(
     screen.getByRole('tab', { name: '抓大鹅' }).querySelector('img')?.src,
   ).toContain('/creation-type-references/match3d.webp');
+  expect(
+    screen.getByRole('tab', { name: '宝贝识物' }).querySelector('img')?.src,
+  ).toContain('/child-motion-demo/picture-book-grass-stage.png');
   expect(
     screen.getByRole('tab', { name: '拼图' }).querySelector('.text-white'),
   ).toBeTruthy();
@@ -2815,6 +2855,7 @@ test('create tab shows template tabs and embeds puzzle form by default', async (
   expect(screen.queryByRole('button', { name: /角色扮演/u })).toBeNull();
   expect(screen.queryByRole('tab', { name: /方洞挑战/u })).toBeNull();
   expect(screen.getByRole('tab', { name: /抓大鹅/u })).toBeTruthy();
+  expect(screen.getByRole('tab', { name: /宝贝识物/u })).toBeTruthy();
   expect(createRpgCreationSession).not.toHaveBeenCalled();
   expect(match3dCreationClient.createSession).not.toHaveBeenCalled();
   expect(createPuzzleAgentSession).not.toHaveBeenCalled();
@@ -4705,6 +4746,30 @@ test('creation hub clears all private work shelves immediately after logout stat
   });
 });
 
+test('creation draft hub skips visual novel shelves when entry is not open', async () => {
+  const user = userEvent.setup();
+  vi.mocked(fetchCreationEntryConfig).mockResolvedValue({
+    ...testCreationEntryConfig,
+    creationTypes: testCreationEntryConfig.creationTypes.map((entry) =>
+      entry.id === 'visual-novel' ? { ...entry, open: false } : entry,
+    ),
+  });
+  vi.mocked(listVisualNovelGallery).mockRejectedValue(
+    new Error('该玩法入口暂不可用'),
+  );
+  vi.mocked(listVisualNovelWorks).mockRejectedValue(
+    new Error('该玩法入口暂不可用'),
+  );
+
+  render(<TestWrapper withAuth />);
+
+  await openDraftHub(user);
+
+  expect(listVisualNovelGallery).not.toHaveBeenCalled();
+  expect(listVisualNovelWorks).not.toHaveBeenCalled();
+  expect(screen.queryByText('该玩法入口暂不可用')).toBeNull();
+});
+
 test('published puzzle works appear on home and mobile game category channel', async () => {
   const user = userEvent.setup();
   const publishedPuzzleWork = {

src/components/rpg-entry/RpgEntryHomeView.tsx

@@ -15,6 +15,7 @@ import {
   LogIn,
   MessageCircle,
   Pencil,
+  Palette,
   Plus,
   Search,
   Settings,
@@ -152,6 +153,7 @@ export interface RpgEntryHomeViewProps {
   onOpenCreateWorld: () => void;
   onOpenCreateTypePicker: () => void;
   onOpenGalleryDetail: (entry: PlatformPublicGalleryCard) => void;
+  onOpenBabyLoveDrawing?: () => void;
   onOpenRecommendGalleryDetail?: (entry: PlatformPublicGalleryCard) => void;
   recommendRuntimeContent?: ReactNode;
   activeRecommendEntryKey?: string | null;
@@ -249,6 +251,11 @@ const EDUTAINMENT_DISCOVER_CHANNEL = {
   id: 'edutainment',
   label: EDUTAINMENT_WORK_TAG,
 } as const;
+const BABY_LOVE_DRAWING_DEFAULT_CARD = {
+  title: '宝贝爱画',
+  subtitle: '空白画板',
+  summary: '挥动小手画一张画。',
+};
 
 const PLATFORM_RANKING_TABS: Array<{
   id: PlatformRankingTab;
@@ -3218,6 +3225,7 @@ export function RpgEntryHomeView({
   onResumeSave,
   onOpenCreateTypePicker,
   onOpenGalleryDetail,
+  onOpenBabyLoveDrawing,
   onOpenRecommendGalleryDetail,
   recommendRuntimeContent,
   activeRecommendEntryKey = null,
@@ -4735,7 +4743,7 @@ export function RpgEntryHomeView({
             <section className="platform-mobile-home-feed">
               {isLoadingPlatform ? (
                 <EmptyShelf text="正在读取公开作品..." />
-              ) : edutainmentFeedEntries.length > 0 ? (
+              ) : edutainmentFeedEntries.length > 0 || onOpenBabyLoveDrawing ? (
                 <div className="grid min-w-0 gap-3">
                   {edutainmentFeedEntries.map((entry) => {
                     const cardKey = buildPublicGalleryCardKey(entry);
@@ -4751,6 +4759,24 @@ export function RpgEntryHomeView({
                       />
                     );
                   })}
+                  {onOpenBabyLoveDrawing ? (
+                    <button
+                      type="button"
+                      className="platform-edutainment-level-card"
+                      onClick={onOpenBabyLoveDrawing}
+                    >
+                      <span className="platform-edutainment-level-card__icon">
+                        <Palette className="h-7 w-7" />
+                      </span>
+                      <span className="platform-edutainment-level-card__body">
+                        <strong>{BABY_LOVE_DRAWING_DEFAULT_CARD.title}</strong>
+                        <span>{BABY_LOVE_DRAWING_DEFAULT_CARD.subtitle}</span>
+                      </span>
+                      <span className="platform-edutainment-level-card__summary">
+                        {BABY_LOVE_DRAWING_DEFAULT_CARD.summary}
+                      </span>
+                    </button>
+                  ) : null}
                 </div>
               ) : (
                 <EmptyShelf text="暂时还没有可展示的作品。" />
@@ -4867,7 +4893,7 @@ export function RpgEntryHomeView({
           <SectionHeader title={EDUTAINMENT_WORK_TAG} detail="EDUTAINMENT" />
           {isLoadingPlatform ? (
             <EmptyShelf text="正在读取公开作品..." />
-          ) : edutainmentFeedEntries.length > 0 ? (
+          ) : edutainmentFeedEntries.length > 0 || onOpenBabyLoveDrawing ? (
             <div className="grid gap-4 xl:grid-cols-3">
               {edutainmentFeedEntries.map((entry) => (
                 <WorldCard
@@ -4878,6 +4904,24 @@ export function RpgEntryHomeView({
                   authorAvatarUrl={getPublicEntryAuthorAvatarUrl(entry)}
                 />
               ))}
+              {onOpenBabyLoveDrawing ? (
+                <button
+                  type="button"
+                  className="platform-edutainment-level-card"
+                  onClick={onOpenBabyLoveDrawing}
+                >
+                  <span className="platform-edutainment-level-card__icon">
+                    <Palette className="h-7 w-7" />
+                  </span>
+                  <span className="platform-edutainment-level-card__body">
+                    <strong>{BABY_LOVE_DRAWING_DEFAULT_CARD.title}</strong>
+                    <span>{BABY_LOVE_DRAWING_DEFAULT_CARD.subtitle}</span>
+                  </span>
+                  <span className="platform-edutainment-level-card__summary">
+                    {BABY_LOVE_DRAWING_DEFAULT_CARD.summary}
+                  </span>
+                </button>
+              ) : null}
             </div>
           ) : (
             <EmptyShelf text="暂时还没有可展示的作品。" />

src/components/rpg-entry/rpgEntryWorldPresentation.test.ts

@@ -41,10 +41,9 @@ test('platform work display text limits names and tags by character count', () =
   expect(formatPlatformWorkDisplayName('热门高分拼图超长标题')).toBe(
     '热门高分拼图超长',
   );
-  expect(formatPlatformWorkDisplayTags(['超长机关标签', '星桥', '超长机关标签'])).toEqual([
-    '超长机关',
-    '星桥',
-  ]);
+  expect(
+    formatPlatformWorkDisplayTags(['超长机关标签', '星桥', '超长机关标签']),
+  ).toEqual(['超长机关', '星桥']);
 });
 
 test('buildPuzzleWorkCoverSlides prefers each level formal image', () => {
@@ -195,6 +194,7 @@ test('maps baby object match draft to edutainment public card', () => {
         prompt: '香蕉',
       },
     ],
+    visualPackage: null,
     themeTags: ['寓教于乐', '宝贝识物'],
     publicationStatus: 'published',
     createdAt: '2026-05-11T10:00:00.000Z',

src/routing/appPageRoutes.ts

@@ -30,6 +30,7 @@ const STAGE_ROUTE_ENTRIES = [
   ['baby-object-match-generating', '/creation/baby-object-match/generating'],
   ['baby-object-match-result', '/creation/baby-object-match/result'],
   ['baby-object-match-runtime', '/runtime/baby-object-match'],
+  ['baby-love-drawing-runtime', '/runtime/baby-love-drawing'],
   ['puzzle-agent-workspace', '/creation/puzzle/agent'],
   ['puzzle-result', '/creation/puzzle/result'],
   ['puzzle-gallery-detail', '/gallery/puzzle/detail'],

src/routing/appRoutes.test.ts

@@ -45,6 +45,20 @@ describe('matchAppRoute', () => {
     });
   });
 
+  it('routes baby love drawing path to the standalone runtime when edutainment is enabled', () => {
+    expect(matchAppRoute('/runtime/baby-love-drawing')).toEqual({
+      kind: 'baby-love-drawing',
+    });
+  });
+
+  it('blocks direct baby love drawing path when edutainment entry is disabled', () => {
+    vi.stubEnv('VITE_ENABLE_EDUTAINMENT_ENTRY', 'false');
+
+    expect(matchAppRoute('/runtime/baby-love-drawing')).toEqual({
+      kind: 'game',
+    });
+  });
+
   it('routes former standalone editor paths back to the main game', () => {
     expect(matchAppRoute('/item-editor/tools')).toEqual({
       kind: 'game',

src/routing/appRoutes.tsx

@@ -25,6 +25,9 @@ export type AppRouteMatch =
   | {
       kind: 'child-motion-demo';
     }
+  | {
+      kind: 'baby-love-drawing';
+    }
   | {
       kind: 'game';
     };
@@ -43,6 +46,9 @@ const Match3DPlaygroundApp = lazy(() => import('../Match3DPlaygroundApp')) as Ap
 const BarkBattlePlaygroundApp = lazy(() => import('../BarkBattlePlaygroundApp')) as AppRouteComponent;
 const PuzzlePlaygroundApp = lazy(() => import('../PuzzlePlaygroundApp')) as AppRouteComponent;
 const ChildMotionDemoApp = lazy(() => import('../ChildMotionDemoApp')) as AppRouteComponent;
+const BabyLoveDrawingRuntimeApp = lazy(
+  () => import('../components/edutainment-runtime/BabyLoveDrawingRuntimeShell'),
+) as AppRouteComponent;
 
 function normalizeRoutePath(pathname: string) {
   return normalizeAppPath(pathname);
@@ -84,6 +90,15 @@ export function matchAppRoute(pathname: string): AppRouteMatch {
     };
   }
 
+  if (
+    normalizedPath === '/runtime/baby-love-drawing' &&
+    isEdutainmentEntryEnabled()
+  ) {
+    return {
+      kind: 'baby-love-drawing',
+    };
+  }
+
   return {
     kind: 'game',
   };
@@ -137,6 +152,15 @@ export function resolveAppRoute(pathname: string): ResolvedAppRoute {
     };
   }
 
+  if (matchedRoute.kind === 'baby-love-drawing') {
+    return {
+      kind: 'baby-love-drawing',
+      loadingEyebrow: '正在载入宝贝爱画',
+      loadingText: '正在进入画板...',
+      Component: BabyLoveDrawingRuntimeApp,
+    };
+  }
+
   return {
     kind: 'game',
     loadingEyebrow: '正在载入游戏',