Overlay / 05
遮罩 · 图片预览
覆盖在内容之上的半透明层：全屏遮罩用于阻塞式加载与确认，局部遮罩只锁住单个卡片，灯箱用于查看大图，右键菜单提供就地操作。点击遮罩、空白处或按下 Esc 均可退出。
全屏遮罩
click backdrop to close阻塞式加载
整页遮罩 + 居中转圈，用于导出报表、批量处理等不可中断的操作。点击遮罩即可退出演示。
遮罩内确认
遮罩本身即确认面板，内容居中、按钮等宽平分，适合「离开页面」这类无表单的强提示。
遮罩上打字
需要用户确认危险操作时，可在遮罩内要求输入关键字，避免误触造成不可逆后果。
局部加载遮罩
.mask-load
正在同步数据…
卡片遮罩
本月销售额
¥ 8,426,900
遮罩只覆盖本卡片，页面其它区域仍可正常操作。
列表遮罩
刷新中…
季度经营分析.xlsx
1.2 MB · 今天 09:14
组件使用明细.csv
486 KB · 昨天 18:02
设计规范 v3.pdf
8.4 MB · 09-28
图形遮罩
正在生成预览图
大图约需 6 秒
渲染中 64%
队列中还有 2 个任务
图片预览灯箱
[data-lightbox]点击任意图片查看大图（点击遮罩关闭）
山景 01
抽象 02
几何 03
光圈 04
列表中的缩略图同样可预览
banner-spring.webp
2400 × 1200 · 486 KB
wireframe-home.png
1600 × 900 · 212 KB
| 层级 | z-index | 用途 |
|---|---|---|
| 局部遮罩 | 10 | 卡片 / 列表局部加载 |
| 下拉与气泡 | 700 / 800 | Dropdown、Popover |
| 抽屉 | 2000 / 2001 | 遮罩 + 抽屉本体 |
| 灯箱 | 2500 | 图片预览 |
| Toast | 3000 | 全局反馈，永远最上层 |
右键菜单
[data-cm-trigger] + #cm在文件卡片上右键
首页主视觉.png
2400 × 1200 · 486 KB
图标集.svg
48 个图标 · 86 KB
在列表行上右键
产品主图_01.jpg
在 3 个页面中被引用
产品主图_02.jpg
未压缩，建议处理后上传
在右侧任意卡片或列表行上点击鼠标右键即可唤出菜单。
遮罩与菜单的关系
遮罩关闭全屏遮罩、灯箱：点击遮罩即关闭，符合「覆盖即临时」的直觉。
菜单关闭右键菜单：点击菜单之外任意位置关闭，且不会阻断页面的其它操作。
Esc 键所有浮层统一响应 Esc，保证键盘用户也能退出。
右键菜单要提供等价入口
触屏与键盘用户无法右键，关键操作必须在工具栏或列表行按钮中同时存在。
正在导出全部数据
共 128,430 条记录，预计需要 20 秒
64%请勿关闭页面
离开这个页面？
你有 3 处修改尚未保存，离开后这些内容将无法恢复。
点击遮罩空白处同样视为「留在本页」
删除整个工作区
工作区内 32 个页面、148 个素材将被永久删除。
区分大小写，输入错误时确认按钮将保持禁用。