今天对博客首页和音乐播放体验进行了一轮较完整的优化。本次更新主要围绕首页布局、文章轮播、音乐播放器、歌词同步以及跨页面播放状态展开。

一、首页精选文章轮播

首页精选内容重新整理为更紧凑的横向布局，文章图片采用 4:3 比例完整显示，避免拉伸、裁切和比例失真。经过多轮尺寸调整，目前图片按原标准约 1.7 倍显示，并针对桌面端、中等屏幕和手机端分别设置了响应式尺寸。

轮播两侧的切换箭头已经移除，底部改为圆点与紫色胶囊组合的切换指示器。未选中项目显示为圆点，当前项目以更宽的胶囊形高亮。点击某一项后会暂停自动轮播，点击轮播区域之外则恢复自动切换。

二、音乐播放器重构

首页播放器移动到精选文章区域右侧，重新调整了歌曲信息、进度条、上一首、播放或暂停、下一首和音量控制的排列与比例。播放器支持网易云音乐单曲及歌单数据，歌曲无法播放时会自动尝试下一首。

播放时首页封面唱片会持续旋转，暂停后停止转动。播放器玻璃背景透明度可以在主题后台调整，同时保留了更清晰、更易操作的进度条与音量调节条。

三、实时歌词与音乐律动

首页原有的分类信息模块已替换为居中的歌词显示区。播放器每次只显示当前唱到的一句歌词，并以紫色逐字渐变呈现播放进度。系统会依据音频时间轴自动同步歌词，也保留歌词偏移设置，用于校准不同音源可能存在的固定误差。

歌词两侧增加了动态音乐效果：左侧为随播放状态变化的柱状律动，右侧为动态音符。音乐暂停时动画同步停止，使视觉状态与真实播放状态保持一致。

四、跨页面悬浮播放

从首页进入文章或其他页面后，音乐不会重新开始，而是延续原来的歌曲、进度和音量。播放器会切换为可拖动的悬浮模式，提供上一首、播放或暂停、下一首和音量调节功能，不再显示歌词。

悬浮播放器拖到浏览器左右边缘后，在鼠标未悬停时会收缩为旋转唱片；悬停后自动展开。歌曲名称与控制按钮之间会自动适配，名称超过八个字时采用横向滚动显示，外围宽度也会随内容变化。

五、稳定性修复

本次还重点处理了页面跳转后音量突然增大、同时播放多首歌曲、暂停后仍有声音、刷新文章页后悬浮播放器消失，以及首页侧边栏重复出现播放器等问题。播放状态现在由单一播放器实例统一管理，避免页面切换反复创建音频对象。

同时修复了部分页面布局错位，并进一步完善不同屏幕宽度下的排版，让轮播图片、文字信息和音乐控件保持清晰、稳定。

这次更新从视觉布局一路调整到播放状态管理，细节很多，但首页终于更接近理想中的样子。后续还会继续根据实际使用情况完善交互和兼容性。