Components

Card 卡片

控制台内容的标准容器：标题、描述、操作区与主体分割层级，内嵌环线取代厚重描边。

结构层级

header 的 action 插槽与 footer 分割线自动生成。

集群健康检查

过去 24 小时的可用性遥测

99.99%

SLA 达成率92%

128 个边缘节点中 2 个处于维护窗口，流量已自动旁路。

<Card title="集群健康检查" description="过去 24 小时的可用性遥测" padding="md">
  <template #action><Badge color="success" variant="soft" dot>99.99%</Badge></template>
  <div class="space-y-2">
    <Progress :value="92" label="SLA 达成率" show-value />
    <p class="text-sm text-slate-600 dark:text-slate-400">128 个边缘节点中 2 个处于维护窗口，流量已自动旁路。</p>
  </div>
  <template #footer>
    <div class="flex justify-end gap-2">
      <Button size="sm" variant="ghost" color="neutral">稍后处理</Button>
      <Button size="sm" variant="solid" color="primary">查看拓扑</Button>
    </div>
  </template>
</Card>

变体与交互

outline / soft / subtle 三种表面与 hoverable 微交互。

Outline

默认内嵌环线

最通用的表面。

Soft

柔和底色

用于嵌套层级。

Hoverable

悬停抬升

可点击的卡片入口。

<div class="grid gap-4 sm:grid-cols-3">
  <Card variant="outline" title="Outline" description="默认内嵌环线"><p class="text-sm text-slate-500 dark:text-slate-400">最通用的表面。</p></Card>
  <Card variant="soft" title="Soft" description="柔和底色"><p class="text-sm text-slate-500 dark:text-slate-400">用于嵌套层级。</p></Card>
  <Card variant="subtle" hoverable title="Hoverable" description="悬停抬升"><p class="text-sm text-slate-500 dark:text-slate-400">可点击的卡片入口。</p></Card>
</div>

API 参考

属性	类型	默认值	说明
`title / description`	`string`	`—`	头部标题与副标题。
`variant`	`'outline' \| 'soft' \| 'subtle'`	`outline`	表面层级。
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`md`	主体内边距。
`accent`	`boolean`	`false`	顶部品牌渐变强调条。
`hoverable`	`boolean`	`false`	悬停时环线与阴影变化。
`action / footer`	`slot`	`—`	头部右侧操作 / 底部分割区。