版本管理,优化
This commit is contained in:
@@ -12,12 +12,15 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
|
||||
* ```ts
|
||||
* // 模块 <script setup> 顶部
|
||||
* const activeTab = ref('overview')
|
||||
* const tabsListRef = useModuleTabs(activeTab, [
|
||||
* const tabsListRef = useModuleTabs('proxy', activeTab, [
|
||||
* { value: 'overview', label: '概览' },
|
||||
* { value: 'settings', label: '设置' }
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* 第一个参数为模块 id:搜索导航跳转时,模块挂载后会自动
|
||||
* 消费 moduleTabsStore 中对应的待跳转 tab(pendingTab)。
|
||||
*
|
||||
* ```vue
|
||||
* <!-- 模板中给 TabsList 包一层带 ref 的 div -->
|
||||
* <div ref="tabsListRef">
|
||||
@@ -29,7 +32,8 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
|
||||
* 1. onMounted 时注册标签到 moduleTabsStore,TitleBar 据此渲染浮动切换器
|
||||
* 2. 用 IntersectionObserver 监听 TabsList 可见性(rootMargin 裁剪 TitleBar 高度)
|
||||
* 3. 双向 watch 同步本地 activeTab 与 store.activeTab
|
||||
* 4. onUnmounted 时清理 observer 并注销标签
|
||||
* 4. 消费搜索导航的待跳转 tab(模块尚未挂载的场景)
|
||||
* 5. onUnmounted 时清理 observer 并注销标签
|
||||
*
|
||||
* ## 约束
|
||||
* - TitleBar 高度固定为 40px (h-10),composable 内部已用 44px 裁剪(含缓冲)
|
||||
@@ -37,6 +41,7 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
|
||||
* - 模块卸载时务必让 composable 的 onUnmounted 执行(已自动处理,无需手动调用)
|
||||
*/
|
||||
export function useModuleTabs(
|
||||
moduleId: string,
|
||||
activeTab: Ref<string>,
|
||||
tabs: ModuleTab[]
|
||||
): Ref<HTMLElement | null> {
|
||||
@@ -45,6 +50,15 @@ export function useModuleTabs(
|
||||
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
/** 应用待跳转 tab(若属于当前模块的 tab 列表) */
|
||||
const applyPendingTab = () => {
|
||||
const pending = tabsStore.consumePendingTab(moduleId)
|
||||
if (pending && tabs.some(t => t.value === pending)) {
|
||||
activeTab.value = pending
|
||||
tabsStore.setActiveTab(pending)
|
||||
}
|
||||
}
|
||||
|
||||
const setupObserver = () => {
|
||||
const el = tabsListRef.value
|
||||
if (!el || observer) return
|
||||
@@ -75,10 +89,19 @@ export function useModuleTabs(
|
||||
}
|
||||
})
|
||||
|
||||
// 模块已挂载时(搜索结果选中同一模块),pendingTab 变化 → 直接切换 tab
|
||||
watch(() => tabsStore.pendingTab, (p) => {
|
||||
if (p?.moduleId === moduleId) {
|
||||
applyPendingTab()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
tabsStore.registerTabs(tabs, activeTab.value)
|
||||
await nextTick()
|
||||
setupObserver()
|
||||
// 搜索导航跳转:模块刚挂载,消费待跳转 tab
|
||||
applyPendingTab()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
Reference in New Issue
Block a user