收口前端平台组件库能力

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

src/components/MapModal.tsx

@@ -6,6 +6,9 @@ import { getConnectedScenePresets } from '../data/scenePresets';
 import { useResolvedAssetReadUrl } from '../hooks/useResolvedAssetReadUrl';
 import { ScenePresetInfo, WorldType } from '../types';
 import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../uiAssets';
+import { PlatformActionButton } from './common/PlatformActionButton';
+import { PlatformPillBadge } from './common/PlatformPillBadge';
+import { PlatformSubpanel } from './common/PlatformSubpanel';
 import { PixelCloseButton } from './PixelCloseButton';
 import { PixelIcon } from './PixelIcon';
 
@@ -67,9 +70,13 @@ function MudMapRoom({
       style={getNineSliceStyle(UI_CHROME.mapRoomCell)}
     >
       <div className="flex min-h-[3.25rem] flex-col items-center justify-center px-3 py-2 text-center">
-        <div className="rounded-full border border-emerald-300/25 bg-emerald-500/10 px-2 py-0.5 text-[9px] tracking-[0.16em] text-emerald-100/85">
+        <PlatformPillBadge
+          tone="darkEmerald"
+          size="xxs"
+          className="tracking-[0.16em] text-emerald-100/85"
+        >
           {label}
-        </div>
+        </PlatformPillBadge>
         <div className={`mt-1 ${compact ? 'text-[13px]' : 'text-sm'} font-semibold leading-tight text-white`}>
           {scene.name}
         </div>
@@ -387,47 +394,71 @@ export function MapModal({
                   </div>
 
                   <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4 sm:p-5">
-                    <div className="rounded-xl border border-amber-400/20 bg-amber-500/10 px-4 py-4">
+                    <PlatformSubpanel
+                      as="div"
+                      data-testid="map-target-scene-panel"
+                      surface="darkAmber"
+                      radius="xs"
+                      padding="md"
+                    >
                       <div className="text-[10px] tracking-[0.18em] text-amber-200/75">目标场景</div>
                       <div className="mt-2 text-base font-semibold text-white">{pendingScene.scene.name}</div>
-                      <div className="mt-2 rounded-full border border-amber-300/20 bg-black/20 px-3 py-1 text-[10px] tracking-[0.18em] text-amber-50">
+                      <PlatformPillBadge
+                        tone="darkAmber"
+                        size="xxs"
+                        className="mt-2 tracking-[0.18em]"
+                      >
                         {pendingScene.label}
-                      </div>
+                      </PlatformPillBadge>
                       <div className="mt-2 text-sm leading-relaxed text-zinc-300">{pendingScene.scene.description}</div>
                       {pendingScene.summary ? (
                         <div className="mt-2 text-xs leading-6 text-zinc-400">
                           连接说明：{pendingScene.summary}
                         </div>
                       ) : null}
-                    </div>
+                    </PlatformSubpanel>
 
                     <div className="grid gap-3 sm:grid-cols-2">
-                      <div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3">
+                      <PlatformSubpanel
+                        as="div"
+                        data-testid="map-current-scene-summary"
+                        surface="dark"
+                        radius="xs"
+                        padding="md"
+                      >
                         <div className="text-[10px] tracking-[0.18em] text-zinc-500">当前</div>
                         <div className="mt-2 text-sm font-semibold text-white">{currentScenePreset.name}</div>
-                      </div>
-                      <div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3">
+                      </PlatformSubpanel>
+                      <PlatformSubpanel
+                        as="div"
+                        data-testid="map-next-scene-summary"
+                        surface="dark"
+                        radius="xs"
+                        padding="md"
+                      >
                         <div className="text-[10px] tracking-[0.18em] text-zinc-500">前往</div>
                         <div className="mt-2 text-sm font-semibold text-white">{pendingScene.scene.name}</div>
-                      </div>
+                      </PlatformSubpanel>
                     </div>
 
                     <div className="flex justify-end gap-2">
-                      <button
-                        type="button"
+                      <PlatformActionButton
+                        surface="editorDark"
+                        tone="ghost"
+                        size="xs"
                         onClick={() => setPendingScene(null)}
-                        className="rounded-lg border border-white/10 bg-black/20 px-3 py-2 text-xs text-zinc-200"
                       >
                         取消
-                      </button>
-                      <button
-                        type="button"
+                      </PlatformActionButton>
+                      <PlatformActionButton
+                        surface="editorDark"
+                        tone={isTraveling || !canTravel ? 'ghost' : 'warning'}
+                        size="xs"
                         disabled={isTraveling || !canTravel}
                         onClick={confirmTravel}
-                        className={`rounded-lg border px-3 py-2 text-xs ${isTraveling || !canTravel ? 'border-white/10 bg-black/20 text-zinc-500' : 'border-amber-400/30 bg-amber-500/20 text-amber-50'}`}
                       >
                         {isTraveling ? '切换中...' : canTravel ? '确认前往' : '当前不可切换'}
-                      </button>
+                      </PlatformActionButton>
                     </div>
                   </div>
                 </motion.div>