版本管理,优化

This commit is contained in:
zhongluofeng
2026-08-11 17:19:36 +08:00
parent 2f20161010
commit 6c7897bf47
33 changed files with 1361 additions and 39 deletions
+25 -2
View File
@@ -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 中对应的待跳转 tabpendingTab)。
*
* ```vue
* <!-- 模板中给 TabsList 包一层带 ref 的 div -->
* <div ref="tabsListRef">
@@ -29,7 +32,8 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
* 1. onMounted 时注册标签到 moduleTabsStoreTitleBar 据此渲染浮动切换器
* 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(() => {