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

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

## 基本使用
```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="左"
      />
      &lt;br /&gt;
      &lt;br /&gt;
      <StatCard
        title="数据来源"
        extra={extra}
        extraAlign={align}
        items={items}
      />
    &lt;/&gt;
  );
};

export default Demo;
```
## 内容自定义(count)
```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 (
    &lt;&gt;
      &lt;StatCard title="资源用量" items={items} /&gt;
    &lt;/&gt;
  );
};

export default Demo;
```
## 子标题额外内容
```tsx preview
import React from "react";
import { StatCard, Balloon, Icon } from "@ali/cnd";

const Demo = () => {
  const triggerElement = (
    &lt;Icon type="help" size="xs" style={{ margin: "-1px 0 0 4px" }} /&gt;
  );

  const BalloonElement = (content) => (
    &lt;Balloon trigger={triggerElement} align="t" closable={false}&gt;
      {content}
    &lt;/Balloon&gt;
  );

  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 (
    &lt;&gt;
      &lt;StatCard title="资源用量" items={items} /&gt;
    &lt;/&gt;
  );
};

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 = (
    &lt;div style={{ display: "flex", alignItems: "center" }}&gt;
      &lt;Tag color="#EC3833" style={style}&gt;
        高危
      &lt;/Tag&gt;
      &lt;Tag color="#FBC02D" style={style}&gt;
        低危
      &lt;/Tag&gt;
      &lt;Tag color="#7281FF" style={style}&gt;
        正常
      &lt;/Tag&gt;
    &lt;/div&gt;
  );

  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 (
    &lt;&gt;
      <StatCard
        title="资源用量"
        extra={extra}
        extraAlign="r"
        align="c"
        items={items}
      />
    &lt;/&gt;
  );
};

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: (
        &lt;Progress percent={50} shape="circle" state="success" size="small" /&gt;
      ),
    },
  ];

  return (
    &lt;&gt;
      &lt;StatCard title="使用量展示" align="c" items={items} /&gt;
    &lt;/&gt;
  );
};

export default Demo;
```
## footer
```tsx preview
import React from "react";
import { StatCard, Button, Icon } from "@ali/cnd";

const Demo = () => {
  const footer = (
    &lt;Button type="primary" text size="small"&gt;
      &lt;Icon type="connection" /&gt;
      查看配额
    &lt;/Button&gt;
  );
  const items = [
    {
      title: "用户",
      count: [456, 5000],
    },
    {
      title: "用户组",
      count: [4, 300],
    },
    {
      title: "角色",
      count: [216, 1000],
    },
    {
      title: "自定义策略",
      count: [26, 1500],
    },
  ];

  return (
    &lt;&gt;
      &lt;StatCard title="资源用量" items={items} footer={footer} /&gt;
    &lt;/&gt;
  );
};

export default Demo;
```