From a2155a4c89d1203d375dfd0545da04461bd936cc Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sat, 31 Oct 2026 16:34:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E9=81=AE=E7=BD=A9=EF=BC=8C=E9=A1=B5=E5=A4=B4=E4=B8=8E=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A1=86=E6=94=B9=E4=B8=BA=E5=8D=8A=E9=80=8F=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除 scroll-fade 遮罩及创建逻辑
- 页头改为 blur 并降到 55% 透明度，搜索框降到 60%
- 背景图渐隐层从 80% 调到 65%，顶部区域保持背景原色
- 验证：fades=0，header alpha=0.55，search alpha=0.60
---
 HANDOFF.md                |  2 +-
 docs/ADMIN-PLAN.md        |  7 +++++++
 stash-web/src/App.css     | 32 ++++++++++++--------------------
 stash-web/src/AppNext.tsx | 20 +-------------------
 4 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/HANDOFF.md b/HANDOFF.md
index c60c34b..a3738c6 100644
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -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`。
diff --git a/docs/ADMIN-PLAN.md b/docs/ADMIN-PLAN.md
index 87505bf..9c936d4 100644
--- a/docs/ADMIN-PLAN.md
+++ b/docs/ADMIN-PLAN.md
@@ -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`，只保留一条固定遮罩；
diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index d368016..a5edd02 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -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;
diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx
index 8399304..0850f8a 100644
--- a/stash-web/src/AppNext.tsx
+++ b/stash-web/src/AppNext.tsx
@@ -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}