fix(theme): refine mobile glass controls (#582)

src/components/dialog/GlassSettingsDialog.vue

@@ -8,7 +8,6 @@ import {
   type ThemeCustomizerGlassQuality,
 } from '@/composables/useThemeCustomizer'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 
 const props = withDefaults(
   defineProps<{
@@ -25,7 +24,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const display = useDisplay()
 const { settings } = useThemeCustomizer()
 const draftAppearance = ref<ThemeCustomizerGlassAppearance>(settings.value.glassAppearance)
 const draftQuality = ref<ThemeCustomizerGlassQuality>(settings.value.glassQuality)
@@ -91,7 +89,7 @@ function updateQuality(value: unknown) {
 /** 将当前草稿恢复为玻璃主题默认值并立即预览。 */
 function resetSettings() {
   draftAppearance.value = 'clear'
-  draftQuality.value = 'css'
+  draftQuality.value = 'balanced'
   previewGlassSettings({
     glassAppearance: draftAppearance.value,
     glassQuality: draftQuality.value,
@@ -121,7 +119,7 @@ onScopeDispose(cancelGlassPreview)
 </script>
 
 <template>
-  <VDialog v-if="visible" v-model="visible" max-width="30rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <VDialog v-if="visible" v-model="visible" width="100%" max-width="30rem" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>

src/components/dialog/TransparencySettingsDialog.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { useTransparencySettings } from '@/composables/useTransparencySettings'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 
 // 国际化
 const { t } = useI18n()
 
-// 显示器宽度
-const display = useDisplay()
-
 // 输入参数
 const props = withDefaults(
   defineProps<{
@@ -72,7 +68,7 @@ onScopeDispose(cancelTransparencySettings)
 </script>
 
 <template>
-  <VDialog v-if="visible" v-model="visible" max-width="30rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <VDialog v-if="visible" v-model="visible" width="100%" max-width="30rem" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>

src/components/dialog/__tests__/GlassSettingsDialog.spec.ts

@@ -76,7 +76,7 @@ describe('GlassSettingsDialog', () => {
 
     expect(mocks.previewGlassSettings).toHaveBeenCalledWith({
       glassAppearance: 'clear',
-      glassQuality: 'css',
+      glassQuality: 'balanced',
     })
     expect(mocks.commitGlassPreview).not.toHaveBeenCalled()
   })

src/composables/__tests__/useThemeCustomizer.spec.ts

@@ -17,11 +17,11 @@ describe('useThemeCustomizer glass settings', () => {
     localStorage.clear()
   })
 
-  it('uses clear appearance and CSS quality by default', () => {
+  it('uses clear appearance and balanced quality by default', () => {
     const settings = readThemeCustomizerSettings()
 
     expect(settings.glassAppearance).toBe('clear')
-    expect(settings.glassQuality).toBe('css')
+    expect(settings.glassQuality).toBe('balanced')
   })
 
   it.each(['balanced', 'high'] as const)('preserves the %s quality contract', quality => {
@@ -45,7 +45,7 @@ describe('useThemeCustomizer glass settings', () => {
     const settings = readThemeCustomizerSettings()
 
     expect(settings.glassAppearance).toBe('clear')
-    expect(settings.glassQuality).toBe('css')
+    expect(settings.glassQuality).toBe('balanced')
   })
 
   it('syncs glass settings to the document roots', () => {
@@ -88,7 +88,7 @@ describe('useThemeCustomizer glass settings', () => {
     previewGlassSettings({ glassAppearance: 'frosted' })
 
     expect(document.documentElement.dataset.glassAppearance).toBe('frosted')
-    expect(readThemeCustomizerSettings()).toMatchObject({ glassAppearance: 'clear', glassQuality: 'css' })
+    expect(readThemeCustomizerSettings()).toMatchObject({ glassAppearance: 'clear', glassQuality: 'balanced' })
 
     commitGlassPreview()
 

src/composables/useThemeCustomizer.ts

@@ -87,6 +87,7 @@ type VuetifyThemeApi = ReturnType<typeof useTheme>
 const defaultPrimaryColor = themeCustomizerPrimaryColors[0].value
 const validGlassAppearances: ThemeCustomizerGlassAppearance[] = ['clear', 'tinted', 'frosted']
 const validGlassQualities: ThemeCustomizerGlassQuality[] = ['css', 'balanced', 'high']
+const defaultGlassQuality: ThemeCustomizerGlassQuality = 'balanced'
 const validLayouts: ThemeCustomizerLayout[] = ['vertical', 'collapsed', 'horizontal']
 const validRadii: ThemeCustomizerRadius[] = ['none', 'small', 'default', 'large', 'extra']
 const validShadows: readonly ThemeCustomizerShadow[] = themeCustomizerShadowLevels
@@ -124,7 +125,7 @@ function readStoredThemePreference(): ThemeCustomizerTheme {
 function getDefaultThemeCustomizerSettings(): ThemeCustomizerSettings {
   return {
     glassAppearance: 'clear',
-    glassQuality: 'css',
+    glassQuality: defaultGlassQuality,
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
     radius: 'default',
@@ -386,7 +387,7 @@ export function cancelGlassPreview() {
 export function isDefaultThemeCustomizerSettings(settings: ThemeCustomizerSettings) {
   const defaults = normalizeThemeCustomizerSettings({
     glassAppearance: 'clear',
-    glassQuality: 'css',
+    glassQuality: defaultGlassQuality,
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
     radius: 'default',
@@ -487,7 +488,7 @@ export function useThemeCustomizer() {
   async function resetSettings() {
     await updateSettings({
       glassAppearance: 'clear',
-      glassQuality: 'css',
+      glassQuality: defaultGlassQuality,
       layout: 'vertical',
       primaryColor: defaultPrimaryColor,
       radius: 'default',

src/styles/common.scss

@@ -7,8 +7,7 @@
 
 // 返回 Vuetify 指定 elevation 的完整三层 box-shadow，供主题定制器映射全局阴影档位。
 @function app-vuetify-elevation($level) {
-  @return map.get(vuetify-settings.$shadow-key-umbra, $level),
+  @return map.get(vuetify-settings.$shadow-key-umbra, $level), map.get(vuetify-settings.$shadow-key-penumbra, $level),
-    map.get(vuetify-settings.$shadow-key-penumbra, $level),
     map.get(vuetify-settings.$shadow-key-ambient, $level);
 }
 
@@ -57,7 +56,8 @@ html.quick-access-scroll-locked body {
 }
 
 @media (width <= 768px) {
-  html,body {
+  html,
+  body {
     @include hide-scrollbar;
   }
 }
@@ -82,10 +82,12 @@ html {
   --app-overlay-radius: var(--app-vuetify-rounded-lg);
   --app-surface-border-width: 0;
   --app-surface-border-opacity: 0.06;
-  --app-surface-border: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
+  --app-surface-border: var(--app-surface-border-width) solid
+    rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
   --app-card-light-border-width: var(--app-surface-border-width);
   --app-card-light-border-opacity: 0.12;
-  --app-card-light-border: var(--app-card-light-border-width) solid rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity));
+  --app-card-light-border: var(--app-card-light-border-width) solid
+    rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity));
   --app-overlay-border: var(--app-surface-border);
   --app-card-rest-shadow: var(--app-elevation-0);
   --app-card-hover-shadow: var(--app-elevation-0);
@@ -187,7 +189,9 @@ html[data-theme-radius='extra'] {
 }
 
 #nprogress .peg {
-  box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
+  box-shadow:
+    0 0 10px rgb(var(--v-theme-primary)),
+    0 0 5px rgb(var(--v-theme-primary)) !important;
   inline-size: 5px;
   transform: rotate(0deg) translate(0, 0);
 }
@@ -207,13 +211,19 @@ html[data-theme-radius='extra'] {
   border: var(--app-surface-border);
   border-radius: var(--app-surface-radius) !important;
   box-shadow: var(--app-surface-shadow) !important;
-  transition: border-color 0.2s ease, border-radius 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    border-radius 0.2s ease,
+    border-width 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .v-list {
   border-radius: var(--app-surface-radius) !important;
   box-shadow: var(--app-surface-shadow) !important;
-  transition: border-radius 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-radius 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .app-surface-static {
@@ -243,7 +253,9 @@ html[data-theme-radius='extra'] {
 
 .app-hover-lift-card {
   transform: translateZ(0);
-  transition: transform 0.3s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.2s ease;
 }
 
 .app-hover-lift-card--hovering {
@@ -478,7 +490,9 @@ html[data-theme-radius='extra'] {
   [class*=' rounded-']
 ) {
   border-radius: var(--app-field-radius);
-  transition: border-radius 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-radius 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 // 自定义字段圆角时，outlined 字段带左侧 inner icon 需要同步放大左侧描边弧度。
@@ -568,7 +582,9 @@ html[data-theme-radius='extra'] {
 .app-responsive-input--multiline .v-field {
   border-radius: var(--app-control-radius) !important;
   background-color: transparent;
-  transition: background-color 0.18s ease, box-shadow 0.18s ease;
+  transition:
+    background-color 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .app-responsive-input--empty:not(:has(.v-field--dirty)) .v-field {
@@ -601,7 +617,8 @@ html[data-theme-radius='extra'] {
   flex-wrap: nowrap;
 }
 
-.app-responsive-input--field :is(
+.app-responsive-input--field
+  :is(
     input.v-field__input,
     .v-field__input > input,
     .v-select__selection,
@@ -617,21 +634,15 @@ html[data-theme-radius='extra'] {
   white-space: nowrap;
 }
 
-.app-responsive-input__native:is(
+.app-responsive-input__native:is(.v-select--multiple, .v-autocomplete--multiple, .v-combobox--multiple)
-  .v-select--multiple,
+  .v-field__input {
-  .v-autocomplete--multiple,
-  .v-combobox--multiple
-) .v-field__input {
   overflow: visible;
   flex-wrap: wrap;
   row-gap: 0.25rem;
 }
 
-.app-responsive-input__native:is(
+.app-responsive-input__native:is(.v-select--multiple, .v-autocomplete--multiple, .v-combobox--multiple)
-  .v-select--multiple,
+  :is(
-  .v-autocomplete--multiple,
-  .v-combobox--multiple
-) :is(
     .v-select__selection,
     .v-select__selection-text,
     .v-autocomplete__selection,
@@ -644,19 +655,12 @@ html[data-theme-radius='extra'] {
   white-space: normal;
 }
 
-.app-responsive-input__native:is(
+.app-responsive-input__native:is(.v-select--multiple, .v-autocomplete--multiple, .v-combobox--multiple) .v-chip {
-  .v-select--multiple,
-  .v-autocomplete--multiple,
-  .v-combobox--multiple
-) .v-chip {
   max-inline-size: 100%;
 }
 
-.app-responsive-input__native:is(
+.app-responsive-input__native:is(.v-select--multiple, .v-autocomplete--multiple, .v-combobox--multiple)
-  .v-select--multiple,
+  .v-chip__content {
-  .v-autocomplete--multiple,
-  .v-combobox--multiple
-) .v-chip__content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -754,21 +758,36 @@ html[data-theme-radius='extra'] {
   }
 
   // 表单顶层在桌面也占满 12 格的字段改为上下两行，避免把嵌套 md=12 字段误判为整行字段。
-  .v-form > .v-row > :is(
+  .v-form
-    .v-col-12:not([class*='v-col-sm-']):not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-']),
+    > .v-row
-    .v-col-sm-12:not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-']),
+    > :is(
+      .v-col-12:not([class*='v-col-sm-']):not([class*='v-col-md-']):not([class*='v-col-lg-']):not(
+          [class*='v-col-xl-']
+        ):not([class*='v-col-xxl-']),
+      .v-col-sm-12:not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not(
+          [class*='v-col-xxl-']
+        ),
       .v-col-md-12:not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-'])
-  ) > :is(.app-responsive-input--field, .app-responsive-input--range) {
+    )
+    > :is(.app-responsive-input--field, .app-responsive-input--range) {
     row-gap: 0.5rem;
     align-items: start;
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .v-form > .v-row > :is(
+  .v-form
-    .v-col-12:not([class*='v-col-sm-']):not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-']),
+    > .v-row
-    .v-col-sm-12:not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-']),
+    > :is(
+      .v-col-12:not([class*='v-col-sm-']):not([class*='v-col-md-']):not([class*='v-col-lg-']):not(
+          [class*='v-col-xl-']
+        ):not([class*='v-col-xxl-']),
+      .v-col-sm-12:not([class*='v-col-md-']):not([class*='v-col-lg-']):not([class*='v-col-xl-']):not(
+          [class*='v-col-xxl-']
+        ),
       .v-col-md-12:not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-'])
-  ) > :is(.app-responsive-input--field, .app-responsive-input--range) .app-responsive-input__control {
+    )
+    > :is(.app-responsive-input--field, .app-responsive-input--range)
+    .app-responsive-input__control {
     inline-size: 100%;
   }
 }
@@ -793,11 +812,14 @@ html[data-theme-radius='extra'] {
 .v-btn-group:not(.v-btn-group--variant-plain, .v-btn-group--variant-text) {
   border-radius: var(--app-control-radius);
   box-shadow: var(--app-surface-shadow) !important;
-  transition: box-shadow 0.2s ease, border-radius 0.2s ease;
+  transition:
+    box-shadow 0.2s ease,
+    border-radius 0.2s ease;
 }
 
 // 只给外层卡片和弹窗外壳保留阴影，内部 surface / control / elevation 工具类统一保持平面，避免多层阴影叠加。
-.v-card :where(
+.v-card
+  :where(
     .app-surface,
     .app-surface-static,
     .v-alert,
@@ -820,7 +842,9 @@ html[data-theme-radius='extra'] {
     [class^='shadow-'],
     [class*=' shadow-']
   ),
-.v-overlay__content > .v-card :where(
+.v-overlay__content
+  > .v-card
+  :where(
     .app-surface,
     .app-surface-static,
     .v-alert,
@@ -843,7 +867,9 @@ html[data-theme-radius='extra'] {
     [class^='shadow-'],
     [class*=' shadow-']
   ),
-.v-overlay__content > .v-sheet :where(
+.v-overlay__content
+  > .v-sheet
+  :where(
     .app-surface,
     .app-surface-static,
     .v-alert,
@@ -866,7 +892,10 @@ html[data-theme-radius='extra'] {
     [class^='shadow-'],
     [class*=' shadow-']
   ),
-.v-overlay__content > form > .v-card :where(
+.v-overlay__content
+  > form
+  > .v-card
+  :where(
     .app-surface,
     .app-surface-static,
     .v-alert,
@@ -889,7 +918,10 @@ html[data-theme-radius='extra'] {
     [class^='shadow-'],
     [class*=' shadow-']
   ),
-.v-overlay__content > form > .v-sheet :where(
+.v-overlay__content
+  > form
+  > .v-sheet
+  :where(
     .app-surface,
     .app-surface-static,
     .v-alert,
@@ -945,7 +977,10 @@ html[data-theme-radius='extra'] {
     ),
     rgba(var(--v-theme-surface), var(--app-card-surface-opacity));
   color: rgb(var(--v-theme-on-surface));
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 
   --app-card-accent-rgb: var(--v-theme-primary);
   --app-card-accent-end-rgb: var(--app-card-accent-rgb);
@@ -955,7 +990,8 @@ html[data-theme-radius='extra'] {
   --app-card-hover-border-opacity: 0.16;
   --app-card-stripe-opacity: 0.22;
   --app-card-surface-opacity: 0.92;
-  --app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity));
+  --app-surface-border: var(--app-surface-border-width) solid
+    rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity));
   --app-surface-hover-shadow: var(--app-card-hover-shadow);
   --app-surface-shadow: var(--app-card-rest-shadow);
 }
@@ -964,7 +1000,7 @@ html[data-theme-radius='extra'] {
   position: absolute;
   background: rgb(var(--app-card-accent-rgb));
   block-size: 100%;
-  content: "";
+  content: '';
   inline-size: 0.125rem;
   inset-block: 0;
   inset-inline-start: 0;
@@ -973,7 +1009,8 @@ html[data-theme-radius='extra'] {
 }
 
 .app-card-colorful:hover {
-  --app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity));
+  --app-surface-border: var(--app-surface-border-width) solid
+    rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity));
 }
 
 .app-card-colorful:focus-visible {
@@ -991,7 +1028,7 @@ html[data-theme-radius='extra'] {
   pointer-events: none;
 }
 
-html[data-theme="transparent"] .app-card-colorful,
+html[data-theme='transparent'] .app-card-colorful,
 .v-theme--transparent .app-card-colorful {
   backdrop-filter: blur(var(--transparent-blur, 10px));
 
@@ -1001,13 +1038,14 @@ html[data-theme="transparent"] .app-card-colorful,
   --app-card-hover-border-opacity: var(--app-surface-border-opacity);
   --app-card-stripe-opacity: 0.16;
   --app-card-surface-opacity: var(--transparent-opacity-light, 0.2);
-  --app-surface-border: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
+  --app-surface-border: var(--app-surface-border-width) solid
+    rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
 }
 
-html[data-theme="transparent"].transparent-glass-lightweight .app-card-colorful,
+html[data-theme='transparent'].transparent-glass-lightweight .app-card-colorful,
-html[data-theme="transparent"].transparent-glass-lightweight .v-theme--transparent .app-card-colorful,
+html[data-theme='transparent'].transparent-glass-lightweight .v-theme--transparent .app-card-colorful,
-html[data-theme="transparent"].transparent-glass-realtime .app-card-colorful,
+html[data-theme='transparent'].transparent-glass-realtime .app-card-colorful,
-html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent .app-card-colorful {
+html[data-theme='transparent'].transparent-glass-realtime .v-theme--transparent .app-card-colorful {
   backdrop-filter: none;
 }
 
@@ -1411,7 +1449,8 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
 }
 
 // 组件样式
-.v-alert--variant-elevated, .v-alert--variant-flat {
+.v-alert--variant-elevated,
+.v-alert--variant-flat {
   border-radius: var(--app-surface-radius);
   background: rgb(var(--v-table-header-background));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
@@ -1420,7 +1459,9 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px) !important;
 
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
+    var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
 }
 
 .v-toolbar {
@@ -1677,8 +1718,8 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
   }
 
   .compact-fab--secondary .v-btn {
-    block-size: 3rem !important;
+    block-size: 3.5rem !important;
-    inline-size: 3rem !important;
+    inline-size: 3.5rem !important;
   }
 }
 
@@ -1751,7 +1792,8 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
   background-color: rgb(var(--v-theme-surface), 0.95);
   box-shadow: none;
 
-  .v-list, .v-table {
+  .v-list,
+  .v-table {
     backdrop-filter: none;
     background-color: transparent;
     box-shadow: none;
@@ -1776,7 +1818,9 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
   background: transparent;
   box-shadow: none;
   margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
-  transition: opacity 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .v-menu > .v-overlay__content {
@@ -1887,8 +1931,6 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
   box-shadow: none;
 }
 
-
-
 // 主界面下拉入口提示：放在公共样式中，避免 scoped 样式无法响应根节点主题属性。
 .app-pull-indicator {
   position: fixed;
@@ -1927,7 +1969,9 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
   background: rgba(var(--v-theme-primary), var(--app-pull-indicator-icon-surface-opacity));
   block-size: 40px;
   inline-size: 40px;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s ease;
 }
 
 html[data-theme='light'] .app-pull-indicator {