收口前端平台组件库能力

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

src/components/common/PlatformStatusMessage.test.tsx

@@ -0,0 +1,150 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+import { PlatformStatusMessage } from './PlatformStatusMessage';
+
+test('renders platform error status with shared tone classes', () => {
+  render(
+    <PlatformStatusMessage tone="error" className="mt-4">
+      保存失败
+    </PlatformStatusMessage>,
+  );
+
+  const message = screen.getByText('保存失败');
+
+  expect(message.className).toContain('platform-status-message');
+  expect(message.className).toContain('border-rose-200');
+  expect(message.className).toContain('bg-rose-50');
+  expect(message.className).toContain('mt-4');
+});
+
+test('renders success, info, warning, and neutral status tones', () => {
+  const { rerender } = render(
+    <PlatformStatusMessage tone="success">已保存</PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('已保存').className).toContain('border-emerald-200');
+
+  rerender(<PlatformStatusMessage tone="info">处理中</PlatformStatusMessage>);
+  expect(screen.getByText('处理中').className).toContain(
+    'border-[var(--platform-cool-border)]',
+  );
+
+  rerender(
+    <PlatformStatusMessage tone="warning">请确认</PlatformStatusMessage>,
+  );
+  expect(screen.getByText('请确认').className).toContain('border-amber-200');
+
+  rerender(
+    <PlatformStatusMessage tone="neutral">暂无内容</PlatformStatusMessage>,
+  );
+  expect(screen.getByText('暂无内容').className).toContain(
+    'border-[var(--platform-subpanel-border)]',
+  );
+});
+
+test('supports tinted surface and medium spacing for dark platform areas', () => {
+  render(
+    <PlatformStatusMessage tone="error" surface="tinted" size="md">
+      暗色区域错误
+    </PlatformStatusMessage>,
+  );
+
+  const message = screen.getByText('暗色区域错误');
+
+  expect(message.className).toContain('border-rose-400/20');
+  expect(message.className).toContain('bg-rose-500/10');
+  expect(message.className).toContain('px-4');
+  expect(message.className).toContain('leading-6');
+});
+
+test('supports platform surface tokens for result pages', () => {
+  const { rerender } = render(
+    <PlatformStatusMessage tone="warning" surface="platform">
+      发布阻断
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('发布阻断').className).toContain(
+    'border-[var(--platform-warm-border)]',
+  );
+  expect(screen.getByText('发布阻断').className).toContain(
+    'bg-[var(--platform-warm-bg)]',
+  );
+
+  rerender(
+    <PlatformStatusMessage tone="success" surface="platform">
+      已满足发布条件
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('已满足发布条件').className).toContain(
+    'border-[var(--platform-success-border)]',
+  );
+});
+
+test('supports profile surface tokens for account modals', () => {
+  const { rerender } = render(
+    <PlatformStatusMessage tone="error" surface="profile" size="xs">
+      充值失败
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('充值失败').className).toContain(
+    'border-[var(--platform-button-danger-border)]',
+  );
+  expect(screen.getByText('充值失败').className).toContain(
+    'bg-[var(--platform-button-danger-fill)]',
+  );
+  expect(screen.getByText('充值失败').className).toContain('text-xs');
+
+  rerender(
+    <PlatformStatusMessage tone="success" surface="profile" size="xs">
+      已到账
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('已到账').className).toContain(
+    'border-[var(--platform-success-border)]',
+  );
+  expect(screen.getByText('已到账').className).toContain(
+    'text-[var(--platform-success-text)]',
+  );
+});
+
+test('supports editor dark surface for RPG panels', () => {
+  const { rerender } = render(
+    <PlatformStatusMessage tone="warning" surface="editorDark" size="xs">
+      QA 提示
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('QA 提示').className).toContain(
+    'border-amber-300/15',
+  );
+  expect(screen.getByText('QA 提示').className).toContain('bg-amber-500/10');
+  expect(screen.getByText('QA 提示').className).toContain('text-amber-50/90');
+
+  rerender(
+    <PlatformStatusMessage tone="neutral" surface="editorDark" size="xs">
+      暗色中性
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('暗色中性').className).toContain('border-white/10');
+  expect(screen.getByText('暗色中性').className).toContain('bg-black/20');
+});
+
+test('supports platform remap surface wrapper class', () => {
+  render(
+    <PlatformStatusMessage tone="info" surface="platform" remapSurface>
+      正在处理
+    </PlatformStatusMessage>,
+  );
+
+  expect(screen.getByText('正在处理').className).toContain(
+    'platform-remap-surface',
+  );
+});