一、我是谁，以及我遇到了什么问题
我是前端开发，主要负责 Vue 技术栈的 B 端业务系统开发。这次接到一个任务：接手一个同事离职后留下的后台管理系统项目（Vue 3 + Element Plus + Pinia + Vite），需要在两天内完成一个「数据导出中心」模块的开发——包含导出任务列表、导出配置表单和导出记录详情三个页面。
问题在于：我对这套代码几乎不熟。项目用了 Pinia 做状态管理，组件之间有大量自定义封装，路由和权限控制也有一套自己的逻辑。如果按传统方式，我需要先花大半天时间读代码、问同事、理清数据流，才能动手写新功能。
实际场景：接手陌生前端项目，要在两天内交付一个包含列表页 + 表单页 + 详情页的新功能模块。
二、我是怎么用 TraeCode 解决这件事的
这次我结合使用了 IDE 模式 和 SOLO 智能体模式，大致分四步走：
第一步：用 SOLO 模式让 TraeCode 理解项目结构和数据流
我先用 SOLO 智能体模式，让 TraeCode 通读整个项目，帮我梳理出关键信息：
- 项目目录结构、路由配置方式、页面组件组织约定
- Pinia store 的定义模式（如何定义 state / actions / getters）
- 已有的 API 请求封装（
request.js里的拦截器、响应处理） - Element Plus 组件的二次封装（比如项目里自定义的
ProTable、SearchForm） - 权限指令
v-permission的使用方式
提示词参考：「这是一个 Vue 3 + Element Plus + Pinia 的后台管理系统，请帮我分析项目结构，重点梳理：1) 路由和页面组织方式；2) 状态管理定义模式；3) API 请求封装；4) 组件复用约定。给我一份结构化总结。」
第二步：用 IDE 模式定位参考页面，生成新功能代码
TraeCode 帮我找到了项目里已有的一个类似功能页面（「操作日志」模块），我让它参考这个页面的写法，生成导出中心三个页面的骨架代码：
- 导出任务列表页：参考已有
ProTable用法，生成带搜索表单 + 分页表格的页面 - 导出配置表单页：参考已有
DialogForm组件，生成配置表单弹窗 - 导出记录详情页：生成详情展示页面，复用项目的描述列表组件
同时让 TraeCode 按照项目的 Pinia store 模式，新建对应的 exportStore.js，定义好 state 和 actions。
提示词参考：「参考 src/views/system/log 目录下的操作日志页面写法，帮我创建导出中心模块：1) 列表页 ExportTaskList.vue；2) 配置表单 ExportConfigDialog.vue；3) 详情页 ExportRecordDetail.vue。store 参考已有 logStore.js 模式新建 exportStore.js。API 接口我先写 mock。」
第三步：切换 SOLO 模式补全路由、权限和类型定义
页面骨架有了，接下来需要把路由、权限、TypeScript 类型定义都补上。我切回 SOLO 智能体模式，让它一次性完成：
- 在
router/modules下新增导出中心的路由配置 - 在权限配置中注册新菜单
- 补充
types/export.d.js类型定义文件 - 检查是否有遗漏的 import 和组件引用
第四步：用 IDE 模式调试联调，整理变更
代码写完后，我把 API mock 换成真实接口，在 IDE 模式下逐个页面调试：
- 用 TraeCode 的对话能力快速排查了 Element Plus 表格列宽自适应的问题
- 修复了 Pinia store 在组件卸载后状态未清理的 Bug
- 最后让 TraeCode 帮我整理了一份变更文件清单和简单的变更说明
三、成果展示
最终交付了三个完整的页面和一个 Pinia store 模块：
- 导出任务列表页：支持按任务名称、状态、时间范围搜索，分页展示导出任务，可触发重新导出
- 导出配置弹窗：支持选择导出字段、导出格式（Excel / CSV），保存配置
- 导出记录详情页：展示单条导出记录的完整信息，包含导出状态、文件下载链接
功能完成后通过了联调测试，当天提测，测试同学第二天反馈通过。同时整理了一份变更文件清单（共新增 8 个文件、修改 3 个文件），方便后续同事接手维护。
四、效率对比
| 对比项 | 以前的做法 | 用 TraeCode 后 |
|---|---|---|
| 理解项目 | 手动翻目录、问离职同事、看 Git 历史，大半天才能理清数据流 | SOLO 模式通读项目，30 分钟拿到结构化总结 |
| 编写页面 | 从零手写或复制粘贴改，容易漏掉项目封装约定 | 参考已有页面模式生成骨架，直接符合项目规范 |
| 补全配置 | 路由、权限、类型逐个手加，容易遗漏 | SOLO 模式一次性补全，自动检查引用 |
| 整体耗时 | 2 天（含读代码 + 写功能 + 调试） | 约半天（4 小时左右完成开发 + 联调） |
效率提升：从原来的 2 天缩短到半天，提速约 4 倍。最大的收益不在写代码本身，而在于接手陌生项目的"理解成本"被大幅压缩——以前最耗时的"读懂别人代码"环节，TraeCode 帮我快速跨越了。
五、经验和技巧总结
- 先用 SOLO 模式"扫描"项目，再动手写代码。接手陌生项目时，先让智能体通读整个代码库，输出结构化的项目分析，比逐个文件读效率高得多。尤其要注意让它总结"项目里的封装约定"（比如自定义组件用法、store 定义模式），这样后续生成的代码才能直接符合规范，不用反复改。
- IDE 模式适合精确控制，SOLO 模式适合批量操作。写具体页面逻辑时我更倾向 IDE 模式，因为可以逐步审查每段代码；但涉及"新增多个文件 + 修改路由配置 + 补类型定义"这类跨文件批量操作，SOLO 智能体模式明显更高效，它能自己规划和执行多步任务。
- 让 TraeCode 参考已有代码生成，而不是从零描述。与其描述"帮我写一个列表页"，不如说"参考 src/views/system/log/index.vue 的写法，帮我生成类似结构的页面"。这样生成的代码天然贴合项目风格，后续改动量小很多。