diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md index 4d3c0889..3a02da3b 100644 --- a/.hermes/shared-memory/decision-log.md +++ b/.hermes/shared-memory/decision-log.md @@ -236,6 +236,7 @@ - 2026-06-10 验证补充：作品详情顶部和封面轮播图标按钮收口补跑 `npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformIconButton.test.tsx`。 - 2026-06-10 验证补充：作品详情底部启动 / 改造动作收口补跑 `npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformActionButton.test.tsx`。 - 2026-06-10 验证补充：作品详情点赞按钮收口补跑 `npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformActionButton.test.tsx src/components/common/platformActionButtonModel.test.ts`。 +- 2026-06-10 验证补充：creative-agent 模板确认弹层“关卡数”行内标题收口到 `PlatformFieldLabel variant="inlineForm"` 后，补跑 `npm run test -- src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx src/components/common/PlatformFieldLabel.test.tsx`。 - 2026-06-10 验证补充：平台作品详情主题标签和作品号复制 chip 收口后，补跑 `npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformPillBadge.test.tsx src/components/common/CopyCodeButton.test.tsx`。 - 2026-06-10 验证补充：平台作品详情分享复制反馈按状态映射到 `PlatformStatusMessage surface="platform"` 后，补跑 `npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformStatusMessage.test.tsx`。 - 2026-06-10 验证补充：大鱼吃小鱼结果页缺草稿空态收口补跑 `npm run test -- src/components/big-fish-result/BigFishResultView.test.tsx src/components/common/PlatformEmptyState.test.tsx`。 diff --git a/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md b/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md index a3d33630..193d7c5f 100644 --- a/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md +++ b/docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md @@ -83,10 +83,11 @@ - `PlatformTextField` 补充：creation-agent composer 文本域使用 `variant="textarea" size="md" density="compact"`；工作台只保留受控值、禁用条件、Enter / Shift+Enter 行为和局部布局 class，不再手写 textarea chrome。 - `PlatformTextField` 补充：拼图首访 onboarding 提示词文本域使用 `variant="textarea" surface="editorDark" density="roomy" size="lg"`；onboarding 保留受控输入、生成 / 已生成禁用和沉浸式壳层，不再手写 textarea 基础 chrome。 - `PlatformTextField` 补充：平台反馈页问题描述和联系电话字段使用 `surface="platform"`；反馈页保留外层原生 `label`、受控值、长度限制和透明嵌入式局部 class，不再手写 textarea / input 基础语义和重复 chrome。 -- `PlatformFieldLabel`：接收 `variant="field" | "section" | "form" | "pill" | "accentPill"`、`children` 和 `className`；`field` 用于视觉小说等结果页的普通字段名，`section` 用于平台白底面板内小标题，`form` 用于创作工作台、通用创作输入面板和认证表单普通字段标题，`pill` / `accentPill` 用于汪汪声浪等工作台里的胶囊字段标题。业务页只传字段文案和必要的局部 class，不再重复写 `text-xs font-bold text-[var(--platform-text-soft)]`、`text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]`、`mb-2 block text-sm font-black`、普通胶囊或 rose 强调胶囊 class。视觉小说结果页、抓大鹅结果页作品 / 封面 / 素材字段标题、方洞结果页主信息 / 形状 / 洞口 / 历史图片字段标题、拼图结果页关卡详情 / 发布弹窗字段标题、拼消消创作工作台作品标题 / 简介 / 主题词、跳一跳创作工作台主题、大鱼素材弹窗 prompt、RPG 发布弹窗发布检查 / 封面设置、汪汪声浪轻配置编辑器、宝贝识物工作台、通用创作图片输入面板主图 / 提示词标题，以及认证表单中的手机号 / 验证码 / 密码 / 邀请码标题已先迁移。认证和提示词字段继续保留外层原生 `label` 关联，不把可访问命名交给装饰性标题组件。 +- `PlatformFieldLabel`：接收 `variant="field" | "section" | "form" | "inlineForm" | "pill" | "accentPill"`、`children` 和 `className`；`field` 用于视觉小说等结果页的普通字段名，`section` 用于平台白底面板内小标题，`form` 用于创作工作台、通用创作输入面板和认证表单普通字段标题，`inlineForm` 用于模板确认弹层这类行内字段标题，`pill` / `accentPill` 用于汪汪声浪等工作台里的胶囊字段标题。业务页只传字段文案和必要的局部 class，不再重复写 `text-xs font-bold text-[var(--platform-text-soft)]`、`text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]`、`mb-2 block text-sm font-black`、`text-sm font-bold text-[var(--platform-text-base)]`、普通胶囊或 rose 强调胶囊 class。视觉小说结果页、抓大鹅结果页作品 / 封面 / 素材字段标题、方洞结果页主信息 / 形状 / 洞口 / 历史图片字段标题、拼图结果页关卡详情 / 发布弹窗字段标题、拼消消创作工作台作品标题 / 简介 / 主题词、跳一跳创作工作台主题、大鱼素材弹窗 prompt、RPG 发布弹窗发布检查 / 封面设置、汪汪声浪轻配置编辑器、宝贝识物工作台、通用创作图片输入面板主图 / 提示词标题，以及认证表单中的手机号 / 验证码 / 密码 / 邀请码标题已先迁移。认证和提示词字段继续保留外层原生 `label` 关联，不把可访问命名交给装饰性标题组件。 - `PlatformFieldLabel` 补充：个人中心玩过弹窗内的“可继续 / 玩过”分区标题使用 `variant="section"`；业务组件只传分区文案和 `mb-2 block` 局部布局，不再手写 `text-xs font-black text-zinc-500`。 - `PlatformFieldLabel` 补充：个人中心邀请弹窗里的“邀请码 / 成功邀请”小标题使用 `variant="section"`；业务组件只保留必要的居中或深色文本局部 class，不再手写同类小标题字体。 - `PlatformFieldLabel` 补充：平台反馈页问题描述和联系电话标题使用 `variant="form"`，并保留外层原生 `label htmlFor` 负责可访问名称；反馈页不再手写字段标题字体和颜色。 +- `PlatformFieldLabel` 补充：creative-agent 模板确认弹层里的“关卡数”行内标题使用 `variant="inlineForm"`，并继续保留外层原生 `label` 与 `PlatformTextField aria-label="计划关卡数"` 的可访问命名；弹层不再手写紧凑行内字段标题字体。 - `PlatformSegmentedTabs`：接收 `items`、`activeId`、`onChange`、`columns="one" | "two" | "three" | "four" | "threeToSix"`、`gap="sm" | "md"`、`radius="md" | "lg" | "xl"`、`size="sm" | "md" | "compact" | "choice" | "tab"`、`surface="default" | "soft" | "transparent"`、`tone="neutral" | "warm" | "rose" | "underline"`、`frame="panel" | "bare"`、`semantics="segment" | "tabs"`、`ariaLabel`、`truncateLabels`、`disabled`、`className` 和 `itemClassName`；普通分段统一写入 `aria-pressed`，Tab 语义统一写入 `role="tablist"` / `role="tab"` / `aria-selected`，并承载禁用阻断、白底选中态、空闲 hover、焦点 ring、响应式列数、裸分段外壳、下划线选中态和 label 截断。拼图结果页、抓大鹅结果页、抓大鹅素材配置、抓大鹅创作 / 结果页难度选择、视觉小说结果页、creative-agent 模板确认弹窗和认证入口短信 / 密码登录切换已先迁移。后续白底结果页 Tab、弹窗分段选择、四选一配置项或认证 / 设置类下划线 Tab 只传选项、当前值和变更回调，不再重复 `grid + border + bg-white/62 + button aria-pressed` 或本地 `role="tab"` 下划线按钮。 - `PlatformStatGrid`：接收 `items`、`columns="two" | "three" | "four" | "twoToFour"`、`density="compact" | "default"`、`order="valueFirst" | "labelFirst"`、`surface="soft" | "plain"`、`textAlign="left" | "center"`、`className` 和 `itemClassName`；统一承载平台结果页里的统计小卡、状态 chip、白底摘要卡、label/value 排版和响应式列数。拼消消结果页素材摘要、方洞结果页封面状态 chip、抓大鹅结果页难度摘要、creative-agent 模板确认摘要和自定义世界实体目录世界页档案规模已先迁移，业务页只传统计项数组和少量布局参数，不再重复写 `grid + rounded + bg-white/* + text-xl/text-xs`。 - `PlatformPillBadge`：接收 `tone="muted" | "neutral" | "neutralSolid" | "lightOverlay" | "success" | "warning" | "danger" | "cool" | "profile" | "profileAccent" | "darkSoft" | "darkNeutral" | "darkSky" | "darkEmerald" | "darkAmber" | "darkRose"`、`size="xxs" | "xs" | "sm"`、可选 `icon`、`children`、`className` 和原生 span props；统一承接单个状态 / 标签 chip 的圆角、边框、底色、字号和图标间距，并通过 `platformPillBadgeModel.ts` 的 `getPlatformPillBadgeClassName` 给复制类交互按钮复用同一视觉 chrome。`xxs` 用于实体目录卡片等密集元信息 chip，`muted` 用于平台白底柔和选择态和地图节点当前状态，`lightOverlay` 用于主动作按钮内部的泥点消耗等浅色叠层小胶囊，`danger` 用于删除 / 选中危险态，`profile` / `profileAccent` 用于个人中心玫瑰色信息 / 分类 chip，`dark*` 用于 RPG 暗色弹窗和角色详情里的纯展示 chip。宝贝识物结果页发布状态、主题标签与占位资源 overlay，宝贝识物 / 拼图 / 抓大鹅 / 视觉小说工作台 BETA chip、汪汪声浪轻配置 chip、汪汪声浪结果页草稿 chip、汪汪声浪预览 VS chip、敲木鱼结果页飘字 chip、creative-agent 顶部阶段 / 过程计数 / 条目 meta chip、通用音频输入面板限制标签、自定义世界实体目录批量选择 / 生成中 / 开局 CG / 可扮演角色元信息 badge、RPG 首页公开作品卡 / 搜索结果 / 充值商品 / 移动端创建入口 / 桌面发现区 chip、RPG 世界详情静态元信息 chip、RPG 角色身份 / 等级 / 技能出手方式 / 技能详情与状态标签 / 背景故事解锁状态 / 好感等级 / 角色资产工作室动作状态 / 角色编辑技能动作状态 / 角色资源应用状态 / 场景角色选择状态 / 地标当前连接状态 / 地图节点方向标签 / 地图场景切换方向标签 / 营地编组状态数值 / 作品封面来源状态 / 开局物品标签、NPC 交易数量 / 赠礼好感和背包工坊材料需求等暗色展示 chip、抓大鹅批量新增 / 批量重生成物品名称预览 chip、抓大鹅 / RPG / 拼图 / 方洞结果页自动保存状态、抓大鹅结果页当前难度 badge、拼图结果页关卡生成中 overlay / 列表 badge、大鱼吃小鱼结果页终局 / 关卡元信息 / 发布校验成功 badge、拼图图库详情页题材标签、自定义世界作品卡二级 badge、生成失败 chip，以及个人中心泥点账单余额、玩过总时长和玩过作品类型 chip 已先迁移。后续作品卡状态、结果页标签、个人中心轻量信息、按钮内消耗标签和轻量配置 chip 优先使用该 Module；多项数值 / 标签摘要仍使用 `PlatformStatGrid`，可交互标签编辑仍使用 `PlatformTagEditor`，可点击复制 / 分享 chip 使用 `CopyCodeButton` / `CopyFeedbackButton actionAppearance="pill"`。 diff --git a/src/components/common/PlatformFieldLabel.test.tsx b/src/components/common/PlatformFieldLabel.test.tsx index 2086a630..fdf61f20 100644 --- a/src/components/common/PlatformFieldLabel.test.tsx +++ b/src/components/common/PlatformFieldLabel.test.tsx @@ -37,6 +37,22 @@ test('renders form label and keeps local classes', () => { expect(label.className).toContain('mt-1'); }); +test('renders inline form label without block spacing', () => { + render( + + 关卡数 + , + ); + + const label = screen.getByText('关卡数'); + + expect(label.className).toContain('inline-flex'); + expect(label.className).toContain('text-sm'); + expect(label.className).toContain('font-bold'); + expect(label.className).toContain('shrink-0'); + expect(label.className).not.toContain('mb-2'); +}); + test('renders pill and accent pill labels', () => { render( <> diff --git a/src/components/common/PlatformFieldLabel.tsx b/src/components/common/PlatformFieldLabel.tsx index b07e20ae..5caca969 100644 --- a/src/components/common/PlatformFieldLabel.tsx +++ b/src/components/common/PlatformFieldLabel.tsx @@ -4,6 +4,7 @@ type PlatformFieldLabelVariant = | 'field' | 'section' | 'form' + | 'inlineForm' | 'pill' | 'accentPill'; @@ -18,6 +19,8 @@ const PLATFORM_FIELD_LABEL_CLASS: Record = { section: 'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]', form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]', + inlineForm: + 'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]', pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]', accentPill: 'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm', diff --git a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx index d63ecebb..9773e242 100644 --- a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx +++ b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx @@ -46,6 +46,9 @@ test('shows cost range and opens an independent adjustment dialog', () => { fireEvent.click(within(confirmDialog).getByRole('button', { name: /调整/u })); const adjustDialog = screen.getByRole('dialog', { name: '调整拼图模板' }); expect(adjustDialog.parentElement).not.toBe(confirmDialog); + expect(within(adjustDialog).getByText('关卡数').className).toContain( + 'inline-flex', + ); fireEvent.click(within(adjustDialog).getByRole('button', { name: '多关卡' })); const levelCountInput = within(adjustDialog).getByLabelText('计划关卡数'); diff --git a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.tsx b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.tsx index ad098451..b771b108 100644 --- a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.tsx +++ b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.tsx @@ -5,6 +5,7 @@ import { createPortal } from 'react-dom'; import type { PuzzleCreativeTemplateSelection } from '../../../packages/shared/src/contracts/puzzleCreativeTemplate'; import { useAuthUi } from '../auth/AuthUiContext'; import { PlatformActionButton } from '../common/PlatformActionButton'; +import { PlatformFieldLabel } from '../common/PlatformFieldLabel'; import { PlatformIconBadge } from '../common/PlatformIconBadge'; import { PlatformMediaFrame } from '../common/PlatformMediaFrame'; import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton'; @@ -238,9 +239,9 @@ export function CreativeAgentTemplateConfirmPanel({ />