收口创作类型弹层卡片组件

创作类型弹层玩法卡片改用 PlatformSubpanel 按钮壳补充开放卡和忙碌禁用态测试断言补充 PlatformUiKit 收口文档和 Hermes 决策记录
2026-06-10 12:47:48 +08:00
parent 8157e656fa
commit 979ab10ea2
4 changed files with 58 additions and 4 deletions
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -141,6 +141,7 @@
 - 2026-06-10 追加：`PlatformInfoBlock` 支持 `variant="compactRow"` 承接预览卡密集横向 label / value 行；汪汪声浪预览卡四个信息行只保留 label 和内容，不再维护本地 `PREVIEW_INFO_*` class 常量。
 - 2026-06-09 追加：平台白底子面板统一使用 `src/components/common/PlatformSubpanel.tsx` 承载 `platform-subpanel` 外壳、标题行、右侧动作区、强标题、圆角和响应式内边距；静态 element 透传 `aria-*` / `data-*` 等原生属性，便于结果页预览卡保留可访问名称。拼图结果页作品信息 / 标签编辑 / 智能修订条 / 关卡卡片、拼图图库详情页封面轮播壳 / 题材标签 / 关卡摘要、拼图图片生成模式选择器菜单外壳、敲木鱼结果页元信息 / 标签 / 飘字 / 音效、汪汪声浪结果页草稿摘要 / 素材槽 / 预览卡、通用音频输入面板和 RPG 个人中心未登录提示已先迁移。`surface="soft" padding="tight"` 用于标签编辑新增输入行等白底柔和紧凑行，不再手写 `rounded-[1rem] border ... bg-white/68 p-2`；`surface="soft" padding="row"` 用于上传预览横向已选素材条等白底柔和横向行，不再手写 `rounded-[1rem] border ... bg-white/68 px-3 py-2`；静态封面轮播壳使用 `radius="xl" padding="none"` 保留内部固定比例和轮播按钮；抓大鹅物品详情五视角面板使用 `radius="xl" padding="sm"` 加局部 `sm:p-5` 保留响应式间距。后续仅表达“白底子面板 + 标题 / 右侧动作 + 内容”或小型浮层菜单的片段优先使用该 Module；暗色运行态 HUD、媒体预览和强玩法品牌面板继续保留专用布局。
 - 2026-06-10 追加：发布分享弹窗渠道 tile 按钮使用 `PlatformSubpanel as="button" surface="flat" radius="sm" padding="tight" interactive`；弹窗只保留渠道枚举、品牌图标和复制分享文本回调，不再手写白底 tile 圆角、边框、底色、hover 或 focus chrome。验证命令：`npm run test -- src/components/common/PublishShareModal.test.tsx src/components/common/PlatformSubpanel.test.tsx`。
+- 2026-06-10 追加：平台入口创作类型弹层玩法卡片使用 `PlatformSubpanel as="button" surface="platform" radius="xl" padding="none"`；弹层只保留玩法图片、蒙版、锁定 badge、标题副标题和分流回调，外层按钮语义、标准圆角和已开放卡 hover / focus chrome 归公共子面板。验证命令：`npm run test -- src/components/platform-entry/PlatformEntryCreationTypeModal.test.tsx src/components/common/PlatformSubpanel.test.tsx`。
 - 2026-06-10 追加：creation-agent 无 session / 加载提示块迁移到 `PlatformSubpanel radius="sm" padding="lg"`；工作台只保留提示文案，不再手写 `platform-subpanel rounded-2xl px-5 py-4` 普通居中提示面板。
 - 2026-06-10 追加：拼图结果页空草稿提示块迁移到 `PlatformSubpanel radius="sm" padding="lg"`；结果页只保留提示文案，不再手写 `platform-subpanel rounded-2xl px-5 py-4` 普通居中提示面板。
 - 2026-06-09 追加：敲木鱼结果页主预览面板也迁移到 `PlatformSubpanel`，页面只保留标题、简介和资源叠放语义，不再手写 `platform-subpanel rounded-[1.25rem] p-4`。
--- a/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md
+++ b/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md
@@ -90,6 +90,7 @@
 - `PlatformSubpanel` 补充：个人中心充值弹窗里的微信 Native 支付二维码确认面板使用 `radius="sm" padding="md"`；业务组件保留二维码生成、扫码提示和确认支付按钮，不再手写 `platform-subpanel` 外壳。
 - `PlatformSubpanel` 补充：个人中心充值弹窗里的商品整卡按钮使用 `as="button" interactive radius="sm" padding="none"`；业务组件只保留商品标题、金额、角标、购买状态和下单回调，不再手写 `platform-subpanel` 按钮壳、hover、focus 或 disabled chrome。
 - `PlatformSubpanel` 补充：发布分享弹窗里的渠道 tile 按钮使用 `as="button" surface="flat" radius="sm" padding="tight" interactive`；弹窗只保留渠道枚举、品牌图标和复制分享文本回调，不再手写白底 tile 的圆角、边框、底色、hover 或 focus chrome。
