收口前端平台组件库能力

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

src/components/BackstoryArchive.tsx

@@ -1,3 +1,7 @@
+import { PlatformEmptyState } from './common/PlatformEmptyState';
+import { PlatformPillBadge } from './common/PlatformPillBadge';
+import { PlatformSubpanel } from './common/PlatformSubpanel';
+
 export type BackstoryUnlockedChapter = {
   id: string;
   title: string;
@@ -38,58 +42,71 @@ export function BackstoryArchive({
       </div>
 
       {publicSummary ? (
-        <div className="rounded-xl border border-white/8 bg-black/25 px-4 py-3">
+        <PlatformSubpanel surface="dark" radius="xs" padding="sm">
           <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
             公开印象
           </div>
           <div className="mt-2 text-sm leading-relaxed text-zinc-200">
             {publicSummary}
           </div>
-        </div>
+        </PlatformSubpanel>
       ) : null}
 
       {unlockedChapters.map((chapter) => (
-        <div
+        <PlatformSubpanel
           key={`unlocked-backstory-${chapter.id}`}
-          className="rounded-xl border border-amber-300/18 bg-amber-500/[0.06] px-4 py-3"
+          surface="dark"
+          radius="xs"
+          padding="sm"
+          className="border-amber-300/18 bg-amber-500/[0.06]"
         >
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="text-sm font-semibold text-white">
               {chapter.title}
             </div>
-            <span className="rounded-full border border-amber-300/18 bg-amber-400/10 px-2 py-0.5 text-[10px] tracking-[0.14em] text-amber-100">
+            <PlatformPillBadge
+              tone="darkAmber"
+              size="xxs"
+              className="px-2 py-0.5 tracking-[0.14em]"
+            >
               已解锁
-            </span>
+            </PlatformPillBadge>
           </div>
           <div className="mt-2 text-sm leading-relaxed text-zinc-200">
             {chapter.content}
           </div>
-        </div>
+        </PlatformSubpanel>
       ))}
 
       {lockedChapters.map((chapter) => (
-        <div
+        <PlatformSubpanel
           key={`locked-backstory-${chapter.id}`}
-          className="rounded-xl border border-white/8 bg-black/18 px-4 py-3"
+          surface="dark"
+          radius="xs"
+          padding="sm"
         >
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="text-sm font-semibold text-zinc-200">
               {chapter.title}
             </div>
-            <span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[10px] tracking-[0.14em] text-zinc-400">
+            <PlatformPillBadge
+              tone="darkNeutral"
+              size="xxs"
+              className="px-2 py-0.5 tracking-[0.14em]"
+            >
               需好感 {chapter.affinityRequired}
-            </span>
+            </PlatformPillBadge>
           </div>
           <div className="mt-2 text-sm leading-relaxed text-zinc-500">
             {chapter.teaser}
           </div>
-        </div>
+        </PlatformSubpanel>
       ))}
 
       {!publicSummary && totalChapters === 0 ? (
-        <div className="rounded-xl border border-white/8 bg-black/18 px-4 py-3 text-sm text-zinc-500">
+        <PlatformEmptyState surface="editorDark" size="compact" tone="soft">
           暂无可整理的背景线索。
-        </div>
+        </PlatformEmptyState>
       ) : null}
     </div>
   );