团圆 Reunion

#1. 项目概况

| 条目 | 内容 | | ---- | ---- | | 产品名 | 团圆（Reunion） | | 一句话价值 | 上传一张老照片或写一句留言，AI 生成「团圆」明信片；也可仅浏览实时弹幕与下载卡片。 | | 目标用户 | 追剧《沉默的荣耀》，喜欢轻纪念产品的全球华人（18-45 岁）。 | | 关键词 | 零门槛、可选上传、三语、实时弹幕、AI 明信片、纯公益、无账号。 |

#2. 技术栈

▸前端框架：Next.js 14（App Router）（React 18）
▸样式：Tailwind CSS 3.4 + shadcn/ui（全套组件）
▸国际化：next-intl（子路径 /zh-CN /zh-TW /en）
▸数据：Supabase Realtime（弹幕）+ 浏览器 IndexedDB（本地记录）
▸
AI/语音/图像：
- ▸Google Gemini（文案润色）
- ▸Replicate GFPGAN（老照片修复）
- ▸Edge TTS（朗读按钮）
▸部署：Vercel（Serverless Function 代理 AI）

#3. MVP 功能范围（P0）

| # | 模块 | 功能点 | 可选/必选 | 主要技术 | | - | ---- | ------ | --------- | -------- | | 1 | 欢迎页 / | 背景循环播放《团圆》30s + 打字机歌词 | 必 | <audio loop> + Typed.js | | | | 语言切换按钮（地球图标） | 必 | next-intl | | | | 巨大 CTA：「立即围观」/「我也要参与」 | 必 | 两按钮均跳 /wall | | 2 | 弹幕墙 /wall | 实时弹幕滚动（右→左） | 必 | Supabase Realtime 最新 50 条 | | | | 点击暂停 + 点赞 | 必 | 乐观更新 | | | | 底部输入框 140 字 | 可选 | 留空可浏览；提交即实时出现 | | | | 生成明信片入口（折叠面板） | 可选 | 不填写也能继续浏览 | | 3 | 生成页 /create | 上传图片（老照片/任意图）+ 裁剪 | 可选 | FileReader + Cropper；不上传→默认海峡夜景 | | | | 写一句对对岸的话 | 可选 | 留空→使用默认三语文案 | | | | 选择主题色（暖金/月白/海峡蓝） | 必 | 默认暖金 | | | | AI 修复图片（GFPGAN） | 可选 | 不上图则跳过 | | | | AI 润色文案（Gemini） | 必 | 用户未输入时用默认 | | 4 | 结果页 /result | 1080×1080 明信片合成 | 必 | Canvas → html2canvas 下载 | | | | 分享按钮（Web Share API） | 必 | 预制话题三语 | | | | 返回弹幕墙 | 必 | 一键返回 | | 5 | 全局 | PWA 离线缓存（可选） | 可选 | next-pwa（MVP 不强制） |

#4. 数据模型

4.1 Supabase（仅弹幕）

CREATE TABLE wall_messages(
  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  text        VARCHAR(160) NOT NULL,
  lang        VARCHAR(5)   NOT NULL, -- zh-CN | zh-TW | en
  likes       INT DEFAULT 0,
  created_at  TIMESTAMPTZ DEFAULT NOW()
);
-- RLS：允许 INSERT & SELECT；likes +1 单独 RPC

技术栈

#1. 项目概况

#2. 技术栈

#3. MVP 功能范围（P0）

#4. 数据模型

4.1 Supabase（仅弹幕）

项目截图