收口拼图首访按钮
为 PlatformActionButton 增加琥珀实心 accent tone 将拼图首访生成按钮迁移到 PlatformActionButton 将拼图首访登录按钮迁移到 PlatformActionButton 将拼图首访跳过按钮迁移到 PlatformActionButton 补充按钮组件和首访按钮断言 更新 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
@@ -54,7 +54,7 @@
|
||||
- 2026-06-10 追加：`PlatformModalCloseButton variant="editorDark"` 承接 RPG 暗色弹窗中非像素风的圆形 X 关闭入口，根节点固定带 `platform-modal-close-button--editor-dark` 稳定类名；自定义选择弹窗头部关闭按钮已迁移，并补齐 `aria-label`，业务 JSX 不再手写暗色关闭按钮边框、底色、hover 和默认 X 图标。验证命令：`npm run test -- src/components/common/PlatformModalCloseButton.test.tsx src/components/SelectionCustomizationModals.test.tsx`。
|
||||
- 2026-06-10 追加：`PlatformModalCloseButton variant="pixel"` 承接 `UnifiedModal variant="pixel"` 头部圆形关闭入口；`UnifiedModal` 只选择 `platformIcon / pixel` 变体并保留 closeDisabled、Backdrop、Escape 和 portal 语义，不再手写 X 图标、aria 和关闭按钮 class。验证命令：`npm run test -- src/components/common/UnifiedModal.test.tsx src/components/common/PlatformModalCloseButton.test.tsx src/components/common/UnifiedConfirmDialog.test.tsx`。
|
||||
- 2026-06-09 追加：RPG 大编辑器暗色面板内的保存和角色槽动作继续走本地 `ActionButton`，不再混用白底平台 `platform-button` class；平台白底动作收口和编辑器暗色动作收口保持两套视觉边界。
|
||||
- 2026-06-10 追加：`PlatformActionButton surface="editorDark"` 承接 RPG 暗色弹窗 / 运行面板里的普通取消、确认、刷新和编组动作，支持 `size="xxs"` 与 `tone="success" | "warning"`；角色自定义 footer、自定义世界生成 footer、地图切换确认、营地编组普通动作和角色聊天刷新动作已迁移。暗色可选项卡仍使用 `PlatformDarkOptionCard`，像素风发送 / 强品牌动作继续保留专用布局。验证命令：`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`。
|
||||
- 2026-06-10 追加：`PlatformActionButton surface="editorDark"` 承接 RPG 暗色弹窗 / 运行面板里的普通取消、确认、刷新和编组动作，支持 `size="xxs"` 与 `tone="success" | "warning"`；`tone="accent"` 承接暗色壳层内的琥珀实心 CTA。角色自定义 footer、自定义世界生成 footer、地图切换确认、营地编组普通动作和角色聊天刷新动作已迁移。暗色可选项卡仍使用 `PlatformDarkOptionCard`，像素风发送 / 强品牌动作继续保留专用布局。验证命令：`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`。
|
||||
- 2026-06-10 追加：RPG 大编辑器里的当前角色、可选角色、预设背景和场景连接关系等暗色信息面板通过本地 `EditorInfoPanel` 复用 `PlatformSubpanel surface="dark"`；有右侧动作的面板也只向适配器传 actions，不再在业务 JSX 中重复手写暗色面板边框、底色、圆角、标题行和内容间距。验证命令：`npm run test -- src/components/CustomWorldEntityEditorModal.test.tsx -t "场景编辑器会在场景内展示槽位化多幕配置并保存"`。
|
||||
- 2026-06-10 追加：作品详情底部“作品改造 / 作品编辑”和“启动”使用 `PlatformActionButton surface="platform" shape="pill" size="lg" fullWidth`；详情页保留 `platform-work-detail__remix / start` 局部 class 控制 sticky 底部栏位置、比例和品牌背景。验证命令：`npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformActionButton.test.tsx`。
|
||||
- 2026-06-09 追加：大鱼吃小鱼结果页白底平台动作迁移到 `PlatformActionButton shape="pill" size="xs"`；资产工坊关闭 / 生成正式图、关卡主图 / 待机 / 移动入口和场地背景生成只保留业务回调，深色 hero 返回 / 测试 / 发布按钮继续保留玩法品牌布局。
|
||||
@@ -144,7 +144,7 @@
|
||||
- 2026-06-10 追加：NPC 交易详情里的装备位、即时使用和标签属性格使用 `PlatformSubpanel surface="dark" padding="row"`，使用效果提示使用 `PlatformStatusMessage surface="editorDark"`；物品详情弹窗只保留物品属性、效果和标签计算，不再手写 `rounded-lg border border-white/8 bg-black/20 px-3 py-2` 或 emerald 提示条 chrome。
|
||||
- 2026-06-10 追加：新增 `PlatformDarkOptionCard` 承接 RPG 暗色弹窗 / 面板中的可选项按钮卡 selected / idle / hover / disabled chrome；NPC 交易模式、交易物品行、赠礼候选、招募替换候选、角色素材工作室动作预览格和营地编组替换位按钮已迁移。业务组件只保留选中判断、tone、点击回调和卡片内容，不再手写 `rounded-* border px-3 py-*`、`border-*-400/* bg-*-500/10` 或 `border-white/* bg-black/20 hover:border-white/15`。
|
||||
- 2026-06-10 追加：角色聊天弹窗的状态 / 总结卡使用 `PlatformSubpanel surface="dark"`，空聊天记录使用 `PlatformEmptyState surface="editorDark"`，建议回复按钮使用 `PlatformDarkOptionCard tone="sky"`；弹窗只保留角色状态、聊天记录和建议语义，不再手写这些暗色信息卡、空态或建议按钮 chrome。验证命令：`npm run test -- src/components/CharacterChatModal.test.tsx src/components/common/PlatformStatusMessage.test.tsx src/components/common/PlatformSubpanel.test.tsx src/components/common/PlatformEmptyState.test.tsx src/components/common/PlatformDarkOptionCard.test.tsx`。
|
||||
- 2026-06-10 追加：拼图首访 onboarding 提示词文本域使用 `PlatformTextField surface="editorDark"`，输入错误和登录保存错误使用 `PlatformStatusMessage surface="editorDark"`；onboarding 保留全屏沉浸壳层、琥珀主 CTA、登录 / 生成状态机和跳过行为，不再手写 textarea / 错误条 chrome。验证命令：`npm run test -- src/components/platform-entry/PlatformEntryFlowShellImpl/PuzzleOnboardingView.test.tsx src/components/common/PlatformStatusMessage.test.tsx src/components/common/PlatformTextField.test.tsx`。
|
||||
- 2026-06-10 追加：拼图首访 onboarding 提示词文本域使用 `PlatformTextField surface="editorDark"`，输入错误和登录保存错误使用 `PlatformStatusMessage surface="editorDark"`，生成 / 登录 CTA 使用 `PlatformActionButton surface="editorDark" tone="accent"`，跳过按钮使用 `PlatformActionButton surface="editorDark" tone="ghost" shape="pill"`；onboarding 保留全屏沉浸壳层、登录 / 生成状态机和跳过行为，不再手写 textarea / 错误条 / 按钮 chrome。验证命令：`npm run test -- src/components/platform-entry/PlatformEntryFlowShellImpl/PuzzleOnboardingView.test.tsx src/components/common/PlatformStatusMessage.test.tsx src/components/common/PlatformTextField.test.tsx src/components/common/PlatformActionButton.test.tsx src/components/common/platformActionButtonModel.test.ts`。
|
||||
- 2026-06-10 追加：RPG 大编辑器本地 `SectionPanel` 适配到 `PlatformSubpanel surface="dark"`；可扮演角色背景故事 / 关系 / 技能 / 物品、世界基础设定等编辑分区只保留标题、subtitle、右侧动作和内容插槽，不再由本地适配器手写外层暗色面板 chrome。验证命令：`npm run test -- src/components/CustomWorldEntityEditorModal.test.tsx src/components/common/PlatformSubpanel.test.tsx -t "可扮演角色技能动作状态|supports dark compact subpanel cards"`。
|
||||
- 2026-06-10 验证补充：RPG 大编辑器上传封面中提示收口到 `PlatformSubpanel surface="darkSky"` 后，补跑 `npm run test -- src/components/CustomWorldEntityEditorModal.test.tsx src/components/common/PlatformSubpanel.test.tsx -t "作品封面上传|tinted dark information panels"`。
|
||||
- 2026-06-10 追加：RPG 角色形象参考图缩略框使用 `PlatformMediaFrame surface="editorDark"`；角色形象面板只保留参考图数组、上传 / 清空回调和状态文案，不再手写 `img + overflow-hidden + border` 缩略图 chrome。
|
||||
@@ -301,6 +301,7 @@
|
||||
- 2026-06-10 验证补充：creation-agent 无 session / 加载提示块收口补跑 `npm run test -- src/components/common/PlatformSubpanel.test.tsx src/components/creation-agent/CreationAgentWorkspace.test.tsx`。
|
||||
- 2026-06-10 验证补充：creation-agent 聊天空态和 composer 文本域收口后，补跑 `npm run test -- src/components/creation-agent/CreationAgentWorkspace.test.tsx src/components/common/PlatformEmptyState.test.tsx src/components/common/PlatformTextField.test.tsx`。
|
||||
- 2026-06-10 验证补充：拼图首访 onboarding 提示词文本域、输入错误和登录保存错误收口后，补跑 `npm run test -- src/components/platform-entry/PlatformEntryFlowShellImpl/PuzzleOnboardingView.test.tsx src/components/common/PlatformStatusMessage.test.tsx src/components/common/PlatformTextField.test.tsx`。
|
||||
- 2026-06-10 验证补充：拼图首访 onboarding 生成 / 登录 / 跳过按钮收口到 `PlatformActionButton` 后，补跑 `npm run test -- src/components/platform-entry/PlatformEntryFlowShellImpl/PuzzleOnboardingView.test.tsx src/components/common/PlatformActionButton.test.tsx src/components/common/platformActionButtonModel.test.ts`。
|
||||
- 2026-06-10 验证补充：拼图结果页空草稿提示块收口补跑 `npm run test -- src/components/common/PlatformSubpanel.test.tsx src/components/puzzle-result/PuzzleResultView.test.tsx`。
|
||||
- 2026-06-10 验证补充：RPG 个人中心未登录提示子面板收口补跑 `npm run test -- src/components/common/PlatformSubpanel.test.tsx`，并对 `src/components/rpg-entry/RpgEntryHomeView.tsx` 执行 ESLint / typecheck；游客态当前不暴露“我的”Tab，不新增不可达业务断言。
|
||||
- 2026-06-10 验证补充：拼图图库详情页封面轮播壳收口到 `PlatformSubpanel radius="xl" padding="none"` 后，补跑 `npm run test -- src/components/common/PlatformSubpanel.test.tsx src/components/puzzle-gallery/PuzzleGalleryDetailView.test.tsx`。
|
||||
|
||||
@@ -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` surface；RPG 大编辑器等暗色弹窗使用 `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`
|
||||
|
||||
@@ -74,3 +74,19 @@ test('supports editor dark action surface', () => {
|
||||
expect(button.className).toContain('bg-amber-500/20');
|
||||
expect(button.className).toContain('text-[10px]');
|
||||
});
|
||||
|
||||
test('supports accent action tone', () => {
|
||||
render(
|
||||
<PlatformActionButton surface="editorDark" tone="accent" size="lg" fullWidth>
|
||||
生成
|
||||
</PlatformActionButton>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: '生成' });
|
||||
|
||||
expect(button.className).toContain('platform-action-button--accent');
|
||||
expect(button.className).toContain('bg-amber-200');
|
||||
expect(button.className).toContain('text-slate-950');
|
||||
expect(button.className).toContain('h-12');
|
||||
expect(button.className).toContain('w-full');
|
||||
});
|
||||
|
||||
@@ -60,3 +60,18 @@ test('builds editor dark action button class names', () => {
|
||||
expect(className).toContain('text-[10px]');
|
||||
expect(className).toContain('rounded-full');
|
||||
});
|
||||
|
||||
test('builds accent action button class names', () => {
|
||||
const className = getPlatformActionButtonClassName({
|
||||
surface: 'editorDark',
|
||||
tone: 'accent',
|
||||
size: 'lg',
|
||||
fullWidth: true,
|
||||
});
|
||||
|
||||
expect(className).toContain('platform-action-button--accent');
|
||||
expect(className).toContain('bg-amber-200');
|
||||
expect(className).toContain('text-slate-950');
|
||||
expect(className).toContain('h-12');
|
||||
expect(className).toContain('w-full');
|
||||
});
|
||||
|
||||
@@ -4,7 +4,8 @@ export type PlatformActionButtonTone =
|
||||
| 'ghost'
|
||||
| 'danger'
|
||||
| 'success'
|
||||
| 'warning';
|
||||
| 'warning'
|
||||
| 'accent';
|
||||
export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
|
||||
export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
|
||||
export type PlatformActionButtonShape = 'default' | 'pill';
|
||||
@@ -20,6 +21,8 @@ const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
|
||||
danger: 'platform-button platform-button--danger',
|
||||
success: 'platform-button platform-button--primary',
|
||||
warning: 'platform-button platform-button--secondary',
|
||||
accent:
|
||||
'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
|
||||
};
|
||||
|
||||
const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
|
||||
@@ -32,6 +35,8 @@ const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
|
||||
danger: 'platform-button platform-button--danger',
|
||||
success: 'platform-primary-button',
|
||||
warning: 'platform-button platform-button--secondary',
|
||||
accent:
|
||||
'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
|
||||
};
|
||||
|
||||
const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
|
||||
@@ -50,6 +55,8 @@ const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
|
||||
'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
|
||||
warning:
|
||||
'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
|
||||
accent:
|
||||
'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
|
||||
};
|
||||
|
||||
const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
|
||||
|
||||
@@ -61,9 +61,20 @@ test('PuzzleOnboardingView uses shared dark textarea and error status chrome', (
|
||||
|
||||
test('PuzzleOnboardingView preserves submit, skip, and disabled phase behavior', () => {
|
||||
const { onSubmit, onSkip } = renderOnboarding();
|
||||
const submitButton = screen.getByRole('button', { name: '生成' });
|
||||
const skipButton = screen.getByRole('button', { name: '跳过' });
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '生成' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '跳过' }));
|
||||
expect(submitButton.className).toContain('platform-action-button--accent');
|
||||
expect(submitButton.className).toContain('bg-amber-200');
|
||||
expect(submitButton.className).toContain('w-full');
|
||||
expect(skipButton.className).toContain(
|
||||
'platform-action-button--editor-dark',
|
||||
);
|
||||
expect(skipButton.className).toContain('rounded-full');
|
||||
expect(skipButton.className).toContain('absolute');
|
||||
|
||||
fireEvent.click(submitButton);
|
||||
fireEvent.click(skipButton);
|
||||
|
||||
expect(onSubmit).toHaveBeenCalledTimes(1);
|
||||
expect(onSkip).toHaveBeenCalledTimes(1);
|
||||
@@ -112,6 +123,9 @@ test('PuzzleOnboardingLoginOverlay uses shared error status and keeps login acti
|
||||
fireEvent.click(screen.getByRole('button', { name: '注册账号 / 登录' }));
|
||||
|
||||
expect(onLogin).toHaveBeenCalledTimes(1);
|
||||
expect(screen.getByRole('button', { name: '注册账号 / 登录' }).className).toContain(
|
||||
'platform-action-button--accent',
|
||||
);
|
||||
expect(screen.getByText('保存首访拼图失败').className).toContain(
|
||||
'platform-status-message',
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Loader2, Sparkles } from 'lucide-react';
|
||||
|
||||
import { PlatformActionButton } from '../../common/PlatformActionButton';
|
||||
import { PlatformStatusMessage } from '../../common/PlatformStatusMessage';
|
||||
import { PlatformTextField } from '../../common/PlatformTextField';
|
||||
|
||||
@@ -31,14 +32,18 @@ export function PuzzleOnboardingView({
|
||||
return (
|
||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_30%_15%,rgba(251,191,36,0.22),transparent_30%),linear-gradient(135deg,#0f172a,#111827_46%,#1e1b4b)] px-4 py-8 text-white">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.045)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:38px_38px] opacity-30" />
|
||||
<button
|
||||
<PlatformActionButton
|
||||
type="button"
|
||||
surface="editorDark"
|
||||
tone="ghost"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
disabled={isGenerating}
|
||||
onClick={onSkip}
|
||||
className="absolute right-4 top-4 z-10 inline-flex min-h-10 items-center justify-center rounded-full border border-white/14 bg-black/24 px-4 text-sm font-black text-white/86 shadow-[0_12px_28px_rgba(0,0,0,0.22)] backdrop-blur transition hover:border-amber-200/45 hover:text-amber-100 disabled:cursor-not-allowed disabled:opacity-45 sm:right-6 sm:top-6"
|
||||
className="absolute right-4 top-4 z-10 min-h-10 shadow-[0_12px_28px_rgba(0,0,0,0.22)] backdrop-blur sm:right-6 sm:top-6"
|
||||
>
|
||||
跳过
|
||||
</button>
|
||||
</PlatformActionButton>
|
||||
<section className="relative flex w-full max-w-[34rem] flex-col items-center gap-5 text-center">
|
||||
<div className="grid h-14 w-14 place-items-center rounded-[1.2rem] border border-amber-200/32 bg-amber-200/14 text-amber-100 shadow-[0_18px_48px_rgba(251,191,36,0.18)]">
|
||||
{isGenerating ? (
|
||||
@@ -70,10 +75,13 @@ export function PuzzleOnboardingView({
|
||||
rows={4}
|
||||
className="min-h-32 rounded-[1.25rem] border-white/14 bg-black/28 py-4 leading-7 shadow-[0_18px_50px_rgba(0,0,0,0.24)] backdrop-blur placeholder:text-white/42 focus:border-amber-200/70 focus:ring-2 focus:ring-amber-200/20 disabled:opacity-70"
|
||||
/>
|
||||
<button
|
||||
<PlatformActionButton
|
||||
type="submit"
|
||||
surface="editorDark"
|
||||
tone="accent"
|
||||
size="lg"
|
||||
fullWidth
|
||||
disabled={!canSubmit}
|
||||
className="inline-flex min-h-12 items-center justify-center gap-2 rounded-[1rem] bg-amber-200 px-5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-45"
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
@@ -83,7 +91,7 @@ export function PuzzleOnboardingView({
|
||||
) : (
|
||||
'生成'
|
||||
)}
|
||||
</button>
|
||||
</PlatformActionButton>
|
||||
</form>
|
||||
{error ? (
|
||||
<PlatformStatusMessage
|
||||
@@ -124,11 +132,14 @@ export function PuzzleOnboardingLoginOverlay({
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-2xl font-black leading-tight">{copy}</h2>
|
||||
<button
|
||||
<PlatformActionButton
|
||||
type="button"
|
||||
surface="editorDark"
|
||||
tone="accent"
|
||||
size="lg"
|
||||
fullWidth
|
||||
disabled={isSaving}
|
||||
onClick={onLogin}
|
||||
className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-[1rem] bg-amber-200 px-5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-45"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
@@ -138,7 +149,7 @@ export function PuzzleOnboardingLoginOverlay({
|
||||
) : (
|
||||
'注册账号 / 登录'
|
||||
)}
|
||||
</button>
|
||||
</PlatformActionButton>
|
||||
{error ? (
|
||||
<PlatformStatusMessage
|
||||
tone="error"
|
||||
|
||||
Reference in New Issue
Block a user