Use body-lock for quick access background scroll (#382)

* Checkpoint before follow-up message

Co-authored-by: jxxghp <jxxghp@live.cn>

* Replace custom BodyLock with body-scroll-lock library

Co-authored-by: jxxghp <jxxghp@live.cn>

* Fix scroll behavior in QuickAccess panel with targeted scroll disabling

Co-authored-by: jxxghp <jxxghp@live.cn>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: jxxghp <jxxghp@live.cn>

package.json

@@ -41,6 +41,7 @@
     "ace-builds": "^1.37.4",
     "apexcharts": "^4.0.0",
     "axios": "^1.7.9",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "colorthief": "^2.6.0",
     "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.2.0",
@@ -74,6 +75,7 @@
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@originjs/vite-plugin-federation": "^1.4.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^20.1.4",

src/layouts/components/QuickAccess.vue

@@ -7,6 +7,7 @@ import { useRecentPlugins } from '@/composables/useRecentPlugins'
 import PluginDataDialog from '@/components/dialog/PluginDataDialog.vue'
 import { VCard } from 'vuetify/components'
 import { getDominantColor } from '@/@core/utils/image'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
 // 国际化
 const { t } = useI18n()
@@ -212,11 +213,18 @@ watch(
     if (visible) {
       fetchPluginsWithPage()
       loadRecentPlugins()
-      // 添加v-overlay-scroll-blocked类到html元素
+      // 禁用背景滚动，但允许面板内部滚动
-      document.documentElement.classList.add('v-overlay-scroll-blocked')
+      // 注意：参数是要允许滚动的目标元素，即面板本身
+      const panelElement = document.querySelector('.plugin-quick-access')
+      if (panelElement) {
+        disableBodyScroll(panelElement as HTMLElement)
+      }
     } else {
-      // 移除v-overlay-scroll-blocked类
+      // 恢复背景滚动
-      document.documentElement.classList.remove('v-overlay-scroll-blocked')
+      const panelElement = document.querySelector('.plugin-quick-access')
+      if (panelElement) {
+        enableBodyScroll(panelElement as HTMLElement)
+      }
     }
   },
   { immediate: true },
@@ -229,9 +237,12 @@ onMounted(() => {
   }
 })
 
-// 组件卸载时确保移除v-overlay-scroll-blocked类
+// 组件卸载时确保恢复背景滚动
 onUnmounted(() => {
-  document.documentElement.classList.remove('v-overlay-scroll-blocked')
+  const panelElement = document.querySelector('.plugin-quick-access')
+  if (panelElement) {
+    enableBodyScroll(panelElement as HTMLElement)
+  }
 })
 
 // 处理触摸开始

yarn.lock

@@ -1927,6 +1927,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/body-scroll-lock@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-3.1.2.tgz#1ae7857d98180dbe6c3b05abbe7ec1fa67b614e3"
+  integrity sha512-ELhtuphE/YbhEcpBf/rIV9Tl3/O0A0gpCVD+oYFSS8bWstHFJUgA4nNw1ZakVlRC38XaQEIsBogUZKWIPBvpfQ==
+
 "@types/crypto-js@^4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
@@ -2879,6 +2884,11 @@ body-parser@1.20.3:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+body-scroll-lock@^4.0.0-beta.0:
+  version "4.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
+  integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"