refactor(core): 将点击相关事件和样式由歌词行上移至歌词组#538
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
该 PR 将歌词行的点击/右键事件监听与 hover/active 高亮、内外边距等样式从“单行歌词”上移到“歌词组容器”,以统一交互与视觉表现,并通过元素映射实现事件 O(1) 路由。
Changes:
- 将 click/contextmenu 事件监听集中到
DomLyricPlayer根节点,并基于.lyricLineWrapper+lyricGroupElementMap路由到对应歌词组 - 扩展
LyricLineMouseEvent,新增bgLine字段以暴露背景人声行(若存在) - 调整歌词组/背景行相关样式:padding/radius/hover/active 统一上移到组容器,并更新背景行容器定位逻辑
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/core/src/styles/lyric-player.module.css | 将 hover/active 与内外边距上移到歌词组容器,并调整背景人声容器布局/定位 |
| packages/core/src/lyric-player/dom/lyric-line.ts | 移除逐行鼠标事件封装与监听器管理逻辑 |
| packages/core/src/lyric-player/dom/index.ts | 改为根节点事件委托,事件对象新增 bgLine 并通过组容器映射路由 |
| .nx/version-plans/version-plan-1779103936447.md | 为 core-bundle 增加 patch 版本计划 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
b1e4fe7 to
9b632b7
Compare
9b632b7 to
026bcb3
Compare
026bcb3 to
58aa4b6
Compare
Linho1219
reviewed
May 19, 2026
This comment has been minimized.
This comment has been minimized.
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.
摘要
将原本分散在单行歌词上的鼠标事件监听、hover/active 遮罩效果以及内外边距控制上移至歌词组,以获得更一致的视觉和点击效果
改动点
LyricLineEl上遍历绑定鼠标事件的逻辑,改为在DomLyricPlayer根节点挂载唯一的click和contextmenu监听器,用lyricGroupElementMap实现 O(1) 路由LyricLineMouseEvent的基础上新增bgLine属性,下游消费者可以获取到点击的歌词组的背景人声行。lyric-line.ts中不再需要的RawLyricLineMouseEvent、listenersMap及其增删方法.lyricLine和.lyricBgLine各自的padding和border-radius,由外层组容器.lyricLineWrapper统一处理内外边距:hover和:active触发的背景高亮交互上移至歌词组,可以同时高亮包含主歌词和背景人声歌词的歌词组,而非之前单独高亮主歌词行和背景人声歌词行.lyricLine上的.dirty样式验证