From f456829d167d64aea8e847af7bef662bf935a7cd Mon Sep 17 00:00:00 2001
From: stash <stash@local>
Date: Thu, 29 Oct 2026 11:33:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=B8=90=E9=9A=90=E6=81=A2=E5=A4=8D=EF=BC=88?=
 =?UTF-8?q?content-veil=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 滚动后用 sticky 遮罩在内容顶端做 32px 渐变，避免卡片/标题被硬切
- 未滚动时 opacity 0，滚动阈值沿用 scrolled 状态（>4px）
- 尊重 reduced-motion
---
 stash-web/src/App.css | 23 +++++++++++++++++++++++
 stash-web/src/App.tsx |  3 +++
 2 files changed, 26 insertions(+)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index fcdbe53..4bf5a1e 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -159,6 +159,29 @@
   padding-bottom: var(--su-space-10);
 }
 
+/* 顶部渐隐：sticky 固定在滚动区顶端，内容从下面淡出而不是被硬切 */
+.content-veil {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  height: 32px;
+  margin-bottom: -32px;
+  pointer-events: none;
+  opacity: 0;
+  background: linear-gradient(to bottom, var(--su-bg-page) 0%, transparent 100%);
+  transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
+}
+
+.content-veil.is-visible {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .content-veil {
+    transition: none;
+  }
+}
+
 .sidebar {
   display: flex;
   flex-direction: column;
diff --git a/stash-web/src/App.tsx b/stash-web/src/App.tsx
index eea80d0..60a19c7 100644
--- a/stash-web/src/App.tsx
+++ b/stash-web/src/App.tsx
@@ -289,6 +289,9 @@ export default function App() {
         }
       >
         <div className="content">
+          {/* 滚动后淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
+          <div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
+
           <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
 
           <h1 className="sr-only">Stash 本地应用工作区</h1>