MetricCard 指标小卡

通用指标小卡：左侧 icon + 上标题 / 主题 / 下标题（有值展示）。常放在 RdListPageHero 的 #stats 插槽中；也可单独使用。与带趋势/迷你图的 RdStatCard 不同。

基础用法

四卡网格可用列表页的 .page-hero__stats，或自写 grid。

12客户总数

9活跃客户

4企业客户

$2.6M累计金额

<script setup lang="ts">
import { Users, CheckCircle, Building2, TrendingUp } from '@lucide/vue'
import { RdMetricCard } from '@rd-element/ui'
</script>

<template>
  <div class="page-hero__stats" style="padding:0">
    <RdMetricCard :icon="Users" title="12" caption="客户总数" tone="primary" />
    <RdMetricCard :icon="CheckCircle" title="9" caption="活跃客户" tone="success" />
    <RdMetricCard :icon="Building2" title="4" caption="企业客户" tone="violet" />
    <RdMetricCard :icon="TrendingUp" title="$2.6M" caption="累计金额" tone="accent" />
  </div>
</template>

上标题 overline

传入 overline 显示上标题；不传则隐藏。

本月128新增线索

<script setup lang="ts">
import { Users } from '@lucide/vue'
import { RdMetricCard } from '@rd-element/ui'
</script>

<template>
  <RdMetricCard
    :icon="Users"
    overline="本月"
    title="128"
    caption="新增线索"
    tone="primary"
  />
</template>

自定义背景与主题色

通过根节点 class 覆盖 --rd-metric-card-bg / --rd-metric-card-color。

本季$2.6M累计金额

<script setup lang="ts">
import { TrendingUp } from '@lucide/vue'
import { RdMetricCard } from '@rd-element/ui'
</script>

<template>
  <RdMetricCard
    class="metric-demo-dark"
    :icon="TrendingUp"
    overline="本季"
    title="$2.6M"
    caption="累计金额"
    tone="accent"
  />
</template>

<style>
.metric-demo-dark {
  --rd-metric-card-bg: #0b1628;
  --rd-metric-card-color: #fff;
  max-width: 240px;
}
.metric-demo-dark .rd-metric-card__overline,
.metric-demo-dark .rd-metric-card__caption {
  color: rgba(255, 255, 255, 0.65);
}
</style>

API

Attributes

属性名	说明	类型	默认值
icon	左侧图标组件；不传则不显示	Component	—
overline	上标题；有值才显示	string	—
title	主题（大数字 / 主文案）；有值才显示	string	—
caption	下标题；有值才显示	string	—
tone	仅影响 icon 底色	'primary' | 'success' | 'violet' | 'accent'	'primary'
class	根节点 class；可用 --rd-metric-card-bg / --rd-metric-card-color 定制背景与主题色	string	—