磨砂玻璃

磨砂玻璃（Glassmorphism）让面板变成半透明雾面：背后的内容被柔化模糊、色彩饱和度 轻轻拉高，多层面板叠加时透出彼此的边缘，再配一道顶缘微光——是当下官网与移动端 都在流行的质感语言。

在 Evoke UI 里它是一个全局开关：EvConfigProvider 的 glass 一开，容器、弹层、 导航、下拉默认玻璃化；每个组件又能用 glass 单独强制开或关，用 blur 单独调模糊强度。

全局开关

玻璃卡叠在照片上

glass 配 global: false 时作用域限定在包裹元素内，互不污染页面其余部分；整站开启直接 glass 即可。

玻璃卡 A

背后的山林被柔化成雾面，文字依然清晰可读。

玻璃卡 B（错位叠放）

叠在 A 上的部分透出它的边缘；单张卡传 :glass="false" 可退回实底。

<EvConfigProvider glass>
  <SiteHome />
</EvConfigProvider>

运行时动态切换（如「设置」面板）走 useThemeConfig：

import { useThemeConfig } from '@wil-works/evoke-ui'

const { setGlass, reset } = useThemeConfig()
setGlass(true) // 全站磨砂
reset()        // 恢复默认（磨砂关闭）

三态：跟随全局 / 强制开 / 强制关

每个玻璃组件都有三态 glass prop：缺省跟随全局；glass 强制开；:glass="false" 强制关（在开磨砂的站点里给个别面板退回实底）。

磨砂强度 blur

blur 接收 px 数字（或带单位字符串），内联覆盖该组件的默认模糊；配套 saturate （饱和度倍数）与 tint（底色浓度 %）同理，三者都是独立参数，只用其一即可：

实时调节磨砂质感

拖动滑块观察同一照片上的质感变化，示例代码同步显示当前参数；0px 即完全透明无磨砂，浓度越低底色越透。

实时预览

拖动下方滑块，磨砂质感即时变化。

模糊

16px雾面浓度

70%饱和度

×1.5

<EvCard glass :blur="16" :saturate="1.5" :tint="70">…</EvCard>

弹层与预览

浮层家族同样接入：Modal 磨砂面板、 ImagePreview 磨砂预览背景（遮罩减淡整幅雾化，关闭/箭头 按钮同步玻璃化）、ActionSheet 连片取景、 Select 下拉面板。在玻璃全局开启后无需任何配置，直接呈现。

磨砂弹出层

面板后面是整页雾面；点 Esc 或遮罩关闭。

<EvModal v-model="visible" glass title="磨砂面板">…</EvModal>

覆盖组件

组件	磨砂作用位置
Card / ArticleCard / PricingCard / ProfileCard / ExecCard	卡面
Section / Footer	区块底
Navbar	常驻吸顶栏
Modal	面板
ImagePreview	遮罩与关闭/箭头按钮
ActionSheet	面板整体（标题/列表/取消栏连片）
Tabbar	底部标签栏
NavBar（移动端）	页头条
Select	下拉面板

磨砂令牌

整站调默认质感时改令牌即可（写在 :root 或任意包裹元素上）；单组件微调优先用 blur prop。

令牌	默认值（亮 / 暗）	说明
--ev-glass-blur	16px	模糊半径，blur prop 内联覆盖的就是它
--ev-glass-saturate	1.5	背景饱和度提升
--ev-glass-bg	容器色 72% 不透明	半透明雾面底色
--ev-glass-edge	白 42% / 白 16%	顶缘 1px 高光
--ev-glass-border	边框色 45% / 60% 不透明	发丝描边

降级与豁免

• 浏览器不支持 backdrop-filter 时，玻璃样式整条不生效，自动回落实底，内容可读性不受影响；
• 刻意不透明的风格保持原样：Card 的粉彩 tone / sticker / featured、PricingCard 的 featured 主推卡、ProfileCard 的 plain 形态；
• 桌面 Navbar 的 blur 是「滚动后背景磨砂」的开关，与磨砂强度 无关；它的常驻磨砂由 glass 控制。