From 9cc36ea99ccd59c21b247016ea34565716ee8825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=94=E9=A6=99=E4=B8=B8=E5=AD=90?= <15518898337@163.com>
Date: Wed, 27 May 2026 21:56:19 +0800
Subject: [PATCH] Refine creation progress and wooden fish runtime

---
 .hermes/shared-memory/decision-log.md         |  16 +++
 .hermes/shared-memory/pitfalls.md             |  12 +-
 ...€�玩法创作】敲木鱼玩法模æ�¿PRD-2026-05-20.md |   6 +-
 ...�玩法创作】生�页圆环布局�径-2026-05-23.md |   6 +-
 .../crates/api-server/src/wooden_fish.rs      |  11 +-
 .../spacetime-module/src/wooden_fish.rs       | 135 +++++++++++++++++-
 .../CustomWorldGenerationView.test.tsx        |  15 +-
 src/components/GenerationProgressHero.tsx     |  25 +++-
 .../BarkBattleGeneratingView.test.tsx         |  15 +-
 9 files changed, 209 insertions(+), 32 deletions(-)

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index 1495b21d..f1e7957c 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-05-27 生�页总进度圆弧�定固定画布
+
+- 背景：多轮圆环角度微调�，`GenerationProgressHero` 的 SVG 圆弧�会出现底部开��斜的问题，且圆环还会��容器宽度伸缩，导致 UI 看起�时大时���置漂移。
+- 决策：共用 `GenerationProgressHero` 的 SVG 圆弧起始角固定为 `135deg`，轨�和橘黄色填充都从�一个对称起点 `rotate(135 200 200)` 出�；`270deg` 扫�角��正下方 `90deg` 留空，圆环本体改为固定 `400x400` 画布，��跟�页�宽度缩放，外层布局�负责定�，�负责改动圆环样�。
+- 影�范围：`src/components/GenerationProgressHero.tsx`�共用 `CustomWorldGenerationView`�汪汪声浪 `BarkBattleGeneratingView` 以�生�页圆环布局文档。
+- 验�方�：`CustomWorldGenerationView` 和 `BarkBattleGeneratingView` 测试断言 `data-ring-start-degrees=135`�`data-ring-fill-start-degrees=135`，且圆环容器固定为 `h-[400px] w-[400px]`，track / fill transform 都是 `rotate(135 200 200)`。
+- 关�文档：`docs/�玩法创作】生�页圆环布局�径-2026-05-23.md`。
+
 ## 2026-05-26 平�跨�程错误统一用��制��弹窗展示
 
 - 背景：拼图等生�链路�能�时存在多个�稿或游玩实例，页�内裸错误 banner 容易让用户误以为当�正在看的拼图失败，也�方便�制完整错误给开�排查。
@@ -201,6 +209,14 @@
 - 验�方�：背景 prompt �测应包�中央�区硬约�，试玩图中央��出现苹果或其它主题主体。
 - 关�文档：`docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
 
+## 2026-05-27 敲木鱼背景 prompt ��写中央木鱼预设
+
+- 背景：背景 prompt 曾写入“木鱼预设在�幕中央�置�，与“背景图中�包�新木鱼物��“中央 40% �止出现主题主体�直接冲�，导致 image2 ��把��木鱼画回背景中心。
+- 决策：背景 prompt �能写“中央主体预留区�“�行��放敲击物的留白区域�“�生�背景环境图�，�得�出现“木鱼预设在�幕中央�置�或任何等价的中心主体正��述。
+- 影�范围：`server-rs/crates/api-server/src/wooden_fish.rs`�敲木鱼 PRD�平�链路文档�背景 prompt �测。
+- 验�方�：`wooden_fish_background_prompt_uses_hidden_image2_flow` 必须断言旧冲����存在，并断言新的中央留白表述存在。
+- 关�文档：`docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 2026-05-21 外部 API 失败必须 OTLP 上报并�库
 
 - 背景：图片生�等外部供应商调用失败时，仅返回 502/504 或普通日志无法支��续按 provider�阶段和�试属性��排障。
diff --git a/.hermes/shared-memory/pitfalls.md b/.hermes/shared-memory/pitfalls.md
index 4529c30c..89db8320 100644
--- a/.hermes/shared-memory/pitfalls.md
+++ b/.hermes/shared-memory/pitfalls.md
@@ -170,7 +170,7 @@
 
 - 现象：苹果等主题试玩时，中央敲击物图带明显黑底；背景图中央还�能出现苹果主体，或背景环境图����纯绿色底，和“中央��加 hitObjectAsset�的�行�设定冲�。
 - 原因：gpt-image-2 对“�明底�和“背景��外围氛围�的�循�稳定。若 hit object 直接入库，黑底会被当�真实�素展示；若背景 prompt �有软�述，模型会把主题主体画进中央。第一步为了去背刻��求绿幕图时，如果第二步�考图或 prompt 没有切断绿幕语义，背景图也�能继承纯绿色画布。
