refactor: remove scoped global css escapes

This commit is contained in:
jxxghp
2026-06-17 17:19:09 +08:00
parent c66ee881b1
commit e8e0ac9084
5 changed files with 28 additions and 20 deletions

View File

@@ -59,8 +59,9 @@ const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'
const backgroundImages = ref<string[]>([])
const activeImageIndex = ref(0)
const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
const isLoginWallpaperRoute = computed(() => !isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE)
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 backgroundRequestController: AbortController | null = null
@@ -434,7 +435,7 @@ onUnmounted(() => {
<div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
</div>
<!-- 页面内容 -->
<VApp>
<VApp :class="{ 'app-shell--login-wallpaper': isLoginWallpaperRoute }">
<RouterView />
<!-- 全局共享弹窗入口列表与卡片按需在这里挂载业务弹窗 -->
<SharedDialogHost />
@@ -504,4 +505,9 @@ onUnmounted(() => {
inset-block-start: 0;
inset-inline-start: 0;
}
/* 登录页壁纸在 VApp 外层渲染,登录页 VApp 需要透明才能露出壁纸。 */
.app-shell--login-wallpaper.v-application {
background: transparent !important;
}
</style>

View File

@@ -39,10 +39,21 @@ const visible = computed({
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>
<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">
<VCardItem>
<VCardTitle>
@@ -53,7 +64,7 @@ const visible = computed({
<VDialogCloseBtn v-model="visible" />
</VCardItem>
<VDivider />
<VCardText :class="props.bodyClass">
<VCardText :class="bodyClasses">
<Component :is="props.view" v-bind="props.viewProps" />
</VCardText>
</VCard>
@@ -61,8 +72,6 @@ const visible = computed({
</template>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown */
.system-health-dialog-card {
display: flex;
overflow: hidden;
@@ -78,7 +87,7 @@ const visible = computed({
min-block-size: 0;
}
:global(.v-dialog--fullscreen) .system-health-dialog-body {
.system-health-dialog-body--fullscreen {
block-size: auto;
}
</style>

View File

@@ -810,12 +810,6 @@ function handleBackdropClick(event: MouseEvent) {
-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) {
.plugin-item:hover {
background: transparent;

View File

@@ -894,8 +894,6 @@ onUnmounted(() => {
</template>
<style lang="scss" scoped>
/* stylelint-disable selector-pseudo-class-no-unknown */
@use '@core/scss/pages/page-auth';
/* ===================== 布局根容器 ===================== */
@@ -910,11 +908,6 @@ onUnmounted(() => {
min-block-size: 100dvh;
}
/* 登录页需要透出 App.vue 注入的壁纸层。 */
:global(.v-application:has(.login-root)) {
background: transparent !important;
}
/* ===================== 浮动语言切换 ===================== */
.lang-switch-btn {
position: absolute;

View File

@@ -17,6 +17,12 @@ html.v-overlay-scroll-blocked body {
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 {
-ms-overflow-style: none;
scrollbar-width: none;