feat(birth-sky): the chart page replays the convergence, holds on the poster, shares top right (M4)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE
This commit is contained in:
Jesse_Chen
2026-09-29 08:41:27 +08:00
co-authored by Claude Opus 5.5
parent 5e97db4077
commit 60b5542b7d
15 changed files with 372 additions and 232 deletions
+5 -4
View File
@@ -1164,10 +1164,11 @@ D40 / D45 / D60 的表格上方,出生时间不是「已校正」时多一句
### 位置一:星盘页顶栏按钮
- 星盘页 `ok` 后立即预取 `/api/birth-sky?subject=<当前人物>` 并在屏外画好 PNG;**画好之后**顶栏右侧才出现一枚描边按钮「那一刻的天空」(`<Button variant="outline" size="sm">`,顶栏里按 `.chat-header-actions button` 收成 32px + 命中区外扩)。预取失败、资料不全、切人物时都不显示按钮,不占位、不报错。切换人物或改出生资料(指纹变)就按新人物重新预取。家人的盘也能生成。
- 点按钮打开原生 `<dialog>`,**只放图**(第三轮 P1,原来的灰色面板、标题栏、「关闭」文字按钮都删了):dialog 本身透明、铺满视口,`::backdrop` 是 `night` 页底色 90% 不透明;图 3:4,按视口取最大(宽不超过视口减 32px,高给下方「保存图片」一行留位),圆角 `--radius-md`;图下方居中「保存图片」(night 墨色细描边,透明底);右上角一个只有图标的 ×(读屏名「关闭」)。点图以外的地方、按 Esc、点 × 都能关,焦点回到按钮。所有按钮 ≥ 44px。窄屏和桌面同一套,不再有桌面居中面板。
- 「保存图片」:浏览器能分享文件时(iOS Safari)调 `navigator.share({ files })`,系统面板里有「存储图像」;否则 Blob + `a.download`。用户取消分享不算错误、不提示。
- 弹层、画布与导出代码都在懒加载 chunk 里(`next/dynamic` + 动态 `import()`),首页 `/` 不带它们。按钮本身是星盘页里的一个普通 `<Button>`(只在数据就绪时渲染)。
- 等待:没有等待态。按钮出现时图已就绪;弹层打开就是图。
- 点按钮**重放群星汇聚并定格**(2026-09-29,TASK-mobile-chart-and-confirmed-edit-20260929 M4,替换第三轮 P1 的静态海报弹层):与首次建盘过场同一个组件 `BirthSkyConverge`、同一条时间轴,`mode="hold"`——汇聚约 3 秒、文字 600ms 淡入,然后**停在定格帧不动**,不淡出、不自动关闭。每次打开都从头重放。定格帧就是导出的海报(画布调用序列逐条相同,且用生成 PNG 时同一个宋体判定 `cover.serif`)。全屏原生 `<dialog>` portal 到 `document.body`,底色 `night` 页底色,画布取视口内最大 3:4、乘 DPR。
- 控件浮在画面上方一行:**左上 ×**(只有图标,读屏名「关闭」)、**右上「分享」**(分享图标 + 字,night 墨色细描边)。播放中也在,都 ≥ 44px,顶部留安全区。点画面(不在控件上)直接跳到定格帧、**不关闭**;按 Esc 或点 × 关闭,焦点回到按钮。`prefers-reduced-motion` 时不汇聚,600ms 淡入到定格帧。
- 「分享」:浏览器能分享文件时(iOS Safari)调 `navigator.share({ files })`,系统面板里有「存储图像」;否则 Blob + `a.download`。分享的就是屏幕上定格的那张 PNG(按钮出现前已画好,分享从不等待)。用户取消不算错误、不提示;其他失败在右上方小字「没能分享,再试一次。」。
- 重放层、画布与导出代码都在懒加载 chunk 里(`next/dynamic` + 动态 `import()`,`components/birth-sky/birth-sky-replay.tsx`),首页 `/` 不带它们。按钮本身是星盘页里的一个普通 `<Button>`(只在数据就绪时渲染)。
- 等待:没有等待态。按钮出现时数据与 PNG 已就绪;打开就开始放。
### 位置二:报告封面(2026-09-28 追加,TASK-birth-sky-followup-20260928 F1–F3)