最近我着手开发一个轻量但风格高端的二维码生成工具——QRStudio。这个项目的灵感来自于我自己常需要制作风格统一、美观的二维码，便想着干脆用 Vue 3 写一个专属的小工具。功能上，它不仅能生成二维码，还支持样式自定义、导出 PNG、上传中心图标等，还搭配了一套我非常满意的玻璃拟态 UI。
这个过程，我全程配合了 CodeBuddy 来辅助完成。不得不说，它真的非常聪明，帮我捋清了每一个实现逻辑，甚至连样式细节都考虑到了。
项目初始化：从 0 到 Vue 3 + Element Plus + html2canvas
项目采用 Vue 3 搭配 Element Plus 组件库，而为了实现二维码导出功能，我选择了 html2canvas。二维码核心生成依赖 qrcode 这个库，它轻量好用，非常适合这种工具类项目。
一开始我在 PowerShell 里直接使用 & 来链接命令被报错，CodeBuddy 马上提醒了我在 Windows 下不能这么用，建议我改为分步执行。于是，我先 npm init vue@latest 初始化项目，再逐一安装依赖。CodeBuddy 会在每一步操作后帮我检查项目结构是否完整，并确认是否能正常运行，这让我省去了不少排错的时间。
核心功能设计：从输入到导出，全流程可控
整个项目围绕「输入 → 生成 → 预览 → 导出」这一流程展开。主组件是 QRGenerator.vue，CodeBuddy 建议我将所有核心逻辑都集中在这个组件里，并保持结构清晰可维护。
我在这个组件里实现了输入文本、选择模板、调整颜色、上传图标、预览二维码和导出 PNG 几大功能点。值得一提的是，导出功能使用了 html2canvas，它能将 canvas 连同覆盖其上的中心图标一并导出为 PNG。CodeBuddy 特地提醒我，由于图标是以 <img> 标签悬浮在 canvas 上，必须等图标加载完成再截图，否则导出图会丢失图标。
在样式自定义部分，我定义了几套风格模板，如「经典」、「复古」、「极简」、「极光」，点击后会自动更改二维码前景色与背景色。CodeBuddy 在这里帮我优化了数据结构，把颜色配置从硬编码转为可配置模板，方便后续扩展。
打磨细节：浮动动画与玻璃拟态的融合
界面风格上，我非常注重质感。我希望这款工具不只是能用，更是一个赏心悦目的存在。因此整个主界面使用了典型的玻璃拟态风格：半透明背景、背景模糊、白色描边、细腻的阴影，这些都由 CodeBuddy 根据我的描述生成了一整套 CSS。
此外，按钮和卡片还加入了浮动动画，点击反馈也有轻微缩放。CodeBuddy 提供的 @keyframes floating 动画配合 transition，实现了一种“在水中漂浮”的微妙动感，不夸张但很耐看。这种细节体验，是我之前开发中很少注意到的。
在中心图标部分，我允许用户上传任意图片作为二维码中心装饰，并且支持调整大小、圆角开关等。CodeBuddy 提醒我注意上传后的图标不应影响二维码识别，因此给出了默认最小/最大宽度，并添加了 pointer-events: none 来避免图标遮挡 canvas 的鼠标事件，这一点非常贴心。
PNG 导出功能：用 html2canvas 拍一张“合影”
二维码导出其实是我个人很看重的功能。普通的 canvas 导出虽然快，但往往不包含上层的 DOM，比如我们悬浮的中心图标。而 CodeBuddy 很快就推荐我使用 html2canvas，并帮我处理了异步导出的写法。
值得一提的是，它还帮我加上了导出命名逻辑，让每次导出的文件名都带上时间戳，非常实用。
link.download = `qrcode-${Date.now()}.png`;
这个细节让我感觉 CodeBuddy 不只是写代码，它是真的懂得站在用户的角度考虑问题。
整体 UI：Element Plus 与自定义样式的协调
整个界面结构我选择了 Element Plus 的 Input、ColorPicker、Select、Button、Upload、Slider 等组件来完成交互逻辑，而样式部分则通过 scoped CSS 加以美化。CodeBuddy 不仅告诉我哪些组件适合用，还自动帮我调整了布局比例和间距，保证了响应式体验在桌面和移动端都能兼容。
其中最让我印象深刻的是，当我提出“要有浮动动画”时，它马上给出了动画方案；当我说“要加上传图标按钮”，它还顺手加了个“移除图标”按钮，完全不需我多说。
总结：CodeBuddy 是我写前端时最靠谱的搭档
整个 QRStudio 的开发过程让我非常享受。它不仅实现了我预期中的所有功能，而且在很多地方给我带来了惊喜的体验——例如打磨动画细节、提前规避潜在 bug、优化结构逻辑等等。
CodeBuddy 在这个过程中扮演了极其关键的角色。它的代码风格统一，逻辑清晰；它总是提前一步考虑交互细节，不论是上传、导出还是动画处理，都显得游刃有余。我可以放心地将描述交给它，再慢慢完善页面，甚至有时候我觉得，它是更懂 UI 和用户体验的“我自己”。
希望未来我能将 QRStudio 打磨成一个可发布的小型桌面工具，也许还能加上二维码扫描、短链解析等扩展功能。无论如何，能有 CodeBuddy 一路相伴，让我觉得，写代码这件事，其实也可以很优雅、很快乐。
