收口前端平台组件库能力

新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
2026-06-10 10:24:18 +08:00
parent a4ee6ff698
commit 1ad25e30f8
226 changed files with 23364 additions and 7825 deletions
--- a/src/components/common/PlatformDarkOptionCard.tsx
+++ b/src/components/common/PlatformDarkOptionCard.tsx
@@ -0,0 +1,82 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type PlatformDarkOptionTone = 'emerald' | 'sky' | 'rose' | 'amber';
+type PlatformDarkOptionRadius = 'sm' | 'md' | 'lg';
+type PlatformDarkOptionPadding = 'sm' | 'md' | 'lg';
+
+type PlatformDarkOptionCardProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children'
+> & {
+  selected: boolean;
+  tone?: PlatformDarkOptionTone;
+  radius?: PlatformDarkOptionRadius;
+  padding?: PlatformDarkOptionPadding;
+  children: ReactNode;
+};
+
+const PLATFORM_DARK_OPTION_RADIUS_CLASS: Record<
+  PlatformDarkOptionRadius,
+  string
+> = {
+  sm: 'rounded-lg',
+  md: 'rounded-xl',
+  lg: 'rounded-2xl',
+};
+
+const PLATFORM_DARK_OPTION_PADDING_CLASS: Record<
+  PlatformDarkOptionPadding,
+  string
+> = {
+  sm: 'px-3 py-2',
+  md: 'px-3 py-2.5',
+  lg: 'px-3 py-3',
+};
+
+const PLATFORM_DARK_OPTION_SELECTED_CLASS: Record<
+  PlatformDarkOptionTone,
+  string
+> = {
+  emerald: 'border-emerald-400/45 bg-emerald-500/10 text-emerald-100',
+  sky: 'border-sky-400/45 bg-sky-500/10 text-sky-100',
+  rose: 'border-rose-400/60 bg-rose-500/10 text-rose-100',
+  amber: 'border-amber-400/60 bg-amber-500/10 text-amber-100',
+};
+
+const PLATFORM_DARK_OPTION_IDLE_CLASS =
+  'border-white/8 bg-black/20 text-zinc-300 hover:border-white/15';
+
+/**
+ * 暗色面板中的可选项按钮。
+ * 统一承接 selected / idle / hover / disabled 的暗色卡片外观。
+ */
+export function PlatformDarkOptionCard({
+  selected,
+  tone = 'emerald',
+  radius = 'md',
+  padding = 'sm',
+  children,
+  className,
+  type = 'button',
+  ...buttonProps
+}: PlatformDarkOptionCardProps) {
+  return (
+    <button
+      {...buttonProps}
+      type={type}
+      className={[
+        'platform-dark-option-card border text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-55',
+        PLATFORM_DARK_OPTION_RADIUS_CLASS[radius],
+        PLATFORM_DARK_OPTION_PADDING_CLASS[padding],
+        selected
+          ? PLATFORM_DARK_OPTION_SELECTED_CLASS[tone]
+          : PLATFORM_DARK_OPTION_IDLE_CLASS,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </button>
+  );
+}