收口前端平台组件库能力

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

src/components/SelectionCustomizationModals.test.tsx

@@ -0,0 +1,125 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
+
+import { createEmptyCustomWorldCreatorIntent } from '../services/customWorldCreatorIntent';
+import {
+  CharacterDraftModal,
+  CustomWorldCreatorModal,
+} from './SelectionCustomizationModals';
+
+test('角色自定义错误提示复用暗色 PlatformStatusMessage chrome', () => {
+  render(
+    <CharacterDraftModal
+      isOpen
+      characterLabel="试剑客"
+      draftName="沈行"
+      draftBackstory="旧雨里走来的人。"
+      error="名字不能为空。"
+      onNameChange={vi.fn()}
+      onBackstoryChange={vi.fn()}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+    />,
+  );
+
+  const errorMessage = screen.getByText('名字不能为空。');
+  const cancelButton = screen.getByRole('button', { name: '取消' });
+  const confirmButton = screen.getByRole('button', { name: '确认进入' });
+  const closeButton = screen.getByRole('button', { name: '关闭角色自定义' });
+  const currentCharacterPanel = screen.getByText('当前角色：试剑客');
+  const nameInput = screen.getByLabelText('角色名字');
+  const backstoryTextarea = screen.getByLabelText('背景补充');
+
+  expect(errorMessage.className).toContain('platform-status-message');
+  expect(errorMessage.className).toContain('border-rose-300/15');
+  expect(errorMessage.className).toContain('bg-rose-500/10');
+  expect(errorMessage.className).toContain('text-rose-50/90');
+  expect(nameInput.className).toContain('platform-text-field--editor-dark');
+  expect(nameInput.className).toContain('focus:border-emerald-400/40');
+  expect(backstoryTextarea.className).toContain(
+    'platform-text-field--editor-dark',
+  );
+  expect(backstoryTextarea.className).toContain('resize-none');
+  expect(cancelButton.className).toContain(
+    'platform-action-button--editor-dark',
+  );
+  expect(cancelButton.className).toContain('bg-white/5');
+  expect(confirmButton.className).toContain(
+    'platform-action-button--editor-dark',
+  );
+  expect(confirmButton.className).toContain('bg-emerald-400');
+  expect(closeButton.className).toContain(
+    'platform-modal-close-button--editor-dark',
+  );
+  expect(currentCharacterPanel.className).toContain('border-white/10');
+  expect(currentCharacterPanel.className).toContain('bg-black/25');
+});
+
+test('自定义世界生成提示复用暗色状态条和平台进度条', () => {
+  render(
+    <CustomWorldCreatorModal
+      isOpen
+      draft="雾海边境。"
+      isGenerating
+      progress={42.4}
+      progressLabel="正在生成世界"
+      error="生成失败，请重试。"
+      onDraftChange={vi.fn()}
+      onClose={vi.fn()}
+      onSubmit={vi.fn()}
+    />,
+  );
+
+  const progressMessage = screen
+    .getByText('正在生成世界')
+    .closest('.platform-status-message');
+  const errorMessage = screen.getByText('生成失败，请重试。');
+  const progressbar = screen.getByRole('progressbar', {
+    name: '自定义世界生成进度',
+  });
+  const generatingButton = screen.getByRole('button', { name: '生成中...' });
+  const draftTextarea = screen.getByPlaceholderText(
+    '例：一个被潮雾与失落列岛切碎的边境世界，旧盟约、沉船秘术与灯塔守望者纠缠在一起……',
+  );
+
+  expect(progressMessage?.className).toContain('border-sky-300/15');
+  expect(progressMessage?.className).toContain('bg-sky-500/10');
+  expect(errorMessage.className).toContain('platform-status-message');
+  expect(errorMessage.className).toContain('border-rose-300/15');
+  expect(progressbar.className).toContain('platform-progress-track');
+  expect(progressbar.getAttribute('aria-valuenow')).toBe('42');
+  expect(generatingButton.className).toContain(
+    'platform-action-button--editor-dark',
+  );
+  expect(generatingButton.className).toContain('bg-sky-400');
+  expect(generatingButton.hasAttribute('disabled')).toBe(true);
+  expect(draftTextarea.className).toContain('platform-text-field--editor-dark');
+  expect(draftTextarea.className).toContain('focus:border-sky-400/40');
+});
+
+test('自定义世界生成模式选择复用暗色平台输入框', () => {
+  render(
+    <CustomWorldCreatorModal
+      isOpen
+      creatorIntent={{
+        ...createEmptyCustomWorldCreatorIntent('card'),
+        rawSettingText: '雾海边境。',
+      }}
+      generationMode="fast"
+      isGenerating={false}
+      progress={0}
+      progressLabel=""
+      onCreatorIntentChange={vi.fn()}
+      onGenerationModeChange={vi.fn()}
+      onClose={vi.fn()}
+      onSubmit={vi.fn()}
+    />,
+  );
+
+  const modeSelect = screen.getByLabelText('生成模式');
+
+  expect(modeSelect.className).toContain('platform-text-field--editor-dark');
+  expect(modeSelect.className).toContain('focus:border-sky-400/40');
+});