Merge pull request #112 from hotlcc/develop-20240424-VDialog优化

src/components/cards/PluginCard.vue

@@ -11,6 +11,10 @@ import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import store from '@/store'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const props = defineProps({
@@ -477,6 +481,7 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
     v-model="pluginConfigDialog"
     scrollable
     max-width="60rem"
+    :fullscreen="displayWidth < (60 * 16)"
   >
     <VCard
       :title="`${props.plugin?.plugin_name} - 配置`"
@@ -511,6 +516,7 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
     v-model="pluginInfoDialog"
     scrollable
     max-width="80rem"
+    :fullscreen="displayWidth < (80 * 16)"
   >
     <VCard
       :title="`${props.plugin?.plugin_name}`"

src/components/cards/SiteCard.vue

@@ -8,6 +8,10 @@ import api from '@/api'
 import type { Site, SiteStatistic } from '@/api/types'
 import ExistIcon from '@core/components/ExistIcon.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const cardProps = defineProps({
@@ -310,9 +314,11 @@ onMounted(() => {
   <VDialog
     v-model="siteCookieDialog"
     max-width="50rem"
+    :fullscreen="displayWidth < (50 * 16)"
   >
     <!-- Dialog Content -->
     <VCard title="更新站点Cookie & UA">
+      <DialogCloseBtn @click="siteCookieDialog=false" />
       <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
@@ -381,6 +387,7 @@ onMounted(() => {
     max-width="80rem"
     scrollable
     z-index="1010"
+    :fullscreen="displayWidth < (80 * 16)"
   >
     <!-- Dialog Content -->
     <VCard :title="`浏览站点 - ${cardProps.site?.name}`">

src/components/dialog/ReorganizeDialog.vue

@@ -4,6 +4,10 @@ import TmdbSelector from '../misc/TmdbSelector.vue'
 import store from '@/store'
 import api from '@/api'
 import { numberValidator } from '@/@validators'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const props = defineProps({
@@ -144,6 +148,7 @@ async function transfer() {
   <VDialog
     scrollable
     max-width="60rem"
+    :fullscreen="displayWidth < (60 * 16)"
   >
     <VCard
       :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"

src/components/dialog/SiteAddEditDialog.vue

@@ -4,6 +4,10 @@ import type { Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const props = defineProps({
@@ -125,6 +129,7 @@ async function updateSiteInfo() {
     persistent
     eager
     max-width="60rem"
+    :fullscreen="displayWidth < (60 * 16)"
   >
     <VCard
       :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"

src/components/dialog/SubscribeEditDialog.vue

@@ -3,6 +3,10 @@ import { useToast } from 'vue-toast-notification'
 import { numberValidator } from '@/@validators'
 import api from '@/api'
 import type { Site, Subscribe } from '@/api/types'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const props = defineProps({
@@ -270,6 +274,7 @@ onMounted(() => {
   <VDialog
     scrollable
     max-width="60rem"
+    :fullscreen="displayWidth < (60 * 16)"
   >
     <VCard
       :title="`${props.default ? `${props.type}默认订阅规则` : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`}`"

src/components/dialog/SubscribeHistoryDialog.vue

@@ -2,6 +2,10 @@
 import api from '@/api';
 import { Subscribe } from '@/api/types';
 import { formatDateDifference } from '@core/utils/formatters'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 输入参数
 const props = defineProps({
@@ -133,7 +137,7 @@ const dropdownItems = ref([
   <VDialog
     scrollable
     max-width="50rem"
-    max-height="90vh"
+    :fullscreen="displayWidth < (50 * 16)"
   >
   <VCard
       class="mx-auto"

src/layouts/components/ShortcutBar.vue

@@ -7,6 +7,10 @@ import ModuleTestView from '@/views/system/ModuleTestView.vue'
 import MessageView from '@/views/system/MessageView.vue'
 import store from '@/store'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // App捷径
 const appsMenu = ref(false)
@@ -245,6 +249,7 @@ onMounted(() => {
     v-if="nameTestDialog"
     v-model="nameTestDialog"
     max-width="50rem"
+    :fullscreen="displayWidth < (50 * 16)"
   >
     <VCard title="名称识别测试">
       <DialogCloseBtn @click="nameTestDialog = false" />
@@ -258,6 +263,7 @@ onMounted(() => {
     v-if="netTestDialog"
     v-model="netTestDialog"
     max-width="35rem"
+    :fullscreen="displayWidth < (35 * 16)"
   >
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
@@ -270,8 +276,9 @@ onMounted(() => {
   <VDialog
     v-if="loggingDialog"
     v-model="loggingDialog"
-    class="w-full lg:w-4/5"
     scrollable
+    max-width="70rem"
+    :fullscreen="displayWidth < (70 * 16)"
   >
     <VCard>
       <DialogCloseBtn @click="loggingDialog = false" />
@@ -297,6 +304,7 @@ onMounted(() => {
     v-model="ruleTestDialog"
     max-width="50rem"
     scrollable
+    :fullscreen="displayWidth < (50 * 16)"
   >
     <VCard title="优先级测试">
       <DialogCloseBtn @click="ruleTestDialog = false" />
@@ -311,6 +319,7 @@ onMounted(() => {
     v-model="systemTestDialog"
     max-width="50rem"
     scrollable
+    :fullscreen="displayWidth < (50 * 16)"
   >
     <VCard title="系统健康检查">
       <DialogCloseBtn @click="systemTestDialog = false" />
@@ -325,6 +334,7 @@ onMounted(() => {
     v-model="messageDialog"
     max-width="60rem"
     scrollable
+    :fullscreen="displayWidth < (60 * 16)"
   >
     <VCard title="消息中心">
       <DialogCloseBtn @click="messageDialog = false" />

src/pages/dashboard.vue

@@ -11,6 +11,10 @@ import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
 import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 import api from '@/api'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const displayWidth = useDisplay().width
 
 // 仪表盘配置
 const dashboard_names = {
@@ -157,6 +161,7 @@ function setDashboardConfig() {
     v-model="dialog"
     max-width="600"
     scrollable
+    :fullscreen="displayWidth < 600"
   >
     <VCard title="设置仪表板">
       <VCardText>
@@ -166,6 +171,7 @@ function setDashboardConfig() {
             :key="key"
             cols="12"
             md="4"
+            sm="4"
           >
             <VCheckbox
               v-model="config[key]"