收口前端平台组件库能力

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

src/components/common/PlatformQuantityBadge.tsx

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformQuantityBadgePlacement = 'bottomRight';
+type PlatformQuantityBadgeTone = 'dark';
+
+type PlatformQuantityBadgeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  children: ReactNode;
+  placement?: PlatformQuantityBadgePlacement;
+  tone?: PlatformQuantityBadgeTone;
+};
+
+const PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS: Record<
+  PlatformQuantityBadgePlacement,
+  string
+> = {
+  bottomRight: 'bottom-1 right-1',
+};
+
+const PLATFORM_QUANTITY_BADGE_TONE_CLASS: Record<
+  PlatformQuantityBadgeTone,
+  string
+> = {
+  dark: 'border-black/35 bg-black/70 text-white',
+};
+
+/**
+ * 平台物品数量角标。
+ * 统一承接物品格、奖励格等缩略图右下角的数量显示。
+ */
+export function PlatformQuantityBadge({
+  children,
+  placement = 'bottomRight',
+  tone = 'dark',
+  className,
+  ...spanProps
+}: PlatformQuantityBadgeProps) {
+  return (
+    <span
+      {...spanProps}
+      className={[
+        'absolute rounded-full border px-1.5 py-0.5 text-[10px] font-semibold',
+        PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS[placement],
+        PLATFORM_QUANTITY_BADGE_TONE_CLASS[tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}