From e8e0ac9084033b335bf7c1e95cff36c15b3b7664 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 17 Jun 2026 17:19:09 +0800
Subject: [PATCH] refactor: remove scoped global css escapes

---
 src/App.vue                                  | 10 ++++++++--
 src/components/dialog/ShortcutToolDialog.vue | 19 ++++++++++++++-----
 src/layouts/components/QuickAccess.vue       |  6 ------
 src/pages/login.vue                          |  7 -------
 src/styles/common.scss                       |  6 ++++++
 5 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 405b3c46..a1d9eded 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/components/dialog/ShortcutToolDialog.vue b/src/components/dialog/ShortcutToolDialog.vue
index cb5fadf3..75cf969e 100644
--- a/src/components/dialog/ShortcutToolDialog.vue
+++ b/src/components/dialog/ShortcutToolDialog.vue
@@ -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>
diff --git a/src/layouts/components/QuickAccess.vue b/src/layouts/components/QuickAccess.vue
index 13574922..098559cd 100644
--- a/src/layouts/components/QuickAccess.vue
+++ b/src/layouts/components/QuickAccess.vue
@@ -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;
diff --git a/src/pages/login.vue b/src/pages/login.vue
index d503b446..79449130 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -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;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index bcbed6fc..f1070196 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -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;