夜猫子助手 —— 深夜出行一站式工具 Demo
1. Demo 简介
是什么：
「夜猫子助手」是一个纯前端实现的深夜出行一站式工具（单文件 HTML/CSS/JS Web App），无需安装、打开即用，专门针对深夜聚餐、喝酒、聚会场景设计。
面向谁：
核心用户是 20–35 岁的都市年轻群体：上班族、学生党、夜生活爱好者，以及经常组织或参与深夜饭局、酒局、KTV 聚会的人群。
主要功能：
| 功能 | 说明 |
|---|---|
 投票决策：今晚去哪 |
一键发起投票，选项包含烧烤、KTV、酒馆等，支持实时统计和随机选择，解决"去哪吃"的决策瘫痪。 |
 智能 AA 算账 + 自动对账 |
支持多人多笔消费记录，自动计算每人应付/应收；新增「自动对账 Demo」，模拟多人各自提交账单，系统自动找差异、标红争议项。 |
 安全回家 |
一键触发位置分享，生成可发送给亲友的实时位置链接；支持设置紧急联系人。 |
 组局广场 |
发起或加入附近的组局，系统预置模拟组局数据，满员自动标记，解决"找人一起玩"的匹配问题。 |
 饮酒日历 |
记录每周饮酒次数，提醒用户适度饮酒。 |
 醉汉模式 |
全屏二选一覆盖层：「继续喝」或「回家」，喝醉后只给最简单、最安全的操作。 |
界面展示：
2. Demo 创作思路
灵感来源：
每次深夜聚会都会遇到三个灵魂问题：“今晚去哪？”“这顿怎么算？”“喝多了怎么回家？”——群聊里投票、Excel 算账、发定位给家人，工具零散又麻烦。于是我想到：能不能把这些高频动作整合进一个轻量工具里？
想解决的问题：
- 决策慢： 一群人七嘴八舌定不下来，需要低门槛的投票和随机拍板。
- 算账扯皮： 多人垫付、消费项目多，容易记错或漏记，需要自动对账能力。
- 酒后安全： 喝醉后操作复杂 App 很困难，需要极简的安全回家入口。
- 组局难： 临时想找人喝酒唱歌，却不知道谁也想出门。
为什么做这个方向：
深夜出行/聚会是年轻人群的高频真实场景，但现有工具要么功能单一（单独投票、单独记账），要么操作太重（需要注册登录）。「夜猫子助手」走"打开即用、场景闭环"的路线，把决策、算账、安全、组局串成一条线，更符合真实使用习惯。
3. Demo 体验地址
由于本次 Demo 为纯前端单文件应用，已打包为 Zip 格式上传，解压后直接用浏览器打开 index.html 即可体验。
下载体验：
夜猫子助手Demo.zip (23.5 KB)
4. TRAE 实践过程
整个 Demo 从 PRD 撰写、技术架构设计、核心功能开发到测试优化，全部在 TRAE 中完成。以下是关键开发流程：
Step 1：需求梳理与 PRD 撰写
先用 TRAE 做产品策划，连续自问 30+ 个问题，明确用户痛点、功能边界和 3 天落地方案，输出 PRD 和技术架构文档。
Step 2：核心功能实现（投票 + AA 算账 + 安全回家）
在 TRAE 中通过自然语言描述需求，快速生成纯 HTML/CSS/JS 代码，实现投票决策、智能 AA 算账、历史账单、饮酒日历、位置分享等模块。
Step 3：醉汉模式优化
针对"喝醉了不能算账"的真实场景，和 TRAE 多轮对话，把醉汉模式从列表式交互改成全屏二选一覆盖层（继续喝 / 回家），确保喝醉后也能一键操作。
Step 4：组局广场 + 自动对账 Demo
继续用 TRAE 实现「组局广场」（发起/加入/列表/详情）和「自动对账 Demo」（多人提交账单 → 系统自动找差异、标红争议项、给出结算建议）。
关键任务对话 Session ID：
- PRD 与需求梳理阶段：
[.1013107633163356:ef5c76e259a5df7247cab270b0b318fd_6a3e6f32bd4c235344f11946.6a3e79d3bd4c235344f11ab9.6a3e79d2a060d002428aa0b6:Trae CN.T(2026/6/26 21:08:35)] - 核心功能开发与调试：
[.1013107633163356:c9ccc7ee2993a7a332119639c6f49981_6a3e6f32bd4c235344f11946.6a3e7a8ebd4c235344f11ac3.6a3e7a8da060d002428aa0b7:Trae CN.T(2026/6/26 21:11:42)] - 醉汉模式交互优化：
[.1013107633163356:6d7f8e59b4b3fcbf4d61fb3e47251758_6a3e6f32bd4c235344f11946.6a3e7e2fbd4c235344f11b39.6a3e7e2ea060d002428aa0bb:Trae CN.T(2026/6/26 21:27:11)] - 组局广场 + 自动对账实现：
[.1013107633163356:fc3bce664d50759367e55ac48641014d_6a3e6f32bd4c235344f11946.6a3e834bbd4c235344f11bac.6a3e834ba060d002428aa0c2:Trae CN.T(2026/6/26 21:48:59)]
5. 经验总结（额外补充）
- 用场景驱动设计： 不是堆砌功能，而是围绕"深夜聚会"这一条主线，把投票、算账、安全、组局串起来。
- 边界情况要充分考虑： 比如单人 AA、0 元消费、重名检测、喝醉后极简交互，都是在 TRAE 对话中逐步完善的。
- 纯前端也能做出完整体验： 用 localStorage 做数据持久化、用 Base64 做账单分享、用 html2canvas 做账单图片导出，不依赖后端也能跑通核心流程。