收口拼图首访按钮

为 PlatformActionButton 增加琥珀实心 accent tone

将拼图首访生成按钮迁移到 PlatformActionButton

将拼图首访登录按钮迁移到 PlatformActionButton

将拼图首访跳过按钮迁移到 PlatformActionButton

补充按钮组件和首访按钮断言

更新 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
2026-06-10 14:23:51 +08:00
parent e019ece907
commit 9b36903021
7 changed files with 81 additions and 15 deletions

View File

@@ -121,10 +121,11 @@
- `PlatformTagEditor`:接收 `title``tags``disabled``maxTags``error``addLabel``generateLabel``inputLabel``inputPlaceholder``emptyLabel``parseInput``onChange`、可选 `onGenerate` / `generateIcon``radius``padding``tone="amber" | "warm"`内部持有新增输入态统一处理标签去重、添加、删除、Enter 提交、Escape 取消、空态、可选 AI 生成按钮和错误提示。拼图结果页作品标签、敲木鱼结果页主题标签和抓大鹅结果页作品标签已先迁移。后续结果页只保留业务标签规范化函数和写回回调,不再重复手写 tag chip、删除按钮、输入框、添加 / 取消按钮和 AI 生成按钮。
- `PlatformTagEditor` 补充:新增输入行外壳继续由 `PlatformSubpanel surface="soft" padding="tight"` 承接,输入框由 `PlatformTextField` 承接;标签编辑 Module 内部也遵守公共输入 / 子面板分工,不再把白底 input chrome 写成本地 class。
- `PlatformAssetPickerCard`:接收 `imageSrc``imageAlt`、可选 `assetTitle` / `subtitle``surface="platform" | "editorDark"``selectLabel``selected``disabled``onClick``aria-label``cardRadiusClassName``imageShellClassName``imageClassName``bodyClassName`;图片读取统一走 `ResolvedAssetImage`按钮禁用态、选中态、边框、hover、缩略图外壳和可选卡片内选择按钮由 Module 统一控制,`assetTitle` 专指卡片内展示标题,不占用原生 button `title` 属性。`PlatformAssetPickerGrid`:接收素材数组、读取 / 错误 / 空态、`getKey``getImageSrc``getImageAlt``getTitle``getSubtitle``getAriaLabel``isSelected``cardClassName``onSelect`;默认组合 `PlatformStatusMessage``PlatformEmptyState``PlatformAssetPickerCard`,业务页只保留素材字段映射、文案、选中判断和选择回调,不再重复手写缩略图卡片、选中 ring、虚线读取 / 空态和网格 JSX。白底平台弹窗使用默认 `platform` surfaceRPG 大编辑器等暗色弹窗使用 `editorDark`,并通过 `imageShellClassName` 保留场景横图比例。视觉小说等同一弹窗里混有上传 / AI 生成错误时,可继续由外层错误条承接动作错误,只把历史素材读取 / 空态 / 网格交给 `PlatformAssetPickerGrid`
- `PlatformActionButton`:接收 `tone="primary" | "secondary" | "ghost" | "danger" | "success" | "warning"``surface="platform" | "profile" | "editorDark"``size="xxs" | "xs" | "sm" | "md" | "lg"``shape="default" | "pill"``align="center" | "start"``fullWidth``children` 和原生 button props`surface="platform"` 复用 `platform-button` 样式族,`surface="profile"` 的主按钮复用个人中心 `platform-primary-button``surface="editorDark"` 统一承接 RPG 暗色弹窗 / 运行面板里的普通取消、确认、刷新和编组动作,根节点固定带 `platform-action-button--editor-dark` 稳定类名。认证表单的 48px 高按钮使用 `size="lg"`,暗色微型刷新 / 工具动作使用 `size="xxs" shape="pill"`,需要文件上传等 label 语义时使用 `asChild="label"` 复用同一套按钮外观,不把上传控件改成普通 button。推荐回复、列表内动作等需要左对齐时使用 `align="start"`,不要在业务 JSX 中重复写 `justify-start text-left`;创作中心错误重试、反馈页 header 返回和暗色次要动作等普通 ghost 动作同样走 `tone="ghost"``shape="pill"`,不在业务 JSX 中直接拼按钮 class。复制按钮仍使用 `CopyFeedbackButton`,可选项按钮卡仍使用 `PlatformDarkOptionCard`,像素风发送 / 强品牌动作继续保留专用布局。
- `PlatformActionButton`:接收 `tone="primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "accent"``surface="platform" | "profile" | "editorDark"``size="xxs" | "xs" | "sm" | "md" | "lg"``shape="default" | "pill"``align="center" | "start"``fullWidth``children` 和原生 button props`surface="platform"` 复用 `platform-button` 样式族,`surface="profile"` 的主按钮复用个人中心 `platform-primary-button``surface="editorDark"` 统一承接 RPG 暗色弹窗 / 运行面板里的普通取消、确认、刷新和编组动作,`tone="accent"` 承接琥珀实心 CTA根节点固定带 `platform-action-button--accent` 稳定类名。认证表单的 48px 高按钮使用 `size="lg"`,暗色微型刷新 / 工具动作使用 `size="xxs" shape="pill"`,需要文件上传等 label 语义时使用 `asChild="label"` 复用同一套按钮外观,不把上传控件改成普通 button。推荐回复、列表内动作等需要左对齐时使用 `align="start"`,不要在业务 JSX 中重复写 `justify-start text-left`;创作中心错误重试、反馈页 header 返回和暗色次要动作等普通 ghost 动作同样走 `tone="ghost"``shape="pill"`,不在业务 JSX 中直接拼按钮 class。复制按钮仍使用 `CopyFeedbackButton`,可选项按钮卡仍使用 `PlatformDarkOptionCard`,像素风发送 / 强品牌动作继续保留专用布局。
- `PlatformActionButton` 补充:反馈页内的“查看反馈与投诉记录”这类页面内次级文本动作使用 `tone="ghost" shape="pill" size="xs"`;业务组件只保留点击反馈,不再手写居中、字号、内边距和冷色文本按钮 class。
- `PlatformActionButton` 补充:作品详情底部“作品改造 / 作品编辑”和“启动”使用 `surface="platform" shape="pill" size="lg" fullWidth`,保留 `platform-work-detail__remix / start` 局部 class 控制 sticky 底部栏位置、比例和品牌背景。
- `PlatformActionButton` 补充:创作中心作品卡积分激励的“领取积分 / 领取中”按钮使用 `tone="secondary" size="xxs"`;作品卡保留 `creation-work-card-incentive__button` 局部 class 控制三列布局、移动端跨列、紧凑高度和玻璃底,不再手写原生按钮 chrome。
- `PlatformActionButton` 补充:拼图首访 onboarding 生成 / 登录 CTA 使用 `surface="editorDark" tone="accent" size="lg" fullWidth`,跳过按钮使用 `surface="editorDark" tone="ghost" shape="pill"` 并只保留右上角定位 class首访页不再手写按钮基础 chrome。
- `PlatformIconButton`:接收 `label``icon`、可选 `children`、可选 `variant="platformIcon" | "surfaceFloating" | "darkMini"``title``className``asChild="label"` 和原生 button / label props默认 `platformIcon` 用于平台弹窗 header、搜索结果弹窗、工具栏、结果页选项删除等普通图标动作按钮也用于保持 file input 原生语义的图标上传 label`surfaceFloating` 用于通用创作图片面板里覆盖在图片或输入区上的白底圆形图标动作,短文案入口通过 `children` 渲染可见短标签但仍由 `label` 提供可访问名称;`darkMini` 用于上传预览卡右上角等覆盖在缩略图上的暗色小型图标动作。creation-agent composer 中的上传文档 / 上传参考图入口使用默认 `platformIcon`,只保留动态 label、title、busy 和 picker 回调;作品详情顶部返回 / 分享与封面轮播上一张 / 下一张入口也使用默认 `platformIcon`,并通过局部 class 保留详情页专属位置和尺寸。发送按钮、点赞按钮、带复制三态或强品牌动作继续保留专用布局。关闭语义复杂或属于个人中心 / 浮层关闭按钮时仍优先使用 `PlatformModalCloseButton`,带复制三态时使用 `CopyFeedbackButton`。同一面板内存在主图上传和提示词参考图上传时,两个 file input 必须使用不同可访问名称,避免业务测试或读屏用户只能看到多个同名“上传参考图”入口。
- `PlatformIconBadge`:接收 `icon`、可选 `label``size="xs" | "sm" | "base" | "md" | "lg" | "xl" | "xxl"``shape="circle" | "rounded" | "xl"``tone="neutral" | "soft" | "softBright" | "hero" | "heroMuted" | "darkAmber" | "success" | "danger"``className`;统一承接非交互图标槽的中性 / 柔和 / hero / 暗色琥珀 / 成功 / 危险底色、文字色、尺寸、圆角和 `aria-hidden` / `aria-label`。视觉小说 runtime 面板标题、存档列表项creative-agent 模板卡 / 模板确认 / 顶部 hero / 目标就绪 / 过程条目图标圆槽,创作类型弹层锁定卡小圆锁图标,大鱼吃小鱼发布失败弹窗图标槽,通用创作图片面板空主图上传占位图标槽,拼图结果页智能修订条图标槽,以及 GameCanvas 宝箱遭遇图标槽已先迁移。后续同类图标槽不再重复手写 `grid h-* w-*``inline-flex h-* w-* items-center justify-center``rounded-full``rounded-[0.85rem]``rounded-2xl`、neutral token class、白底柔和小圆槽、暗色琥珀图标槽或危险提示红色圆槽。
- `PlatformIconBadge` 补充:宝贝识物工作台玩法预览卡内礼物图标槽使用 `size="xl" shape="rounded" tone="softBright"`,业务页只保留玩法色和投影覆盖,不再手写 `grid h-14 w-14 place-items-center rounded-* bg-white/*`
@@ -263,6 +264,7 @@
- `npm run test -- src/components/rpg-runtime-panels/RpgAdventurePanel.questOffer.test.tsx -t "quest offer accept button reuses the shared accepted-quest follow-up chain|quest log empty state reuses dark PlatformEmptyState chrome"`
- `npm run test -- src/components/common/PlatformAssetPickerCard.test.tsx`
- `npm run test -- src/components/common/PlatformActionButton.test.tsx`
- `npm run test -- src/components/platform-entry/PlatformEntryFlowShellImpl/PuzzleOnboardingView.test.tsx src/components/common/PlatformActionButton.test.tsx src/components/common/platformActionButtonModel.test.ts`
- `npm run test -- src/components/common/platformActionButtonModel.test.ts src/components/common/PlatformActionButton.test.tsx src/components/SelectionCustomizationModals.test.tsx src/components/CompanionCampModal.test.tsx src/components/MapModal.test.tsx src/components/CharacterChatModal.test.tsx`
- `npm run test -- src/components/unified-creation/shared/PuzzleImageModelPicker.test.tsx src/components/unified-creation/workspaces/PuzzleCreationWorkspace.interaction.test.tsx src/components/puzzle-result/PuzzleResultView.test.tsx src/components/common/PlatformActionButton.test.tsx src/components/common/PlatformSubpanel.test.tsx`
- `npm run test -- src/components/common/PlatformIconButton.test.tsx`