iye
3f5d33c422
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 7m27s
Two adjacent backdrop-filter elements (nav at y=0-80, filter at y=80+) always show a visible seam at their boundary because each filter clips its own blur kernel, so the edge pixels sample slightly different neighborhoods. Same recipe doesn't help — it's a structural issue. Fix: when filter is stuck, render an absolutely-positioned glass child inside the filter that extends from -top-20 to bottom-0 (i.e. covers nav area + filter area as ONE element). Nav reads filterStuck from a tiny shared zustand UI store and disables its own glass layer in that state, so only the shared band is visible. Single element, single backdrop-filter, no seam. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
19 lines
585 B
TypeScript
19 lines
585 B
TypeScript
import { create } from "zustand";
|
|
|
|
/**
|
|
* 跨组件 UI 协调状态。
|
|
* 主要用途:首页筛选条吸顶时通知导航关掉自己的玻璃,
|
|
* 让筛选条把玻璃从 y=0 一路延伸到自己底部,形成单一连续 backdrop-filter,
|
|
* 消除两块独立玻璃在 y=80 处的接缝。
|
|
*/
|
|
interface UIStore {
|
|
/** 当前页面有 sticky 筛选条且已经吸顶 */
|
|
filterStuck: boolean;
|
|
setFilterStuck: (stuck: boolean) => void;
|
|
}
|
|
|
|
export const useUIStore = create<UIStore>((set) => ({
|
|
filterStuck: false,
|
|
setFilterStuck: (stuck) => set({ filterStuck: stuck }),
|
|
}));
|