修复聊天页面渲染逻辑

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%',
+                        flex: 1,
-                        minHeight: '100%',
+                        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}

app/routes/chat-with-llm._index.tsx

@@ -35,13 +35,11 @@ export const meta: MetaFunction = () => {
  */
 export default function ChatWithLLMIndex() {
     return (
-        <div className="flex-1 chat-container" style={{
+        <div className="chat-container" style={{
-            height: 'calc(100vh - 80px)',
+            height: '93vh', // 使用视口高度的90%
             borderRadius: '0.5rem',
-            marginTop: '20px',
             marginBottom: '-20px',
-            minHeight: '990px',
+            marginTop: '2vh',
-            maxHeight: '89vh'
         }}>
             <Chat />
         </div>

app/styles/components/chat-with-llm/chat-input.css

@@ -29,7 +29,8 @@
 
 .chat-input-textarea-wrapper {
     flex: 1;
-    height: 10vh;
+    min-height: 40px;
+    max-height: 120px;
     margin: 0 8px;
 }
 
@@ -39,6 +40,8 @@
     box-shadow: none !important;
     padding: 8px 0 !important;
     background: transparent !important;
+    min-height: 40px;
+    max-height: 120px;
 }
 
 .chat-input-button {
@@ -55,13 +58,43 @@
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+    .chat-input-container {
+        padding: 14px 18px;
+    }
+
+    .chat-input-content {
+        padding: 10px;
+    }
+
+    .chat-input-textarea-wrapper {
+        margin: 0 6px;
+    }
+}
+
 @media (max-width: 768px) {
     .chat-input-container {
         padding: 12px 16px;
     }
 
     .chat-input-content {
-        padding: 10px;
+        padding: 8px;
+    }
+
+    .chat-input-textarea-wrapper {
+        margin: 0 4px;
+        min-height: 36px;
+        max-height: 100px;
+    }
+
+    .chat-input-textarea {
+        min-height: 36px;
+        max-height: 100px;
+        font-size: 14px;
+    }
+
+    .chat-input-box {
+        border-radius: 24px;
     }
 }
 
@@ -71,7 +104,24 @@
     }
 
     .chat-input-content {
-        padding: 8px;
+        padding: 6px;
+    }
+
+    .chat-input-textarea-wrapper {
+        margin: 0 2px;
+        min-height: 32px;
+        max-height: 80px;
+    }
+
+    .chat-input-textarea {
+        min-height: 32px;
+        max-height: 80px;
+        font-size: 13px;
+        padding: 6px 0 !important;
+    }
+
+    .chat-input-box {
+        border-radius: 20px;
     }
 }
 

app/styles/components/chat-with-llm/chat-message.css

@@ -150,19 +150,46 @@
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+    .message-card {
+        max-width: 90%;
+    }
+
+    .message-card.user {
+        margin-right: 20px;
+    }
+
+    .message-card.assistant {
+        margin-left: 20px;
+    }
+}
+
 @media (max-width: 768px) {
     .message-card {
         max-width: 95%;
     }
 
     .message-card.user {
-        margin-right: 30px;
+        margin-right: 15px;
-        /* 平板上减少右边距 */
     }
 
     .message-card.assistant {
-        margin-left: 30px;
+        margin-left: 15px;
-        /* 平板上减少左边距 */
+    }
+
+    .message-card .ant-card .ant-card-body {
+        padding: 10px 14px !important;
+        font-size: 14px;
+    }
+
+    .feedback-buttons {
+        margin-top: 8px;
+        gap: 6px;
+    }
+
+    .question-button {
+        padding: 6px 10px;
+        font-size: 13px;
     }
 }
 
@@ -172,12 +199,33 @@
     }
 
     .message-card.user {
-        margin-right: 15px;
+        margin-right: 8px;
-        /* 手机上进一步减少右边距 */
     }
 
     .message-card.assistant {
-        margin-left: 15px;
+        margin-left: 8px;
-        /* 手机上进一步减少左边距 */
+    }
+
+    .message-card .ant-card .ant-card-body {
+        padding: 8px 12px !important;
+        font-size: 13px;
+        line-height: 1.3 !important;
+    }
+
+    .message-timestamp {
+        font-size: 11px;
+        margin-top: 6px;
+        gap: 8px;
+    }
+
+    .suggested-questions {
+        margin-top: 12px;
+    }
+
+    .question-button {
+        margin-bottom: 6px;
+        margin-right: 6px;
+        padding: 5px 8px;
+        font-size: 12px;
     }
 }

app/styles/components/chat-with-llm/index.css

