feat(glass): unify login and app optical presentation (#591)

src/components/theme/GlassOpticalLayer.vue

@@ -20,6 +20,8 @@ const props = defineProps<{
   reflectionStrength: number
   /** 用户选择的真实壁纸可见度。 */
   transparencyStrength: number
+  /** 玻璃内部壁纸采样的透射亮度；不会改变外层壁纸的曝光合同。 */
+  transmissionStrength: number
   /** 用户选择的共享壁纸采样平移强度。 */
   translationStrength: number
   /** 路由变化标识，用于在页面内容稳定后重新发现高价值表面。 */
@@ -34,6 +36,12 @@ const props = defineProps<{
   wallpaperUrl: string
   /** 切换期保留的上一张壁纸；空值表示当前没有交叉淡化。 */
   previousWallpaperUrl: string
+  /** 下一张同源壁纸；两个 context 均完成上传后才允许外层提交切换。 */
+  pendingWallpaperUrl?: string
+}>()
+const emit = defineEmits<{
+  /** fixed 与 scroll renderer 均已准备同一张待切换纹理。 */
+  wallpaperPrepared: [url: string]
 }>()
 
 const fixedCanvas = ref<HTMLCanvasElement | null>(null)
@@ -49,6 +57,7 @@ const fixedRenderer = useGlassOpticalRenderer({
   quality: () => props.quality,
   reflectionStrength: () => props.reflectionStrength,
   transparencyStrength: () => props.transparencyStrength,
+  transmissionStrength: () => props.transmissionStrength,
   translationStrength: () => props.translationStrength,
   routeKey: () => props.routeKey,
   tintColor: () => props.tintColor,
@@ -56,6 +65,7 @@ const fixedRenderer = useGlassOpticalRenderer({
   transitionStartedAt: () => props.transitionStartedAt,
   wallpaperUrl: () => props.wallpaperUrl,
   previousWallpaperUrl: () => props.previousWallpaperUrl,
+  pendingWallpaperUrl: () => props.pendingWallpaperUrl ?? '',
   surfaceSpace: 'fixed',
   syncDocumentState: false,
 })
@@ -69,6 +79,7 @@ const scrollRenderer = useGlassOpticalRenderer({
   quality: () => props.quality,
   reflectionStrength: () => props.reflectionStrength,
   transparencyStrength: () => props.transparencyStrength,
+  transmissionStrength: () => props.transmissionStrength,
   translationStrength: () => props.translationStrength,
   routeKey: () => props.routeKey,
   tintColor: () => props.tintColor,
@@ -76,6 +87,7 @@ const scrollRenderer = useGlassOpticalRenderer({
   transitionStartedAt: () => props.transitionStartedAt,
   wallpaperUrl: () => props.wallpaperUrl,
   previousWallpaperUrl: () => props.previousWallpaperUrl,
+  pendingWallpaperUrl: () => props.pendingWallpaperUrl ?? '',
   surfaceSpace: 'scroll',
   syncDocumentState: false,
 })
@@ -94,6 +106,13 @@ watchEffect(() => {
   setGlassRendererState(rendererState, state)
 })
 
+watchEffect(() => {
+  const url = props.pendingWallpaperUrl
+  if (url && fixedRenderer.preparedWallpaperUrl.value === url && scrollRenderer.preparedWallpaperUrl.value === url) {
+    emit('wallpaperPrepared', url)
+  }
+})
+
 onScopeDispose(() => {
   setGlassRendererState(rendererState, 'fallback')
 })

src/components/theme/ThemeCustomizer.vue

@@ -12,7 +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'
+import { GLASS_OPTICAL_STRENGTH_DEFAULT, getGlassOpticalPresetParameters } from '@/utils/glassOptics'
 
 const emit = defineEmits<{
   'close': []
@@ -38,6 +38,7 @@ const { appMode } = usePWA()
 const { t } = useI18n()
 const { global: globalTheme } = useTheme()
 const defaultPrimaryColor = themeCustomizerPrimaryColors[0].value
+const defaultGlassTransmissionStrength = getGlassOpticalPresetParameters('clear', 'balanced', 'natural').transmission
 
 // 将主题定制器打开状态同步到根节点，供全局悬浮按钮避让右侧面板。
 function syncThemeCustomizerOpenState(isOpen: boolean) {
@@ -145,6 +146,7 @@ const hasAppModeCustomization = computed(() => {
     settings.value.glassFlowStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.glassQuality !== 'css' ||
     settings.value.glassReflectionStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassTransmissionStrength !== defaultGlassTransmissionStrength ||
     settings.value.glassTranslationStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.glassTransparencyStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.radius !== 'default' ||

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

@@ -40,6 +40,7 @@ describe('GlassOpticalLayer', () => {
         tintColor: '#8D51F9',
         transitionDuration: 1500,
         transitionStartedAt: 0,
+        transmissionStrength: 84,
         translationStrength: 50,
         transparencyStrength: 50,
         wallpaperUrl: '/wallpaper.jpg',