某市政务数据平台「一人一档、一企一档」大屏从 0 到 1
1. 标题
我用 TraeCode 把一张客户效果图，做成了可对接真实数据、带数据核验的「一人一档、一企一档」政务大屏系统
2. 我是谁，以及我遇到了什么问题
我是政务行业的 FDE（前置部署工程师），日常工作是从对接客户需求开始，把需求转化为建设方案、原型设计，再到代码交付，一个人扛完项目从 0 到 1 的全过程。
这次的任务是：某市一体化大数据平台建设中，需要在及短周期（原计划一个月交付）内交付「一人一档」和「一企一档」两个核心大屏页面。客户只给了一张参考效果图，页面包含人口库大屏、人体模型数据分类、各类统计图表、数据核验等多个模块，并且要求后续能对接后台真实数据。
传统做法里，这种大屏通常要 2 个前端干一周：建工程半天、还原布局一两天、调图表一两天、联调再一两天，而且图表细节（排序、换行、间距、对齐）最容易反复返工。客户在等演示节点，我只有一个人。
3. 我是怎么用 TraeCode 解决这件事的
我主要使用的是 SOLO 模式（把复杂任务交给智能体自主规划、执行、验证），在关键节点切回 IDE 模式人工确认。整体按照 FDE 的 Discovery → Prototype → Build 节奏推进。
第一步：让 TraeCode 理解需求和设计稿（Discovery）
我把客户的效果图直接丢给它，让它先分析页面结构再动手，而不是上来就写代码。
提示词：试着帮我把这张图片转为页面，可以用 vue 方便与后台接口对接。
它先输出了一份完整的页面结构分析（顶部导航、左中右三栏、每个区域放了什么图表），并主动和我确认技术栈选型，我选了 Vue 3 + Vite + ECharts，它才开始建工程——需求没对齐之前不乱写，这和我做 FDE 时"先 5Why 穿透需求"是一个道理。
第二步：0 到 1 搭建整个项目（Prototype）
确认方案后，TraeCode 自动完成了一整套动作：
- 批量创建 10+ 个 Vue 组件（数据资源统计、人体模型、环形图、雷达图、折线图、排行表格……）
- 搭好
api/mock.js数据层，数据结构按真实接口设计，方便以后无缝切换 - 自动安装依赖 → 修正 import 路径 → 构建 → 启动 dev server，全程自己验证
当天就拿到了一个能点、能动、有数字动画的完整大屏原型。
第三步：按客户反馈增量打磨（Build · 需求迭代）
页面交付后，客户陆续提出细节调整，我都是直接转述原话，TraeCode 负责定位根因并修复：
客户原话 1：人体两边的标签圆点和文字换一下位置，圆点靠近人体一侧。
客户原话 2：核验结果弹出框高度再低一些，跟人口变化趋势图高度保持一致。
客户原话 3：核验输入只留身份证就行，去掉姓名，身份证必填，再把图标加回来。
客户原话 4：行业分布还是从少到多排的，改为由上到下由多到少；10 条数据只占了一半空间，调整宽度间隔填满；文字没显示完全，调整间隔让文字换行。
每个需求它都不是盲改，而是先读相关组件代码、定位根因再动手。比如"行业分布只占一半空间"这个问题，它追踪到 barWidth: 11 固定柱宽 × 10 根柱子 = 110px，正好是 220px 容器的一半，然后改用 barCategoryGap 自适应填满；再比如弹出框对齐，它用 getBoundingClientRect 实测两个面板的高度，做到 0 像素误差。
第四步：对接真实后端数据（Build · 数据联调）
原型跑通后，把前端的数据来源从 mock 切换到后端。项目配套了 Spring Boot + MyBatis 服务，真实业务表（如企业信息表按行业门类统计）。TraeCode 把前后端串起来：后端查询真实表写入统计字段，前端判断字段非空时用后端数据、否则回退 mock，联调时页面显示的就是真实数据。
第五步：让 TraeCode 自己验收（Scale · 自动化验证）
最让我惊喜的是它能自己打开浏览器验证效果：启动 dev server → 打开页面 → 点击切换标签页 → 填身份证号点查询 → 断言弹出框高度和趋势图差 0px → 截图确认，最后把验证结果（PASS + 实测数值）整理成报告。相当于每次改完都自动做了一遍回归测试。
4. 成果展示
最终交付的是一套可直接演示、已对接真实数据的前后端完整系统：
| 模块 | 内容 |
|---|---|
| 一人一档大屏 | 人口库总览、人体模型 + 18 个数据分类点、近十年人口变化趋势、年龄/性别/区域分布、数据核验（身份证号 → 人员图谱） |
| 一企一档大屏 | 企业数据概况、行业分布柱状图（真实表统计、降序 + 长名称自动换行）、市场类型、年度趋势、企业核验 |
| 后端服务 | Spring Boot + MyBatis + MySQL 真实表查询，前端 mock 自动回退 |
| 技术栈 | Vue 3 + Vite + ECharts + Java |
- 交付给了某市大数据平台项目使用，跑通了真实数据联调并用于客户演示节点；
- 全部页面响应式自适应，图表能跟随容器尺寸重绘，无空白无重叠；
- 每一次修改都经过浏览器自动化验证，交付质量可量化（对齐 0px、必填校验、10 个标签强制显示等都有实测记录）。
5. 效率对比
| 环节 | 以前怎么做 | 现在用 TraeCode | 提升 |
|---|---|---|---|
| 图片转页面 | 2 人 × 1 天，手搓布局+图表 | 1 人当天出可交互原型 | 约 8 倍 |
| 图表细节调整（排序/换行/填满） | 改代码 → 截图 → 肉眼确认，一次半天 | 一句话需求 + 自动定位根因 + 浏览器实测验证，约 10 分钟 | 10 倍以上 |
| 弹出框对齐这类"像素级"需求 | 反复量像素、改 CSS，容易改坏别的 | getBoundingClientRect 断言 0px 误差，一次通过 |
基本免返工 |
| 验收回归 | 手动开浏览器一步步点 | 智能体自动走完整流程并出 PASS 报告 | 人工几乎为 0 |
整体感受：以前一个人要一周的大屏交付，这次 3 天内完成了从原型到真实数据联调的全流程，而且因为每次修改都有自动化验证兜底，几乎没有"改一处坏一处"的返工成本。
共计5人天，消耗4000积分。
6. 经验和技巧总结
-
先给上下文，再下指令，效果天差地别。 把设计图、真实表结构、mock 数据结构先喂给 TraeCode，它改代码时能直接引用真实业务字段，而不是凭空猜。这和 FDE 的"5Why 需求穿透"一样——输入质量决定输出质量。
-
复杂任务交给 SOLO 模式，小修改用 IDE 模式。 建项目、跨文件重构、自动化验证这种多步骤任务，让智能体自己规划和执行更省心；单点小改（比如换个颜色、调个文案）自己动手更快。关键节点（技术栈选型、数据联调方案）我会人工确认，避免方向跑偏。
-
描述需求时带上"验收标准"，能减少 80% 的来回修改。 客户说"高度保持一致"我转述成"弹出框高度与人口变化趋势图一致，误差 0px"，TraeCode 就会用实测断言去验证，而不是"大概差不多"。
-
FDE 视角：把每一次交付沉淀成可复用的东西。 这个项目里 TraeCode 自动记录项目上下文和已确认的约束（比如"核验只保留身份证号、必填、带图标"），下次对话不会推倒重来——这本身就是"能力回注"，和 FDE 的知识沉淀飞轮一个逻辑。