地球日的活力
发布: (2026年4月20日 GMT+8 10:55)
2 分钟阅读
原文: Dev.to
Source: Dev.to
我构建的内容
历史记录按日历天保存在浏览器中；每个章节旁边的照片是真实的打包图片。可选的 Gemini API 路由可以根据你发送的简短摘要添加温暖的辅导文字——所有数字均来自应用本身，而非模型。
演示
vitality-delta-five.vercel.app
代码
/
Vitality构建方式
- 框架： Next.js 14（App Router）+ TypeScript，用于路由、布局和 API 路由。
- 样式与动画： Tailwind CSS + Framer Motion，用于“生态‑应用”界面和动效。
- 图表： Recharts 用于堆叠影响可视化；通过
next/font引入 Lexend。 - 核心逻辑： 纯函数（
vitalityMath、ledger），确保分数和克数可复现且可审计。 - 持久化： 使用
localStorage和本地日期键保存历史；过去的天数为只读。 - 资源：
next/image+ 位于public/vitality/下的资产。 - Gemini 集成： 仅在
POST /api/gemini-coach中使用@google/generative-ai；GEMINI_API_KEY存放在.env.local/ Vercel 中——绝不使用NEXT_PUBLIC_。 - 部署： 从 GitHub 部署到 Vercel。