hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sns): keep header area always visible

Browse Source
This commit is contained in:
tisonhuang
2026-03-02 13:49:16 +08:00
parent b5507b9f5d
commit 89f0758fbb
2 changed files with 83 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/SnsPage.scss
View File

@@ -23,7 +23,7 @@
========================================= */ ========================================= */
.sns-main-viewport { .sns-main-viewport {
flex: 1; flex: 1;
overflow-y: scroll; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -35,7 +35,9 @@
padding: 20px 24px 60px 24px; padding: 20px 24px 60px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 0;
min-height: 0;
height: 100%;
} }
.feed-header { .feed-header {
@@ -44,9 +46,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0 4px; padding: 0 4px;
position: sticky; z-index: 2;
top: 0;
z-index: 20;
background: var(--sns-bg-color); background: var(--sns-bg-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding-top: 10px; padding-top: 10px;
@@ -109,6 +109,13 @@
} }
} }
.sns-posts-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-top: 16px;
}
.posts-list { .posts-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

140
src/pages/SnsPage.tsx
View File

@@ -360,7 +360,7 @@ export default function SnsPage() {
return ( return (
<div className="sns-page-layout"> <div className="sns-page-layout">
<div className="sns-main-viewport" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}> <div className="sns-main-viewport">
<div className="sns-feed-container"> <div className="sns-feed-container">
<div className="feed-header"> <div className="feed-header">
<div className="feed-header-main"> <div className="feed-header-main">
@@ -417,78 +417,80 @@ export default function SnsPage() {
</div> </div>
</div> </div>
{loadingNewer && ( <div className="sns-posts-scroll" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
<div className="status-indicator loading-newer"> {loadingNewer && (
<RefreshCw size={16} className="spinning" /> <div className="status-indicator loading-newer">
<span>正在检查更新的动态...</span> <RefreshCw size={16} className="spinning" />
</div> <span>正在检查更新的动态...</span>
)}
{!loadingNewer && hasNewer && (
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
有新动态，点击查看
</div>
)}
<div className="posts-list">
{posts.map(post => (
<SnsPostItem
key={post.id}
post={{ ...post, isProtected: triggerInstalled === true }}
onPreview={(src, isVideo, liveVideoPath) => {
if (isVideo) {
void window.electronAPI.window.openVideoPlayerWindow(src)
} else {
void window.electronAPI.window.openImageViewerWindow(src, liveVideoPath || undefined)
}
}}
onDebug={(p) => setDebugPost(p)}
onDelete={(postId) => {
setPosts(prev => prev.filter(p => p.id !== postId))
loadOverviewStats()
}}
/>
))}
</div>
{loading && posts.length === 0 && (
<div className="initial-loading">
<div className="loading-pulse">
<div className="pulse-circle"></div>
<span>正在加载朋友圈...</span>
</div> </div>
</div> )}
)}
{loading && posts.length > 0 && ( {!loadingNewer && hasNewer && (
<div className="status-indicator loading-more"> <div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
<RefreshCw size={16} className="spinning" /> 有新动态，点击查看
<span>正在加载更多...</span> </div>
</div> )}
)}
{!hasMore && posts.length > 0 && ( <div className="posts-list">
<div className="status-indicator no-more">{ {posts.map(post => (
selectedUsernames.length === 1 && <SnsPostItem
contacts.find(c => c.username === selectedUsernames[0])?.type === 'former_friend' key={post.id}
? '在时间的长河里刻舟求剑' post={{ ...post, isProtected: triggerInstalled === true }}
: '或许过往已无可溯洄，但好在还有可以与你相遇的明天' onPreview={(src, isVideo, liveVideoPath) => {
}</div> if (isVideo) {
)} void window.electronAPI.window.openVideoPlayerWindow(src)
} else {
{!loading && posts.length === 0 && ( void window.electronAPI.window.openImageViewerWindow(src, liveVideoPath || undefined)
<div className="no-results"> }
<div className="no-results-icon"><Search size={48} /></div> }}
<p>未找到相关动态</p> onDebug={(p) => setDebugPost(p)}
{(selectedUsernames.length > 0 || searchKeyword || jumpTargetDate) && ( onDelete={(postId) => {
<button onClick={() => { setPosts(prev => prev.filter(p => p.id !== postId))
setSearchKeyword(''); setSelectedUsernames([]); setJumpTargetDate(undefined); loadOverviewStats()
}} className="reset-inline"> }}
重置筛选条件 />
</button> ))}
)}
</div> </div>
)}
{loading && posts.length === 0 && (
<div className="initial-loading">
<div className="loading-pulse">
<div className="pulse-circle"></div>
<span>正在加载朋友圈...</span>
</div>
</div>
)}
{loading && posts.length > 0 && (
<div className="status-indicator loading-more">
<RefreshCw size={16} className="spinning" />
<span>正在加载更多...</span>
</div>
)}
{!hasMore && posts.length > 0 && (
<div className="status-indicator no-more">{
selectedUsernames.length === 1 &&
contacts.find(c => c.username === selectedUsernames[0])?.type === 'former_friend'
? '在时间的长河里刻舟求剑'
: '或许过往已无可溯洄，但好在还有可以与你相遇的明天'
}</div>
)}
{!loading && posts.length === 0 && (
<div className="no-results">
<div className="no-results-icon"><Search size={48} /></div>
<p>未找到相关动态</p>
{(selectedUsernames.length > 0 || searchKeyword || jumpTargetDate) && (
<button onClick={() => {
setSearchKeyword(''); setSelectedUsernames([]); setJumpTargetDate(undefined);
}} className="reset-inline">
重置筛选条件
</button>
)}
</div>
)}
</div>
</div> </div>
</div> </div>