收口前端平台组件库能力

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

src/components/custom-world-home/CustomWorldWorkCard.tsx

@@ -7,8 +7,8 @@ import {
   Trash2,
 } from 'lucide-react';
 import {
-  default as React,
   type CSSProperties,
+  default as React,
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
   type TouchEvent as ReactTouchEvent,
@@ -18,6 +18,7 @@ import {
   useState,
 } from 'react';
 
+import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
 import {
   formatPlatformWorkDisplayName,
@@ -44,10 +45,17 @@ type CustomWorldWorkCardProps = {
   pointIncentiveBusy?: boolean;
 };
 
-const BADGE_TONE_CLASS: Record<CreationWorkShelfBadgeTone, string> = {
-  warm: 'platform-pill--warm',
-  success: 'platform-pill--success',
-  neutral: 'platform-pill--neutral',
+type WorkCardPillBadgeTone = React.ComponentProps<
+  typeof PlatformPillBadge
+>['tone'];
+
+const BADGE_TONE_CLASS: Record<
+  CreationWorkShelfBadgeTone,
+  NonNullable<WorkCardPillBadgeTone>
+> = {
+  warm: 'warning',
+  success: 'success',
+  neutral: 'neutral',
 };
 
 const METRIC_ANIMATION_DURATION_MS = 820;
@@ -671,12 +679,14 @@ export function CustomWorldWorkCard({
 
           <div className="creation-work-card__meta platform-category-game-item__meta">
             {item.badges.slice(1).map((badge) => (
-              <span
+              <PlatformPillBadge
                 key={`${item.id}-${badge.id}`}
-                className={`creation-work-card__badge platform-pill ${BADGE_TONE_CLASS[badge.tone]}`}
+                tone={BADGE_TONE_CLASS[badge.tone]}
+                size="xs"
+                className="creation-work-card__badge"
               >
                 {formatPlatformWorkDisplayTag(badge.label)}
-              </span>
+              </PlatformPillBadge>
             ))}
           </div>
 
@@ -685,13 +695,15 @@ export function CustomWorldWorkCard({
           </div>
 
           {item.hasGenerationFailure ? (
-            <div
+            <PlatformPillBadge
+              tone="danger"
+              size="xs"
               aria-label={item.generationFailureSummary ?? '生成失败'}
               className="creation-work-card__failure-status"
+              icon={<CircleAlert aria-hidden="true" className="h-3.5 w-3.5" />}
             >
-              <CircleAlert aria-hidden="true" className="h-3.5 w-3.5" />
               <span>{item.generationFailureSummary ?? '生成失败'}</span>
-            </div>
+            </PlatformPillBadge>
           ) : null}
 
           {isPublished ? (