CodeRider Loom基于自定义组件生成前端页面

1. 需求背景

在企业一些表单类系统业务场景中，研发团队一般会根据业务情况封装一些自定义的前端组件库。如基于Vue和Element UI，使用企业统一的设计风格，实现了文本框、日期选择器、地址选择器、表单控件、下拉菜单等组件，部分组件甚至预绑定了数据源。

由于大部分表单系统需要频繁、快速响应企业复杂、多变的业务流程。开发人员根据需求文档，使用自定义组件设计新表单页面，并确保设计风格与当前系统的其他表单页面一致。这个过程技术难度不大，但重复性高，占用开发人员较长工作时间，影响工作效率。

使用CodeRider新推出的编程智能体Loom，可以自动生成表单页面的代码，依据当前项目的设计风格和自定义组件，快速响应需求。开发人员只需提供基本的业务逻辑和数据结构，Loom便能智能推导出所需的组件组合，自动处理样式和布局。这种自动化不仅减少了重复劳动，还能有效降低人为错误，确保最终产品的一致性和高质量，让开发团队能够将更多精力集中在业务创新和优化上。

根据调用组件库的方式，该场景可划分为两类情况：一类是直接在项目中引用组件库的源代码或相对路径（本地组件库场景）；另一类是将组件库封装成引用库，如npm，在项目中安装引用（软件包管理场景）。下面将根据这两类场景，介绍并演示CodeRider Loom的功能和实际效果。

注意：本文不对驭码CodeRider的基本功能做复述和展开，如果您想了解驭码CodeRider的相关信息，可以：

• 查看 驭码CodeRider官方网站
• 查看《快速上手驭码CodeRider》文档

2. 本地组件库场景

2.1 创建本地组件库

以项目 https://jihulab.com/rang.wu/demo-vue 为例，在src/components中，已封装好一些组件，并给每个组件添加了简单的注释，如：

// 日期选择器
    <template>
      <el-date-picker
        v-model="dateTimeValue"
        class="flat-input"
        type="datetime"
        :placeholder="placeholder"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        />
    </template>

  <script>
    export default {
      name: 'DateTimePicker',
      props: {
        placeholder: {
          type: String,
          default: '请选择日期时间'
        }
      },
      data() {
        return {
          dateTimeValue: new Date().toISOString().replace('T', ' ').substring(0, 19)
        }
      }
    }
  </script>

  <style scoped>
    .flat-input {
      border-radius: 0;
      border-color: #F56C6C;
    }
  </style>

2.2 创建已存在的表单页面

在项目中已经添加了src/views/account.vue表单页面，作为已经存在的表单页面。

2.3 基于本地组件库和旧表单生成新表单

2.3.1 提示词

创建一个新申请单页面address，内容如下：

标题：员工办公地址变更

内容：
序号|名称|字段类型|数据来源|是否只读|是否必填|说明
1|申请人|文本框|当前用户|是||本示例为张三
2|申请部门|文本框|当前用户的部门|是||本示例为IT部
3|申请时间|日期选择器|当前日期时间|是||
4|地址变更申请表|表格编辑器||||
4-1|用户|用户选择器|||是|
4-2|原地址|地址选择器|系统中记录的用户地址|是||
4-3|变更地址|地址选择器|||是|
4-4|变更理由|下拉框（岗位移动、个人原因）|||是|
4-5|备注|文本框||||


其他说明：
1. 参考 #/src/views/account.vue 页面样式和风格
2. 使用 #/src/components/ 中的组件
3. 必填项加*
4. 增加页面路由

在该提示词中：

1. 明确使用src/components/ 路径下面的自定义组件。
2. 明确参照src/views/account.vue 页面的设计风格。
3. 明确了新表单的具体需求，并在需求中明确了每个字段使用的自定义组件类型，注意需要使用明显的分隔符来分隔字段，以免字符串错位导致需求理解错误。
4. 明确了其他的要求。

2.3.2 生成效果

可以看到CodeRider Loom使用了本地自定义的组件，而非通用的文本框、下拉框，并且参考了src/views/account.vue 页面的设计风格，整个过程仅花费数十秒，开发效率得到了极大提升。

但AI生成的内容未必100%准确，开发人员需要根据实际情况进行调整，如“申请时间”没有默认显示，可以输入提示词“申请时间没有默认值”，CodeRider Loom会自动修复该问题。但有些复杂的问题AI尝试多次依然无法修复后还是需要人工介入处理，随着AI大模型的发展，这些问题可以得到持续优化和完善。

3. 软件包管理场景

3.1 创建软件包

我已将上述项目的src/components组件封装成了npm库，并上传到了 https://www.npmjs.com/package/coderider-demo-vue 中。

3.2 创建已存在的表单页面

切换到import分支，在该分支下，我已删除了本地组件库src/components，并将src/views/account.vue换成了使用npm软件包的方式，作为已存在的表单。

可以使用下面命令安装自定义的软件包库，以验证效果：

npm install coderider-demo-vue

3.3 创建软件包索引文件

由于使用软件包库，本地不再有组件库的源代码，需要提供一份索引文件说明各个组件的名称、功能、使用方式，便于AI工具查找。

可使用CodeRider Loom 完成，下载 https://www.npmjs.com/package/coderider-demo-vue 源代码，使用提示词：

将component下的组件整理到README.md中，格式如下：
## 软件包名称
## 安装方式
## 全局注册方式
## 按需注册方式
## 组件说明
### 组件1名称（文件名）
- **描述（注释）**：
- **调用方式**：
### 组件2名称（文件名）
- **描述（注释）**：
- **调用方式**：
...

目前 https://www.npmjs.com/package/coderider-demo-vue 中的README.md已经包含了上述内容。

