0. 先和大家打个招呼吧 
-
我是谁：大家好，我是一名大二学生，平时喜欢折腾点小工具，也经常在宿舍煮点东西吃（我是大厨哦qwq）。
-
我是怎么用 TRAE 把 Demo 做出来的：
做这个 Demo 的过程，其实就像找一个特别耐心的搭档一起干活。我先在 TRAE 里把自己的想法一点点讲出来："我想做一个管理冰箱食材的小工具，能记录买了什么、什么时候过期，最好还能根据现有食材推荐菜谱。"它一边听一边帮我拆成了具体的功能模块，还提醒我可能漏掉的地方。最让我惊喜的是，很多我以为要写好久的功能，TRAE 几分钟就能搭出个能跑的版本。比如食材知识库自动填充，我原本打算手动整理几十种食材就放弃了，结果 TRAE 帮我一次性生成了 439 种食材的保质期、存放分区和分类，直接省下了好几天的时间。
当然也有卡壳的时候。单文件 HTML 双击打开白屏那次，我查了很久也没搞明白是 history 路由的问题，TRAE 帮我定位到 file:// 协议不支持 createWebHistory，改成 hash 路由后就解决了。那一刻真的觉得，有一个能随时讨论、还能直接给代码的助手太方便了。
-
这个作品不算完美，但它是从我真实的生活痛点里长出来的。希望能被你们喜欢
一. Demo 简介
食库管家是我做的一款家庭冰箱食材管理小工具，核心就是把冰箱里的食材“记清楚”，顺便用 AI 帮你决定“今天吃什么”。
它把平时家里会遇到的进销存问题——买了什么、还剩多少、什么时候过期——和 AI 配菜结合在一起，目标是让你打开冰箱时心里有数，减少因为忘了吃而浪费的食材。
-
产品形态：移动端 Web 应用，纯前端单文件 HTML，双击就能在浏览器里跑，不用安装、不用配服务器
-
面向谁：主要是家里做饭的人，或者像我这种宿舍里想自己开火的；也可以放办公室茶水间大家共用
-
核心功能（3 个）：
- 食材台账管理：
内置了 439 种常见食材，输入名字能自动带出保质期、存放分区、分类，支持入库、编辑、出库、删除这些基础操作
2.三色临期预警：
自动算每种食材还能放几天，用绿/黄/红/灰四级显示，红色会触发呼吸动画提醒
3.AI 菜谱推荐：
接入了 DeepSeek、智谱清言、OpenAI、Moonshot 几家大模型，根据冰箱里现有食材和口味偏好生成 5-6 道菜谱，会优先推荐用掉临期食材；没配 AI 时也会用本地菜谱兜底
- 食材台账管理：
-
产品截图
- 首页
- 库存
- AI设置（配置API-key）
- AI智能生成食谱功能
- 报表总览
二. Demo 创作思路
-
灵感来源
这个想法其实是从我自己的生活里长出来的。每次打开宿舍小冰箱，总能翻出一些已经过期的东西：上周买的青菜忘了吃、半个月前的牛奶鼓包了、冷冻层的肉也不知道放了多久。更常见的是，明明冰箱里还有不少东西，却还是每天为“今天吃什么”发愁，最后又点了外卖。
我观察下来，家里食材浪费的原因很多时候不是不想节约，而是：看不见、想不起、不会搭。买回来塞进去就忘了，临期不知道，过期才发现；就算记得有，也不知道怎么搭配成一道菜，最后只能眼睁睁看着它坏掉。
-
想解决的真实痛点
- 食材过期浪费—买回来的食材忘记吃，发现时已过期，只能扔掉，既浪费钱又浪费食物
- 库存不清—不知道冰箱里还剩什么，去超市又重复购买，回家发现还有一堆
- 不知道做什么菜—面对一堆食材不知道如何搭配，每天“今天吃什么”成了难题
- 采购无计划—缺什么记不住，到超市才临时想，经常漏买关键食材
- 为什么做这个方向
- “进销存 + AI 配菜”比单纯记账有用
市面上食材记录 App 不少，但大多只帮你记。我觉得真正有价值的是下一步：知道有什么之后，直接告诉你怎么吃。AI 菜谱推荐就是把库存数据变成“今天可以做什么菜”，解决“不知道吃什么”的痛点。 - 做单文件 HTML，降低体验门槛
比赛评审和用户都不愿意先装环境、配数据库。我把它打包成单个 HTML 文件，双击就能打开，零门槛体验，才能让产品的价值被真正感受到。 - 让 AI 优先消耗临期食材
AI 不是随便推荐几道菜，而是优先用快过期的食材。这样“食材管理”和“配菜决策”就连起来了：临期食材越早被用掉，浪费就越少。
三. Demo 体验地址
- 本次提交的是一个交互式 HTML 文件，下载后可以直接运行。
食库管家html体验.zip (220.4 KB)
- 体验方式
- 下载本帖附件的 zip 压缩包
- 解压后得到 index.html
- 双击 index.html，用 Chrome / Edge / Firefox / Safari 打开即可
- 使用默认账号登录：账号 admin / 密码 123
- 技术说明
- 文件大小约 700 KB，社区限制 20 MB 以内，完全满足
- 支持离线运行，核心功能（入库/出库/查询/预警）不需要联网
- AI 菜谱需要联网调用你自己配置的 API Key，没配置时会自动降级为本地菜谱
- 数据存在浏览器 LocalStorage 里，不上传服务器，隐私上比较安全
四. TRAE 实践过程
这一部分记录我用 TRAE 完成食库管家的全过程。
以下是开发过程中几个关键任务的对话 Session ID
- 产品开发规格文档生成
任务：
/spec 基于以下已评审的需求基线，生成项目完整开发Spec：
1. 输出 spec.md：项目目标、核心功能模块、技术选型建议、范围边界、核心设计决策
2. 输出 tasks.md：按依赖顺序拆解分层开发任务，标注优先级 P0/P1/P2
3. 输出 checklist.md：对应每个功能点的可量化验收标准
所有文件存入 .trae/specs/ 目录
需求基线： `c:\Users\H1314\Desktop\TRAE食库管家\APP\结构化需求清单.md`
Session ID
.4122491384764796:c3556be68486b2c76530f4801b621c0e_6a3f83737295fa5d7de3ccf6.6a3f83827295fa5d7de3ccf8.6a3f838208580dc076a5e631:Trae CN.T(2026/6/27 16:02:10)
- 骨架代码生成
1.DB 层
任务一：按照开发计划，生成用户模块数据层代码：
1. DO 实体类：UserDO，对应 sys_user 表，使用 MyBatis-Plus 注解
2. Mapper 接口：UserMapper，继承 BaseMapper，附带基础CRUD
3. 自定义查询在 XML 中编写，必须使用参数化查询，禁止字符串拼接
所有类放在对应包下，添加完整类注释与方法注释。
Session ID
.4122491384764796:8ef04681d47e5a90437d0e86d7dc1a6d_6a3f83737295fa5d7de3ccf6.6a3f9d6b7295fa5d7de3cf2a.6a3f9d6b08580dc076a5e638:Trae CN.T(2026/6/27 17:52:43)
2.Service 层
任务二：生成用户模块 Service 层代码：
1. UserService 接口 + UserServiceImpl 实现类
2. 实现分页查询、新增、编辑、删除、状态修改、重置密码方法
3. 新增/编辑做参数合法性校验，删除为逻辑删除
4. 业务异常抛出自定义异常类，核心写操作添加 @Transactional 事务注解
5. 密码使用 BCrypt 加密存储
遵循分层规范，禁止越权操作，补充必要业务注释。
Session ID
.4122491384764796:b3b029c9cb97c36da4a047249b228e80_6a3f83737295fa5d7de3ccf6.6a3f9e387295fa5d7de3cf60.6a3f9e3808580dc076a5e639:Trae CN.T(2026/6/27 17:56:08)
3.Controller 层
任务三：生成用户模块 Controller 层与入参出参类：
1. UserController，RESTful 风格接口，路径统一前缀 /system/user
2. 对应 Service 层所有方法，封装统一返回结果
3. 入参使用 DTO 对象，添加参数校验注解（@NotBlank、@NotNull、@Size 等）
4. 接口添加权限注解，标注所需角色/权限标识
5. 出参使用 VO 对象，屏蔽敏感字段（如密码、盐值）
生成对应的 DTO、VO 类，放在对应包下。
Session ID
.4122491384764796:78e88c0b1fea9028e90dad520ab9aa44_6a3f83737295fa5d7de3ccf6.6a3f9f907295fa5d7de3cfd5.6a3f9f8f08580dc076a5e63a:Trae CN.T(2026/6/27 18:01:52)
- AI 菜谱推荐功能实现
任务：Implement the code according to the implementation plan provided in file `c:\Users\H1314\Desktop\TRAE食库管家\APP\AI菜谱推荐_实现方案.md` . You may make appropriate modifications to the original plan as needed, provided that the following requirements are met: 1) The code must be fully functional and run without errors in the specified development environment; 2) All core functional requirements outlined in the implementation plan must be satisfied; 3) The implementation must adhere to basic coding standards and best practices for maintainability. Focus on delivering a working solution that meets the specified business needs while ensuring code stability and correctness.
Session ID
.4122491384764796:09ad6053b619e09cbb95c2b200e59c65_6a409894a874a3ede6f07ef5.6a437fe4e052c31108bcef3e.6a437fe48c638326339a9e99:Trae CN.T(2026/6/30 16:35:48)
- 美化主题修改前端代码
任务：在保持现有所有功能接口及互动按钮完整可用的前提下，对前端页面进行全面美化与视觉重构。设计需围绕食物、食谱及冰箱三大核心元素构建主题鲜明的界面，确保整体视觉效果符合现代用户审美标准，色调系统保持高度统一与和谐。色彩方案应避免使用高饱和度配色，优先选择柔和、自然的色调组合。
为提升用户体验，需为不同类别的食材设计专属底色标识系统，确保用户能够通过颜色直观区分各类食材。针对临期食品，需设计醒目的视觉提醒机制，可采用颜色预警（如黄色表示即将过期，红色表示已过期）、图标提示及位置优先级调整等多种方式组合实现。
完成设计后，需输出一份详细的前端设计说明文档（Markdown格式），并存储于项目主文件夹根目录下。该文档应包含界面设计理念、色彩规范、元素布局说明、交互逻辑说明及关键视觉元素的实现细节等内容。
Session ID
.4122491384764796:4c2f5626d7bdf9a21a651c27f338f952_6a43ff23611392bc29d1f6ad.6a44008b611392bc29d1f6b7.6a44008b674b21c1d5b1352b:Trae CN.T(2026/7/1 01:44:43)
- 食材知识库构建
任务：我将提供一份食材知识库文档 `c:\Users\H1314\Desktop\TRAE食库管家\APP\食材知识库-300种常见食材.md` ，请基于该文档实现一个食材入库辅助功能。该功能需要在用户进行食材入库操作时，根据食材名称自动匹配并填写分类、单位、保质期天数及存放分区等信息。系统自动填写的信息应允许用户进行手动修改和调整，以适应实际情况。请确保自动填写的信息准确对应文档中的食材数据，并提供友好的用户交互界面，方便用户查看和修改自动填充的内容。
Session ID
.4122491384764796:9895d39676e83e15a9aeb020f0a1f710_6a45ff8e48d6dcd6127c8112.6a46030448d6dcd6127c81eb.6a4603038cb9dd82ee420ac1:Trae CN.T(2026/7/2 14:19:48)
- 以下为开发过程截图补充
-
决策一：为什么用 daysLeft（剩余天数）排序而非 status（状态分级）做 AI 输入？
一开始我想直接把 green/yellow/red 这些状态传给 AI。但后来和 TRAE 讨论后意识到，status 是粗分，daysLeft 是精确数字。比如同样是 red，鸡蛋只剩 2 天，鸡胸肉还有 3 天，鸡蛋显然更应该优先用。所以最后在 Prompt 里注入了准确的剩余天数，并加上**【紧急消耗】【临期】**这些标签，让大模型自己判断优先级。 -
决策二：AI 降级兜底策略
Demo 演示时最怕的就是网络或 API 出问题。我设计了一条完整的降级链路：没配 API Key → 直接返回 5 道本地经典菜谱
API 超时 / CORS 拦截 / 401 / 429 / 5xx → 自动降级为本地菜谱
顶部显示黄色降级提示条，告诉用户当前是本地菜谱
这样就算断网，演示也不会翻车，核心功能链路仍然是完整的。 -
决策三：单文件 HTML 的路由选择
做单文件交付时我踩了个坑：用 createWebHistory 路由，双击用 file:// 协议打开时，页面跳转直接失效。后来和 TRAE 一起排查，改成 createWebHashHistory（hash 路由），#/inventory 这种锚点跳转即使在 file:// 下也很稳定，路由守卫、params、query 都能正常用。 -
决策四：食材分类的专属底色系统
为了让用户一眼看出食材属于哪一类，我给 5 类食材设计了专属底色，灵感来自食材本身的视觉联想：蔬菜用鼠尾草绿、肉禽蛋奶用暖玫瑰、水产用雾霾蓝、干货调料用暖驼、速冻食品用冰灰蓝。通过卡片左侧 4px 色条 + 浅底实现，颜色不只是好看，也承载了“新鲜→临期→过期”的渐进语义。
五. 技术实现概览
六.功能模块清单
七.开发心得
做这个项目最大的感受是：AI 辅助开发真的能把“想法到产品”的距离拉近很多。
以前要做这样一个应用，从需求梳理、UI 设计、前端开发到联调，少说也要几周。这次用 TRAE，我把主要精力放在“想清楚要做什么”和“把关关键决策”上，具体的代码实现交给 AI 完成，效率提升非常明显。
几个具体感受：
- 需求想清楚比代码写得多更重要 我花了不少时间用 TRAE 整理结构化需求清单，明确边界约束。不做什么和做什么同样重要，这能让后面的开发方向更清晰，少走很多弯路。
- AI 降级策略是 Demo 的生命线 演示最怕翻车。设计完整的降级链路后，即使断网、API 失败，核心体验也依然完整。这个思路我觉得所有 Demo 项目都可以借鉴。
- 单文件交付降低体验门槛 双击即用、零配置，让评审和用户能第一时间接触到产品价值。比起需要配环境的方案，单文件的体验转化率明显更高。
- 视觉一致性提升专业感 统一的暖意厨房主题、莫兰迪色系、分类专属底色，让产品看起来不像临时拼凑的 Demo，更像是一件用心打磨的作品。
八.报名帖链接
已通过的社区报名帖链接：