方案概述
Cursor是现在最火的代码编辑器之一，它率先提出了Composer的代码生成方案（现在的Agent模式），再加上Claude模型强大的代码生成能力，使得程序员的研发效率大大提升，同时它还完美的支持MCP能力，能够在进行代码研发过程中轻松接入三方能力，因此，我们提供一套利用Cursor来快速进行宜搭页面的方案。
先来感受下 Cursor 如何在几分钟内完成「设备巡检」应用的搭建：
感兴趣的开发者，欢迎打开钉钉扫码加入【Yida × Cursor 交流群】
现有的方案包含以下个能力：
- 通过Cursor编辑器连接宜搭表单设计器，支持低代码页面生成，用户可以基于生成的宜搭页面继续在设计器中进行二次编辑；
- 通过Cursor编辑器连接宜搭自定义组件设计器，支持源码组件（目前支持React、antd、chart.js和lodash模块）的生成，同时可以自动生成属性面板，无法在宜搭中进行二次编辑，但是可以在自定义页面、表单页面中直接使用；
PS: 本方案主要针对有前端开发经验的开发者，后续我们也计划提供Chat模式版，无需安装任何开发环境，也无需关注代码细节，直接在宜搭中通过对话便可进行复杂的宜搭功能实现。
案例展示
本部分主要介绍通过我们现有的Yida x Cursor方案生成的一些典型的案例。
表单生成
表单生成的场景主要通过将宜搭Schema转成React源码，让Cursor生成代码后再转成宜搭Schema方案，生成后用户可以基于宜搭继续已低代码方式进行二次编辑。
设备巡检 支持能力：
|
学生信息收集 支持能力：
|
学生信息收集
自定义组件生成
自定义组件生成的场景主要for 纯源码的场景，我们会在本地将源码进行编译上传到宜搭，类似V0的方案。
公司财报 通过Cursor联网查询能力查询财报数据，通过chart.js组件进行数据可视化 |
TodoList 借助Antd组件制作一个简单的TodoList组件，支持设置任务上限及状态变化监听 |
贪吃蛇 制作一个简单的贪吃蛇游戏，支持设置游戏区域大小及游戏速度 |
公司财报
通过Cursor联网查询能力查询财报数据，通过chart.js组件进行数据可视化。
TodoList
借助Antd组件制作一个简单的TodoList组件，支持设置任务上限及状态变化监听。
贪吃蛇
制作一个简单的贪吃蛇游戏，支持设置游戏区域大小及游戏速度。
快速开始
本部分将介绍如何从0开始搭建一个Cursor连接宜搭的研发工具，并通过Cursor来快速生成宜搭页面，首先我会通过文字形式介绍，章节最后会提供视频教程。
环境准备
开始之前我们需要安装开发环境，如果已经安装可以忽略；
- Nodejs - 前端基础的研发工具，可以借助nvm等node管理工具进行安装；
- Cursor - 现在非常火的代码编辑器，可以通过Cursor官网进行下载安装，初次注册可以免费试用15天；
- Yida-Code插件 - 用于连接Cursor及宜搭设计器的编辑器插件，需要下载安装包，并通过VSIX方式安装到Cusror中；
>>>钉钉扫码加入【Yida × Cursor 交流群】获取插件安装包<<<
>>>钉钉扫码加入【Yida × Cursor 交流群】获取插件安装包<<<
下面是一个视频教程，默认认为用户已经有了NodeJS和Cursor，仅演示Yida-Code插件的安装；
项目初始化
接下来我们就可以初始化我们的项目环境了，项目初始化只需要进行一次，主要分为以下几步：
- 创建开发项目文件夹 - 可以创建一个空的文件夹，并用Cursor打开该文件夹；
- 初始化项目 - 通过
Cmd+Shift+P打开Cursor的Command工具，并选择“Yida-初始化项目”命令进行项目初始化； - 创建NotePad。文件 - 创建一个NotePad文件，并将项目目录下的rule.md文件拷贝到NotePad中，同时需要将文件中的
global.d.ts和propType.d.ts引入到NotePad中（Cursor工具中的NotePad支持引用文件，但是需要手动引入，可以参考视频中的操作）； - MCP配置 - Yida-Cursor插件提供了连接宜搭AI能力的MCP Server，我们目前提供了一个文生图的MCP Server，可以从package.json文件中复制mcp配置脚本并在Cursor Setting中进行配置；
代码生成
到这一步我们就可以通过Cusror连接宜搭设计器进行代码生成了，代码生成分成表单生成和自定义组件生成，我会分为两个部分来讲解：
表单生成
Cursor可以通过连接表单设计器进行表单页面生成，具体步骤如下：
- 启动宜搭代码同步服务 - 在Cursor中通过
Cmd+Shift+P命令打开“Yida-启动代码同步服务”； - 打开设计器源码面板 - 打开宜搭表单设计器，在Url上增加
showCodePane=true参数，会发现设计器中会增加一个源码面板，打开源码面板宜搭设计器会自动连接Cursor编辑器（若没有自动连接，可以点击手动连接）； - 同步代码 - 点击源码面板中的“同步代码到本地”按钮，会将页面Schema转换成React代码并同步到本地项目，对应页面会按照应用ID及页面ID的目录层级存放到pages目录下；
- 代码生成 - 用户可以打开刚刚同步过来的页面代码，同时在Cursor的Chat模式下引入项目初始化是创建的NotePad文件，就可以进行页面生成和修改了，首先Cursor会修改本地文件，当文件保存时本地代码会自动转成宜搭页面的Schema并同步到宜搭设计器中；
自定义组件生成
Cursor可以通过连接表单设计器进行表单页面生成，具体步骤如下：
- 启动宜搭代码同步服务 - 在Cursor中通过
Cmd+Shift+P命令打开“Yida-启动代码同步服务”； - 打开设计器源码面板 - 打开宜搭自定义组件设计器，在Url上增加
showCodePane=true参数，会发现设计器中会增加一个源码面板，打开源码面板宜搭设计器会自动连接Cursor编辑器（若没有自动连接，可以点击手动连接）； - 组件改造 - 首先需要对自定义组件进行改造（仅第一次创建组件时需要），点击源码面板中的“改造组件”按钮将组件改造为源码组件；
- 同步代码 - 点击源码面板中的“同步代码到本地”按钮，会将页面Schema转换成React代码并同步到本地项目，对应页面会按照组件ID放到对应的components目录下，初始情况是两个空文件
index.tsx和proptype.json； - 代码生成 - 用户可以直接在刚刚同步的文件中进行组件生成了（目前生成的源码组件仅支持React、antd、chart.js 和 lodash），cursor会自动生成两个文件内容，当文件保存时会将信息同步到组件设计器：
- index.tsx - 组件的主要代码实现；
- proptype.json - 组件属性面板描述；
- 组件安装 - 组件生成好后，将组件安装到对应的应用就可以直接在应用中使用该组件了；
- 组件使用 - 在自定义页面或者表单页面的自定义组件Tab就可以看到刚刚生成的组件，用户可以直接将该组件拖到页面中进行使用；
功能列表
本部分标明了现有Yida x Cursor方案支持的功能列表，后续我们会不断完善。
低代码页面生成
领域 |
功能点 |
支持情况 |
搭建组件 |
单行文本 |
? |
多行文本 |
? | |
数字 |
? | |
单选 |
? | |
多选 |
? | |
下拉选择 |
? | |
下拉多选 |
? | |
日期 |
? | |
日期区间 |
? | |
图片 |
? | |
附件 |
? | |
评分 |
? | |
地址 |
? | |
分组 |
? | |
容器 |
? | |
文本 |
? | |
链接 |
? | |
链接块 |
? | |
按钮 |
? | |
功能 |
组件增删改 |
? |
图片生成 |
? | |
JS代码生成 |
? | |
表单项校验 |
? | |
页面State管理 |
? | |
属性变量绑定 |
? |
源码自定义组件生成
领域 |
功能点 |
支持情况 |
组件代码依赖包 |
React |
? |
antd |
? | |
chart.js |
? | |
lodash |
? | |
属性面板配置 |
布尔 |
? |
文本 |
? | |
单选 |
? | |
数字 |
? | |
日期 |
? | |
列表 |
? | |
事件 |
? |
常见问题
1，增加了参数，但是设计器中未出现源码面板？
本功能在进行小范围的功能内测，因此如果发现增加showCodePane=true参数后设计器源码面板未展示，需要申请内测，申请通过后，我们会开启组织灰度；
2，源码面板始终连接不上本地Cursor编辑器？
可以从两个方面进行排查：
- 确保在Cursor编辑器中启动了代码同步服务；
- 判断本地3000端口是否被占用，代码同步服务会在本地启动3000的端口进行消息通讯，若3000端口被占用，则无法启动同步服务；
3，如果生成的代码在宜搭中报异常了怎么办？
由于代码是大模型生成的，具有一定的随机性，因此有可能出现宜搭不兼容的情况，遇到这种情况，可以在Cursor编辑器中回滚一下上次修改，并保存页面先恢复到上次的效果，再借助Chat重新生成；
4，生成页面代码时没有按照rule的规则进行生成？
可以进行以下排查：
- NotePad中是否正确引用了global.d.ts 和 propType.d.ts声明文件;
- 代码生成的时候是否开启Agent模式，同时是否引入了当前编辑文件及NotePad文件；
5，自定义组件生成过程中无法进行文生图？
由于权限管控，目前只有页面生成场景可以调用文生图的 MCP Server 能力；
>>>钉钉扫码加入【Yida × Cursor 交流群】<<<
