CodeBuddy 打造响应式测试平台：ScreenLab 的诞生记-繁依Fanyi

开发工具：CodeBuddy（AI 代码伙伴）
技术栈：Vue3 + Vite + 原生 CSS
项目功能：网址嵌入、设备尺寸模拟、旋转与拖拽缩放、工业风 UI

起心动念：为什么我需要 ScreenLab？

作为一名前端开发者，我经常需要调试网页在不同屏幕下的显示效果。虽然 DevTools 提供了一些模拟视图，但体验始终不够灵活，尤其是在做演示时，难以直接切换多个设备，或者调整非标准尺寸。

于是，我向 CodeBuddy 提出了一个明确的需求：

「我要用 Vue3 构建一个响应式布局测试平台 ScreenLab，功能包括：输入任意网址嵌入 iframe 预览、预设常见设备尺寸、自定义输入宽高、可拖动缩放、深灰工业风 UI、辅助网格与横竖切换。」

说完这段话，我就把屏幕交给了 CodeBuddy。

从零搭建：纯手工构建的起步阶段

一开始，项目根目录是空的。CodeBuddy 没有选择任何脚手架工具，而是决定从头手动构建 HTML 和 Vue3 应用结构。它先创建了 index.html 和 main.js，并在没有打包工具的情况下，用模块化 JS 组织代码，实现 Vue 应用的挂载。

为了规避构建工具的限制，它使用了“模板字符串 + JS 组件”的策略，即用 .js 文件来手动组织每个 Vue 组件的模板和逻辑。我个人觉得这个做法非常有趣，特别适合教学演示或者低门槛部署。

紧接着，它建立了 components、styles 和 utils 三个目录，并开始逐个实现核心组件：

• App.js 负责主逻辑和状态管理
• UrlInput.js 提供网址输入框
• DeviceSelector.js 用于选择常见设备
• SizeControls.js 实现拖动缩放逻辑
• ScreenPreview.js 渲染带有辅助网格的 iframe

与此同时，CodeBuddy 还创建了一个 devices.js 文件，里面封装了多个设备的尺寸数据，包括 iPhone、iPad、MacBook、Surface 等等。前端开发者最常遇到的设备全都考虑到了。

再来说说 UI 部分，CodeBuddy 编写的 main.css 样式文件非常用心。不仅实现了暗色工业风配色，还加入了尺寸标注、网格辅助线、按钮交互动画，整体观感沉稳且具备技术感。我特别喜欢那种轻微发光的边框和清晰对比的主色调，感觉用来做演示也很有范。

重构升级：迈入标准 Vue3 项目结构

虽然之前的版本已经可以直接运行，但我希望它能更像一个真正的 Vue 项目，便于后续维护和拓展。于是，我请 CodeBuddy 帮我把它变成一个标准的 Vue 项目结构。

它立刻动手创建了 package.json 和 vite.config.js，将运行环境切换为基于 Vite 的现代开发流程。接着，它重新组织了目录：

• 所有代码迁移到 src/
• 样式放入 src/assets/
• 工具函数保留在 src/utils/
• 所有组件改为 .vue 单文件格式

值得一提的是，CodeBuddy 将之前的 JS 模块组件，逐一转换为标准 .vue 文件，包括模板、脚本和样式三部分，并根据 Composition API 的思路进行封装。组件之间的状态传递和事件绑定都处理得非常清晰，结构自然、逻辑独立。

比如，在 ScreenPreview.vue 里，它使用了绑定样式实现响应式尺寸，并动态计算缩放比例与旋转角度。甚至拖动边框调整尺寸的那一块，也通过监听鼠标事件灵活实现，完全不依赖第三方库。

而 DeviceSelector.vue 提供了列表式的设备按钮，选中状态通过 v-bind:class 高亮展示，交互反馈非常自然。

成果体验：功能完整，体验丝滑

最终的 ScreenLab 具备如下功能：

• 输入任意 URL，即可在 iframe 中嵌入预览
• 快速切换常见设备（手机、平板、笔电、显示器）
• 自定义宽高并可自由拖动调整视图
• 支持点击按钮横竖屏切换
• 带尺寸标注和辅助网格线，便于对齐观察
• 全局 UI 风格统一，工业风格强烈

这套系统完全纯前端实现，不需要后端也能运行，非常适合部署在 GitHub Pages 或其他静态站点上演示。而且使用 Vite 启动开发也非常快，基本零配置就能跑起来。

我的收获与感受：全自动协作的开发体验

整个项目从构思、搭建到迁移升级，几乎全程由 CodeBuddy 主动完成。我只需要告诉它「我要做一个怎样的平台」，剩下的全部代码、目录、配置、优化策略都由它一步步实现。

这不仅让我省下了大量重复性劳动，也让我观察到很多优秀的代码实现思路。比如：

• 如何在无构建工具下构造模块化 Vue 应用
• 如何用最简单的 HTML/CSS 实现拖拽缩放与响应式布局
• 如何手动构建 Vite + Vue 项目结构
• 如何结构清晰地拆分组件、传递 props、共享状态

CodeBuddy 编写的代码非常整洁，变量命名直观，逻辑组织分明。更重要的是，它写的每一段代码都有明确的意图，方便后期维护与阅读。对于像我这样喜欢「边看边学」的开发者来说，能从这些自动生成的结构中学到不少技巧。

结语：CodeBuddy，真的不仅仅是个“建议工具”

这次项目让我真正体会到了什么叫做「主动开发型 AI」。CodeBuddy 并不是等我一句句下指令才执行，而是能根据我的目标，主动拆解任务、合理组织结构、一步步构建完整应用的协作伙伴。

对于像 ScreenLab 这样功能清晰、结构独立的小项目来说，我完全可以把主导开发这件事交给 CodeBuddy，而我只需要从旁观察、调整与测试，体验非常愉快。

如果你也想尝试用 Vue 构建一些工具类前端项目，不妨试试和 CodeBuddy 合作。它不仅能写代码，更能「理解项目」，这才是我觉得最难能可贵的地方。