GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-05 07:41:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jxxghp
2025-05-25 19:44:04 +08:00
parent 7e637f835a
commit fded7b0b28
27 changed files with 272 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/cards/CustomRuleCard.vue
View File

@@ -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 />

13
src/components/cards/DownloaderCard.vue
View File

@@ -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 />

12
src/components/cards/FilterRuleGroupCard.vue
View File

@@ -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 />

13
src/components/cards/MediaServerCard.vue
View File

@@ -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 />

13
src/components/cards/NotificationChannelCard.vue
View File

@@ -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 />

6
src/components/cards/PluginCard.vue
View File

@@ -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 />

94
src/components/cards/PluginFolderCard.vue
View File

@@ -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;
max-width: none;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.3;
max-inline-size: none;
text-overflow: ellipsis;
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>

12
src/components/cards/StorageCard.vue
View File

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

6
src/components/dialog/AddDownloadDialog.vue
View File

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

6
src/components/dialog/AlistConfigDialog.vue
View File

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

18
src/components/dialog/AliyunAuthDialog.vue
View File

@@ -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">
<div class="my-6 rounded text-center p-3 border">
<VCardText class="pt-2 flex flex-col items-center justify-center">
<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">
<template #prepend />
</VAlert>
<div>
<VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
<template #prepend />
</VAlert>
</div>
</VCardText>
<VCardActions>
<VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">

8
src/components/dialog/PluginMarketSettingDialog.vue
View File

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

9
src/components/dialog/RcloneConfigDialog.vue
View File

@@ -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"
class="rounded h-full min-h-[30rem]"
>
</VAceEditor>
</VCol>

17
src/components/dialog/SearchBarDialog.vue
View File

@@ -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 />

2
src/components/dialog/SiteCookieUpdateDialog.vue
View File

@@ -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')" />

18
src/components/dialog/U115AuthDialog.vue
View File

@@ -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">
<div class="my-6 rounded text-center p-3 border">
<VCardText class="pt-2 flex flex-col items-center justify-center">
<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">
<template #prepend />
</VAlert>
<div>
<VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
<template #prepend />
</VAlert>
</div>
</VCardText>
<VCardActions>
<VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">

2
src/components/dialog/UserAddEditDialog.vue
View File

@@ -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}` : ''

6
src/components/dialog/UserAuthDialog.vue
View File

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