本文描述了如何使用Trae 编辑器从零开始实现一个3D、可交互、多数据展示、多仓多库区的库存可视化应用。 包含如何进行提示，以及对让 AI 对结果进行修正和优化。

年前字节发布了编辑器的Mac版本，2月17日又同步发布了Windows版本。作为要和Cursor、Windsurf比肩的国产AI编辑器，它到底好不好用？不好说，毕竟工具都需要迭代优化，充满期待的测试了下Trae AI的自动化编程能力，结果却让人异常惊喜。 你不需要写一句代码，仅凭提示词对话就能实现一个可交互、多维度的 3D 多仓库可视化大屏。

第一个场景

先从最简单的开始，我们创建一个空目录visual-warehouse，然后在Trae中打开，右侧对话窗口Chat切换到Builder，让AI完整的从零开始实现项目。

提示词

帮我使用 Threejs 编写一个仓库可视化的页面。库位有 10排10列4层，库位用半透明的正方体表示，库位的不同颜色表示放置不同的商品和数量。

Trae AI会给出整体思路，然后创建项目基础框架、安装依赖、创建额外的文件，最后会总结主要完成了哪些工作。当然在过程中提示你授权【运行】通过终端创建目录文件、安装依赖。

基础通用名词解释

运行：创建目录文件/安装依赖，都需要你点击运行后执行

预览：点击预览可以在编辑器内直接预览实时效果

全部接受：接受代码变动，保存当前版本最新代码

我们可以看到这个版本的预览效果：自动配色基本协调，也支持通过鼠标进行拖动、缩放、旋转。

简易地面

我们增加一个地面，并且优化一下展示。

提示词

增加一个地面，库位每两排一组，组与组之间留出更多的间隔作为巷道

然后Trae AI重写了布局页面。

颜色优化、增加交互

接下来我们再增加几个功能：

• 排与排之间直接增加距离
• 颜色统一使用从绿到红进行填充，标识库位放东西的多少（绿色标识空、红色标识满）
• 鼠标放到库位上，当前库位高亮并使用tooltip显示库位的容量

提示词

排与排之间的距离留一个库位大小，每个储位都随机颜色（绿色到红色的过度），绿色表示空库位，红色表示库位放满了。 鼠标放到库位上，高亮这个库位并使用 tooltip 显示库位的容量。

颜色更换成功（需求演示，色值具体以大家喜欢或者设计稿为准）。而且鼠标放到库位上，不仅高亮了方块， Tooltip也显示库位的容量。

背景和地面优化

我们可以看出来红绿色和黑色地面太不搭了，把地面简单优化一下。

提示词

页面背景使用深蓝色渐变。并优化地面，选取一个更适合作为地面的颜色和材质，需要和整体颜色更协调且有辨识度。而且现在Tooltip的文本显示太小了，需要优化一下。

场景背景颜色进行了优化，地面加了反射、阴影，但是地面太黑了，而且Tooltip文本依然存在一些显示的小问题，我们需要通过提示词微调一下。

优化一下场景光照和地面材质，使整个场景看起来更明亮自然

Tooltip的宽度是不是不够，文本内容都竖排展示了，而且鼠标悬停库位时会有事件穿透影响，现在悬停外层库位时会出现多个Tooltip。这些都需要再优化一下。

预览一下当前效果：

多库区隔离带和过道间隔

提示词

现在每个仓库只有一个区域，优化一下：生成仓库库位数据的时候，随机生成两个或者多个库区，每个库区有自己的排列层。库位的位置每两列中间多空出来一个过道，库区请用放光的隔离带围起来，并且两个库区之间需要有 6 个位置的间隔。

发现实际效果有些出入，每排每列都会有过道间隔，我们继续优化一下。

每个库区的的库位布局中，过道间隔需要优化，现在是每排每列都有过道间隔，实际应该是每两排或每两列后有一个过道间隔，以此循环。

预览一下效果：

优化Tooltip展示内容

提示词

丰富一下库存数据，并且在 Tooltip 中展示出来：

