4.7 KiB
4.7 KiB
生成页圆环布局口径
更新时间：2026-05-24
目标
所有玩法的生成页统一收敛为参考图同款等待态：顶部只保留返回入口和生成状态胶囊，页面中段用大圆环展示总进度，圆环左右悬浮“预计等待 / 已耗时”，下方只保留当前步骤单卡和当前作品信息卡，不再渲染步骤列表块。
落地口径
- 共用生成页
CustomWorldGenerationView的主进度条使用居中 SVG 大圆弧，默认保留正下方 90 度留空，media/create_bg_video.mp4作为固定全屏背景层循环静音播放；圆弧覆盖在背景之上展示总进度。视频层需要显式触发播放，不能只依赖autoPlay/loop/muted属性。 - 生成页背景视频必须留在生成页容器内部，直接作为
fixed inset-0的底层背景，不要再通过 portal 挂到document.body；页面根容器使用z-[1]、背景容器使用z-0，确保顶部导航、圆环和当前步骤卡都稳定覆盖在视频之上。 - 预计等待 / 已耗时信息卡要压缩为更轻的半透明窄卡，标签使用
9px-10px，数值使用12px-13px，字号对齐其他生成页 UI 的小字号，不再使用偏大的提示文本；卡片标题和时间值都居中显示，两个数值只展示时间本身，调用侧不要再拼接“预计还需”或“已耗时”前缀。圆环中心不再保留独立白底块，空心圆环只保留条状进度，圆弧半径继续加大，进度数字与“总进度”标题整体上移，靠近圆环上半区。 - 顶部导航区采用“返回创作中心 / 状态胶囊”结构，返回按钮使用左箭头图标，字号使用
text-xs-sm，状态胶囊使用11px-12px，展示素材生成中、草稿生成中等调用侧传入文案。 - 圆弧区域不再包独立大卡片，左右悬浮信息卡只展示“预计等待”和“已耗时”；总进度数值放在圆弧内侧偏上的位置并保持更小字号。当前圆环外径以
w-[min(35rem,94vw)] sm:w-[52rem]为基准，圆弧使用r=166、strokeWidth=18的 SVG 描边，不再使用conic-gradient + mask，避免进度条边缘模糊。 - 圆弧描边以圆心为中心整体按
155deg起始；在当前 SVG 坐标系下，这相对160deg会向左逆时针回调5deg。track 和 fill 都必须共用同一个rotate(155 200 200)变换，避免只改视觉起点却让填充和轨道错位。 - 总进度标题和百分比数字必须显式高于 SVG 圆环层级渲染，避免被圆环边缘压住；圆环本身只做背景层，不抢文字层。
- 总进度标题和百分比数字要比圆环再上移一点，当前内容区上边距以
pt-[2%]为准，桌面端可进一步微调到sm:pt-[1.5%]，确保数字不与进度条弧线重合。 - 从作品架或刷新后的持久化生成中草稿进入生成页时，前端必须重置“展示态 startedAtMs”为进入生成页的当前时间；后端
progressPercent只用于后续真实步骤推进，不得参与首帧总进度展示，避免恢复生成页首帧直接显示80%+。 - 生成页只展示半透明“当前步骤”单卡，卡片内只保留步骤名称、步骤状态、步骤进度条和轻量加载指示；“当前步骤”标签使用
10px-11px，步骤名称使用14px-15px，状态使用11px-12px，不再渲染步骤列表或步骤详情。 - 当前作品信息放在圆角信息卡中，标题固定使用
13px；有结构化字段时以两列信息块展示，例如“题材 / 素材数量”，无结构化字段时才展示纯文本设定。 - 汪汪声浪生成页
BarkBattleGeneratingView也必须对齐同一垂直布局，不再继续展示三行槽位列表或左右分栏抢占主视觉。 - 汪汪声浪的总进度按三槽位已完成数量换算；当前步骤只显示第一个未完成槽位的名称与进度。
验收
src/components/CustomWorldGenerationView.test.tsx覆盖圆环主视觉和单步卡片。src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx覆盖汪汪声浪生成页对齐后的圆环布局。- 两个生成页都应在测试里断言页面根容器层级高于背景视频容器，且背景视频确实是页面子节点，避免 portal 背景把业务 UI 压住。
- 还应断言圆弧正下方留空、圆环中心没有独立底色块，时间卡和总进度字号缩小后仍能在桌面与移动端正常排版；同时断言时间卡
text-center、标题行justify-center、总进度内容区上移到pt-[4%]，圆弧 DOM 为 SVG，包含清晰的 track/fill circle 描边。 - 页面在桌面和移动端都不应再出现生成步骤列表块，圆环和当前步骤卡不能被外层卡片嵌套出双层面板感。