Components

Banner 横幅

用于发布网络变更、维护窗口和安全事件等需要被及时理解的信息，左侧图标自动映射语义色。

语义等级

primary / success / warning / error 四级通告。

全球边缘网络更新

亚太与欧洲区域节点现已全面启用 Anycast 智能链路分发。

访问凭据轮转就绪

租户安全密钥已由 KMS 服务无感知轮换完成。

网络维护预警

法兰克福可用区将于北京时间凌晨 03:00 进行例行交换机固件维护。

节点异常

gru-edge-07 连续健康检查失败，流量已自动切换至备用节点。

<div class="space-y-2.5">
  <Banner color="primary" title="全球边缘网络更新" description="亚太与欧洲区域节点现已全面启用 Anycast 智能链路分发。" />
  <Banner color="success" title="访问凭据轮转就绪" description="租户安全密钥已由 KMS 服务无感知轮换完成。" />
  <Banner color="warning" title="网络维护预警" description="法兰克福可用区将于北京时间凌晨 03:00 进行例行交换机固件维护。" />
  <Banner color="error" title="节点异常" description="gru-edge-07 连续健康检查失败，流量已自动切换至备用节点。" />
</div>

带操作按钮

通过 action 插槽追加低干扰操作。

账单周期提醒

本月用量报表已生成，请及时核对出站流量费用。

<Banner color="neutral" title="账单周期提醒" description="本月用量报表已生成，请及时核对出站流量费用。">
  <template #action><Button size="xs" variant="outline" color="neutral">查看报表</Button></template>
</Banner>

API 参考

属性	类型	默认值	说明
title	string	—	加粗标题。
description	string	—	正文说明。
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'error'	primary	语义色与图标映射。
variant	'outline' \| 'soft' \| 'subtle'	soft	底色强度。
icon / action	slot	—	自定义左侧图标 / 右侧操作区。