freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

fix(frontend): 聊天页单屏布局并消除 F5 滚底闪烁

Browse Source 
锁定视口避免双滚动；消息列表改用 flex-col-reverse，SSR/无 JS 默认贴最新消息。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
姜十三
2026-09-16 00:50:16 +08:00
parent a138f428e1
commit e6f8fadbe5
6 changed files with 83 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/chat/ChatShell.tsx
View File

@@ -290,10 +290,8 @@ export default function ChatShell({
return (
<div
className="panel overflow-hidden grid grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)]"
className="panel overflow-hidden grid grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)] flex-1 min-h-0"
style={{
height: "calc(100vh - 8.5rem)",
minHeight: "480px",
borderColor: "var(--line)",
}}
>

30
frontend/app/chat/[id]/ChatRoomClient.tsx
View File

@@ -382,8 +382,9 @@ export default function ChatRoomClient({
const scrollToBottom = useCallback((smooth = false) => {
const el = listRef.current;
if (!el) return;
// column-reverse：scrollTop=0 即视觉底部（最新消息）
el.scrollTo({
top: el.scrollHeight,
top: 0,
behavior: smooth ? "smooth" : "auto",
});
}, []);
@@ -412,7 +413,7 @@ export default function ChatRoomClient({
if (!canView) return;
realtime.joinRoom(roomId);
void refreshMembers();
requestAnimationFrame(() => scrollToBottom(false));
// 列表用 flex-col-reverse，SSR/无 JS 默认即贴底，无需首屏 scrollToBottom（避免 F5 闪一下）
markReadToLatest();
return () => {
realtime.leaveRoom(roomId);
@@ -431,9 +432,8 @@ export default function ChatRoomClient({
requestAnimationFrame(() => {
const el = listRef.current;
if (!el) return;
const nearBottom =
el.scrollHeight - el.scrollTop - el.clientHeight < 120;
if (nearBottom) {
// column-reverse：靠近 scrollTop=0 即贴底
if (el.scrollTop < 120) {
scrollToBottom(true);
markReadToLatest();
}
@@ -499,7 +499,9 @@ export default function ChatRoomClient({
const loadMore = useCallback(async () => {
if (!canView || !hasMore || loadingMore || messages.length === 0) return;
setLoadingMore(true);
const prevHeight = listRef.current?.scrollHeight ?? 0;
const el0 = listRef.current;
const prevHeight = el0?.scrollHeight ?? 0;
const prevTop = el0?.scrollTop ?? 0;
try {
const before = messages[0].id;
const res = await apiListChatMessages(roomId, before, 30);
@@ -509,7 +511,8 @@ export default function ChatRoomClient({
requestAnimationFrame(() => {
const el = listRef.current;
if (!el) return;
el.scrollTop = el.scrollHeight - prevHeight;
// column-reverse：历史插在上方，用高度差补偿保持视口锚点
el.scrollTop = prevTop + (el.scrollHeight - prevHeight);
});
} else {
setHasMore(false);
@@ -524,10 +527,11 @@ export default function ChatRoomClient({
const handleScroll = useCallback(() => {
const el = listRef.current;
if (!el) return;
if (el.scrollTop < 60) {
// column-reverse：滚向上方历史 ≈ 接近 max scrollTop
if (el.scrollHeight - el.scrollTop - el.clientHeight < 60) {
loadMore();
}
if (el.scrollHeight - el.scrollTop - el.clientHeight < 60) {
if (el.scrollTop < 60) {
markReadToLatest();
}
}, [loadMore, markReadToLatest]);
@@ -934,7 +938,7 @@ export default function ChatRoomClient({
style={
embedded
? undefined
: { height: "calc(100vh - 12rem)", minHeight: "420px" }
: { height: "100%", minHeight: 0 }
}
>
<div
@@ -1047,7 +1051,7 @@ export default function ChatRoomClient({
<div
ref={listRef}
onScroll={handleScroll}
className="flex-1 overflow-y-auto px-4 sm:px-5 py-4"
className="flex-1 overflow-y-auto flex flex-col-reverse px-4 sm:px-5 py-4"
style={{ minHeight: 0 }}
>
{!canView ? (
@@ -1062,7 +1066,7 @@ export default function ChatRoomClient({
</p>
</div>
) : (
<>
<div className="flex flex-col gap-3">
{hasMore && (
<button
onClick={loadMore}
@@ -1072,7 +1076,6 @@ export default function ChatRoomClient({
{loadingMore ? "加载中..." : "加载更早消息"}
</button>
)}
<div className="flex flex-col gap-3">
{messages.length === 0 ? (
<div className="text-center py-12">
<p className="meta" style={{ color: "var(--ink-3)" }}>
@@ -1295,7 +1298,6 @@ export default function ChatRoomClient({
})
)}
</div>
</>
)}
</div>

2
frontend/app/chat/[id]/page.tsx
View File

@@ -66,7 +66,6 @@ export default async function ChatRoomPage({ params }: PageProps) {
: room.name;
return (
<div className="max-w-6xl mx-auto">
<ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={room.id}>
<ChatRoomClient
roomId={room.id}
@@ -89,6 +88,5 @@ export default async function ChatRoomPage({ params }: PageProps) {
embedded
/>
</ChatShell>
</div>
);
}

14
frontend/app/chat/layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
/**
* 聊天路由布局：标记 data-chat-viewport，配合 globals.css
* 将页面锁在一屏内（隐藏页脚、收紧 main 内边距），仅对话区滚动。
*/
export default function ChatLayout({ children }: { children: React.ReactNode }) {
return (
<div
data-chat-viewport
className="flex flex-col flex-1 min-h-0 w-full max-w-6xl mx-auto"
>
{children}
</div>
);
}

2
frontend/app/chat/page.tsx
View File

@@ -27,8 +27,6 @@ export default async function ChatListPage() {
}
return (
<div className="max-w-6xl mx-auto">
<ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={null} />
</div>
);
}

20
frontend/app/globals.css
View File

@@ -113,6 +113,26 @@ body {
text-rendering: optimizeLegibility;
}
/* 聊天页：整页锁在视口内，避免「页面滚动 + 对话区滚动」双滚动条 */
body:has([data-chat-viewport]) {
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
}
body:has([data-chat-viewport]) > footer {
display: none;
}
body:has([data-chat-viewport]) #main {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
/* 覆盖 root layout 的 py-7/sm:py-9，只留紧凑间距 */
padding-top: 0.75rem;
padding-bottom: 0.75rem;
overflow: hidden;
}
::selection {
background: var(--accent);
color: var(--accent-on);