这是一个功能完整的车辆记录管理系统，支持油耗、电耗追踪、保养管理、配件跟踪和数据分析。
项目托管和起因
代码在 GitHub ，我自己也建了一个在线版，开始我是在 NAS 自用的，然后觉得要建个演示的，干脆就直接建一个完整的吧，然后就有了 https://carnote.boxks.com 。
我之前用的是微信里面，腾讯我的车中油耗工具，但是每次都要打开微信，点小程序，点更多才到油耗用具。一顿操作…猴年马月了，而且我也想要记录保养和配件等内容。现在有这个工具就点开然后马上就能添加能耗记录了。
开发过程
项目功能说明
因为之前用 Cursor 和 Kiro 做过几个小工具，所以知道这类工具开发大致是怎么回事，这次我先给项目写了一份描述文档 。
开发
然后给 Antigravity 使用 Planning 模式开始，他会根据要求生成他理解的文档，拆分多个开发步骤。然后我看一下，没啥问题就叫他开始开发，然后 Antigravity 自动给我在文件夹中建立对应文件夹不停的在敲代码，大概有半小时吧，一个能跑的程序就出来了，但是他分开前后端的，作为懒人，我直接叫他给我一个在 WSL 一键启动的脚本。这样第一版就完成了，当然，第一版是有很多依赖什么的没有成功跑起来的，然后出什么提示直接丢给 Antigravity 等他自己看和修复。第一版是 Antigravity 自己根据理解做的，排版什么的我都不是很满意，我直接就把 PrimeVue 首页的例子截图丢给他，之后就出了现在的版面了。因为成现在的界面我才建立 git 仓库，所以已经看不到最开始 AI 自己生成的界面了。
很多细节为因为我没有详细的描述，也没有画原型图，所以都是 Antigravity 根据自己理解做的，所以前期针对前端的细节改了很多，甚至改到周额度用完了，我就等了几天继续改。做了两周的晚上，初版能用的做好了。我自己在 NAS 上跑起来了。
后来想着，既然发布到 GitHub 上了，怎么也得给别人看看成品是怎样的把，这时候，我就想到，我直接搭建一个大家直接用的算了，而服务器的费用，我就想到了，弄会员把，这样我就能赚点服务器的钱了。然后问了一下 OpenAI 国内个人开发者怎么收钱，他给的方案就是爱发电 和淘宝 ，然后我登录爱发电看看详细的设置，然后又注册了淘宝店铺，看看虚拟序列号后台没有自动发卡，需要手动发卡，需要找其他办法，还是爱发电方便点。
会员设置
开源版没有任何功能限制，我建好的 https://carnote.boxks.com 则普通用户可以管理两台车，进阶会员 ￥30/年，可以管理5台车，专业会员 ￥200/年，可以无限制增加车辆，首页的数据展示可以同时多辆车对比数据，也可以自定义时间段数据进行对比。
这样设置的理由是，普通用户两台车是正常的了，而你有超过2台车需要管理，这一年30块也是意思意思给个服务器的费用，超过5台车，那就更不用说了吧。
快速部署
# CarNote Docker Compose 配置
# 包含后端 API 服务和可选的 PostgreSQL 数据库
version: '3.8'
services:
# 主应用服务 (包含前后端)
app:
image: kaiyuan/carnote:latest
build:
context: .
dockerfile: Dockerfile
container_name: carnote
ports:
- "53300:53300"
environment:
- NODE_ENV=production
- PORT=53300
- DB_TYPE=sqlite
- SQLITE_PATH=/app/data/carnote.db
# - DB_TYPE=postgresql
# - PG_HOST=172.20.0.1
# - PG_PORT=5432
# - PG_DATABASE=carnote
# - PG_USER=carnote
# - PG_PASSWORD=postgresqlPassword
- UPLOAD_PATH=/app/uploads
# JWT 密钥
- JWT_SECRET=${JWT_SECRET}
# 跨域资源共享
- CORS_ORIGIN=http://localhost
# SMTP 配置 (可选)
# - SMTP_HOST=smtp.example.com
# - SMTP_PORT=465
# - SMTP_USER=user@example.com
# - SMTP_PASS=password
# - SMTP_SECURE=true
# - SMTP_FROM=CarNote <noreply@example.com>
volumes:
# SQList 数据库目录及数据库备份目录
- ${carnote_data}:/app/data
# 上传文件目录
- ${carnote_uploads}:/app/uploads
restart: unless-stopped
healthcheck:
test: [ "CMD", "node", "-e", "require('http').get('http://localhost:53300/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" ]
interval: 30s
timeout: 3s
retries: 3
start_period: 10s
networks:
- carnote-network
# 数据卷
volumes:
carnote_data:
driver: local
carnote_uploads:
driver: local
# postgres_data:
# driver: local
# 网络
networks:
carnote-network:
driver: bridge
Vibe Code 经验
用过几个 AI 编程相关的 Vibe Code 软件，叫 AI 开发和平时做其他事情一样，需要事情将自己想要的东西结构并编写一份清晰的文档，这份文档越详细越细致越好，再有就是能画出 UI 的原型图更好，Google Stitch 能直接生成整套前端 UI，当然还是得是要有清晰的描述，所以可以的画还是用 Figma 自己画好，然后放到项目文档中让 AI 自己依照原型图开发。
Login
在2014到2016年期间，我在 MacOS 上用这一个简单的图片处理软件。我经常用来调整图片的尺寸，然后还有裁剪水印之类的功能，后来系统升级后作者也没更新，之后就再也找不到类似的软件了。
软件 UI 基本上就直接采用我以前用的软件类似的布局，左边是图片预览和列表，右边是操作菜单。功能有：修改尺寸、裁剪、文字水印、图片覆盖（图片水印）四个功能，导出的文件名支持按规则命名，导出格式支持多种常规图片格式。
