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

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">