> ## Documentation Index
> Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
> Use this file to discover all available pages before exploring further.

# 带音乐统计的生日回顾报告

> /report 页面把你的生日倒计时和音乐库整合到一个三标签页的回顾中，包括一个全屏、按吸附滚动逐首展示的音乐报告。

`/report` 报告页面把你的生日倒计时与完整音乐库整合到一个可分享的体验中。它被组织成三个标签页 — Overview（总览）、Birthday（生日）和 Music Report（音乐报告） — 每个标签都从不同视角呈现同一份数据。当前激活的标签会保存在 `sessionStorage` 中，跨页面刷新也能保留。

## 标签页

### Overview（总览）

Overview 是默认的落地视图。它包含两个垂直堆叠的区块：

**生日倒计时** — 与首页相同的"距离生日还有多少天"数字，以翠绿色大号字体显示。如果今天就是生日，这里会显示为 **生日快乐！**。

**音乐统计网格** — 一个 2×2 的卡片网格（在宽屏上为 4×1），数据来自 `lib/music-config.ts`：

| 统计卡片 | 数据来源                                    | 强调色 |
| ---- | --------------------------------------- | --- |
| 歌曲总数 | 所有歌单中歌曲的总数                              | 翠绿色 |
| 歌单总数 | 歌单数量                                    | 紫色  |
| 最爱风格 | `musicConfig.preferences.favoriteGenre` | 琥珀色 |
| 心情   | `musicConfig.preferences.mood`          | 粉色  |

音乐统计区域中的 **进入听歌报告 →** 按钮可以直接跳转到 Music Report 标签页。

### Birthday 标签页

Birthday 标签页显示一个全屏、垂直居中的倒计时 — 和 Overview 中的组件相同，但去除了周围内容，让它填满整个视口。这非常适合用于分享或在大屏上展示。

### Music Report 标签页

Music Report 标签页是一个全屏、按吸附滚动的体验。导航栏和标签栏会被隐藏，让内容不被任何元素打扰。

歌曲库中的每一首歌都拥有自己的全屏段落。每个段落内你会看到：

* 一张从歌曲 `backgroundUrl` 取来的 **全屏背景图**，并叠加一层深色渐变
* **漂浮歌词**，从歌曲的 `lyrics` 字段中取最多五行漂过背景
* **歌曲序号**（如 `01 / 08`）位于顶部居中位置
* 用大号显示字体呈现的 **歌曲标题**
* 翠绿色的 **艺人名**
* 一张 **个人留言** 卡 — 歌曲的 `description` 字段，未设置时回退到默认文案
* 在主内容下方左右交替排列的最多四张 **歌词卡片**

每个段落左下角的返回箭头可以回到 `/report` 页面。

<Tip>
  在移动端，吸附滚动意味着向上滑动就能干净地切换到下一首歌段落。桌面端可以使用鼠标滚轮或触控板。每个段落底部（最后一个除外）有一个微动的下箭头，提示下方还有内容。
</Tip>

## 会话级保留

报告会在同一个浏览器会话内记住你上次查看的标签页。如果你离开后再回来，会回到原本的标签页。打开新的浏览器标签页则总是回到 Overview。

## 配置报告内容

Music Report 中显示的歌曲、描述、背景图和歌词都来自 `lib/music-config.ts`。请参阅 [配置音乐](/zh/customization/music-config)，了解如何添加歌曲、撰写描述以及设置背景图。