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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

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)",
       }}
     >

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 =
+        // column-reverse：靠近 scrollTop=0 即贴底
-          el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+        if (el.scrollTop < 120) {
-        if (nearBottom) {
           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 ? (
-                {messages.length === 0 ? (
+                <div className="text-center py-12">
-                  <div className="text-center py-12">
+                  <p className="meta" style={{ color: "var(--ink-3)" }}>
-                    <p className="meta" style={{ color: "var(--ink-3)" }}>
+                    还没有消息，发第一条吧
-                      还没有消息，发第一条吧
+                  </p>
-                    </p>
+                </div>
-                  </div>
+              ) : (
-                ) : (
+                messages.map((m, i) => {
-                  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>
 

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}>
-      <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={room.id}>
+      <ChatRoomClient
-        <ChatRoomClient
+        roomId={room.id}
-          roomId={room.id}
+        roomName={displayName}
-          roomName={displayName}
+        roomDescription={room.description}
-          roomDescription={room.description}
+        ownerId={room.owner_id}
-          ownerId={room.owner_id}
+        memberCount={room.member_count}
-          memberCount={room.member_count}
+        myRole={room.my_role}
-          myRole={room.my_role}
+        joined={room.joined}
-          joined={room.joined}
+        isPrivate={room.is_private}
-          isPrivate={room.is_private}
+        isDefault={room.is_default}
-          isDefault={room.is_default}
+        roomType={room.room_type || "group"}
-          roomType={room.room_type || "group"}
+        peer={room.peer || null}
-          peer={room.peer || null}
+        meId={me.user.id}
-          meId={me.user.id}
+        meRole={me.user.role}
-          meRole={me.user.role}
+        meName={me.user.nickname || me.user.username}
-          meName={me.user.nickname || me.user.username}
+        meAvatar={me.user.avatar || ""}
-          meAvatar={me.user.avatar || ""}
+        initialMessages={initialMessages.messages}
-          initialMessages={initialMessages.messages}
+        initialHasMore={initialMessages.has_more}
-          initialHasMore={initialMessages.has_more}
+        embedded
-          embedded
+      />
-        />
+    </ChatShell>
-      </ChatShell>
-    </div>
   );
 }

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>
+  );
+}

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} />
-      <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={null} />
-    </div>
   );
 }

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);