为多个组件的对话框添加全屏显示逻辑

src/components/cards/CustomRuleCard.vue

@@ -5,6 +5,10 @@ import filter_svg from '@images/svg/filter.svg'
 import { cloneDeep } from 'lodash-es'
 import { innerFilterRules } from '@/api/constants'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -106,7 +110,13 @@ function onClose() {
         <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-if="ruleInfoDialog" v-model="ruleInfoDialog" scrollable max-width="40rem">
+    <VDialog
+      v-if="ruleInfoDialog"
+      v-model="ruleInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="t('customRule.title', { id: props.rule.id })">
         <VDialogCloseBtn v-model="ruleInfoDialog" />
         <VDivider />

src/components/cards/DownloaderCard.vue

@@ -10,6 +10,10 @@ import custom_image from '@images/logos/downloader.png'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { downloaderDict } from '@/api/constants'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 获取i18n实例
 const { t } = useI18n()
@@ -188,7 +192,14 @@ onUnmounted(() => {
         </VCardText>
       </VCard>
     </VHover>
-    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem">
+
+    <VDialog
+      v-if="downloaderInfoDialog"
+      v-model="downloaderInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.downloader.name} - ${t('downloader.title')}`">
         <VDialogCloseBtn v-model="downloaderInfoDialog" />
         <VDivider />

src/components/cards/FilterRuleGroupCard.vue

@@ -8,6 +8,10 @@ import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 import filter_group_svg from '@images/svg/filter-group.svg'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 获取i18n实例
 const { t } = useI18n()
@@ -219,7 +223,13 @@ function onClose() {
         <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-if="groupInfoDialog" v-model="groupInfoDialog" scrollable max-width="80rem">
+    <VDialog
+      v-if="groupInfoDialog"
+      v-model="groupInfoDialog"
+      scrollable
+      max-width="80rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.group.name} - ${t('filterRule.title')}`">
         <VDialogCloseBtn v-model="groupInfoDialog" />
         <VDivider />

src/components/cards/MediaServerCard.vue

@@ -10,6 +10,10 @@ import api from '@/api'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { mediaServerDict } from '@/api/constants'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 获取i18n实例
 const { t } = useI18n()
@@ -199,7 +203,14 @@ onMounted(() => {
         <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-if="mediaServerInfoDialog" v-model="mediaServerInfoDialog" scrollable max-width="40rem">
+
+    <VDialog
+      v-if="mediaServerInfoDialog"
+      v-model="mediaServerInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.mediaserver.name} - ${t('common.config')}`">
         <VDialogCloseBtn v-model="mediaServerInfoDialog" />
         <VDivider />

src/components/cards/NotificationChannelCard.vue

@@ -10,6 +10,10 @@ import custom_image from '@images/logos/notification.png'
 import { useToast } from 'vue-toast-notification'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 const { t } = useI18n()
 
@@ -136,7 +140,14 @@ function onClose() {
         <VImg :src="getIcon" cover class="mt-7 me-1" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-if="notificationInfoDialog" v-model="notificationInfoDialog" scrollable max-width="40rem">
+
+    <VDialog
+      v-if="notificationInfoDialog"
+      v-model="notificationInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.notification.name} - ${t('notification.config')}`">
         <VDialogCloseBtn v-model="notificationInfoDialog" />
         <VDivider />

src/components/cards/PluginCard.vue

@@ -11,6 +11,10 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
 import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
 import PluginDataDialog from '../dialog/PluginDataDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -450,7 +454,7 @@ watch(
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
 
     <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="85vh" scrollable>
+    <VDialog 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 />

src/components/cards/PluginFolderCard.vue

@@ -369,7 +369,13 @@ const dropdownItems = ref([
     </VDialog>
 
     <!-- 设置对话框 -->
-    <VDialog v-if="settingDialog" max-height="85vh" v-model="settingDialog" max-width="600" scrollable>
+    <VDialog
+      v-if="settingDialog"
+      v-model="settingDialog"
+      max-width="600"
+      scrollable
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard>
         <VDialogCloseBtn @click="settingDialog = false" />
         <VCardItem>
@@ -472,9 +478,9 @@ const dropdownItems = ref([
 <style lang="scss" scoped>
 .plugin-folder-card {
   position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &--hover {
     transform: translateY(-4px);
@@ -482,57 +488,52 @@ const dropdownItems = ref([
 
   &__bg {
     position: absolute;
-    inset: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     z-index: 0;
+    inset: 0;
     outline: none;
   }
 
   &__overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     z-index: 1;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 60%);
+    inset: 0;
   }
 
   &__content {
     position: relative;
     z-index: 2;
-    height: 100%;
     display: flex;
     flex-direction: column;
     padding: 16px;
-    padding-bottom: 12px;
+    block-size: 100%;
+    padding-block-end: 12px;
 
     .plugin-folder-card--mobile & {
       padding: 12px;
-      padding-bottom: 10px;
+      padding-block-end: 10px;
     }
   }
 
   &__body {
     display: flex;
+    flex: 1;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    flex: 1;
     gap: 16px;
-    padding: 0 8px;
+    padding-block: 0;
+    padding-inline: 8px;
 
     .plugin-folder-card--mobile & {
       gap: 12px;
-      padding: 0 4px;
+      padding-block: 0;
+      padding-inline: 4px;
     }
 
     &--no-icon {
-      justify-content: flex-start;
       align-items: flex-start;
+      justify-content: flex-start;
       padding: 16px;
       gap: 0;
 
@@ -545,36 +546,36 @@ const dropdownItems = ref([
 
   &__icon-container {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
   }
 
   &__info {
-    text-align: left;
-    min-height: 0;
     flex: 1;
+    min-block-size: 0;
+    text-align: start;
 
     &--no-icon {
-      text-align: left;
       flex: none;
+      text-align: start;
     }
   }
 
   &__name {
+    display: -webkit-box;
+    overflow: hidden;
     margin: 0;
+    -webkit-box-orient: vertical;
+    color: white;
     font-size: 1.1rem;
     font-weight: 600;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
     -webkit-line-clamp: 1;
     line-clamp: 1;
-    -webkit-box-orient: vertical;
+    line-height: 1.3;
-    max-width: none;
+    max-inline-size: none;
-    color: white;
+    text-overflow: ellipsis;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 50%);
 
     .plugin-folder-card--mobile & {
       font-size: 1rem;
@@ -585,7 +586,7 @@ const dropdownItems = ref([
       font-weight: 700;
       -webkit-line-clamp: 2;
       line-clamp: 2;
-      margin-bottom: 4px;
+      margin-block-end: 4px;
 
       .plugin-folder-card--mobile & {
         font-size: 1.2rem;
@@ -594,19 +595,20 @@ const dropdownItems = ref([
   }
 
   &__count {
-    margin: 2px 0 0 0;
-    font-size: 0.85rem;
-    opacity: 0.9;
     color: white;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    font-size: 0.85rem;
+    margin-block: 2px 0;
+    margin-inline: 0;
+    opacity: 0.9;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 50%);
 
     .plugin-folder-card--mobile & {
       font-size: 0.8rem;
     }
 
     .plugin-folder-card__info--no-icon & {
-      margin-top: 0;
       font-size: 0.9rem;
+      margin-block-start: 0;
 
       .plugin-folder-card--mobile & {
         font-size: 0.85rem;
@@ -618,35 +620,35 @@ const dropdownItems = ref([
 // 设置对话框样式
 .icon-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
   gap: 8px;
-  max-height: 200px;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  max-block-size: 200px;
   overflow-y: auto;
 }
 
 .color-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
   gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 }
 
 .gradient-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 8px;
-  max-height: 200px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  max-block-size: 200px;
   overflow-y: auto;
 }
 
 .color-btn {
-  min-width: 60px !important;
-  height: 60px !important;
   border-radius: 8px !important;
+  block-size: 60px !important;
+  min-inline-size: 60px !important;
 }
 
 .gradient-btn {
-  min-width: 120px !important;
-  height: 60px !important;
   border-radius: 8px !important;
+  block-size: 60px !important;
+  min-inline-size: 120px !important;
 }
 </style>

src/components/cards/StorageCard.vue

@@ -16,6 +16,10 @@ import { useToast } from 'vue-toast-notification'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
 import { storageIconDict } from '@/api/constants'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -200,7 +204,13 @@ function onClose() {
       @close="aListConfigDialog = false"
       @done="handleDone"
     />
-    <VDialog v-if="customConfigDialog" v-model="customConfigDialog" scrollable max-width="30rem">
+    <VDialog
+      v-if="customConfigDialog"
+      v-model="customConfigDialog"
+      scrollable
+      max-width="30rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard>
         <VCardItem>
           <VCardTitle>{{ t('storage.custom') }}</VCardTitle>

src/components/dialog/AddDownloadDialog.vue

@@ -6,6 +6,10 @@ import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } fr
 import { formatFileSize } from '@/@core/utils/formatters'
 import { VCardTitle, VChip } from 'vuetify/lib/components/index.mjs'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -132,7 +136,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="35rem" scrollable>
+  <VDialog max-width="35rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardTitle class="py-4 me-12">
         <VIcon icon="mdi-download" class="me-2" />

src/components/dialog/AlistConfigDialog.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -66,7 +70,7 @@ async function savaAlistConfig() {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable max-height="85vh">
+  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>

src/components/dialog/AliyunAuthDialog.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -106,7 +110,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable max-height="85vh">
+  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -115,8 +119,8 @@ onUnmounted(() => {
         </VCardTitle>
       </VCardItem>
       <VDivider />
-      <VCardText class="pt-2 flex flex-col items-center">
+      <VCardText class="pt-2 flex flex-col items-center justify-center">
-        <div class="my-6 rounded text-center p-3 border">
+        <div class="mt-6 rounded text-center p-3 border">
           <VImg class="mx-auto" :src="qrCodeUrl" width="200" height="200">
             <template #placeholder>
               <div class="w-full h-full">
@@ -125,9 +129,11 @@ onUnmounted(() => {
             </template>
           </VImg>
         </div>
-        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+        <div>
-          <template #prepend />
+          <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
-        </VAlert>
+            <template #prepend />
+          </VAlert>
+        </div>
       </VCardText>
       <VCardActions>
         <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">

src/components/dialog/PluginMarketSettingDialog.vue

@@ -3,6 +3,10 @@ import api from '@/api'
 import { useToast } from 'vue-toast-notification'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -59,7 +63,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable max-height="85vh">
+  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -69,13 +73,13 @@ onMounted(() => {
         <VDialogCloseBtn @click="emit('close')" />
       </VCardItem>
       <VDivider />
-
       <VCardText class="pt-2">
         <VTextarea
           v-model="displayRepos"
           :placeholder="t('dialog.pluginMarketSetting.repoPlaceholder')"
           :hint="t('dialog.pluginMarketSetting.repoHint')"
           persistent-hint
+          auto-grow
         />
       </VCardText>
       <VCardActions>

src/components/dialog/RcloneConfigDialog.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -53,7 +57,7 @@ async function handleReset() {
 </script>
 
 <template>
-  <VDialog width="50rem" scrollable max-height="85vh">
+  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -72,8 +76,7 @@ async function handleReset() {
               v-model:value="props.conf.content"
               lang="ini"
               theme="monokai"
-              style="block-size: 30rem"
+              class="rounded h-full min-h-[30rem]"
-              class="rounded"
             >
             </VAceEditor>
           </VCol>

src/components/dialog/SearchBarDialog.vue

@@ -6,6 +6,10 @@ import { NavMenu } from '@/@layouts/types'
 import { useUserStore } from '@/stores'
 import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -302,29 +306,24 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog v-model="dialog" max-width="42rem" scrollable maxHeight="85vh">
+  <VDialog 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">
-        <template #prepend>
-          <VIcon icon="mdi-magnify" color="primary" size="x-large" />
-        </template>
         <VCombobox
           ref="searchWordInput"
           v-model="searchWord"
           density="comfortable"
           variant="outlined"
           class="search-input"
+          prepend-inner-icon="mdi-magnify"
+          append-inner-icon="mdi-close"
+          @click:append-inner="emit('close')"
           :placeholder="t('dialog.searchBar.searchPlaceholder')"
           @keydown.enter="searchMedia('media')"
           hide-details
           clearable
         />
-        <template #append>
-          <IconBtn>
-            <VIcon icon="mdi-close" color="primary" @click="emit('close')" size="x-large" />
-          </IconBtn>
-        </template>
       </VCardItem>
 
       <VDivider />

src/components/dialog/SiteCookieUpdateDialog.vue

@@ -71,7 +71,7 @@ async function updateSiteCookie() {
 }
 </script>
 <template>
-  <VDialog max-width="30rem">
+  <VDialog max-width="30rem" scrollable>
     <!-- Dialog Content -->
     <VCard :title="t('dialog.siteCookieUpdate.title')">
       <VDialogCloseBtn @click="emit('close')" />

src/components/dialog/U115AuthDialog.vue

@@ -2,6 +2,10 @@
 import api from '@/api'
 import QrcodeVue from 'qrcode.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -111,7 +115,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable max-height="85vh">
+  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VDialogCloseBtn @click="emit('close')" />
       <VCardItem>
@@ -120,13 +124,15 @@ onUnmounted(() => {
         </VCardTitle>
       </VCardItem>
       <VDivider />
-      <VCardText class="pt-2 flex flex-col items-center">
+      <VCardText class="pt-2 flex flex-col items-center justify-center">
-        <div class="my-6 rounded text-center p-3 border">
+        <div class="mt-6 rounded text-center p-3 border">
           <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
         </div>
-        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+        <div>
-          <template #prepend />
+          <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
-        </VAlert>
+            <template #prepend />
+          </VAlert>
+        </div>
       </VCardText>
       <VCardActions>
         <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">

src/components/dialog/UserAddEditDialog.vue

@@ -290,7 +290,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialog scrollable :close-on-back="false" eager max-width="40rem" :fullscreen="!display.mdAndUp.value">
+  <VDialog scrollable max-width="40rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.oper === 'add' ? t('dialog.userAddEdit.add') : t('dialog.userAddEdit.edit')}${
         props.oper !== 'add' ? ` - ${userName}` : ''

src/components/dialog/UserAuthDialog.vue

@@ -3,6 +3,10 @@ import { isNullOrEmptyObject } from '@/@core/utils'
 import api from '@/api'
 import { useToast } from 'vue-toast-notification'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 多语言支持
 const { t } = useI18n()
@@ -133,7 +137,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VDialog width="40rem" max-height="85vh">
+  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard :title="t('dialog.userAuth.title')">
       <VDialogCloseBtn @click="emit('close')" />
       <VCardText>

src/layouts/components/ShortcutBar.vue

@@ -203,7 +203,13 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="45rem" scrollable>
+  <VDialog
+    v-if="nameTestDialog"
+    v-model="nameTestDialog"
+    max-width="45rem"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -219,7 +225,13 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 网络测试弹窗 -->
-  <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
+  <VDialog
+    v-if="netTestDialog"
+    v-model="netTestDialog"
+    max-width="35rem"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -263,7 +275,13 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 过滤规则弹窗 -->
-  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="35rem" scrollable>
+  <VDialog
+    v-if="ruleTestDialog"
+    v-model="ruleTestDialog"
+    max-width="35rem"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -279,7 +297,13 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 系统健康检查弹窗 -->
-  <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" scrollable>
+  <VDialog
+    v-if="systemTestDialog"
+    v-model="systemTestDialog"
+    max-width="35rem"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VCardItem>
         <VCardTitle>

src/pages/dashboard.vue

@@ -354,7 +354,7 @@ onDeactivated(() => {
   />
 
   <!-- 弹窗，根据配置生成选项 -->
-  <VDialog v-if="dialog" v-model="dialog" max-width="35rem" max-height="85vh" scrollable>
+  <VDialog v-if="dialog" v-model="dialog" max-width="35rem" :fullscreen="!display.mdAndUp.value" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>

src/pages/discover.vue

@@ -8,6 +8,9 @@ import ExtraSourceView from '@/views/discover/ExtraSourceView.vue'
 import { DiscoverSource } from '@/api/types'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -179,7 +182,13 @@ onActivated(async () => {
       </VWindowItem>
     </VWindow>
     <!-- 弹窗，根据配置生成选项 -->
-    <VDialog v-if="orderConfigDialog" v-model="orderConfigDialog" max-width="35rem" scrollable>
+    <VDialog
+      v-if="orderConfigDialog"
+      v-model="orderConfigDialog"
+      max-width="35rem"
+      scrollable
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard>
         <VCardItem>
           <VCardTitle>
@@ -199,11 +208,11 @@ onActivated(async () => {
             :component-data="{ 'class': 'settings-grid' }"
           >
             <template #item="{ element }">
-              <div class="setting-item enabled">
+              <VCard variant="text" class="setting-item enabled">
                 <div class="setting-item-inner cursor-move text-center">
                   <span class="setting-label">{{ element.name }}</span>
                 </div>
-              </div>
+              </VCard>
             </template>
           </draggable>
         </VCardText>
@@ -260,6 +269,7 @@ onActivated(async () => {
   &::before {
     position: absolute;
     background-color: transparent;
+    background-color: rgb(var(--v-theme-primary));
     block-size: 100%;
     content: '';
     inline-size: 4px;

src/pages/recommend.vue

@@ -3,6 +3,9 @@ import api from '@/api'
 import { RecommendSource } from '@/api/types'
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -235,7 +238,7 @@ onActivated(async () => {
     </div>
 
     <!-- 设置面板 -->
-    <VDialog v-model="dialog" width="35rem" class="settings-dialog" scrollable>
+    <VDialog v-model="dialog" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
       <VCard class="settings-card">
         <VCardItem class="settings-card-header">
           <VCardTitle>
@@ -248,7 +251,7 @@ onActivated(async () => {
         <VCardText>
           <p class="settings-hint">{{ t('recommend.selectContentToDisplay') }}</p>
           <div class="settings-grid">
-            <div
+            <VCard
               v-for="item in viewList"
               :key="item.title"
               class="setting-item"
@@ -268,7 +271,7 @@ onActivated(async () => {
                 </div>
                 <span class="setting-label">{{ item.title }}</span>
               </div>
-            </div>
+            </VCard>
           </div>
         </VCardText>
         <VCardActions class="pt-3">

src/views/setting/AccountSettingNotification.vue

@@ -7,7 +7,10 @@ import NotificationChannelCard from '@/components/cards/NotificationChannelCard.
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { notificationSwitchDict } from '@/api/constants'
-import { useTheme } from 'vuetify'
+import { useTheme, useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -440,7 +443,7 @@ onMounted(() => {
     :indeterminate="true"
   />
   <!-- 模板编辑器对话框 -->
-  <VDialog v-model="editorVisible" v-if="editorVisible" max-width="50rem">
+  <VDialog v-model="editorVisible" v-if="editorVisible" max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard>
       <VCardItem>
         <VCardTitle>
@@ -454,7 +457,7 @@ onMounted(() => {
           v-model:value="editorContent"
           lang="json"
           :theme="editorTheme"
-          class="w-full min-h-[30rem] rounded"
+          class="w-full h-full min-h-[30rem] rounded"
         />
       </VCardText>
       <VCardActions class="pt-3">

src/views/setting/AccountSettingSystem.vue

@@ -11,6 +11,9 @@ import { copyToClipboard } from '@/@core/utils/navigator'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { downloaderOptions, mediaServerOptions } from '@/api/constants'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -633,8 +636,15 @@ onDeactivated(() => {
       </VCard>
     </VCol>
   </VRow>
+
   <!-- 高级系统设置 -->
-  <VDialog v-if="advancedDialog" v-model="advancedDialog" scrollable max-width="60rem">
+  <VDialog
+    v-if="advancedDialog"
+    v-model="advancedDialog"
+    scrollable
+    max-width="60rem"
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VCardItem>
         <VDialogCloseBtn @click="advancedDialog = false" />

src/views/torrent/TorrentCardListView.vue

@@ -3,6 +3,10 @@ import { cloneDeepWith } from 'lodash-es'
 import type { Context } from '@/api/types'
 import TorrentCard from '@/components/cards/TorrentCard.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -606,7 +610,13 @@ const handleSortIconClick = () => {
   </VCard>
 
   <!-- 全部筛选弹窗 -->
-  <VDialog v-model="allFilterMenuOpen" max-width="50rem" max-height="90%" location="center" scrollable>
+  <VDialog
+    v-model="allFilterMenuOpen"
+    max-width="50rem"
+    location="center"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
     <VCard>
       <VDialogCloseBtn @click="allFilterMenuOpen = false" />
       <VCardTitle class="py-3 d-flex align-center">
@@ -676,7 +686,7 @@ const handleSortIconClick = () => {
   </VDialog>
 
   <!-- 筛选弹窗 -->
-  <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
+  <VDialog 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>

src/views/torrent/TorrentRowListView.vue

@@ -2,6 +2,10 @@
 import type { Context } from '@/api/types'
 import TorrentItem from '@/components/cards/TorrentItem.vue'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 国际化
 const { t } = useI18n()
@@ -582,7 +586,13 @@ onMounted(() => {
     </VCard>
 
     <!-- 全部筛选弹窗 -->
-    <VDialog v-model="allFilterMenuOpen" max-width="50rem" max-height="90%" location="center" scrollable>
+    <VDialog
+      v-model="allFilterMenuOpen"
+      max-width="50rem"
+      location="center"
+      scrollable
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard>
         <VDialogCloseBtn @click="allFilterMenuOpen = false" />
         <VCardTitle class="py-3 d-flex align-center">
@@ -652,7 +662,7 @@ onMounted(() => {
     </VDialog>
 
     <!-- 筛选弹窗 -->
-    <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
+    <VDialog 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>

src/views/user/UserListView.vue

@@ -114,7 +114,6 @@ useDynamicButton({
       v-model="addUserDialog"
       oper="add"
       max-width="45rem"
-      persistent
       @save="onUserAdd"
       @close="addUserDialog = false"
     />