Card
卡片容器：header(headerExtraContent + title，或 header 覆盖) → cover(出血) → body(children，loading 时 Skeleton 占位 + actions 底部操作) → footer。bordered/shadows 控制视觉；string title 用 Typography.Title heading=6 渲染并经 aria-labelledby 关联。
如何引入
import { Card, Card.Meta, Card.Group } from '@chenzy-design/svelte';基础卡片
包含标题、headerExtraContent 与内容区的基础卡片。
Semi Design
简洁卡片
只设置内容区域，或配合 Card.Meta + bodyStyle 排布头像与操作。
封面
通过 cover 设置封面，出血铺满卡片顶部。
边线和外边框
bordered 控制外边框，headerLine / footerLine 控制头/尾分隔线。
Semi Design
阴影
shadows 设置阴影时机：hover（悬停显示）、always（始终显示）。
更灵活的内容展示
用 Card.Meta 承载 title / avatar / description，配合 footer 放置底部操作。
内部卡片
卡片内部可以嵌套其他卡片。
内置预加载
loading 为 true 时内容区显示骨架占位。
更丰富的预加载效果
结合 Skeleton 自定义头部、封面等更丰富的预加载。
卡片操作区
actions 位于内容区底部，以 12px 水平间距排布。
卡片组
CardGroup 中的卡片等间距排列，spacing 控制间距大小。
网格型卡片组
type='grid' 把卡片组设为网格型：卡片去圆角并以边框拼接。
API 参考
Card
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 标题；string 时用 Typography.Title heading=6 渲染并关联 aria-labelledby | string|Snippet | undefined |
headerExtraContent | header 右侧的额外内容 | Snippet | undefined |
header | 自定义头部，覆盖 title 与 headerExtraContent | Snippet | undefined |
headerLine | header 与 body 间分隔线 | boolean | true |
headerStyle | header 区内联样式透传 | string | undefined |
cover | 顶部出血封面 | Snippet | undefined |
bodyStyle | body 区内联样式透传 | string | undefined |
actions | body 底部操作组，以 12px 水平间距（Space）排布 | Snippet | undefined |
footer | 自定义页脚 | Snippet | undefined |
footerLine | footer 区上方分隔线 | boolean | false |
footerStyle | footer 区内联样式透传 | string | undefined |
bordered | 是否有外边框 | boolean | true |
shadows | 阴影显示时机：hover 悬停显示、always 常显；不设则无阴影 | 'hover'|'always' | undefined |
loading | body 显示 Skeleton 占位（Title + Paragraph rows=3） | boolean | false |
class | 根节点自定义类名 | string | undefined |
style | 根节点自定义内联样式 | string | undefined |
ariaLabel | 根节点 aria-label，表述该 Card 的作用 | string | undefined |
children | 卡片正文 | Snippet | undefined |
Slots
| 名称 | 说明 |
|---|---|
title | 标题(string 或 Snippet) |
headerExtraContent | header 右侧额外内容 |
header | 自定义头部（覆盖 title/headerExtraContent） |
cover | 封面 |
actions | body 底部操作 |
footer | 页脚 |
children | 正文 |
Card.Meta
卡片元信息子组件（对齐 Semi Card.Meta）：avatar（左）+ wrapper(title + description)。title/description 支持 string 或 Snippet。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
avatar | 左侧头像（右侧留 marginRight） | Snippet | undefined |
title | 标题 | string|Snippet | undefined |
description | 描述 | string|Snippet | undefined |
class | 根节点自定义类名 | string | undefined |
style | 根节点自定义内联样式 | string | undefined |
Card.Group
卡片组子组件（对齐 Semi CardGroup），等价于 CardGroup 独立导出。基于 Space 成组排布多个 Card；type=grid 时卡片去圆角以 -1px 拼接。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
spacing | 卡片间距（网格型下忽略） | number|number[] | 16 |
type | 网格型，覆盖 spacing | 'grid' | undefined |
ariaLabel | 组语义标签 | string | undefined |
class | 根节点自定义类名 | string | undefined |
style | 根节点自定义内联样式 | string | undefined |
Accessibility
- 有 title 时根 role=region；string title 经 useId 关联 aria-labelledby（无 ariaLabel 时）；loading 时根 aria-busy；Skeleton 占位自带 role=status/aria-busy。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-card-bg | var(--cd-color-card-bg-default) | 卡片根背景（组件消费） |
--cd-card-body-color | var(--cd-color-card-body-text) | body 正文文字（组件消费） |
--cd-card-border-color | var(--cd-color-card-border) | 卡片外框/头尾分隔线颜色（组件消费） |
--cd-card-desc-color | var(--cd-color-card-description-text) | Meta 描述文字（组件消费） |
--cd-card-extra-color | var(--cd-color-card-extra-text) | header 右侧 extra 文字（组件消费） |
--cd-card-title-color | var(--cd-color-card-title-text) | Meta 标题文字（组件消费） |
--cd-color-card-bg-default | var(--cd-color-bg-0) | 卡片背景颜色（Semi $color-card-bg-default） |
--cd-color-card-body-text | var(--cd-color-text-1) | 卡片正文文字颜色（Semi $color-card_body-text） |
--cd-color-card-border | var(--cd-color-border) | 卡片描边颜色（Semi $color-card-border） |
--cd-color-card-description-text | var(--cd-color-text-2) | 卡片描述文字颜色（Semi $color-card_description-text） |