feat: 新增页面磨砂效果,优化主题配色与背景配置 - #29
Merged
Merged
Conversation
- 重构封面取色逻辑,使用Web Worker分离取色任务避免主线程阻塞 - 调整背景遮罩透明度范围为0-80,默认值改为20 - 新增页面磨砂模糊滑块,支持0-20px自定义模糊程度 - 为布局、导航、卡片等组件添加磨砂效果支持 - 优化主题跟随封面的判断逻辑,增加颜色合法性校验 - 移除songCoverTheme的持久化存储,减少主线程阻塞 - 重构颜色工具函数,拆分取色逻辑到独立Worker文件
- 调整背景动画帧率为45、流动速度为1 - 降低背景渲染缩放比例至0.3 - 减小歌词字体大小至40 - 启用在线TTML歌词功能
- 将页面磨砂效果的默认值从0修改为4,优化初始界面视觉效果
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 变更类型
📝 变更说明
本次改动围绕自定义背景、封面取色和主题跟随封面逻辑进行优化。
重构封面取色逻辑
将封面颜色量化与主题色生成逻辑拆分到独立
Web Worker中执行,减少切歌或封面更新时对主线程的阻塞。优化封面取色性能
主线程保留图片加载与
canvas采样,耗时较高的颜色量化任务交给 Worker 处理,并保留主线程回退逻辑,提升兼容性和稳定性。新增页面磨砂模糊配置
新增页面磨砂模糊滑块,支持
0-20px自定义模糊程度,用于控制自定义背景下的 UI 磨砂效果。调整背景遮罩透明度范围
将背景遮罩透明度范围调整为
0-80,默认值改为20,减少高透明度遮罩导致背景层次过重的问题。完善 UI 磨砂效果覆盖范围
为布局、导航、卡片、弹窗、浮层等组件补充磨砂效果支持,并将磨砂 CSS 变量提升到全局根节点,确保 Teleport 到
body的组件也能正确继承。优化主题跟随封面的判断逻辑
增加封面主题色合法性校验,避免冷启动时空对象被误判为有效主题,导致主题覆盖为空。
移除
songCoverTheme持久化存储封面主题色不再持久化,避免冷启动读取旧封面主题造成不一致,同时减少不必要的状态恢复和主线程压力。
重构颜色工具函数
拆分取色算法、Worker 通信与主题应用逻辑,提高代码职责清晰度和后续维护性。
📱 影响范围
✅ 自检清单
devpnpm lint且无 warningpnpm typecheck且无报错🧪 测试方式
pnpm lint,确认无 warning 和 error。💬 其他说明 (选填)
封面取色已接入
Web Worker,并保留主线程回退逻辑。若 Worker 创建失败、执行超时或运行异常,仍会回退到主线程完成取色,避免影响主题色生成。