cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
259 lines (242 loc) • 6.82 kB
Markdown
### 按钮形态
```tsx
import React from 'react';
import { Icon, Upload, Button } from '@alicloud/console-components';
function beforeUpload(info) {
console.log('beforeUpload : ', info);
}
function onChange(info) {
console.log('onChange : ', info);
}
function onSuccess(info) {
console.log('onSuccess : ', info);
}
export default () => {
return (
<div>
<Upload
action="https://upload-server.alibaba.net/upload.do"
beforeUpload={beforeUpload}
onChange={onChange}
onSuccess={onSuccess}
listType="text"
defaultValue={[
{
name: 'IMG.png',
state: 'done',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
{
name: 'IMG.png',
state: 'uploading',
percent: 50,
downloadURL: '',
fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: '',
},
{
name: 'IMG.png',
state: 'error',
errorMsg: '上传失败提示',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
]}
>
<Button>
<Icon type="upload" size="small" />上传本地文件
</Button>
</Upload>
</div>
);
};
export const meta = {
title: '',
describe: '',
};
```
### 区域形态
```tsx
import React from 'react';
import { Upload } from '@alicloud/console-components';
function beforeUpload(info) {
console.log('beforeUpload : ', info);
}
function onChange(info) {
console.log('onChange : ', info);
}
function onSuccess(info) {
console.log('onSuccess : ', info);
}
export default () => {
return (
<div>
<Upload.Card
beforeUpload={beforeUpload}
onChange={onChange}
onSuccess={onSuccess}
listType="card"
showDownload={false}
defaultValue={[
{
name: 'IMG.png',
state: 'done',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
{
name: 'IMG.png',
state: 'uploading',
percent: 50,
downloadURL: '',
fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: '',
},
{
name: 'IMG.png',
state: 'error',
errorMsg: '上传失败提示',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
]}
>
上传本地文件
</Upload.Card>
</div>
);
};
export const meta = {
title: '卡片式上传',
describe: '',
};
```
### 区域拖拽形态
```tsx
import React from 'react';
import { Upload } from '@alicloud/console-components';
function onDragOver() {
console.log('dragover callback');
}
function onDrop(fileList) {
console.log('drop callback : ', fileList);
}
export default () => {
return (
<Upload.Dragger
// 'text' | 'text-image' | 'image' | 'card' | 'picture' | 'picture-card' | 'none';
listType="image"
onDragOver={onDragOver}
onDrop={onDrop}
defaultValue={[
{
name: 'IMG.png',
state: 'done',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
{
name: 'IMG.png',
state: 'uploading',
percent: 50,
downloadURL: '',
fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: '',
},
{
name: 'IMG.png',
state: 'error',
errorMsg: '上传失败提示',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
},
]}
/>
);
};
export const meta = {
title: '',
describe: '',
};
```
### 自定义Request
```jsx
function customRequest(option) {
/* coding here */
return {
abort() {
/* coding here */
},
};
}
<Upload request={customRequest} />;
```
### onChange 返回结构
```jsx
{
uid: 'uid', // 文件唯一标识
name: 'xx.png' // 文件名
state: 'done', // 状态有：selected uploading done error
response: {"success":true} // 服务端响应内容
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', // 头像(可选)
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg' // 下载(可选)
}
```
### 接口 response 返回数据格式要求
```jsx
{
"success": true,
"message": "上传成功", // success=false 时候可以展示错误
"url": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg", // 返回结果
"imgURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg", // 图片预览地址 (非必须)
"downloadURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg" // 文件下载地址 (非必须)
}
```
### 后端数据格式化
```jsx
{
"status": "success", // 上传成功返回码
"img_src": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg", // 图片链接
}
```
```jsx
<Upload
action="http://127.0.0.1:3001/upload"
formatter={(res, file) => {
// 函数里面根据当前服务器返回的响应数据
// 重新拼装符合组件要求的数据格式
return {
success: res.status === 'success',
url: res.img_src,
};
}}
/>
```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```