弹层与浮层

Toast 使用左侧 3px 状态色条与两级文字；Alert 使用浅色背景表达持续性状态；Modal 最大宽度 480px，头部与底部固定分隔。

返回组件库

08 · OVERLAYS · 弹层与浮层

Toast 通知

保存成功

患者信息已更新

数据异常

检测到 3 条重复记录

操作失败

网络连接超时

Alert 提示条

数据同步完成，共处理 1,247 条记录。

系统将于今晚 22:00 进行维护升级，预计持续 2 小时。

检测到危急值：患者 P-20260003 血钾 6.8 mmol/L，请立即处理。

新版本 v2.4.0 已发布，包含性能优化和 Bug 修复。

Modal 对话框

<section id="overlays" class="section">
    <div class="section-title">08 · OVERLAYS · 弹层与浮层</div>

    <div class="demo-sub">Toast 通知</div>
    <div class="flex flex-wrap gap-4 mb-8">
      <div class="toast success">
        <svg class="w-4 h-4 text-[#3F8F5C] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <div><div class="text-[13px] font-medium text-ink-900">保存成功</div><div class="text-[12px] text-ink-500 mt-0.5">患者信息已更新</div></div>
      </div>
      <div class="toast warning">
        <svg class="w-4 h-4 text-[#C28A2C] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <div><div class="text-[13px] font-medium text-ink-900">数据异常</div><div class="text-[12px] text-ink-500 mt-0.5">检测到 3 条重复记录</div></div>
      </div>
      <div class="toast danger">
        <svg class="w-4 h-4 text-[#A8453B] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <div><div class="text-[13px] font-medium text-ink-900">操作失败</div><div class="text-[12px] text-ink-500 mt-0.5">网络连接超时</div></div>
      </div>
    </div>

    <div class="demo-sub">Alert 提示条</div>
    <div class="space-y-3 mb-8">
      <div class="alert success"><svg class="w-4 h-4 text-[#3F8F5C] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>数据同步完成，共处理 1,247 条记录。</div>
      <div class="alert warning"><svg class="w-4 h-4 text-[#C28A2C] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-linecap="round" stroke-linejoin="round"/></svg>系统将于今晚 22:00 进行维护升级，预计持续 2 小时。</div>
      <div class="alert danger"><svg class="w-4 h-4 text-[#A8453B] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>检测到危急值：患者 P-20260003 血钾 6.8 mmol/L，请立即处理。</div>
      <div class="alert info"><svg class="w-4 h-4 text-[#185058] flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>新版本 v2.4.0 已发布，包含性能优化和 Bug 修复。</div>
    </div>

    <div class="demo-sub">Modal 对话框</div>
    <button class="demo-modal-trigger" type="button">打开确认弹窗</button>
    <div class="modal-demo-backdrop">
      <div class="modal">
        <div class="modal-header">
          <span class="modal-title">确认删除</span>
          <span class="modal-close">✕</span>
        </div>
        <div class="modal-body">确定要删除患者 <strong>张三</strong> 的随访记录吗？此操作不可撤销。</div>
        <div class="modal-footer">
          <button class="px-4 py-2 text-[13px] border border-ink-200 rounded bg-white text-ink-700">取消</button>
          <button class="px-4 py-2 text-[13px] bg-[#A8453B] text-white rounded">确认删除</button>
        </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 检查清单逐项核对。