每个库位展示以下库存数据：

• 商品名称
• 规格
• 数量
• 重量
• 金额
• 体积
• 库容占比
• 库存天数

丰富库存展示数据，这个效果还可以，我们直接看效果。

仓库统计面板

提示词

在页面右侧悬浮生成可视化图表，包含3个面板，垂直排列布局。

第1个面板：出入库统计，包含今日已出库、今日库存、今日已入库、剩余库位数4项数据

第2个面板：使用折线图展示实时仓储剩余情况

第3个面板：使用折线图展示今日已出库、今日已入库2项数据

我们可以看到Trae AI使用单独的组件实现了右侧数据统计面板，但是引入报错了，反馈让它自己检查一下。

现在出现报错啦 Uncaught ReferenceError: StatsPanel is not defined

预览一下效果，有点简陋，但是该有的都有：

丰富统计面板

提示词

在页面左侧悬浮生成3个可视化统计图表，垂直排列布局。

第1个面板的标题：仓库使用情况。使用环形饼图展示仓库库位占用百分比，同时在环形图右侧展示三项数据：库位总数、使用库位数、剩余库位数

第2个面板的标题：仓区状态。使用多数值柱状图展示最近一个月，每日不同库区的库位占用数量，数据过多时可用鼠标拖动展示

第3个面板的标题：仓库状态。使用柱状图展示最近一个月，每日仓库的库位占用数量，数据过多时可用鼠标拖动展示

把右侧的统计面板拆分为三部分，对应展示标题：出入库统计、实时仓储剩余情况、今日出入库统计。优化左右两侧的可视化图表样式，尽可能酷炫一些，也可以对页面背景、地面进行调整

提示词太长的时候，效果就可能会比较随机，因此我们可能需要根据实际情况多调整几次。

多仓库切换和控制面板

接下来假设我们有多个仓库，增加一个仓库切换功能。

提示词

增加一个仓库控制面板，包含仓库切换和可视化属性切换功能

使用下拉框实现5个仓库切换的功能，每个仓库有不同的库区和库位数，点选仓库选项可以切换并刷新可视化的库存场景

使用SelectButton实现可视化属性切换功能，显示数量、重量、体积、价值、容量、库存天数等，点选按钮时库位颜色随之对应变化

仓库切换和属性切换功能水平布局

控制面板悬浮位于屏幕中间上方，使用圆角、阴影、不透明度背景等元素，样式炫酷一点

重新执行生成的代码，可以看到效果：

生成的代码效果可能不是我们想要的，就需要多调整几次。现在下拉选择仓库选项时库位显示和统计图表都会跟随实时更新，切换可视化属性时库位显示颜色也会变化。（嗯，库区库位数据和切换仓库展示的还是不一样的）

这个时候，我们已经算是实现了基本的功能。剩下的就是最难的根据设计稿优化细节样式啦。

多模态

多模态在编码工具中的实现，只要是对图片的识别处理。

我们先随便去网上找一个大屏效果图（需要不大于5M），扔给Trae AI，让它参照优化一下。

提示词

参考设计图中的配色和布局，对我们整个页面进行优化，可以移除地面

实际上经过多轮磨合，效果并不明显。

大家感兴趣的话，可以自己尝试着继续和它对话让它干下去。

写在最后

在AI大模型每次出现大突破新闻时，大家都热衷于使用AI实现各种需求，包括启发我实现这个3D可视化大屏的推文，然后绕不开的就是程序员要失业的话题。

程序员会不会失业呢？当然会，而且一直在进行中，但是AI的发展只会是部分原因。新技术的发展总会改变工种，有失业同样也会带了新的职业变化，我们也只能拥抱变化。

现在大家都对AI写代码很感兴趣，相信在不远的将来大家也会参与AI写代码的这个过程。如同我今天用Trae AI零代码从零实现的这个3D可视化大屏一般，AI编辑器会让这一步更快地成为现实，毕竟谁不向往自己成为一个AI程序员呢？