cnd-components-mcp/componentData/components/CndForm/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 表单-基础类-使用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: (
          &lt;div&gt;
            &lt;Tab shape="capsule" size="small"&gt;
              &lt;Tab.Item title="标签1"&gt;&lt;/Tab.Item&gt;
              &lt;Tab.Item title="标签1"&gt;&lt;/Tab.Item&gt;
            &lt;/Tab&gt;
          &lt;/div&gt;
        ),
      },
    },
  ];
  return (
    &lt;div style={{ display: "flex", width: "100%" }}&gt;
      &lt;Card contentHeight="auto" style={{ flex: 1, padding: 20 }}&gt;
        &lt;div style={{ marginBottom: 20, background: "#f5f5f5", padding: 10 }}&gt;
          左右布局
        &lt;/div&gt;
        <CndForm
          title="表单分组一"
          isIntl={isIntl}
          formProps={formProps}
          formItems={formItems}
        />
      &lt;/Card&gt;
      &lt;Card contentHeight="auto" style={{ flex: 1, padding: 20 }}&gt;
        &lt;div style={{ marginBottom: 20, background: "#f5f5f5", padding: 10 }}&gt;
          上下布局
        &lt;/div&gt;
        &lt;CndForm title="表单分组二" formItems={formItems} /&gt;
      &lt;/Card&gt;
    &lt;/div&gt;
  );
};

export default Demo;
```
## 表单-基础类-使用CndForm.Item渲染
```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 (
    &lt;div&gt;
      &lt;CndForm formProps={formProps} isIntl={true}&gt;
        &lt;CndForm.Item label="名称" name="name" required&gt;
          &lt;Input placeholder="请输入" /&gt;
        &lt;/CndForm.Item&gt;
        &lt;CndForm.Item label="描述" name="desc" required&gt;
          &lt;Input.TextArea placeholder="请输入" /&gt;
        &lt;/CndForm.Item&gt;
      &lt;/CndForm&gt;
      <Button
        type="primary"
        onClick={() => {
          field.validate((errors, values) => {
            console.log(errors, values);
          });
        }}
      >
        校验
      &lt;/Button&gt;
    &lt;/div&gt;
  );
};

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: &lt;Icon type="refresh" size="small" /&gt;,
            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 (
    &lt;div style={{ width: "50%" }}&gt;
      <CndForm
        formType="group"
        formProps={formProps}
        dataSource={dataSource}
        canCollapse={true}
        expandKeys={["basic-info"]}
      />
    &lt;/div&gt;
  );
};

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: (
            &lt;div&gt;
              &lt;div&gt;
                多行警告信息使用此样式，多行警告信息使用此样式。
                多行警告信息使用此样式，多行警告信息使用此样式。多行警告信息使用此样式，多行警告信息使用此样式。
              &lt;/div&gt;
              &lt;div&gt;
                1. 警告内容第一条，警告内容第一条。&lt;a href=""&gt;查看详情&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;2. 警告内容第二条，警告内容第二条。&lt;/div&gt;
            &lt;/div&gt;
          ),
        },
      ],
    }
  ];

  return (
    &lt;div style={{ width: "50%" }}&gt;
      &lt;CndForm formProps={formProps} formItems={formItems} /&gt;
    &lt;/div&gt;
  );
};

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) => &lt;div className="cnd-form-title"&gt;{val}&lt;/div&gt;,
      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 (
            &lt;TagGroup&gt;
              {tagArr.map((item) => {
                return &lt;Tag&gt;{item}&lt;/Tag&gt;;
              })}
            &lt;/TagGroup&gt;
          );
        } 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 (
          &lt;Table dataSource={dataSource()} hasBorder={false}&gt;
            &lt;Table.Column title="实例ID" dataIndex="id" width="300px" /&gt;
            &lt;Table.Column title="实例名称" dataIndex="name" width="280px" /&gt;
            &lt;Table.Column title="状态" dataIndex="status" width="200px" /&gt;
            &lt;Table.Column title="网络类型" dataIndex="type" width="200px" /&gt;
          &lt;/Table&gt;
        );
      },
    },
  ];
  return &lt;CndForm formType="detail" dataSource={dataSource} items={items} /&gt;;
};

export default Demo;
```