From a8b96dbcf28ae1057dd64243ced5d06196c614c3 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 21 Mar 2026 16:41:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=9C=A8=E7=AA=84=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E5=AE=BD=E5=BA=A6=E4=B8=8B=E8=87=AA=E5=8A=A8=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=B9=B6=E6=B5=AE=E5=8A=A8=E5=AF=B9=E8=AF=9D=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为 .chat-main 添加了 ResizeObserver，当消息区域宽度低于 600px 时自动折叠对话历史侧边栏，避免界面挤压。同时添加了浮动状态，使侧边栏在小屏幕上重新打开时以覆盖层形式显示。
---
 web/src/components/AgentChatComponent.vue   | 33 ++++++++++++++++++++-
 web/src/components/ChatSidebarComponent.vue | 20 ++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 4f41df8b..d45e706d 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -4,6 +4,7 @@
       :current-chat-id="currentChatId"
       :chats-list="chatsList"
       :is-sidebar-open="chatUIStore.isSidebarOpen"
+      :is-floating="isSidebarFloating"
       :is-initial-render="localUIState.isInitialRender"
       :single-mode="props.singleMode"
       :agents="agents"
@@ -72,7 +73,7 @@
 
       <div class="chat-content-container">
         <!-- Main Chat Area -->
-        <div class="chat-main">
+        <div class="chat-main" ref="chatMainRef">
           <div class="chat-box">
             <div class="conv-box" v-for="(conv, index) in conversations" :key="index">
               <AgentMessageComponent
@@ -491,6 +492,9 @@ const isProcessing = computed(() => isStreaming.value)
 
 // ==================== SCROLL & RESIZE HANDLING ====================
 const scrollController = new ScrollController('.chat-main')
+const chatMainRef = ref(null)
+const isSidebarFloating = ref(false)
+let chatMainResizeObserver = null
 
 onMounted(() => {
   nextTick(() => {
@@ -498,6 +502,30 @@ onMounted(() => {
     if (chatMainContainer) {
       chatMainContainer.addEventListener('scroll', scrollController.handleScroll, { passive: true })
     }
+
+    if (window.ResizeObserver && chatMainRef.value) {
+      chatMainResizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const width = entry.contentRect.width
+          const isTakingSpace = chatUIStore.isSidebarOpen && !isSidebarFloating.value
+          
+          if (isTakingSpace) {
+            if (width < 600) {
+              isSidebarFloating.value = true
+              chatUIStore.isSidebarOpen = false
+              localStorage.setItem('chat_sidebar_open', 'false')
+            }
+          } else {
+            if (width >= 880) {
+              isSidebarFloating.value = false
+            } else {
+              isSidebarFloating.value = true
+            }
+          }
+        }
+      })
+      chatMainResizeObserver.observe(chatMainRef.value)
+    }
   })
   setTimeout(() => {
     localUIState.isInitialRender = false
@@ -506,6 +534,9 @@ onMounted(() => {
 
 onUnmounted(() => {
   scrollController.cleanup()
+  if (chatMainResizeObserver) {
+    chatMainResizeObserver.disconnect()
+  }
   // 清理所有线程状态
   resetOnGoingConv()
 })
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index 07773148..8c91e043 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="chat-sidebar"
-    :class="{ 'sidebar-open': chatUIStore.isSidebarOpen, 'no-transition': isInitialRender }"
+    :class="{ 'sidebar-open': chatUIStore.isSidebarOpen, 'no-transition': isInitialRender, 'is-floating': isFloating }"
   >
     <div class="sidebar-content">
       <div class="sidebar-header">
@@ -146,6 +146,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  isFloating: {
+    type: Boolean,
+    default: false
+  },
   singleMode: {
     type: Boolean,
     default: true
@@ -295,6 +299,20 @@ const togglePin = (chatId) => {
     transition: none !important;
   }
 
+  &.is-floating {
+    position: absolute;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    
+    &.sidebar-open {
+      box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
+      border-right: none;
+    }
+  }
+
   &.sidebar-open {
     width: 280px;
     max-width: 300px;