收口前端平台组件库能力

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

src/components/common/PlatformDarkOptionCard.test.tsx

@@ -0,0 +1,95 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, test, vi } from 'vitest';
+
+import { PlatformDarkOptionCard } from './PlatformDarkOptionCard';
+
+test('renders selected dark option card with tone classes', () => {
+  render(
+    <PlatformDarkOptionCard selected tone="rose" className="w-full">
+      玫瑰信物
+    </PlatformDarkOptionCard>,
+  );
+
+  const card = screen.getByRole('button', { name: '玫瑰信物' });
+
+  expect(card.className).toContain('platform-dark-option-card');
+  expect(card.className).toContain('border-rose-400/60');
+  expect(card.className).toContain('bg-rose-500/10');
+  expect(card.className).toContain('w-full');
+});
+
+test('renders idle dark option card and forwards button behavior', async () => {
+  const user = userEvent.setup();
+  const handleClick = vi.fn();
+
+  render(
+    <PlatformDarkOptionCard
+      selected={false}
+      radius="sm"
+      padding="md"
+      onClick={handleClick}
+    >
+      月壳
+    </PlatformDarkOptionCard>,
+  );
+
+  const card = screen.getByRole('button', { name: '月壳' });
+
+  expect(card.getAttribute('type')).toBe('button');
+  expect(card.className).toContain('border-white/8');
+  expect(card.className).toContain('hover:border-white/15');
+  expect(card.className).toContain('rounded-lg');
+  expect(card.className).toContain('py-2.5');
+
+  await user.click(card);
+
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+
+test('supports emerald, sky, and amber selected tones', () => {
+  const { rerender } = render(
+    <PlatformDarkOptionCard selected tone="emerald">
+      购买物品
+    </PlatformDarkOptionCard>,
+  );
+
+  expect(screen.getByRole('button', { name: '购买物品' }).className).toContain(
+    'border-emerald-400/45',
+  );
+
+  rerender(
+    <PlatformDarkOptionCard selected tone="sky">
+      出售物品
+    </PlatformDarkOptionCard>,
+  );
+
+  expect(screen.getByRole('button', { name: '出售物品' }).className).toContain(
+    'border-sky-400/45',
+  );
+
+  rerender(
+    <PlatformDarkOptionCard selected tone="amber">
+      调整同行
+    </PlatformDarkOptionCard>,
+  );
+
+  expect(screen.getByRole('button', { name: '调整同行' }).className).toContain(
+    'border-amber-400/60',
+  );
+});
+
+test('supports large radius and spacing for dark option grids', () => {
+  render(
+    <PlatformDarkOptionCard selected tone="sky" radius="lg" padding="lg">
+      奔跑
+    </PlatformDarkOptionCard>,
+  );
+
+  const card = screen.getByRole('button', { name: '奔跑' });
+
+  expect(card.className).toContain('rounded-2xl');
+  expect(card.className).toContain('py-3');
+});