From 0918fa1685ee803e18a2c342888f8c1b9ce2a04d Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 10 Jul 2025 12:44:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E6=89=80=E6=9C=89=20VDialog=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2=E4=B8=BA=20DialogWrapper?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   1 +
 src/@core/components/ConfirmDialog.vue        |   4 +-
 src/@core/components/DialogWrapper.vue        |  70 +++++
 .../_default-layout-w-vertical-nav.scss       |   3 +-
 src/@layouts/components/VerticalNavLayout.vue |   5 +-
 src/components/PWAInstallPrompt.vue           |   4 +-
 src/components/cards/CustomRuleCard.vue       |   4 +-
 src/components/cards/DownloaderCard.vue       |   4 +-
 src/components/cards/FilterRuleGroupCard.vue  |   4 +-
 src/components/cards/MediaServerCard.vue      |   4 +-
 .../cards/NotificationChannelCard.vue         |   4 +-
 src/components/cards/PluginAppCard.vue        |   8 +-
 src/components/cards/PluginCard.vue           |  12 +-
 src/components/cards/PluginFolderCard.vue     |   8 +-
 src/components/cards/StorageCard.vue          |   4 +-
 src/components/cards/TorrentCard.vue          |   4 +-
 src/components/dialog/AddDownloadDialog.vue   |   4 +-
 src/components/dialog/AlistConfigDialog.vue   |   4 +-
 src/components/dialog/AliyunAuthDialog.vue    |   4 +-
 src/components/dialog/ForkSubscribeDialog.vue |   4 +-
 src/components/dialog/ForkWorkflowDialog.vue  |   4 +-
 src/components/dialog/ImportCodeDialog.vue    |   4 +-
 src/components/dialog/MediaInfoDialog.vue     |   4 +-
 src/components/dialog/PluginConfigDialog.vue  |   4 +-
 src/components/dialog/PluginDataDialog.vue    |   4 +-
 .../dialog/PluginMarketSettingDialog.vue      |   4 +-
 src/components/dialog/ProgressDialog.vue      |   4 +-
 src/components/dialog/RcloneConfigDialog.vue  |   4 +-
 src/components/dialog/ReorganizeDialog.vue    |   8 +-
 src/components/dialog/SearchBarDialog.vue     |   4 +-
 src/components/dialog/SearchSiteDialog.vue    |   4 +-
 src/components/dialog/SiteAddEditDialog.vue   |   4 +-
 .../dialog/SiteCookieUpdateDialog.vue         |   4 +-
 src/components/dialog/SiteResourceDialog.vue  |   4 +-
 src/components/dialog/SiteUserDataDialog.vue  |   4 +-
 src/components/dialog/SmbConfigDialog.vue     |   4 +-
 src/components/dialog/SubscribeEditDialog.vue |   4 +-
 .../dialog/SubscribeFilesDialog.vue           |   4 +-
 .../dialog/SubscribeHistoryDialog.vue         |   4 +-
 .../dialog/SubscribeShareDialog.vue           |   4 +-
 src/components/dialog/TransferQueueDialog.vue |   4 +-
 src/components/dialog/U115AuthDialog.vue      |   4 +-
 src/components/dialog/UserAddEditDialog.vue   |   4 +-
 src/components/dialog/UserAuthDialog.vue      |   4 +-
 .../dialog/WorkflowActionsDialog.vue          |   4 +-
 .../dialog/WorkflowAddEditDialog.vue          |   4 +-
 src/components/dialog/WorkflowShareDialog.vue |   4 +-
 src/components/filebrowser/FileList.vue       |   4 +-
 src/components/filebrowser/FileToolbar.vue    |   4 +-
 src/composables/useDialogScrollLock.ts        | 242 ++++++++++++++++++
 src/layouts/components/ShortcutBar.vue        |  24 +-
 src/layouts/components/UserProfile.vue        |   4 +-
 src/pages/dashboard.vue                       |   4 +-
 src/pages/discover.vue                        |   4 +-
 src/pages/recommend.vue                       |   4 +-
 src/views/plugin/PluginCardListView.vue       |  12 +-
 src/views/setting/AccountSettingAbout.vue     |   4 +-
 src/views/setting/AccountSettingCache.vue     |   4 +-
 .../setting/AccountSettingNotification.vue    |   4 +-
 src/views/setting/AccountSettingSystem.vue    |   4 +-
 src/views/torrent/TorrentCardListView.vue     |   8 +-
 src/views/torrent/TorrentRowListView.vue      |   8 +-
 src/views/user/UserProfileView.vue            |   4 +-
 63 files changed, 463 insertions(+), 146 deletions(-)
 create mode 100644 src/@core/components/DialogWrapper.vue
 create mode 100644 src/composables/useDialogScrollLock.ts

diff --git a/components.d.ts b/components.d.ts
index 43ffe278..8e599c1e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ConfirmDialog: typeof import('./src/@core/components/ConfirmDialog.vue')['default']
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
+    DialogWrapper: typeof import('./src/@core/components/DialogWrapper.vue')['default']
     ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
     ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
     LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
