收口前端平台组件库能力

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

src/components/common/PlatformOverlayBadge.tsx

@@ -0,0 +1,87 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformOverlayBadgePlacement =
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight';
+type PlatformOverlayBadgeOffset = 'default' | 'tight';
+type PlatformOverlayBadgeSize = 'default' | 'compact';
+type PlatformOverlayBadgeTone = 'light' | 'muted';
+
+type PlatformOverlayBadgeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  children: ReactNode;
+  placement?: PlatformOverlayBadgePlacement;
+  offset?: PlatformOverlayBadgeOffset;
+  size?: PlatformOverlayBadgeSize;
+  tone?: PlatformOverlayBadgeTone;
+};
+
+const PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS: Record<
+  PlatformOverlayBadgeOffset,
+  Record<PlatformOverlayBadgePlacement, string>
+> = {
+  default: {
+    topLeft: 'left-3 top-3',
+    topRight: 'right-3 top-3',
+    bottomLeft: 'bottom-3 left-3',
+    bottomRight: 'bottom-3 right-3',
+  },
+  tight: {
+    topLeft: 'left-2 top-2',
+    topRight: 'right-2 top-2',
+    bottomLeft: 'bottom-2 left-2',
+    bottomRight: 'bottom-2 right-2',
+  },
+};
+
+const PLATFORM_OVERLAY_BADGE_SIZE_CLASS: Record<
+  PlatformOverlayBadgeSize,
+  string
+> = {
+  default: 'px-3 py-1 tracking-[0.18em] shadow-[0_8px_20px_rgba(0,0,0,0.22)]',
+  compact: 'px-2 py-0.5 tracking-normal shadow-sm',
+};
+
+const PLATFORM_OVERLAY_BADGE_TONE_CLASS: Record<
+  PlatformOverlayBadgeTone,
+  string
+> = {
+  light: 'border-white/40 bg-white/88 text-zinc-900',
+  muted:
+    'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
+};
+
+/**
+ * 平台媒体悬浮标签。
+ * 统一承接预览图、素材图和舞台画面上的非交互短标签。
+ */
+export function PlatformOverlayBadge({
+  children,
+  placement = 'topLeft',
+  offset = 'default',
+  size = 'default',
+  tone = 'light',
+  className,
+  ...spanProps
+}: PlatformOverlayBadgeProps) {
+  return (
+    <span
+      {...spanProps}
+      className={[
+        'absolute rounded-full border text-[10px] font-bold',
+        PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS[offset][placement],
+        PLATFORM_OVERLAY_BADGE_SIZE_CLASS[size],
+        PLATFORM_OVERLAY_BADGE_TONE_CLASS[tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}