Genarrative/docs/【玩法创作】生成页圆环布局口径-2026-05-23.md

生成页圆环布局口径

更新时间：2026-06-02

目标

所有玩法的生成页统一收敛为参考图同款等待态：顶部只保留返回入口和生成状态胶囊，页面中段用大圆环展示总进度，圆环左右悬浮“预计等待 / 已耗时”，下方只保留当前步骤单卡和当前作品信息卡，不再渲染步骤列表块。

落地口径

• 共用生成页 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，展示 素材生成中、草稿生成中 等调用侧传入文案。
• 圆弧区域不再包独立大卡片，信息卡只展示“预计等待”和“已耗时”；总进度数值放在圆弧内侧偏上的位置并保持更小字号。圆环内部坐标固定在 400x400 的 SVG viewBox 上，圆弧使用 r=166、strokeWidth=18 的 SVG 描边，外层显示宽度上限为 400px；窄屏视口按 min(400px, calc(100vw - 2.5rem)) 等比收缩，避免等待页右侧被裁切。圆弧不再使用 conic-gradient + mask，避免进度条边缘模糊。
• 圆弧描边以圆心为中心整体按 135deg 起始；270deg 扫描角配合 90deg 正下方缺口时，轨道和填充都从同一个对称起点出发，轨道保持 rotate(135 200 200)，填充端点也使用 rotate(135 200 200)。圆环只允许在可用宽度不足 400px 时等比收缩，不随宽屏容器继续放大。
• 在窄屏下，预计等待 / 已耗时信息卡放到圆环下方两列排布；sm 及以上视口再回到圆环左右悬浮，避免左右悬浮卡和圆环共同超过视口宽度。
• 总进度标题和百分比数字必须显式高于 SVG 圆环层级渲染，避免被圆环边缘压住；圆环本身只做背景层，不抢文字层。
• 总进度标题和百分比数字要比圆环再上移一点，当前内容区上边距以 pt-[2%] 为准，桌面端可进一步微调到 sm:pt-[1.5%]，确保数字不与进度条弧线重合。
• 从作品架或刷新后的持久化生成中草稿进入生成页时，前端必须按后端 session updatedAt 或作品摘要 updatedAt 恢复展示态 startedAtMs，保证“已耗时”不因重新进入页面而清零；后端 progressPercent 只用于真实步骤推进，不得直接作为总进度地板，避免恢复生成页首帧直接显示 88% 或 100%。
• 生成页只展示半透明“当前步骤”单卡，卡片内只保留步骤名称、步骤状态、步骤进度条和轻量加载指示；“当前步骤”标签使用 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-[2%]，桌面端保持 sm:pt-[1.5%]，圆弧 DOM 为 SVG，包含清晰的 track/fill circle 描边。
• 还应断言圆环容器使用 w-[min(400px,calc(100vw-2.5rem))]、max-w-full 和 aspect-square，窄屏截图至少覆盖 280px / 320px / 360px / 390px 宽度，确认右侧没有硬性裁切。
• 页面在桌面和移动端都不应再出现生成步骤列表块，圆环和当前步骤卡不能被外层卡片嵌套出双层面板感。