@@ -2,17 +2,30 @@
 
 /* 聊天容器 - 自适应布局 */
 .chat-container {
-    height: 100%;
+    display: flex;
-    min-height: 100%;
-    width: 100%;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    /* 允许flex子元素收缩 */
     background: #fff;
     overflow: hidden;
     position: relative;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin: 20px auto;
+}
-    display: flex;
+
+/* 可调整高度的聊天容器 */
+.chat-container-adjustable {
+    /* display: flex; */
+    flex-direction: column;
+    width: 100%;
+    background: #fff;
+    overflow: hidden;
+    position: relative;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* 高度将通过内联样式设置 */
 }
 
 /* 聊天头部 */
@@ -38,6 +51,8 @@
 /* 聊天消息列表容器 */
 .chat-messages {
     flex: 1;
+    min-height: 0;
+    /* 允许flex子元素收缩 */
     overflow-y: auto;
     overflow-x: hidden;
     padding: 20px;
@@ -126,18 +141,6 @@
     margin-bottom: 0;
 }
 
-/* 确保聊天容器在主内容区域中占满全部空间 */
-.main-content .chat-container {
-    height: calc(89vh - 0px);
-    /* 减去任何顶部导航栏的高度 */
-}
-
-/* 如果有面包屑导航，需要调整高度 */
-.main-content .breadcrumb+.chat-container {
-    height: calc(100vh - 60px);
-    /* 减去面包屑的高度 */
-}
-
 /* 侧边栏滚动区域样式 */
 .h-full.overflow-y-auto::-webkit-scrollbar {
     width: 6px;
@@ -165,14 +168,25 @@
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
     .chat-container {
-        height: 100vh;
+        border-radius: 4px;
     }
 
     .chat-messages {
         padding: 16px;
     }
+}
+
+@media (max-width: 768px) {
+    .chat-container {
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .chat-messages {
+        padding: 12px;
+    }
 
     .chat-header {
         padding: 0 16px;
@@ -186,15 +200,15 @@
 
 @media (max-width: 480px) {
     .chat-messages {
-        padding: 12px;
+        padding: 8px;
     }
 
     .chat-welcome {
-        padding: 20px 16px;
+        padding: 20px 12px;
     }
 
     .chat-welcome h3 {
-        font-size: 20px;
+        font-size: 18px;
     }
 
     .chat-welcome p {

app/styles/components/chat-with-llm/sidebar.css

@@ -68,25 +68,85 @@
 
 /* ========== 响应式设计 ========== */
 
-/* 平板和手机端侧边栏 - 作用域：屏幕宽度小于768px时的侧边栏 */
+/* 大屏幕 - 1200px以上 */
-@media (max-width: 768px) {
+@media (min-width: 1200px) {
     .ant-layout-sider {
-        position: fixed !important;
+        position: relative !important;
-        /* 固定定位 */
+    }
-        left: 0;
+}
-        /* 贴左边 */
+
-        top: 0;
+/* 中等屏幕 - 992px到1199px */
-        /* 贴顶部 */
+@media (max-width: 1199px) and (min-width: 992px) {
-        bottom: 0;
+    .ant-layout-sider {
-        /* 贴底部 */
+        width: 200px !important;
-        z-index: 1000;
+        min-width: 200px !important;
-        /* 层级 */
+        max-width: 200px !important;
     }
 
-    /* 折叠状态的侧边栏 - 作用域：手机端折叠时隐藏侧边栏 */
     .ant-layout-sider.ant-layout-sider-collapsed {
-        left: -200px;
+        width: 60px !important;
-        /* 向左移出屏幕 */
+        min-width: 60px !important;
+        max-width: 60px !important;
+    }
+}
+
+/* 平板屏幕 - 768px到991px */
+@media (max-width: 991px) and (min-width: 768px) {
+    .ant-layout-sider {
+        position: fixed !important;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+        width: 240px !important;
+        min-width: 240px !important;
+        max-width: 240px !important;
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+    }
+
+    .ant-layout-sider.ant-layout-sider-collapsed {
+        transform: translateX(-100%);
+    }
+}
+
+/* 手机端 - 768px以下 */
+@media (max-width: 767px) {
+    .ant-layout-sider {
+        position: fixed !important;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+        width: 280px !important;
+        min-width: 280px !important;
+        max-width: 280px !important;
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .ant-layout-sider.ant-layout-sider-collapsed {
+        transform: translateX(-100%);
+    }
+
+    /* 手机端菜单项调整 */
+    .chat-sidebar-menu .ant-menu-item {
+        padding: 12px 16px;
+        margin: 6px 0;
+    }
+
+    .chat-sidebar-menu .ant-menu-item .ant-menu-title-content span {
+        font-size: 16px;
+    }
+}
+
+/* 小手机 - 480px以下 */
+@media (max-width: 479px) {
+    .ant-layout-sider {
+        width: 100vw !important;
+        min-width: 100vw !important;
+        max-width: 100vw !important;
     }
 }
 

app/styles/components/chat-with-llm/thought-process.css

@@ -25,7 +25,7 @@
 }
 
 .thought-process-collapsed {
-    max-height: 150px;
+    /* max-height: 150px; */
     overflow: hidden;
     position: relative;
 }