噪音等级组件改造 · 聚光灯方案
StudyNoiseDistributionWidget 视觉升级 Mockup v2 — 局部渐变聚焦，而非全图渐变
设计理念：
不是整张图都铺满渐变色带，而是只在
当前等级附近
产生一个柔和的聚光灯光晕。 其余区域保持低调暗淡，让用户视线自然聚焦到当前所处等级。 当等级切换时，光晕平滑滑动到新位置，颜色同步过渡。
Quiet 安静
→
Normal 正常
→
Noisy 嘈杂
→
Extreme 极端
点击下方按钮切换等级，观察光晕移动效果
🎛 模拟噪音等级切换
当前等级
Quiet 安静
Normal 正常
Noisy 嘈杂
Extreme 极端
当前实现 (Baseline)
四色硬切色带，各等级区域均匀着色，没有视觉焦点。用户需要主动寻找"我在哪个等级"。
噪音等级分布
Realtime
Extreme
Noisy
Normal
Quiet
-12s
-6s
Now
聚光灯方案 — 局部渐变聚焦
只在当前等级附近产生柔和光晕，其余区域保持暗淡。等级切换时光晕平滑滑动，Y轴标签联动高亮，右侧指示条标注当前位置。下方条形图展示分布占比。
推荐
噪音等级分布
Realtime
Extreme
Noisy
Normal
Quiet
-12s
-6s
Now
等级分布
安静 35%
正常 40%
嘈杂 18%
极端 7%
紧凑模式
噪音等级分布
Session
Ext
Noisy
Norm
Quiet
-12s
-6s
Now
四种等级状态一览
同时展示四个等级的聚光灯效果，可以直观对比光晕位置、颜色和强度的差异。
● Quiet 安静
Ext
Noisy
Norm
Quiet
● Normal 正常
Ext
Noisy
Norm
Quiet
● Noisy 嘈杂
Ext
Noisy
Norm
Quiet
● Extreme 极端
Ext
Noisy
Norm
Quiet
@keyframes extremePulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }