音乐模块调整
This commit is contained in:
@@ -29,16 +29,18 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
|
||||
* ```
|
||||
*
|
||||
* ## 工作原理
|
||||
* 1. onMounted 时注册标签到 moduleTabsStore,TitleBar 据此渲染浮动切换器
|
||||
* 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
|
||||
|
||||
Reference in New Issue
Block a user