收口前端平台组件库能力

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

src/components/edutainment-creation/BabyObjectMatchWorkspace.tsx

@@ -3,6 +3,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { CreateBabyObjectMatchDraftRequest } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
 import { validateBabyObjectMatchItemNames } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import { PlatformIconBadge } from '../common/PlatformIconBadge';
+import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformSubpanel } from '../common/PlatformSubpanel';
+import { PlatformTextField } from '../common/PlatformTextField';
 
 type BabyObjectMatchWorkspaceProps = {
   isBusy?: boolean;
@@ -73,15 +80,16 @@ export function BabyObjectMatchWorkspace({
     <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-hidden">
       {showBackButton ? (
         <div className="mb-3 flex shrink-0 items-center justify-between gap-3 sm:mb-4">
-          <button
-            type="button"
+          <PlatformActionButton
             onClick={onBack}
             disabled={isBusy}
-            className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
+            tone="ghost"
+            size="xs"
+            className="min-h-0 self-start gap-1.5 px-3 py-1.5 text-[11px]"
           >
             <ArrowLeft className="h-3.5 w-3.5" />
             返回
-          </button>
+          </PlatformActionButton>
         </div>
       ) : null}
 
@@ -92,9 +100,9 @@ export function BabyObjectMatchWorkspace({
               <h1 className="m-0 text-3xl font-black leading-none tracking-normal text-[var(--platform-text-strong)] sm:text-7xl">
                 {title}
               </h1>
-              <span className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-black text-emerald-700">
+              <PlatformPillBadge tone="success" size="xs">
                 BETA
-              </span>
+              </PlatformPillBadge>
             </div>
           </div>
         ) : null}
@@ -105,10 +113,8 @@ export function BabyObjectMatchWorkspace({
           >
             <div className="grid min-h-0 gap-3 sm:grid-cols-2 lg:grid-cols-1">
               <label className="block min-h-0">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  物品 A
-                </span>
-                <input
+                <PlatformFieldLabel variant="form">物品 A</PlatformFieldLabel>
+                <PlatformTextField
                   value={formState.itemAName}
                   disabled={isBusy}
                   placeholder=""
@@ -118,15 +124,16 @@ export function BabyObjectMatchWorkspace({
                       itemAName: event.target.value,
                     }))
                   }
-                  className="min-h-12 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-emerald-200 focus:bg-white focus:ring-2 focus:ring-emerald-100"
+                  size="lg"
+                  density="roomy"
+                  tone="emerald"
+                  className="min-h-12 rounded-[1.05rem]"
                   aria-label="物品 A"
                 />
               </label>
               <label className="block min-h-0">
-                <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                  物品 B
-                </span>
-                <input
+                <PlatformFieldLabel variant="form">物品 B</PlatformFieldLabel>
+                <PlatformTextField
                   value={formState.itemBName}
                   disabled={isBusy}
                   placeholder=""
@@ -136,49 +143,65 @@ export function BabyObjectMatchWorkspace({
                       itemBName: event.target.value,
                     }))
                   }
-                  className="min-h-12 w-full rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none transition focus:border-emerald-200 focus:bg-white focus:ring-2 focus:ring-emerald-100"
+                  size="lg"
+                  density="roomy"
+                  tone="emerald"
+                  className="min-h-12 rounded-[1.05rem]"
                   aria-label="物品 B"
                 />
               </label>
             </div>
 
-            <div className="relative min-h-[8rem] overflow-hidden rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.78)]">
+            <PlatformSubpanel
+              as="div"
+              surface="soft"
+              radius="md"
+              padding="md"
+              className="relative min-h-[8rem] overflow-hidden bg-[linear-gradient(145deg,rgba(236,253,245,0.92),rgba(255,247,237,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.78)]"
+            >
               <div className="absolute -right-8 -top-8 h-28 w-28 rounded-full bg-emerald-200/42" />
               <div className="absolute -bottom-10 left-6 h-24 w-24 rounded-full bg-amber-200/48" />
               <div className="relative flex h-full min-h-[7rem] flex-col items-center justify-center gap-3 text-center">
-                <div className="grid h-14 w-14 place-items-center rounded-[1.1rem] bg-white/82 text-emerald-600 shadow-[0_12px_30px_rgba(16,185,129,0.14)]">
-                  <Gift className="h-7 w-7" />
-                </div>
+                <PlatformIconBadge
+                  icon={<Gift className="h-7 w-7" />}
+                  label="宝贝识物图标"
+                  size="xl"
+                  shape="rounded"
+                  tone="softBright"
+                  className="text-emerald-600 shadow-[0_12px_30px_rgba(16,185,129,0.14)]"
+                />
                 <div className="text-lg font-black text-[var(--platform-text-strong)]">
                   宝贝识物
                 </div>
               </div>
-            </div>
+            </PlatformSubpanel>
           </div>
 
           <div className="mt-2 shrink-0 space-y-3">
             {error ? (
-              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
+              <PlatformStatusMessage
+                tone="error"
+                surface="platform"
+                size="md"
+                className="rounded-2xl"
+              >
                 {error}
-              </div>
+              </PlatformStatusMessage>
             ) : null}
           </div>
         </section>
       </div>
 
       <div className="mt-2 flex shrink-0 justify-center pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:mt-3">
-        <button
-          type="button"
+        <PlatformActionButton
           disabled={!canSubmit}
           onClick={submitForm}
-          className={`platform-button platform-button--primary min-h-10 px-4 py-2 text-sm sm:min-h-11 sm:px-5 ${!canSubmit ? 'cursor-not-allowed opacity-55' : ''}`}
+          className="min-h-10 gap-2 px-4 py-2 text-sm sm:min-h-11 sm:px-5"
         >
-          <span className="inline-flex items-center justify-center gap-2">
-            {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-            <WandSparkles className="h-4 w-4" />
-            <span>生成宝贝识物草稿</span>
-          </span>
-        </button>
+          {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+          <WandSparkles className="h-4 w-4" />
+          <span>生成宝贝识物草稿</span>
+        </PlatformActionButton>
       </div>
     </div>
   );