一、Demo 简介
是什么：
一款面向居家做饭人群的智能饮食搭配 H5 应用。录入家庭成员档案与冰箱食材后，AI 自动生成一日三餐家常食谱，附带营养分析、食材相克提醒与采购清单 。
面向谁：
上班族、减脂人群、宝妈、慢病居家人群——每天为吃什么发愁、不懂营养搭配、食材常浪费 的人。
主要功 能：
1. AI 智能配餐：根据家庭成员档案（身高体重/目标/忌口/慢病）+ 冰箱库存 + 二十四节气，一键生成全家适配的三餐食谱，每餐标注热量与 宏量营养。
2. 冰箱库存管理：手动录入或拍照识别食材，自动追踪保质期，临期食材高亮提醒 ，减少浪费。
3. 食材相克提醒：食谱与库存中的相克组合自动警示（如菠菜+豆腐、螃蟹+柿子），守护 全家饮食安全。
4. 周营养报告：汇总一周摄入，AI 给出可 执行的改善建议。
5. 二十四节气时令食谱：应季而食，小暑推荐清淡祛湿， 立冬推荐温补御寒。
界面 展 示：
截图1：首页（节气小暑 + 今日推荐 + 四步 流 程 入口）
截图2：今日三餐（早午晚食谱卡 + 热 量 + 换菜按钮）
截图3：食谱详情（ 食 材/步骤/ 营养/相克提醒）
截 图 4：冰箱库 存 （临期高亮）
截图5：家庭成员（角色标签）
截图6：周营养报 告（ 健康分 + 三大宏 量 环 + AI 建议 ）
二、创作思路
灵感来源：
自己就是目标用户。每天下班站在冰箱前发呆，不知道吃什么；买回来的菜常放到过期；家里老人控糖、孩子过敏花生，一锅饭要兼顾全家需求。试过下厨房、薄荷健康，前者只 给 食谱不 照 顾全家差异，后 者 只算热 量 不管你冰箱里有什么。
想解决的问题 ：
1. 决策疲劳——每天为三餐发愁，缺乏灵感。
2 . 营养 失 衡——不懂合理搭配，蛋白质长期不足、晚餐 碳 水偏高 。
3. 食材浪费——冰箱食材过期，购买无计划 。
4. 忌口兼顾难— —家 人各有忌口与慢病，一餐要分版本。
为什么做这个方向：
真 实高频：吃饭是每天都发生的刚需，比偶尔用一次的工具更有持续价值。
AI 价值明确：配餐本质是多约束优化问题（成员需求 × 库存 × 节气 × 禁忌），正是 LLM 擅长的场景，而非硬套 AI。
赛道契合 ：生 活娱乐赛道，产品形态轻量（H5+小程序），不依赖硬件，评审即开即用。
可演示：核心链路 （ 档案→ 库 存→AI 配餐→清单/ 报 告）3 分钟可跑通，Demo 完成度高。
三、 Dem o 体验地址
方式：HTML 静态文件（ zip 打包）
居家健康饮食助手-Dem o .zi p (110.2 KB)
体验方式：
1. 下 载并 解压 zip
2. 双击 index.html 即可在浏览器中体验完整功能
说明：Demo 为纯前端静态版本，所有数据为内置演示数据（3 名家庭成员 / 8 项冰箱库存 / 13 道食谱 / 今日三餐已配好），无需后端服务器即可体验全部核心功能。完整项目 源码（ 含 Fast API 后端 + A I 网 关 + 数据库 ） 见 TRAE 实践过程部分。
四、TRAE 实践过程
4.1 开发工具
全程使用 TR AE Wo rk C N（v0 .1 . 30） 完成，从创意方案到前后 端 代码 全部由 TRAE 辅助生成。
4.2 开发流程
第 1 步：创意方案生成
用 TRAE Work 生成创意方案页（proposal.html）与使用流程页（user-flow.html ）， 明 确产品 定位、用户画像、四步使用 流 程与 设计系统（绿色有机风 + Tailwind Token）。
第 2 步：项目计划书制定
让 TRAE 阅读设计资产，输出完整开发项目计划书，含技术选型（uni-app+Vue3+UnoCSS / F ast API / Postg r eS QL）、数据模型、API 设计、5 个里程碑、WBS、风险应对。
第 3 步：后端骨架搭建
通过 TRAE 智能体并行生成 FastAPI 后端：11 个数据模型、10 个路由模块、Schem a 校 验、A I 网关封装、种子数据 （ 72 条食材 / 24 节气 / 24 条相克规则 / 13 道食谱）。
第 4 步：前端双端空壳
TRAE 生成 uni-app + Vue3 + Vite + UnoCSS 前端骨架，迁移设计 Token 到 UnoCSS，10 个页面 + 4 个 t a bBa r + 通用组件（A p pC ard/SectionTitle/TagPill/EmptyState）。
第 5 步：主链路联调
前端 8 个页面接通后端真实 API（家庭成员 CRUD / 库存管理 / AI 配餐生成 / 换菜 / 相克检查 / 节气信息） 。 修复 JSONB/SQLite 兼容性、ESM 配置、路由顺序等 bug。
第 6 步：演示数据与静态打包
生成演示数据脚本（演示用户 + 3 成员 + 8 库存 + 今 日配 餐），将 前端改造为纯 静态 moc k 版本，build 产出可双击运行的 zip。
4.3 关键步骤截图
截图1：创意方案生成
TRAE Work 对话生成 proposal.html，展示产品定位与四步流程。
Session ID: 4290759942485353:056887a8fdf8bc009c6c35d57aff491c_6a45b3d9cfff7a3d9daaf2f9.6a45b3dacfff7a3d9daaf2fc.6a45b3d9cfff7a3 d9d aaf 2fa:T RAE W or k CN . 0 .1. 30.no_sid.no_ppe.T(202 6/7/2 08 :42:02)
截图2：项目计划书制定
TRAE 阅读设计资产后输出完整计划书，含技术选型与里程碑。
Session ID: 4290759942485353:567e79699f52a4832aacc7b33bb6820e_6a45b3d9cfff7a3d9daaf2f9.6a45b4f6cfff7a3d9daaf351.6a45b4f6cfff 7 a3 d9da af34f:TRAE W o rk CN. 0.1.30.no_sid.no_ppe.T(2026/7/2 08:46:46)
截图3：前 后端 代码生成与联调
TRAE 智能体并行生成后端 FastAPI 骨架与前端 uni-app 空壳，并完成主链路联调。
Session ID: 4290759942485353:54c93889d8f562026dc8e19ed86d5cea_6a45b3d9cfff7a3d9daaf2f9.6a470d9c99f10f5436d34cf7.6a470d9c99f10f5436d3 4 cf5 :TRAE Work CN.0.1.30.no_sid.no_ppe.T(2 02 6/7/ 3 09:17:16)
运行效果截图：
截图 4：首 页 运行效 果（节气小暑 + 今日推荐 + 四步流 程）
截图5：今日三餐运行效果（早午晚食谱 卡 + 热量 + 换菜）
截图6 ：食谱详情与相克提醒
截图7：冰箱库存与临期提醒（牛 奶1天/豆腐今日到期高亮）
4.4 技 术栈
前 端
uni-app + Vue 3 + Vite + UnoCSS + Pinia （一套 代码编译 H5 与微信 小程序）
后 端
Python 3.11 + FastAPI + SQLA l che my 2.0 + Alembic
数 据
Postgre SQL 16 + Redis 7（SQLite 兼容用 于 dev 测 试）
A I
TR A E A I / LLM（食谱生成、周报建议）+ 视觉模型（食材识别）
部署
Docker Compos e
4.5 项目结构
dasai/
├── home-diet-assistant/ # 设计资产 （ 创意方 案/流程页/设计系统/计划书）
├── backend/ # Fas t API 后端（10 路由/11 模型/种子数据/AI网关 ）
├── frontend/ # un i-app 前端（联调版，接真实 AP I）
├── demo-s tat ic/ # 静 态 Demo （ moc k 数据，build 产物 z ip ）
├── docker-compose.yml # 容器编排
└── READ ME.md
五、开发心得
TRAE 带来的效率提升 ：
1. 从创意到可运行 Demo 全程 AI 辅助：创意方案 → 计划书 → 后端骨架 → 前端空壳 → 联调 → 静态打包，每个环节 TRAE 都能独立完成，我只需做决策与验收。
2. 并行能力： 用 智能体 同时搭建前后端，两侧独立推进，大幅缩短工期 。
3. bug 修复快：JSONB/SQLite 兼容、ESM 配置、路由顺序等问题，TRAE 能快速定位 并 修 复 。
踩过的坑 ：
uni-app 的 @dcloudio/vite-plugin-uni 不同版本默认导出结构不一致，需兼容处理 UniPlugin.default | | Un iPlu gin。
SQLAlchemy 的 JSONB 在 SQLite 测试时不支持，需用 JSON().with_variant(J SO NB() , “postgresql” ) 兼容。
BigInt 主键在 SQLite 不能自增，需 BigInteger().with_variant (Inte ger(), “sql ite” )。
Vite 默认 ES module 输出在 fi le:/ / 协议 下被 CORS 拦截 ，需用 vi te-plugin-si ng le file 内联所有资 源 。
后续规划（ 复赛方向）：
接入 真实 TRAE AI 替换 mock， 实现真正的智能配餐
SSE 流式输出，边生成边渲染
拍照识食材接入多模态视觉模型
微信小程序端发布体验 版
二十四节气时令食谱与老人儿童分餐完整 上线