Skip to main content
文件编辑使用实践

文件编辑前端使用实践

Qoder CN 文件编辑，具备多文件代码修改（Multi-file Edit）和工具使用（Tool-use）的能力，可以与开发者协同完成编码任务，如需求实现、问题解决、单元测试用例生成、批量代码修改等。本文聚焦于前端研发中的典型场景，例如文生代码、图生代码、前端自研组件的引入、前端自研组件的代码重构等核心场景使用实践。

场景 1：前端组件引入

在现代前端开发中，开发者需要反复编写或集成符合企业设计规范的 UI 组件，如按钮、表单、导航栏和模态框。传统方式耗时费力，而基于提示词的方法通过简单描述即可快速生成或引入所需组件代码，大幅提升开发效率。

1. 企业知识库准备

为了使知识库检索增强技术发挥最佳效果，在知识库文档准备方面，针对前端组件类文档有以下要求。

前端组件文档准备原则

  1. 结构清晰：应按逻辑顺序组织，分为组件标题名称、基础用法与代码示例、属性、事件等，每个模块需有清晰标题。
  2. 标题与功能概述：使用清晰的标题（如 ColorPicker 颜色选择器）描述组件名称，简要说明组件的功能和用途（如“用于颜色选择，支持多种格式”）。
  3. 核心用法：
    • 针对基础用法，提供说明和使用组件的代码示例，展示组件的核心功能。
    • 如果有高级功能或者复杂用法，还需额外提供该场景下的代码示例。
      • 可以通过子章节的格式，分别介绍组件的不同高级功能，每个功能模块需提供代码示例和简要说明，展示如何启用特定功能或具体用法。
  4. 属性（Attributes）：以表格形式列出组件的所有可配置属性，包括参数名称、功能说明、数据类型、可选值范围和默认值。
  5. 事件（Events）：以表格形式列出组件触发的所有事件，包括事件名称、触发条件或时机、回调参数及其含义。
  6. 代码示例：提供代码实现示例即可。具体可参考以下《ColorPicker》示例。

文档参考示例

ColorPicker.md 
## ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

### 基础用法

使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。

```html
<div class="block">
  <span class="demonstration">有默认值</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">无默认值</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<script>
  export default {
    data {
      return {
        color1: '#409EFF',
        color2: null
      }
    }
  };
</script>
```

### 选择透明度

ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过 `show-alpha` 属性即可控制是否支持透明度的选择。

```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
```

### 预定义颜色

ColorPicker 支持预定义颜色。

```html
<el-color-picker
  v-model="color"
  show-alpha
  :predefine="predefineColors">
</el-color-picker>
```

### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| size | 尺寸 | string | medium / small / mini | — |
| show-alpha | 是否支持透明度选择 | boolean | — | false |
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex / rgb |
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
| predefine | 预定义颜色 | array | — | — |

### Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | 当前值 |
| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |

2. 场景演示：《自研组件 ColorPicker 的代码生成》

本演示中使用了 mall-admin-web 开源项目，特此感谢项目开发者对开源的贡献。 视频地址

场景 2：前端组件替换与重构

在现代前端开发中，开发者常需重构前端组件，如用新版替换旧版。传统方法需查找和手动替换组件，耗时费力。而使用 Qoder CN，通过提示词和组件文档库，可快速完成组件替换，提高重构效率。

1. 企业知识库准备

为了使知识库检索增强技术发挥最佳效果，在知识库文档准备方面，针对前端组件类文档有以下要求。 提示词示例： 这个 Table 组件是 @alicloud/console-components，帮我改成 @ali/cnd 的 CndTable。以下《@ali-cnd CndTable.md》为更改后的示例。

文档参考示例

@ali-cnd CndTable.md 
#  @ali/cnd CndTable 表格组件

> 如果使用 refreshIndex 属性，初始值应设置为 0，设置为非 0 时, 第一次加载时可能造成 fetchData 函数执行两次

## 基本使用

```tsx preview
import React from 'react';
import { CndTable } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';

const Demo =  => {
  const columns = [
    { key: 'InstanceName', title: '实例名称', dataIndex: 'InstanceName', width: 300 },
    { key: 'Address', title: 'IP地址', dataIndex: 'Address', width: 300 },
    { key: 'CreationTime', title: '创建时间', width: 300, dataIndex: 'CreationTime', sortable: true },
    { key: 'Status', title: '状态', dataIndex: 'Status', width: 300 },
  ];
  const fetchData = async params => {
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', { params });
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      pagination={{ current: 1, pageSize: 10, total: 40 }}
    />
  );
};

export default Demo;
```

## operation && secondaryOperation

```tsx preview
import React from 'react';
import Table from '@ali/cnd-table';
import { Button } from '@alicloud/console-components';

const Demo =  => {
  // ...columns 与 fetchData 同上
  return (
    <Table
      columns={columns}
      fetchData={fetchData}
      pagination={{ current: 1, pageSize: 10, total: 40 }}
      showRefreshButton
      operation={<Button type="primary">自定义左上角按钮</Button>}
      secondaryOperation={<Button>自定义右上角按钮</Button>}
    />
  );
};

export default Demo;
```

## refreshIndex / showRefreshButton / search / selection 等

> 以上属性可组合使用，用于手动刷新、搜索栏、行选择、轮询等场景，具体用法参见组件源码示例。

## API

> 继承 [@alicloud/console-components-table](https://xconsole.aliyun-inc.com/nexconsole/component_web/wyqgmh#/apis) 组件的 API

| 名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| fetchData | (data: IParams) => Promise<IResult> | 请求数据源的方法, 入参包含搜索条件和分页信息等 | - |
| refreshIndex | number | 触发刷新操作，重新请求 fetchData | 0 |
| recordCurrent | boolean | refreshIndex 更新后是否停留在当前页 | false |
| showRefreshButton | boolean | 是否显示刷新按钮 | false |
| search | IRcSearchProps | 搜索栏配置 | - |
| columns | ColumnProps[] | 列描述数据对象 | - |
| operation | ReactNode | 自定义左上角内容 | - |
| secondaryOperation | ReactNode | 自定义右上角内容 | - |
| isShowLoading | boolean | 数据刷新时是否需要展示 loading | true |
| loop | Object | 接口是否轮询，以及轮询时间设置 | { enable: false, time: 10000, showLoading: false } |

### IParams

```
interface IParams {
  current?: number;
  pageSize?: number;
  [key: string]: any;
}
```

### IResult

```
interface IResult {
  data: any[];
  total?: number;
}
```

2. 场景演示：《自研 table 组件的快速重构与替换》

视频地址

场景 3：文生代码

体验如何使用 Qoder CN 文件编辑，从零开始快速构建销售大盘前端页面。只需输入需求或设计思路作为提示词，Qoder CN 文件编辑即可自动生成前端代码，您可以直接运行并在浏览器中预览，实现从构思到展示的无缝对接。

1. 场景演示：《销售大盘前端页面生成》

视频地址
产品概述
操作指南
实践教程
服务支持
开发参考