## coderider-demo-vue

## 安装方式
```bash
npm install coderider-demo-vue
```

## 全局注册方式
```js
import { createApp } from 'vue'
import CoderiderDemoVue from 'coderider-demo-vue'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(CoderiderDemoVue)
```

## 按需注册方式
```js
import { AddressSelector, DateTimePicker, PersonSelector, RedButton, SelectInput, TableEditor, TextInput } from 'coderider-demo-vue'
```

## 组件说明

### AddressSelector（AddressSelector.vue）
- **描述**：地址选择器
- **调用方式**：
  ```vue
  <AddressSelector />
  ```

### DateTimePicker（DateTimePicker.vue）
- **描述**：日期选择器
- **调用方式**：
  ```vue
  <DateTimePicker />
  ```

### PersonSelector（PersonSelector.vue）
- **描述**：用户选择器
- **调用方式**：
  ```vue
  <PersonSelector />
  ```

### RedButton（RedButton.vue）
- **描述**：按钮
- **调用方式**：
  ```vue
  <RedButton>按钮</RedButton>
  ```

### SelectInput（SelectInput.vue）
- **描述**：下拉框
- **调用方式**：
  ```vue
  <SelectInput />
  ```

### TableEditor（TableEditor.vue）
- **描述**：表格
- **调用方式**：
  ```vue
  <TableEditor :modelValue="tableData" :columns="columns" />
  ```

### TextInput（TextInput.vue）
- **描述**：文本框
- **调用方式**：
  ```vue
  <TextInput />

我们需要将这个索引文件内容拷贝到项目本地，如coderider-demo-vue.md。

3.4 基于本地索引文件和旧表单生成新表单

3.4.1 提示词

在该提示词中，我们要求CodeRider Loom基于本地的索引库来使用自定义的组件库：

创建一个新申请单页面address，内容如下：

标题：员工办公地址变更

内容：
序号|名称|字段类型|数据来源|是否只读|是否必填|说明
1|申请人|文本框|当前用户|是||本示例为张三
2|申请部门|文本框|当前用户的部门|是||本示例为IT部
3|申请时间|日期选择器|当前日期时间|是||
4|地址变更申请表|表格编辑器||||
4-1|用户|用户选择器|||是|
4-2|原地址|地址选择器|系统中记录的用户地址|是||
4-3|变更地址|地址选择器|||是|
4-4|变更理由|下拉框（岗位移动、个人原因）|||是|
4-5|备注|文本框||||


其他说明：
1. 参考 #/src/views/account.vue 页面样式和风格
2. 使用 #/coderider-demo-vue.md 中的组件
3. 必填项加*
4. 增加页面路由

3.4.2 生成效果

与本地组件库的生成的效果一致，但本地并没有存放自定义组件的源代码，而是仅存放了一个索引库：

4. 方案优化与展望

在上述方案和示例中，CodeRider Loom虽然很好的完成了我们的需求和任务，但还有一些优化的方向：

4.1 多模态

在2.3.1和3.4.1的示例中，需要将表单的需求文档转换成提示词，并使用明显的分隔符来分隔字段，效率较低。我们可以使用多模态大模型，直接将设计稿和需求文档图片贴到对话框中，可以获得更好的效率和体验。

如基于2.3.1的示例，我们可以将提示词修改为：

创建一个新申请单页面address，内容如图：

其他说明：
1. 参考 #/src/views/account.vue 页面样式和风格
2. 使用 #/src/components/ 中的组件
3. 必填项加*
4. 增加页面路由

直接将我们的需求文档截图贴在CodeRider Loom中，当然，需求文档本身也需要符合一定的格式要求：

使用多模态大模型，直接粘贴需求文档截图，极大减少了提示词的复杂度，此外也可以直接粘贴设计稿，让AI参考设计稿的布局，能满足更复杂场景的设计需求。

4.2 Rules与MCP

在2.1和3.3的示例中，我们只使用了一个本地组件库，或对这个本地组件库建立了本地索引。如果项目中使用了多个组件库，对于每个组件库都建立本地索引库，还需要通过提示词说明什么场景使用什么本地索引库，这样就太复杂了。

另外组件库放在本地也不利于复用，我们可以将索引库放在云端或服务端，这样所用用户都可以使用。

CodeRider近期也会上线Rules和MCP功能，基于这两个功能可以实现：

1. 通过MCP接入 Context7 ，将我们的自定义组件放到Context7中进行管理。

2. 在项目Rules中设置哪些场景使用哪套自定义组件，如：

   # 项目规则
   ## 前端组件
   所有组件使用coderider-demo-vue，use context7 libraryName Coderider Demo Vue
   ## 前端框架
   当前项目使用 vue3 和 Element Plus 2.9， 生成代码或查询相关文档时使用Context7获取相关信息 use context7

   这样CodeRider就会基于这个Rules针对不同的开发需求，调用Context7查看公共库或自定义组件库，避免我们需要写复杂的提示词来实现需求。

由于Context7目前仅提供SaaS功能，意味着如果要使用Context7，您需要能联网访问Context7的网站，并且需要将您的本地索引库上传到Context7并公开，存在一些安全风险。为了解决这个问题，我们也计划开发GitLab的MCP，将本地索引库上传到企业内网的GitLab中，通过MCP按需调用，就可以同时解决复用和安全问题。

使用CodeRider的编程智能体Loom，开发人员能够基于自定义组件、基于当前项目的业务逻辑、设计风格快速生成高质量的代码，减少重复劳动，专注于业务创新与优化，为软件开发带来显著的便利与效率提升。未来，CodeRider将持续迭代与升级，整合更多先进技术，进一步简化开发流程，提升团队协作效率，助力企业在快速变化的市场中保持竞争力。