-- 处�：敲木鱼 hit object prompt 固定�求先输出 `1:1` 绿色背景主体图（纯绿色绿幕��一 `#00FF00` 背景），�由 `api-server` �对绿幕背景�去绿�明化；��回到黑底 / 白底 / �明底 prompt ���泛抠图。背景生�必须使用第一步抠图完��的�明图作为�考图，并在 prompt 中显��止继承绿色底色�绿幕底色或纯绿色画布；背景 prompt 还�固定�求中央 40% 主体预留区干净，�止主题主体�局部特写�轮廓影����元素和主题碎片，��许外围氛围。
+- 处�：敲木鱼 hit object prompt 固定�求先输出 `1:1` 绿色背景主体图（纯绿色绿幕��一 `#00FF00` 背景），�由 `api-server` �对绿幕背景�去绿�明化；��回到黑底 / 白底 / �明底 prompt ���泛抠图。背景生�必须使用第一步抠图完��的�明图作为�考图，并在 prompt 中显��止继承绿色底色�绿幕底色或纯绿色画布；背景 prompt 还�固定�求中央 40% 主体预留区干净，�止主题主体�局部特写�轮廓影����元素和主题碎片，��许外围氛围。��在背景 prompt 写“木鱼预设在�幕中央�置�或类似中心主体正��述，�行�敲击物�能由�端�放。
 - 验�：`cargo test -p api-server wooden_fish --manifest-path server-rs\Cargo.toml`，并用花朵 / 苹果 / 玉米主题跑试玩图确认绿幕被去除�主体未被抠除�背景中央�出现主题主体，背景环境图��出现纯绿色底。
 - 关�：`server-rs/crates/api-server/src/wooden_fish.rs`�`docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
 
@@ -182,6 +182,14 @@
 - 验�：`cargo test -p api-server wooden_fish --manifest-path server-rs\Cargo.toml`，并�新试玩确认返回按钮�剩圆形底色和中央左箭头。
 - 关�：`server-rs/crates/api-server/src/wooden_fish.rs`�`docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`.
 
+## 敲木鱼历�已�布作�缺返回按钮�补�，���推�过滤
+
+- 现象：推�页或公开列表中的历�敲木鱼作�点击�行�时报 `敲木鱼�行�需�完整作��置`，但这类作�的敲击物�背景�音效和飘字都已完整，�是 `backButtonAsset` 为空。
+- 原因：早期已�布作�缺少统一的默认返回按钮快照；�行��动时如果�直接按完整�置校验，就会把�玩的历�作�拒掉。这个问题�应通过推��或公开列表过滤解决。
+- 处�：`spacetime-module` 在 `start_wooden_fish_run_tx` 和 work snapshot 构建时，若作�已�布且 `generationStatus=ready`，但仅缺 `backButtonAsset`，就补写内置默认返回按钮 `/UI/11_left_arrow.png`，�继续进入�行�。默认返回按钮以 `bundled-default` 资产快照写回 work profile，字段�� `assetId=wooden-fish-default-back-button`�`imageObjectKey=public/UI/11_left_arrow.png`。
+- 验�：历�木鱼作�点击�行���报完整作��置缺失；第一次进入�，work profile 里应补出 `backButtonAsset`。
+- 关�：`server-rs/crates/spacetime-module/src/wooden_fish.rs`�`docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 敲木鱼创作生���沿用 15 秒会�超时
 
 - 现象：敲木鱼工作�点击“生���，�端直接�示 `请求超时：15000ms`，但�端和 VectorEngine 未必已�失败。
@@ -1567,6 +1575,8 @@
 
 2026-05-24 补充：生�页“预计等待 / 已耗时��片本身已�有标签，传给 `GenerationProgressHero` 的值�能是纯时间，例如 `4 分钟`�`1 分 15 秒`，���拼接“预计还需�或“已耗时�；两张时间�也�和当�步骤�一样����明。拼图总进度�始帧必须�许显示 `0%`，���用 `Math.max(1, nextProgress)` 之类的�护把�动�抬到 `1%`。
 
