从需求到交付：我用MonkeyCode的AI Agent完成了一个React数据看板

背景

前段时间接到一个需求：给公司内部系统做一个数据看板，展示关键业务指标，支持筛选和导出。作为一个后端工程师，前端不是我的强项，但工期只有一周。我决定用 MonkeyCode 的 AI Agent 模式来完成这个任务，看看效果如何。

一、需求拆解

在 MonkeyCode 中创建任务后，我把需求分成几个阶段：

1. Phase 1：搭建 React + TypeScript 项目，接入 Ant Design 组件库
2. Phase 2：创建数据看板的页面布局和路由
3. Phase 3：实现图表组件（折线图、柱状图、饼图）
4. Phase 4：接入后端 API，处理数据筛选和导出

MonkeyCode 的 AI 理解了整体需求后，自动生成了项目计划，包括文件结构、技术选型和开发顺序。

二、Phase 1：项目初始化

在对话框中输入：「用 React + TypeScript 创建一个数据看板项目，使用 Ant Design 作为 UI 框架，ECharts 做图表」。

AI 自动执行了以下操作：

• 初始化 Vite + React + TypeScript 项目
• 安装 antd、echarts、echarts-for-react 等依赖
• 创建了基本的项目目录结构
• 配置了 ESLint 和 Prettier

整个过程大概 30 秒，在云端环境中完成。我可以通过终端查看安装日志，通过预览查看初始页面。

三、Phase 2：页面布局

描述布局需求：「顶部放统计卡片（总用户、活跃用户、收入、订单量），中间是折线图和柱状图，底部是数据表格，左侧有筛选栏」。

AI 生成了完整的页面组件：

• Dashboard.tsx -- 主页面，包含 Grid 布局
• StatCard.tsx -- 统计卡片组件
• ChartPanel.tsx -- 图表面板组件
• DataTable.tsx -- 数据表格组件
• FilterBar.tsx -- 筛选栏组件

生成的代码质量不错，组件拆分合理，类型定义完整。我做了一些小调整（比如改了一下间距和颜色），总体上没太大改动。

四、Phase 3：图表实现

这是最核心的部分。我对 AI 说：「折线图展示过去 30 天的用户增长趋势，柱状图展示各产品线的月度收入，饼图展示用户来源分布」。

AI 用 ECharts 实现了三个图表：

• 折线图：双 Y 轴，左轴用户数，右轴增长率，支持 hover 显示详情
• 柱状图：分组柱状图，每个产品线一种颜色，支持缩放
• 饼图：环形图，中间显示总数，支持点击下钻

图表的交互效果（hover 高亮、图例筛选、数据缩放）都实现了。我只需要确认样式是否符合设计稿。

五、Phase 4：数据接入

最后一步是接入真实数据。我提供了后端 API 的文档链接和接口地址，AI 自动创建了 API 服务层：

• api/dashboard.ts -- 封装所有数据接口
• hooks/useDashboard.ts -- 自定义 Hook，处理数据请求和状态
• 导出功能使用 xlsx 库实现，支持 CSV 和 Excel 格式

筛选逻辑通过 URL 参数传递，支持日期范围、产品线、用户来源等维度筛选。

六、最终效果

整个项目从零到可交付，实际花费约 3 天时间。其中：

• AI 自动生成的代码约占 70%
• 我手动调整的部分约占 30%（主要是样式微调和 API 对接细节）
• 云端环境运行稳定，没有出现过环境问题

七、经验总结

1. 需求描述越具体，AI 输出质量越高：不要说「做一个好看的图表」，而是说「折线图展示 30 天趋势，双 Y 轴，左轴用户数，右轴增长率」
2. 分阶段推进比一次性描述全需求效果好：每完成一个 Phase，确认效果后再进入下一个
3. 善用终端和预览：AI 执行完代码后，自己也在终端跑一遍测试，确认结果
4. 代码审查不能省：AI 生成的代码大多数时候是对的，但边界情况（错误处理、空值处理）需要人工检查

总结

用 MonkeyCode 的 AI Agent 做完整项目是可行的，尤其适合时间紧、技术栈不太熟悉的场景。云端开发环境省去了大量环境配置时间，让我专注于业务逻辑和代码审查。如果你也有类似的需求，建议试试 Agent 模式，分阶段推进，效果会比预期好。