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

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

## 基本使用
```tsx preview
import React from "react";
import { Instance } from "@ali/cnd";

const Demo = () => {
  return (
    <Instance
      link={{
        value: "bp1ishetaajhkq-z2wj6r",
        href: "https://www.aliyun.com/",
      }}
      text={{
        value: "cn-alimaterial",
        onChange: (value) => {
          // change value
        },
      }}
    />
  );
};

export default Demo;
```
## Table 中使用
```tsx preview
import React, { useState } from "react";
import { Table, Button, Instance } from "@ali/cnd";

const Demo = () => {
  const dataSource = (() => {
    return [1, 2, 3].map((item) => {
      return {
        id: `bp1ishetaajhkqz2wj6r-${item}`,
        name: `cn-alimaterial-${item}`,
        networkType: "专用网络",
        description: `${item}-Quotation for 1PCS Nano 3.0 controller compatible`,
        status: item % 2 ? true : false,
      };
    });
  })();

  const render = (value, index, record) => {
    return (
      <Instance
        disabled={!record.status}
        link={{
          value: record.id,
          href: "https://www.aliyun.com/",
        }}
        text={{
          value: record.name,
          title: "实例名称",
          onChange: (value) => {
            // change value
          },
        }}
      />
    );
  };

  return (
    &lt;Table hasBorder={false} dataSource={dataSource}&gt;
      &lt;Table.Column title="实例ID/名称" dataIndex="id" cell={render} /&gt;
      <Table.Column
        title="状态"
        dataIndex="status"
        cell={(s) => (s ? "运行中" : "已停止")}
      />
      &lt;Table.Column title="网络类型" dataIndex="networkType" /&gt;
      &lt;Table.Column title="描述" dataIndex="description" /&gt;
      <Table.Column
        title="操作"
        cell={() => (
          &lt;Button text type="primary"&gt;
            管理
          &lt;/Button&gt;
        )}
        width="20%"
      />
    &lt;/Table&gt;
  );
};

export default Demo;
```
## showIcon
```tsx preview
import React from "react";
import { Instance } from "@ali/cnd";

const Demo = () => {
  return (
    <Instance
      showIcon
      link={{
        value: "bp1ishetaajhkqz2wj6r",
        href: "https://www.aliyun.com/",
      }}
      text={{
        value: "cn-alimaterial",
        onChange: (value) => {
          // change value
        },
      }}
    />
  );
};

export default Demo;
```
## beforeText - afterText
```tsx preview
import React from "react";
import { Instance, Icon } from "@ali/cnd";

const Demo = () => {
  return (
    <Instance
      link={{
        value: "bp1ishetaajhkqz2wj6r",
        href: "https://www.aliyun.com/",
      }}
      text={{
        value: "cn-alimaterial",
        showCopy: true,
        onChange: (value) => {
          // change value
        },
        beforeText: (
          &lt;Icon type="management" size="small" style={{ color: "pink" }} /&gt;
        ),
        afterText: "高危",
        afterTextColor: "high",
      }}
    />
  );
};

export default Demo;
```
## 自定义 footer
```tsx preview
import React from "react";
import { Instance, Tag, Icon } from "@ali/cnd";
const style = { marginLeft: 8, color: "#666666" };
const Demo = () => {
  const footer = (
    &lt;div&gt;
      &lt;div style={{ color: "#999999" }}&gt;-- 公 192.168.0.01 私 ｜ 4核&lt;/div&gt;
      &lt;Tag style={{ color: "#333" }} color="#e5edf2" size="small"&gt;
        # 一般
      &lt;/Tag&gt;
      &lt;Icon type="tag-fill" size="xs" style={style} /&gt;
    &lt;/div&gt;
  );

  return (
    &lt;div style={{ width: 300 }}&gt;
      <Instance
        status="failed"
        link={{
          value:
            "cn-material-for-instance-ccsfeweasfdafluaeeac332ffsdf3adfadfa9898s",
          href: "https://www.aliyun.com/",
        }}
        footer={footer}
      />

      &lt;hr /&gt;

      <Instance
        status="#04aca1"
        link={{
          value: "bp1ishetaajhkqz2wj6r",
          href: "https://www.aliyun.com/",
          disabled: true,
        }}
        text={{
          value: "cn-alimaterial",
          onChange: (value) => {},
          disabled: true,
        }}
        footer={
          &lt;Tag color="#f37774" size="small"&gt;
            已过期
          &lt;/Tag&gt;
        }
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 内容过多
```tsx preview
import React from "react";
import { Instance } from "@ali/cnd";

const Demo = () => {
  return (
    <Instance
      truncateProps={{
        threshold: 300,
        position: "start",
        type: "width",
      }}
      link={{
        value: "bp1ishetaajhkqz2wj".repeat(4),
        href: "https://www.aliyun.com/",
      }}
      text={{
        value: "cn-alimaterial".repeat(4),
        onChange: (value) => {
          // change value
        },
        truncateProps: { type: "width", threshold: 200 },
      }}
    />
  );
};

export default Demo;
```
## Instance.Link
```tsx preview
import React, { useState } from "react";
import { Instance } from "@ali/cnd";

const InstanceLink = Instance.Link;

const Demo = () => {
  const click = () => (window.location = "https://www.aliyun.com/");

  return (
    &lt;&gt;
      &lt;InstanceLink value="bp1ishetaajhkqz2wj6r" hasLinkStyle onClick={click} /&gt;
      &lt;br /&gt;
      &lt;InstanceLink value="bp1ishetaajhkqz2wj6r" /&gt;
    &lt;/&gt;
  );
};

export default Demo;
```
## Instance.Text
```tsx preview
import React, { useState } from "react";
import { Instance, Message, Loading } from "@ali/cnd";

const InstanceText = Instance.Text;

const Demo = () => {
  const [data, setData] = useState("sg-bp1ishetaajhkqz2wj6r");
  const [loading, setLoading] = useState(false);

  const rules = [
    {
      pattern: /^[a-zA-Z]{3,10}$/,
      message: "请输入3～10个字母",
      trigger: "onChange",
    },
    {
      required: true,
      message: "必填项",
    },
  ];

  // api mock
  const fetchApi = (value) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(value);
      }, 500);
    });
  };

  const onChange = async (value) => {
    setLoading(true);
    const res = await fetchApi(value);
    setLoading(false);
    setData(res);
    Message.success("修改成功");
  };

  return (
    &lt;Loading visible={loading}&gt;
      &lt;InstanceText value={data} onChange={onChange} /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;h6&gt;自定义校验规则：&lt;/h6&gt;
      <InstanceText
        title="Email"
        value={data}
        showCopy
        onChange={onChange}
        rules={rules}
        helpMessage="请输入3～10个字母"
      />
    &lt;/Loading&gt;
  );
};

export default Demo;
```