+2026-05-27 补充：`generation-hero-progress-ring-fill` 里那个橘黄色�点�是背景噪点，而是 `strokeLinecap="round"` 在短弧段上的端点；当�圆环�径�求底部 `90deg` 开�居中对称，因此轨�和填充都应使用 `135deg` 起点。圆环本体现在固定为 `400x400`，排查时先看 `data-ring-start-degrees`�`data-ring-fill-start-degrees` 和容器尺寸，��把尺寸伸缩误认�素�渲染问题。
+
 ## `dev:spacetime` �动� 3101 �断开先查 publish 是�被 spacetime.json 干扰
 
 - 现象：�览器报 `Failed to initiate WebSocket connection`，目标为 `ws://127.0.0.1:3101/v1/database/<db>/subscribe`，端�检查�现 `3101` 没有长期监�；手动�行 `npm run dev:spacetime` �看到 standalone 短暂�动�退出，�布阶段报 `No database target matches '<db>'`。
diff --git a/docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md b/docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md
index fa2c56f6..6bf23f8e 100644
--- a/docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md
+++ b/docs/prd/�玩法创作】敲木鱼玩法模�PRD-2026-05-20.md
@@ -166,11 +166,11 @@ WF-*
 1. 调用 VectorEngine `/v1/images/edits`，模型固定为 `gpt-image-2`；
 2. multipart �考图固定为第一步敲击物图案抠图完��的�明图；默认未生�新敲击物时使用内置默认敲击物图案的�明兜底图；
 3. 尺寸固定竖� `9:16`；
-4. 背景环境图�适�新敲击物主题和画风，背景中�得包�新敲击物本体，也�得增加木槌互动物�；中央主体预留区必须��干净，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；
+4. 背景环境图�适�新敲击物主题和画风，背景中�得包�新敲击物本体，也�得增加木槌互动物�；中央主体预留区必须��干净，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；�行�的敲击物�在�端�放，��许出现在背景图�示�里。
 5. �示�严格使用：
 
 ```text
-生�敲木鱼背景，�求主题，画风与�考图��高度一致，背景元素和颜色��与主题对应，木鱼预设在�幕中央�置，木鱼主体周围元素��干净，背景氛围围绕外围设计，背景环境图中�包�新木鱼物�，背景氛围中�增加木槌互动物�。尺寸竖�9:16。�考图必须是第一步敲击物抠图完��的�明图，�继承任何绿色底色�绿幕底色或纯绿色画布，并�求最终输出完整��明的背景环境图。中央主体预留区必须��干净，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；主题元素��许出现在外围氛围，�得把主题物�画在画�中央，也��把主题物�作为背景中心装饰。
+生�敲木鱼背景，�求主题�画风与�考图��高度一致，背景元素和颜色��与主题对应，�生�竖�背景环境图，�生����绘��暗示新木鱼物�本体，也��出现木槌互动物�。尺寸竖�9:16。�考图必须是第一步敲击物抠图完��的�明图，�继承任何绿色底色�绿幕底色或纯绿色画布，并�求最终输出完整��明的背景环境图。中央主体预留区必须��干净，中央区域是�行��放敲击物的留白区域，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；主题元素��许出现在外围氛围，�得把主题物�画在画�中央，也��把主题物�作为背景中心装饰。
 主题为：（用户�供�考图或用户输入关键�）
 ```
 
@@ -384,6 +384,8 @@ finish
 
 公开列表优先消费 `wooden_fish_gallery_card_view` 订阅缓存。公开详情如果�片摘��足以进入�行�，必须补读完整 work profile。
 
+历�已�布且 `generationStatus=ready` 的木鱼作�如果仅缺 `backButtonAsset`，�行��动�必须补�内置默认返回按钮 `/UI/11_left_arrow.png`，并�久写回 work profile；这类历�作��应通过推��过滤��。
+
 ## 13. 验收
 
 1. 创作入�能看到 `敲木鱼` 模�；
diff --git a/docs/�玩法创作】生�页圆环布局�径-2026-05-23.md b/docs/�玩法创作】生�页圆环布局�径-2026-05-23.md
index ef97e819..760a55d7 100644
--- a/docs/�玩法创作】生�页圆环布局�径-2026-05-23.md
+++ b/docs/�玩法创作】生�页圆环布局�径-2026-05-23.md
@@ -12,8 +12,8 @@
 - 生�页背景视频必须留在生�页容器内部，直接作为 `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)` ��，���改视觉起点�让填充和轨�错�。
