From e803a79813fc2540d8d8fd0732518ec7271bbe34 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 18 May 2025 17:58:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8FUI=20BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AgentChatComponent.vue   | 18 +++++++++++++---
 web/src/components/ChatSidebarComponent.vue | 24 ++++++++++++++-------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 010dcd18..c4134a78 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -5,12 +5,13 @@
       :current-chat-id="currentChatId"
       :chats-list="chatsList"
       :is-sidebar-open="state.isSidebarOpen"
+      :is-initial-render="state.isInitialRender"
       @create-chat="createNewChat"
       @select-chat="selectChat"
       @delete-chat="deleteChat"
       @rename-chat="renameChat"
       @toggle-sidebar="toggleSidebar"
-      :class="{'floating-sidebar': isSmallContainer, 'collapsed': !state.isSidebarOpen && isSmallContainer}"
+      :class="{'floating-sidebar': isSmallContainer, 'sidebar-open': state.isSidebarOpen, 'no-transition': state.isInitialRender}"
     />
     <div class="sidebar-backdrop" v-if="state.isSidebarOpen && isSmallContainer" @click="toggleSidebar"></div>
     <div class="chat">
@@ -129,10 +130,11 @@ const props = defineProps({
 const state = reactive({
   ...props.state,
   debug_mode: computed(() => props.state.debug_mode ?? false),
-  isSidebarOpen: false,
+  isSidebarOpen: localStorage.getItem('chat_sidebar_open') === 'true' || false,
   waitingServerResponse: false,
   isProcessingRequest: false,
-  creatingNewChat: false
+  creatingNewChat: false,
+  isInitialRender: true
 });
 
 // 容器宽度检测
@@ -159,6 +161,11 @@ onMounted(() => {
       resizeObserver.observe(chatContainerRef.value);
     }
   });
+
+  // 延迟移除初始渲染标记，防止切换动画
+  setTimeout(() => {
+    state.isInitialRender = false;
+  }, 300);
 });
 
 onUnmounted(() => {
@@ -671,6 +678,7 @@ const scrollToBottom = async () => {
 
 const toggleSidebar = () => {
   state.isSidebarOpen = !state.isSidebarOpen;
+  localStorage.setItem('chat_sidebar_open', state.isSidebarOpen);
   console.log("toggleSidebar", state.isSidebarOpen);
 }
 
@@ -774,6 +782,10 @@ const mergeMessageChunk = (chunks) => {
   width: 80% !important;
   max-width: 300px;
 
+  &.no-transition {
+    transition: none !important;
+  }
+
   &.collapsed {
     transform: translateX(-100%);
   }
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index d43ee114..c6517f48 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-sidebar" :class="{ 'collapsed': !props.isSidebarOpen }">
+  <div class="chat-sidebar" :class="{'sidebar-open': isSidebarOpen, 'no-transition': isInitialRender}">
     <div class="sidebar-header">
       <div class="header-title">{{ currentAgentId }}</div>
       <div class="header-actions">
@@ -78,6 +78,10 @@ const props = defineProps({
   isSidebarOpen: {
     type: Boolean,
     default: false
+  },
+  isInitialRender: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -86,7 +90,6 @@ const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-c
 // 状态变量
 const loading = ref(false);
 
-
 // 创建新对话
 const createNewChat = () => {
   emit('create-chat');
@@ -157,18 +160,23 @@ const toggleCollapse = () => {
 
 <style lang="less" scoped>
 .chat-sidebar {
-  width: 280px;
+  width: 0;
   height: 100%;
   background-color: #f9f9f9;
-  border-right: 1px solid #e8e8e8;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
+  border: none;
+  overflow: hidden;
 
-  &.collapsed {
-    width: 0;
-    border: none;
-    overflow: hidden;
+  &.no-transition {
+    transition: none !important;
+  }
+
+  &.sidebar-open {
+    width: 280px;
+    max-width: 300px;
+    border-right: 1px solid #e8e8e8;
   }
 
   .sidebar-header {