diff --git a/src/layouts/components/QuickAccess.vue b/src/layouts/components/QuickAccess.vue index 58098743..b599533b 100644 --- a/src/layouts/components/QuickAccess.vue +++ b/src/layouts/components/QuickAccess.vue @@ -206,6 +206,29 @@ function handleClosePluginDataDialog() { currentPlugin.value = null } +// 管理滚动状态 +function manageScrollLock() { + if (isVisible.value) { + // 使用 nextTick 确保 DOM 已经更新 + nextTick(() => { + // 先恢复之前的锁定状态,避免重复锁定 + const scrollableElement = document.querySelector('.all-plugins-grid') + if (scrollableElement) { + // 确保元素存在且可见 + if ((scrollableElement as HTMLElement).offsetHeight > 0) { + disableBodyScroll(scrollableElement as HTMLElement) + } + } + }) + } else { + // 恢复背景滚动 + const scrollableElement = document.querySelector('.all-plugins-grid') + if (scrollableElement) { + enableBodyScroll(scrollableElement as HTMLElement) + } + } +} + // 监听可见性变化,加载数据 watch( () => isVisible.value, @@ -213,18 +236,9 @@ watch( if (visible) { fetchPluginsWithPage() loadRecentPlugins() - // 禁用背景滚动,但允许面板内部滚动 - // 注意:参数是要允许滚动的目标元素,即面板本身 - const panelElement = document.querySelector('.plugin-quick-access') - if (panelElement) { - disableBodyScroll(panelElement as HTMLElement) - } + manageScrollLock() } else { - // 恢复背景滚动 - const panelElement = document.querySelector('.plugin-quick-access') - if (panelElement) { - enableBodyScroll(panelElement as HTMLElement) - } + manageScrollLock() } }, { immediate: true }, @@ -234,14 +248,15 @@ onMounted(() => { if (isVisible.value) { fetchPluginsWithPage() loadRecentPlugins() + manageScrollLock() } }) // 组件卸载时确保恢复背景滚动 onUnmounted(() => { - const panelElement = document.querySelector('.plugin-quick-access') - if (panelElement) { - enableBodyScroll(panelElement as HTMLElement) + const scrollableElement = document.querySelector('.all-plugins-grid') + if (scrollableElement) { + enableBodyScroll(scrollableElement as HTMLElement) } }) @@ -441,40 +456,41 @@ function handleBackdropClick(event: MouseEvent) {