给女朋友做了一个恋爱电子手帐

本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：

• 我的帖子已经打上 开源推广 标签： 是


• 我的开源项目完整开源，无未开源部分： 是


• 我的开源项目已链接认可 LINUX DO 社区： 是


• 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是


• 以上选择我承诺是永久有效的，接受社区和佬友监督： 是

以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出

佬友们好。

最近给女友 vibecoding 了一个小项目，作为恋爱纪念日的一个小惊喜，一本只给我们俩看的电子手账。文字、照片、实况、视频、语音、信都往里贴，页面做成奶油纸加拍立得的手账风，主要按手机屏幕做的。整本上了锁，进门要密码，搜索引擎也挡掉了，打算哪天当个惊喜送给她。

想给对象做点什么的，可以直接拿去改

仓库：GitHub - zhangzhiwei0905/our-little-planet: 我们的小星球 · 恋爱电子手账：手账与涂鸦、实况/视频相册、她的已阅印章与回信、彩蛋、iOS 快捷指令速记。自托管 Next.js + SQLite · GitHub

体验地址：https://journal.amazingzz.xyz

截图里的照片是 Picsum 图库的，文字和语音都是演示数据。

里面有什么

手账。分两种页。普通页就是一段文字配几张照片或视频，再贴个心情贴纸。另一种是 3:4 的自由拼贴页，文字、图片、贴纸随便拖随便缩放，还能拿画笔直接在纸上涂。翻页像翻书，左右滑、方向键都行。

相册。一面拍立得墙。我花心思最多的是 iPhone 实况照片：同名的 HEIC 和 MOV 一起传，会自动配成一张实况，.livp 也会自动拆开，墙上长按就动起来。HEIC 自动转 JPG，按 EXIF 里的拍摄时间归到对应日期。每张底下那行手写字就是描述，随时能改，也能打标签筛选。

她能回你。本子不是单向的。每页末尾有个虚线小章，她点一下，就盖成一枚「她看过啦 · 日期」的红印章。下面还有个回话框，能发文字、表情和图片，GIF 表情包也会动。后台有个「她的痕迹」，她回过哪句、盖过哪页，按时间排好了都能翻。

彩蛋。这个我自己最喜欢。可以提前埋一个惊喜，设好揭晓日期和一个单独的密码。日子没到之前，这个彩蛋在接口层面就不存在，不是前端藏起来，F12 也翻不到。到了那天她输对密码，先是封面，然后是你挑的照片墙，最后是一封长信。她还能在每张照片上手绘留言，你在后台预览时能看到她画了什么。

剩下一些零碎的：

• 语录墙，便利贴样式，能现场录语音，显示成微信那种语音气泡


• 信箱，可以写定时信，到日子才拆得开


• 大事记时间轴，能配一首歌，歌词跟着 LRC 一行行走


• 放映室，专门放纪念视频，也可以定首映日期


• 每个栏目、每一页都能单独设「公开」或「仅她可见」，给朋友看一部分，剩下的是悄悄话


• 半夜 11 点以后打开首页，会有月亮和小星星眨眼；纪念日会自动算出 100 天、520 天、1314 天这些日子


• 首页的大拍立得点一下会翻到背面，背面写着一句话


• 深色模式是暖棕色的纸，不是纯黑

iPhone 快捷指令。留了个 /api/quick 接口，用单独的 token 鉴权，跟后台口令分开，泄露了换掉就行。微信里她说了句好玩的，跑一下快捷指令就存进语录墙；相册里多选几张照片，也能一步发成一篇手账。大视频（最大 2G）走预签名直传，配了 OSS 的话文件从手机直接到 OSS，不经过服务器。快捷指令怎么配，仓库 docs 里有一步步的说明。

技术栈

Next.js 16 + React 19 + Tailwind 4，数据就一个 SQLite 文件（better-sqlite3），图片用 sharp，音视频靠 ffmpeg。媒体默认存在本地 data/media，也可以接阿里云 OSS。字体用霞鹜文楷，全部自托管，国内打开不慢。

备份很简单，把 data/ 文件夹拷走就行。

跑起来

需要 Node 20+，最好装上 ffmpeg。

git clone https://github.com/zhangzhiwei0905/our-little-planet.git

cd our-little-planet

npm install

cp .env.example .env.local   # 用 openssl rand -hex 32 生成一个 AUTH_SECRET 填进去

npm run seed                 # 灌一本示例手账

npm run dev                  # http://localhost:3000

默认读者密码 0520，作者后台口令 write-for-her，上线前记得改。部署的话一台轻量服务器够用，pm2 起服务，Nginx 反代加 HTTPS，README 里有 Nginx 配置样例和本机构建、远程替换的部署脚本，小内存机器不用在线上 build。

还做了个演示模式：数据全跑在内存里，几分钟自动重置一次，访客上传的东西会被换成内置样例，谁进来都改不坏。想给朋友看效果又怕被乱写，可以开这个。

最后

MIT 协议。有 bug 或者想法欢迎提 issue 和 PR，觉得有点意思的话点个 star 我就很开心了。也欢迎拿去给你在乎的人做一本。