fix(glass): stabilize fixed shell and initial frosted material (#606)

src/components/theme/GlassFixedShellBackplate.vue

@@ -81,7 +81,6 @@ const transitionStyle = computed(() => ({
     var(--glass-fixed-shell-nav-inline-size) 100%,
     0 100%
   );
-  transition: clip-path 0.25s ease-in-out;
 }
 
 .layout-wrapper.layout-vertical-nav-collapsed > .glass-fixed-shell-backplate--main {

src/styles/__tests__/glassOverlayMaterial.spec.ts

@@ -46,6 +46,15 @@ describe('glass overlay material styles', () => {
     expect(backplate).toContain('var(--glass-fixed-shell-nav-inline-size) 100%')
     expect(backplate).toContain('.layout-wrapper:is(.layout-horizontal-nav-active, .layout-overlay-nav)')
     expect(backplate).toContain('.glass-fixed-shell-backplate--overlay-nav')
+    const mainBackplateRule = backplate.match(/\.glass-fixed-shell-backplate--main\s*\{(?<declarations>[\s\S]*?)\n\}/u)
+      ?.groups?.declarations
+    const overlayBackplateRule = backplate.match(
+      /\.glass-fixed-shell-backplate--overlay-nav\s*\{(?<declarations>[\s\S]*?)\n\}/u,
+    )?.groups?.declarations
+
+    expect(mainBackplateRule).toBeDefined()
+    expect(mainBackplateRule).not.toMatch(/transition:\s*clip-path/u)
+    expect(overlayBackplateRule).toMatch(/transition:\s*clip-path 0\.25s ease-in-out/u)
     expect(styles).toMatch(/\.layout-vertical-nav \.ps__rail-y\s*\{[\s\S]*?inset-inline-end:\s*0\.5rem !important;/)
   })
 
@@ -85,10 +94,24 @@ describe('glass overlay material styles', () => {
 
   it('keeps the native scroll backplate stable while suspending only GPU dynamics', () => {
     const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
+    const balancedRuleStart = styles.indexOf("html[data-glass-appearance='frosted'][data-glass-quality='balanced'] {")
+    const balancedRuleEnd = styles.indexOf('\n}', balancedRuleStart)
+    const balancedRule = styles.slice(balancedRuleStart, balancedRuleEnd)
+    const highRuleStart = styles.indexOf("html[data-glass-appearance='frosted'][data-glass-quality='high'] {")
+    const highRuleEnd = styles.indexOf('\n}', highRuleStart)
+    const highRule = styles.slice(highRuleStart, highRuleEnd)
 
     expect(styles).toContain('--glass-native-surface-backdrop-filter')
-    expect(styles).toContain('blur(calc(16px * var(--glass-frost-blur-scale, 1))) saturate(162%)')
+    expect(balancedRuleStart).toBeGreaterThanOrEqual(0)
-    expect(styles).toContain('blur(calc(10px * var(--glass-frost-blur-scale, 1))) saturate(154%)')
+    expect(balancedRuleEnd).toBeGreaterThan(balancedRuleStart)
+    expect(balancedRule).toContain('blur(calc(16px * var(--glass-frost-blur-scale, 1))) saturate(162%)')
+    expect(balancedRule).toContain('--glass-dashboard-backdrop-filter: var(--glass-native-surface-backdrop-filter)')
+    expect(balancedRule).not.toContain('data-glass-renderer-state')
+    expect(highRuleStart).toBeGreaterThanOrEqual(0)
+    expect(highRuleEnd).toBeGreaterThan(highRuleStart)
+    expect(highRule).toContain('blur(calc(10px * var(--glass-frost-blur-scale, 1))) saturate(154%)')
+    expect(highRule).toContain('--glass-dashboard-backdrop-filter: var(--glass-native-surface-backdrop-filter)')
+    expect(highRule).not.toContain('data-glass-renderer-state')
     expect(styles).toMatch(
       /\[data-glass-appearance='frosted'\][\s\S]*?\[data-glass-renderer-state='ready'\]\s*\{[\s\S]*?--glass-surface-backdrop-filter:\s*var\(--glass-native-surface-backdrop-filter\);/,
     )

src/styles/themes/glass.scss

@@ -1275,13 +1275,15 @@ html:is([data-glass-quality='balanced'], [data-glass-quality='high'])[data-glass
   }
 }
 
-// 实时档缩小原生磨砂核；通透度继续通过 frost scale 控制纹理保留程度。
+// 质量档从首帧起固定原生磨砂核；renderer 就绪只叠加光学层，不再切换静态材质密度。
-html[data-glass-appearance='frosted'][data-glass-quality='balanced'][data-glass-renderer-state='ready'] {
+html[data-glass-appearance='frosted'][data-glass-quality='balanced'] {
+  --glass-dashboard-backdrop-filter: var(--glass-native-surface-backdrop-filter);
   --glass-native-surface-backdrop-filter: blur(calc(16px * var(--glass-frost-blur-scale, 1))) saturate(162%)
     brightness(var(--glass-transmission-brightness));
 }
 
-html[data-glass-appearance='frosted'][data-glass-quality='high'][data-glass-renderer-state='ready'] {
+html[data-glass-appearance='frosted'][data-glass-quality='high'] {
+  --glass-dashboard-backdrop-filter: var(--glass-native-surface-backdrop-filter);
   --glass-native-surface-backdrop-filter: blur(calc(10px * var(--glass-frost-blur-scale, 1))) saturate(154%)
     brightness(var(--glass-transmission-brightness));
 }