cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
375 lines (328 loc) • 10.5 kB
Markdown
---
group:
title: 云原生业务组件
---
# StatCard 状态卡片
## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-stat-card
## 基本使用
```tsx preview
import React from "react";
import { StatCard } from "@ali/cnd";
const Demo = () => {
const items = [
{
title: "用户",
count: [230, 1360],
},
{
title: "用户组",
count: [0, 300],
},
{
title: "角色",
count: [216, 1000],
},
{
title: "自定义策略",
count: [26, 1500],
},
];
const items_1 = items.map((itm) => ({
...itm,
onClick: () => alert("todo..."),
}));
return (
<>
<h2>基础样式：</h2>
<StatCard title="基础数据" items={items} />
<br />
<h2>count可点击：</h2>
<StatCard items={items_1} />
<br />
<h2>子内容居中：</h2>
<StatCard title="基础数据" align="c" items={items_1} />
</>
);
};
export default Demo;
```
## Title 额外渲染
```tsx preview
import React, { useState } from "react";
import { StatCard, Button, Icon, Switch } from "@ali/cnd";
const Demo = () => {
const [align, setAlign] = useState("l");
const items = [
{
title: "用户",
count: [456, 5000],
onClick: () => {},
},
{
title: "用户组",
count: [4, 300],
onClick: () => {},
},
{
title: "角色",
count: [216, 1000],
onClick: () => {},
},
{
title: "自定义策略",
count: [26, 1500],
onClick: () => {},
},
];
const extra = (
<Button type="primary" text size="small">
<Icon type="connection" />
查看
</Button>
);
return (
<>
标题额外渲染内容位置:
<Switch
checked={align === "r"}
onChange={(val) => setAlign(val ? "r" : "l")}
checkedChildren="右"
unCheckedChildren="左"
/>
<br />
<br />
<StatCard
title="数据来源"
extra={extra}
extraAlign={align}
items={items}
/>
</>
);
};
export default Demo;
```
## 内容自定义(count)
> #### 控制 count，countDivider 实现一些常规自定义内容;
>
> count 为 [] 或不传则展示 - ，如果 count 只传入一个值，则不展示 countDivider<br />
> countDivider 默认为 / , 可自定义
```tsx preview
import React from "react";
import { StatCard } from "@ali/cnd";
const Demo = () => {
const items = [
{
title: "CPU",
count: [36, "108 core"],
onClick: () => {},
},
{
title: "内存",
count: [45, "Gib · 秒"],
countDivider: false,
},
{
title: "告警",
count: [216],
onClick: () => {},
},
{
title: "自定义策略",
},
];
return (
<>
<StatCard title="资源用量" items={items} />
</>
);
};
export default Demo;
```
## 子标题额外内容
```tsx preview
import React from "react";
import { StatCard, Balloon, Icon } from "@ali/cnd";
const Demo = () => {
const triggerElement = (
<Icon type="help" size="xs" style={{ margin: "-1px 0 0 4px" }} />
);
const BalloonElement = (content) => (
<Balloon trigger={triggerElement} align="t" closable={false}>
{content}
</Balloon>
);
const items = [
{
title: "CPU",
count: [36, "108 core"],
},
{
title: "内存",
count: [45, "105 Gib"],
},
{
title: "高危告警",
count: [216, "1321 个"],
},
].map((itm) => ({
...itm,
onClick: () => {
alert(`this is ${itm.title}`);
},
extra: BalloonElement(`this is ${itm.title} tip!`),
}));
return (
<>
<StatCard title="资源用量" items={items} />
</>
);
};
export default Demo;
```
## render 自定义内容
```tsx preview
import React from "react";
import { StatCard, Progress, Tag } from "@ali/cnd";
const style = { marginLeft: 10 };
const Demo = () => {
const extra = (
<div style={{ display: "flex", alignItems: "center" }}>
<Tag color="#EC3833" style={style}>
高危
</Tag>
<Tag color="#FBC02D" style={style}>
低危
</Tag>
<Tag color="#7281FF" style={style}>
正常
</Tag>
</div>
);
const progressElement = (percent) => {
return (
<Progress
percent={percent}
shape="circle"
color={percent > 75 ? "#EC3833" : percent > 50 ? "#FBC02D" : "#7281FF"}
size="small"
style={{ margin: "12px 0" }}
/>
);
};
const items = [
{
title: "本月CPU资源使用量",
render: () => progressElement(78),
},
{
title: "本月内存资源使用量",
render: () => progressElement(58),
},
{
title: "高危告警",
render: () => progressElement(32),
},
];
return (
<>
<StatCard
title="资源用量"
extra={extra}
extraAlign="r"
align="c"
items={items}
/>
</>
);
};
export default Demo;
```
```tsx preview
import React from "react";
import { StatCard, Progress } from "@ali/cnd";
const Demo = () => {
const items = [
{
render: (
<Progress
style={{ margin: "10px 0" }}
percent={60}
shape="circle"
state="error"
size="large"
/>
),
},
{
render: (
<Progress percent={50} shape="circle" state="success" size="small" />
),
},
];
return (
<>
<StatCard title="使用量展示" align="c" items={items} />
</>
);
};
export default Demo;
```
## footer
```tsx preview
import React from "react";
import { StatCard, Button, Icon } from "@ali/cnd";
const Demo = () => {
const footer = (
<Button type="primary" text size="small">
<Icon type="connection" />
查看配额
</Button>
);
const items = [
{
title: "用户",
count: [456, 5000],
},
{
title: "用户组",
count: [4, 300],
},
{
title: "角色",
count: [216, 1000],
},
{
title: "自定义策略",
count: [26, 1500],
},
];
return (
<>
<StatCard title="资源用量" items={items} footer={footer} />
</>
);
};
export default Demo;
```
## API
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ------------------------------------------------------------ | ----------------- | ------ |
| title | card 标题 | string | - |
| extra | 标题区域的用户自定义内容 | ReactNode | null |
| extraAlign | 标题区域的用户自定义内容展示区域 <br />**样式：**左 / 右 | 'l' \| 'r' | 'l' |
| align | 子内容的布局方式<br />**样式：**左对齐 / 居中 | 'l' \| 'c' | 'l' |
| items | card 内容 | ICardItemsProps[] | [] |
| footer | 底部自定义内容 | ReactNode | null |
| className | 透传给容器的 className <br />**使用场景：** 组件内容样式调整 | string | null |
### ICardItemsProps
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------ |
| title | 子内容标题 | string | - |
| extra | 子内容标题区域的用户自定义内容 | ReactNode | null |
| count | 子内容区域配额(其他)展示<br /> **说明：** 数据类型为元组<br />**设计：**count 是纯粹的配额（数字）展示接口，适用于大部分业务需求，不支持大幅度自定义，<br />第二个值可拼接单位等元素，大幅度自定义请使用 render。<br />不传展示 - | [number \| string, number \| string] <br /> [number \| string] <br /> [] | null |
| countDivider | count 的分割符，如果 count 只传一个值，则不展示，false 也不展示 | boolean \| string | '/' |
| onClick | count 第一个值的 click 事件 | Function | null |
| render | 自定义子内容，覆盖 count、countDivider、countDivider 属性 | ReactNode \| () => ReactNode | null |
| footer | 子卡片底部自定义内容 | ReactNode | null |