From 2897423404df2f78cc5240cb036f68eb77c3f4c3 Mon Sep 17 00:00:00 2001
From: yorn <1057707203@qq.com>
Date: Tue, 2 Dec 2025 11:41:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E6=A8=A1=E5=9E=8B=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E9=80=82=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/dify-chat/index.tsx | 42 ++++++++++++++++++++++++++++--
 app/routes/chat-with-llm.chat.tsx  |  5 ++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/components/dify-chat/index.tsx b/app/components/dify-chat/index.tsx
index ef2f4b9..d692aee 100644
--- a/app/components/dify-chat/index.tsx
+++ b/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}
diff --git a/app/routes/chat-with-llm.chat.tsx b/app/routes/chat-with-llm.chat.tsx
index c7b7637..400f7ab 100644
--- a/app/routes/chat-with-llm.chat.tsx
+++ b/app/routes/chat-with-llm.chat.tsx
@@ -31,6 +31,11 @@ export const meta: MetaFunction = () => {
     ];
 };
 
+// 配置路由 handle，隐藏主布局的 sidebar（因为聊天页面有自己的 ChatSidebar）
+export const handle = {
+    hideSidebar: true
+};
+
 /**
  * 聊天主页面
  * 实现单页面应用模式，所有会话切换都在同一页面内完成