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
+8 -2
View File
@@ -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>
+14 -5
View File
@@ -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>
-6
View File
@@ -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;
-7
View File
@@ -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;
+6
View File
@@ -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;