mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
refactor: remove scoped global css escapes
This commit is contained in:
+8
-2
@@ -59,8 +59,9 @@ const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'
|
|||||||
const backgroundImages = ref<string[]>([])
|
const backgroundImages = ref<string[]>([])
|
||||||
const activeImageIndex = ref(0)
|
const activeImageIndex = ref(0)
|
||||||
const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
|
const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
|
||||||
|
const isLoginWallpaperRoute = computed(() => !isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE)
|
||||||
const shouldLoadBackgroundImages = computed(
|
const shouldLoadBackgroundImages = computed(
|
||||||
() => (!isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE) || (Boolean(isLogin.value) && isTransparentTheme.value),
|
() => isLoginWallpaperRoute.value || (Boolean(isLogin.value) && isTransparentTheme.value),
|
||||||
)
|
)
|
||||||
let backgroundRetryTimer: number | null = null
|
let backgroundRetryTimer: number | null = null
|
||||||
let backgroundRequestController: AbortController | null = null
|
let backgroundRequestController: AbortController | null = null
|
||||||
@@ -434,7 +435,7 @@ onUnmounted(() => {
|
|||||||
<div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
|
<div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 页面内容 -->
|
<!-- 页面内容 -->
|
||||||
<VApp>
|
<VApp :class="{ 'app-shell--login-wallpaper': isLoginWallpaperRoute }">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<!-- 全局共享弹窗入口,列表与卡片按需在这里挂载业务弹窗。 -->
|
<!-- 全局共享弹窗入口,列表与卡片按需在这里挂载业务弹窗。 -->
|
||||||
<SharedDialogHost />
|
<SharedDialogHost />
|
||||||
@@ -504,4 +505,9 @@ onUnmounted(() => {
|
|||||||
inset-block-start: 0;
|
inset-block-start: 0;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 登录页壁纸在 VApp 外层渲染,登录页 VApp 需要透明才能露出壁纸。 */
|
||||||
|
.app-shell--login-wallpaper.v-application {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -39,10 +39,21 @@ const visible = computed({
|
|||||||
if (!value) emit('close')
|
if (!value) emit('close')
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const isFullscreen = computed(() => !display.mdAndUp.value)
|
||||||
|
|
||||||
|
// 仅系统健康检查弹窗需要在全屏时取消固定高度,避免其它快捷弹窗被误伤。
|
||||||
|
const bodyClasses = computed(() => [
|
||||||
|
props.bodyClass,
|
||||||
|
{
|
||||||
|
'system-health-dialog-body--fullscreen':
|
||||||
|
isFullscreen.value && props.bodyClass.split(/\s+/).includes('system-health-dialog-body'),
|
||||||
|
},
|
||||||
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VDialog v-if="visible" v-model="visible" :max-width="props.maxWidth" scrollable :fullscreen="!display.mdAndUp.value">
|
<VDialog v-if="visible" v-model="visible" :max-width="props.maxWidth" scrollable :fullscreen="isFullscreen">
|
||||||
<VCard :class="props.cardClass">
|
<VCard :class="props.cardClass">
|
||||||
<VCardItem>
|
<VCardItem>
|
||||||
<VCardTitle>
|
<VCardTitle>
|
||||||
@@ -53,7 +64,7 @@ const visible = computed({
|
|||||||
<VDialogCloseBtn v-model="visible" />
|
<VDialogCloseBtn v-model="visible" />
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
<VDivider />
|
<VDivider />
|
||||||
<VCardText :class="props.bodyClass">
|
<VCardText :class="bodyClasses">
|
||||||
<Component :is="props.view" v-bind="props.viewProps" />
|
<Component :is="props.view" v-bind="props.viewProps" />
|
||||||
</VCardText>
|
</VCardText>
|
||||||
</VCard>
|
</VCard>
|
||||||
@@ -61,8 +72,6 @@ const visible = computed({
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* stylelint-disable selector-pseudo-class-no-unknown */
|
|
||||||
|
|
||||||
.system-health-dialog-card {
|
.system-health-dialog-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -78,7 +87,7 @@ const visible = computed({
|
|||||||
min-block-size: 0;
|
min-block-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.v-dialog--fullscreen) .system-health-dialog-body {
|
.system-health-dialog-body--fullscreen {
|
||||||
block-size: auto;
|
block-size: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -810,12 +810,6 @@ function handleBackdropClick(event: MouseEvent) {
|
|||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(html.quick-access-scroll-locked),
|
|
||||||
:global(html.quick-access-scroll-locked body) {
|
|
||||||
overflow: hidden !important;
|
|
||||||
overscroll-behavior: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: none) and (pointer: coarse) {
|
@media (hover: none) and (pointer: coarse) {
|
||||||
.plugin-item:hover {
|
.plugin-item:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
@@ -894,8 +894,6 @@ onUnmounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* stylelint-disable selector-pseudo-class-no-unknown */
|
|
||||||
|
|
||||||
@use '@core/scss/pages/page-auth';
|
@use '@core/scss/pages/page-auth';
|
||||||
|
|
||||||
/* ===================== 布局根容器 ===================== */
|
/* ===================== 布局根容器 ===================== */
|
||||||
@@ -910,11 +908,6 @@ onUnmounted(() => {
|
|||||||
min-block-size: 100dvh;
|
min-block-size: 100dvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 登录页需要透出 App.vue 注入的壁纸层。 */
|
|
||||||
:global(.v-application:has(.login-root)) {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===================== 浮动语言切换 ===================== */
|
/* ===================== 浮动语言切换 ===================== */
|
||||||
.lang-switch-btn {
|
.lang-switch-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -17,6 +17,12 @@ html.v-overlay-scroll-blocked body {
|
|||||||
inset-block-start: var(--v-body-scroll-y);
|
inset-block-start: var(--v-body-scroll-y);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.quick-access-scroll-locked,
|
||||||
|
html.quick-access-scroll-locked body {
|
||||||
|
overflow: hidden !important;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin hide-scrollbar {
|
@mixin hide-scrollbar {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user