一次对话，让我10分钟打造一款拥有玻璃拟态风格的二维码生成大师

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

QRStudio：一个我用 Vue 写的二维码小工具

最近我鼓捣了一个二维码生成器，名字起得稍微认真点，叫 QRStudio。起因其实挺简单的，就是我老要生成二维码，但总觉得网上那些工具不太“合我胃口”——不是界面太简陋，就是样式一眼看穿。于是我干脆自己搞一个，起码能做成我喜欢的样子。

我整个项目是用 Vue 3 搭的，主要借了 Element Plus 的 UI 组件，二维码生成用了 qrcode，导出功能就靠 html2canvas 来截图。大概就是这么个组合。整活期间，我一直在用 CodeBuddy 帮我写代码，基本属于“我说它写，我改它补”的节奏，有点像在跟个很懂设计的朋友对话。

初始化项目：从终端报错开始的旅程

一开始我在终端直接写了点链式命令，结果 Windows 报错，还挺突然的。当时有点懵，后来 CodeBuddy 提醒我：Windows 不支持 & 连着跑，要我分两步执行。我就按它说的，先 npm init vue@latest，再挨个装上 Element Plus 和 html2canvas 等依赖。

这段过程没太多难度，就是来来回回切换窗口稍微有点烦。好在它会帮我看看结构有没有问题，啥时候能跑起来我基本不用担心。

功能实现思路：输入、预览、导出，一条龙

整个工具的主流程其实特别直给——你输入点内容，它生成二维码，你看着觉得还行，点一下按钮就能导出。

我用的主组件叫 QRGenerator.vue，大部分逻辑都往这一个里塞了：文本输入、颜色切换、模板套用、上传图标、导出按钮……反正一个组件就够我折腾一阵。

说到导出这事我得多说一句：二维码是用 canvas 画的，图标却是悬浮在上面的 <img> 标签，这就有点 tricky。如果你截图太着急，图标还没加载完，导出来就空了。所以我在截图前手动等了一下图标加载，CodeBuddy 也提醒了我这事，还蛮细心的。

样式这块我花了不少心思

我对这个工具的期待就是——不光能用，还得看着舒服。于是我整了点玻璃拟态的 UI：背景模糊、浅色描边、轻微阴影，看起来像悬浮在雾气中的一块面板。

动画我也没落下。按钮和卡片轻微漂浮，点击会微微缩放，整体感觉像水面上飘着的小物件。这个动画是用 @keyframes 做的浮动效果，然后给了一点 transition，看着还挺顺眼的。

这些 CSS 大部分是我跟 CodeBuddy“边聊边出”的，比如我说“按钮能不能看起来动一点”，它就甩给我几段动画，再由我来微调节奏。

图标上传这点还挺讲究

用户可以上传自己的图标放到二维码中间，这个功能本身不难实现，但细节还挺多的。

比如我得考虑上传的图别太大，遮挡了二维码就翻车了。于是我加了最小最大宽度限制，另外图标是禁止鼠标事件的，不然有时候会挡住 canvas 上的拖拽逻辑。这也是 CodeBuddy 提醒我的，说真的我自己一开始还真没想到。

PNG 导出其实不简单

html2canvas 用起来挺方便的，但也有坑，主要就是异步操作多。截图的时候一定要确保页面元素都加载好了，不然就是导出一张残缺的图。

我给导出的 PNG 起名的时候，加了点小细节：文件名带上时间戳，这样多导几张也不会重复。是 CodeBuddy 提的建议，但我一看觉得还挺合理的。

link.download = `qrcode-${Date.now()}.png`;

导出来的效果基本满意，中心图标也能一起拍进去，总算是达到预期了。

UI 和交互部分：工具也要好看好用

组件我全都用的是 Element Plus 的 Input、Upload、ColorPicker、Slider 等等，主要是省事。它的配套样式也基本够用，剩下我就在 scoped CSS 里自己调调边距、颜色之类。

移动端我稍微测试了一下，CodeBuddy 自动帮我调了一些响应式宽度，其实我自己也没管太多，能跑就行。

其中有个小细节我挺喜欢的：我刚说想加个“上传图标”的按钮，它直接给我两个，一个上传、一个移除。这种感觉还挺像工作中有个默契的搭档，知道你要什么，还会多给一点余地。

尾声：写工具也能有点仪式感

整个 QRStudio 做完后我其实有点小满足。虽然说这不是啥大项目，但能把一个自己想了很久的工具亲手做出来，而且过程还挺丝滑，确实挺开心的。

CodeBuddy 在这个过程中确实帮了我很多，不止是写代码，更多是在帮我梳理思路、避免犯一些“眼前看不到”的错。它不是那种帮你写一堆模板代码的机器人，更像一个懂行、肯听你叨叨、还能提出靠谱建议的前端朋友。

如果以后这个工具能拓展出二维码解析、短链跳转啥的，我可能会继续搞下去。哪怕最终没怎么广泛用起来，能做出一款“属于自己的工具”，就已经够值了。