feat(glass): improve optical quality and controls (#585)

src/components/dialog/GlassSettingsDialog.vue

@@ -7,6 +7,14 @@ import {
   type ThemeCustomizerGlassAppearance,
   type ThemeCustomizerGlassQuality,
 } from '@/composables/useThemeCustomizer'
+import {
+  GLASS_OPTICAL_STRENGTH_MAX,
+  GLASS_OPTICAL_STRENGTH_MIN,
+  getAvailableGlassOpticalPresets,
+  getGlassOpticalPresetParameters,
+  normalizeGlassOpticalStrength,
+  type GlassOpticalPreset,
+} from '@/utils/glassOptics'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(
@@ -26,8 +34,20 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const { settings } = useThemeCustomizer()
 const draftAppearance = ref<ThemeCustomizerGlassAppearance>(settings.value.glassAppearance)
+const draftDeformationStrength = ref(settings.value.glassDeformationStrength)
+const draftFlowStrength = ref(settings.value.glassFlowStrength)
+const draftPreset = ref<GlassOpticalPreset>(settings.value.glassPreset)
 const draftQuality = ref<ThemeCustomizerGlassQuality>(settings.value.glassQuality)
+const draftReflectionStrength = ref(settings.value.glassReflectionStrength)
+const draftTranslationStrength = ref(settings.value.glassTranslationStrength)
+const draftTransparencyStrength = ref(settings.value.glassTransparencyStrength)
 const isSaving = ref(false)
+const usesRealtimeOptics = computed(() => draftQuality.value !== 'css')
+const showsDynamicTuning = computed(() => usesRealtimeOptics.value)
+const availablePresets = computed(() => getAvailableGlassOpticalPresets(draftQuality.value))
+const activePreset = computed<GlassOpticalPreset>(() =>
+  availablePresets.value.includes(draftPreset.value) ? draftPreset.value : 'natural',
+)
 
 const visible = computed({
   get: () => props.modelValue,
@@ -44,7 +64,13 @@ watch(
   (value, previous) => {
     if (value) {
       draftAppearance.value = settings.value.glassAppearance
+      draftDeformationStrength.value = settings.value.glassDeformationStrength
+      draftFlowStrength.value = settings.value.glassFlowStrength
+      draftPreset.value = settings.value.glassPreset
       draftQuality.value = settings.value.glassQuality
+      draftReflectionStrength.value = settings.value.glassReflectionStrength
+      draftTranslationStrength.value = settings.value.glassTranslationStrength
+      draftTransparencyStrength.value = settings.value.glassTransparencyStrength
     } else if (previous) {
       cancelGlassPreview()
     }
@@ -61,13 +87,23 @@ const appearanceOptions: Array<{
 ]
 
 const qualityOptions: Array<{
+  hint: string
   label: string
   value: ThemeCustomizerGlassQuality
 }> = [
-  { label: 'theme.glassQualityCss', value: 'css' },
-  { label: 'theme.glassQualityBalanced', value: 'balanced' },
-  { label: 'theme.glassQualityHigh', value: 'high' },
+  { hint: 'theme.glassQualityCssHint', label: 'theme.glassQualityCss', value: 'css' },
+  { hint: 'theme.glassQualityBalancedHint', label: 'theme.glassQualityBalanced', value: 'balanced' },
+  { hint: 'theme.glassQualityHighHint', label: 'theme.glassQualityHigh', value: 'high' },
 ]
+const qualityHint = computed(() => qualityOptions.find(option => option.value === draftQuality.value)?.hint ?? '')
+const presetOptions: Array<{ label: string; value: GlassOpticalPreset }> = [
+  { label: 'theme.glassPresetNatural', value: 'natural' },
+  { label: 'theme.glassPresetGlide', value: 'glide' },
+  { label: 'theme.glassPresetLiquid', value: 'liquid' },
+]
+const visiblePresetOptions = computed(() =>
+  presetOptions.filter(option => availablePresets.value.includes(option.value)),
+)
 
 /** 仅允许已实现的材质进入待保存设置。 */
 function updateAppearance(value: unknown) {
@@ -86,16 +122,68 @@ function updateQuality(value: unknown) {
   previewGlassSettings({ glassQuality: option.value })
 }
 
-/** 将当前草稿恢复为玻璃主题默认值并立即预览。 */
-function resetSettings() {
-  draftAppearance.value = 'clear'
-  draftQuality.value = 'balanced'
+/** 将五个具体参数作为一个预览事务同步，预置只负责生成这些值。 */
+function previewDraftParameters() {
   previewGlassSettings({
-    glassAppearance: draftAppearance.value,
-    glassQuality: draftQuality.value,
+    glassDeformationStrength: draftDeformationStrength.value,
+    glassFlowStrength: draftFlowStrength.value,
+    glassPreset: draftPreset.value,
+    glassReflectionStrength: draftReflectionStrength.value,
+    glassTranslationStrength: draftTranslationStrength.value,
+    glassTransparencyStrength: draftTransparencyStrength.value,
   })
 }
 
+/** 应用当前材质与质量下的方案建议值，并将该方案作为后续重置目标。 */
+function applyPreset(value: unknown) {
+  if (value !== 'natural' && value !== 'glide' && value !== 'liquid') return
+  if (!availablePresets.value.includes(value)) return
+
+  const parameters = getGlassOpticalPresetParameters(draftAppearance.value, draftQuality.value, value)
+  draftPreset.value = value
+  draftDeformationStrength.value = parameters.deformation
+  draftFlowStrength.value = parameters.flow
+  draftReflectionStrength.value = parameters.reflection
+  draftTranslationStrength.value = parameters.translation
+  draftTransparencyStrength.value = parameters.transparency
+  previewDraftParameters()
+}
+
+/** 将采样平移限制为 renderer 支持的稳定范围。 */
+function updateTranslationStrength(value: unknown) {
+  draftTranslationStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassTranslationStrength: draftTranslationStrength.value })
+}
+
+/** 将局部形变限制为质量档软上限所消费的用户范围。 */
+function updateDeformationStrength(value: unknown) {
+  draftDeformationStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassDeformationStrength: draftDeformationStrength.value })
+}
+
+/** 将尾波、惯性与收敛输入限制为 renderer 的稳定范围。 */
+function updateFlowStrength(value: unknown) {
+  draftFlowStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassFlowStrength: draftFlowStrength.value })
+}
+
+/** 将滑杆输入限制为 renderer 的稳定范围并即时预览反射亮度。 */
+function updateReflectionStrength(value: unknown) {
+  draftReflectionStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassReflectionStrength: draftReflectionStrength.value })
+}
+
+/** 将通透度限制为稳定范围并即时调整材质与真实壁纸的占比。 */
+function updateTransparencyStrength(value: unknown) {
+  draftTransparencyStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassTransparencyStrength: draftTransparencyStrength.value })
+}
+
+/** 保留当前材质与质量，将参数恢复为当前高亮方案的建议值。 */
+function resetSettings() {
+  applyPreset(activePreset.value)
+}
+
 /** 一次提交当前预览，持久化后关闭不会发生视觉回跳。 */
 async function saveSettings() {
   if (isSaving.value) return
@@ -105,7 +193,13 @@ async function saveSettings() {
   try {
     previewGlassSettings({
       glassAppearance: draftAppearance.value,
+      glassDeformationStrength: draftDeformationStrength.value,
+      glassFlowStrength: draftFlowStrength.value,
+      glassPreset: draftPreset.value,
       glassQuality: draftQuality.value,
+      glassReflectionStrength: draftReflectionStrength.value,
+      glassTranslationStrength: draftTranslationStrength.value,
+      glassTransparencyStrength: draftTransparencyStrength.value,
     })
     commitGlassPreview()
     visible.value = false
@@ -171,6 +265,122 @@ onScopeDispose(cancelGlassPreview)
               {{ t(option.label) }}
             </VBtn>
           </VBtnToggle>
+          <p class="glass-settings-dialog__hint">{{ t(qualityHint) }}</p>
+        </section>
+
+        <section v-if="usesRealtimeOptics">
+          <div class="glass-settings-dialog__preset-header">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassPreset') }}</h3>
+          </div>
+          <VBtnToggle
+            :model-value="activePreset"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__preset"
+            @update:model-value="applyPreset"
+          >
+            <VBtn
+              v-for="option in visiblePresetOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__preset-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+        </section>
+
+        <section class="glass-settings-dialog__tuning">
+          <div class="glass-settings-dialog__slider-header">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassTransparencyStrength') }}</h3>
+            <output>{{ draftTransparencyStrength }}%</output>
+          </div>
+          <VSlider
+            :model-value="draftTransparencyStrength"
+            :aria-label="t('theme.glassTransparencyStrength')"
+            :min="GLASS_OPTICAL_STRENGTH_MIN"
+            :max="GLASS_OPTICAL_STRENGTH_MAX"
+            :step="1"
+            color="primary"
+            density="comfortable"
+            hide-details
+            thumb-label
+            @update:model-value="updateTransparencyStrength"
+          />
+
+          <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassReflectionStrength') }}</h3>
+            <output>{{ draftReflectionStrength }}%</output>
+          </div>
+          <VSlider
+            :model-value="draftReflectionStrength"
+            :aria-label="t('theme.glassReflectionStrength')"
+            :min="GLASS_OPTICAL_STRENGTH_MIN"
+            :max="GLASS_OPTICAL_STRENGTH_MAX"
+            :step="1"
+            color="primary"
+            density="comfortable"
+            hide-details
+            thumb-label
+            @update:model-value="updateReflectionStrength"
+          />
+
+          <div v-if="showsDynamicTuning" class="glass-settings-dialog__live-controls">
+            <div class="glass-settings-dialog__slider-header">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassTranslationStrength') }}</h3>
+              <output>{{ draftTranslationStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftTranslationStrength"
+              :aria-label="t('theme.glassTranslationStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateTranslationStrength"
+            />
+
+            <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassDeformationStrength') }}</h3>
+              <output>{{ draftDeformationStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftDeformationStrength"
+              :aria-label="t('theme.glassDeformationStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateDeformationStrength"
+            />
+
+            <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassFlowStrength') }}</h3>
+              <output>{{ draftFlowStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftFlowStrength"
+              :aria-label="t('theme.glassFlowStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateFlowStrength"
+            />
+          </div>
+          <p class="glass-settings-dialog__hint">
+            {{ t(showsDynamicTuning ? 'theme.glassOpticalStrengthHint' : 'theme.glassOpticalStrengthUnavailableHint') }}
+          </p>
         </section>
       </VCardText>
 
@@ -204,8 +414,57 @@ onScopeDispose(cancelGlassPreview)
   line-height: 1.4;
 }
 
+.glass-settings-dialog__hint {
+  margin: 8px 0 0;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.glass-settings-dialog__slider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+
+  .glass-settings-dialog__label {
+    margin-block-end: 0;
+  }
+
+  output {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.glass-settings-dialog__slider-header--spaced,
+.glass-settings-dialog__slider-header + .glass-settings-dialog__slider-header {
+  margin-block-start: 18px;
+}
+
+.glass-settings-dialog__live-controls {
+  margin-block-start: 18px;
+
+  :deep(.v-slider) {
+    margin-block-start: 4px;
+  }
+}
+
+.glass-settings-dialog__preset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  .glass-settings-dialog__label {
+    margin-block-end: 0;
+  }
+}
+
 .glass-settings-dialog__appearance,
-.glass-settings-dialog__quality {
+.glass-settings-dialog__quality,
+.glass-settings-dialog__preset {
   display: grid;
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
@@ -226,6 +485,12 @@ onScopeDispose(cancelGlassPreview)
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.glass-settings-dialog__preset {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-block-start: 10px;
+}
+
 .glass-settings-dialog__appearance-option {
   block-size: 32px !important;
   inline-size: 100%;
@@ -233,7 +498,8 @@ onScopeDispose(cancelGlassPreview)
 }
 
 .glass-settings-dialog__appearance-option,
-.glass-settings-dialog__quality-option {
+.glass-settings-dialog__quality-option,
+.glass-settings-dialog__preset-option {
   border: 0 !important;
   border-radius: 7px !important;
   box-shadow: none !important;
@@ -247,8 +513,13 @@ onScopeDispose(cancelGlassPreview)
   block-size: 32px !important;
 }
 
+.glass-settings-dialog__preset-option {
+  block-size: 32px !important;
+}
+
 .glass-settings-dialog__appearance-option:deep(.v-btn--active),
-.glass-settings-dialog__quality-option:deep(.v-btn--active) {
+.glass-settings-dialog__quality-option:deep(.v-btn--active),
+.glass-settings-dialog__preset-option:deep(.v-btn--active) {
   background-color: rgba(var(--v-theme-primary), 0.14) !important;
   box-shadow: inset 0 0 0 1px rgba(var(--v-theme-primary), 0.38) !important;
 }

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

@@ -3,11 +3,34 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import GlassSettingsDialog from '@/components/dialog/GlassSettingsDialog.vue'
 
 const slotStub = { template: '<div><slot /></div>' }
+const toggleStub = {
+  props: ['modelValue'],
+  template: '<div :data-model-value="modelValue"><slot /></div>',
+}
+const sliderStub = {
+  emits: ['update:modelValue'],
+  name: 'VSlider',
+  props: ['disabled', 'modelValue'],
+  template:
+    '<input class="slider-stub" type="range" :data-disabled="String(disabled)" :value="modelValue" @input="$emit(\'update:modelValue\', Number($event.target.value))" />',
+}
 
 const mocks = vi.hoisted(() => ({
   cancelGlassPreview: vi.fn(),
   commitGlassPreview: vi.fn(),
   previewGlassSettings: vi.fn(),
+  settings: {
+    value: {
+      glassAppearance: 'clear',
+      glassDeformationStrength: 50,
+      glassFlowStrength: 50,
+      glassPreset: 'natural',
+      glassQuality: 'css',
+      glassReflectionStrength: 50,
+      glassTranslationStrength: 50,
+      glassTransparencyStrength: 50,
+    },
+  },
 }))
 
 vi.mock('@/composables/useThemeCustomizer', () => ({
@@ -15,12 +38,7 @@ vi.mock('@/composables/useThemeCustomizer', () => ({
   commitGlassPreview: mocks.commitGlassPreview,
   previewGlassSettings: mocks.previewGlassSettings,
   useThemeCustomizer: () => ({
-    settings: {
-      value: {
-        glassAppearance: 'clear',
-        glassQuality: 'css',
-      },
-    },
+    settings: mocks.settings,
   }),
 }))
 
@@ -28,31 +46,53 @@ vi.mock('vue-i18n', () => ({
   useI18n: () => ({ t: (key: string) => key }),
 }))
 
-vi.mock('vuetify', () => ({
-  useDisplay: () => ({ mdAndUp: { value: true } }),
-}))
-
 describe('GlassSettingsDialog', () => {
   beforeEach(() => {
     mocks.cancelGlassPreview.mockClear()
     mocks.commitGlassPreview.mockClear()
     mocks.previewGlassSettings.mockClear()
+    mocks.settings.value.glassAppearance = 'clear'
+    mocks.settings.value.glassDeformationStrength = 50
+    mocks.settings.value.glassFlowStrength = 50
+    mocks.settings.value.glassPreset = 'natural'
+    mocks.settings.value.glassQuality = 'css'
+    mocks.settings.value.glassReflectionStrength = 50
+    mocks.settings.value.glassTranslationStrength = 50
+    mocks.settings.value.glassTransparencyStrength = 50
   })
 
   it('cancels an active preview when the parent closes the dialog', async () => {
     const wrapper = shallowMount(GlassSettingsDialog, {
       global: {
-        stubs: { VDialogCloseBtn: true },
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
       },
       props: { modelValue: true },
     })
+    const sliders = wrapper.findAll('.slider-stub')
 
+    expect(sliders).toHaveLength(2)
+    expect(sliders[0].attributes('data-disabled')).toBe('undefined')
+    expect(sliders[1].attributes('data-disabled')).toBe('undefined')
     await wrapper.setProps({ modelValue: false })
 
     expect(mocks.cancelGlassPreview).toHaveBeenCalledOnce()
   })
 
-  it('resets the draft to the default glass settings without committing', async () => {
+  it('resets parameters to the current material, quality, and preset without committing', async () => {
+    mocks.settings.value.glassAppearance = 'frosted'
+    mocks.settings.value.glassPreset = 'liquid'
+    mocks.settings.value.glassQuality = 'high'
+    mocks.settings.value.glassDeformationStrength = 65
+    mocks.settings.value.glassFlowStrength = 61
+    mocks.settings.value.glassReflectionStrength = 58
+    mocks.settings.value.glassTranslationStrength = 57
+    mocks.settings.value.glassTransparencyStrength = 55
     const wrapper = shallowMount(GlassSettingsDialog, {
       global: {
         stubs: {
@@ -66,6 +106,7 @@ describe('GlassSettingsDialog', () => {
           VDialog: slotStub,
           VDialogCloseBtn: true,
           VDivider: true,
+          VSlider: sliderStub,
         },
       },
       props: { modelValue: true },
@@ -75,9 +116,143 @@ describe('GlassSettingsDialog', () => {
     await resetButton.trigger('click')
 
     expect(mocks.previewGlassSettings).toHaveBeenCalledWith({
-      glassAppearance: 'clear',
-      glassQuality: 'balanced',
+      glassDeformationStrength: 82,
+      glassFlowStrength: 80,
+      glassPreset: 'liquid',
+      glassReflectionStrength: 44,
+      glassTranslationStrength: 54,
+      glassTransparencyStrength: 46,
     })
     expect(mocks.commitGlassPreview).not.toHaveBeenCalled()
   })
+
+  it('keeps static reflection adjustable in standard quality', async () => {
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
+      },
+      props: { modelValue: true },
+    })
+    const sliders = wrapper.findAll('.slider-stub')
+
+    expect(sliders).toHaveLength(2)
+    expect(sliders[1].attributes('data-disabled')).toBe('undefined')
+    await sliders[1].setValue('86')
+
+    expect(mocks.previewGlassSettings).toHaveBeenCalledWith({ glassReflectionStrength: 86 })
+  })
+
+  it('hides preset choices in standard quality', () => {
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
+      },
+      props: { modelValue: true },
+    })
+
+    expect(wrapper.find('.glass-settings-dialog__preset').exists()).toBe(false)
+    expect(wrapper.find('.glass-settings-dialog__preset-state').exists()).toBe(false)
+  })
+
+  it('keeps the selected preset highlighted after slider adjustments', async () => {
+    mocks.settings.value.glassQuality = 'balanced'
+    mocks.settings.value.glassPreset = 'glide'
+    mocks.settings.value.glassTransparencyStrength = 61
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VBtn: slotStub,
+          VBtnToggle: toggleStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
+      },
+      props: { modelValue: true },
+    })
+
+    const preset = wrapper.find('.glass-settings-dialog__preset')
+    const sliders = wrapper.findAll('.slider-stub')
+
+    expect(preset.attributes('data-model-value')).toBe('glide')
+    expect(wrapper.findAll('.glass-settings-dialog__preset-option')).toHaveLength(3)
+    expect(wrapper.find('.glass-settings-dialog__preset-state').exists()).toBe(false)
+
+    await sliders[0].setValue('77')
+
+    expect(preset.attributes('data-model-value')).toBe('glide')
+  })
+
+  it('normalizes and previews all five independent slider values', async () => {
+    mocks.settings.value.glassQuality = 'balanced'
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
+      },
+      props: { modelValue: true },
+    })
+    const sliders = wrapper.findAll('.slider-stub')
+
+    expect(sliders).toHaveLength(5)
+    expect(sliders.every(slider => slider.attributes('data-disabled') !== 'true')).toBe(true)
+
+    await sliders[0].setValue('91.4')
+    await sliders[1].setValue('73.6')
+    await sliders[2].setValue('84.2')
+    await sliders[3].setValue('68.7')
+    await sliders[4].setValue('62.2')
+
+    expect(mocks.previewGlassSettings).toHaveBeenNthCalledWith(1, { glassTransparencyStrength: 91 })
+    expect(mocks.previewGlassSettings).toHaveBeenNthCalledWith(2, { glassReflectionStrength: 74 })
+    expect(mocks.previewGlassSettings).toHaveBeenNthCalledWith(3, { glassTranslationStrength: 84 })
+    expect(mocks.previewGlassSettings).toHaveBeenNthCalledWith(4, { glassDeformationStrength: 69 })
+    expect(mocks.previewGlassSettings).toHaveBeenNthCalledWith(5, { glassFlowStrength: 62 })
+    expect(mocks.commitGlassPreview).not.toHaveBeenCalled()
+  })
+
+  it('keeps motion tuning available in high quality', () => {
+    mocks.settings.value.glassQuality = 'high'
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: {
+          VCard: slotStub,
+          VCardText: slotStub,
+          VDialog: slotStub,
+          VDialogCloseBtn: true,
+          VSlider: sliderStub,
+        },
+      },
+      props: { modelValue: true },
+    })
+    const sliders = wrapper.findAll('.slider-stub')
+
+    expect(sliders).toHaveLength(5)
+    expect(sliders.map(slider => slider.attributes('aria-label'))).toEqual([
+      'theme.glassTransparencyStrength',
+      'theme.glassReflectionStrength',
+      'theme.glassTranslationStrength',
+      'theme.glassDeformationStrength',
+      'theme.glassFlowStrength',
+    ])
+  })
 })

src/components/theme/GlassOpticalLayer.vue

@@ -1,32 +1,113 @@
 <script setup lang="ts">
 import type { ThemeCustomizerGlassAppearance, ThemeCustomizerGlassQuality } from '@/composables/useThemeCustomizer'
-import { useGlassOpticalRenderer } from '@/composables/useGlassOpticalRenderer'
+import {
+  setGlassRendererState,
+  useGlassOpticalInteractionSource,
+  useGlassOpticalRenderer,
+  type GlassRendererState,
+} from '@/composables/useGlassOpticalRenderer'
 
 const props = defineProps<{
   /** 当前玻璃材质，用于选择透明、色调或磨砂的光学参数。 */
   appearance: ThemeCustomizerGlassAppearance
+  /** 用户选择的局部非均匀形变强度。 */
+  deformationStrength: number
+  /** 用户选择的轨迹、尾波与惯性强度。 */
+  flowStrength: number
   /** 当前光学质量；标准档不会挂载该组件。 */
   quality: Exclude<ThemeCustomizerGlassQuality, 'css'>
+  /** 用户选择的亮边、镜面高光与焦散强度。 */
+  reflectionStrength: number
+  /** 用户选择的真实壁纸可见度。 */
+  transparencyStrength: number
+  /** 用户选择的共享壁纸采样平移强度。 */
+  translationStrength: number
   /** 路由变化标识，用于在页面内容稳定后重新发现高价值表面。 */
   routeKey: string
   /** 当前主题主色，用于同步色调材质的光学高光。 */
   tintColor: string
+  /** 外层壁纸交叉淡化的时长，shader 使用同一时钟混合双纹理。 */
+  transitionDuration: number
+  /** 外层壁纸交叉淡化的 performance timeline 起点。 */
+  transitionStartedAt: number
   /** 与 CSS 背景保持一致的活动壁纸。 */
   wallpaperUrl: string
+  /** 切换期保留的上一张壁纸；空值表示当前没有交叉淡化。 */
+  previousWallpaperUrl: string
 }>()
 
-const canvas = ref<HTMLCanvasElement | null>(null)
-const { state } = useGlassOpticalRenderer({
+const fixedCanvas = ref<HTMLCanvasElement | null>(null)
+const scrollCanvas = ref<HTMLCanvasElement | null>(null)
+const interactionSource = useGlassOpticalInteractionSource()
+const fixedRenderer = useGlassOpticalRenderer({
   active: true,
   appearance: () => props.appearance,
-  canvas,
+  canvas: fixedCanvas,
+  deformationStrength: () => props.deformationStrength,
+  flowStrength: () => props.flowStrength,
+  interactionSource,
   quality: () => props.quality,
+  reflectionStrength: () => props.reflectionStrength,
+  transparencyStrength: () => props.transparencyStrength,
+  translationStrength: () => props.translationStrength,
   routeKey: () => props.routeKey,
   tintColor: () => props.tintColor,
+  transitionDuration: () => props.transitionDuration,
+  transitionStartedAt: () => props.transitionStartedAt,
   wallpaperUrl: () => props.wallpaperUrl,
+  previousWallpaperUrl: () => props.previousWallpaperUrl,
+  surfaceSpace: 'fixed',
+  syncDocumentState: false,
+})
+const scrollRenderer = useGlassOpticalRenderer({
+  active: true,
+  appearance: () => props.appearance,
+  canvas: scrollCanvas,
+  deformationStrength: () => props.deformationStrength,
+  flowStrength: () => props.flowStrength,
+  interactionSource,
+  quality: () => props.quality,
+  reflectionStrength: () => props.reflectionStrength,
+  transparencyStrength: () => props.transparencyStrength,
+  translationStrength: () => props.translationStrength,
+  routeKey: () => props.routeKey,
+  tintColor: () => props.tintColor,
+  transitionDuration: () => props.transitionDuration,
+  transitionStartedAt: () => props.transitionStartedAt,
+  wallpaperUrl: () => props.wallpaperUrl,
+  previousWallpaperUrl: () => props.previousWallpaperUrl,
+  surfaceSpace: 'scroll',
+  syncDocumentState: false,
+})
+
+const rendererState = ref<GlassRendererState>('loading')
+
+/** 两个呈现 context 作为同一材质能力接管 CSS，避免部分就绪时出现混合材质。 */
+watchEffect(() => {
+  const states = [fixedRenderer.state.value, scrollRenderer.state.value]
+  const state: GlassRendererState = states.every(value => value === 'ready')
+    ? 'ready'
+    : states.some(value => value === 'loading')
+      ? 'loading'
+      : 'fallback'
+
+  setGlassRendererState(rendererState, state)
 })
 </script>
 
 <template>
-  <canvas ref="canvas" class="glass-optical-layer" aria-hidden="true" :data-state="state" />
+  <canvas
+    ref="fixedCanvas"
+    class="glass-optical-layer glass-optical-layer--fixed"
+    aria-hidden="true"
+    data-presentation-space="fixed"
+    :data-state="fixedRenderer.state.value"
+  />
+  <canvas
+    ref="scrollCanvas"
+    class="glass-optical-layer glass-optical-layer--scroll"
+    aria-hidden="true"
+    data-presentation-space="scroll"
+    :data-state="scrollRenderer.state.value"
+  />
 </template>

src/components/theme/ThemeCustomizer.vue

@@ -12,6 +12,7 @@ import {
 import { usePWA } from '@/composables/usePWA'
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
+import { GLASS_OPTICAL_STRENGTH_DEFAULT } from '@/utils/glassOptics'
 
 const emit = defineEmits<{
   'close': []
@@ -140,7 +141,12 @@ const hasAppModeCustomization = computed(() => {
   return (
     settings.value.primaryColor !== defaultPrimaryColor ||
     settings.value.glassAppearance !== 'clear' ||
+    settings.value.glassDeformationStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassFlowStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.glassQuality !== 'css' ||
+    settings.value.glassReflectionStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassTranslationStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassTransparencyStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.radius !== 'default' ||
     settings.value.shadow !== '0' ||
     settings.value.skin !== 'default' ||

src/components/theme/__tests__/GlassOpticalLayer.spec.ts

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import GlassOpticalLayer from '@/components/theme/GlassOpticalLayer.vue'
+
+const rendererCalls = vi.hoisted(() => [] as Array<Record<string, unknown>>)
+const interactionSource = vi.hoisted(() => ({ subscribe: vi.fn() }))
+
+vi.mock('@/composables/useGlassOpticalRenderer', () => ({
+  setGlassRendererState: vi.fn((state: { value: string }, value: string) => {
+    state.value = value
+  }),
+  useGlassOpticalInteractionSource: vi.fn(() => interactionSource),
+  useGlassOpticalRenderer: vi.fn((options: Record<string, unknown>) => {
+    rendererCalls.push(options)
+
+    return {
+      renderedFrames: ref(0),
+      state: ref('ready'),
+    }
+  }),
+}))
+
+describe('GlassOpticalLayer', () => {
+  it('uses exactly two visible presentation contexts with one interaction source', () => {
+    rendererCalls.length = 0
+    const wrapper = shallowMount(GlassOpticalLayer, {
+      props: {
+        appearance: 'clear',
+        deformationStrength: 50,
+        flowStrength: 50,
+        previousWallpaperUrl: '',
+        quality: 'balanced',
+        reflectionStrength: 50,
+        routeKey: '/dashboard',
+        tintColor: '#8D51F9',
+        transitionDuration: 1500,
+        transitionStartedAt: 0,
+        translationStrength: 50,
+        transparencyStrength: 50,
+        wallpaperUrl: '/wallpaper.jpg',
+      },
+    })
+
+    const canvases = wrapper.findAll('canvas')
+    expect(canvases).toHaveLength(2)
+    expect(canvases.map(canvas => canvas.attributes('data-presentation-space'))).toEqual(['fixed', 'scroll'])
+    expect(rendererCalls.map(options => options.surfaceSpace)).toEqual(['fixed', 'scroll'])
+    expect(rendererCalls.every(options => options.interactionSource === interactionSource)).toBe(true)
+    expect(rendererCalls.every(options => options.syncDocumentState === false)).toBe(true)
+  })
+})