fix: 页头恢复实底,搜索改为独立半透明块

- headerVariant 恢复 solid,去掉 .app > header 透明度
- 新增 top-dock(top 60 / height 88,alpha 0.28 + blur + 底边)承载搜索
- 背景图渐隐恢复 80%
- 验证:header 纯白、dock 半透明、搜索可见、无遮罩
This commit is contained in:
2026-10-31 16:41:50 +08:00
parent a2155a4c89
commit e13c2b2ce6
4 changed files with 26 additions and 8 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` 吸底,右侧继续滚动;滚动条隐藏;页头实底,搜索位于独立的 28% 半透明 top-dock 块中。
- 本地服务是运行时卡片,但 `card` 表里有一行 `local-service` 只用于排序;内容来自 `/api/projects`,后端禁止删除/改名/配置分组。
- `node` 是统一分组树(根节点 `kind='section'`,子节点 `kind='group'` 可多层);`enabled` 控制启停;`icon` 可为空。
- 主要表:`node`、`entry`、`entry_tag`、`section_block`、`admin`、`session`、`setting`、`audit`。
+8
View File
@@ -147,6 +147,14 @@ DELETE /api/items/:id
## 11. 实施记录
### P24(2026-10-31,独立的半透明顶部块)
- 页头恢复实底(`headerVariant="solid"`),去掉 `.app > header` 的透明度覆盖;
- 页头下方新增独立 `.top-dock`:`position: fixed; top:60px; height:88px`,背景 28% 页面色 + `blur(10px)` + 半透明底边,作为承载搜索框的单独块,而不是让整条看起来像背景填充;
- 搜索框保持 60% 半透明;
- 背景图渐隐层恢复 80%(撤掉上一轮为露出背景做的 65%);
- 验证:dock top=60、height=88、alpha=0.28;header 纯白;搜索框可见;无 mask 元素。
### P23(2026-10-31,去掉遮罩、顶部透明)
- 删除 `scroll-fade` 整条遮罩及创建逻辑,页面不再有顶部渐隐/模糊层;
+15 -6
View File
@@ -27,7 +27,7 @@
right: 0;
bottom: 0;
left: 0;
height: 65%;
height: 80%;
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
}
@@ -149,17 +149,26 @@
box-shadow: var(--su-shadow-card);
}
/* 页头下方独立的一条顶部块:承载搜索框,半透明 */
.top-dock {
position: fixed;
top: 60px;
right: 0;
left: 0;
z-index: 0;
height: 88px;
pointer-events: none;
background-color: color-mix(in srgb, var(--su-bg-page) 28%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--su-border) 35%, transparent);
}
/* 搜索框半透明,顶部区域透出背景 */
.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 {
+2 -1
View File
@@ -592,6 +592,7 @@ export default function AppNext() {
/>
<div className="site-background" aria-hidden="true" />
<div className="top-dock" aria-hidden="true" />
<Layout
contained
@@ -600,7 +601,7 @@ export default function AppNext() {
siderWidth={240}
gap={20}
headerHeight={60}
headerVariant="blur"
headerVariant="solid"
siderBordered={false}
contentPadding="none"
contentOffset={88}