cnd-components-mcp/componentData/components/CndResourceDisplay.md

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

---
group:
  title: 云原生业务组件
---

# CndResourceDisplay 资源展示组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-resource-display

## 基本使用

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
      />
      <CndResourceDisplay
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
      />
    </div>
  );
};

export default Demo;
```

## 自定义 copyNameProps / copyIdProps

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        copyNameProps={{
          showIcon:true,
          truncateProps:{
            type: 'width',
            threshold: 200
          }
        }}
         copyIdProps={{
          showIcon:true
        }}
      />
    </div>
  );
};

export default Demo;
```

## 设置跳转链接 url

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        url="https://cnd.alibaba.net/cnd-components/cn-instance"
      />
    </div>
  );
};

export default Demo;
```

## 自定义点击事件 onClick

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        onClick={()=>{
          alert('点击了')
        }}
      />
    </div>
  );
};

export default Demo;
```
> 设置了onClick自定义事件 或者 跳转链接后，字体颜色会链接样式 <br />
> 建议onClick自定义事件 或者 跳转链接后，字体颜色会链接样式 <br />
> onClick 与 url 同时设置时，优先使用 onClick

## showLinkIcon 不需要设置点击事件(onClick)或者跳转链接(url)就可以展示链接样式

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        showLinkIcon={true}
      />
    </div>
  );
};

export default Demo;
```

## 自定义资源不存在时的报错提示

```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  const vpcId = 'vpc-bp1vftj8wl2m8spfjsdqn'
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId={vpcId}
        showLinkIcon={true}
        existConfig={{
          product: 'vpc',
          action: 'DescribeVpcs',
          params: { VpcId: vpcId, RegionId: window.regionId },
          message: <span>test</span>,
        }}
      />
    </div>
  );
};

export default Demo;
```

## name不存在时查询name，并回显
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  const vpcId = 'vpc-bp1vftj8wl2m8spfjsdqn'
  const renderFunc = (res) => {
    const { Vpcs } = res;
    let vpcItem = {};
    Array.isArray(Vpcs.Vpc) && (vpcItem = Vpcs.Vpc[0]);
    return vpcItem.VpcName;
  }
  return (
    <div>
      <CndResourceDisplay
        resourceId={vpcId}
        showLinkIcon={true}
        existConfig={{
          product: 'vpc',
          action: 'DescribeVpcs',
          params: { VpcId: vpcId, RegionId: window.regionId },
          message: <span>test</span>,
        }}
        renderNameConfig={{
          display: true,
          renderFunc: renderFunc
        }}
      />
    </div>
  );
};

export default Demo;
```



## API

### CndResourceDisplay

| 名称          | 说明                             | 类型              | 默认值 |
| ------------- | ------------------------------- | ----------------- | ------ |
| resourceName  | 资源名称                     | string            |        |
| resourceId    | 资源 Id                      | string            |        |
| copyNameProps | 自定义 copy 资源名称相关配置 | ResourceCopyProps | object |
| copyIdProps   | 自定义 copy 资源 Id 相关配置 | ResourceCopyProps | object |
| url   | 点击时跳转的链接地址 | string |  |
| onClick   | 点自定义点击事件 | function |  |
| showLinkIcon   | 是否展示链接图标 | boolean | false |
| existConfig   | 查询资源是否存在的相关设置 | ExistConfig | object |
| renderNameConfig   | 资源名称回显设置 | RenderNameConfig | object | 

### ResourceCopyProps

| 名称          | 类型                                                                                                                                                | 说明            | 默认值 |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------ |
| copyEnable    | 设置是否开启复制功能                                                                | boolean         | true   |
| showIcon      | 是否一直展示复制图标，同 CndCopy 组件用法<br/>默认为 false,仅在 hover 时展示复制图标                                                                     | boolean         | false  |
| icon          | 自定义触发复制的元素，同 CndCopy组件用法                                                                                                                     | React.ReactNode |        |
| truncateProps | 默认没有截断效果，传入则显示截断<br /> 属性透传给 [RcTruncate 文本截断](https://unpkg.alibaba-inc.com/@ali/cnd-truncate@0.1.3/build/index.html)组件 | object          |        |

### ExistConfig
| 名称          | 说明                             | 类型              | 默认值 |
| ------------- | ------------------------------- | ----------------- | ------ |
| product  | 接口产品名称                     | string            |        |
| action    | 接口action名称                     | string            |        |
| params | 接口参数 | object |   |
| message   | 自定义资源不存在时的报错提示 |  React.ReactNode | '当前资源不存在，请进行更改' |


### RenderNameConfig
| 名称          | 说明                             | 类型              | 默认值 |
| ------------- | ------------------------------- | ----------------- | ------ |
| display  | 是否回显名称                     | boolean            |   false     |
| renderFunc  | 接口返回数据提取名称方法     | function            |        |

## 埋点逻辑

1. 查询资源接口失败埋点

| key          | 值 / 说明                            | 
| ------------- | ------------------------------- | 
| id  | CND_TRACK                     | 
| c1  | resource_display_error     | 
| c2  | api_error     | 
| c3  | 报错信息     | 
| c4  | 接口产品名称     | 
| c5  | 接口名称     | 
| c6  | 接口入参     | 

2. 资源不存在埋点

| key          | 值 / 说明                            | 
| ------------- | ------------------------------- | 
| id  | CND_TRACK                     | 
| c1  | resource_display_error     | 
| c2  | resource_notfound     | 
| c3  | 资源id     | 
| c4  | 接口产品名称     | 
| c5  | 接口名称     | 
| c6  | 接口入参     |