FxMusicBall 音乐球

悬浮在页面左下角的音乐播放器，毛玻璃质感，支持单曲/列表模式。

视觉效果

• 毛玻璃背景 — backdrop-filter: blur() 半透明效果，亮暗模式自动适配
• 紫蓝渐变进度环 — SVG 自绘进度环，支持渐变 stroke（#bd34fe → #41d1ff）
• 旋转光环 — 播放时球体外围出现匀速旋转的渐变光环
• 进度环脉冲 — 播放时进度环有从紫到蓝的脉冲发光效果
• 背景微光流动 — 播放时球体背景有紫蓝光斑流动效果
• 暗色发光 — 暗色模式下播放时球体周围出现紫蓝色光晕

交互设计

状态	行为
默认	50px 圆球，显示播放按钮和环形进度
鼠标悬停	0.5s 后弹性展开为 330px 宽的控制面板
控制面板	播放/暂停、时间显示、进度条、音量控制、列表按钮
音量	鼠标悬停音量图标时展开音量滑块
音乐列表	点击列表按钮弹出曲目列表，带淡入上移动画

配置

单曲模式

musicBall: {
  src: '/music/my-song.mp3',
  autoplay: false,
  loop: true,
}

列表模式

musicBall: {
  list: [
    { name: '梦中的婚礼', src: '/music/wedding-dream.mp3' },
    { name: '海阔天空', src: '/music/broad-sea-sky.mp3' },
    { name: '碎银几两', src: '/music/silver-coins.mp3' },
  ],
  autoplay: true,
  loop: true,
}

配置项

字段	类型	默认值	说明
enable	boolean	true	是否启用音乐球
visible	boolean	true	是否可见（通过 display 控制）
autoplay	boolean	false	自动播放（注意：浏览器可能阻止自动播放）
loop	boolean	true	循环播放（仅单曲模式有效）
src	string	''	单首音乐地址
list	MusicItem[]	—	多首音乐列表

无障碍

所有动画效果尊重 prefers-reduced-motion 系统设置。当用户开启减弱动画偏好时，旋转光环、脉冲、微光等动效自动禁用。

技术细节

• 使用自绘 SVG 替代 Element Plus 的 ElProgress 组件，支持渐变 stroke
• 进度环使用 stroke-dasharray 实现弧形进度指示
• 通过 is-playing CSS 类名控制播放状态动效
• 旋转光环通过 v-if="isPlay" 条件渲染，暂停时从 DOM 移除以节省资源