Skip to content

v0.2.0-rc3

Pre-release
Pre-release

Choose a tag to compare

View all tags
@abloom25 abloom25 released this 01 Jul 13:31
v0.2.0-rc3
85160c7

Added

  • 歌词翻译开关:新增 lyricTranslation 设置项(默认开启),关闭时翻译行通过 <Transition name="translation-toggle"> 以 max-height: 2.2em → 0 + translate: 0 → -0.18em + opacity: 0.76 → 0 三重过渡动画收起;PlayerSettings 类型与 migrateSettings 均新增该字段,默认值 true 保证向后兼容;displayedLines computed 在关闭时逐行剥离 translation 字段,同时 emitSnapshot 改发 displayedLines 而非原始 lines,歌词小窗同步响应翻译开关
  • 管理后台移动端导航面板:AdminSidebar < 760px 时折叠为 sticky 顶栏(站点名 + 面包屑 + 汉堡按钮),新增 <Teleport to="body"> 底部抽屉式 mobile-nav-panel,复用 useDrawerSheet 实现全屏/半屏/关闭三段吸附拖拽,isMobileViewport() 动态启用;面板内双列 grid 布局容纳 7 个导航标签,底部 sidebar-footer 包含「保存全部」(跨列占满)、「退出登录」、「返回播放器」三按钮;关闭时选中标签/保存/退出均自动触发 dismissMobileNavAnimated(),遮挡层 .mobile-nav-backdrop 半屏时扩大 inset 覆盖全屏并加深背景;面板样式统一玻璃拟态(backdrop-filter: blur(52px) saturate(180%))+ 圆角顶部 + 底部 safe-area-inset 适配,420px 以下进一步紧凑间距
  • useFocusTrap autoFocus 选项:新增可选的 options.autoFocus 参数,类型为 MaybeRefOrGetter<boolean>,默认 true;当 toValue(options?.autoFocus) === false 时跳过自动聚焦但仍设置 pendingActivation = false 避免状态卡死,移动端 sheet 抽屉(libraryDrawerRef)传入 autoFocus: () => !isMobileSheet.value 以跳过移动端自动对焦
  • PlayerControls 竖排布局 variant="vertical":新增长 54px 的纵向排列模式,播放/上一首/下一首按钮按列堆叠(flex-direction: column),播放按钮 46×46px 带 box-shadow 强调,不渲染进度条行(variant !== 'bar' && variant !== 'vertical'),用于歌词小窗等窄空间场景
  • 开发模式本地配置同步:vite.config.ts 新增 melioraLocalConfigPlugin,在 Vite dev server 注册 POST /__meliora-dev/config 中间件;管理后台 saveConfig 在 import.meta.env.DEV 下自动将清洗后的配置 POST 到该端点,插件经 validateMusicConfig 校验后写入 .meliora/config.local.json 并调用 generatePublicConfig 重新生成 src/generated/public-config.ts,最后通过 server.ws.send('full-reload') 触发热更新,开发环境改配置后无需手动重启;SaveResult 新增 warning? 字段,同步失败时 ok: true 但携带 warning 提示
  • 本地开发配置优先读取:generatePublicConfig 在 MELIORA_LOAD_DEV_VARS=true 且 .meliora/config.local.json 存在时,优先以它作为配置源生成本地公开配置,代替 public/config.json;pnpm generate:public-config:dev 复用此逻辑
  • createTrackShareId 确定性分享标识:src/utils/tracks.ts 新增基于 FNV-1a 哈希(hashShareIdentity)的确定性 share ID,输入为 trackIdentity(标题+艺术家归一化),输出为 36 进制短字符串(不含内部 URL 敏感信息);分享 URL 从 ?track=<track.id> 改为 ?share=<hash>,useTrackShare 分享文案从「正在 Meliora 收听」改为「Meliora: <标题 - 艺术家>」,剪贴板内容同步简化;loadTracks 改为按 share 参数匹配加载后自动移除参数避免分享链接残留
  • shouldUseIOSBackgroundSafeAudio 浏览器能力检测:src/utils/browser.ts 新增该函数,返回 isIOSDevice() && isSafariBrowser() 的合取,统一标识 iOS Safari 后台播放受限场景
  • useDeviceDetection composable:新增 src/composables/useDeviceDetection.ts,抽离原本散布在 App.vue 中的 compactViewport、portableDevice、phoneDevice、lyricsWindowSupported 和 isMobileSheet、viewportMode(枚举 wide/narrow/phone)等设备检测逻辑为独立 composable

