收口前端平台组件库能力

新增 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/PlatformStatusMessage.tsx
+++ b/src/components/common/PlatformStatusMessage.tsx
@@ -0,0 +1,108 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformStatusTone = 'error' | 'success' | 'info' | 'warning' | 'neutral';
+type PlatformStatusSurface =
+  | 'light'
+  | 'tinted'
+  | 'platform'
+  | 'profile'
+  | 'editorDark';
+type PlatformStatusSize = 'xs' | 'sm' | 'md';
+
+type PlatformStatusMessageProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  tone: PlatformStatusTone;
+  surface?: PlatformStatusSurface;
+  size?: PlatformStatusSize;
+  remapSurface?: boolean;
+  children: ReactNode;
+};
+
+const PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE: Record<
+  PlatformStatusSurface,
+  Record<PlatformStatusTone, string>
+> = {
+  light: {
+    error: 'border-rose-200 bg-rose-50 text-rose-700',
+    success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-200 bg-amber-50 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  tinted: {
+    error: 'border-rose-400/20 bg-rose-500/10 text-rose-700',
+    success: 'border-emerald-300/25 bg-emerald-500/12 text-emerald-700',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-300/30 bg-amber-500/12 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/20 text-[var(--platform-text-base)]',
+  },
+  platform: {
+    error:
+      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+    success:
+      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning:
+      'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  profile: {
+    error:
+      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+    success:
+      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-300 bg-amber-500/12 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  editorDark: {
+    error: 'border-rose-300/15 bg-rose-500/10 text-rose-50/90',
+    success: 'border-emerald-300/15 bg-emerald-500/10 text-emerald-50/90',
+    info: 'border-sky-300/15 bg-sky-500/10 text-sky-50/90',
+    warning: 'border-amber-300/15 bg-amber-500/10 text-amber-50/90',
+    neutral: 'border-white/10 bg-black/20 text-zinc-300',
+  },
+};
+
+const PLATFORM_STATUS_MESSAGE_SIZE_CLASS: Record<PlatformStatusSize, string> = {
+  xs: 'px-3 py-2 text-xs',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-3 text-sm leading-6',
+};
+
+/**
+ * 平台通用状态提示条。
+ * 收口错误、成功和提示类状态的基础边框、底色和文字颜色。
+ */
+export function PlatformStatusMessage({
+  tone,
+  surface = 'light',
+  size = 'sm',
+  remapSurface = false,
+  children,
+  className,
+  ...divProps
+}: PlatformStatusMessageProps) {
+  return (
+    <div
+      {...divProps}
+      className={[
+        remapSurface ? 'platform-remap-surface' : null,
+        'platform-status-message rounded-xl border',
+        PLATFORM_STATUS_MESSAGE_SIZE_CLASS[size],
+        PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE[surface][tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  );
+}