fix: 去掉顶部遮罩,页头与搜索框改为半透明

- 删除 scroll-fade 遮罩及创建逻辑
- 页头改为 blur 并降到 55% 透明度,搜索框降到 60%
- 背景图渐隐层从 80% 调到 65%,顶部区域保持背景原色
- 验证:fades=0,header alpha=0.55,search alpha=0.60
This commit is contained in:
2026-10-31 16:34:54 +08:00
parent 7a61acfa02
commit a2155a4c89
4 changed files with 21 additions and 40 deletions
+1 -1
View File
@@ -167,7 +167,7 @@ GET /api/backup SQLite 快照附件 需登录
- 当前 `PRAGMA user_version = 22`;`schema::migrate` 逐级升级:0 建全量、15→16→17→18→19→20→21→22、更高版本拒绝启动。
- 格式在 `entry.format`(apps / posters / articles),同组可混合;`node` 的旧 `view_mode` 仅保留兼容,不再决定渲染。
- `settings.sidebar.show_profile / show_service` 控制侧栏两张卡片显隐(默认 true)。
- 首页滚动:`#page-scroll`(Layout 的 body)是唯一滚动容器,搜索框固定在其上方;左右两栏顶部对齐,左侧到底后通过 `translateY` 吸底,右侧继续滚动;滚动条隐藏;顶部是一条横跨侧栏到内容区的固定模糊遮罩,卡片半透明。
- 首页滚动:`#page-scroll`(Layout 的 body)是唯一滚动容器,搜索框固定在其上方;左右两栏顶部对齐,左侧到底后通过 `translateY` 吸底,右侧继续滚动;滚动条隐藏;顶部没有遮罩,页头与搜索框半透明。
- 本地服务是运行时卡片,但 `card` 表里有一行 `local-service` 只用于排序;内容来自 `/api/projects`,后端禁止删除/改名/配置分组。
- `node` 是统一分组树(根节点 `kind='section'`,子节点 `kind='group'` 可多层);`enabled` 控制启停;`icon` 可为空。
- 主要表:`node`、`entry`、`entry_tag`、`section_block`、`admin`、`session`、`setting`、`audit`。
+7
View File
@@ -147,6 +147,13 @@ DELETE /api/items/:id
## 11. 实施记录
### P23(2026-10-31,去掉遮罩、顶部透明)
- 删除 `scroll-fade` 整条遮罩及创建逻辑,页面不再有顶部渐隐/模糊层;
- 页头改为 `headerVariant="blur"`,并用 `.app > header` 把底色降到 55%;搜索框底色降到 60% 并保留轻微 blur;
- 背景图渐隐层高度从 80% 调到 65%,让页头到内容之间那一条保持背景原色,不再发白;
- 验证:`.scroll-fade` 数量为 0;header 背景 alpha=0.55;搜索框 alpha=0.60。
### P22(2026-10-31,遮罩合并为整条)
- 去掉内容区自带的 `.content-veil`,只保留一条固定遮罩;
+12 -20
View File
@@ -27,7 +27,7 @@
right: 0;
bottom: 0;
left: 0;
height: 80%;
height: 65%;
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
}
@@ -149,6 +149,17 @@
box-shadow: var(--su-shadow-card);
}
/* 搜索框半透明,顶部区域透出背景 */
.search-row > *:first-child {
background-color: color-mix(in srgb, var(--su-bg-card) 60%, transparent);
backdrop-filter: blur(10px);
}
/* 首页页头更透明,让背景图透出来 */
.app > header {
background-color: color-mix(in srgb, var(--su-bg-page) 55%, transparent);
}
/* ---------- 两栏骨架 ---------- */
.content {
@@ -1319,25 +1330,6 @@ a.entry-href:hover {
}
/* 侧栏到内容区共用一条滚动虚化遮罩,同一水平高度 */
.scroll-fade {
position: fixed;
z-index: 20;
height: 64px;
pointer-events: none;
opacity: 0;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--su-bg-page) 45%, transparent) 0%,
color-mix(in srgb, var(--su-bg-page) 20%, transparent) 55%,
transparent 100%
);
backdrop-filter: blur(14px) saturate(1.1);
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
}
.scroll-fade.is-visible {
opacity: 1;
}
.sidebar-fade.is-visible {
opacity: 1;
+1 -19
View File
@@ -221,22 +221,6 @@ export default function AppNext() {
const onScroll = () => setScrolled(body.scrollTop > 4)
// 独立渐隐层:固定在滚动区顶部,不随侧栏 transform 移动
const fade = document.createElement('div')
fade.className = 'scroll-fade'
fade.setAttribute('aria-hidden', 'true')
document.body.appendChild(fade)
const updateFade = () => {
if (!(sider instanceof HTMLElement)) return
const siderRect = sider.getBoundingClientRect()
const contentRect = content.getBoundingClientRect()
fade.style.left = `${siderRect.left}px`
fade.style.width = `${Math.max(0, contentRect.right - siderRect.left)}px`
fade.style.top = `${body.getBoundingClientRect().top}px`
fade.classList.toggle('is-visible', body.scrollTop > 4 && siderRect.width > 0)
}
const updateSticky = () => {
const viewport = body.clientHeight
const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
@@ -244,7 +228,6 @@ export default function AppNext() {
if (sider instanceof HTMLElement) {
sider.style.transform = offset > 0 ? `translateY(${offset}px)` : ''
}
updateFade()
}
body.addEventListener('scroll', onScroll, { passive: true })
@@ -261,7 +244,6 @@ export default function AppNext() {
body.removeEventListener('scroll', updateSticky)
window.removeEventListener('resize', updateSticky)
observer.disconnect()
fade.remove()
body.id = ''
body.style.overflowY = ''
body.style.overflowX = ''
@@ -618,7 +600,7 @@ export default function AppNext() {
siderWidth={240}
gap={20}
headerHeight={60}
headerVariant="solid"
headerVariant="blur"
siderBordered={false}
contentPadding="none"
contentOffset={88}