Skip to content

feat: 加入 AMLL 歌词组件,并部分重构设置页面#41

Open
ITManCHINA wants to merge 22 commits into
SPlayer-Dev:devfrom
ITManCHINA:feat/add-amll
Open

feat: 加入 AMLL 歌词组件,并部分重构设置页面#41
ITManCHINA wants to merge 22 commits into
SPlayer-Dev:devfrom
ITManCHINA:feat/add-amll

Conversation

@ITManCHINA

@ITManCHINA ITManCHINA commented Jun 18, 2026

Copy link
Copy Markdown
Member

1. 歌词解析与渲染 (AMLL)

  • 多语言过滤 (src/utils/lyric/parseTTML.ts): 新增 cleanTTMLTranslations。在解析 TTML 歌词前,根据用户偏好语言过滤并清理无关语言的 spantranslation 节点。
  • AMLL 解析适配 (src/utils/lyric/parse.ts): 集成 @applemusic-like-lyrics/lyricparseTTMLparseYrc 解析器。解析异常时,自动降级至原有本地解析器。
  • AMLL 歌词组件 (src/components/player/Lyrics/AMLLLyrics.vue): 新增 AMLL 歌词渲染组件。注入 --amll-lp-font-size: 1em 以继承系统字体大小,通过 watchEffect 同步 8 个弹性物理参数。支持 showLineRomanizationshowWordRomanization 以分别控制逐行/逐词音译显隐。
  • 歌词引擎分流 (src/components/player/FullPlayer/index.vue): 根据 settings.lyric.engine 配置,条件渲染 AMLLLyrics(绑定 amllShowLineRomanizationamllShowWordRomanization)或原有 Lyrics 组件。

2. 流体动画背景

  • 流体动画组件 (src/components/player/FullPlayer/BackgroundRender.vue): 新增基于 PixiJS 的渐变背景渲染组件,实现彩色流体动态背景。
  • 背景挂载 (src/components/player/FullPlayer/PlayerBackground.vue): 当配置为流体背景时,挂载 BackgroundRender 渲染实例。

3. 设置面板重构与条件渲染

  • 数据结构与 Store (src/types/settings.ts, src/stores/settings.ts): 新增 engine 开关和 8 个物理参数字段,以及 amllShowLineRomanizationamllShowWordRomanization 字段,完成默认值初始化与持久化。
  • 条件渲染与二级标题 (src/types/settings-schema.ts, src/components/settings/):
    • SettingItem 新增 visible?: () => boolean 属性以控制配置项显隐,并在搜索和分区渲染时做过滤。
    • SettingWidgetType 新增 "title" 类型,用于无外框的纯文本二级标题组件展示。
    • SettingItem 新增 indentChildren?: boolean(默认 true),用以决定下级选项是否添加左侧虚线指示与缩进(pl-4 border-l ...)。
  • 歌词设置 Schema (src/settings/categories/fullScreenLyric.ts):
    • 提取重构全新的全屏歌词设置分区,根据引擎类型实现配置项互斥显隐。
    • 当启用 AMLL 引擎并开启弹簧调试开关时,嵌套展示 amllVerticalSpringHeader(垂直位移弹簧参数)和 amllScaleSpringHeader(缩放弹簧参数)两个二级标题,其下各自展示 4 个微调滑块。
    • 当引擎为 AMLL 时,隐藏原 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 标识,并在 media store 中以 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 !importantpointer-events: auto !important,提升渲染层级,解决暂停时由于普通歌词淡入遮挡导致的点击穿透与超链接失效 Bug。
    • 强行对歌词作者底栏容器及其伪类、以及 AMLL 自身 bottomLine 节点应用透明背景覆盖,消除多余的悬停/点击背景反馈。
    • :deep(.lp-line.lp-credit) 添加 contain: none !importantoverflow: visible !important,移除 AMLL 的绘制裁剪限制,解决作者超链接悬停背景切边问题。

@ITManCHINA ITManCHINA marked this pull request as draft June 18, 2026 17:25
@ITManCHINA ITManCHINA marked this pull request as ready for review June 19, 2026 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant