Plan Mode 实战：为现有 Vue3 项目接入 CloudBase 持久化能力

上次 Plan Mode 实战，我们是直接生成了一个全新的“合同管理”模块。新模块由于关联的内容较少，难度确实会低一点。

《“狗都不用”的 Cursor Auto 模式，竟靠 Plan Mode 真香回归？ - 掘金》

我们日常面对更多的任务，应该都是基于已有代码的修改。

今天，我们就在一个已有代码的工程中，尝试一下 Plan Mode 的实际效果如何。

背景介绍

应用介绍

这次测试的场景是一个新项目：集萤，名字来源于“囊萤映雪”的典故，寓意学习、坚持。

主要用于记录日常的碎片化内容，比如灵感、待办、备忘等等。

功能简介

1、主页：碎片内容维护界面，支持筛选，快速添加功能后续会直接接入 AI，实现聊天式录入，自动解析创建。

2、周视图：主要用于从一周的角度总览各种事项，方便计划或者总结时使用。

3、四象限：基于四象限方法辅助管理待办事项。

4、合集：为碎片内容设置不同合集，方便区分各种类型事项。

本次任务

目前项目已经基本实现了初版的界面效果（Vue3实现），今天的任务则是在不改动现有前端界面的前提下，为核心页面接入数据持久化能力。

由于该应用规划为轻量、易用，因此，后端决定采用云数据库的模式，考虑到网络问题，最终选择了腾讯云的 CloudBase，开发测试阶段免费哦。

实操记录

下面我们开始实际操作，开发环境是 Cursor，模型采用的 Auto 模式。

准备工作

CloudBase 使用需要：

1. 注册一个腾讯云账号并登录。
2. 创建一个“云开发”环境，选择免费的即可，此处的环境id会作为后续 sdk 访问的标识。
3. 开通“云开发平台”中的“数据库”功能。

此处为了查询、筛选高效，我选择了关系型数据库 MySQL。

然后添加需要的两个数据模型（可以理解为数据库中的表格）：contents（碎片内容）、collections（合集）。

初版生成

上面配置好之后，我们开始初版生成，采用 Plan 模式。

指令

现在应用界面已基本实现，仔细了解当前代码。
接下来需要实现cloudbase云数据库（MySQL 数据库）存储业务数据。
数据库访问优先采用非sql模式。

这版提示词其实是第二次尝试，第一次提示词中没有显式指明 CloudBase、MySQL数据库、非sql模式等名词，导致生成结果不太好。

于是简单了解了 CloudBase 相关概念后，改进了提示词。

过程

步骤1：可以看到，和之前的尝试一致，先是确认需求细节。

步骤2：然后根据选择结果，生成文档。这里将前面步骤创建的数据模型导出为 json 传递到上下文中，提高代码生成准确率。

步骤3：审阅文档发现，只识别出来一个应用界面进行对接，另外3个界面并没有识别出来，好在 Cursor Plan 模式支持直接修改文档。

修改完成后，点击“Build”开始生成。

结果

整个生成过程未发生过大的偏移，计划中的 todo 都完成了，包括我们手动修改的内容。

优化改进

虽然初版生成整体效果很不错，也没有语法错误，但依然存在一些小问题。

问题1：CloudBase 的接口访问需要授权后才能调用，当前版本未设计用户体系，需要实现“匿名登录”。

解决指令：

<plan文档.md>
you can't request without auth

问题2：由于碎片内容表名是 ·contents·（内容），但四象限界面命名采用的碎片，未能有效理解，导致这块接口未对接。

解决指令：

<plan文档.md>
@Quadrant.vue 今日碎片显示的就是contents数据，四象限内也是显示contents数据（根据优先级进行划分，优先级中直接存储1、2、3、4，分别对应四象限的重要且紧急、重要但不紧急等）

最终结果

通过 AI 辅助修复，很快就修复了相关问题。

结语

今天主要有两点感触：

1. Cursor Plan 模式确实挺好用的，并且产品的完成度很高，不会出现那种 Plan 不行也无法自行调整的情况。
2. 云数据库（包括云函数）的模式在小应用开发中真的很有优势，不需要搭建后端服务，不需要写sql，仅仅进行必要的表设计即可提供 API 能力，十分简便。

如果你也正好感兴趣，可以根据以上内容自行尝试，也欢迎留言交流！