Card 卡片
卡片组件，用于展示独立的内容区块。支持头部、主体、底部三个可选区域，并可选悬停上浮光晕效果。
何时使用：需要将相关信息组织在一个独立的视觉容器中时使用，如文章摘要、用户信息、产品卡片等。
基础用法
最简单的卡片只包含主体内容。
完整结构
通过三个插槽分别定义头部、主体和底部。
悬停效果
设置 hoverable 属性后，鼠标悬停时卡片会平滑上浮并透出主题色的月晕光效。
隐藏主体或底部区域
通过 hideBody 和 hideFooter 属性可分别控制主体或底部区域的渲染（不生成对应 DOM）。
改变根元素语义
通过 as 属性改变根元素标签，提升 HTML 语义化。支持 div、section、article、aside、li。
博客文章卡片示例
一个实际博客中常用的文章卡片布局，包含元数据、标题、描述和标签。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | 'div' | 'section' | 'article' | 'aside' | 'li' | 'div' | 根元素标签 |
hoverable | boolean | false | 是否启用悬停上浮 + 月晕效果 |
hideBody | boolean | false | 是否隐藏主体区域（默认插槽） |
hideFooter | boolean | false | 是否隐藏底部区域（footer 插槽） |
Slots
| 名称 | 说明 |
|---|---|
header | 卡片头部内容（可选） |
default | 卡片主体内容 |
footer | 卡片底部内容（可选） |
注意事项
- 卡片默认无边框、无圆角，符合 Moongate 的直角美学
- 悬停效果仅当
hoverable为true时生效 - 头部和底部插槽为可选，不传则对应区域不会渲染
- 使用
hideBody或hideFooter时，对应的 DOM 元素完全不会生成，适用于需要精确控制布局的场景 - 若卡片内部包含多个可交互元素（如多个链接），请确保各元素的
z-index或点击区域不冲突 as属性支持div、section、article、aside、li五种容器标签