收口运行态状态提示组件

新增 PlatformRuntimeStatusToast 统一运行态短错误、成功和反馈 toast
迁移跳一跳、拼图、敲木鱼、方洞和宝贝爱画运行态状态 chip
补充公共组件与运行态回归测试，并更新 PlatformUiKit 文档和 Hermes 决策记录

src/components/common/PlatformRuntimeStatusToast.test.tsx

@@ -0,0 +1,46 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+import { PlatformRuntimeStatusToast } from './PlatformRuntimeStatusToast';
+
+test('renders error runtime toast with alert semantics', () => {
+  render(
+    <PlatformRuntimeStatusToast tone="error" className="mt-2">
+      操作失败
+    </PlatformRuntimeStatusToast>,
+  );
+
+  const toast = screen.getByRole('alert');
+
+  expect(toast.className).toContain('platform-runtime-status-toast');
+  expect(toast.className).toContain('rounded-full');
+  expect(toast.className).toContain(
+    'text-[var(--platform-button-danger-text)]',
+  );
+  expect(toast.className).toContain('mt-2');
+  expect(toast.getAttribute('aria-live')).toBe('assertive');
+});
+
+test('supports dark and solid runtime surfaces', () => {
+  const { rerender } = render(
+    <PlatformRuntimeStatusToast tone="success" surface="dark" shape="rounded">
+      命中
+    </PlatformRuntimeStatusToast>,
+  );
+
+  expect(screen.getByRole('status').className).toContain(
+    'border-emerald-200/35',
+  );
+  expect(screen.getByRole('status').className).toContain('rounded-[1.2rem]');
+
+  rerender(
+    <PlatformRuntimeStatusToast tone="error" surface="solid" size="md">
+      运行失败
+    </PlatformRuntimeStatusToast>,
+  );
+
+  expect(screen.getByRole('alert').className).toContain('bg-rose-600');
+  expect(screen.getByRole('alert').className).toContain('px-4');
+});

src/components/common/PlatformRuntimeStatusToast.tsx

