全局提示

全局提示位于页面顶部居中，距顶 24px，3 秒自动关闭。使用白色背景、轻阴影与状态色图标，不打断用户操作。

返回组件库

25 · MESSAGE · 全局提示

4 种状态

操作成功

请注意数据格式

提交失败，请重试

系统将于 10 分钟后维护

<section id="message" class="section">
    <div class="section-title">25 · MESSAGE · 全局提示</div>

    <div class="demo-sub">4 种状态</div>
    <div class="demo-box">
      <div style="display:flex;flex-direction:column;align-items:center;gap:12px">
        <div class="demo-toast-item" title="点击关闭" style="display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.12);font-size:14px;color:#3F8F5C">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
          操作成功
        </div>
        <div class="demo-toast-item" title="点击关闭" style="display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.12);font-size:14px;color:#C28A2C">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
          请注意数据格式
        </div>
        <div class="demo-toast-item" title="点击关闭" style="display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.12);font-size:14px;color:#DC2626">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
          提交失败，请重试
        </div>
        <div class="demo-toast-item" title="点击关闭" style="display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.12);font-size:14px;color:#185058">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
          系统将于 10 分钟后维护
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。