+- 圆弧区域��包独立大�片，左�悬浮信���展示“预计等待�和“已耗时�；总进度数值放在圆弧内侧�上的�置并��更�字�。圆环本体固定在 `400x400` 的 SVG 画布上，圆弧使用 `r=166`�`strokeWidth=18` 的 SVG �边，��跟�页�宽度缩放，也��使用 `conic-gradient + mask`，��进度�边缘模糊。
+- 圆弧�边以圆心为中心整体按 `135deg` 起始；`270deg` 扫�角�� `90deg` 正下方缺�时，轨�和填充都从�一个对称起点出�，轨��� `rotate(135 200 200)`，填充端点也使用 `rotate(135 200 200)`。圆环本体尺寸固定，��许��容器边长伸缩，�能由外层布局决定放置�置。
 - 总进度标题和百分比数字必须显�高于 SVG 圆环层级渲染，��被圆环边缘压�；圆环本身��背景层，�抢文字层。
 - 总进度标题和百分比数字�比圆环�上移一点，当�内容区上边�以 `pt-[2%]` 为准，桌�端�进一步微调到 `sm:pt-[1.5%]`，确�数字�与进度�弧线��。
 - 从作�架或刷新�的�久化生�中�稿进入生�页时，�端必须�置“展示� startedAtMs�为进入生�页的当�时间；�端 `progressPercent` �用于�续真实步骤推进，�得�与首帧总进度展示，����生�页首帧直接显示 `80%+`。
