feat: 大模型对话适配移动端的样式

app/components/dify-chat/index.tsx

@@ -14,6 +14,13 @@ import '../../styles/components/chat-with-llm/index.css';
 
 const { Content } = Layout;
 
+// 扩展 Window 接口以支持自定义属性
+declare global {
+    interface Window {
+        hasSetInitialSidebarState?: boolean;
+    }
+}
+
 /**
  * 主聊天组件
  * 实现单页面应用模式，参考webapp-conversation的初始化逻辑
@@ -348,6 +355,11 @@ export default function Chat() {
         if (conversationId !== currConversationId) {
             setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
         }
+
+        // 移动端选中对话后自动隐藏侧边栏
+        if (isMobile && !sidebarCollapsed) {
+            setSidebarCollapsed(true);
+        }
     };
 
     /**
@@ -485,7 +497,15 @@ export default function Chat() {
     // 检查屏幕尺寸
     useEffect(() => {
         const checkScreenSize = () => {
-            setIsMobile(window.innerWidth < 992);
+            const isMobileDevice = window.innerWidth < 992;
+            setIsMobile(isMobileDevice);
+
+            // 移动端默认隐藏侧边栏，桌面端默认显示
+            // 只在初次加载时设置，避免影响用户的手动切换
+            if (!window.hasSetInitialSidebarState) {
+                setSidebarCollapsed(isMobileDevice);
+                window.hasSetInitialSidebarState = true;
+            }
         };
 
         // 初始检查
@@ -537,7 +557,7 @@ export default function Chat() {
     const conversationIntroduction = currConversationInfo?.introduction || '';
 
     return (
-        <Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
+        <Layout style={{ height: '100%', display: 'flex', flexDirection: 'row', position: 'relative' }}>
             {/* 移动端遮罩层 */}
             {!sidebarCollapsed && isMobile && (
                 <div
@@ -546,6 +566,24 @@ export default function Chat() {
                 />
             )}
 
+            {/* ChatSidebar 隐藏时显示的展开按钮 */}
+            {sidebarCollapsed && (
+                <button
+                    onClick={handleSidebarToggle}
+                    className="fixed left-0 top-1/2 -translate-y-1/2 z-[998] bg-white hover:bg-gray-100 shadow-lg rounded-r-lg px-2 py-4 transition-all duration-200 border border-l-0 border-gray-200"
+                    style={{
+                        width: '32px',
+                        height: '48px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                    aria-label="展开对话列表"
+                >
+                    <i className="ri-menu-unfold-line text-lg text-gray-600"></i>
+                </button>
+            )}
+
             {/* 侧边栏 */}
             <ChatSidebar
                 ref={sidebarRef}

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

@@ -31,6 +31,11 @@ export const meta: MetaFunction = () => {
     ];
 };
 
+// 配置路由 handle，隐藏主布局的 sidebar（因为聊天页面有自己的 ChatSidebar）
+export const handle = {
+    hideSidebar: true
+};
+
 /**
  * 聊天主页面
  * 实现单页面应用模式，所有会话切换都在同一页面内完成