# 【社会服务赛道】+ 情绪急救箱
**附加标签：** 社会公益
---
## 0. 先和大家打个招呼吧 👋
**我是谁：** 一名五年级的小学生，今年 11 岁。
**我是怎么用 TRAE 把 Demo 做出来的：** 说实话，我之前只会一点点 HTML 和 CSS，JavaScript 基本不太懂。这个"情绪急救箱"从头到尾都是我跟 TRAE "聊天"做出来的。我的做法特别简单：脑子里想好一个功能，比如"我想让用户点击一个情绪按钮，然后出来一句安慰的话"，然后我把这句话原封不动地告诉 TRAE，它就能帮我写出代码来。
最让我惊讶的有两个瞬间：
- 第一个瞬间是，我跟它说"我想要一个呼吸练习的动画，圆圈慢慢变大变小"，结果 TRAE 不仅写好了代码，还配上了吸气和呼气的文字提示，效果特别治愈。那一刻我觉得："原来做网页可以这么简单！"
- 第二个瞬间是，我在做情绪追踪图表的时候，完全不知道怎么用数据画柱状图。TRAE 一步一步教我，先用 localStorage 存数据，然后再用 CSS 的 height 来做动画柱子，最后还帮我配了颜色。这个坎我本来以为肯定搞不定，结果在 TRAE 的帮助下居然做出来了！
我觉得 TRAE 就像一个特别耐心的编程老师，你不需要会很多专业术语，只要用大白话描述你想要什么，它就能帮你实现。这对我来说真的很神奇 ✨
---
## 1. Demo 简介
### 是什么
**情绪急救箱**是一个 AI 驱动的随身情绪管理网页应用，打开浏览器就能用，不需要下载安装。它就像你口袋里的一个情绪小助手，当你感到不开心、焦虑、生气或者压力大的时候，随时打开它，就能获得温暖的陪伴和实用的调节方法。
### 面向谁
核心用户是**学生群体和年轻上班族**：
- 学业压力大、考试焦虑的中学生和小学生
- 刚进入职场、面临工作压力的年轻人
- 情绪波动频繁、需要自我调节的任何人
### 主要功能
**功能一：AI 智能情绪分析**
在首页的输入框里，你可以像跟朋友聊天一样说出自己的心情，比如"今天考试考砸了，特别难过"，AI 会自动分析你的情绪类型（难过、焦虑、生气、孤独、疲惫、迷茫、开心），然后生成一份专属的"情绪处方"。
**功能二：个性化情绪处方**
根据不同的情绪状态，系统会为你提供：
- 一句治愈系名言（根据情绪强度智能匹配）
- 3 个可执行的行动建议（带打卡功能）
- 一首适合当前情绪的音乐推荐
- 情绪强度评估和触发因素分析
**功能三：5 分钟急救工具包**
包含呼吸练习（4-4-6 呼吸法：吸气 4 秒、屏住 4 秒、呼气 6 秒，配有可视化动画引导）和快速情绪记录功能，让你在短时间内平复心情。
**功能四：情绪日记与追踪**
你可以记录每天的情绪状态、强度和触发因素，系统会自动生成情绪统计图表和时间线，帮助你了解自己的情绪规律。
---
## 2. Demo 创作思路
### 灵感来源
做这个产品的灵感来自我自己和身边同学的真实经历。作为一名小学生，我经常会有各种各样的情绪：考试前的焦虑、和朋友闹矛盾的难过、作业太多做不完的烦躁……有时候这些情绪来得突然，却不知道该怎么处理。
有一次我心情不好，想找人聊聊，但大家都在忙。我就在想：如果有一个随时在线、不会嫌我烦的"情绪急救箱"该多好？它可以安慰我、给我建议、陪我做呼吸练习，就像一位 24 小时不打烊的心理咨询师。
### 想解决的问题
**用户真实存在的痛点：**
1. **情绪来了不知道怎么办** —— 很多同龄人在情绪低落时，不知道该做什么才能让自己好起来，只能一个人憋着。
2. **没有合适的倾诉对象** —— 不是每个人都愿意或方便跟父母、老师、朋友倾诉心事，有时候只是需要一个安静的陪伴者。
3. **缺乏情绪管理的工具和记录** —— 大多数人对自己的情绪变化没有意识，也不知道自己的情绪有没有变好或变差的趋势。
### 为什么做这个方向
我选择做情绪管理方向，是因为我觉得**心理健康和身体健康一样重要**。现在很多同学都有学业压力，但很少有人教我们应该怎么管理自己的情绪。市面上虽然有一些心理健康 App，但大多数功能复杂、需要注册登录，而且不适合我们小学生使用。
我想做一个**简单、温暖、零门槛**的情绪工具，打开网页就能用，不需要注册，数据都存在本地（保护隐私），界面设计得像个温柔的小盒子，让人一看就觉得安心。
---
## 3. Demo 体验地址
**交互式可体验的 HTML 格式文件（Zip 打包）：
情绪急救箱_Demo.zip (23.5 KB)
请将附件中的 `情绪急救箱_Demo.zip` 下载后解压，双击其中的 HTML 文件即可在浏览器中体验完整功能。
> 注：本 Demo 为纯前端实现，所有数据存储在浏览器本地（localStorage），无需联网即可使用，充分保护用户隐私。
---
## 4. TRAE 实践过程
### 开发完整流程
**第一阶段：产品构思与框架搭建（7 月 7 日）**
我跟 TRAE 说："我想做一个情绪急救箱的网页，要有紫色渐变背景，顶部有导航栏，中间可以选情绪，底部有一些功能卡片。" TRAE 帮我搭建了整个页面的 HTML 结构和 CSS 样式，包括响应式布局和动画效果。
**第二阶段：核心功能开发（7 月 7 日 - 7 月 13 日）**
在这个阶段，我陆续跟 TRAE 实现了以下功能：
- **情绪识别功能**：我描述说"用户输入一段话，程序要能识别出是难过、焦虑还是生气"，TRAE 帮我写了一个关键词匹配算法，根据文本中的情绪词汇来智能判断情绪类型。
- **情绪处方页面**：我提出"点击情绪后，要出现一个像医生处方一样的页面，有名言、行动建议、音乐推荐"，TRAE 不仅实现了页面布局，还设计了打卡完成功能。
- **呼吸练习功能**：我跟 TRAE 描述"想要一个圆圈慢慢变大变小的呼吸动画"，TRAE 用 CSS 动画实现了 4-4-6 呼吸法，并配上了吸气、屏住、呼气的文字提示。
- **情绪日记与追踪**：TRAE 帮我实现了 localStorage 数据存储、情绪记录表单、柱状图统计和时间线展示。
**第三阶段：界面优化与细节打磨（7 月 13 日）**
我跟 TRAE 一起优化了界面的颜色搭配、交互动画、卡片 hover 效果，还增加了分享卡片功能，让用户可以把自己的情绪处方生成一张漂亮的卡片。
### 开发关键步骤截图
（以下截图已保存在附件 DOCX 文档中）
**截图 1：首页与 AI 情绪分析界面**
展示了"情绪急救箱"的首页设计，包含 AI 聊天输入框和 7 种情绪状态的快速选择卡片。
Session ID：`860245236660379:68de01c8095663b6d6a283a741bca8f0_6a4ce5b7c3fffe6d2f3b9f08.6a4ce5b96e99e1aeb35bdfbf.6a4ce5b7c3fffe6d2f3b9f09`
时间：2026/7/7 19:41:24
**截图 2：情绪处方页面**
展示了点击情绪后生成的个性化处方，包含情绪强度评估、触发因素标签、治愈名言、行动建议和音乐推荐。
Session ID：`860245236660379:8ce220867a3109cda56190cc6f78a94d_6a4ce5b7c3fffe6d2f3b9f08.6a4ce6586e99e1aeb35bdff8.6a4ce65873dc8b736bea9195`
时间：2026/7/7 19:43:43
**截图 3：呼吸练习功能**
展示了呼吸练习页面的可视化引导动画，圆圈随呼吸节奏变大变小，配有进度条和文字提示。
Session ID：`860245236660379:e9f2444445f43756fd5e080fe0fef58b_6a4ce5b7c3fffe6d2f3b9f08.6a546fe229e798ed02220d21.6a546fe1186e3958988c5890`
时间：2026/7/13 12:58:57
**截图 4：情绪日记页面**
展示了情绪日记的记录功能，包括情绪选择、强度滑块、触发因素标签和文字输入区。
Session ID：`860245236660379:b9b8d7b3862e2699da8e8d9571a91f57_6a4ce5b7c3fffe6d2f3b9f08.6a5471a929e798ed02220d71.6a5471a95f61fa05d71187c3`
时间：2026/7/13 13:08:08
**截图 5：情绪追踪统计**
展示了情绪追踪页面的柱状图统计和情绪时间线，帮助用户了解自己的情绪变化趋势。
Session ID：`860245236660379:723d274108eba9d615a3e61704987f5d_6a4ce5b7c3fffe6d2f3b9f08.6a54760929e798ed02220d92.6a547609f6d4b86f4e3b5189`
时间：2026/7/13 13:27:22
### 关键任务对话的 Session ID（证明作品由 TRAE 开发完成）
| 序号 | Session ID | 开发内容 | 时间 |
|------|-----------|---------|------|
| 1 | `860245236660379:68de01c8095663b6d6a283a741bca8f0_6a4ce5b7c3fffe6d2f3b9f08.6a4ce5b96e99e1aeb35bdfbf.6a4ce5b7c3fffe6d2f3b9f09` | 首页框架与 AI 情绪分析功能 | 2026/7/7 19:41:24 |
| 2 | `860245236660379:8ce220867a3109cda56190cc6f78a94d_6a4ce5b7c3fffe6d2f3b9f08.6a4ce6586e99e1aeb35bdff8.6a4ce65873dc8b736bea9195` | 情绪处方页面开发 | 2026/7/7 19:43:43 |
| 3 | `860245236660379:e9f2444445f43756fd5e080fe0fef58b_6a4ce5b7c3fffe6d2f3b9f08.6a546fe229e798ed02220d21.6a546fe1186e3958988c5890` | 呼吸练习功能实现 | 2026/7/13 12:58:57 |
| 4 | `860245236660379:b9b8d7b3862e2699da8e8d9571a91f57_6a4ce5b7c3fffe6d2f3b9f08.6a5471a929e798ed02220d71.6a5471a95f61fa05d71187c3` | 情绪日记功能开发 | 2026/7/13 13:08:08 |
| 5 | `860245236660379:723d274108eba9d615a3e61704987f5d_6a4ce5b7c3fffe6d2f3b9f08.6a54760929e798ed02220d92.6a547609f6d4b86f4e3b5189` | 情绪追踪与统计图表 | 2026/7/13 13:27:22 |
---
## 5. 对应的报名审核通过的帖子链接
https://forum.trae.cn/t/topic/116447
---
## 附：技术实现说明
**技术栈：** 纯前端实现（HTML5 + CSS3 + Vanilla JavaScript），无需后端服务器
**数据存储：** 使用浏览器 localStorage 本地存储，不上传任何数据到云端，充分保护用户隐私
**核心特性：**
- 响应式设计，适配手机和电脑
- 7 种情绪状态的智能识别与匹配
- 本地数据持久化与可视化统计
- 纯前端离线可用
---
*感谢 TRAE 让这个作品从零变成了现实。作为一个五年级的小学生，我深深感受到 AI 编程工具的力量 —— 它让有想法的人不再被技术门槛挡住，只要敢想、敢说，就能做出自己的作品。*