Changed

  • 播放器架构拆分:原 2500 行 App.vue 拆为两文件——App.vue 缩至 ~25 行,仅保留 <router-view> + <Transition mode="out-in"> 作为路由壳(接管原 AppShell.vue 职责);播放器全部业务逻辑迁移至 src/views/PlayerView.vue;路由从 component: App 改为 component: PlayerView;main.ts 直接挂载 App 而非 AppShell;AppShell.vue 已删除;agent.md 分层图同步更新为 src/main.ts → src/App.vue → src/views/PlayerView.vue
  • SettingsPanel 去 props 化:组件不再通过 props 接收 settings: PlayerSettings,改为内部直接 storeToRefs(usePlayerStore()) 获取响应式 settings;PlayerView.vue 移除 :settings="settings" 传递;消除了 15 处 vue/no-mutating-props ESLint 违规;PlayerSettings 类型导入从 SettingsPanel 移除,不再依赖 src/types/music
  • LyricsPanel 滚动对齐全面重构:新增 syncActiveLyric / scheduleRealign 统一入口、ScrollToIndexOptions 动画控制、programmaticScroll 标记防误触发、键盘滚动检测、ResizeObserver 监听布局变化、.distance-0 ~ .distance-5 CSS class 代替 inline style、--lyric-size 上移面板根节点;行间距改为动态 clamp(22px, calc(var(--lyric-size) * 1.28), 42px);浏览模式 hover 行加 ::before 伪元素高亮;新增 active prop 控制对齐策略
  • 翻译切换动画:翻译行包裹 <Transition name="translation-toggle">,CSS 定义 max-height(2.2em ↔ 0)、margin-top、opacity(0.76 ↔ 0)、translate(0 ↔ -0.18em) 四属性 360ms cubic-out 过渡;prefers-reduced-motion 下过渡时长清零
  • iOS Safari 后台播放适配:useAudioPlayer 检测到 iOS Safari 时:(a)所有 <audio> 设置 playsinline 属性;(b)活跃音频挂载到 DOM 节点维持后台播放;(c)绕过 Web Audio 节拍分析;(d)关闭 crossfade;(e)初始化/切歌/错误恢复路径均调用挂载;(f)卸载时清理 DOM host
  • useBeatAnalyser 音频资源释放:停止节拍分析时挂起共享 AudioContext 释放音频硬件,后续可 resume 恢复
  • 分享链接去内部 ID 化:分享 URL 从 ?track=<track.id> 改为 ?share=<FNV-1a hash>,文案简化为「Meliora: <标题 - 艺术家>」
  • TrackList 搜索输入简化:debouncedQuery 直接 v-model 绑定,handleSearchInput 由 watcher 驱动
  • 管理后台全页面移动端响应式增强:AdminApp、DashboardView、SiteSettingsEditor、SecurityEditor、AdvancedSettingsEditor、AnalyticsSettingsEditor 均补充 720px/420px 断点适配
  • useDrawerSheet 事件去重:handle 发起的拖拽不再被 container 的 pointermove 重复触发
  • useLyricsWindow 歌词小窗跨 toggle 复用:window.open 使用固定窗口名称 'meliora-lyrics',跨 toggle 复用
  • 版本脚本路径参数化:generatePublicConfig 路径改为函数,DEV 模式支持 .meliora/config.local.json 优先
  • 测试增强:use-audio-player.test.ts 新增 3 个 iOS 适配测试;tracks.test.ts 新增 createTrackShareId 测试;player-store.test.ts 新增 lyricTranslation 迁移测试;use-preload-pool.test.ts 补默认 settings
  • README 补充:新增本地配置同步章节、路线图链接、署名补充
  • agent.md 规范更新:分层图路径、依赖方向、路由过渡参考随架构拆分同步修正

Fixed

  • useFocusTrap 未使用变量:移除声明后从未引用的局部 autoFocus 变量
  • PlayerView.vue 未使用导入:移除 PlayerViewportMode 类型导入与 viewportMode 解构变量
  • SettingsPanel.vue 15 处 props 直接修改:组件改为使用 Pinia store 后彻底消除 vue/no-mutating-props 违规
  • 4 处 vue-tsc -b 严格类型错误:AdminSidebar emit 联合类型重载、HTMLAudioElement.playsInline 非标准属性、测试文件类型断言缺失、测试 playsInline 断言
  • 5 处 Prettier 格式化违规:useFocusTrap.ts import 语句、PlayerView.vue 缩进/解构/多行属性、TrackList.vue v-model 换行

Tests

  • 歌词面板测试:新增 lyrics-panel.test.ts,覆盖滚动对齐、字号变更重对齐、ResizeObserver 集成、用户浏览模式计时器暂停、active tab 切换时状态同步
Assets 2
Loading