前言
自从我的卡片功能和小程序稳定下来后，我就开始着手优化整体的界面和交互设计。之前因为时间紧迫，想先让大家体验一下，所以在一些地方妥协地用了原生API，结果感觉效果有点儿欠缺。最近这几天我下班后就投入到了优化中，但发现改造UI的过程实在是繁琐又重复。于是我灵机一动，觉得这类工作交给AI来做应该效果不错，结果开始用上了cursor。不得不说，cursor真的是太强大了！说实话，这两三天的工作量，差不多是我之前一周的成果。
这几天小程序更新了不少新功能和样式的改进，接下来我就先给大家介绍一下这些新特性，然后再聊聊我是如何用cursor进行优化的。
新特性
设置页
设置页是用来调整一些个性化配置的。毕竟使用小程序的人各有各的喜好，设备性能也参差不齐，所以我们特意增加了卡片动画效果和震动反馈的关闭选项。
另外，我们还推出了一种新的卡盒样式，现在有了拟态风格和现代风格。拟态风格更有层次感，看起来像真实的卡片，而现代风格则更加扁平化，圆角也更大，大家可以看一下这两者的区别：
目录功能
现在除了卡盒和卡片，我们还新增了一个目录功能，可以将卡盒进行分类，放在不同的目录下：
卡片列表切换（未发布）
在我使用的过程中意识到，卡盒其实也可以当成待办清单来用，所以我想设计一个列表模式，让大家可以在卡盒内自由切换。切换过程要尽量流畅，无论是短文本还是长文本，虽然文本太长时卡片数量多，宽高变化可能会让流畅度下降。最近我在手机上试了一下，发现比开发环境中流畅多了，可能是手机配置比较好吧。
快速新增卡片（未发布）
在大卡片模式中，拖动到最后一个轮播图时可以直接长按来添加新卡片，非常方便。
我如何使用cursor进行优化
我用的是cursor的claude-3.5 sonnect模型，主要是利用composer这个功能。composer可以让我们选中几个项目中的文件，然后告诉cursor我们的需求，它会分析当前的代码设计，并根据需求进行修改或生成新的文件。打开cursor后，使用快捷键 CTRL + I就能启动composer功能了。
第一次使用时，我选中了一个已有的弹窗设计，让它优化一下样式，让它看起来更清爽。之后又选了其他几个弹窗，让cursor统一风格。这样的调整仅用了两次对话，以前这种琐事我可能要花一两个小时，但用cursor只花了五分钟！
还有一个优化可读性的例子，我选择了一个vue文件，里面是我的卡片组件代码，让cursor帮我优化，并且给出一些注意事项：
cursor生成代码后，会告诉你调整的范围，最好还是自己再检查一下。有时一些变量的错误，cursor也可能会犯。
我使用cursor的感觉就像在和一个新人交流，你对自己的项目最了解。在使用cursor时，可以把相关的资料提供给它参考，完成后再验证一下功能是否正常，同时也要检查一下代码。如果发现问题，能够准确指出来让它帮忙修改。无论是需求还是问题，你越具体，效果就越明显。
目前我还是把一些繁琐的工作交给cursor处理，没有让它参与创意方面的工作。不过我看到有些人可以用cursor从零开始做一个app，可能我还没有完全挖掘它的潜力。
注意点
-
由于cursor的代码修改非常方便，可以同时改很多文件，但这也意味着控制性不如自己改。因此一旦确认没问题，就用git提交一下代码，保存当前记录，避免调整过多导致代码失控，带来意外问题。
-
修改代码后，记得点击一下接受改动，不然在切换不同的composer时，当前composer的改动会被移除，等到基于新的composer进行修改后，可能会导致代码冲突。
总结
我会更加频繁地使用cursor，它的实用性真的超出我的想象。作为一个高频使用AI工具的人，上手之后我觉得真是太方便了。以后如果有新的心得也会和大家分享。我会持续迭代学习卡盒小程序，不断提升它的易用性，欢迎大家体验，也会积极采纳评论区的好建议。有兴趣的朋友可以让我拉你进体验版，提前体验到很多新特性。
看到这里的你，记得关注一下我的博客哦，谢谢！ https://moondev.asia/
