## 基础用法

Card 组件是一个通用的容器组件，用于将内容组织在一个具有圆角、阴影和边框的卡片容器中。将需要展示的内容作为默认 Snippet 传入即可。

## 背景类型

Card 组件提供了三种背景类型：

- **surface**：表面背景（默认），亮色模式为白色，暗黑模式为深灰色
- **gray**：灰色透明背景，与页面背景形成轻微区分
- **theme**：主题色透明背景，带有轻微的主题色

如果需要更多自定义背景，可以通过 `injClass` 属性注入自定义 CSS 类名。

## 预设区域

Card 组件提供了三个预设区域：

- **header**：头部区域，通常用于展示标题、操作按钮等
- **children**：主体内容区域，用于展示卡片的主要内容
- **footer**：底部区域，通常用于展示操作按钮、统计信息等

这三个区域都是可选的，可以根据实际需求灵活组合使用。

## 分隔线

默认情况下，头部与主体内容之间、主体内容与底部之间会显示分隔线。可以通过 `headerLine` 和 `footerLine` 属性来控制是否显示分隔线。

## 圆角配置

通过 `radius` 属性可以配置卡片的圆角大小，支持从 `none`（无圆角）到 `full`（完全圆角）的多种选项。

## 阴影配置

通过 `shadow` 属性可以配置卡片的阴影效果，支持从 `none`（无阴影）到 `2xl`（特大阴影）的多种选项。阴影在暗黑模式下会自动调整为适配的样式。

## 内边距配置

- 使用 `p` 属性可以统一设置主体内容区域四个方向的内边距
- 使用 `px` 和 `py` 属性可以分别设置水平和垂直方向的内边距
- 当设置了 `px` 或 `py` 时，`p` 属性将不生效

## 边框配置

- 使用 `border` 属性配置边框风格：`solid`（实线）、`dashed`（虚线）、`dotted`（点线）
- 使用 `borderWidth` 属性配置边框粗细
- 当 `border` 为 `none` 时，边框相关配置不生效

## 可点击卡片

当传入 `onclick` 事件处理函数时，卡片会渲染为 `button` 元素，具有可点击的交互效果。

## CSS 注入

Card 组件提供了多个 CSS 注入属性，可以向不同区域注入自定义样式：

- `injClass`：注入卡片容器的样式
- `headerClass`：注入头部区域的样式
- `bodyClass`：注入主体内容区域的样式
- `footerClass`：注入底部区域的样式

若注入的 class 没生效，请在注入的 class 名称前添加 `!`，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。