做网站的基本功能视觉差 网站
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
在前端开发中，经常需要一些「假数据」来模拟真实接口，便于开发阶段的界面构建和功能测试。与其每次手写几组 mock 数据，不如直接构建一个灵活好用的假数据生成工具，于是我便想到了这样一个项目构想：
使用 Vue3 和 faker.js 构建一个名为「FauxGen 📦🪄」的假数据生成器，具备字段定制、格式切换、纸卡风格界面与导出复制功能，是一款专为前端测试打造的小工具。
这一次，我没有手动编码，而是全程交由 CodeBuddy 主动推动、实现。下面我就以第一人称讲述这款工具的开发过程，记录下每一个细节与转折。
项目设想：从一个 Prompt 开始
一开始，我向 CodeBuddy 提出了如下请求：
我要用 Vue3 + faker.js 构建一个假数据生成工具 FauxGen，支持自定义字段类型、设置生成条数与格式（JSON、CSV、表格）、导出与复制、自动刷新数据与保存模板，界面采用纸卡堆叠风格和数据网格动效。
这个 Prompt 很明确，描述了完整的功能需求和视觉风格。CodeBuddy 没有让我去做需求分析、拆解任务，它直接读取了目录结构，发现项目为空，便开始主动构建。
Vue3 脚手架初始化
项目的第一步是用 Vue 官方 CLI 创建 Vue3 项目。在交互式终端中，CodeBuddy 全自动完成了命令填写、命名为 fauxgen、取消多余插件（比如 ESLint 和 Prettier），最终快速拉起了一个干净清爽的 Vue3 空壳项目。
随后，它使用 npm install 安装了四个关键依赖：
@faker-js/faker：生成各种假数据（姓名、地址、图片等）@vueuse/core：增强 Vue3 组合式 API 使用体验file-saver：用于数据导出功能papaparse：将 JSON 转换为 CSV 格式
这一步 CodeBuddy 没有丝毫停顿，直接一次性把项目运行所需的技术基石全部装好。
项目结构与组件划分
在读取完 Vue 项目的初始结构后，CodeBuddy 主动决定重写 App.vue，并将主功能拆分为两个独立组件：
FauxGenPanel.vue：负责字段设置、条数选择、格式选择、按钮操作等控制逻辑；FauxGenOutput.vue：负责数据显示、复制导出、表格视图和卡片堆叠动画。
这种拆分非常合理，既符合组件化思想，又便于后期维护。值得一提的是，这完全是 CodeBuddy 自己决定的划分方式。
控制面板的实现细节
在 FauxGenPanel.vue 中，CodeBuddy 使用组合式 API 设计了字段数组，每个字段可以设置名称、类型（支持文本、图片、日期、邮箱、电话等），并支持添加和删除。它还提供了如下交互设置：
- 生成条数（最大支持 1000）
- 输出格式选择（JSON、CSV、表格）
- 是否启用自动刷新
- 是否保存模板配置
代码中使用了响应式 ref 和 computed 结构清晰，逻辑完整。我几乎不用补充说明任何内容，它就能准确理解我的需求。
数据显示与导出功能
输出部分则集中在 FauxGenOutput.vue 中。CodeBuddy 实现了三种输出格式：
- JSON 格式：自动美化排版
- CSV 格式：借助 PapaParse 转换并展示预览
- 表格视图：使用纸卡样式呈现每条记录，带有淡入动效与间隔阴影
此外，还有两个亮点功能：
- 复制功能：一键将 JSON 或 CSV 复制到剪贴板；
- 导出功能：使用 file-saver 下载生成的
.json或.csv文件，文件名自动命名为 FauxGen_日期。
样式与动效：纸卡堆叠与数据网格
我最初提到希望界面风格偏纸卡堆叠，CodeBuddy 在 main.css 中手动编写了大量样式，从边距到阴影、从卡片旋转到 hover 缓动，效果惊艳。
每张卡片呈现略微倾斜、错位的层叠感，加上 Vue 的 transition-group 让表格数据在出现与切换时更具生命力。这不是普通的静态页面，而是一种轻量级、可视化的动效体验。
总结：一个完全由 AI 主导构建的项目
我并没有亲手写一行代码，而是以「使用者」的身份与 CodeBuddy 进行交互，它则作为「执行者」主动思考、主动实现。它不是我建议它怎么做，而是它在我提供目标后，自己规划、判断、分解，并高效完成整个项目构建。
CodeBuddy 的几大亮点在这次项目中体现得淋漓尽致：
- 结构划分合理：组件组织清晰，逻辑职责明确；
- 细节把控到位：比如生成字段默认值、数据导出命名格式；
- 样式设计灵活：UI 既轻盈美观，又具有技术感；
- 代码质量高：语义化强、易读性好，没有任何多余的冗余代码。
这次的 FauxGen 项目，不只是一个假数据生成器，更像是我与 CodeBuddy 一起完成的开发合作体验。它替我思考、动手、优化细节，让我真正体会到「让 AI 帮你写前端」的愉快感受。
如果你也厌倦了一次次造轮子，那么下次不妨和 CodeBuddy 说一句：
“我要做一个 XX 工具，帮我构建一下。”
然后静静等待，它会用实际行动，交出让你满意的答卷。
