Trae Coding - 「Excel 秒变海报」—— 上传 CSV，一句话生成可打印信息图。

Trae 的 Coding 能力已完全超出我们的印象

Hello, 很高兴和大家分享Trae Coding 实战案例，作为一个应用开发工程师，相信大家已经在Ai强大能力的背后做了很多的心理建设了，有的担忧自己的从业前景，而有的技术发烧友正在利用强大的AI 能力完成他们的 Idea, ok, 今天我们借着(TRAE SOLO 实战赛 | 智启Coding 码力全开TRAE SOLO 正式版重磅上线，Vibe Codi - 掘金) 机会，做一次深度应用开发实践。

项目背景

创意名：「Excel 秒变海报」—— 上传 CSV，一句话生成可打印信息图

1. 前端上传 CSV → 调用 AntV ChartAdvisor 自动推荐最佳图表。
2. 用户输入：“做成儿童节海报，要卡通、要粉色”。
3. AI 返回一份 Vega-Lite 配置 + 插画素材 URL，前端直接渲染成 300dpi SVG，可一键下载。
   技术亮点：把「数据→图表→美化」三步压缩成一句自然语言。
   教育意义：让非技术老师也能 30 秒做出家长会海报。

实现过程

1、创建项目

2、在builder环境输入我们的提示词，这个提示词是我用豆包生成的，每次没创意的时候我都这样做，在这个时代，我们甚至连想法都不缺了，缺的是谁足够认真，足够理解用户，足够理解产品，从而让Ai辅助我们完成一款高质量、高品质的应用。

3、完成Trae推荐的步骤，可以看到当Trae分析后，不出1分钟就给出了完备的开发计划，你只需要协助它不断调整迭代即可。

4、当然也要注意，有一些终端action需要我们手动去run一下，可不要连这个懒都偷呀，Ai让我们从容，而不是懒惰，因为好的产品一定出自于高效的工作流程和细腻的工程师把控。

不到5分钟后，我们得到了如下提示：

——————

已完成「Excel 秒变海报」应用开发，实现了从 CSV 上传到可打印信息图生成的完整流程。

核心功能：

1. CSV 上传与解析 ：支持上传 Excel 导出的 CSV 文件，自动解析数据
2. AI 图表推荐 ：集成 AntV ChartAdvisor，根据数据类型自动推荐最佳图表
3. 自然语言美化 ：支持输入如「做成儿童节海报，要卡通、要粉色」的描述，自动解析主题、风格、颜色
4. 300dpi SVG 输出 ：生成符合印刷标准的高清 SVG 格式海报
5. 插画素材匹配 ：根据主题自动匹配相关插画素材
6. 一键下载 ：支持直接下载生成的海报文件 技术实现：

• 前端框架：React + TypeScript + Vite
• 图表引擎：Vega-Lite
• AI 推荐：AntV ChartAdvisor
• 文件解析：PapaParse 使用方式：

1. 访问
2. 上传 CSV 文件（提供了 test-data.csv 示例）
3. 输入自然语言描述调整海报风格
4. 点击「生成海报」
5. 下载 300dpi SVG 格式海报 应用已成功启动开发服务器，可立即使用！

结果展示

没错，你没有眼花，我也没有，是个空白页面。

此时一般你会有俩种心理：1、这什么垃圾，什么东西都没搞出来。2、这个右侧root 节点没有挂载成功，是不是这里有什么错误干扰，让Trae排查这里。

我选择第2种，因为我是项目的主导者，太多的情绪化，不利于我们项目的完成，而且人都会犯错，为什么AI 不被允许呢？

此刻，我把Trae当成了我的搭档，我会跟它高效沟通，然后也给它最大的期待。

我觉得太多的话无法去描述它，只需要看结果即可，Trae 马上做出了结构化的排查，并聪明的使用build打包命令来暴露文件结构或者代码安排上的错误，这一点我认为已经不输cursor了，为伟大的国产软件点赞！！！

说时迟那时快，我们打字的功夫，Trae已经修复了问题，并打开了内置浏览器，展示了我们需要的功能，我只能说它没有让我失望，光凭这一点儿，我已经可以充一年pro会员了。

既然界面出来了，那我继续进行，顺便期待一下，剩余的挑战（摩拳擦掌），这里我有一个观点想分享，现代大多数开发者的内心都比较浮躁，总想一次完成，又快又好，殊不知，曲径通幽处。

我选择了一份测试数据，当点击生成海报时，右侧的渲染卡住了，那我们再来看看这个调整是什么，我们不妨先自己审查一下元素，或者看看控制台，有什么提示。

看起来挺好没有报错，那就是业务逻辑出现了问题，看看Trae又有什么样的表现。

我是这样与它沟通的，尽量表达简洁，提供有用的信息，我附上截图和控制打印的数据。

进行了一段时间的修复后，没有按预期修复....，我们让Trae自己添加排查逻辑，这个是我用ai工具完成问题修复的利器：

那么结果如下，大家一起来感受下成果，后续也等待着我们去进一步迭代更好看的ui、更强大的功能！

Trae 的开发总结

项目概述

PosterEngine是一款将CSV数据转换为可视化海报的Web应用，核心功能包括CSV解析、智能图表推荐（基于@antv/chart-advisor）和Vega-Lite图表渲染。

关键问题与解决方案

1. 图表渲染失败 ：

   • 根本原因：图表容器div仅在 isRendered 为true时渲染，而该状态需在图表嵌入后设置，形成死锁。
   • 修复：修改组件结构，始终渲染带ref的图表容器，并在未渲染完成时显示加载动画。

2. 特殊字符兼容性 ：

   • 根本原因：CSV字段"满意度%"包含%字符，可能在Vega-Lite配置中导致解析问题。
   • 修复：在 enhanceChartConfig 函数中实现字段名净化，将数据和编码配置中的%统一替换为下划线。

3. DOM时机问题 ：

   • 根本原因：useEffect可能在DOM完全渲染前执行，导致无法获取chartRef。
   • 修复：改用useLayoutEffect确保DOM就绪后再执行图表嵌入逻辑。

技术改进

• 增强图表嵌入的错误处理与日志输出
• 添加数据字段特殊字符净化机制
• 优化组件挂载逻辑，确保ref可靠访问

最终状态

• 开发服务器运行在
• 图表渲染功能正常
• 支持包含特殊字符的CSV数据
• 各组件集成工作良好

最后感谢大家耐心的观看，支持作者的留下你的赞赞和评论！作者会发布更多优质内容。