收口前端平台组件库能力

新增 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/visual-novel-creation/VisualNovelAgentWorkspace.test.tsx
+++ b/src/components/visual-novel-creation/VisualNovelAgentWorkspace.test.tsx
@@ -23,10 +23,20 @@ function renderWorkspace(
 test('visual novel workspace only exposes one-line input and visual style entry', () => {
  const onCreateFromForm = vi.fn();

-  renderWorkspace({ onCreateFromForm });
+  renderWorkspace({ onCreateFromForm, title: '视觉小说' });

+  expect(screen.getByText('BETA').className).toContain('rounded-full');
+  expect(screen.getByText('BETA').className).toContain(
+    'border-[var(--platform-warm-border)]',
+  );
  expect(screen.getByLabelText('一句话创作')).toBeTruthy();
  expect(screen.getByText('视觉画风')).toBeTruthy();
+  expect(screen.getByText('视觉画风').closest('div')?.className).toContain(
+    'platform-subpanel',
+  );
+  expect(screen.getByText('视觉画风').closest('div')?.className).toContain(
+    'bg-white/52',
+  );
  expect(
    screen
      .getByRole('button', { name: '映画动画' })
--- a/src/components/visual-novel-creation/VisualNovelAgentWorkspace.tsx
+++ b/src/components/visual-novel-creation/VisualNovelAgentWorkspace.tsx
@@ -2,6 +2,12 @@ import { ArrowLeft, Loader2, Sparkles, WandSparkles } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';

 import type { VisualNovelAgentSessionSnapshot } from '../../../packages/shared/src/contracts/visualNovel';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformSubpanel } from '../common/PlatformSubpanel';
+import { PlatformTextField } from '../common/PlatformTextField';
 import type { VisualNovelEntryFormPayload } from './visualNovelEntryGeneration';

 type VisualNovelAgentWorkspaceProps = {
@@ -235,15 +241,16 @@ export function VisualNovelAgentWorkspace({
    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-hidden">
      {showBackButton ? (
        <div className="mb-3 flex shrink-0 items-center justify-between gap-3 sm:mb-4">
-          <button
-            type="button"
+          <PlatformActionButton
            onClick={onBack}
            disabled={isBusy}
-            className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
+            tone="ghost"
+            size="xs"
+            className="min-h-0 self-start gap-1.5 px-3 py-1.5 text-[11px]"
          >
            <ArrowLeft className="h-3.5 w-3.5" />
            返回
-          </button>
+          </PlatformActionButton>
        </div>
      ) : null}

@@ -254,9 +261,9 @@ export function VisualNovelAgentWorkspace({
              <h1 className="m-0 text-3xl font-black leading-none tracking-normal text-[var(--platform-text-strong)] sm:text-7xl">
                {title}
              </h1>
-              <span className="rounded-full border border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] px-3 py-1 text-[11px] font-black text-[var(--platform-warm-text)]">
+              <PlatformPillBadge tone="warning" size="xs">
                BETA
-              </span>
+              </PlatformPillBadge>
            </div>
          </div>
        ) : null}
@@ -266,10 +273,9 @@ export function VisualNovelAgentWorkspace({
            className={`grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] gap-3 lg:grid-cols-[minmax(0,1.1fr)_minmax(16rem,0.9fr)] lg:grid-rows-1 ${isBusy ? 'opacity-55' : ''}`}
          >
            <label className="block min-h-0">
-              <span className="mb-2 block text-sm font-black text-[var(--platform-text-strong)]">
-                一句话创作
-              </span>
-              <textarea
+              <PlatformFieldLabel variant="form">一句话创作</PlatformFieldLabel>
+              <PlatformTextField
+                variant="textarea"
                value={formState.ideaText}
                disabled={isBusy}
                rows={5}
@@ -280,16 +286,24 @@ export function VisualNovelAgentWorkspace({
                    ideaText: event.target.value,
                  }))
                }
-                className="h-full min-h-[7.75rem] w-full resize-none rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base leading-6 text-[var(--platform-text-strong)] outline-none transition focus:border-[var(--platform-surface-hover-border)] focus:bg-white focus:ring-2 focus:ring-[var(--platform-warm-border)] sm:min-h-[9rem] lg:min-h-[14rem]"
+                size="lg"
+                density="roomy"
+                className="h-full min-h-[7.75rem] rounded-[1.15rem] font-normal leading-6 sm:min-h-[9rem] lg:min-h-[14rem]"
                aria-label="一句话创作"
              />
            </label>

            <div className="flex min-h-0 flex-col gap-2 overflow-hidden">
-              <div className="min-h-0 rounded-[1.05rem] border border-[var(--platform-subpanel-border)] bg-white/52 p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.78)]">
-                <div className="mb-1.5 text-sm font-black text-[var(--platform-text-strong)]">
+              <PlatformSubpanel
+                as="div"
+                surface="flat"
+                radius="sm"
+                padding="sm"
+                className="min-h-0 bg-white/52 shadow-[inset_0_1px_0_rgba(255,255,255,0.78)]"
+              >
+                <PlatformFieldLabel variant="form" className="mb-1.5">
                  视觉画风
-                </div>
+                </PlatformFieldLabel>
                <div
                  className="flex snap-x gap-2.5 overflow-x-auto overscroll-x-contain pb-0.5 scrollbar-hide touch-pan-x [-webkit-overflow-scrolling:touch]"
                  aria-label="视觉画风"
@@ -310,40 +324,42 @@ export function VisualNovelAgentWorkspace({
                    />
                  ))}
                </div>
-              </div>
+              </PlatformSubpanel>
            </div>
          </div>

          <div className="mt-2 shrink-0 space-y-3">
            {error ? (
-              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
+              <PlatformStatusMessage
+                tone="error"
+                surface="platform"
+                size="md"
+                className="rounded-2xl"
+              >
                {error}
-              </div>
+              </PlatformStatusMessage>
            ) : null}
          </div>
        </section>
      </div>

      <div className="mt-2 flex shrink-0 justify-center pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:mt-3">
-        <button
-          type="button"
+        <PlatformActionButton
          disabled={!canSubmit}
          onClick={startDraft}
-          className={`platform-button platform-button--primary min-h-10 px-4 py-2 text-sm sm:min-h-11 sm:px-5 ${!canSubmit ? 'cursor-not-allowed opacity-55' : ''}`}
+          className="min-h-10 gap-1.5 px-4 py-2 text-sm sm:min-h-11 sm:gap-2 sm:px-5"
        >
-          <span className="inline-flex flex-wrap items-center justify-center gap-1.5 sm:gap-2">
-            {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-            {session ? (
-              <Sparkles className="h-4 w-4" />
-            ) : (
-              <WandSparkles className="h-4 w-4" />
-            )}
-            <span>生成视觉小说草稿</span>
-            <span className="rounded-full bg-white/24 px-2 py-0.5 text-[11px] font-bold">
-              消耗20泥点
-            </span>
+          {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+          {session ? (
+            <Sparkles className="h-4 w-4" />
+          ) : (
+            <WandSparkles className="h-4 w-4" />
+          )}
+          <span>生成视觉小说草稿</span>
+          <span className="rounded-full bg-white/24 px-2 py-0.5 text-[11px] font-bold">
+            消耗20泥点
          </span>
-        </button>
+        </PlatformActionButton>
      </div>
    </div>
  );