【AI落地应用实战】基于 Trae + React + Typescript + DeepSeek 的物品使用成本计算器 智能协作IDE Builder模式初探索

企业开发 2025-04-09 21:04
0 阅读

最近我在网上刷新闻的时候，看到了一款基于AI的IDE，叫Trae，感觉挺有意思的，就深入研究了一下。作为一个经常折腾代码的人，我对这种AI驱动的开发工具还挺感兴趣的，毕竟谁不想让写代码变得更轻松呢？

一、Trae简介

Trae是字节跳动推出的一款智能协作IDE，简单来说就是一个“会写代码的AI助手”。它不仅能帮你补全代码，还能根据你的需求自动生成代码、修复bug，甚至帮你搭建整个项目！
在这里插入图片描述

  • 智能代码补全：这个功能很多传统插件形式的工具都有，但Trae的补全我用了下，感觉更为“聪明”。它的最新版本引入了Claude-3.7-Sonnet和deepseek-R1，能够根据你写的上下文，给出更精准的建议，甚至能预测你接下来想写啥。
  • AI问答：写代码的时候卡住了？直接问Trae就行。比如“这段代码为啥报错了？”或者“怎么实现一个登录功能？”，它都能给你详细的解答。
  • 图片生成代码：上传一张设计图或者截图，Trae能看懂图片内容，然后生成对应的代码。前端开发者的福音，再也不用对着设计图一点点手写了。
  • Builder模式：这个是跟传统插件形式的工具最大区别的地方，Trae 是一个 AI 原生的集成开发环境（IDE） ，他从底层设计上就融入了 AI 能力，而不是通过插件形式附加到现有 IDE 上，所以他可以实现只用自然语言描述一下你的需求，比如“帮我写一个文件上传的网页”，就能自动生成工程代码、创建文件，甚至帮你把项目结构都搭好。懒人福音啊！

这里可以试试让AI写一个贪吃蛇游戏：

在这里插入图片描述

trae会在左侧创建项目，并HTML界面和JavaScript逻辑。游戏在HTML的<canvas>元素中绘制，通过JavaScript控制蛇的移动、食物的生成、碰撞检测和游戏逻辑

在这里插入图片描述

二、物品使用成本计算器

2.1、需求分析

最近我在想做一个挺有意思的小工具——物品使用成本计算器。这个工具特别适合那些喜欢算账的朋友，尤其是那些长期持有的物品，比如电子产品、汽车、家具、甚至是一些收藏品，想知道用了几年后，每天的持有成本是多少。类似下面这种app：

在这里插入图片描述

这里简单做一个需求分析，我们的物品使用成本计算器要包括以下核心功能：

  • 物品信息录入：用户可以输入物品的基本信息，比如名称、购买价格、购买日期等。

  • 使用时长计算：根据购买日期和当前日期，自动计算物品的使用时长（天、月、年）。

    扫描二维码关注公众号，回复： 17584269 查看本文章

  • 日均成本计算：根据购买价格和使用时长，自动计算日均持有成本。

  • 成本趋势分析：展示物品的日均成本随时间变化的趋势，帮助用户了解物品的“贬值”情况。

  • 多物品管理：支持添加多个物品，用户可以对比不同物品的日均成本。

  • 界面简洁：界面清晰易懂，操作简单。

2.2、Builder模式创建初始项目

打开Builder模式，输入指令：

帮我写一个物品使用成本计算器网页，用户可以输入物品的基本信息，比如名称、购买价格、购买日期等，根据购买日期和当前日期，自动计算物品的使用时长，根据购买价格和使用时长，自动计算日均持有成本。

Trae 很快就给出了响应，它建议我使用 Vite 创建一个新的 React + TypeScript 项目，并提供了具体的命令：npx --yes create-vite\@latest . --template react-ts，使用Vite创建一个新的React+TypeScript项目，这边直接按照他的指令点击运行：

在这里插入图片描述

运行命令后，几秒钟后，项目就创建好了，左侧的文件列表里已经出现了项目的初始结构，然后Trae给出下一步指令：npm install，为项目安装依赖，同样点击运行：

在这里插入图片描述

