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;
 }