【标签】生活娱乐
【标题】生活娱乐赛道 · 晴雨录
【正文】
1. Demo 简介
是什么： 晴雨录是一个纯前端 Web 应用（单文件 HTML，双击即用，无需联网），用天气比喻心情，帮助用户记录和释放情绪。
面向谁： 面临工作压力、感情困扰、考试焦虑等情绪困扰的年轻人——那些需要一个情绪出口、但又不想面对冷冰冰记录工具的人。
*主要功能：
① 情绪缓释动画（核心记忆点） 保存日记后不是冷冰冰的「记录完成」，而是一段情绪释放仪式：
- 雨天（难过）：雨滴落下 → 文字被冲刷模糊 → 雨停 → 彩虹浮现 → 温暖寄语
- 晴天（开心）：光粒子绽放 → 文字上浮消散 → 金色光晕 → 寄语
- 雾天（平静）：柔云漂移 → 文字融入雾气 → 渐清 → 寄语
*
② 天气隐喻记录 用 8 种天气状态（晴/多云/雨/暴风雨/龙卷风/彩虹/雾/希望）来代表心情，降低记录门槛。选完天气后可以写几句话，也可以直接「放飞今天的心情」——不强制写字。
③ 情绪趋势与本地洞察 日历视图一个月的心情天气一目了然，趋势分析展示最近 7 天情绪走势，AI 洞察基于历史数据本地智能分析（关键词情绪检测 + 时间感知回应），无需任何 API，离线可用。
2. Demo 创作思路
灵感来源：
当代年轻人普遍面临巨大压力——工作焦虑、感情破裂、考试失利、社交疲惫。这些情绪需要一个出口，但大多数人不会主动记录心情。因为「记录」本身是一种负担——打开备忘录，面对空白页面，不知道该写什么，最后关掉。
我想到：如果记录心情不是「写作业」，而是一种「释放」呢？用户选一个天气代表心情，写下想说的话（甚至可以不写），然后点击「放飞」——文字被雨水冲走、被阳光收进瓶子、被雾气温柔包裹。情绪被接住的那一刻，记录的负担就变成了治愈的奖赏。
想解决的问题：
用户真实存在的痛点：情绪无处安放，记录门槛太高。
- 备忘录太冷冰冰，写完之后什么都不会发生
- 心理咨询 App 太重，不是每次难过都需要专业介入
- 社交媒体不敢发，怕被评判
晴雨录的定位：不是记录工具，是情绪的出口。备忘录记录「发生了什么」，晴雨录给你「情绪往哪走」。
为什么做这个方向：
- 情感共鸣 > 功能堆砌：生活娱乐赛道，打动人心比技术酷炫更重要
- 低门槛 + 高反馈：选一个天气就够了（5秒），但缓释动画给你 30 秒的治愈体验
- 离线可用 + 零成本：不依赖任何后端 API，单个 HTML 文件双击即用，评委体验零摩擦
3. Demo 体验地址
交互式可体验的 HTML 格式文件（Zip 打包上传）。
-
文件名：`
qingyulu-standalone.html (959.8 KB) -
文件大小：约 960KB
-
使用方式：解压后双击用浏览器打开（推荐 Chrome / Edge / Safari）
-
无需联网，所有功能本地可用
-
兼容 PC 和手机浏览器
4. TRAE 实践过程
整个项目全程使用 TRAE IDE 的 AI 对话能力完成，从架构设计到代码实现、从 bug 修复到性能优化。技术栈：React 19 + TypeScript + Vite + Tailwind CSS v4 + Canvas 2D + esbuild。
步骤一：项目搭建与基础功能开发
通过 TRAE AI 对话完成项目初始化，搭建了天气选择 → 文字记录 → 数据存储的基础流程，开发了首页、日历、趋势、洞察、设置五个页面。AI 辅助完成了组件架构设计、路由配置、localStorage 数据持久化方案。
步骤二：液态玻璃效果（踩坑与修复）
使用 TRAE 的 liquid-glass Skill 了解 iOS 26 液态玻璃效果实现方案，最初采用 liquid-glass-react 库（WebGL），但在测试中发现部分设备直接崩溃白屏。
通过 TRAE AI 分析错误日志后，决定移除 WebGL 方案，改用纯 CSS backdrop-filter: saturate(180%) blur(24px) 实现毛玻璃效果，配合多层径向渐变模拟玻璃折射光晕。稳定性远优于 WebGL，且文件体积更小。
踩坑心得： 比赛作品的评审环境不可控，纯 CSS/Canvas 方案比 WebGL/3D 库更安全，视觉效果不能以稳定性为代价。
步骤三：standalone HTML 打包（核心技术难点）
评委需要双击打开 HTML 即可体验，但遇到两个问题：
- Vite 默认输出 ES Module 格式，
file://协议下浏览器报错Cannot use import statement outside a module - BrowserRouter 依赖 History API，
file://协议下路由匹配失败（404）
通过 TRAE AI 辅助编写了 scripts/standalone.mjs 构建脚本：用 esbuild 将 React 应用打包为 IIFE 格式，将 BrowserRouter 改为 HashRouter，开启 minify 压缩，体积从 1.9MB 降至 960KB。
踩坑心得： 部署形态决定技术选型，如果目标是「双击即用」的 standalone HTML，从一开始就该用 HashRouter + IIFE，避免后期返工。
步骤四：情绪缓释动画开发（核心记忆点）
这是产品的灵魂功能。通过 TRAE AI 对话设计了三种天气的缓释动画：用 Canvas 2D 绘制雨滴、光粒子、雾气，文字渐变模糊 + 消散效果，彩虹/光晕/渐清的收尾动画，并根据天气 + 文字关键词 + 时间段智能生成温暖寄语。
关键代码由 TRAE AI 生成并迭代优化，包括 Canvas 粒子系统、渐变动画、关键词检测逻辑。
*
步骤五：性能优化
通过 TRAE AI 辅助完成多项性能优化：
- 打字机动画：
setInterval(20ms)→requestAnimationFrame+ 进度分配，解决低端设备卡顿 - 数字滚动：
useRef直写 DOM →useState+ rAF 触发重渲染 - 波纹动画：卸载时精准清理，避免内存泄漏
- 存储层：添加内存缓存，避免重复
JSON.parselocalStorage - 错误处理：全局 ErrorBoundary +
safeParse容错 + 隐私模式降级
踩坑心得： 动画性能优化的核心是「减少不必要的重渲染」，requestAnimationFrame + 进度分配比逐字 setInterval 高效得多。
步骤六：UI 视觉升级
通过 TRAE AI 对话完成视觉重构：封面鼠标交互粒子（参考 threejs.org，纯 Canvas 2D 实现，粒子跟随鼠标流动 + 动态连线 + 视差效果）、彩色渐变标题、光晕卡片（CSS mask 实现渐变边框）、深邃渐变背景 + 多层光晕 + 噪点纹理、中文字体优化。
TRAE 能力使用总结
| TRAE 能力 | 使用场景 |
|---|---|
| AI 对话编程 | 全程架构设计、组件开发、bug 修复、性能优化 |
| Skill 系统 | liquid-glass skill 提供液态玻璃技术参考 |
| 代码搜索 | 快速定位问题代码，辅助重构 |
| 构建工具集成 | Vite + esbuild 打包优化 |
开发心得
- 核心记忆点比功能数量更重要：一个让人记住的缓释动画，胜过十个普通功能
- 稳定性 > 酷炫：评委的设备不可控，宁可效果稍逊也要保证不崩溃
- 容错设计贯穿始终：从 localStorage 到 ErrorBoundary，每一层都要有降级方案
- TRAE AI 编程效率极高：从设计到实现、从踩坑到修复，全程 AI 辅助，大幅缩短开发周期
5. Session ID
以下为本次开发过程中使用 TRAE IDE 的会话记录，证明作品全程由 TRAE 完成：
| 序号 | Session ID | 时间 |
|—|—|—|
| 1 | 1114232978940275:751b653ac04faf3199f2da10f2094f36_6a3ce28861969fc0d69552b1.6a424554bb7a7788040cf1ff.6a424554bb7a7788040cf1fd:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 18:13:40) | 2026/6/29 |
| 2 | 1114232978940275:f8e89b0646feab9c941416b43278f0ff_6a3ce28861969fc0d69552b1.6a4645aea8fc621894e157fd.6a4645aea8fc621894e157fb:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/2 19:04:14) | 2026/7/2 |
| 3 | 1114232978940275:6ce414567a680960cdbb309f27f7b583_6a3ce28861969fc0d69552b1.6a4eefbd366a9e1eba1e9c6f.6a4eefbd366a9e1eba1e9c6d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 08:47:57) | 2026/7/9 |
本作品全程使用 TRAE IDE 开发完成。
，不过用天气比喻心情这个点子好，雨停出彩虹的释放动画看着挺治愈