perf(glass): remove redundant chip backdrop sampling

This commit is contained in:
InfinityPacer
2026-09-07 11:19:07 +08:00
parent 851bcd8c82
commit 35dc1ce742
2 changed files with 21 additions and 11 deletions
@@ -150,6 +150,21 @@ describe('glass overlay material styles', () => {
expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/) expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/)
}) })
it('shares a sampling-free chip material without reducing the main frosted surfaces', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
expect(styles.match(/--glass-chip-backdrop-filter:[^;]+;/gu)).toEqual(['--glass-chip-backdrop-filter: none;'])
expect(styles.match(/--glass-chip-sheen:/gu)).toHaveLength(2)
expect(styles).toContain('linear-gradient(rgba(11, 19, 34, 42%), rgba(11, 19, 34, 42%))')
expect(styles).toContain('--glass-chip-tint-opacity: calc(')
expect(styles).toContain('--glass-sidebar-backdrop-filter: blur(var(--glass-sidebar-diffusion-blur))')
expect(styles).toContain(
'--glass-native-surface-backdrop-filter: blur(calc(10px * var(--glass-frost-blur-scale, 1)))',
)
expect(styles).toContain("url('#glass-navbar-live-refraction-high')")
expect(styles).toContain("url('#glass-navbar-live-refraction-balanced')")
})
it('keeps media source links and episode group cards on glass material tokens', () => { it('keeps media source links and episode group cards on glass material tokens', () => {
const mediaDetail = readFileSync(resolve(cwd(), 'src/views/discover/MediaDetailView.vue'), 'utf8') const mediaDetail = readFileSync(resolve(cwd(), 'src/views/discover/MediaDetailView.vue'), 'utf8')
const mediaSourceRule = mediaDetail.match( const mediaSourceRule = mediaDetail.match(
+6 -11
View File
@@ -67,8 +67,8 @@ html[data-theme='glass'] {
--glass-control-shortcut-background: rgba(255, 255, 255, 8%); --glass-control-shortcut-background: rgba(255, 255, 255, 8%);
--glass-control-shortcut-border: rgba(255, 255, 255, 12%); --glass-control-shortcut-border: rgba(255, 255, 255, 12%);
--glass-control-shortcut-color: rgba(242, 245, 250, 68%); --glass-control-shortcut-color: rgba(242, 245, 250, 68%);
// Chip 面积很小,使用更明显的镜面层与色相透光,避免标签在背景采样中变成灰色 // 小标签由透光底色与镜面高光承载材质,不为每个标签重复采样背景;光学预算留给主要表面
--glass-chip-backdrop-filter: saturate(150%) brightness(var(--glass-transmission-brightness)); --glass-chip-backdrop-filter: none;
--glass-chip-sheen: --glass-chip-sheen:
linear-gradient(135deg, rgba(255, 255, 255, 12%), transparent 38%, rgba(255, 255, 255, 3%) 72%, transparent), linear-gradient(135deg, rgba(255, 255, 255, 12%), transparent 38%, rgba(255, 255, 255, 3%) 72%, transparent),
linear-gradient(rgba(11, 19, 34, 36%), rgba(11, 19, 34, 36%)); linear-gradient(rgba(11, 19, 34, 36%), rgba(11, 19, 34, 36%));
@@ -190,7 +190,6 @@ html[data-theme='glass'] {
--glass-overlay-blur: 0px; --glass-overlay-blur: 0px;
--glass-overlay-saturate: 120%; --glass-overlay-saturate: 120%;
--glass-overlay-scrim: rgba(3, 7, 18, 32%); --glass-overlay-scrim: rgba(3, 7, 18, 32%);
--glass-chip-backdrop-filter: saturate(165%) brightness(var(--glass-transmission-brightness));
} }
// 磨砂材质使用更亮的散射表面,但仍只让高价值层执行实时背景采样。 // 磨砂材质使用更亮的散射表面,但仍只让高价值层执行实时背景采样。
@@ -261,14 +260,10 @@ html[data-theme='glass'] {
--glass-overlay-blur: min(var(--glass-blur-raised), 36px); --glass-overlay-blur: min(var(--glass-blur-raised), 36px);
--glass-overlay-saturate: 135%; --glass-overlay-saturate: 135%;
--glass-overlay-scrim: rgba(3, 7, 18, 36%); --glass-overlay-scrim: rgba(3, 7, 18, 36%);
--glass-chip-backdrop-filter: blur(14px) saturate(175%) brightness(var(--glass-transmission-brightness)); // 高光负责透光感,轻量吸收底面隔开海报细节与标签文字,不重新建立背景滤镜。
--glass-chip-sheen: linear-gradient( --glass-chip-sheen:
135deg, linear-gradient(135deg, rgba(255, 255, 255, 14%), transparent 36%, rgba(255, 255, 255, 5%) 72%, transparent),
rgba(255, 255, 255, 14%), linear-gradient(rgba(11, 19, 34, 42%), rgba(11, 19, 34, 42%));
transparent 36%,
rgba(255, 255, 255, 5%) 72%,
transparent
);
--glass-blur-surface: 40px; --glass-blur-surface: 40px;
--glass-blur: 40px; --glass-blur: 40px;
--glass-blur-raised: 60px; --glass-blur-raised: 60px;