cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
800 lines (748 loc) • 26.9 kB
Markdown
group:
title: 云原生业务组件
order: 0
# CndForm 表单组件
## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-form
## 表单-基础类-使用props渲染
```tsx preview
import React, { useState, useEffect } from "react";
import {
Card,
Field,
Icon,
CascaderSelect,
Button,
Tab,
CndForm
} from "@ali/cnd";
import Cookie from "js-cookie";
const tabs = [
{ tab: "标签名称1", key: "home", content: "标签名称1" },
{ tab: "标签名称2", key: "doc", content: "标签名称2" },
];
const Demo = () => {
const [isIntl, setIsIntl] = useState(true);
const field = Field.useField();
useEffect(() => {
if (!Cookie.get("aliyun_lang")) {
Cookie.set("aliyun_lang", "zh");
}
});
const changeLang = () => {
const lang = Cookie.get("aliyun_lang");
console.log("======切换语言======", lang);
lang === "zh"
? Cookie.set("aliyun_lang", "en")
: Cookie.set("aliyun_lang", "zh");
window.location.reload();
};
const formProps = {
labelAlign: "left",
labelCol: { span: 5 },
wrapperCol: { span: 19 },
field: field,
isIntl: true,
};
const formItems = [
{
label: "开关",
subComponentProps: [
{
component: "switch",
required: true,
subProps: {
name: "switch",
checked: isIntl,
label: "开启表单国际化",
onChange: (v) => {
console.log("v", v, "---", typeof v);
setIsIntl(v);
},
},
},
{
component: "custom",
subProps: {
children: <Button onClick={changeLang}>切换语言</Button>,
},
},
],
},
{
component: "text",
label:'文本text',
value:'纯文本内容'
},
{
component: "input",
label: "实例名称",
subProps: { defaultValue: "test", name: "Name" },
help: field.getError("Name") ? (
<div>
<div style={{ color: "#808080" }}>此处为帮助文档</div>
<div style={{ color: "red" }}>{field.getError("Name")}</div>
</div>
) : (
"此处为帮助文档"
),
required: true,
operateProps: {
position: "right",
actions: [
{
children: "测试",
onClick: () => {
console.log("----field.getValues()", field.getValues());
},
},
],
},
},
{
component: "select",
label: "类型",
help: "xxxxx",
subProps: {
defaultValue: "type1",
name: "type",
dataSource: [
{ label: "类型一", value: "type1" },
{ label: "类型二", value: "type2" },
],
hasClear: true,
},
operateProps: {
position: "right",
actions: [
{
children: <Icon type="refresh" size="small" />,
onClick: () => {
console.log("测试");
},
},
],
},
required: true,
},
{
label: "嵌套的输入框",
subComponentProps: [
{
component: "input",
required: true,
subProps: { defaultValue: "输入框1", name: "input1" },
},
{ component: "select" },
{ component: "input", subColSpan: 10 },
],
},
{
component: "textarea",
label: "文本框",
required: true,
subProps: { defaultValue: "这是个文本框", name: "desc" },
},
{
component: "numberPicker",
label: "数字选择器",
subProps: { defaultValue: 6 },
},
{
component: "datePicker",
label: "日期组件",
},
{
component: "radio",
label: "Radio.Group",
subProps: {
dataSource: [
{ label: "水果1", value: "apple" },
{ label: "水果2", value: "orange" },
],
defaultValue: "apple",
},
},
{
component: "checkbox",
label: "Checkbox",
subProps: {
label: "是否同意",
onChange: (v) => {
console.log("checkbox-change", v);
},
defaultChecked: true,
name: "agreen",
},
},
{
component: "checkbox",
label: "多选按钮组",
subProps: {
dataSource: [
{ label: "实例A", value: "A" },
{ label: "实例B", value: "B" },
{ label: "实例C", value: "C" },
],
onChange: (v) => {
console.log("checkbox-group-change", v);
},
},
},
{
component: "range",
label: "滑动条",
subProps: {
defaultValue: 30,
marks: 5,
},
},
{
component: "tag",
label: "标签组",
subProps: {
closable: true,
dataSource: [
{
children: "标签A",
onClick: () => {
console.log("标签A");
},
},
{
children: "标签B",
},
{
children: "标签C",
},
{
children: "标签D",
},
{
children: "标签E",
},
{
children: "标签F",
},
],
},
operateProps: {
position: "right",
actions: [
{
children: "编辑",
onClick: () => {
console.log("编辑");
},
},
],
},
},
{
component: "upload",
label: "上传文件",
subProps: {
shape: "dragger",
},
},
{
component: "custom",
label: "自定义组件",
labelTip: "测试气泡提示",
labelTipProps: {
icon: "help",
size: "xs",
align: "t",
},
subProps: {
children: (
<CascaderSelect
style={{ width: "100%" }}
dataSource={[
{
value: "2973",
label: "陕西",
children: [
{
value: "2974",
label: "西安",
children: [
{ value: "2975", label: "西安市" },
{ value: "2976", label: "高陵县" },
],
},
{
value: "2980",
label: "铜川",
children: [
{ value: "2981", label: "铜川市" },
{ value: "2982", label: "宜君县" },
],
},
],
},
]}
/>
),
},
},
{
component: "custom",
label: "custom-Tab",
subProps: {
children: (
<div>
<Tab shape="capsule" size="small">
<Tab.Item title="标签1"></Tab.Item>
<Tab.Item title="标签1"></Tab.Item>
</Tab>
</div>
),
},
},
];
return (
<div style={{ display: "flex", width: "100%" }}>
<Card contentHeight="auto" style={{ flex: 1, padding: 20 }}>
<div style={{ marginBottom: 20, background: "#f5f5f5", padding: 10 }}>
左右布局
</div>
<CndForm
title="表单分组一"
isIntl={isIntl}
formProps={formProps}
formItems={formItems}
/>
</Card>
<Card contentHeight="auto" style={{ flex: 1, padding: 20 }}>
<div style={{ marginBottom: 20, background: "#f5f5f5", padding: 10 }}>
上下布局
</div>
<CndForm title="表单分组二" formItems={formItems} />
</Card>
</div>
);
};
export default Demo;
```
## 表单-基础类-使用CndForm.Item渲染
CndForm.Item的用法与 xconsole中Form.Item相同，具体参考[Form](https://xconsole.aliyun-inc.com/nexconsole/component_web/dacxff)
```tsx preview
import React, { useState, useEffect } from "react";
import {
Field,
Input,
Button,
Checkbox,
Range,
CndForm
} from "@ali/cnd";
import Cookie from "js-cookie";
const { Group: CheckboxGroup } = Checkbox;
const Demo = () => {
const [isIntl, setIsIntl] = useState(true);
const field = Field.useField();
const formProps = {
labelAlign: "left",
labelCol: { span: 5 },
wrapperCol: { span: 19 },
field: field,
};
return (
<div>
<CndForm formProps={formProps} isIntl={true}>
<CndForm.Item label="名称" name="name" required>
<Input placeholder="请输入" />
</CndForm.Item>
<CndForm.Item label="描述" name="desc" required>
<Input.TextArea placeholder="请输入" />
</CndForm.Item>
</CndForm>
<Button
type="primary"
onClick={() => {
field.validate((errors, values) => {
console.log(errors, values);
});
}}
>
校验
</Button>
</div>
);
};
export default Demo;
```
## 内容分组表单
```tsx preview
import React, { useState, useEffect } from "react";
import { Field, Icon, CndForm } from "@ali/cnd";
const Demo = () => {
const field = Field.useField();
const formProps = {
labelAlign: "left",
labelCol: { span: 5 },
wrapperCol: { span: 19 },
field: field,
};
const formItems1 = [
{
component: "input",
label: "实例名称",
subProps: { defaultValue: "实例名称", name: "Name" },
required: true,
operateProps: {
position: "right",
actions: [
{
children: "测试",
onClick: () => {
console.log("----field.getValues()", field.getValues());
},
},
],
},
},
{
component: "select",
label: "类型",
subProps: {
defaultValue: "type1",
name: "type",
dataSource: [
{ label: "类型一", value: "type1" },
{ label: "类型二", value: "type2" },
],
hasClear: true,
},
operateProps: {
position: "right",
actions: [
{
children: <Icon type="refresh" size="small" />,
onClick: () => {
console.log("测试");
},
},
],
},
required: true,
},
{
component: "textarea",
label: "文本框",
required: true,
subProps: { defaultValue: "这是个文本框", name: "desc" },
},
];
const formItems2 = [
{
component: "input",
label: "命名空间",
subProps: { defaultValue: "命名空间", name: "namespace" },
required: true,
},
{
component: "input",
label: "任务名称",
subProps: { defaultValue: "任务名称", name: "taskName" },
required: true,
},
{
component: "input",
label: "负载名称",
subProps: { defaultValue: "负载名称", name: "loadName" },
required: true,
},
];
const dataSource = [
{
title: "基本信息",
key: "basic-info",
formItems: formItems1,
},
{
title: "环境信息",
key: "environment-info",
formItems: formItems2,
},
];
return (
<div style={{ width: "50%" }}>
<CndForm
formType="group"
formProps={formProps}
dataSource={dataSource}
canCollapse={true}
expandKeys={["basic-info"]}
/>
</div>
);
};
export default Demo;
```
## 自定义表单提示信息
```tsx preview
import React, { useState, useEffect } from "react";
import { Field, CndForm } from "@ali/cnd";
const Demo = () => {
const field = Field.useField();
const formProps = {
labelAlign: "left",
labelCol: { span: 5 },
wrapperCol: { span: 19 },
field: field,
};
const formItems = [
{
component: "input",
label: "命名空间",
labelTip: "字段说明，用于解释该字段的具体含义，默认使用气泡。",
subProps: { defaultValue: "命名空间", name: "namespace" },
required: true,
extraHelp: [
{
content:
"Hint，提供额外信息或解释的文本，以辅助用户理解和填写。如格式要求或输入示例等。",
},
{
hasIcon: true,
type: "notice",
content:
"单行提示，用以向用户透出，针对和该字段内容相关的提示类信息。",
},
{
isMultiLines: true,
type: "warning",
canCollapse: true,
content: (
<div>
<div>
多行警告信息使用此样式，多行警告信息使用此样式。
多行警告信息使用此样式，多行警告信息使用此样式。多行警告信息使用此样式，多行警告信息使用此样式。
</div>
<div>
1. 警告内容第一条，警告内容第一条。<a href="">查看详情</a>
</div>
<div>2. 警告内容第二条，警告内容第二条。</div>
</div>
),
},
],
}
];
return (
<div style={{ width: "50%" }}>
<CndForm formProps={formProps} formItems={formItems} />
</div>
);
};
export default Demo;
```
## 表单-详情类
```tsx preview
import React from "react";
import { Tag, Table, CndForm } from "@ali/cnd";
const { Group: TagGroup } = Tag;
const Demo = () => {
const dataSource = {
title: "基本信息",
InstanceId: "mse_xxxxxxxxxxxxxx",
Name: "mse-test",
GatewayUniqueId: "gw-21324353465768987980809",
MseVersion: "mse_pro",
ResourceGroupId: "rg-xdcdcfwwdcdewc123",
ResourceGroupName: "default",
MseTag: {
"ack.aliyun.com": "c1b0d7840cad2452ba3ba753389bf6056",
"ingress.k8s.alibaba/MseIngressConfig": "ackone-gateway-align",
"acs:rm:rgId": "rg-acfmylrkzblxz4a",
},
ZoneInfo: [
{
ZoneId: "cn-shanghai-l",
VSwitchId: "vsw-uf64xierxx80ewtgr1tlm",
},
{
ZoneId: "cn-shanghai-m",
VSwitchId: "vsw-uf64xierxx80ewtgr1tlm",
},
],
Spec: "MSE_GTW_2_4_200_c",
Replica: 3,
GatewayVersion: "1.2.32",
CreateAt: "2024-04-18 09:30:00",
};
const items = [
{
dataIndex: "title",
render: (val) => <div className="cnd-form-title">{val}</div>,
span: 24,
},
{
dataIndex: "InstanceId",
label: "实例名称",
span: 12,
},
{
dataIndex: "Name",
label: "网关名称",
span: 12,
},
{
dataIndex: "GatewayUniqueId",
label: "网关唯一ID",
span: 12,
},
{
dataIndex: "MseVersion",
label: "产品类型",
span: 12,
},
{
dataIndex: "ResourceGroupId",
label: "资源组ID",
span: 12,
},
{
dataIndex: "ResourceGroupName",
label: "资源组名称",
span: 12,
},
{
dataIndex: "MseTag",
label: "标签",
span: 12,
render: (val) => {
let tagArr = [];
for (let key in val) {
tagArr.push(`${key}=${val[key]}`);
}
if (tagArr.length > 0) {
return (
<TagGroup>
{tagArr.map((item) => {
return <Tag>{item}</Tag>;
})}
</TagGroup>
);
} else {
return "";
}
},
},
{
dataIndex: "ZoneInfo",
label: "可用区",
span: 12,
render: (val) => {
const zoneArr = val.map((item) => item.ZoneId);
return zoneArr.join(" + ");
},
},
{
dataIndex: "Spec",
label: "引擎规格",
span: 12,
},
{
dataIndex: "Replica",
label: "节点数量",
span: 12,
},
{
dataIndex: "GatewayVersion",
label: "引擎版本",
span: 12,
},
{
dataIndex: "CreateAt",
label: "创建时间",
span: 12,
},
{
dataIndex: "info",
label: "实例列表",
span: 24,
render: (val) => {
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
id: 100306660940 + i,
name: `实例${i}`,
status: "运行中",
type: "专用网络",
});
}
return result;
};
return (
<Table dataSource={dataSource()} hasBorder={false}>
<Table.Column title="实例ID" dataIndex="id" width="300px" />
<Table.Column title="实例名称" dataIndex="name" width="280px" />
<Table.Column title="状态" dataIndex="status" width="200px" />
<Table.Column title="网络类型" dataIndex="type" width="200px" />
</Table>
);
},
},
];
return <CndForm formType="detail" dataSource={dataSource} items={items} />;
};
export default Demo;
```
## API
### 基础类表单
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------- |
| formType | 表单类型 | 'basic' \| 'detail' \| 'group' | 'basic' |
| formProps | 表单属性 | { [key: string]: any } | |
| formItems | 表单项 | [] | |
| dataSource | formType 设置为 group 时,内容分组表单配置数据源 | [{title:分组名称,key:分组 key,fomItems:表单项 formItems[]}] | |
| canCollapse | formType 设置为 group 时, 是否支持折叠 | boolean | false |
| expandKeys | formType 设置为 group,并且 canCollapse 为 true 时,设置默认展开的分组 <br/> 取值为 dataSource 中 key<br/>如果不设置 expandKeys，则默认展开所有分组 | [] | |
> formProps 属性，基于 xconsole 的 [Form](https://xconsole.aliyun-inc.com/nexconsole/component_web/dacxff) 组件，新增 title 参数，支持 Form 的所有参数
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------- | ------------------------- | ------ |
| title | 表单标题 | string \| React.ReactNode | |
> formItems 属性，基于 xconsole 的 [Form](https://xconsole.aliyun-inc.com/nexconsole/component_web/dacxff) 组件，新增如下参数，其余参数可参考 xconsole 中 Form.Item
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | --------------------------------- |
| component | 表单子项类型 <br/> 当前支持 input \| textarea \| select \| numberPicker \| datePicker \| radio \| checkbox \| switch \| tag \| upload \| range \| text \| custom <br/> custom 为自定义表单子项内容 <br/> 表单子项类型为 custom 时，subProps 必填，且需包含 children 属性，为自定义的 ReactNode | Enum | |
| subProps | 表单子项本身的属性 | { [key: string]: any } | |
| labelTip | 表单 label 提示信息 | string \| React.ReactNode | |
| labelTipProps | label 的 Balloon 属性<br/>包含 icon: 图标类型，size: 图标大小，align: 图标对齐方式 | { icon: string; size: string; align: string } | {icon:'info',size:'xs',align:'t'} |
| subFormItemProps | 嵌套的 FormItem 的属性，仅在需要 FormItem 嵌套时使用，subFormItemProps 中每一项继承了 FormItem 的所有属性 | subFormItemProps[] | |
| subColSpan | 仅设置于嵌套的 FormItem 的属性中，用于确定子 FormItem 的宽度占比<br />仅在 subFormItemProps 中生效 | number | |
| operateProps | 自定义操作按钮属性 | {} | |
| extraHelp | 自定义提示信息 | HelpItemProps[] | |
> operateProps 定义格式如下：
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------------------------ | ----------------------------------- | ------ |
| position | 按钮位置，可选值： right \| bottom | Enum |
| actions | 按钮列表，数组项的数据结构见 IActionProps 的 API | [{text:按钮文本，onClick:点击事件}] | |
> HelpItemProps 子项属性定义如下：
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | --------------------------------------------------------------------------- | ------------------------- | ------ |
| content | 提示内容 | string \| React.ReactNode |
| hasIcon | 主要用于单行提示时是否需要显示图标， | boolean | false |
| type | 提示类型，可选值： success \| warning \| error \| notice \| help \| loading | Enum |
| isMultiLines | 提示内容是否为多行 | boolean | false |
| canCollapse | 提示内容为多行提示时，是否可以折叠 | boolean | false |
### 详情类表单
> 参照 xconsole 中的 [RcDataFields](https://xconsole.aliyun-inc.com/nexconsole/component_web/uq3g84) 组件
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ---------------------------------------------------------------------- | ---------------------- | ------ |
| formType | 表单类型，详情类表单必填 | string | basic |
| dataSource | 字段列表数据 | { [key: string]: any } | |
| items | 定义要展示哪些字段，以及如何展示。数组项的数据结构见 IItemProps 的 API | IItemProps[] | |
> IItemProps[]每个字段（数组项）的定义格式如下：
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------------------- | ------------------------- | ------ |
| dataIndex | 字段名，对应 dataSource 中的 key | string | |
| label | 定义字段 label 的展示。如果不指定，则不展示 label 区域 | string \| React.ReactNode | |
| span | 字段宽度占比，24 表示占整行 | number | 24 |
| render | 自定义渲染函数，接收当前字段的值作为参数，返回 ReactNode | (value: any) => ReactNode | |