先和大家打个招呼吧
大家好呀！我是有米的"铲屎官"——一个每天中午都要花15分钟纠结吃什么的打工人。某天盯着外卖App划到手指麻木的时候，脑子里突然蹦出来一个画面：要是有一只小仓鼠，歪着头问我"大人今天想吃什么"，然后帮我转个转盘，最后还记住我下次想吃啥……那该多好啊。
于是就有了「有米的小馆」。
我跟TRAE说：“我要一只戴眼镜的仓鼠侍者，它会做转盘，会记口味，会在我踩雷的时候掏手帕擦汗。” 它居然真的帮我做出来了。从角色设计到转盘逻辑，从表情切换到音效合成，全程TRAE Work一手包办。说实话，有好几个瞬间我觉得"原来这么简单"——比如我说"让仓鼠在转动转盘的时候表情变紧张"，TRAE直接就给加了eyes和mouth的状态切换，比我想象中流畅太多。
一、Demo 简介
是什么： 「有米的小馆」是一款生活决策辅助 × 模拟养成 × 治愈陪伴的Web应用。打开浏览器即玩，无需下载安装。
面向谁：
- 每天纠结"今天吃什么"的都市打工人
- 需要轻度陪伴感的独居数字原住民
- 喜欢模拟养成但不想投入重度时间的轻度游戏用户
- 对AI角色形态好奇的普通用户
主要功能：
功能一：蛋壳孵化开场动画
打开页面，首先看到的是深蓝黑渐变背景上，一颗发光的蛋静静等待。顶部金色标题「有米的小馆」配副标题「今天吃什么？」，5颗星星闪烁装饰。蛋下方有暖光底和闪烁提示「点击蛋，唤醒有米」。点击蛋壳后，金光迸发、粒子飞溅、屏幕震动，有米从蛋中破壳而出——先是瑟瑟发抖，然后站稳摇晃，最后自信登场。
功能二：口味偏好学习
首次进入时，有米会像一个认真小侍者一样，问你5个问题——辣度偏好、汤类喜好、主食偏好、口味偏好、有没有忌口。每个问题都配有场景道具（辣椒糖、热汤碗等），有米会用对话气泡和你互动。这些答案会被它用歪歪扭扭的粉笔字"记在小黑板上"，后续每次推荐都会参考。支持随时修改偏好。
功能三：权重转盘
输入你想吃的选项，有米会根据你的口味偏好、天气、历史反馈，把选项变成大小不一的转盘扇区。不是均等随机的——你爱吃的会大一点，最近吃多了的会小一点。转盘转动时有米表情会从期待→紧张→惊讶动态切换，指针越过扇区边界时有低沉咔嗒声，停下时手机震动反馈。点"加一批"可以追加更多选项（最多12个），"换一换"可以全部替换，还能自己输入。
功能四：结果推荐与小纸条
转盘停下后，有米会根据结果的权重比例做出不同表情——高权重菜品时开心飞星星，低权重时难过擦汗。然后弹出一张"小纸条"风格的推荐单，上面写着结果、日期天气、以及有米根据你的偏好写的个性化备注。可以保存小纸条分享出去。
功能五：反馈养成
告诉有米"好吃"或"踩雷"。好吃的时候它比你还高兴，围裙口袋飞出金色小星星；踩雷的时候它耳朵垂下来，掏出小手帕擦汗，然后认真追问原因（太辣？太淡？食材不新鲜？），记在小本子上。连续互动后，有米会越来越懂你。
功能六：记忆图鉴系统
有米会记住你不吃的东西、下雨天偏爱的热汤、连续吃辣后该换口味了的规律。它用"小本本"记录每次反馈，随着使用越来越久，推荐会越来越准。图鉴页面还支持饮食统计和食材日历查看。
功能七：偏好随时修改
在任何阶段都可以点击"修改偏好"按钮，有米会拿出小黑板让你修改辣度、汤类、主食、口味和忌口。修改后数据立即生效，下次推荐就会参考新的偏好。
二、Demo 创作思路
灵感来源：
某天中午，我又在用外卖App划了15分钟还决定不了吃什么。划到最后随便点了一个，吃完总觉得差点意思——不是因为不好吃，而是因为"没有人帮我想"。市面上的"吃什么"工具都是高效、准确、冷冰冰的随机数生成器。它们帮你做完决定就走了，下次见面时已经忘了你是谁。
我想要的不是一个更快的决策工具，而是"有人在替我想"的感觉。
想解决的问题：
"今天吃什么"看似是个小问题，但它是每天都会发生的、真实存在的微型焦虑。用户需要的不是更精准的推荐算法，而是一个有温度的、会记住你的、像朋友一样存在的决策伙伴。
为什么做这个方向：
我判断AI在日常生活中的最佳形态，不是推送通知、不是数据图表，而是一个有性格、有记忆、有情感反馈的角色。一只仓鼠侍者比一个推荐列表更能缓解"选择困难症"的本质痛点——不是缺信息，是缺陪伴。
产品的情感曲线设计为三层：
- 第一层"有用"：转盘确实帮我做了决定，扇区分析有道理
- 第二层"懂我"：它记得我不吃芹菜，下雨天自动推热汤
- 第三层"等我回家"：深夜打开看到它趴在吧台上睡着了，吧台上散落着练习画转盘的废稿
从"这个转盘挺有用"到"它在等我回家"——这就是「有米的小馆」想创造的情感价值。
三、Demo 体验地址
在线体验链接：
主站：https://youni-demo.surge.sh
备站：https://cc20216.github.io/younis-diner/
直接浏览器打开即可体验，无需安装任何东西。建议用手机或窄屏浏览器查看效果更佳（设计为375px移动端适配）。
四、TRAE 开发过程
TRAE 开发截图
以下是使用 TRAE Work 开发「有米的小馆」过程中的实际截图：
开发流程
整个Demo完全使用TRAE Work开发完成，以下是关键步骤：
第一步：角色设计与形象生成
跟TRAE描述了有米的形象——奶白色小仓鼠、圆框眼镜、白色围裙。通过反复沟通调整，最终生成了24种表情姿态（站立、思考、紧张、开心、犯困、眨眼等），全部抠图为透明背景PNG。
第二步：核心交互架构搭建
用TRAE Work搭建了5个场景阶段的完整流程：
- Stage 1：蛋壳孵化开场动画（含标题、星空、暖光、引导提示）
- Stage 2：口味偏好问答设置（5个问题，支持子步骤回退）
- Stage 3：权重转盘主界面（含天气、时段感知、触摸滑动转盘）
- Stage 4：结果反馈与评价（好吃/踩雷/一般三档+原因归因）
- Stage 5：记忆图鉴查看（含饮食统计、食材日历、有米装扮）
第三步：转盘权重算法实现
跟TRAE详细描述了权重计算逻辑——综合口味偏好匹配度、天气因素、选项顺序（+0.1权重）、历史反馈记录来计算每个选项的扇区占比。忌口项权重直接归零。TRAE帮我把这个复杂逻辑浓缩成了简洁的Canvas绘制代码。
第四步：仓鼠表情联动
为有米设计了基于转盘状态的动态表情切换：转盘转动时表情从期待→紧张→惊讶，结果为高权重菜品时眼睛变开心飞星星，低权重时表情变难过。还加了定时眨眼让角色更生动。
第五步：音效与部署优化
用Web Audio API合成了转盘咔嗒声（330Hz低音、0.05s短促、指针越过扇区边界时触发）、星星飞出音效、按钮点击声，全部代码生成无需外部音频文件。BGM在场景间用2.0s交叉淡入淡出过渡。
Session ID
以下3个Session ID对应Demo开发的关键任务对话：
6a45f65e94fca4f66274421a—— 核心场景架构搭建与转盘权重算法实现6a4a58b0e47b79678590791e—— 仓鼠角色表情联动与动画优化6a4a58afe47b79678590791c—— 音效合成与零依赖部署优化
踩坑经历
- 透明背景变黑底： 部署时把PNG转成JPEG内嵌，结果透明通道丢失，仓鼠变成了黑底方块。最终改用WebP格式，既保留透明又控制体积（24张图从15MB压到258KB）。
- Canvas状态栈错乱： 转盘旋转计算中ctx.save()和ctx.restore()没配对，导致角度计算全部偏移。TRAE帮忙排查后统一了状态栈管理。
- 对话框遮挡： 对话框定位在仓鼠角色右上方，但部分场景会遮挡其他UI元素。反复调整了position才找到不遮挡的最佳位置。
- 加载速度慢： 背景图4.8MB导致首屏加载极慢。通过压缩（4.8MB→161KB）+按需加载（首屏只加载4张图）+HTML预加载三重优化解决。
近期优化更新
开场动画全新设计
蛋孵化画面重做——顶部新增金色标题「有米的小馆」和副标题「今天吃什么？」，配以5颗闪烁星星装饰；蛋下方添加暖光底和闪烁引导提示「点击蛋，唤醒有米」。背景从纯黑改为深蓝黑渐变，营造更温暖的孵化氛围。
浏览器回退支持
全阶段支持浏览器回退按钮。从转盘回退到偏好设置、从偏好设置回退到开场，所有数据完整保留。偏好问答支持子步骤回退——从「口味」问题回退到「主食」问题，修改后数据立即更新为最新值。
图片按需加载优化
角色图片从一次性加载改为按阶段按需加载，首屏只加载4张必需图。背景图从4.8MB压缩到161KB（97%减少），加载速度大幅提升。
双线部署
Demo现已同时部署在 surge.sh 和 GitHub Pages，确保访问稳定性。
五、报名帖链接
报名帖已在大赛报名专区发布并通过审核，链接如下：
报名帖地址： 生活娱乐 有米的小馆——一只记得你口味的电子仓鼠侍者
感谢评审大大看到这里！有米在它的店里等你来玩~ 转个转盘，看看今晚吃什么吧
咋弄的，接口？cli？还是browseruse