feat: 加入 AMLL 歌词组件,并部分重构设置页面#41
Open
ITManCHINA wants to merge 22 commits into
Open
Conversation
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.
1. 歌词解析与渲染 (AMLL)
src/utils/lyric/parseTTML.ts): 新增cleanTTMLTranslations。在解析 TTML 歌词前,根据用户偏好语言过滤并清理无关语言的span和translation节点。src/utils/lyric/parse.ts): 集成@applemusic-like-lyrics/lyric的parseTTML与parseYrc解析器。解析异常时,自动降级至原有本地解析器。src/components/player/Lyrics/AMLLLyrics.vue): 新增 AMLL 歌词渲染组件。注入--amll-lp-font-size: 1em以继承系统字体大小,通过watchEffect同步 8 个弹性物理参数。支持showLineRomanization和showWordRomanization以分别控制逐行/逐词音译显隐。src/components/player/FullPlayer/index.vue): 根据settings.lyric.engine配置,条件渲染AMLLLyrics(绑定amllShowLineRomanization和amllShowWordRomanization)或原有Lyrics组件。2. 流体动画背景
src/components/player/FullPlayer/BackgroundRender.vue): 新增基于 PixiJS 的渐变背景渲染组件,实现彩色流体动态背景。src/components/player/FullPlayer/PlayerBackground.vue): 当配置为流体背景时,挂载BackgroundRender渲染实例。3. 设置面板重构与条件渲染
src/types/settings.ts,src/stores/settings.ts): 新增engine开关和 8 个物理参数字段,以及amllShowLineRomanization和amllShowWordRomanization字段,完成默认值初始化与持久化。src/types/settings-schema.ts,src/components/settings/):SettingItem新增visible?: () => boolean属性以控制配置项显隐,并在搜索和分区渲染时做过滤。SettingWidgetType新增"title"类型,用于无外框的纯文本二级标题组件展示。SettingItem新增indentChildren?: boolean(默认true),用以决定下级选项是否添加左侧虚线指示与缩进(pl-4 border-l ...)。src/settings/categories/fullScreenLyric.ts):amllVerticalSpringHeader(垂直位移弹簧参数)和amllScaleSpringHeader(缩放弹簧参数)两个二级标题,其下各自展示 4 个微调滑块。showRomanization开关,替换展示amllShowLineRomanization(显示逐行音译)和amllShowWordRomanization(显示逐词音译)。wordFadeWidth(文字渐变宽度) 的步长调整为更精准的0.02,使其对两个引擎均保持可见且在“布局与透明度”小节中共享展示。springPreset声明indentChildren: false,使其在展开自定义参数时不进行缩进。src/i18n/locales/): 补充 AMLL 物理参数、逐行/逐词音译开关及二级标题的分区中英文翻译。4. 歌词制作底栏与多作者支持
src/utils/lyric/author.ts,src/stores/media.ts): 重构作者提取逻辑为extractLyricAuthors,支持解析 TTML 中全部ttmlAuthorGithubLogin标识,并在mediastore 中以lyricAuthors数组做状态管理。src/components/player/FullPlayer/index.vue): 重构全屏播放器底栏,使用v-for渲染多位歌词作者,逗号分隔,并绑定各自的 Github 超链接。src/components/player/Lyrics/AMLLLyrics.vue): 引入<Teleport>将底栏投射至 AMLL 的底部物理节点。动态注入.lp-line.lp-credit类并同步物理内边距以与主歌词对齐。src/components/player/Lyrics/):.lp-credit引入z-index: 10 !important和pointer-events: auto !important,提升渲染层级,解决暂停时由于普通歌词淡入遮挡导致的点击穿透与超链接失效 Bug。:deep(.lp-line.lp-credit)添加contain: none !important和overflow: visible !important,移除 AMLL 的绘制裁剪限制,解决作者超链接悬停背景切边问题。