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

锁定视口避免双滚动；消息列表改用 flex-col-reverse，SSR/无 JS 默认贴最新消息。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-16 00:50:16 +08:00
parent a138f428e1
commit e6f8fadbe5
6 changed files with 83 additions and 53 deletions
--- a/frontend/app/chat/ChatShell.tsx
+++ b/frontend/app/chat/ChatShell.tsx
@@ -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)",
      }}
    >
--- a/frontend/app/chat/[id]/ChatRoomClient.tsx
+++ b/frontend/app/chat/[id]/ChatRoomClient.tsx
@@ -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,15 +1076,14 @@ 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)" }}>
-                      还没有消息，发第一条吧
-                    </p>
-                  </div>
-                ) : (
-                  messages.map((m, i) => {
+              {messages.length === 0 ? (
+                <div className="text-center py-12">
+                  <p className="meta" style={{ color: "var(--ink-3)" }}>
+                    还没有消息，发第一条吧
+                  </p>
+                </div>
+              ) : (
+                messages.map((m, i) => {
                    const recalled = !!m.recalled_at;
                    const mine = m.sender_id === meId;
                    const prev = messages[i - 1];
@@ -1294,8 +1297,7 @@ export default function ChatRoomClient({
                );
                  })
                )}
-              </div>
-            </>
+            </div>
          )}
        </div>

--- a/frontend/app/chat/[id]/page.tsx
+++ b/frontend/app/chat/[id]/page.tsx
@@ -66,29 +66,27 @@ 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}
-          roomName={displayName}
-          roomDescription={room.description}
-          ownerId={room.owner_id}
-          memberCount={room.member_count}
-          myRole={room.my_role}
-          joined={room.joined}
-          isPrivate={room.is_private}
-          isDefault={room.is_default}
-          roomType={room.room_type || "group"}
-          peer={room.peer || null}
-          meId={me.user.id}
-          meRole={me.user.role}
-          meName={me.user.nickname || me.user.username}
-          meAvatar={me.user.avatar || ""}
-          initialMessages={initialMessages.messages}
-          initialHasMore={initialMessages.has_more}
-          embedded
-        />
-      </ChatShell>
-    </div>
+    <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={room.id}>
+      <ChatRoomClient
+        roomId={room.id}
+        roomName={displayName}
+        roomDescription={room.description}
+        ownerId={room.owner_id}
+        memberCount={room.member_count}
+        myRole={room.my_role}
+        joined={room.joined}
+        isPrivate={room.is_private}
+        isDefault={room.is_default}
+        roomType={room.room_type || "group"}
+        peer={room.peer || null}
+        meId={me.user.id}
+        meRole={me.user.role}
+        meName={me.user.nickname || me.user.username}
+        meAvatar={me.user.avatar || ""}
+        initialMessages={initialMessages.messages}
+        initialHasMore={initialMessages.has_more}
+        embedded
+      />
+    </ChatShell>
  );
 }
--- a/frontend/app/chat/layout.tsx
+++ b/frontend/app/chat/layout.tsx
@@ -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>
+  );
+}
--- a/frontend/app/chat/page.tsx
+++ b/frontend/app/chat/page.tsx
@@ -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>
+    <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={null} />
  );
 }
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -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);