组件

Alert 提示

页面内提示块：主色 / 成功 / 警告 / 错误；可带标题与关闭按钮。

语义色

在 pvs-alert 上叠加 pvs-alert--* 语义色。

主色提示：新功能已上线。

成功：保存完成。

警告：配额即将用尽。

错误：提交失败，请重试。

<div class="pvs-stack">
  <div class="pvs-alert pvs-alert--primary">
    <p class="pvs-alert__body pvs-m-0">主色提示：新功能已上线。</p>
  </div>
  <div class="pvs-alert pvs-alert--success">
    <p class="pvs-alert__body pvs-m-0">成功：保存完成。</p>
  </div>
  <div class="pvs-alert pvs-alert--warning">
    <p class="pvs-alert__body pvs-m-0">警告：配额即将用尽。</p>
  </div>
  <div class="pvs-alert pvs-alert--danger">
    <p class="pvs-alert__body pvs-m-0">错误：提交失败，请重试。</p>
  </div>
</div>

带标题

长说明用 pvs-alert__title + pvs-alert__body 分层。

注意备份

升级前请导出站点数据，过程约 5 分钟。

<div class="pvs-alert pvs-alert--warning">
  <p class="pvs-alert__title">注意备份</p>
  <p class="pvs-alert__body pvs-m-0">升级前请导出站点数据，过程约 5 分钟。</p>
</div>

可关闭

pvs-alert__header 内放标题与 pvs-close（见 Close 组件）。

点击右侧 × 关闭（需自行写 JS 或移除节点）。

<div class="pvs-alert pvs-alert--primary">
  <div class="pvs-alert__header">
    <p class="pvs-alert__title">可关闭提示</p>
    <button type="button" class="pvs-close pvs-close--sm" aria-label="关闭">×</button>
  </div>
  <p class="pvs-alert__body pvs-m-0">点击右侧 × 关闭（需自行写 JS 或移除节点）。</p>
</div>

类名速查

类名	说明
`pvs-alert`	根容器
`pvs-alert--primary / --success / --warning / --danger`	语义色
`pvs-alert__title`	标题
`pvs-alert__body`	正文
`pvs-alert__header`	标题 + 关闭按钮行