fix: 页头恢复实底,搜索改为独立半透明块
- headerVariant 恢复 solid,去掉 .app > header 透明度 - 新增 top-dock(top 60 / height 88,alpha 0.28 + blur + 底边)承载搜索 - 背景图渐隐恢复 80% - 验证:header 纯白、dock 半透明、搜索可见、无遮罩
This commit is contained in:
+1
-1
@@ -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`。
|
||||
|
||||
@@ -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
@@ -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 {
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user