前端页面代码生成
场景一：根据figma设计生成代码
实现流程
前端页面生成的主要步骤：配置Figma MCP服务 -> 添加规则 -> 生成提示词 -> 生成代码。
1.配置Figma MCP服务：
- 配置方法请参考Figma MCP服务配置文档。
2.添加规则
友码中可以添加项目规则，这个规则则是告诉友码我们在当前项目中进行问答或者生成代码是需要遵循的一个规则，根据各个部门的项目情况，有部分已经准备好的规则模板供大家使用（每个规则模板针对各个部门的项目）。
作用：
- 使用了框架提示后，AI生成的代码会参考框架提示词里的内容，使得生成的的代码更符合业务要求
规则来源：
- 规则可以通过直接让AI生成后，自己修改。提示词：分析项目，生成规则
- 使用模版（推荐），具体参考前端规则模版
2.1 添加步骤
打开规则管理
编辑规则
如果有多个规则，重复上面步骤，也可以将文件复制到.youcode/rules目录下，友码会自动加载这些规则。
3.提示词
3.1 复制Figma 链接
打开figma页面，选择需要的设计区域，复制url
3.2 修改提示词模板
作用： 根据语言描述，生产代码
构建提示词，有模板如下(注意替换figma的url地址)
基础版
根据figma设计生成页面，地址为：https://www.figma.com/design/RCY8LKf9t7CRnn2tKE7vSw/%E5%88%B6%E9%80%A0?node-id=198-343&t=rn2vg979ICsSnMal-4
进阶版
分为多个模块，示例如下，可以根据自己的需求修改
- 需求
- 描述：说明要做什么
- 来源：需求说明
- figma地址
- 描述：figma设计图的url
- 来源：复制figma网页url
- 生成要求
- 描述：生成的规则
- 来源：使用的组件、API格式等
- 业务规则
- 描述：业务描述
- 来源：复制figma的设计稿中业务规则描述
- 特殊规则
- 描述：其他要求
- 来源：根据自己需求决定是否增加
# 需求：
@/workspace\views\Srm\ReportForms\SupplierAccessQuery\api/api.js 添加接口
请求方式get添加接口/gateway/supplier/srm/supplier/Access/queryLySupplierAccessList.do
根据figma地址帮我新建一个页面，实现接口
## figma地址
https://www.figma.com/design/RCY8LKf9t7CRnn2tKE7vSw/%E5%88%B6%E9%80%A0?node-id=198-476&t=hvbVe7vEsB9v4TyX-4
## 生成要求
1、生成表头使用FormHeader组件
2、生成表格使用TableList组件
3、接口
--请求方式：get
--请求接口路径：/gateway/supplier/srm/supplier/Access/queryLySupplierAccessList.do
--请求参数:
---入参
purchOrgId: '',
supplierCname: '',
startDate: '',
endDate: '',
accessPatternCode: '',
supplyTypeNames: '',
isEva: '',
hasRisk: ''
---返回参数：
采购组织：purchOrgName
供应商编码：supplierCode
供应商名称：supplierCname
准入模式：accessPatternName
商品类别：supplyTypeNames
准入 (完成) 日期：accessAuditDate
是否进行 QCDDM：isEva
QCDDM 评价分数：qcddmScore
QCDDM 评价结果：qcddmEvaResult
是否进行财务风评估险评估：hasRisk
财务风险评估分数：riskEvaScore
财务风险评估结果：riskEvaResult
## 业务规则
一、查询条件：
1、【采购组织】下拉选择：全部、联友科技、联友智连科技
2、【准入日期】日历控件
3、【准入模式】下拉选项：新供应商准入、在库新增产品类别、在库重新评价；
4、【商品类别】弹窗选择（数据源来源与供应商商品列表配置表）；
5、【是否QCDDM评价】下拉选项：全部、是、否；
6、【是否财务风险评估】下拉选项：全部、是、否；
二、查询/重置操作：
【查询】点击查询，列表根据查询条件，筛选匹配数据
【重置】点击重置，已选查询条件自动清空，回到默认状态
三、排序：
排序：准入完成日期由晚到早，倒序；
四、导出：
点击后，按查询条件查询所有数据（不分页）进行导出，导出字段和列表相同
## 特殊规则
页面生成在@/workspace\views\Srm\ReportForms\SupplierAccessQuery\index.vue
生成表头使用FormHeader组件，生成表格使用TableList组件，这两个组件并不存在，也需要生成
mcp服务使用插件的Framelink Figma MCP
我的MCP服务名字叫Framelink Figma MCP
**重要：请同时在 @/src/router/index.js 文件中添加路由配置：**
{
path: '/index',
name: 'SupplierAccessQuery',
component: () => import('@/views/Srm/ReportForms/SupplierAccessQuery/index.vue')
}
4.生成代码
输入提示词后，点击回车，生成代码：
使用基础版
或者使用进阶版
4.1 打开浏览器验证
打开浏览器，输入服务地址，查看页面
场景二：根据新需求修改已有代码
1.需求修改
介绍： 主要用于修改接口参数需求，或者接口功能需求。
模板
- 功能描述：有什么样的功能
- 需求：希望功能变成什么样
案例
现在有一个导出功能的按钮，我希望将按钮变为红色
2.bug修改
介绍： 该情景主要是根据现有代码查找代码的问题，并修改bug。
模板
- 问题描述：出现了什么问题
- 现象：这个问题造成了什么现象
- 需求：需要的预期效果（bug解决或者提出方案）
案例
我发现index.vue中的采购组织选择框没有配置 events.change 事件监听器。
这个问题导致我在选择不同的采购组织时，不会触发表格数据的重新查询。
请帮我提出一个解决方案，我希望在index.vue 中当选中不同的采购组织发生时，能够触发监听器事件
其他功能描述（前端可以选择使用）
1. 极样引用
极样是极样团队中规定的样式变量，可以规定生成页面样式的一个标准，如果项目需要使用极样的样式引用，需要本步骤；否则，跳过。
直接在规则设置⾥加⼊样式规范规则，后续所有的⻚⾯都会按照这个规则⽣成
