收口前端平台组件库能力

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

src/components/common/PlatformSlotBadge.tsx

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformSlotBadgeTone = 'active' | 'inactive' | 'soft';
+type PlatformSlotBadgeSize = 'sm' | 'md';
+
+type PlatformSlotBadgeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  children: ReactNode;
+  size?: PlatformSlotBadgeSize;
+  tone?: PlatformSlotBadgeTone;
+};
+
+const PLATFORM_SLOT_BADGE_TONE_CLASS: Record<PlatformSlotBadgeTone, string> = {
+  active: 'border-sky-100/70 bg-sky-300 text-slate-950',
+  inactive: 'border-zinc-400/70 bg-zinc-900 text-white',
+  soft: 'border-transparent bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
+};
+
+const PLATFORM_SLOT_BADGE_SIZE_CLASS: Record<PlatformSlotBadgeSize, string> = {
+  sm: 'h-5 min-w-5 px-1 text-[10px]',
+  md: 'h-6 min-w-6 px-1.5 text-xs',
+};
+
+/**
+ * 平台紧凑槽位编号徽标。
+ * 统一承接角色槽、步骤槽等复合按钮内部的序号 / 主位标记。
+ */
+export function PlatformSlotBadge({
+  children,
+  size = 'sm',
+  tone = 'inactive',
+  className,
+  ...spanProps
+}: PlatformSlotBadgeProps) {
+  return (
+    <span
+      {...spanProps}
+      className={[
+        'flex items-center justify-center rounded-full border font-black leading-none',
+        PLATFORM_SLOT_BADGE_SIZE_CLASS[size],
+        PLATFORM_SLOT_BADGE_TONE_CLASS[tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}