+- `PlatformSubpanel` 补充：平台入口创作类型弹层里的玩法卡片使用 `as="button" surface="platform" radius="xl" padding="none"`；卡片只保留玩法图片、锁定态、标题、副标题和选择分流，外层按钮语义、标准圆角和已开放卡 hover / focus chrome 由公共子面板承接。
 - `PlatformSubpanel` 补充：当前 Interface 额外支持 `padding="xs"`、`radius="xs"` 和 `surface="dark"`，用于 RPG 暗色编辑器 / 运行态里的非交互小信息卡。任务目标、区域、进度、描述、角色维度、角色形象状态、自定义选择弹窗当前角色、地图场景切换当前 / 前往摘要、营地编组分区、同行者卡、营地气氛小卡、角色聊天状态和聊天总结这类只展示信息的小卡走该组合；暗色 HUD、动作按钮、可点击卡片和强玩法品牌面板仍保留业务布局。
 - `PlatformSubpanel` 补充：当前 Interface 额外支持 `surface="darkSky" | "darkEmerald" | "darkAmber" | "darkRose"`，用于 RPG 暗色编辑器 / 运行态中带业务色强调的结构化信息面板；实体详情私聊提示、队友收束、玩家等级进度、角色面板等级 / 收束状态、任务奖励好感度 / 货币 / 经验数值卡、RPG 大编辑器上传封面中提示、地图场景切换目标场景面板，以及 `CharacterInfoShared.MultiplierContributionList` 状态标签外壳已迁移，后续同类 sky / emerald / amber / rose 暗色信息壳不再手写 `border-*-400/18 bg-*-500/8`。
 - `PlatformSubpanel` 补充：RPG 大编辑器里的标题型暗色信息块通过本地 `EditorInfoPanel` 适配到 `surface="dark" radius="md" padding="md"`；场景幕角色槽位的当前角色 / 可选角色面板、幕背景预览面板和预设背景面板已迁移。业务 JSX 只保留标题、内容和局部 grid，不再重复拼 `rounded-2xl border border-white/8 bg-black/20 px-4 py-4`。
@@ -181,6 +182,7 @@
    18.7.9. 抓大鹅结果页物品详情五视角面板迁移到 `PlatformSubpanel radius="xl" padding="sm"` 并通过局部 `sm:p-5` 保留桌面间距；详情页只保留视角预览、缩略图切换和素材名称字段，不再手写 `platform-subpanel min-h-0 rounded-[1.5rem] p-3 sm:p-5`。
    18.7.10. RPG 暗色弹窗里的可选项按钮卡迁移到 `PlatformDarkOptionCard`；NPC 交易模式、交易物品行、赠礼候选、招募替换候选、角色素材工作室动作预览格、营地编组替换位按钮和角色聊天建议按钮已先迁移。业务页只传 selected、tone、点击回调和内容布局，不再重复写选中 / 未选中暗色卡片边框、底色、hover 和 disabled chrome；像素风 footer 按钮、强品牌动作按钮和含复杂禁用语义的动作按钮继续保留专用布局。
    18.7.11. 发布分享弹窗渠道 tile 按钮迁移到 `PlatformSubpanel as="button" interactive surface="flat"`；复制反馈状态、渠道枚举和品牌图标继续留在分享弹窗内。
