为什么需要 Alert
在技术博客文章中，经常需要突出显示一些非正文的信息——注意事项、问题提示、警告、错误等。如果只用普通的文字或引用块，读者很难一眼区分信息的重要程度。
Alert 组件就是为这个场景设计的。它提供五种语义类型，每种类型有独立的颜色、图标和默认标题，同时支持卡片和扁平两种视觉风格。
五种类型
Alert 内置了五种类型，通过 type 属性切换：
问题
类型适合标注需要读者思考的内容，或者提出一个待解决的疑问。默认插槽中可以包含
超链接 、粗体 和 InLine code。
信息 类型使用中性灰色，适合补充说明或背景知识。这里通过 title
属性自定义了标题文字。
警告 类型搭配卡片风格（card={true} ），顶部有橙色渐变光晕。适合标注可能导致问题的操作或需要注意的风险。默认插槽的
超链接 粗体 InLine code 都会继承警告色。
错误 类型用于标注严重问题，如已知的 Bug、不兼容的配置等。这是扁平风格（默认），视觉更轻。
卡片 vs 扁平
组件支持两种视觉风格：
- 扁平风格（默认）：纯色背景，适合嵌入密集的内容段落
- 卡片风格（
card={true}）：顶部带类型色渐变光晕，视觉更突出
这是卡片风格的提醒。注意顶部有一层淡淡的绿色光晕，让它在页面中更加醒目。
这是卡片风格的警告。橙色的光晕从顶部向下扩散，配合 --alert-color CSS
变量自动适配。
插槽用法
Alert 提供两个插槽：
默认插槽
默认插槽用于放置提示的正文内容，支持任意 Markdown 内联元素：
你可以在插槽中使用 Astro 官方文档
这样的超链接，也可以用 粗体、代码片段
等格式。多段内容会自动换行，保持合理的行高和间距。
标题插槽
如果默认的 title 属性不够用，可以使用 Fragment slot="title" 自定义标题内容：
这是一个带 代码 的标题
标题插槽允许你在标题中插入任意 HTML 元素，比如代码片段或链接。
仅标题
不传默认插槽时，Alert 只显示标题行，body 区域自动隐藏：
自定义图标与颜色
通过 icon 和 color 属性可以完全自定义图标和主题色，覆盖类型默认值：
自定义图标和颜色组合可以实现任意语义的提示块，不受内置五种类型的限制。
图标使用 Iconify 图标库，可以在其中搜索合适的图标名称。
核心实现
组件的核心逻辑非常简洁——一个类型配置表 + CSS 变量驱动样式：
const typeConfig = {
tip: {
icon: "material-symbols:check-circle-rounded",
color: "#33AA77",
title: "提醒",
},
info: {
icon: "material-symbols:info-rounded",
color: "#71717A",
title: "信息",
},
question: {
icon: "material-symbols:help-rounded",
color: "#33AAFF",
title: "问题",
},
warning: {
icon: "material-symbols:warning-rounded",
color: "#FF8800",
title: "警告",
},
error: {
icon: "material-symbols:error-rounded",
color: "#FF3333",
title: "错误",
},
};主题色通过 CSS 变量 --alert-color 传递给样式层，标题、图标、链接颜色都引用同一个变量，改一处即可全局生效：
.alert-header {
color: var(--alert-color);
}
.alert-body a {
color: var(--alert-color);
}卡片风格的渐变光晕也使用同一个变量：
.alert-card {
background-image: radial-gradient(
circle at 4em -25em,
var(--alert-color),
transparent 30em
);
}Props 一览
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | "tip" / "info" / "question" / "warning" / "error" | "tip" | 提示类型 |
card | boolean | false | 是否使用卡片风格 |
icon | string | 随类型 | 自定义 Iconify 图标 |
color | string | 随类型 | 自定义主题色（CSS 颜色值） |
title | string | 随类型 | 自定义标题文字 |
小结
Alert 组件虽然小巧，但覆盖了文章中最常见的提示场景。五种内置类型 + 自定义图标颜色 + 两个插槽，组合起来足够灵活。最关键的是——所有颜色都由一个 CSS 变量驱动，改主题色不需要动一行样式代码。
