音乐模块调整

This commit is contained in:
zhongluofeng
2026-09-15 17:17:16 +08:00
parent 4f574cb5fa
commit 8f853f7ef3
31 changed files with 3819 additions and 936 deletions
+9 -5
View File
@@ -29,16 +29,18 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
* ```
*
* ## 工作原理
* 1. onMounted 时注册标签到 moduleTabsStoreTitleBar 据此渲染浮动切换器
* 1. onMounted 时注册标签到 moduleTabsStore(**并复用该模块上次停留的 tab**),
* TitleBar 据此渲染浮动切换器
* 2. 用 IntersectionObserver 监听 TabsList 可见性(rootMargin 裁剪 TitleBar 高度)
* 3. 双向 watch 同步本地 activeTab 与 store.activeTab
* 4. 消费搜索导航的待跳转 tab(模块尚未挂载的场景)
* 5. onUnmounted 时清理 observer 并注销标签
* 5. onUnmounted 时清理 observer 并把当前 tab 记到 store(按模块)后注销标签
*
* ## 约束
* - TitleBar 高度固定为 40px (h-10)composable 内部已用 44px 裁剪(含缓冲)
* - 一个模块同一时间只能注册一组标签(store 是单例)
* - 模块卸载时务必让 composable 的 onUnmounted 执行(已自动处理,无需手动调用)
* - tab 记忆只保内存、不落盘:tab 集合可能随版本变化,跨重启恢复旧值风险更大
*/
export function useModuleTabs(
moduleId: string,
@@ -97,10 +99,12 @@ export function useModuleTabs(
})
onMounted(async () => {
tabsStore.registerTabs(tabs, activeTab.value)
// 注册时带上模块 id:store 据此复用「上次停留的 tab」(模块卸载时保存)
const restored = tabsStore.registerTabs(moduleId, tabs, activeTab.value)
if (restored !== activeTab.value) activeTab.value = restored
await nextTick()
setupObserver()
// 搜索导航跳转:模块刚挂载,消费待跳转 tab
// 搜索导航跳转:模块刚挂载,消费待跳转 tab(优先级高于上次停留)
applyPendingTab()
})
@@ -109,7 +113,7 @@ export function useModuleTabs(
observer.disconnect()
observer = null
}
tabsStore.unregisterTabs()
tabsStore.unregisterTabs(moduleId)
})
return tabsListRef