+    18.7.12. 平台入口创作类型弹层玩法卡片迁移到 `PlatformSubpanel as="button" surface="platform" radius="xl" padding="none"`；玩法图片蒙版、锁定 badge、标题副标题和分流回调继续由弹层组件持有。
    18.8. 平台标签编辑器迁移到 `PlatformTagEditor`；拼图、敲木鱼和抓大鹅结果页标签编辑已先迁移。后续标签编辑只把 parse / normalize 和保存语义留在业务页，新增输入状态、删除 chip、空态、AI 生成按钮和错误提示统一由 Module 承接。
 19. 个人中心充值、任务、兑换、邀请、支付结果等弹窗里的普通主动作按钮迁移到 `PlatformActionButton surface="profile"`；RPG 首页作品卡删除小动作、RPG 作品详情、RPG / 拼图 / 抓大鹅 / 跳一跳 / 敲木鱼 / 拼消消 / 宝贝识物 / 方洞 / 汪汪声浪 / 视觉小说 / 大鱼吃小鱼结果页、自定义世界实体目录小动作、生成结果恢复面板、通用生成页重试 / 中断动作、法律信息弹窗 footer、公共确认弹窗 footer、统一创作工作台、统一创作页壳层、拼图创作工作台、拼消消创作工作台、宝贝识物创作工作台、视觉小说创作工作台、汪汪声浪创作工作台、creation-agent 推荐回复、creative-agent 工作台、creative-agent 模板确认弹窗、创作中心错误重试、反馈页 header 返回、通用创作输入面板、认证表单、敲木鱼 fallback 返回、跳一跳结算、拼消消 runtime header / 结算弹窗和视觉小说 runtime 普通白底面板里的普通主动作 / 次动作 / 危险动作迁移到 `PlatformActionButton surface="platform"`；RPG 暗色弹窗 / 运行面板中的角色自定义 footer、生成 footer、地图切换确认、营地编组普通动作和角色聊天刷新动作迁移到 `PlatformActionButton surface="editorDark"`；RPG 大编辑器暗色面板内的保存 / 角色槽动作继续走本地 `ActionButton`，不再混用白底平台 `platform-button` class。统一创作工作台、统一创作页壳层、玩法创作工作台、结果页返回按钮和反馈页 header 返回使用 `tone="ghost"`，提交 / 生成 / 发布 / 保存按钮使用默认主动作，素材槽小按钮、作品卡角落小动作、拼图图片生成模式选择器触发器和白底面板行内动作使用 `size="xs"` 与 `shape="pill"`，暗色微型刷新动作使用 `size="xxs" shape="pill"`，左对齐回复 / 列表动作使用 `align="start"`，认证表单提交、验证码、第三方登录和邀请码提交按钮使用 `size="lg"` 保持 48px 高度，文件上传 label 使用 `asChild="label"` 保持上传语义；复制邀请、错误复制、完成复制和分享复制继续使用 `CopyFeedbackButton` 管状态，并通过 `actionSurface` 复用动作按钮外观。大鱼吃小鱼结果页资产工坊 footer、关卡主图 / 动作入口和场地背景生成这类白底平台动作也使用 `shape="pill" size="xs"`，深色 hero 返回 / 测试 / 发布按钮保留玩法品牌布局。后续带复制三态的按钮不改用普通 ActionButton，避免复制状态分支回流业务页；暗色可选项卡继续使用 `PlatformDarkOptionCard`，像素风发送按钮和强品牌动作继续保留专用布局。
 20. 平台方形上传入口和紧凑虚线新增入口迁移到 `PlatformUploadTile`，上传后的图片预览迁移到 `PlatformUploadPreviewCard`；反馈页上传凭证入口 / 预览、敲木鱼工作台新增功德词条入口、通用创作图片面板的提示词参考图缩略图、抓大鹅封面编辑参考图缩略图、通用输入 Composer 已选参考图条、creation-agent 已选参考图条和拼图结果页关卡引用图横条已先迁移。方形缩略图使用默认 `layout="square"`，横向“已选择参考图 / 文件名 / 素材名 / 移除”条使用 `layout="inline"`；只读引用图条不传 `onRemove`，避免公共组件额外渲染删除入口。后续继续收口结果页素材上传、工作台参考图上传、紧凑虚线新增入口等上传 / 动作块时，业务页只保留文件选择、预览数组、预览回调、删除回调、校验逻辑或新增回调，上传方块外观、主副文案、缩略图壳、预览按钮、标题行、横向已选条、移除按钮和禁用态统一由 Module 承接；工具栏中的小图标上传仍继续使用 `PlatformIconButton asChild="label"`。
@@ -194,6 +196,7 @@
 - `npm run test -- src/components/common/CopyFeedbackButton.test.tsx`
 - `npm run test -- src/components/common/CopyCodeButton.test.tsx`
 - `npm run test -- src/components/common/PublishShareModal.test.tsx src/components/common/PlatformSubpanel.test.tsx`
