收口前端平台组件库能力

新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件
迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome
补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录

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

@@ -63,7 +63,7 @@ function createDraft(overrides: Partial<BabyObjectMatchDraft> = {}) {
   return draft;
 }
 
-function createGeneratedDraft() {
+function createGeneratedDraft(overrides: Partial<BabyObjectMatchDraft> = {}) {
   return createDraft({
     itemAssets: [
       {
@@ -112,6 +112,7 @@ function createGeneratedDraft() {
         },
       ],
     },
+    ...overrides,
   });
 }
 
@@ -136,6 +137,41 @@ test('baby object result publishes with exact edutainment tag', async () => {
   expect(onPublish.mock.calls[0]?.[0].themeTags).toContain('宝贝识物');
 });
 
+test('baby object result uses shared pill badges and subpanels', () => {
+  const { container } = render(
+    <BabyObjectMatchResultView
+      draft={createGeneratedDraft({
+        publicationStatus: 'published',
+      })}
+      onBack={() => {}}
+    />,
+  );
+
+  const statusBadge = screen.getByText('已发布');
+  const templatePanel = screen.getByText('模板').closest('div.bg-white\\/68');
+  const itemPanel = screen.getByText('苹果').closest('article');
+  const itemImageFrame = screen
+    .getByRole('img', { name: '苹果' })
+    .closest('div.relative');
+
+  expect(statusBadge.className).toContain('rounded-full');
+  expect(statusBadge.className).toContain('border-emerald-200');
+  expect(
+    screen.getByText(BABY_OBJECT_MATCH_EDUTAINMENT_TAG).className,
+  ).toContain('border-emerald-200');
+  expect(templatePanel?.className).toContain(
+    'border-[var(--platform-subpanel-border)]',
+  );
+  expect(itemPanel?.className).toContain('rounded-[1rem]');
+  expect(itemImageFrame?.className).toContain('aspect-square');
+  expect(itemImageFrame?.className).toContain('rounded-none');
+  expect(itemImageFrame?.className).toContain('linear-gradient');
+  expect(itemImageFrame?.className).not.toContain(
+    'bg-[var(--platform-subpanel-fill)]',
+  );
+  expect(container.querySelectorAll('article')).toHaveLength(2);
+});
+
 test('baby object result exposes save and test run actions', async () => {
   const user = userEvent.setup();
   const onSaveDraft = vi.fn();
@@ -184,6 +220,14 @@ test('baby object result blocks placeholder assets and exposes regeneration', as
     (screen.getByRole('button', { name: '发布' }) as HTMLButtonElement)
       .disabled,
   ).toBe(true);
+  for (const placeholderBadge of screen.getAllByText('占位图')) {
+    expect(placeholderBadge.className).toContain('absolute');
+    expect(placeholderBadge.className).toContain('right-2');
+    expect(placeholderBadge.className).toContain('rounded-full');
+    expect(placeholderBadge.className).toContain(
+      'border-[var(--platform-subpanel-border)]',
+    );
+  }
 
   await user.click(screen.getByRole('button', { name: '重新生成资源' }));
 

src/components/edutainment-result/BabyObjectMatchResultView.tsx

@@ -15,7 +15,12 @@ import {
   hasBabyObjectMatchRequiredTag,
   normalizeBabyObjectMatchTags,
 } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
-import { ResolvedAssetImage } from '../ResolvedAssetImage';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
+import { PlatformOverlayBadge } from '../common/PlatformOverlayBadge';
+import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformSubpanel } from '../common/PlatformSubpanel';
 
 type BabyObjectMatchResultViewProps = {
   draft: BabyObjectMatchDraft;
@@ -52,7 +57,10 @@ export function BabyObjectMatchResultView({
   onStartTestRun,
   onRegenerateAssets,
 }: BabyObjectMatchResultViewProps) {
-  const normalizedDraft = useMemo(() => normalizeDraftForAction(draft), [draft]);
+  const normalizedDraft = useMemo(
+    () => normalizeDraftForAction(draft),
+    [draft],
+  );
   const hasGeneratedAssets =
     normalizedDraft.itemAssets.every(
       (asset) =>
@@ -79,105 +87,135 @@ export function BabyObjectMatchResultView({
     <div className="platform-page-stage platform-remap-surface flex h-full min-h-0 flex-col overflow-hidden px-3 pb-3 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-4 xl:pt-4">
       <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col">
         <div className="mb-3 flex shrink-0 items-center justify-between gap-3">
-          <button
-            type="button"
+          <PlatformActionButton
             onClick={onBack}
             disabled={isBusy}
-            className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
+            tone="ghost"
+            size="xs"
+            className="min-h-0 gap-2 px-3 py-1.5 text-[11px]"
           >
             <ArrowLeft className="h-3.5 w-3.5" />
             返回
-          </button>
+          </PlatformActionButton>
           <div className="flex min-w-0 items-center gap-2">
-            <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-black text-emerald-700">
+            <PlatformPillBadge
+              tone={isPublished ? 'success' : 'neutral'}
+              size="xs"
+            >
               {isPublished ? '已发布' : '草稿'}
-            </span>
+            </PlatformPillBadge>
           </div>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto pr-0.5">
           <section className="grid gap-3 lg:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
-            <div className="rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/68 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.74)]">
-              <div className="text-sm font-black text-[var(--platform-text-soft)]">
-                模板
-              </div>
+            <PlatformSubpanel
+              as="div"
+              surface="flat"
+              radius="sm"
+              title="模板"
+              titleVariant="strong"
+              className="bg-white/68 shadow-[inset_0_1px_0_rgba(255,255,255,0.74)]"
+            >
               <h1 className="mt-2 m-0 text-3xl font-black leading-tight tracking-normal text-[var(--platform-text-strong)] sm:text-5xl">
                 {normalizedDraft.workTitle}
               </h1>
               <div className="mt-4 flex flex-wrap gap-2">
                 {normalizedDraft.themeTags.map((tag) => (
-                  <span
+                  <PlatformPillBadge
                     key={tag}
-                    className={`inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-black ${
+                    tone={
                       tag === BABY_OBJECT_MATCH_EDUTAINMENT_TAG
-                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                        : 'border-[var(--platform-subpanel-border)] bg-white/72 text-[var(--platform-text-base)]'
-                    }`}
+                        ? 'success'
+                        : 'neutral'
+                    }
+                    icon={<Tag className="h-3 w-3" />}
                   >
-                    <Tag className="h-3 w-3" />
                     {tag}
-                  </span>
+                  </PlatformPillBadge>
                 ))}
               </div>
-            </div>
+            </PlatformSubpanel>
 
             <div className="grid gap-3 sm:grid-cols-2">
               {normalizedDraft.itemAssets.map((asset) => (
-                <article
+                <PlatformSubpanel
+                  as="article"
                   key={asset.itemId}
-                  className="overflow-hidden rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/72 shadow-[inset_0_1px_0_rgba(255,255,255,0.76)]"
+                  surface="flat"
+                  radius="sm"
+                  padding="none"
+                  className="overflow-hidden shadow-[inset_0_1px_0_rgba(255,255,255,0.76)]"
                 >
-                  <div className="relative aspect-square overflow-hidden bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))]">
-                    <ResolvedAssetImage
-                      src={asset.imageSrc}
-                      alt={asset.itemName}
-                      className="absolute inset-0 h-full w-full object-cover"
-                      loading="lazy"
-                    />
-                    {asset.generationProvider === 'placeholder' ? (
-                      <span className="absolute right-2 top-2 rounded-full bg-white/86 px-2 py-0.5 text-[10px] font-black text-[var(--platform-text-soft)] shadow-sm">
-                        占位图
-                      </span>
-                    ) : null}
-                  </div>
+                  <PlatformMediaFrame
+                    src={asset.imageSrc}
+                    alt={asset.itemName}
+                    fallbackLabel={asset.itemName}
+                    aspect="square"
+                    surface="none"
+                    loading="lazy"
+                    imageClassName="absolute inset-0 h-full w-full object-cover"
+                    className="rounded-none bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))]"
+                    fallbackClassName="tracking-normal text-[var(--platform-text-soft)]"
+                    previewOverlay={
+                      asset.generationProvider === 'placeholder' ? (
+                        <PlatformOverlayBadge
+                          placement="topRight"
+                          offset="tight"
+                          tone="muted"
+                          size="compact"
+                        >
+                          占位图
+                        </PlatformOverlayBadge>
+                      ) : null
+                    }
+                  />
                   <div className="p-3">
                     <div className="truncate text-lg font-black text-[var(--platform-text-strong)]">
                       {asset.itemName}
                     </div>
                   </div>
-                </article>
+                </PlatformSubpanel>
               ))}
             </div>
           </section>
 
           {error ? (
-            <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="md"
+              className="mt-3"
+            >
               {error}
-            </div>
+            </PlatformStatusMessage>
           ) : null}
 
           {!hasGeneratedAssets ? (
-            <div className="platform-banner mt-3 rounded-2xl text-sm leading-6">
+            <PlatformStatusMessage
+              tone="neutral"
+              surface="platform"
+              size="md"
+              className="mt-3 rounded-2xl"
+            >
               当前作品仍是占位资源，请重新生成素材后再试玩或发布。
-            </div>
+            </PlatformStatusMessage>
           ) : null}
         </div>
 
         <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"
+          <PlatformActionButton
             disabled={isBusy || !onSaveDraft}
             onClick={() => onSaveDraft?.(normalizedDraft)}
-            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+            tone="secondary"
           >
             <Save className="h-4 w-4" />
             保存草稿
-          </button>
-          <button
-            type="button"
+          </PlatformActionButton>
+          <PlatformActionButton
             disabled={isBusy || !onRegenerateAssets}
             onClick={() => onRegenerateAssets?.(normalizedDraft)}
-            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+            tone="secondary"
           >
             {isBusy ? (
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -185,21 +223,18 @@ export function BabyObjectMatchResultView({
               <RefreshCw className="h-4 w-4" />
             )}
             重新生成资源
-          </button>
-          <button
-            type="button"
+          </PlatformActionButton>
+          <PlatformActionButton
             disabled={isBusy || !hasGeneratedAssets || !onStartTestRun}
             onClick={() => onStartTestRun?.(normalizedDraft)}
-            className="platform-button platform-button--secondary justify-center disabled:cursor-not-allowed disabled:opacity-55"
+            tone="secondary"
           >
             <Play className="h-4 w-4" />
             试玩
-          </button>
-          <button
-            type="button"
+          </PlatformActionButton>
+          <PlatformActionButton
             disabled={isBusy || !publishReady || !onPublish}
             onClick={() => onPublish?.(normalizedDraft)}
-            className="platform-button platform-button--primary justify-center disabled:cursor-not-allowed disabled:opacity-55"
           >
             {isBusy ? (
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -207,7 +242,7 @@ export function BabyObjectMatchResultView({
               <CheckCircle2 className="h-4 w-4" />
             )}
             发布
-          </button>
+          </PlatformActionButton>
         </div>
       </div>
     </div>