修复聊天页面渲染逻辑

app/components/chat/index.tsx

@@ -22,6 +22,7 @@ const { Content } = Layout;
 export default function Chat() {
     // 侧边栏状态
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
     const {
         token: { colorBgContainer, borderRadiusLG },
     } = theme.useToken();
@@ -466,6 +467,23 @@ export default function Chat() {
         }
     }, [chatList]);
 
+    // 检查屏幕尺寸
+    useEffect(() => {
+        const checkScreenSize = () => {
+            setIsMobile(window.innerWidth < 992);
+        };
+
+        // 初始检查
+        checkScreenSize();
+
+        // 监听窗口大小变化
+        window.addEventListener('resize', checkScreenSize);
+
+        return () => {
+            window.removeEventListener('resize', checkScreenSize);
+        };
+    }, []);
+
     // 如果应用不可用，显示错误页面
     if (appUnavailable) {
         return (
@@ -504,7 +522,15 @@ export default function Chat() {
     const conversationIntroduction = currConversationInfo?.introduction || '';
 
     return (
-        <Layout style={{ height: '100%', minHeight: '100%' }}>
+        <Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
+            {/* 移动端遮罩层 */}
+            {!sidebarCollapsed && isMobile && (
+                <div
+                    className="fixed inset-0 bg-black bg-opacity-50 z-[999]"
+                    onClick={handleSidebarToggle}
+                />
+            )}
+
             {/* 侧边栏 */}
             <ChatSidebar
                 ref={sidebarRef}
@@ -519,18 +545,18 @@ export default function Chat() {
             />
 
             {/* 主内容区域 */}
-            <Layout>
+            <Layout style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                 <Content
                     style={{
                         background: colorBgContainer,
                         display: 'flex',
                         flexDirection: 'column',
-                        height: '100%',
-                        minHeight: '100%',
+                        flex: 1,
+                        minHeight: 0,
                     }}
                 >
                     {/* 聊天区域 */}
-                    <div className="flex-1 overflow-hidden">
+                    <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
                         <div
                             ref={chatListDomRef}
                             className="h-full overflow-y-auto px-4 py-4 space-y-2"
@@ -556,7 +582,7 @@ export default function Chat() {
                     </div>
 
                     {/* 输入区域 */}
-                    <div className="flex-shrink-0 bg-white" style={{ minHeight: '120px' }}>
+                    <div className="flex-shrink-0 bg-white">
                         <ChatInput
                             onSendMessage={handleSendMessage}
                             disabled={isResponding}