收口前端平台组件库能力

新增 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/platformActionButtonModel.ts
+++ b/src/components/common/platformActionButtonModel.ts
@@ -0,0 +1,120 @@
+export type PlatformActionButtonTone =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'success'
+  | 'warning';
+export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
+export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export type PlatformActionButtonShape = 'default' | 'pill';
+export type PlatformActionButtonAlign = 'center' | 'start';
+
+const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-button platform-button--primary',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-button platform-button--primary',
+  warning: 'platform-button platform-button--secondary',
+};
+
+const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-primary-button',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-primary-button',
+  warning: 'platform-button platform-button--secondary',
+};
+
+const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary:
+    'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300',
+  secondary:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white',
+  ghost:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white',
+  danger:
+    'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15',
+  success:
+    'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
+  warning:
+    'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
+};
+
+const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
+  PlatformActionButtonSize,
+  string
+> = {
+  xxs: 'px-3 py-1 text-[10px]',
+  xs: 'px-4 py-2 text-xs',
+  sm: 'px-4 py-2.5 text-sm',
+  md: 'px-4 py-3 text-sm',
+  lg: 'h-12 px-4 text-base',
+};
+
+const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record<
+  PlatformActionButtonShape,
+  string
+> = {
+  default: 'rounded-2xl',
+  pill: 'rounded-full',
+};
+
+const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record<
+  PlatformActionButtonAlign,
+  string
+> = {
+  center: 'justify-center',
+  start: 'justify-start text-left',
+};
+
+function getPlatformActionButtonToneClass(
+  surface: PlatformActionButtonSurface,
+  tone: PlatformActionButtonTone,
+) {
+  if (surface === 'editorDark') {
+    return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone];
+  }
+
+  return surface === 'profile'
+    ? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone]
+    : PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone];
+}
+
+export function getPlatformActionButtonClassName({
+  surface = 'platform',
+  tone = 'primary',
+  size = 'sm',
+  shape = 'default',
+  align = 'center',
+  fullWidth = false,
+}: {
+  surface?: PlatformActionButtonSurface;
+  tone?: PlatformActionButtonTone;
+  size?: PlatformActionButtonSize;
+  shape?: PlatformActionButtonShape;
+  align?: PlatformActionButtonAlign;
+  fullWidth?: boolean;
+}) {
+  return [
+    getPlatformActionButtonToneClass(surface, tone),
+    PLATFORM_ACTION_BUTTON_SIZE_CLASS[size],
+    PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape],
+    PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align],
+    fullWidth ? 'w-full' : null,
+    'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}