@@ -0,0 +1,104 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformRuntimeStatusTone =
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'neutral';
+type PlatformRuntimeStatusSurface = 'light' | 'dark' | 'solid';
+type PlatformRuntimeStatusSize = 'xs' | 'sm' | 'md';
+type PlatformRuntimeStatusShape = 'pill' | 'rounded';
+
+type PlatformRuntimeStatusToastProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  tone: PlatformRuntimeStatusTone;
+  surface?: PlatformRuntimeStatusSurface;
+  size?: PlatformRuntimeStatusSize;
+  shape?: PlatformRuntimeStatusShape;
+  children: ReactNode;
+};
+
+const PLATFORM_RUNTIME_STATUS_SURFACE_CLASS: Record<
+  PlatformRuntimeStatusSurface,
+  Record<PlatformRuntimeStatusTone, string>
+> = {
+  light: {
+    error:
+      'border-white/70 bg-white/86 text-[var(--platform-button-danger-text)]',
+    success:
+      'border-white/70 bg-white/86 text-[var(--platform-success-text)]',
+    info: 'border-white/70 bg-white/86 text-[var(--platform-cool-text)]',
+    warning: 'border-white/70 bg-white/86 text-[var(--platform-warm-text)]',
+    neutral: 'border-white/70 bg-white/86 text-[var(--platform-text-base)]',
+  },
+  dark: {
+    error: 'border-rose-200/35 bg-rose-400/18 text-rose-50',
+    success: 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50',
+    info: 'border-sky-200/30 bg-sky-400/16 text-sky-50',
+    warning: 'border-amber-200/35 bg-amber-400/18 text-amber-50',
+    neutral: 'border-white/15 bg-white/12 text-white/82',
+  },
+  solid: {
+    error: 'border-transparent bg-rose-600 text-white',
+    success: 'border-transparent bg-emerald-600 text-white',
+    info: 'border-transparent bg-sky-600 text-white',
+    warning: 'border-transparent bg-amber-500 text-amber-950',
+    neutral: 'border-transparent bg-slate-800 text-white',
+  },
+};
+
+const PLATFORM_RUNTIME_STATUS_SIZE_CLASS: Record<
+  PlatformRuntimeStatusSize,
+  string
+> = {
+  xs: 'px-3 py-1 text-xs leading-5',
+  sm: 'px-3 py-2 text-sm leading-5',
+  md: 'px-4 py-3 text-sm leading-6',
+};
+
+const PLATFORM_RUNTIME_STATUS_SHAPE_CLASS: Record<
+  PlatformRuntimeStatusShape,
+  string
+> = {
+  pill: 'rounded-full',
+  rounded: 'rounded-[1.2rem]',
+};
+
+/**
+ * 运行态 HUD 状态提示。
+ * 收口游戏内短错误、成功和反馈 chip，位置与玩法强品牌视觉仍由调用方控制。
+ */
+export function PlatformRuntimeStatusToast({
+  tone,
+  surface = 'light',
+  size = 'sm',
+  shape = 'pill',
+  children,
+  className,
+  role,
+  ...divProps
+}: PlatformRuntimeStatusToastProps) {
+  const ariaLive = divProps['aria-live'];
+
+  return (
+    <div
+      {...divProps}
+      role={role ?? (tone === 'error' ? 'alert' : 'status')}
+      aria-live={ariaLive ?? (tone === 'error' ? 'assertive' : 'polite')}
+      className={[
+        'platform-runtime-status-toast inline-flex max-w-full items-center justify-center gap-1.5 border text-center font-black shadow-sm backdrop-blur',
+        PLATFORM_RUNTIME_STATUS_SIZE_CLASS[size],
+        PLATFORM_RUNTIME_STATUS_SHAPE_CLASS[shape],
+        PLATFORM_RUNTIME_STATUS_SURFACE_CLASS[surface][tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -117,7 +117,11 @@ test('finish then save stores original drawing in local demo service', () => {
       magicImageSrc: null,
     }),
   );
-  expect(screen.getByText('已保存')).toBeTruthy();
+  const savedToast = screen.getByText('已保存');
+  expect(savedToast.className).toContain('platform-runtime-status-toast');
+  expect(savedToast.className).toContain(
+    'baby-love-drawing-runtime__status--saved',
+  );
 });
 
 test('back button calls onBack callback', () => {

src/components/edutainment-runtime/BabyLoveDrawingRuntimeShell.tsx

@@ -31,6 +31,7 @@ import {
 } from '../../services/edutainment-baby-drawing';
 import type { MocapHandInput } from '../../services/useMocapInput';
 import { useMocapInput } from '../../services/useMocapInput';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
 import {
   appendPointToStroke,
   BABY_LOVE_DRAWING_BRUSH_SIZE,
@@ -884,14 +885,23 @@ export function BabyLoveDrawingRuntimeShell({
       </div>
 
       {error ? (
-        <div className="baby-love-drawing-runtime__error">{error}</div>
+        <PlatformRuntimeStatusToast
+          tone="error"
+          className="baby-love-drawing-runtime__status baby-love-drawing-runtime__status--top"
+        >
+          {error}
+        </PlatformRuntimeStatusToast>
       ) : null}
 
       {savedRecord ? (
-        <div className="baby-love-drawing-runtime__saved" role="status">
+        <PlatformRuntimeStatusToast
+          tone="success"
+          role="status"
+          className="baby-love-drawing-runtime__status baby-love-drawing-runtime__status--saved"
+        >
           <ImagePlus className="h-5 w-5" />
           已保存
-        </div>
+        </PlatformRuntimeStatusToast>
       ) : null}
 
       {leftHandPoint ? (

src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx

@@ -10,10 +10,10 @@ import type {
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
 import {
-  JUMP_HOP_THREE_CAMERA_UP_Y,
-  JumpHopRuntimeShell,
   getJumpHopThreeProjectedY,
   getJumpHopTileTextureSignature,
+  JUMP_HOP_THREE_CAMERA_UP_Y,
+  JumpHopRuntimeShell,
 } from './JumpHopRuntimeShell';
 
 vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
@@ -360,6 +360,23 @@ test('跳一跳运行态背景和游戏舞台覆盖全部界面且 HUD 使用独
   expect(scoreCard.className).toContain('text-center');
 });
 
+test('跳一跳运行态错误提示使用公共运行态 toast', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile()}
+      run={buildRun()}
+      error="跳跃失败"
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const toast = screen.getByRole('alert');
+
+  expect(toast.textContent).toBe('跳跃失败');
+  expect(toast.className).toContain('platform-runtime-status-toast');
+});
+
 test('跳一跳运行态失败后在弹窗中展示排行榜', () => {
   const runtimeRequestOptions = {
     runtimeGuestToken: 'runtime-guest-token',

src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx

@@ -14,8 +14,8 @@ import {
 import jumpHopRuntimeLevelLogo from '../../../media/logo.png';
 import type {
   JumpHopRuntimeRunSnapshotResponse,
-  JumpHopTileFaceAsset,
   JumpHopTileAsset,
+  JumpHopTileFaceAsset,
   JumpHopWorkProfileResponse,
 } from '../../../packages/shared/src/contracts/jumpHop';
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
@@ -27,9 +27,9 @@ import type { JumpHopRuntimeRequestOptions } from '../../services/jump-hop/jumpH
 import {
   buildJumpHopVisiblePlatforms,
   formatJumpHopDurationLabel,
+  getJumpHopBackendDragVector,
   getJumpHopCharacterVisualPosition,
   getJumpHopJumpFeedbackLabel,
-  getJumpHopBackendDragVector,
   getJumpHopLandingAssistVisualPosition,
   getJumpHopPlatformVisualSize,
   getJumpHopRunDurationMs,
@@ -42,6 +42,7 @@ import {
 } from '../../services/jump-hop/jumpHopRuntimeModel';
 import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
 import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMarker';
 
 type JumpHopRuntimeJumpPayload = {
@@ -2374,9 +2375,9 @@ export function JumpHopRuntimeShell({
 
       {error ? (
         <footer className="pointer-events-none absolute inset-x-0 bottom-[max(0.75rem,env(safe-area-inset-bottom))] z-[130] flex items-center justify-center px-3">
-          <div className="pointer-events-auto min-w-0 rounded-full bg-white/82 px-3 py-2 text-sm font-bold text-[var(--platform-button-danger-text)] shadow-sm backdrop-blur">
+          <PlatformRuntimeStatusToast tone="error" surface="light" size="sm">
             {error}
-          </div>
+          </PlatformRuntimeStatusToast>
         </footer>
       ) : null}
 

src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx

@@ -200,6 +200,30 @@ test('拼图界面不调用 mocap，也不渲染 mocap 光标或调试面板', (
   expect(screen.queryByTestId('puzzle-mocap-cursor')).toBeNull();
 });
 
+test('拼图运行态错误提示使用公共运行态 toast', () => {
+  renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={{
+        ...clearedRun,
+        currentLevel: {
+          ...clearedRun.currentLevel!,
+          status: 'playing',
+        },
+      }}
+      error="交换失败"
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+
+  const toast = screen.getByRole('alert');
+
+  expect(toast.textContent).toBe('交换失败');
+  expect(toast.className).toContain('platform-runtime-status-toast');
+});
+
 test('指针拖拽时会触发拖拽提交并在松开时落子', () => {
   const originalRequestAnimationFrame = window.requestAnimationFrame;
   const onDragPiece = vi.fn();

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -55,6 +55,7 @@ import {
   resolveRuntimeCountdownSecondBucket,
 } from '../../services/runtimeAudioFeedback';
 import { useAuthUi } from '../auth/AuthUiContext';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
 import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMarker';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import {
@@ -1987,9 +1988,9 @@ export function PuzzleRuntimeShell({
 
         <div className="absolute bottom-0 left-0 z-20 flex w-full flex-col items-center gap-2 px-3 py-3 sm:px-4 sm:py-4">
           {error ? (
-            <div className="puzzle-runtime-error-chip rounded-full px-3 py-1 text-xs">
+            <PlatformRuntimeStatusToast tone="error" size="xs">
               {error}
-            </div>
+            </PlatformRuntimeStatusToast>
           ) : null}
           {selectedPieceId &&
           shouldDisplaySelectedState &&
@@ -2202,9 +2203,14 @@ export function PuzzleRuntimeShell({
               <div className="puzzle-runtime-dialog__body px-5 py-4 text-sm">
                 消耗 1 泥点
                 {propConfirmError ? (
-                  <div className="puzzle-runtime-error-chip mt-3 rounded-[0.9rem] border px-3 py-2 text-xs leading-5">
+                  <PlatformRuntimeStatusToast
+                    tone="error"
+                    size="xs"
+                    shape="rounded"
+                    className="mt-3"
+                  >
                     {propConfirmError}
-                  </div>
+                  </PlatformRuntimeStatusToast>
                 ) : null}
               </div>
               <footer className="puzzle-runtime-dialog__line flex items-center justify-end gap-3 border-t px-5 py-4">

src/components/square-hole-runtime/SquareHoleRuntimeShell.test.tsx

@@ -103,6 +103,25 @@ test('点击洞口会提交该洞口选择', async () => {
   });
 });
 
+test('错误提示使用公共运行态 toast', () => {
+  const run = buildRun();
+
+  render(
+    <SquareHoleRuntimeShell
+      run={run}
+      error="投放失败"
+      onBack={vi.fn()}
+      onRestart={vi.fn()}
+      onDropShape={vi.fn()}
+    />,
+  );
+
+  const toast = screen.getByRole('alert');
+
+  expect(toast.textContent).toBe('投放失败');
+  expect(toast.className).toContain('platform-runtime-status-toast');
+});
+
 test('引导高亮不会默认指向当前正确洞口', () => {
   renderRuntime();
 

src/components/square-hole-runtime/SquareHoleRuntimeShell.tsx

@@ -23,6 +23,7 @@ import type {
   SquareHoleDropResponse,
   SquareHoleRunSnapshot,
 } from '../../../packages/shared/src/contracts/squareHoleRuntime';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 
 type SquareHoleRuntimeShellProps = {
@@ -531,19 +532,23 @@ export function SquareHoleRuntimeShell({
 
         <section className="mt-auto min-h-[3.5rem] pt-3">
           {feedback ? (
-            <div
-              className={`rounded-[1.2rem] border px-3 py-2 text-center text-sm font-black ${
-                feedback.accepted
-                  ? 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50'
-                  : 'border-rose-200/35 bg-rose-400/18 text-rose-50'
-              }`}
+            <PlatformRuntimeStatusToast
+              tone={feedback.accepted ? 'success' : 'error'}
+              surface="dark"
+              shape="rounded"
+              className="w-full"
             >
               {feedback.message}
-            </div>
+            </PlatformRuntimeStatusToast>
           ) : dropError || error ? (
-            <div className="rounded-[1.2rem] border border-rose-200/35 bg-rose-400/18 px-3 py-2 text-center text-sm font-black text-rose-50">
+            <PlatformRuntimeStatusToast
+              tone="error"
+              surface="dark"
+              shape="rounded"
+              className="w-full"
+            >
               {dropError ?? error}
-            </div>
+            </PlatformRuntimeStatusToast>
           ) : null}
         </section>
       </div>

src/components/wooden-fish-runtime/WoodenFishRuntimeShell.test.tsx

@@ -195,6 +195,22 @@ test('木鱼运行态使用生成的主题返回按钮图', () => {
   expect(backButton.className).toContain('w-10');
 });
 
+test('木鱼运行态错误提示使用公共运行态 toast', () => {
+  render(
+    <WoodenFishRuntimeShell
+      profile={createProfile()}
+      run={createRun()}
+      error="同步失败"
+    />,
+  );
+
+  const toast = screen.getByRole('alert');
+
+  expect(toast.textContent).toBe('同步失败');
+  expect(toast.className).toContain('platform-runtime-status-toast');
+  expect(toast.getAttribute('data-wooden-fish-functional')).toBe('true');
+});
+
 test('木鱼运行态飘字去掉底板并放大字号', () => {
   const { container } = render(
     <WoodenFishRuntimeShell profile={createProfile()} run={createRun()} />,

src/components/wooden-fish-runtime/WoodenFishRuntimeShell.tsx

@@ -20,6 +20,7 @@ import {
   WOODEN_FISH_DEFAULT_HIT_SOUND_ASSET,
 } from '../../services/wooden-fish/woodenFishDefaults';
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
 import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMarker';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import {
@@ -410,12 +411,16 @@ export function WoodenFishRuntimeShell({
       </main>
 
       {error ? (
-        <div
+        <PlatformRuntimeStatusToast
           data-wooden-fish-functional="true"
-          className="absolute bottom-20 left-3 right-3 z-40 rounded-2xl bg-rose-600 px-4 py-3 text-sm font-bold text-white shadow-lg"
+          tone="error"
+          surface="solid"
+          size="md"
+          shape="rounded"
+          className="absolute bottom-20 left-3 right-3 z-40 shadow-lg"
         >
           {error}
-        </div>
+        </PlatformRuntimeStatusToast>
       ) : null}
 
       <style>{`