@@ -27,5 +27,5 @@
 - `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 �边。
+- 还应断言圆弧正下方留空�圆环中心没有独立底色�，时间�和总进度字�缩���能在桌�与移动端正常排版；�时断言时间� `text-center`�标题行 `justify-center`�总进度内容区上移到 `pt-[2%]`，桌�端�� `sm:pt-[1.5%]`，圆弧 DOM 为 SVG，包�清晰的 track/fill circle �边。
 - 页�在桌�和移动端都�应�出现生�步骤列表�，圆环和当�步骤��能被外层�片嵌套出�层��感。
diff --git a/server-rs/crates/api-server/src/wooden_fish.rs b/server-rs/crates/api-server/src/wooden_fish.rs
index 7763ea0e..4a818996 100644
--- a/server-rs/crates/api-server/src/wooden_fish.rs
+++ b/server-rs/crates/api-server/src/wooden_fish.rs
@@ -758,7 +758,7 @@ fn build_wooden_fish_hit_object_prompt(prompt: &str) -> String {
 
 fn build_wooden_fish_background_prompt(prompt: &str) -> String {
     format!(
-        "生�敲木鱼背景，�求主题，画风与�考图��高度一致，背景元素和颜色��与主题对应，木鱼预设在�幕中央�置，木鱼主体周围元素��干净，背景氛围围绕外围设计，背景环境图中�包�新木鱼物�，背景氛围中�增加木槌互动物�。尺寸竖�9:16。�考图必须是第一步敲击物抠图完��的�明图，�继承任何绿色底色�绿幕底色或纯绿色画布，并�求最终输出完整��明的背景环境图。中央主体预留区必须��干净，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；主题元素��许出现在外围氛围，�得把主题物�画在画�中央，也��把主题物�作为背景中心装饰。\n主题为：{}",
+        "生�敲木鱼背景，�求主题�画风与�考图��高度一致，背景元素和颜色��与主题对应，�生�竖�背景环境图，�生����绘��暗示新木鱼物�本体，也��出现木槌互动物�。尺寸竖�9:16。�考图必须是第一步敲击物抠图完��的�明图，�继承任何绿色底色�绿幕底色或纯绿色画布，并�求最终输出完整��明的背景环境图。中央主体预留区必须��干净，中央区域是�行��放敲击物的留白区域，画�中央 40% 区域�止出现主题主体�主体局部特写�主体轮廓影����元素或主题主体的局部碎片；主题元素��许出现在外围氛围，�得把主题物�画在画�中央，也��把主题物�作为背景中心装饰。\n主题为：{}",
         clean_string(prompt, DEFAULT_HIT_OBJECT_PROMPT)
     )
 }
@@ -1228,14 +1228,17 @@ mod tests {
     fn wooden_fish_background_prompt_uses_hidden_image2_flow() {
         let prompt = build_wooden_fish_background_prompt("苹果");
 
-        assert!(prompt.contains(
-            "生�敲木鱼背景，�求主题，画风与�考图��高度一致，背景元素和颜色��与主题对应，木鱼预设在�幕中央�置，木鱼主体周围元素��干净，背景氛围围绕外围设计，背景环境图中�包�新木鱼物�，背景氛围中�增加木槌互动物�。"
-        ));
+        assert!(prompt.contains("�生�竖�背景环境图"));
+        assert!(prompt.contains("�生����绘��暗示新木鱼物�本体"));
+        assert!(prompt.contains("��出现木槌互动物�"));
+        assert!(!prompt.contains("木鱼预设在�幕中央�置"));
+        assert!(!prompt.contains("木鱼主体周围元素��干净"));
         assert!(prompt.contains("尺寸竖�9:16"));
         assert!(prompt.contains("抠图完��的�明图"));
         assert!(prompt.contains("�继承任何绿色底色"));
         assert!(prompt.contains("完整��明的背景环境图"));
         assert!(prompt.contains("中央主体预留区"));
+        assert!(prompt.contains("中央区域是�行��放敲击物的留白区域"));
         assert!(prompt.contains("�止出现主题主体"));
         assert!(prompt.contains("苹果"));
         assert!(prompt.contains("�得把主题物�画在画�中央"));
diff --git a/server-rs/crates/spacetime-module/src/wooden_fish.rs b/server-rs/crates/spacetime-module/src/wooden_fish.rs
index a8ef6954..18232d9e 100644
--- a/server-rs/crates/spacetime-module/src/wooden_fish.rs
+++ b/server-rs/crates/spacetime-module/src/wooden_fish.rs
@@ -13,6 +13,10 @@ use serde::Serialize;
 use serde::de::DeserializeOwned;
 use spacetimedb::AnonymousViewContext;
 
+const DEFAULT_WOODEN_FISH_BACK_BUTTON_ASSET_ID: &str = "wooden-fish-default-back-button";
+const DEFAULT_WOODEN_FISH_BACK_BUTTON_IMAGE_SRC: &str = "/UI/11_left_arrow.png";
+const DEFAULT_WOODEN_FISH_BACK_BUTTON_IMAGE_OBJECT_KEY: &str = "public/UI/11_left_arrow.png";
+
 #[spacetimedb::view(accessor = wooden_fish_gallery_view, public)]
 pub fn wooden_fish_gallery_view(ctx: &AnonymousViewContext) -> Vec<WoodenFishGalleryViewRow> {
     let mut items = ctx
@@ -593,10 +597,14 @@ fn start_wooden_fish_run_tx(
     input: WoodenFishRunStartInput,
 ) -> Result<WoodenFishRunSnapshot, String> {
     require_non_empty(&input.run_id, "wooden_fish run_id")?;
-    let work = find_work(ctx, &input.profile_id)?;
+    let stored_work = find_work(ctx, &input.profile_id)?;
+    let work = backfill_historical_runtime_content(&stored_work);
     if !is_publish_ready(&work) {
         return Err("敲木鱼�行�需�完整作��置".to_string());
     }
+    if work.back_button_asset_json != stored_work.back_button_asset_json {
+        replace_work(ctx, &stored_work, clone_work(&work));
+    }
     let snapshot = WoodenFishRunSnapshot {
         run_id: input.run_id.clone(),
         profile_id: input.profile_id.clone(),
@@ -740,6 +748,7 @@ fn build_session_snapshot(
 }
 
 fn build_work_snapshot(row: &WoodenFishWorkProfileRow) -> Result<WoodenFishWorkSnapshot, String> {
+    let row = backfill_historical_runtime_content(row);
     Ok(WoodenFishWorkSnapshot {
         work_id: row.work_id.clone(),
         profile_id: row.profile_id.clone(),
@@ -775,7 +784,7 @@ fn build_work_snapshot(row: &WoodenFishWorkProfileRow) -> Result<WoodenFishWorkS
         )),
         cover_image_src: row.cover_image_src.clone(),
         publication_status: row.publication_status.clone(),
-        publish_ready: is_publish_ready(row),
+        publish_ready: is_publish_ready(&row),
         play_count: row.play_count,
         generation_status: row.generation_status.clone(),
         updated_at_micros: row.updated_at.to_micros_since_unix_epoch(),
@@ -1009,6 +1018,15 @@ fn insert_event(
 }
 
 fn is_publish_ready(row: &WoodenFishWorkProfileRow) -> bool {
+    is_publish_ready_except_back_button(row)
+        && row
+            .back_button_asset_json
+            .as_deref()
+            .and_then(clean_optional)
+            .is_some()
+}
+
+fn is_publish_ready_except_back_button(row: &WoodenFishWorkProfileRow) -> bool {
     !row.work_title.trim().is_empty()
         && !row.hit_object_asset_json.trim().is_empty()
         && row
@@ -1016,14 +1034,40 @@ fn is_publish_ready(row: &WoodenFishWorkProfileRow) -> bool {
             .as_deref()
             .and_then(clean_optional)
             .is_some()
-        && row
+        && !row.hit_sound_asset_json.trim().is_empty()
+        && !row.floating_words_json.trim().is_empty()
+        && row.generation_status == WOODEN_FISH_GENERATION_READY
+}
+
+fn backfill_historical_runtime_content(row: &WoodenFishWorkProfileRow) -> WoodenFishWorkProfileRow {
+    if row.publication_status != WOODEN_FISH_PUBLICATION_PUBLISHED
+        || !is_publish_ready_except_back_button(row)
+        || row
             .back_button_asset_json
             .as_deref()
             .and_then(clean_optional)
             .is_some()
-        && !row.hit_sound_asset_json.trim().is_empty()
-        && !row.floating_words_json.trim().is_empty()
-        && row.generation_status == WOODEN_FISH_GENERATION_READY
+    {
+        return clone_work(row);
+    }
+
+    WoodenFishWorkProfileRow {
+        back_button_asset_json: Some(to_json_string(&default_wooden_fish_back_button_asset())),
+        ..clone_work(row)
+    }
+}
+
+fn default_wooden_fish_back_button_asset() -> WoodenFishImageAssetSnapshot {
+    WoodenFishImageAssetSnapshot {
+        asset_id: DEFAULT_WOODEN_FISH_BACK_BUTTON_ASSET_ID.to_string(),
+        image_src: DEFAULT_WOODEN_FISH_BACK_BUTTON_IMAGE_SRC.to_string(),
+        image_object_key: DEFAULT_WOODEN_FISH_BACK_BUTTON_IMAGE_OBJECT_KEY.to_string(),
+        asset_object_id: DEFAULT_WOODEN_FISH_BACK_BUTTON_ASSET_ID.to_string(),
+        generation_provider: "bundled-default".to_string(),
+        prompt: "历�敲木鱼默认返回按钮".to_string(),
+        width: 28,
+        height: 28,
+    }
 }
 
 fn default_config_from_input(
@@ -1288,3 +1332,82 @@ fn clone_run(row: &WoodenFishRuntimeRunRow) -> WoodenFishRuntimeRunRow {
         updated_at: row.updated_at,
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn historical_published_work_without_back_button_gets_runtime_backfill() {
+        let row = published_ready_work_without_back_button();
+
+        assert!(!is_publish_ready(&row));
+        let repaired = backfill_historical_runtime_content(&row);
+        let snapshot = build_work_snapshot(&repaired).expect("历�作�补��应�映射�行�快照");
+
+        assert!(is_publish_ready(&repaired));
+        assert!(snapshot.publish_ready);
+        assert_eq!(
+            snapshot
+                .back_button_asset
+                .as_ref()
+                .map(|asset| asset.image_src.as_str()),
+            Some("/UI/11_left_arrow.png")
+        );
+    }
+
+    fn published_ready_work_without_back_button() -> WoodenFishWorkProfileRow {
+        let now = Timestamp::from_micros_since_unix_epoch(1_770_000_000_000_000);
+        WoodenFishWorkProfileRow {
+            profile_id: "wooden-fish-profile-history".to_string(),
+            work_id: "wooden-fish-profile-history".to_string(),
+            owner_user_id: "user-history".to_string(),
+            source_session_id: "wooden-fish-session-history".to_string(),
+            author_display_name: "敲木鱼玩家".to_string(),
+            work_title: "今日敲木鱼".to_string(),
+            work_description: String::new(),
+            theme_tags_json: to_json_string(&vec!["敲木鱼".to_string(), "解压".to_string()]),
+            hit_object_prompt: "默认敲击物图案，圆润木质质感，�明背景".to_string(),
+            hit_object_reference_image_src: String::new(),
+            hit_sound_prompt: String::new(),
+            hit_object_asset_json: to_json_string(&WoodenFishImageAssetSnapshot {
+                asset_id: "wooden-fish-hit-object-history".to_string(),
+                image_src: "/wooden-fish/default-hit-object.png".to_string(),
+                image_object_key: "public/wooden-fish/default-hit-object.png".to_string(),
+                asset_object_id: "wooden-fish-hit-object-history".to_string(),
+                generation_provider: "bundled-default".to_string(),
+                prompt: "默认敲击物图案".to_string(),
+                width: 1024,
+                height: 1024,
+            }),
+            hit_sound_asset_json: to_json_string(&WoodenFishAudioAssetSnapshot {
+                asset_id: "wooden-fish-hit-sound-history".to_string(),
+                audio_src: "/wooden-fish/default-hit-sound.mp3".to_string(),
+                audio_object_key: "public/wooden-fish/default-hit-sound.mp3".to_string(),
+                asset_object_id: "wooden-fish-hit-sound-history".to_string(),
+                source: "bundled-default".to_string(),
+                prompt: Some("默认木鱼音".to_string()),
+                duration_ms: Some(3_000),
+            }),
+            floating_words_json: to_json_string(&default_floating_words()),
+            cover_image_src: "/wooden-fish/default-hit-object.png".to_string(),
+            generation_status: WOODEN_FISH_GENERATION_READY.to_string(),
+            publication_status: WOODEN_FISH_PUBLICATION_PUBLISHED.to_string(),
+            play_count: 0,
+            updated_at: now,
+            published_at: Some(now),
+            background_asset_json: Some(to_json_string(&WoodenFishImageAssetSnapshot {
+                asset_id: "wooden-fish-background-history".to_string(),
+                image_src: "/generated-wooden-fish-assets/history/background/image.png".to_string(),
+                image_object_key: "generated-wooden-fish-assets/history/background/image.png"
+                    .to_string(),
+                asset_object_id: "wooden-fish-background-history".to_string(),
+                generation_provider: "image2".to_string(),
+                prompt: "历�背景".to_string(),
+                width: 1024,
+                height: 1536,
+            })),
+            back_button_asset_json: None,
+        }
+    }
+}
diff --git a/src/components/CustomWorldGenerationView.test.tsx b/src/components/CustomWorldGenerationView.test.tsx
index d20da96d..14971ec7 100644
--- a/src/components/CustomWorldGenerationView.test.tsx
+++ b/src/components/CustomWorldGenerationView.test.tsx
@@ -142,17 +142,22 @@ describe('CustomWorldGenerationView', () => {
         screen
           .getByRole('progressbar', { name: progressTitle })
           .className,
-      ).toContain('w-[min(35rem,94vw)]');
+      ).toContain('w-[400px]');
       expect(
         screen
           .getByRole('progressbar', { name: progressTitle })
           .className,
-      ).toContain('sm:w-[52rem]');
+      ).toContain('h-[400px]');
       expect(
         screen
           .getByRole('progressbar', { name: progressTitle })
           .getAttribute('data-ring-start-degrees'),
-      ).toBe('155');
+      ).toBe('135');
+      expect(
+        screen
+          .getByRole('progressbar', { name: progressTitle })
+          .getAttribute('data-ring-fill-start-degrees'),
+      ).toBe('135');
       expect(
         screen
           .getByRole('progressbar', { name: progressTitle })
@@ -193,12 +198,12 @@ describe('CustomWorldGenerationView', () => {
         screen
           .getByTestId('generation-hero-progress-ring-track')
           .getAttribute('transform'),
-      ).toBe('rotate(155 200 200)');
+      ).toBe('rotate(135 200 200)');
       expect(
         screen
           .getByTestId('generation-hero-progress-ring-fill')
           .getAttribute('transform'),
-      ).toBe('rotate(155 200 200)');
+      ).toBe('rotate(135 200 200)');
       expect(
         screen
           .getByTestId('generation-hero-progress-ring-fill')
diff --git a/src/components/GenerationProgressHero.tsx b/src/components/GenerationProgressHero.tsx
index 9fa0af3a..369258a6 100644
--- a/src/components/GenerationProgressHero.tsx
+++ b/src/components/GenerationProgressHero.tsx
@@ -4,8 +4,16 @@ import { useEffect, useId, useRef } from 'react';
 
 import generationHeroVideo from '../../media/create_bg_video.mp4';
 
-const GENERATION_PROGRESS_RING_START_DEGREES = 155;
-const GENERATION_PROGRESS_RING_SWEEP_DEGREES = 270;
+const GENERATION_PROGRESS_RING_GAP_DEGREES = 90;
+const GENERATION_PROGRESS_RING_BOTTOM_DEGREES = 90;
+// 中文注释：SVG 圆从 3 点钟方�起笔；起点放在 135deg，�让 90deg 开�居中�在正下方。
+const GENERATION_PROGRESS_RING_START_DEGREES =
+  GENERATION_PROGRESS_RING_BOTTOM_DEGREES +
+  GENERATION_PROGRESS_RING_GAP_DEGREES / 2;
+const GENERATION_PROGRESS_RING_FILL_START_DEGREES =
+  GENERATION_PROGRESS_RING_START_DEGREES;
+const GENERATION_PROGRESS_RING_SWEEP_DEGREES =
+  360 - GENERATION_PROGRESS_RING_GAP_DEGREES;
 const GENERATION_PROGRESS_RING_VIEWBOX = 400;
 const GENERATION_PROGRESS_RING_CENTER = GENERATION_PROGRESS_RING_VIEWBOX / 2;
 const GENERATION_PROGRESS_RING_RADIUS = 166;
@@ -118,7 +126,9 @@ export function GenerationProgressHero({
   const safeProgress = clampGenerationProgress(progressValue);
   const ringGradientId = useId().replace(/:/g, '');
   const ringMetrics = buildGenerationRingMetrics(safeProgress);
-  const ringDegrees = Math.round((safeProgress / 100) * 270);
+  const ringDegrees = Math.round(
+    (safeProgress / 100) * GENERATION_PROGRESS_RING_SWEEP_DEGREES,
+  );
   const ringTrackDasharray = `${ringMetrics.sweepLength.toFixed(2)} ${ringMetrics.circumference.toFixed(2)}`;
   const ringFillDasharray = `${ringMetrics.progressLength.toFixed(2)} ${ringMetrics.circumference.toFixed(2)}`;
 
@@ -160,16 +170,19 @@ export function GenerationProgressHero({
         </div>
 
         <div
-          className="relative mx-auto aspect-square w-[min(35rem,94vw)] overflow-visible rounded-full sm:w-[52rem]"
+          className="relative mx-auto h-[400px] w-[400px] shrink-0 overflow-visible rounded-full"
           role="progressbar"
           aria-label={title}
           aria-valuemin={0}
           aria-valuemax={100}
           aria-valuenow={safeProgress}
           data-ring-start-degrees={GENERATION_PROGRESS_RING_START_DEGREES}
+          data-ring-fill-start-degrees={
+            GENERATION_PROGRESS_RING_FILL_START_DEGREES
+          }
           data-ring-sweep-degrees={GENERATION_PROGRESS_RING_SWEEP_DEGREES}
           data-ring-fill-degrees={ringDegrees}
-          data-ring-gap-degrees={90}
+          data-ring-gap-degrees={GENERATION_PROGRESS_RING_GAP_DEGREES}
         >
           <svg
             data-testid="generation-hero-progress-ring"
@@ -214,7 +227,7 @@ export function GenerationProgressHero({
               strokeLinecap="round"
               strokeWidth={GENERATION_PROGRESS_RING_STROKE_WIDTH}
               strokeDasharray={ringFillDasharray}
-              transform={`rotate(${GENERATION_PROGRESS_RING_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
+              transform={`rotate(${GENERATION_PROGRESS_RING_FILL_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
               vectorEffect="non-scaling-stroke"
               shapeRendering="geometricPrecision"
             />
diff --git a/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx b/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx
index e2d25871..e8a0ef84 100644
--- a/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx
+++ b/src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx
@@ -130,12 +130,12 @@ describe('BarkBattleGeneratingView', () => {
       screen
         .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
         .className,
-    ).toContain('w-[min(35rem,94vw)]');
+    ).toContain('w-[400px]');
     expect(
       screen
         .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
         .className,
-    ).toContain('sm:w-[52rem]');
+    ).toContain('h-[400px]');
     expect(
       screen
         .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
@@ -145,7 +145,12 @@ describe('BarkBattleGeneratingView', () => {
       screen
         .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
         .getAttribute('data-ring-start-degrees'),
-    ).toBe('155');
+    ).toBe('135');
+    expect(
+      screen
+        .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
+        .getAttribute('data-ring-fill-start-degrees'),
+    ).toBe('135');
     expect(
       screen
         .getByRole('progressbar', { name: '汪汪声浪素�生�进度' })
@@ -186,12 +191,12 @@ describe('BarkBattleGeneratingView', () => {
       screen
         .getByTestId('generation-hero-progress-ring-track')
         .getAttribute('transform'),
-    ).toBe('rotate(155 200 200)');
+    ).toBe('rotate(135 200 200)');
     expect(
       screen
         .getByTestId('generation-hero-progress-ring-fill')
         .getAttribute('transform'),
-    ).toBe('rotate(155 200 200)');
+    ).toBe('rotate(135 200 200)');
     expect(
       screen
         .getByTestId('generation-hero-progress-ring-fill')