1. 摘要
用 TRAE SOLO 从零开发了一款名为「心隅」的治愈系记事本 App，集成了笔记管理、情绪识别「充气包」功能、以及 AI 治愈助手。全程约 30 分钟完成核心开发，技术栈为 React + Vite + PWA，支持离线使用和安装到手机桌面。
2. 背景
我是一名大学生，平时有随手记笔记的习惯，但市面上的记事本 App 要么功能臃肿，要么界面冰冷缺乏温度。我想要一款简洁、治愈、有温度的记事本，同时能帮我关注自己的情绪状态。尝试用 SOLO 来提效。
3. 实践过程
3.1 任务拆解
我把整个 App 拆解为 5 个阶段，逐步交付：
阶段 内容 预计耗时
项目初始化 React + Vite 脚手架 + PWA 配置 3 分钟
数据层 localStorage 持久化 + 笔记 CRUD 3 分钟
UI 主题与组件 暖色系设计系统 + 首页/编辑器/搜索 10 分钟
特色功能 充气包情绪识别 + AI 助手聊天 10 分钟
构建验证 生产构建 + 预览测试 2 分钟
3.2 技术选型
• React 18 + Vite：轻量级前端框架，HMR 热更新快
• React Router：SPA 路由管理
• PWA (vite-plugin-pwa + Workbox)：离线可用，可安装到手机桌面
• localStorage：本地数据持久化，无需后端
• SiliconFlow API：AI 助手的大模型接口（OpenAI 兼容协议）
3.3 关键实现过程
① 项目初始化与 PWA 配置
通过一条命令创建项目，安装依赖后配置 Vite PWA 插件，生成 manifest 和 Service Worker，实现离线缓存。
② 暖色系设计系统
用 CSS 变量定义了完整的暖色主题色板：
--color-primary: #E8A87C; /* 珊瑩橙 - 主色调 */ --color-bg: #FFF9F5; /* 暖白 - 背景色 */ --color-text-primary: #4A3728; /* 深棕 - 文字色 */
整体风格追求柔和、圆润、留白充足，配合圆角卡片和轻柔阴影，营造治愈感。
③ 充气包——情绪管理功能
这是最有特色的部分。核心思路：
• 情绪词典：内置 200+ 中文情绪关键词，覆盖 8 种情绪类型（难过、生气、焦虑、开心、感动、孤独、笮惫、迷茫）
• 自动识别：笔记保存时自动分析文本，提取情绪关键词和上下文摘要
• 充气包可视化：SVG 气球随饱满度动态缩放，即将充满时变红并弹跳提醒
• 情绪释放：点击气泡戳破消失（带缩放动画），或一键释放全部
④ AI 治愈助手「小隅」
• 对接 SiliconFlow API（OpenAI 兼容协议），支持 SSE 流式输出
• 系统提示词精心设计 AI 人设：温暖、有同理心、先共情再引导
• 打字机效果逐字显示，支持停止生成
• API Key 通过设置面板配置，存储在 localStorage
⑤ 底部导航栏
三个 Tab（笔记 / 充气包 / AI 助手），编辑器页面自动隐藏导航栏，保持沉浸式编辑体验。
3.4 踩过的坑
1. 笔记卡片不可见：CSS 中 opacity: 0 配合动画 class 使用，在某些浏览器上动画 forwards 填充模式未正确生效，导致卡片保持透明。解决方案是移除 opacity: 0 初始值，让卡片默认可见。
2. 自动保存重复创建笔记：新笔记编辑时，每次自动保存触发都会调用 createNote，导致产生多条重复记录。通过引入 currentId 状态解决——首次保存创建后转为更新模式。
3. PWA 插件版本兼容：Vite 8 与 vite-plugin-pwa 存在 peer dependency 冲突，需要加 --legacy-peer-deps 安装。
4. 成果展示
首页 — 笔记列表
• 暖色渐变 Header + 品牌标识
• 搜索栏 + 分类筛选（全部/工作/灵感/日记/其他）
• 笔记卡片列表，显示标题、分类标签、内容预览、相对时间
• 底部三 Tab 导航栏
充气包 — 情绪管理
• 大气球动态展示饱满度（空→半满→即将充满）
• 进度条 + 文字状态提示
• 情绪气泡列表，支持逐个戳破或一键释放
• 戳破时有缩放消失动画
AI 助手 — 治愈聊天
• 对话气泡界面，AI 回复带打字机流式效果
• 设置面板可配置 API 地址、Key、模型
• 聊天历史自动保存
技术亮点
• PWA 离线支持：Service Worker 缓存所有静态资源，断网也能正常使用
• 暖色治愈主题：CSS 变量驱动，一键换肤
• 本地情绪分析：纯前端实现，无需外部 API，200+ 关键词词典
• AI 流式输出：SSE 打字机效果，支持中断
• 移动端适配：安全区域适配、触摸优化、最大宽度 480px 居中布局
5. 效果与总结
提效数据
对比项 传统开发 使用 SOLO
项目搭建 + 依赖配置 1-2 小时 3 分钟
UI 组件开发 4-6 小时 10 分钟
特色功能（情绪+AI） 1-2 天 10 分钟
调试修 Bug 2-3 小时 5 分钟
总计 2-3 天 约 30 分钟
SOLO 在流程中的角色
SOLO 在整个开发过程中承担了架构师 + 全栈工程师的角色：
• 任务拆解：自动将模糊需求分解为可执行的子任务
• 代码生成：根据需求描述直接生成高质量的 React 组件、CSS 样式、工具函数
• 问题诊断：笔记卡片不可见的 Bug，SOLO 通过分析 CSS 动画链路快速定位根因
• 迭代优化：充气包自动保存重复创建的问题，SOLO 通过引入状态管理优雅解决
可复用的方法
1. 暖色系设计系统：CSS 变量方案可直接复用到其他治愈系项目中
2. 中文情绪分析引擎：关键词词典 + 权重方案，可独立抽取为 npm 包
3. PWA 离线方案：vite-plugin-pwa + Workbox 的配置模板
4. AI 流式聊天模板：SSE 解析 + 打字机效果，可适配任何 OpenAI 兼容 API
**一句话总结：**用 SOLO 30 分钟完成了一款集笔记管理、情绪识别、AI 助手于一体的治愈系App，效率提升约 10 倍，且代码质量远超预期。
