一封写给六班的数字情书｜我用一整个周末，给毕业班做了一座"会动"的纪念网站

项目地址：https://class.laoqian303.top
源码仓库：https://github.com/uqayiyufog07-eng/graduation-website

缘起：毕业那天，我想留下点不一样的东西

毕业典礼结束的那个傍晚，教室黑板上还留着没擦干净的名字，窗外是六月潮湿的风。我突然意识到：六年同窗，就要散落在不同的城市、不同的学校、不同的命运里了。

拍照？太轻。写同学录？太旧。

我想做一座永远在线的小屋——把每一位老师的笑、每一位同学的脸、每一段藏在抽屉里的悄悄话，都装进去，让它们在互联网的边缘节点上，被风一吹，就一直亮着。

于是，「永远的六班」诞生了：https://class.laoqian303.top

我希望它是什么样子

毕业纪念网站这件事，圈子里已有不少前辈做过。但我不想做一个 PPT 式的页面：照片一摆、名字一列、寄语一抄，结束。

我希望它——

  • 有温度：每一张照片都能”活”过来，每一句悄悄话都像真的被装进信封里寄出；
  • 有科技感：典礼当晚，大屏能被全班的祝福”刷屏”，弹幕一条条划过，像新年烟花；
  • 能永久保留：哪怕十年后大家各奔东西，只要域名续费，这个小屋就还在。

带着这三条执念，我开干了。

设计语言：新粗野主义 × 手绘插画

整个网站的视觉走的是 Neobrutalism（新粗野主义） 路线——粗黑描边、撞色块、硬阴影、不做作。但在粗野的骨架上，我铺了一层手绘插画的皮肤：圆角的便签、心形火漆印章、拍立得相框……

这种”粗野 + 柔软”的反差，正是少年感的样子——外表满不在乎，内里全是真心。

颜色上，我准备了两套主题：

  • 梦幻暮光磨砂玻璃：晚自习窗外的紫粉色天光；
  • 粗野主义插画：课桌涂鸦的彩色记号笔。

主题可以在前台一键切换，每一位访客都能找到属于自己的那束光。

四个核心板块，每一块都有故事

🎓 恩师风采与同学录

不是简单的名片墙。每位老师、每位同学都有自己的档案页：所教科目、成长历程、荣誉标签、联系方式、毕业寄语。像一本可以被翻很多年的小册子。

🎨 AI 二次元头像定制（这是我最得意的部分）

接入了豆包 Seedream 5.0 大模型。上传一张证件照，AI 会把它重绘成清新动漫插画头像。展示页面上，原图 / AI 插画可以一键双态切换——

一秒是穿校服的你，一秒是二次元世界里那个更明亮的你。

技术上这块踩了不少坑：原图要分块转 Base64 喂给模型、生成结果要再下载回 R2 持久化、还要保证前端切换不卡。但看到第一个同学的头像被 AI “画” 出来的瞬间，我觉得这些都值了。

🚀 现场实时弹幕墙

毕业晚会当晚，大屏上挂着这个网站。同学们掏出手机扫码，发出的祝福会以彩色弹幕的形式实时划过大屏幕——没有刷新、没有轮询，全靠腾讯云开发 TCB 的 .watch() 长连接推流。

那一刻，全班同学的祝福在大屏上此起彼伏，比任何 PPT 都震撼。

💌 悄悄话留言板（心意信封）

这是我最舍不得删的板块。

每一句悄悄话都被装进一个拟物化的实体信封里：信封会随着鼠标轻微 3D 倾斜，像被风托着；封口是一枚我亲手用 SVG 重画的心形火漆印章；点开发送时，纸屑喷洒（Confetti）会从屏幕上方炸开——

像毕业那天，终于鼓起勇气把信递出去的瞬间。

未登录用户会被温柔引导，已登录用户可以直接投递。一切都按”真心”来设计。

🖼️ 时光相册与拍立得画廊

拍立得式照片墙，支持灯箱大图浏览。管理员上传的照片同样可以一键 AI 插画加工，把日常瞬间变成艺术纪念。

技术架构：为什么这么选

整个项目我没用 React/Vue 之类的框架，前台是原生 ES6+ Vanilla JS。原因很简单：

毕业纪念网站应该像一封信，而不是一个 App。它要轻、要快、要在任何破旧手机上都能秒开。

后端则用了三家云服务的组合拳：

层 选型 干什么
实时数据库 腾讯云开发 TCB NoSQL 存同学录、弹幕、悄悄话、画廊，靠 .watch() 实现实时推流
静态托管 Cloudflare Pages 全球 CDN 边缘节点分发，海外访问也飞快
计算 & 存储 Cloudflare Workers + R2 + KV 图片上传、R2 读写、豆包 AI 图生图代理、KV 状态缓存

为什么不全用一家？因为我希望这个小屋真的能活十年——三家服务都免费额度充足、生态稳定，任何一家出问题，迁移成本都可控。这是我能想到的、最浪漫的”工程化保险”。

一些藏在细节里的小心思

  • 光标彩虹拖尾：鼠标划过，留下一道彩虹，像小时候在课桌上划过的彩色笔；
  • 点击爆炸特效：每一次点击都有粒子炸开，让浏览本身变成一种游戏；
  • 纸张坠落物理算法：悄悄话信封的摆动不是 CSS 动画硬写，而是模拟纸张在微风中的物理运动；
  • 3D Parallax 视差：信封会随鼠标方向轻微倾斜，像真的被光打过；
  • 完全响应式：从 320px 的小屏到 4K 大屏，都好看。

部署它，你也能复制一座小屋

整个项目已开源在 GitHub，README 里有完整的部署指南：

  1. 配置腾讯云开发 TCB 数据库（4 个集合）；
  2. 部署 Cloudflare Worker（R2 + KV + 豆包 API Key）；
  3. 改 js/config.js 里的三个地址；
  4. 把静态文件丢到 Cloudflare Pages。

十分钟，你也能给你的班级搭一座永远在线的纪念屋。

写在最后

域名 class.laoqian303.top 我会续十年。

希望十年后，当某位同学在某个深夜加班的间隙，无意间打开这个网址——

弹幕还能划过，
信封还能打开，
AI 头像里的那个少年还会冲他笑，
晚自习窗外的紫粉色天光，还会亮着。

六班，毕业快乐。

🌐 逛逛这座小屋：https://class.laoqian303.top
💻 源码与部署指南：https://github.com/uqayiyufog07-eng/graduation-website