思念留言板
一个安静、偏情绪向的页面：轻背景音乐 + 对「思念的人」留言 + 浏览他人留言；留言像跑马灯一样从侧边缓缓漂浮飘过，每天换一批或按日期轮播。
何时使用
- 用户要「思念留言板」「想念墙」「漂浮留言」「表白/纪念留言」
- 需要 BGM、可写可看、视觉上「飘啊飘」的每日氛围页
产品边界（硬约束）
- 主题：留言对象是「思念的人」（姓名/称呼可选），内容偏怀念、祝福、想念；禁止做成垃圾广告墙。
- BGM：循环轻音乐；默认静音或低音量，必须有一键开/关（浏览器常拦截自动播放，需用户手势后播放）。
- 可写可看：支持提交自己的留言；展示公共流（他人留言）。无后端时用本地存储 + 内置示例流，或对接轻量 API。
- 跑马灯漂浮：留言以横向/斜向漂浮层飘过，速度慢、半透明、不挡主操作；pointer-events 对漂浮层默认
none，点击详情用独立列表。 - 每日感：按自然日（本地时区）取「今日展示池」；可从全部留言中抽样或按
createdAt日期过滤，避免同一屏永远同一批。 - 内容安全：前端做长度限制（如 8～120 字）、敏感词基础过滤；不收集真实身份证/住址等；昵称可匿名。
- 无障碍：尊重
prefers-reduced-motion（减弱或改为静态列表）；音乐可关。
信息结构
type MissWish = {
id: string
/** 思念对象称呼，如「外婆」「阿城」 */
toName: string
/** 留言正文 */
body: string
/** 署名，可「匿名」 */
fromName: string
/** ISO 时间 */
createdAt: string
/** 可选：心情色/标签 */
mood?: 'warm' | 'quiet' | 'bittersweet'
}
推荐页面结构（一屏一构图）
- 氛围底：全幅柔和渐变或低对比夜空/纸感纹理（不要卡片堆砌首页）。
- 品牌/标题：大字「思念留言板」+ 一句短旁白（如「说给想见却暂时见不到的人」）。
- BGM 控件：角落小按钮「音乐开/关」，不要弹层挡视线。
- 主操作：表单区——思念谁、留言、署名、提交。
- 漂浮层：今日留言以跑马灯飘过（多行不同 y、不同速度）。
- 列表入口：「看看大家的思念」展开只读列表（可滚动），与漂浮并存。
跑马灯实现要点
// 伪代码：每日池 + 多轨漂浮
function pickDailyPool(all: MissWish[], dayKey: string, n = 24): MissWish[] {
// 用 dayKey 做稳定洗牌种子，同一天结果稳定，换日换一批
const seeded = stableShuffle(all, dayKey)
return seeded.slice(0, Math.min(n, seeded.length))
}
// CSS：每条绝对定位，animation translateX 从 110% 到 -110%，duration 18s~40s 随机
// 多行：top: 12% / 28% / 44% ...；animation-delay 错开
.miss-marquee-layer {
position: fixed; inset: 0; overflow: hidden;
pointer-events: none; z-index: 2;
}
.miss-float {
position: absolute; white-space: nowrap;
opacity: 0.72; font-size: 14px;
animation-name: miss-drift;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes miss-drift {
from { transform: translateX(110vw); }
to { transform: translateX(-120%); }
}
@media (prefers-reduced-motion: reduce) {
.miss-float { animation: none; opacity: 0; }
}
展示文案建议：「致 {toName}」{body} — {fromName}。
背景音乐
- 使用免版权/用户自备短循环音频（如轻钢琴、环境音）；Skill 不附带侵权曲库。
HTMLAudioElement或 Howler：loop: true，volume: 0.25。- 首次点击「开启音乐」后再
play()；刷新后记住用户偏好（localStorage）。
存储策略
| 模式 | 做法 |
|---|---|
| 演示 / 单机 | localStorage 存自己的留言 + 内置 8～15 条示例他人留言 |
| 轻后端 | GET/POST /api/miss-wishes；列表按时间倒序；服务端再做审核 |
| 混合 | 自己的立即上漂浮层；公共流定时拉取 |
提交成功：清空表单、toast「已送出思念」、新留言加入今日池并出现在漂浮层。
Agent 步骤
- 搭氛围页骨架（标题、旁白、BGM 按钮、表单、漂浮层、列表）。
- 实现
MissWish存取与每日池抽样。 - 实现多轨 CSS 跑马灯；尊重减动效。
- 接入可开关 BGM（用户手势后播放）。
- 自测：提交→出现在列表与漂浮；关音乐；换日期（改系统日或 mock
dayKey）池变化。
不要做
- 不要默认大声自动播放。
- 不要用密集卡片墙当首屏。
- 不要抓取真实私信/通讯录当「他人留言」。
- 不要做成必须登录才能看（演示模式应可匿名浏览）。
附加
- README.md · reference.md · templates/sample-wishes.json · templates/usage.md