+- `npm run test -- src/components/platform-entry/PlatformEntryCreationTypeModal.test.tsx src/components/common/PlatformSubpanel.test.tsx`
 - `npm run test -- src/components/common/PlatformPillBadge.test.tsx src/components/common/CopyFeedbackButton.test.tsx src/components/common/CopyCodeButton.test.tsx src/components/rpg-entry/RpgEntryWorldDetailView.test.tsx src/components/match3d-result/Match3DResultView.test.tsx`
 - `npm run test -- src/components/common/PlatformPillBadge.test.tsx src/components/CharacterInfoShared.test.tsx src/components/AdventureEntityModal.test.tsx`
 - `npm run test -- src/components/CharacterInfoShared.test.tsx src/components/AdventureEntityModal.test.tsx -t "BuildContributionDetailPanel|技能详情静态标签"`
--- a/src/components/platform-entry/PlatformEntryCreationTypeModal.test.tsx
+++ b/src/components/platform-entry/PlatformEntryCreationTypeModal.test.tsx
@@ -68,11 +68,55 @@ test('dispatches wooden fish creation type selection', () => {
    />,
  );

-  fireEvent.click(screen.getByRole('button', { name: /敲木鱼/u }));
+  const woodenFishCard = screen.getByRole('button', { name: /敲木鱼/u });
+
+  expect(woodenFishCard.className).toContain('platform-subpanel');
+  expect(woodenFishCard.className).toContain(
+    'platform-creation-reference-card',
+  );
+  expect(woodenFishCard.className).toContain('platform-interactive-card');
+  expect(woodenFishCard.getAttribute('type')).toBe('button');
+
+  fireEvent.click(woodenFishCard);

  expect(onSelectWoodenFish).toHaveBeenCalledTimes(1);
 });

+test('disables open creation type card while busy', () => {
+  const onSelectWoodenFish = vi.fn();
+
+  render(
+    <PlatformEntryCreationTypeModal
+      isOpen
+      isBusy
+      entryConfig={entryConfig}
+      creationTypes={derivePlatformCreationTypes(entryConfig.creationTypes)}
+      onClose={() => {}}
+      onSelectRpg={() => {}}
+      onSelectBigFish={() => {}}
+      onSelectMatch3D={() => {}}
+      onSelectSquareHole={() => {}}
+      onSelectJumpHop={() => {}}
+      onSelectWoodenFish={onSelectWoodenFish}
+      onSelectPuzzle={() => {}}
+      onSelectCreativeAgent={() => {}}
+      onSelectBarkBattle={() => {}}
+      onSelectVisualNovel={() => {}}
+      onSelectBabyObjectMatch={() => {}}
+    />,
+  );
+
+  const woodenFishCard = screen.getByRole('button', { name: /敲木鱼/u });
+
+  expect((woodenFishCard as HTMLButtonElement).disabled).toBe(true);
+  expect(woodenFishCard.className).toContain('platform-subpanel');
+  expect(woodenFishCard.className).toContain('opacity-70');
+
+  fireEvent.click(woodenFishCard);
+
+  expect(onSelectWoodenFish).not.toHaveBeenCalled();
+});
+
 test('renders locked creation type badge with PlatformPillBadge', () => {
  const onSelectWoodenFish = vi.fn();
  const woodenFishEntry = entryConfig.creationTypes[0]!;
--- a/src/components/platform-entry/PlatformEntryCreationTypeModal.tsx
+++ b/src/components/platform-entry/PlatformEntryCreationTypeModal.tsx
@@ -3,6 +3,7 @@ import { ArrowRight, LockKeyhole } from 'lucide-react';
 import type { CreationEntryConfig } from '../../services/creationEntryConfigService';
 import { PlatformIconBadge } from '../common/PlatformIconBadge';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { UnifiedModal } from '../common/UnifiedModal';
 import {
  getVisiblePlatformCreationTypes,
@@ -38,11 +39,16 @@ function CreationTypeCard(props: {
  const lockedBadge = item.badge.trim() || '暂未开放';

  return (
-    <button
+    <PlatformSubpanel
+      as="button"
      type="button"
+      surface="platform"
+      radius="xl"
+      padding="none"
+      interactive={!item.locked}
      disabled={disabled}
      onClick={onSelect}
-      className={`platform-creation-reference-card platform-interactive-card relative flex min-h-[10rem] flex-col overflow-hidden rounded-[1.65rem] border p-0 text-left ${
+      className={`platform-creation-reference-card platform-interactive-card relative flex min-h-[10rem] flex-col overflow-hidden border text-left ${
        item.locked
          ? 'cursor-not-allowed border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-white'
          : 'border-[var(--platform-cool-border)] bg-white text-white'
@@ -94,7 +100,7 @@ function CreationTypeCard(props: {
          {item.subtitle}
        </div>
      </div>
-    </button>
+    </PlatformSubpanel>
  );
 }