收口前端平台组件库能力

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

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>