diff --git a/src/@core/components/ConfirmDialog.vue b/src/@core/components/ConfirmDialog.vue
index fdb6af90..c33299d3 100644
--- a/src/@core/components/ConfirmDialog.vue
+++ b/src/@core/components/ConfirmDialog.vue
@@ -59,7 +59,7 @@ function handleCancel() {
 </script>
 
 <template>
-  <VDialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
+  <DialogWrapper :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
     <VCard>
       <VCardItem>
         <div class="d-flex align-center justify-start mt-3">
@@ -82,5 +82,5 @@ function handleCancel() {
       </VCardActions>
       <VDialogCloseBtn @click="handleCancel" />
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/@core/components/DialogWrapper.vue b/src/@core/components/DialogWrapper.vue
new file mode 100644
index 00000000..5c70c83d
--- /dev/null
+++ b/src/@core/components/DialogWrapper.vue
@@ -0,0 +1,70 @@
+<template>
+  <VDialog v-model="dialogModel" v-bind="$attrs" @update:model-value="handleDialogChange">
+    <slot />
+  </VDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onBeforeUnmount } from 'vue'
+import { useDialogScrollLockWithWatch } from '@/composables/useDialogScrollLock'
+
+// Props
+interface Props {
+  modelValue?: boolean
+  // 滚动锁定配置
+  scrollLock?: boolean
+  preserveScrollPosition?: boolean
+  preventTouchScroll?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollLock: true,
+  preserveScrollPosition: true,
+  preventTouchScroll: true,
+})
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// 计算属性
+const dialogModel = computed({
+  get: () => props.modelValue || false,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+// 使用滚动锁定
+const { isLocked, lockScroll, restoreScroll } = useDialogScrollLockWithWatch(dialogModel, {
+  autoRestore: true,
+  preserveScrollPosition: props.preserveScrollPosition,
+  preventTouchScroll: props.preventTouchScroll,
+})
+
+// 处理弹窗状态变化
+const handleDialogChange = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+
+// 监听弹窗状态变化
+watch(
+  dialogModel,
+  newValue => {
+    if (props.scrollLock) {
+      if (newValue) {
+        lockScroll()
+      } else {
+        restoreScroll()
+      }
+    }
+  },
+  { immediate: true },
+)
+
+// 组件卸载时确保恢复滚动
+onBeforeUnmount(() => {
+  if (isLocked.value) {
+    restoreScroll()
+  }
+})
+</script>
diff --git a/src/@core/scss/template/_default-layout-w-vertical-nav.scss b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
index 92ba9ed9..cc5bf2ab 100644
--- a/src/@core/scss/template/_default-layout-w-vertical-nav.scss
+++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
@@ -46,7 +46,8 @@ $header: ".layout-navbar";
       /* ℹ️ Ensure header styles are preserved when dialog is opened,
         regardless of scroll state
     */
-      html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
+      html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed,
+      html.dialog-scroll-locked &.layout-navbar-fixed {
 
         #{$header} {
           @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue
index a4f552fd..5bc9baa1 100644
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -88,6 +88,9 @@ export default defineComponent({
         },
       })
 
+      // 检查是否有弹窗打开（通过CSS类名判断）
+      const isDialogOpen = document.documentElement.classList.contains('dialog-scroll-locked')
+
       return h(
         'div',
         {
@@ -96,7 +99,7 @@ export default defineComponent({
             'layout-navbar-fixed',
             mdAndDown.value && 'layout-overlay-nav',
             route.meta.layoutWrapperClasses,
-            scrollDistance.value && 'window-scrolled',
+            (scrollDistance.value || isDialogOpen) && 'window-scrolled',
           ],
         },
         [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
diff --git a/src/components/PWAInstallPrompt.vue b/src/components/PWAInstallPrompt.vue
index c8baa163..2d6db2e8 100644
--- a/src/components/PWAInstallPrompt.vue
+++ b/src/components/PWAInstallPrompt.vue
@@ -133,7 +133,7 @@ const instructions = computed(() => {
   </Teleport>
 
   <!-- 手动安装说明对话框 -->
-  <VDialog v-model="showInstructions" max-width="500">
+  <DialogWrapper v-model="showInstructions" max-width="500">
     <VCard>
       <VCardItem>
         <VCardTitle class="d-flex align-center">
@@ -170,7 +170,7 @@ const instructions = computed(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style scoped>
diff --git a/src/components/cards/CustomRuleCard.vue b/src/components/cards/CustomRuleCard.vue
index 14c85cb1..c8c11c2c 100644
--- a/src/components/cards/CustomRuleCard.vue
+++ b/src/components/cards/CustomRuleCard.vue
@@ -110,7 +110,7 @@ function onClose() {
         <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog
+    <DialogWrapper
       v-if="ruleInfoDialog"
       v-model="ruleInfoDialog"
       scrollable
@@ -215,6 +215,6 @@ function onClose() {
           }}</VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue
index 99ba6b4b..071e25cf 100644
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -196,7 +196,7 @@ onUnmounted(() => {
       </VCard>
     </VHover>
 
-    <VDialog
+    <DialogWrapper
       v-if="downloaderInfoDialog"
       v-model="downloaderInfoDialog"
       scrollable
@@ -383,6 +383,6 @@ onUnmounted(() => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/FilterRuleGroupCard.vue b/src/components/cards/FilterRuleGroupCard.vue
index b9601957..96c068fa 100644
--- a/src/components/cards/FilterRuleGroupCard.vue
+++ b/src/components/cards/FilterRuleGroupCard.vue
@@ -223,7 +223,7 @@ function onClose() {
         <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog
+    <DialogWrapper
       v-if="groupInfoDialog"
       v-model="groupInfoDialog"
       scrollable
@@ -308,7 +308,7 @@ function onClose() {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
     <ImportCodeDialog
       v-if="importCodeDialog"
       v-model="importCodeDialog"
diff --git a/src/components/cards/MediaServerCard.vue b/src/components/cards/MediaServerCard.vue
index d057d76e..e1845814 100644
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -204,7 +204,7 @@ onMounted(() => {
       </VCardText>
     </VCard>
 
-    <VDialog
+    <DialogWrapper
       v-if="mediaServerInfoDialog"
       v-model="mediaServerInfoDialog"
       scrollable
@@ -506,6 +506,6 @@ onMounted(() => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/NotificationChannelCard.vue b/src/components/cards/NotificationChannelCard.vue
index edb980a4..0a2cabdd 100644
--- a/src/components/cards/NotificationChannelCard.vue
+++ b/src/components/cards/NotificationChannelCard.vue
@@ -141,7 +141,7 @@ function onClose() {
       </VCardText>
     </VCard>
 
-    <VDialog
+    <DialogWrapper
       v-if="notificationInfoDialog"
       v-model="notificationInfoDialog"
       scrollable
@@ -476,6 +476,6 @@ function onClose() {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index f9dbd084..9d75c338 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -267,15 +267,15 @@ const dropdownItems = ref([
     <!-- 安装插件进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
     <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <DialogWrapper v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
       <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
         <VDialogCloseBtn @click="releaseDialog = false" />
         <VDivider />
         <VersionHistory :history="props.plugin?.history" />
       </VCard>
-    </VDialog>
+    </DialogWrapper>
     <!-- 插件详情-->
-    <VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
+    <DialogWrapper v-if="detailDialog" v-model="detailDialog" max-width="30rem">
       <VCard>
         <VDialogCloseBtn @click="detailDialog = false" />
         <VCardText>
@@ -335,6 +335,6 @@ const dropdownItems = ref([
           </VCol>
         </VCardText>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index ec3bf510..1b3cd33a 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -547,7 +547,7 @@ watch(
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
 
     <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable :fullscreen="!display.mdAndUp.value">
+    <DialogWrapper v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable :fullscreen="!display.mdAndUp.value">
       <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
         <VDialogCloseBtn @click="releaseDialog = false" />
         <VDivider />
@@ -562,10 +562,10 @@ watch(
           </VBtn>
         </VCardItem>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 实时日志弹窗 -->
-    <VDialog
+    <DialogWrapper
       v-if="loggingDialog"
       v-model="loggingDialog"
       scrollable
@@ -591,10 +591,10 @@ watch(
           <LoggingView :logfile="`plugins/${props.plugin?.id?.toLowerCase()}.log`" />
         </VCardText>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 插件分身对话框 -->
-    <VDialog
+    <DialogWrapper
       v-if="pluginCloneDialog"
       v-model="pluginCloneDialog"
       width="600"
@@ -700,7 +700,7 @@ watch(
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
 
diff --git a/src/components/cards/PluginFolderCard.vue b/src/components/cards/PluginFolderCard.vue
index 0b668961..15b399bb 100644
--- a/src/components/cards/PluginFolderCard.vue
+++ b/src/components/cards/PluginFolderCard.vue
@@ -350,7 +350,7 @@ const dropdownItems = ref([
     </VHover>
 
     <!-- 重命名对话框 -->
-    <VDialog v-if="renameDialog" v-model="renameDialog" max-width="400">
+    <DialogWrapper v-if="renameDialog" v-model="renameDialog" max-width="400">
       <VCard>
         <VCardItem>
           <template #prepend>
@@ -374,10 +374,10 @@ const dropdownItems = ref([
           <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 设置对话框 -->
-    <VDialog
+    <DialogWrapper
       v-if="settingDialog"
       v-model="settingDialog"
       max-width="600"
@@ -480,7 +480,7 @@ const dropdownItems = ref([
           <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">保存</VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
 
diff --git a/src/components/cards/StorageCard.vue b/src/components/cards/StorageCard.vue
index bc027f36..98fb29e7 100644
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -220,7 +220,7 @@ function onClose() {
       @close="smbConfigDialog = false"
       @done="handleDone"
     />
-    <VDialog
+    <DialogWrapper
       v-if="customConfigDialog"
       v-model="customConfigDialog"
       scrollable
@@ -263,6 +263,6 @@ function onClose() {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>
diff --git a/src/components/cards/TorrentCard.vue b/src/components/cards/TorrentCard.vue
index 2c9e825b..a27599de 100644
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -278,7 +278,7 @@ onMounted(() => {
     </VCard>
 
     <!-- 更多来源对话框 -->
-    <VDialog v-model="showMoreTorrents" max-width="25rem" location="center">
+    <DialogWrapper v-model="showMoreTorrents" max-width="25rem" location="center">
       <VCard>
         <VCardTitle class="py-3 d-flex align-center">
           <span>其他来源</span>
@@ -361,7 +361,7 @@ onMounted(() => {
           </VList>
         </VCardText>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <AddDownloadDialog
       v-if="addDownloadDialog"
diff --git a/src/components/dialog/AddDownloadDialog.vue b/src/components/dialog/AddDownloadDialog.vue
index 68d4f79f..f2fc3156 100644
--- a/src/components/dialog/AddDownloadDialog.vue
+++ b/src/components/dialog/AddDownloadDialog.vue
@@ -132,7 +132,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="35rem" scrollable>
+  <DialogWrapper max-width="35rem" scrollable>
     <VCard>
       <VCardItem class="py-2">
         <template #prepend>
@@ -209,5 +209,5 @@ onMounted(() => {
         </VBtn>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/AlistConfigDialog.vue b/src/components/dialog/AlistConfigDialog.vue
index d9192b9b..934190be 100644
--- a/src/components/dialog/AlistConfigDialog.vue
+++ b/src/components/dialog/AlistConfigDialog.vue
@@ -70,7 +70,7 @@ async function savaAlistConfig() {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -143,5 +143,5 @@ async function savaAlistConfig() {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/AliyunAuthDialog.vue b/src/components/dialog/AliyunAuthDialog.vue
index 77308f0a..1559bbf3 100644
--- a/src/components/dialog/AliyunAuthDialog.vue
+++ b/src/components/dialog/AliyunAuthDialog.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -148,5 +148,5 @@ onUnmounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/ForkSubscribeDialog.vue b/src/components/dialog/ForkSubscribeDialog.vue
index 23045580..89d862d1 100644
--- a/src/components/dialog/ForkSubscribeDialog.vue
+++ b/src/components/dialog/ForkSubscribeDialog.vue
@@ -170,7 +170,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="40rem" scrollable>
+  <DialogWrapper max-width="40rem" scrollable>
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardText>
@@ -286,5 +286,5 @@ onMounted(() => {
         </VCol>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/ForkWorkflowDialog.vue b/src/components/dialog/ForkWorkflowDialog.vue
index 941b242a..001f7fa4 100644
--- a/src/components/dialog/ForkWorkflowDialog.vue
+++ b/src/components/dialog/ForkWorkflowDialog.vue
@@ -146,7 +146,7 @@ async function doDelete() {
 }
 </script>
 <template>
-  <VDialog max-width="40rem" scrollable>
+  <DialogWrapper max-width="40rem" scrollable>
     <VCard>
       <VCardText>
         <VCol>
@@ -243,7 +243,7 @@ async function doDelete() {
       </VCardText>
       <VDialogCloseBtn @click="emit('close')" />
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style lang="scss">
diff --git a/src/components/dialog/ImportCodeDialog.vue b/src/components/dialog/ImportCodeDialog.vue
index 17aacf65..fb5d4a37 100644
--- a/src/components/dialog/ImportCodeDialog.vue
+++ b/src/components/dialog/ImportCodeDialog.vue
@@ -24,7 +24,7 @@ function handleImport() {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable max-height="85vh">
+  <DialogWrapper width="40rem" scrollable max-height="85vh">
     <VCard>
       <VCardItem>
         <template #prepend>
@@ -43,5 +43,5 @@ function handleImport() {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/MediaInfoDialog.vue b/src/components/dialog/MediaInfoDialog.vue
index 7007c8ea..2a8e8f33 100644
--- a/src/components/dialog/MediaInfoDialog.vue
+++ b/src/components/dialog/MediaInfoDialog.vue
@@ -15,12 +15,12 @@ defineProps({
 const emit = defineEmits(['close'])
 </script>
 <template>
-  <VDialog max-width="50rem">
+  <DialogWrapper max-width="50rem">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
         <MediaInfoCard :context="context" />
       </VCardItem>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/PluginConfigDialog.vue b/src/components/dialog/PluginConfigDialog.vue
index cad8e779..65b543c8 100644
--- a/src/components/dialog/PluginConfigDialog.vue
+++ b/src/components/dialog/PluginConfigDialog.vue
@@ -148,7 +148,7 @@ onBeforeMount(async () => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
     <!-- Vuetify 渲染模式 -->
     <VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`">
       <VDialogCloseBtn @click="emit('close')" />
@@ -187,5 +187,5 @@ onBeforeMount(async () => {
 
     <!-- 进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/PluginDataDialog.vue b/src/components/dialog/PluginDataDialog.vue
index 5e19a61a..a389de51 100644
--- a/src/components/dialog/PluginDataDialog.vue
+++ b/src/components/dialog/PluginDataDialog.vue
@@ -124,7 +124,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
     <!-- Vuetify 渲染模式 -->
     <VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name}`">
       <VDialogCloseBtn @click="emit('close')" />
@@ -160,5 +160,5 @@ onMounted(() => {
         />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/PluginMarketSettingDialog.vue b/src/components/dialog/PluginMarketSettingDialog.vue
index 8e4ffaa9..9a54484e 100644
--- a/src/components/dialog/PluginMarketSettingDialog.vue
+++ b/src/components/dialog/PluginMarketSettingDialog.vue
@@ -63,7 +63,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -89,5 +89,5 @@ onMounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/ProgressDialog.vue b/src/components/dialog/ProgressDialog.vue
index bc9869ec..756640c3 100644
--- a/src/components/dialog/ProgressDialog.vue
+++ b/src/components/dialog/ProgressDialog.vue
@@ -10,12 +10,12 @@ const props = defineProps({
 </script>
 <template>
   <!-- Progress Dialog -->
-  <VDialog :scrim="false" width="25rem">
+  <DialogWrapper :scrim="false" width="25rem">
     <VCard elevation="3" color="primary">
       <VCardText class="text-center">
         {{ props.text || t('dialog.progress.processing') }}
         <VProgressLinear color="white" class="mb-0 mt-1" :model-value="props.value" indeterminate />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/RcloneConfigDialog.vue b/src/components/dialog/RcloneConfigDialog.vue
index 6fe92d0e..e73d4323 100644
--- a/src/components/dialog/RcloneConfigDialog.vue
+++ b/src/components/dialog/RcloneConfigDialog.vue
@@ -57,7 +57,7 @@ async function handleReset() {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -99,5 +99,5 @@ async function handleReset() {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/ReorganizeDialog.vue b/src/components/dialog/ReorganizeDialog.vue
index 6e36d619..8a22c543 100644
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -269,7 +269,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="py-2">
         <template #prepend> <VIcon icon="mdi-folder-move" class="me-2" /> </template>
@@ -487,7 +487,7 @@ onUnmounted(() => {
     <!-- 手动整理进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
     <!-- TMDB ID搜索框 -->
-    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
+    <DialogWrapper v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
       <MediaIdSelector
         v-if="mediaSource === 'themoviedb'"
         v-model="transferForm.tmdbid"
@@ -500,6 +500,6 @@ onUnmounted(() => {
         @close="mediaSelectorDialog = false"
         :type="mediaSource"
       />
-    </VDialog>
-  </VDialog>
+    </DialogWrapper>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SearchBarDialog.vue b/src/components/dialog/SearchBarDialog.vue
index 4372594f..5cbf418d 100644
--- a/src/components/dialog/SearchBarDialog.vue
+++ b/src/components/dialog/SearchBarDialog.vue
@@ -357,7 +357,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog v-model="dialog" max-width="42rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper v-model="dialog" max-width="42rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard class="search-dialog">
       <!-- 搜索输入框 -->
       <VCardItem class="pa-4 pa-sm-5 search-box-container">
@@ -741,7 +741,7 @@ onMounted(() => {
         </div>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 
   <!-- 站点选择对话框 -->
   <SearchSiteDialog
diff --git a/src/components/dialog/SearchSiteDialog.vue b/src/components/dialog/SearchSiteDialog.vue
index fe16e4f6..6952a637 100644
--- a/src/components/dialog/SearchSiteDialog.vue
+++ b/src/components/dialog/SearchSiteDialog.vue
@@ -56,7 +56,7 @@ const filteredSites = computed(() => {
 </script>
 <template>
   <!-- Site Selection Dialog -->
-  <VDialog max-width="40rem" fullscreen-mobile>
+  <DialogWrapper max-width="40rem" fullscreen-mobile>
     <VCard class="site-dialog">
       <VCardItem>
         <template #prepend>
@@ -169,7 +169,7 @@ const filteredSites = computed(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 <style scoped>
 .site-checkbox-wrapper {
diff --git a/src/components/dialog/SiteAddEditDialog.vue b/src/components/dialog/SiteAddEditDialog.vue
index 2c277d4e..086b4309 100644
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -147,7 +147,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VDialog scrollable :close-on-back="false" eager max-width="45rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable :close-on-back="false" eager max-width="45rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem :class="props.oper === 'add' ? 'py-3' : 'py-2'">
         <template #prepend>
@@ -350,5 +350,5 @@ onMounted(async () => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SiteCookieUpdateDialog.vue b/src/components/dialog/SiteCookieUpdateDialog.vue
index 04e84b37..13691e16 100644
--- a/src/components/dialog/SiteCookieUpdateDialog.vue
+++ b/src/components/dialog/SiteCookieUpdateDialog.vue
@@ -71,7 +71,7 @@ async function updateSiteCookie() {
 }
 </script>
 <template>
-  <VDialog max-width="30rem" scrollable>
+  <DialogWrapper max-width="30rem" scrollable>
     <!-- Dialog Content -->
     <VCard :title="t('dialog.siteCookieUpdate.title')">
       <VDialogCloseBtn @click="emit('close')" />
@@ -114,5 +114,5 @@ async function updateSiteCookie() {
     </VCard>
     <!-- 进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SiteResourceDialog.vue b/src/components/dialog/SiteResourceDialog.vue
index 2ca91827..5408504f 100644
--- a/src/components/dialog/SiteResourceDialog.vue
+++ b/src/components/dialog/SiteResourceDialog.vue
@@ -130,7 +130,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
+  <DialogWrapper scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
     <VCard>
       <!-- Toolbar -->
       <div>
@@ -281,7 +281,7 @@ onMounted(() => {
       @error="addDownloadError"
       @close="addDownloadDialog = false"
     />
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/dialog/SiteUserDataDialog.vue b/src/components/dialog/SiteUserDataDialog.vue
index fbcd013d..d06ba66d 100644
--- a/src/components/dialog/SiteUserDataDialog.vue
+++ b/src/components/dialog/SiteUserDataDialog.vue
@@ -287,7 +287,7 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <VDialog scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <VCardTitle
@@ -484,5 +484,5 @@ onBeforeMount(() => {
     </VCard>
     <!-- 进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="t('dialog.siteUserData.refreshing')" />
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SmbConfigDialog.vue b/src/components/dialog/SmbConfigDialog.vue
index 4252eee7..5823391a 100644
--- a/src/components/dialog/SmbConfigDialog.vue
+++ b/src/components/dialog/SmbConfigDialog.vue
@@ -50,7 +50,7 @@ async function saveSmbConfig() {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -127,5 +127,5 @@ async function saveSmbConfig() {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SubscribeEditDialog.vue b/src/components/dialog/SubscribeEditDialog.vue
index 477c69df..479fd88b 100644
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -280,7 +280,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialog scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="py-2">
 				<VDialogCloseBtn @click="emit('close')" />
@@ -539,5 +539,5 @@ onMounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SubscribeFilesDialog.vue b/src/components/dialog/SubscribeFilesDialog.vue
index aab0291e..694b93cd 100644
--- a/src/components/dialog/SubscribeFilesDialog.vue
+++ b/src/components/dialog/SubscribeFilesDialog.vue
@@ -85,7 +85,7 @@ onBeforeMount(() => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="my-2">
         <VDialogCloseBtn @click="emit('close')" />
@@ -206,7 +206,7 @@ onBeforeMount(() => {
         </div>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/dialog/SubscribeHistoryDialog.vue b/src/components/dialog/SubscribeHistoryDialog.vue
index 1e26654b..e7f3fd7e 100644
--- a/src/components/dialog/SubscribeHistoryDialog.vue
+++ b/src/components/dialog/SubscribeHistoryDialog.vue
@@ -146,7 +146,7 @@ function getMediaTypeText(type: string | undefined) {
 </script>
 
 <template>
-  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard class="mx-auto" width="100%">
       <VCardItem>
         <VCardTitle>{{ t('dialog.subscribeHistory.title', { type: getMediaTypeText(props.type) }) }}</VCardTitle>
@@ -220,5 +220,5 @@ function getMediaTypeText(type: string | undefined) {
     </VCard>
     <!-- 进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/SubscribeShareDialog.vue b/src/components/dialog/SubscribeShareDialog.vue
index a9e6d6b8..47b35c71 100644
--- a/src/components/dialog/SubscribeShareDialog.vue
+++ b/src/components/dialog/SubscribeShareDialog.vue
@@ -55,7 +55,7 @@ const $toast = useToast()
 </script>
 
 <template>
-  <VDialog scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="py-2">
         <template #prepend>
@@ -112,5 +112,5 @@ const $toast = useToast()
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/TransferQueueDialog.vue b/src/components/dialog/TransferQueueDialog.vue
index 52f712ff..a07ae3b7 100644
--- a/src/components/dialog/TransferQueueDialog.vue
+++ b/src/components/dialog/TransferQueueDialog.vue
@@ -154,7 +154,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard class="mx-auto" width="100%">
       <VCardItem>
         <VCardTitle>{{ t('dialog.transferQueue.title') }}</VCardTitle>
@@ -202,5 +202,5 @@ onUnmounted(() => {
         </VWindow>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/U115AuthDialog.vue b/src/components/dialog/U115AuthDialog.vue
index 91e4fda1..e594ecd9 100644
--- a/src/components/dialog/U115AuthDialog.vue
+++ b/src/components/dialog/U115AuthDialog.vue
@@ -115,7 +115,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -147,5 +147,5 @@ onUnmounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue
index 4bece7b8..981dfd25 100644
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -366,7 +366,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialog scrollable max-width="40rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="40rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem :class="props.oper === 'add' ? 'py-3' : 'py-2'">
         <template #prepend>
@@ -619,5 +619,5 @@ onMounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/UserAuthDialog.vue b/src/components/dialog/UserAuthDialog.vue
index 26ab9090..f1059a8f 100644
--- a/src/components/dialog/UserAuthDialog.vue
+++ b/src/components/dialog/UserAuthDialog.vue
@@ -134,7 +134,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable>
+  <DialogWrapper width="40rem" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -179,5 +179,5 @@ onMounted(async () => {
         </VBtn>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/WorkflowActionsDialog.vue b/src/components/dialog/WorkflowActionsDialog.vue
index 2945d05b..09ea366d 100644
--- a/src/components/dialog/WorkflowActionsDialog.vue
+++ b/src/components/dialog/WorkflowActionsDialog.vue
@@ -197,7 +197,7 @@ const isMacOS = computed(() => {
 </script>
 
 <template>
-  <VDialog scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
+  <DialogWrapper scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
     <VCard class="workflow-dialog">
       <!-- Toolbar -->
       <VToolbar color="primary" density="comfortable">
@@ -256,7 +256,7 @@ const isMacOS = computed(() => {
       @close="importCodeDialog = false"
       @save="saveCodeString"
     />
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style lang="scss">
diff --git a/src/components/dialog/WorkflowAddEditDialog.vue b/src/components/dialog/WorkflowAddEditDialog.vue
index 21984b18..2c99082e 100644
--- a/src/components/dialog/WorkflowAddEditDialog.vue
+++ b/src/components/dialog/WorkflowAddEditDialog.vue
@@ -85,7 +85,7 @@ async function editWorkflow() {
 </script>
 
 <template>
-  <VDialog scrollable :close-on-back="false" eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable :close-on-back="false" eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <template #prepend>
@@ -140,5 +140,5 @@ async function editWorkflow() {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/dialog/WorkflowShareDialog.vue b/src/components/dialog/WorkflowShareDialog.vue
index e82f596b..3256bf91 100644
--- a/src/components/dialog/WorkflowShareDialog.vue
+++ b/src/components/dialog/WorkflowShareDialog.vue
@@ -68,7 +68,7 @@ const $toast = useToast()
 </script>
 
 <template>
-  <VDialog scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="py-2">
         <template #prepend>
@@ -132,5 +132,5 @@ const $toast = useToast()
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index 5c1599f9..2466f1b9 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -712,7 +712,7 @@ onMounted(() => {
       </VCardText>
     </VCard>
     <!-- 重命名弹窗 -->
-    <VDialog v-if="renamePopper" v-model="renamePopper" max-width="35rem">
+    <DialogWrapper v-if="renamePopper" v-model="renamePopper" max-width="35rem">
       <VCard>
         <VCardItem>
           <template #prepend>
@@ -746,7 +746,7 @@ onMounted(() => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
     <!-- 文件整理弹窗 -->
     <ReorganizeDialog
       v-if="transferPopper"
diff --git a/src/components/filebrowser/FileToolbar.vue b/src/components/filebrowser/FileToolbar.vue
index feb0ef82..6d74cbcb 100644
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -166,7 +166,7 @@ const sortIcon = computed(() => {
       <VIcon icon="mdi-arrow-up-bold-outline" />
     </IconBtn>
     <!-- 新建文件夹 -->
-    <VDialog v-model="newFolderPopper" max-width="35rem">
+    <DialogWrapper v-model="newFolderPopper" max-width="35rem">
       <template #activator="{ props }">
         <IconBtn>
           <VIcon v-bind="props" icon="mdi-folder-plus-outline" />
@@ -191,6 +191,6 @@ const sortIcon = computed(() => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </VToolbar>
 </template>
diff --git a/src/composables/useDialogScrollLock.ts b/src/composables/useDialogScrollLock.ts
new file mode 100644
index 00000000..849e74f4
--- /dev/null
+++ b/src/composables/useDialogScrollLock.ts
@@ -0,0 +1,242 @@
+import { ref, watch, onBeforeUnmount, readonly } from 'vue'
+
+// 弹窗滚动锁定配置
+export interface DialogScrollLockOptions {
+  // 是否在组件卸载时自动恢复滚动
+  autoRestore?: boolean
+  // 是否保存和恢复滚动位置
+  preserveScrollPosition?: boolean
+  // 是否阻止触摸事件穿透
+  preventTouchScroll?: boolean
+  // 自定义锁定时的样式
+  lockStyles?: {
+    overflow?: string
+    position?: string
+    width?: string
+  }
+}
+
+// 默认配置
+const DEFAULT_OPTIONS: Required<DialogScrollLockOptions> = {
+  autoRestore: true,
+  preserveScrollPosition: true,
+  preventTouchScroll: true,
+  lockStyles: {
+    overflow: 'hidden',
+    position: 'fixed',
+    width: '100%',
+  },
+}
+
+export function useDialogScrollLock(options: DialogScrollLockOptions = {}) {
+  const config = { ...DEFAULT_OPTIONS, ...options }
+
+  // 状态管理
+  const isLocked = ref(false)
+  const savedScrollPosition = ref(0)
+  const originalBodyStyles = ref<{ [key: string]: string }>({})
+  const originalDocumentStyles = ref<{ [key: string]: string }>({})
+  const originalHtmlStyles = ref<{ [key: string]: string }>({})
+
+  // 保存当前滚动位置
+  const saveScrollPosition = () => {
+    if (config.preserveScrollPosition) {
+      savedScrollPosition.value =
+        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+    }
+  }
+
+  // 保存原始样式
+  const saveOriginalStyles = () => {
+    // 保存 body 样式
+    originalBodyStyles.value = {
+      overflow: document.body.style.overflow,
+      position: document.body.style.position,
+      top: document.body.style.top,
+      width: document.body.style.width,
+    }
+
+    // 保存 documentElement 样式
+    originalDocumentStyles.value = {
+      overflow: document.documentElement.style.overflow,
+    }
+
+    // 保存 html 样式
+    originalHtmlStyles.value = {
+      overflow: document.documentElement.style.overflow,
+    }
+  }
+
+  // 阻止触摸滚动事件
+  const preventTouchScroll = (event: TouchEvent) => {
+    if (isLocked.value && config.preventTouchScroll) {
+      event.preventDefault()
+    }
+  }
+
+  // 锁定滚动
+  const lockScroll = () => {
+    if (isLocked.value) return
+
+    // 保存当前状态
+    saveScrollPosition()
+    saveOriginalStyles()
+
+    // 应用锁定样式到 body
+    document.body.style.overflow = config.lockStyles.overflow || 'hidden'
+    document.body.style.position = config.lockStyles.position || 'fixed'
+    document.body.style.width = config.lockStyles.width || '100%'
+
+    // 应用锁定样式到 documentElement
+    document.documentElement.style.overflow = config.lockStyles.overflow || 'hidden'
+
+    // 添加 CSS 类名
+    document.documentElement.classList.add('v-overlay-scroll-blocked')
+
+    // 如果需要保持滚动位置，设置top偏移
+    if (config.preserveScrollPosition) {
+      document.body.style.top = `-${savedScrollPosition.value}px`
+    }
+
+    // 保持navbar的滚动状态 - 添加一个CSS变量来记录滚动位置
+    if (savedScrollPosition.value > 0) {
+      document.documentElement.style.setProperty('--saved-scroll-y', `${savedScrollPosition.value}px`)
+      document.documentElement.classList.add('dialog-scroll-locked')
+    }
+
+    // 添加触摸事件监听器
+    if (config.preventTouchScroll) {
+      document.addEventListener('touchmove', preventTouchScroll, { passive: false })
+    }
+
+    isLocked.value = true
+  }
+
+  // 恢复滚动
+  const restoreScroll = () => {
+    if (!isLocked.value) return
+
+    // 恢复原始样式
+    document.body.style.overflow = originalBodyStyles.value.overflow || ''
+    document.body.style.position = originalBodyStyles.value.position || ''
+    document.body.style.top = originalBodyStyles.value.top || ''
+    document.body.style.width = originalBodyStyles.value.width || ''
+    document.documentElement.style.overflow = originalDocumentStyles.value.overflow || ''
+
+    // 移除 CSS 类名
+    document.documentElement.classList.remove('v-overlay-scroll-blocked')
+    document.documentElement.classList.remove('dialog-scroll-locked')
+
+    // 移除CSS变量
+    document.documentElement.style.removeProperty('--saved-scroll-y')
+
+    // 移除触摸事件监听器
+    if (config.preventTouchScroll) {
+      document.removeEventListener('touchmove', preventTouchScroll)
+    }
+
+    // 恢复滚动位置
+    if (config.preserveScrollPosition) {
+      window.scrollTo(0, savedScrollPosition.value)
+    }
+
+    isLocked.value = false
+  }
+
+  // 切换滚动锁定状态
+  const toggleScrollLock = (lock?: boolean) => {
+    const shouldLock = lock !== undefined ? lock : !isLocked.value
+
+    if (shouldLock) {
+      lockScroll()
+    } else {
+      restoreScroll()
+    }
+  }
+
+  // 监听响应式值的变化
+  const watchTarget = (target: any) => {
+    return watch(
+      target,
+      newValue => {
+        toggleScrollLock(!!newValue)
+      },
+      { immediate: false },
+    )
+  }
+
+  // 生命周期清理
+  onBeforeUnmount(() => {
+    if (config.autoRestore && isLocked.value) {
+      restoreScroll()
+    }
+  })
+
+  return {
+    // 状态
+    isLocked: readonly(isLocked),
+    savedScrollPosition: readonly(savedScrollPosition),
+
+    // 方法
+    lockScroll,
+    restoreScroll,
+    toggleScrollLock,
+    watchTarget,
+
+    // 工具方法
+    saveScrollPosition,
+  }
+}
+
+// 便捷的自动监听版本
+export function useDialogScrollLockWithWatch(target: any, options: DialogScrollLockOptions = {}) {
+  const scrollLock = useDialogScrollLock(options)
+
+  // 自动监听目标值的变化
+  const stopWatcher = scrollLock.watchTarget(target)
+
+  // 返回所有功能 + 停止监听的方法
+  return {
+    ...scrollLock,
+    stopWatcher,
+  }
+}
+
+// 全局弹窗检测和管理
+export function useGlobalDialogScrollLock() {
+  const activeDialogs = ref<Set<string>>(new Set())
+
+  const registerDialog = (dialogId: string) => {
+    activeDialogs.value.add(dialogId)
+    if (activeDialogs.value.size === 1) {
+      // 第一个弹窗时锁定滚动
+      lockGlobalScroll()
+    }
+  }
+
+  const unregisterDialog = (dialogId: string) => {
+    activeDialogs.value.delete(dialogId)
+    if (activeDialogs.value.size === 0) {
+      // 没有弹窗时恢复滚动
+      unlockGlobalScroll()
+    }
+  }
+
+  const lockGlobalScroll = () => {
+    document.body.style.overflow = 'hidden'
+    document.documentElement.classList.add('v-overlay-scroll-blocked')
+  }
+
+  const unlockGlobalScroll = () => {
+    document.body.style.overflow = ''
+    document.documentElement.classList.remove('v-overlay-scroll-blocked')
+  }
+
+  return {
+    activeDialogs: readonly(activeDialogs),
+    registerDialog,
+    unregisterDialog,
+    lockGlobalScroll,
+    unlockGlobalScroll,
+  }
+}
diff --git a/src/layouts/components/ShortcutBar.vue b/src/layouts/components/ShortcutBar.vue
index 54f4ca0b..e27b7d44 100644
--- a/src/layouts/components/ShortcutBar.vue
+++ b/src/layouts/components/ShortcutBar.vue
@@ -243,7 +243,7 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="nameTestDialog"
     v-model="nameTestDialog"
     max-width="45rem"
@@ -263,9 +263,9 @@ onMounted(() => {
         <NameTestView />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
   <!-- 网络测试弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="netTestDialog"
     v-model="netTestDialog"
     max-width="35rem"
@@ -285,9 +285,9 @@ onMounted(() => {
         <NetTestView />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
   <!-- 实时日志弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="loggingDialog"
     v-model="loggingDialog"
     scrollable
@@ -313,9 +313,9 @@ onMounted(() => {
         <LoggingView logfile="moviepilot.log" />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
   <!-- 过滤规则弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="ruleTestDialog"
     v-model="ruleTestDialog"
     max-width="35rem"
@@ -335,9 +335,9 @@ onMounted(() => {
         <RuleTestView />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
   <!-- 系统健康检查弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="systemTestDialog"
     v-model="systemTestDialog"
     max-width="35rem"
@@ -357,9 +357,9 @@ onMounted(() => {
         <ModuleTestView />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
   <!-- 消息中心弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-if="messageDialog"
     v-model="messageDialog"
     max-width="50rem"
@@ -402,5 +402,5 @@ onMounted(() => {
         </div>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index 7e163eb1..7d483153 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -518,7 +518,7 @@ onUnmounted(() => {
   <!-- 用户认证对话框 -->
   <UserAuthDialog v-if="siteAuthDialog" v-model="siteAuthDialog" @done="siteAuthDone" @close="siteAuthDialog = false" />
   <!-- 自定义 CSS -->
-  <VDialog v-if="cssDialog" v-model="cssDialog" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper v-if="cssDialog" v-model="cssDialog" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -539,7 +539,7 @@ onUnmounted(() => {
         </VBtn>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index 2a8632d1..cd822977 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -370,7 +370,7 @@ onDeactivated(() => {
   </Teleport>
 
   <!-- 弹窗，根据配置生成选项 -->
-  <VDialog v-if="dialog" v-model="dialog" max-width="35rem" :fullscreen="!display.mdAndUp.value" scrollable>
+  <DialogWrapper v-if="dialog" v-model="dialog" max-width="35rem" :fullscreen="!display.mdAndUp.value" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -423,7 +423,7 @@ onDeactivated(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 <style lang="scss" scoped>
 .settings-card-header {
diff --git a/src/pages/discover.vue b/src/pages/discover.vue
index 6ec69401..d9a109cd 100644
--- a/src/pages/discover.vue
+++ b/src/pages/discover.vue
@@ -199,7 +199,7 @@ onActivated(async () => {
       </VWindowItem>
     </VWindow>
     <!-- 弹窗，根据配置生成选项 -->
-    <VDialog
+    <DialogWrapper
       v-if="orderConfigDialog"
       v-model="orderConfigDialog"
       max-width="35rem"
@@ -243,7 +243,7 @@ onActivated(async () => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
     <!-- 快速滚动到顶部按钮 -->
     <Teleport to="body" v-if="route.path === '/discover'">
       <VScrollToTopBtn />
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index c56735b7..7927d3aa 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -248,7 +248,7 @@ onActivated(async () => {
     </div>
 
     <!-- 设置面板 -->
-    <VDialog v-model="dialog" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
+    <DialogWrapper v-model="dialog" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
       <VCard class="settings-card">
         <VCardItem class="settings-card-header">
           <VCardTitle>
@@ -300,7 +300,7 @@ onActivated(async () => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 快速滚动到顶部按钮 -->
     <Teleport to="body" v-if="route.path === '/recommend'">
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index ac377fed..4f045deb 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -1552,7 +1552,7 @@ function onDragStartPlugin(evt: any) {
   />
 
   <!-- 插件搜索窗口 -->
-  <VDialog
+  <DialogWrapper
     v-if="SearchDialog"
     v-model="SearchDialog"
     scrollable
@@ -1611,20 +1611,20 @@ function onDragStartPlugin(evt: any) {
         </VVirtualScroll>
       </VList>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 
   <!-- 安装插件进度框 -->
-  <VDialog v-if="progressDialog" v-model="progressDialog" :scrim="false" width="25rem">
+  <DialogWrapper v-if="progressDialog" v-model="progressDialog" :scrim="false" width="25rem">
     <VCard color="primary">
       <VCardText class="text-center">
         {{ progressText }}
         <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 
   <!-- 新建文件夹对话框 -->
-  <VDialog v-if="newFolderDialog" v-model="newFolderDialog" max-width="400">
+  <DialogWrapper v-if="newFolderDialog" v-model="newFolderDialog" max-width="400">
     <VCard>
       <VDialogCloseBtn @click="newFolderDialog = false" />
       <VCardItem>
@@ -1646,5 +1646,5 @@ function onDragStartPlugin(evt: any) {
         }}</VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/views/setting/AccountSettingAbout.vue b/src/views/setting/AccountSettingAbout.vue
index 0b6cf126..d161ef3b 100644
--- a/src/views/setting/AccountSettingAbout.vue
+++ b/src/views/setting/AccountSettingAbout.vue
@@ -261,7 +261,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
-  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+  <DialogWrapper v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
     <VCard>
       <VCardItem>
         <VDialogCloseBtn @click="releaseDialog = false" />
@@ -269,7 +269,7 @@ onMounted(() => {
       </VCardItem>
       <VCardText v-html="releaseDialogBody" />
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 
 <style type="scss" scoped>
diff --git a/src/views/setting/AccountSettingCache.vue b/src/views/setting/AccountSettingCache.vue
index 9bcc2895..702c94f3 100644
--- a/src/views/setting/AccountSettingCache.vue
+++ b/src/views/setting/AccountSettingCache.vue
@@ -423,7 +423,7 @@ onMounted(() => {
   </VCard>
 
   <!-- 重新识别对话框 -->
-  <VDialog v-model="reidentifyDialog" scrollable max-width="35rem">
+  <DialogWrapper v-model="reidentifyDialog" scrollable max-width="35rem">
     <VCard>
       <VCardItem class="py-2">
         <template #prepend>
@@ -469,5 +469,5 @@ onMounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/views/setting/AccountSettingNotification.vue b/src/views/setting/AccountSettingNotification.vue
index ee9c76bf..ba585b7c 100644
--- a/src/views/setting/AccountSettingNotification.vue
+++ b/src/views/setting/AccountSettingNotification.vue
@@ -444,7 +444,7 @@ onMounted(() => {
     :indeterminate="true"
   />
   <!-- 模板编辑器对话框 -->
-  <VDialog v-model="editorVisible" v-if="editorVisible" max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper v-model="editorVisible" v-if="editorVisible" max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem class="py-2">
         <template #prepend>
@@ -472,7 +472,7 @@ onMounted(() => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 <style scoped>
 /* Monaco编辑器容器样式 */
diff --git a/src/views/setting/AccountSettingSystem.vue b/src/views/setting/AccountSettingSystem.vue
index 6c8c9cca..3162701c 100644
--- a/src/views/setting/AccountSettingSystem.vue
+++ b/src/views/setting/AccountSettingSystem.vue
@@ -732,7 +732,7 @@ onDeactivated(() => {
   </VRow>
 
   <!-- 高级系统设置 -->
-  <VDialog
+  <DialogWrapper
     v-if="advancedDialog"
     v-model="advancedDialog"
     scrollable
@@ -1328,5 +1328,5 @@ onDeactivated(() => {
         </VForm>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index 13062fe4..3667605b 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -617,7 +617,7 @@ const handleSortIconClick = () => {
   </VCard>
 
   <!-- 全部筛选弹窗 -->
-  <VDialog
+  <DialogWrapper
     v-model="allFilterMenuOpen"
     max-width="50rem"
     location="center"
@@ -690,10 +690,10 @@ const handleSortIconClick = () => {
         </div>
       </VCardText>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 
   <!-- 筛选弹窗 -->
-  <VDialog v-model="filterMenuOpen" max-width="25rem" location="center" max-height="85vh">
+  <DialogWrapper v-model="filterMenuOpen" max-width="25rem" location="center" max-height="85vh">
     <VCard>
       <VCardTitle class="py-3 d-flex align-center">
         <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
@@ -735,7 +735,7 @@ const handleSortIconClick = () => {
         </VBtn>
       </VCardActions>
     </VCard>
-  </VDialog>
+  </DialogWrapper>
 
   <!-- 资源列表 -->
   <VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-visible" @load="loadMore">
diff --git a/src/views/torrent/TorrentRowListView.vue b/src/views/torrent/TorrentRowListView.vue
index 9455663c..d4c7de75 100644
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -597,7 +597,7 @@ onMounted(() => {
     </VCard>
 
     <!-- 全部筛选弹窗 -->
-    <VDialog
+    <DialogWrapper
       v-model="allFilterMenuOpen"
       max-width="50rem"
       location="center"
@@ -670,10 +670,10 @@ onMounted(() => {
           </div>
         </VCardText>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 筛选弹窗 -->
-    <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center">
+    <DialogWrapper v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center">
       <VCard>
         <VCardTitle class="py-3 d-flex align-center">
           <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
@@ -715,7 +715,7 @@ onMounted(() => {
           </VBtn>
         </VCardActions>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
 
     <!-- 资源列表容器 -->
     <VCard class="resource-list-container">
diff --git a/src/views/user/UserProfileView.vue b/src/views/user/UserProfileView.vue
index dd9d22bd..cc90524f 100644
--- a/src/views/user/UserProfileView.vue
+++ b/src/views/user/UserProfileView.vue
@@ -454,7 +454,7 @@ watch(
     </VRow>
 
     <!-- 双重验证弹窗 -->
-    <VDialog v-if="otpDialog" v-model="otpDialog" max-width="45rem" scrollable>
+    <DialogWrapper v-if="otpDialog" v-model="otpDialog" max-width="45rem" scrollable>
       <!-- 开启双重验证弹窗内容 -->
       <VCard>
         <VDialogCloseBtn @click="otpDialog = false" />
@@ -492,6 +492,6 @@ watch(
           </VForm>
         </VCardText>
       </VCard>
-    </VDialog>
+    </DialogWrapper>
   </div>
 </template>