• Koenigsegg

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

    - 我的帖子已经打上 开源推广 标签: 是

    - 我的开源项目完整开源,无未开源部分: 是

    - 我的开源项目已链接认可 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 我就很开心了。也欢迎拿去给你在乎的人做一本。

    主楼
  • 蒲君瑶

    你没有错,但你不是我们兄弟.jpg

    #1
  • mdzzlq

    还是年轻好,出去玩我甚至都懒得拍照

    #2
  • chris_xin

    没别的意思兄弟,但是我也曾经天真的以为:女朋友会觉得很浪漫

    #3
  • chiur

    有搞头,做成app看看,我感觉还是有市场的。

    但是,你还是不是我们兄弟.jpg

    …不对,我结婚了,我们依旧是兄弟

    #4
  • 唐爆镜

    可以看得出来,佬是真的有女朋友^-^^-^^-^^-^

    #5
  • HjiaLe

    不是那个她,但是另外一个他也可以用吗

    #6
  • xxx

    别说,这个东西还真挺有意思的,在增加一个纸质手账拍照导入就更好了,很多人都享受做手账,这东西能给他们电子留存我觉得这就更有意思了

    #7
  • Koenigsegg

    哎,有没有可能是兄弟YY出来的女朋友呢

    #8
  • Koenigsegg

    小惊喜的一个思路,花小钱办大事,一个纪念日不用送礼,也能狠狠感动了

    #9
  • Koenigsegg

    感谢佬,确实现在web还不太方便,我去了解了解APP怎么上手

    #10
  • Koenigsegg

    一定要拍照记录呀,里面大多的内容都需要大量素材,记录下来还是很有意义的

    #11
  • Koenigsegg

    啊哈哈哈哈哈哈哈这是怎么看出来的

    #12
  • Koenigsegg

    哇,感谢佬!给我提供了一个很好的思路,我女朋友就喜欢手写的手账

    #13
  • Koenigsegg

    他也一样会被感动得稀里哗啦的hhhhhh

    #14
  • Wing-linuxdo

    还是年轻好啊佬们,步入中年懒得弄了。

    #15
  • blackcatzyd

    佬,这个前端页面用的什么模型,感觉排版、交互和风格都很好

    #16
  • Koenigsegg

    我都没用美化类的skill,使用的是zcode+glm-5.3,说明白我的诉求,做出的样式就挺好看了,字体我很喜欢, 霞鹜文楷

    #17
  • chiur

    蹲一手app,到时候让你女朋友去小红书发发,用户就来了,那个群体对这种付费欲望强烈

    还有,等你做成了可以不可以给我白嫖个会员,我也想用用 ^-^

    #18
  • Koenigsegg

    必须滴,佬,这就开干,会员一定给你安排上 ^-^

    #19

发表回复

登录后回复