安装完依赖后，Trae 继续帮我生成了项目的基本结构。我看到了以下几个关键文件：

在这里插入图片描述

几秒钟后，终端显示项目已经成功启动，打开了 http://localhost:5173。页面加载完成后，我看到了一个简洁的表单界面，用户可以输入物品的名称、购买价格和购买日期。虽然界面还很基础，但功能已经初具雏形

在这里插入图片描述

接下来，我让 Trae 帮我解释一下项目的框架结构。Trae 非常贴心地列出了关键文件，并详细说明了每个文件的作用：

在这里插入图片描述

2.3、Bug修复与需求增加

虽然项目成功启动了，但我在测试时发现了一些小问题，还有一些功能需要进一步完善。秉承着“不写一行代码”的理念，我决定继续让 Trae 帮我解决这些问题。于是，我在 Builder 模式中输入了以下指令：

有几个bug和需求需要你更改一下代码：

  1. 购买日期在输入的时候限制一下，不能让用户设置为未来的时间，否则会导致计算bug
  2. 物品列表里面的每一项要支持删除，还要支持编辑物品名称、购买价格和购买日期
  3. 物品列表要支持excel导入，也要支持导出为excel
  4. 为日均成本高于平均值的项目加点警告的背景颜色，为日均成本低于平均值的项目加点使人舒适的背景

在这里插入图片描述

Trae 很快就给出了响应，并开始帮我修改代码。以下是它针对每个问题的具体解决方案，Trae 为日期输入框添加了限制逻辑，然后添加了一个物品列表组件，并实现了删除和编辑功能，最后使用了 xlsx 库来实现 Excel 的导入和导出功能，最后其添加了日均成本的计算逻辑，并根据成本高低为列表项设置了不同的背景颜色：

在这里插入图片描述

全部接受后，再次运行项目，发现所有功能都按预期工作了

在这里插入图片描述

虽然功能都是没问题了，但我在测试时发现样式上还有一些小问题：

  • 导入和导出按钮：大小不一致，而且位置不太合理，应该放到页面底部。
  • 编辑和删除按钮：颜色没有区分，删除按钮应该用红色，编辑按钮可以用蓝色。
  • 操作表头：编辑和删除按钮所在的列没有表头，应该加上“操作”两个字。
  • 按钮样式：编辑和删除按钮有阴影，看起来不太协调，应该去掉阴影，让按钮和底色保持一致。

继续秉承着“不写一行代码”的理念，我决定继续让 Trae 帮我优化样式，不要紧我们再次输入指令让Trae帮我们优化。Trae 很快就给出了响应，并开始帮我优化样式：

在这里插入图片描述

修改完样式后，再次运行项目：

在这里插入图片描述

虽然 Trae 帮我优化了大部分样式，但导入和导出按钮的样式问题依然存在。我仔细看了一下代码，发现 Trae 在 App.tsx 中把导入按钮写成了 <label htmlFor="fileInput" className="import-btn">导入Excel</label>，而导出按钮写的是 <button>。虽然 Trae 一直在调整 CSS 文件，但根本没动这一部分代码，所以样式问题始终没解决。

        <div className="actions">
          <input
            type="file"
            accept=".xlsx,.xls"
            onChange={handleImport}
            style={
     
     {
     
      display: 'none' }}
            id="fileInput"
          />
          <label htmlFor="fileInput" className="import-btn">导入Excel</label>
          <button type="button" onClick={handleExport} className="export-btn">导出Excel</button>
        </div>

哈哈哈哈哈，这大概就是 AI 和人的差距所在吧！不过我还是不想帮他修改，再提醒 Trae 一下，让它继续帮我改。输入指令，可以看到，Trae 很快理解了问题，并且将导入按钮改为了 <button>，并通过隐藏的 <input> 元素实现文件上传功能

在这里插入图片描述

最后，大功告成，让我们来看看效果吧：

基本功能：

在这里插入图片描述

导入和导出为Excel：

在这里插入图片描述

接下来我会继续完善这个工具，包括引入数据库，用Trace同样写个后台服务，让其具有数据存储的功能，然后为前端加入数据报表、数据分析的功能，等完成后再来和大家分享最终的效果~

猜你喜欢

目录

热门文章