宇宙漂流的时间胶囊：我用 CodeBuddy 实现了一个「太空感」单页应用

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

在一个很普通的深夜，我突然冒出一个小念头：要是能给未来写封信，把它塞进一颗在太空中漂浮的胶囊里，然后等某一天它自动打开，会不会有点意思？这个想法有点突兀，但我很快就动手打开了 CodeBuddy，跟它聊了聊这个有点异想天开的点子：

想做个单页应用，用 UniApp 写，名字叫 TimeCapsule。功能嘛，就是写下未来想说的话，整个界面最好有种太空漂浮的感觉。

原本以为它会像平时那样，给我提些“你可以从 XX 开始”之类的建议，结果没想到它直接切入正题，像个太空舱里的工程师一样，开始罗列任务清单、设计模块、规划实现路径。从渐变星空背景、流星动效，到玻璃风格输入框、定时提醒、胶囊拖动……一瞬间就像脑海里开了一场小型前端宇宙大会。

初始搭建：index.vue 从头到脚换了个样

我当时给的是一个很普通的 UniApp 模板，只带了个简洁的 index.vue 页面。结果 CodeBuddy 上来就说：这个不改不行，它干脆决定推翻重构。

重新生成的页面直接就写了 400 多行代码，内容排得满满当当，包括底部挂载的 Canvas 背景、悬浮输入框、日期选择器、提交按钮，还有显示胶囊、倒计时提醒等功能。

我随手跑了一下，结果一片红：

• 输入区没显示
• 背景空空如也
• 控制台报了错：The specified value "0" does not conform to the required format, "yyyy-MM-dd"

它看了一眼就知道问题出在 <input type="date"> 的默认值设为 0，不符合标准格式。于是直接把逻辑改了，设了个合法默认日期，绑定也顺带修了，页面终于正常跑起来。

星空背景 + 流星动效：一整片宇宙跃然眼前

原以为这类动效得我亲自写粒子系统，结果发现 CodeBuddy 已经封装好了两个函数：drawStars() 和 animateMeteor()。流星会从不同角度掠过，速度、方向都是随机的，还自带拖尾渐隐效果。

这些动效用 requestAnimationFrame 驱动，结合深蓝到紫黑的渐变背景，效果说不出的浪漫，整个页面突然变得像深夜观星那样沉静又动态。

在这里插入图片描述

Canvas 被挂到底部，绝对定位并设了 z-index: -1，不遮挡其他内容，安静做背景，效果很自然。

中心输入框和日期选择器：轻盈浮动的玻璃拟态

页面正中放了一个圆形输入区，透明中带着模糊光感，是用 border-radius: 50% 配合 backdrop-filter: blur(8px) 实现的。边缘还有一圈淡白边，浮感十足，正好贴合我之前说的“太空漂浮”概念。

下方是日期选择器。它默认只允许选未来 1 天到 1 年内的时间，填错了立马弹提示框。选定后还会自动转成合法格式，整体交互相当顺滑。

在这里插入图片描述

我还蛮喜欢这个圆形输入框，里面做了输入长度限制和防抖，写多了不会卡住。能看出 CodeBuddy 不是只顾功能跑通，细节上也考虑得挺周到。

胶囊展示区：信件真的“飘起来了”

提交完之后，页面上方会浮现出一张“太空胶囊”，像一封藏在玻璃信封里的未来来信。视觉上做得挺克制，没有太多修饰，但边框的拟态玻璃 + 漂浮动画组合起来，看起来非常贴题。

而且这些“胶囊”还可以拖动！它用了一套简单的监听逻辑，绑定了 touchstart、touchmove 和 touchend，用 transform: translate 实时更新位置。初始生成的时候，每颗胶囊都会随机落在不同位置，看着像是真在太空里轻轻飘着，很有意境。

时间到了会提醒 + 绽放动画：氛围拉满

让我印象最深的一部分，是它实现的“倒计时弹窗”功能。它会用 setInterval 轮询所有胶囊的设定时间，一旦到了预设日期，就弹出模态框，把之前写下的文字展现在屏幕中央。

同时还触发了粒子爆发动画，像一束星屑在屏幕上散开。氛围感一下就上来了，有种特意为那一刻准备好的仪式感。这背后其实涉及多个模块的协同：本地存储、定时检测、动画控制，配合得很紧凑，做得比我想象中细致。

写在最后：这一次，它像是另一个我

TimeCapsule 的整个实现过程中，CodeBuddy 不是给我“参考建议”，而是真正动手构建、推演细节、兜底问题。哪怕我只是说了几句话，它已经主动往前推了好几步。

我原以为它会靠关键词拼凑答案，但它显然对 UniApp 的结构很熟，还能写出代码风格统一、模块分明的完整页面。动画、交互、逻辑全都对齐得很好，Canvas 中的每段代码也都附了注释，基本上我接手就能直接继续改。

这个项目让我感觉到，它不只是“工具”，更像是我思考过程中的另一个声音，一个靠谱的技术搭档。之后再有想法，我还会找它一起玩新的点子。

在这里插入图片描述