宇宙漂流的时间胶囊：我用 CodeBuddy 实现了一个「太空感」单页应用
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
在某个深夜，我脑海里冒出了一个点子：如果可以写一封未来的信，投进一枚太空漂浮的时间胶囊里，然后在某一天它自动打开，会是什么感觉？于是我立刻打开 CodeBuddy，向它提出了一个看起来有点疯狂的需求：
我想做一个 UniApp 单页应用，叫 TimeCapsule，用于写下未来想说的话，UI 像太空漂浮感。
我以为它会回我一句“你可以考虑从 XX 开始”，结果完全不是这样。它像一位清醒的宇航员，马上开始分析任务、列出所需模块、甚至连技术方案都想好了。什么渐变星空背景、流星粒子动效、玻璃拟态输入框、日期限制、拖动胶囊、定时提醒……听起来就像在开一场前端宇宙大会。
初始搭建：从零开始改造 index.vue
我提供了一个基础的 UniApp 项目结构，其中包含一个简单的 index.vue 页面。没想到 CodeBuddy 上来就毫不含糊地说：这是个完整重写的需求，它决定直接覆盖页面内容。
它新生成的 index.vue 页面长达 400 多行，页面结构一应俱全，包括 Canvas 背景、浮动输入区、日期选择器、提交按钮、太空胶囊展示区、时间检测逻辑等一网打尽。我简单跑了一下代码，结果出问题了：
- 看不到输入区域
- 星空背景也不显示
- 控制台爆红：
The specified value "0" does not conform to the required format, "yyyy-MM-dd"
CodeBuddy 看到错误后迅速定位问题，是 <input type="date"> 默认值设置为 0 导致的格式错误。它立刻调整代码逻辑，设置合法的初始值，并更新绑定逻辑，保证渲染无误。
星空背景与流星动效：我从未见过如此浪漫的 Canvas 写法
我本来以为要自己手撸一个粒子系统，结果 CodeBuddy 已经封装好了一个完整的 drawStars() 和 animateMeteor() 函数。流星从不同方向划过屏幕，速度和角度都是随机生成，每条轨迹都有拖尾与渐隐。
这些动画通过 requestAnimationFrame 实现，配合星空渐变背景（深蓝 → 黑紫），整个页面立刻有了深夜宇宙感。
而 Canvas 被挂载在页面底部，设置了绝对定位和 z-index: -1，巧妙地作为背景存在，不影响前景输入区域和交互按钮。
中心输入与日期选择器：拟态玻璃的魔力
页面中央是一个圆形的输入框，CodeBuddy 用了 border-radius: 50% 搭配 backdrop-filter: blur(8px) 来实现玻璃拟态的浮动感，边缘还有一层透明白边，非常符合我一开始描述的“太空漂浮感”。
输入框下方是日期选择器，CodeBuddy 限制了用户只能选择未来 1 天到 1 年的日期，一旦选错立即提示格式错误，同时也自动转换为合法格式。
我特别喜欢它实现的圆形输入区域，还做了简单防抖与字符限制，避免用户过度输入。可以看出 CodeBuddy 并不是“只会实现”，而是真的在“考虑用户体验”。
胶囊展示区：可拖动的太空漂浮卡片
提交内容后，页面会在顶部生成一个“胶囊卡片”。它长得很像未来信件封装在一颗太空舱里，带有玻璃拟态的边框和漂浮动画。最关键的是，这些胶囊是可拖动的！
CodeBuddy 实现了一个简洁的拖动逻辑：监听 touchstart、touchmove 和 touchend，配合 transform: translate 改变胶囊位置。而每个胶囊初始位置都是随机分布的，让它们看起来像在太空中轻轻飘着。
自动提醒与粒子绽放：代码也有仪式感
最打动我的部分，是 CodeBuddy 实现的“倒计时自动弹窗”功能。它使用 setInterval 每秒检查一次所有胶囊，如果发现目标日期到了，就弹出模态框，显示用户之前写下的内容。
同时，粒子动画被触发，页面瞬间闪耀一阵绚丽的星屑特效。这种仪式感的实现并不简单，而 CodeBuddy 在其中将本地存储、定时轮询、动画控制等多个模块配合得天衣无缝。
我的总结：这一次，CodeBuddy 做的比我想得更好
整个 TimeCapsule 项目的实现，几乎都是 CodeBuddy 主动推进的。它没有给我“建议”，而是直接撸代码、画结构、写逻辑，把我提出的想法一步步变成现实。
我原以为它只会根据关键词“模糊联想”，没想到它对 UniApp 项目结构理解深刻，能写出结构清晰、动画流畅、逻辑严谨的完整页面。而且代码风格统一，变量命名清晰，注释充分，连 Canvas 中的粒子算法都加了详细注释，让我改起来毫无压力。
这个项目让我感受到 CodeBuddy 不只是工具，更像是一个会思考的前端搭档。下一次做页面，我依然会找它一起出发，探索更多想象空间。
