zhouyi 发布于
v2.1.3
最新>=2.23.0
🎨 修复说明：文章编辑 Zen 模式及按钮涟漪特效深度优化
本次更新主要针对 Halo Console 中的按钮点击交互（Ripple
Effect）进行了深度重构与修复，彻底解决了在特定布局下（如文章编辑 Zen 模式、弹窗、下拉菜单内）特效显示异常的问题。
🐛 问题修复 (Bug Fixes)
- 修复 Zen 模式下涟漪动画错位的问题 (#9)：之前在文章编辑的 Zen
模式下点击顶部工具栏，涟漪特效会跑到屏幕左上角。这是因为 Vue 的 Virtual DOM 更新剥离了我们动态注入的
position:relative class 导致的。我们重构了渲染逻辑，改为使用独立挂载的脱离文档流容器 (Detached fixed container)
进行动画绘制，从而根治了该问题。 - 修复非鼠标设备触发时的原点计算错误：当通过键盘（如 Enter / Space）或通过代码调用 .click()
触发按钮时，由于没有鼠标坐标（e.clientX/Y 为 0），涟漪同样会在屏幕左上角产生。现已加入对 e.detail === 0
的智能识别，在非鼠标点击场景下，自动取按钮的中心点作为涟漪的扩散原点。 - 修复特定浮层组件中涟漪被遮挡（消失）的问题：彻底废弃了硬编码 z-index: 1000
的暴力方案。现在当触发涟漪时，程序会自动沿 DOM 树向上遍历（Walk Up），精准寻找当前按钮所在的层叠上下文（Stacking
Context），并动态计算 z-index。这保证了哪怕按钮是在层级极高（如 z-index:
1500）的弹窗或下拉菜单中被点击，涟漪也一定能正常覆盖在按钮表面而不会被其他元素吞噬。
⚡ 性能与体验优化 (Optimizations)
- 解决“连点瞬移”现象：当快速连点不同的按钮（间隔 <
550ms）时，之前会有上一个按钮残存的涟漪突然飞拽到新按钮上的情况。现在改为每次点击分配独立容器的机制，消除了动画干扰
，即使是狂点鼠标也能丝滑响应。 - 动态样式实时响应：移除了带有滞后性的样式缓存。现在的涟漪颜色、按钮倒角（border-radius）等属性会在每次点击时实时计算
，确保在用户切换深浅色主题或者按钮发生 hover、active、disabled 等状态转变时，涟漪动画的颜色始终精准契合当前的主题。 - 代码重构与可维护性提升：引入了更现代、具可读性的 Object.assign
进行样式赋值，并增加了核心坐标及层级穿透的开发者注释。
影响范围：Halo Console 的所有全局按钮及工具栏操作体验。
特别鸣谢：感谢 @Zyx-2012 提交的 Issue (#9) 与详尽反馈！
资源下载
- plugin-ui-beautify-2.1.3.jar