TRAE2.0SOLO出道：情绪碎记，一个可以记录下你时时刻刻的情绪的App

帅夫帅夫
171 阅读6分钟

TRAE2.0SOLO出道

前言

在前段时间，我恰好抢到了Solo的邀请码。最近也一直在使用它，不断和它配合期待做出一个让我满意的作品。在拿到Solo邀请码的那两天，我放手让它全自动生成了一两个项目。当时感受就是Solo生成一个模板的速度非常快。但是，这样还是有弊端的。纯放手让AI去干活的话，我的思路很难跟上它，完全自己不知道从哪下手，debug这些的就更不用说了，项目也会越来越乱。

这一次我会全程和它一起coding协作，让它承担辅助驾驶的职责。期待共同创作出一个好的产品。

由于本次Solo头号玩家活动才一个礼拜期限，时间有点紧，我不知道能不能完全做出我预期的样子(写这篇文章的时候已经8月2号了)

项目介绍

项目名称：情绪碎记

项目地址：Emotion

项目风格：蓝色为主色调(原先打算像素风格的，但是生成的效果有点惨不忍睹，所以就改回来了)

技术栈：React19 + JavaScript +Less + Zustand等

设计稿：

image.png 项目结构：

image.png

项目亮点与难点

  • 项目采用JWT机制+路由守卫来确保项目账号的安全性，后续可能会加入双Token刷新机制
  • 在首页天气卡片，通过调用高德地图的天气服务获取查询天气的数据
  • 日记展示区域用两栏瀑布流展示，根据日记内容的大小生成恰当的随机高度卡片
  • 日记展示区域支持无限滚动，并且使用Intersection Observer API 懒加载对应的卡片
  • 利用浏览器原生的 BroadcastChannel API，实现跨标签页发布日记
  • 在治愈聊天页面接入了Coze搭建的智能体，更好的让用户的情绪得到治愈，后续可能还会在智能体里面加入工作流功能
  • 在我的页面，点击头像有AI生成头像的功能。根据用户的昵称和个性签名发送豆包，等它生成结果后返回渲染在页面上
  • 项目数据统一抽离由store管理，使用缓存技术减少了不必要的刷新
  • 在网络控制面板，发现文件基本上都是一次性请求多次。后续考虑按需请求对应的文件

项目部分功能讲解

登录注册

image.png

image.png 首先先从登录注册页面讲起吧，为了让项目的安全性有保证，我采用了JWT(JSON Web Token)认证机制和路由守卫，最终用户的身份信息还是由Zustand的store统一管理。

JWT机制还是相当比较简单的。由于一开始http是无状态的，所以后来就有了token机制，让服务器根据token去对应的数据库查询用户的身份。但是，光靠toke还是不够的，所以后面就有了JWT机制。JWY由三部分构成：头部(header)+载荷(payload)+签名(signature)

  • 头部：声明类型和加密算法
  • 载荷：存放有效信息
  • 签名：签名信息

其实还可以加上双Token无感刷新机制，可以实现记住我的效果。由于时间原因，就先暂时不加上去了。

接着就是路由守卫会根据有没有认证信息来对用户进行拦截，不登陆直接通过路由跳转是无法通过的。

首页

image.png 原先想要在首页顶上放置一张天气卡片，通过天气有关的MCP工具来获取用户所在地的当日时间和天气。

目前在这个天气卡片处使用了高低地图的天气服务，通过用户在输入框填下城市名称发送请求，然后把请求回来的数据渲染到页面上面。

接下来就是最主要的部分了，一个瀑布流映入用户眼前。用户发布的情绪日记首先会成为一个个卡片，然后就被插进瀑布流之中，还对未显示的部分用骨架屏进行懒加载。

治愈聊天

在治愈聊天页面，我用coze搭建了一个聊天的智能体来和用户对话。光有对话功能是有点不足的，后续我可能会在这个智能体里面加入工作流部分。

用户在输入框中写下要输入的信息，然后通过

image.png

我的

在我的页面里面，最核心的就是点击头像会出现弹窗。用户可以上传自己的头像，也可以让AI自动生成头像。当用户点击AI生成头像的时候，AI是根据用户的昵称和个性签名来推测用户最可能喜欢什么风格的头像来生成。

这个页面其余的我倒是没有设计特别多。用网格布局实现了一个九宫格，这里面有些是可以点击的。点击设置，可以修改用户的信息。点击添加会跳转到发布页面。点击聊天会跳转到治愈聊天页面。点击退出登录，用户存储的token就直接删除了，强制下线了。

image.png

发布

发布页面有点平平无奇，就只有标题部分、文本区域还有一个上传图片的功能。为了让这个项目更有技术亮点，我可能会让发布页面新开一个标签页，做到跨标签页通信这个技术难点。

image.png

结语

以上内容就是我设计这个情绪碎记的大部分思路了，还有些东西可能没这么多时间写进这个文章里面，现在已经5号了。我觉得时间还是有点紧，有些功能不能在规定时间内做完，只留后面来优化升级了。我是8月1号下午开始从零到一的搭建，估计会要弄到5号这个项目才能完工。

总结一下来这段时间使用Solo的体验，总体上来说，我觉得Solo还是挺厉害的，功能也还强大。我觉得比CodeBuddy(我也有它邀请码，使用过)强一些。

但是，Solo还是有些让我不满意的地方的，它的记忆力可能有点问题。在这个项目中，我明确跟它说明了好多规则，过了几次它就忘记了。我觉得它有自己的一套固定模板(猜测)。

之前我明确说明了叫它给我创建一个React+JS的项目，不要用TS。可它有时候不怎么听，那回它直接用TS创建的，后面发觉到我说了不要用TS，然后回过头来把一个个有关TS文件删除转成有关JS文件。

另外，感觉它处理Bug的能力也有点弱。在这个项目开发的过程中，还是经常碰到Bug的。每次碰到了Bug，我把错误信息和实际效果图还有指明了我想改的地方一起发给它。它经常解决不好，要问它很多次才能改好。

当时叫它改天气卡片的布局的时候，叫了它很多遍才真的改成我预期的样子。

大致体验应该也就这样了吧，还是希望Solo以后能够越来越强的。

avatar
文章
阅读
粉丝