style: 修复侧栏分类圆角,顶部增加软虚化

- nav-card 补 12px 圆角与 overflow hidden
- 搜索框 50% 透明 + blur(14px)
- 新增 top-blur:blur(8px) + 上下 mask 渐隐,覆盖搜索与内容顶部,不出现硬线
- 验证:nav 圆角 12、搜索可点、虚化生效
This commit is contained in:
2026-10-31 17:03:20 +08:00
parent 2a344ae534
commit 762de4a4e1
4 changed files with 48 additions and 3 deletions
+8
View File
@@ -223,6 +223,13 @@ export default function AppNext() {
const onScroll = () => setScrolled(body.scrollTop > 4)
// 顶部软虚化层:覆盖搜索区域与内容顶部,边缘用 mask 渐隐,避免硬分割线
const blur = document.createElement('div')
blur.className = 'top-blur'
blur.setAttribute('aria-hidden', 'true')
const appRoot = document.querySelector('.app')
appRoot?.appendChild(blur)
const updateSticky = () => {
const viewport = body.clientHeight
const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
@@ -246,6 +253,7 @@ export default function AppNext() {
body.removeEventListener('scroll', updateSticky)
window.removeEventListener('resize', updateSticky)
observer.disconnect()
blur.remove()
body.id = ''
body.style.overflowY = ''
body.style.overflowX = ''