From 63714b6c6e6f13a60d9b3c1c6e1e8c2443375020 Mon Sep 17 00:00:00 2001
From: oudecheng <13802883547@139.com>
Date: Fri, 26 Jun 2026 11:34:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=94=B6=E8=B5=B7/=E5=B1=95=E5=BC=80=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx | 119 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 92 insertions(+), 27 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 6b3ad5a..5606df4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Zap, ArrowLeft, Bot, Clock, Sun, Moon, PanelRightOpen, X, Brain, Settings as SettingsIcon, ChevronRight } from 'lucide-react'
+import { Zap, ArrowLeft, Bot, Clock, Sun, Moon, PanelRightOpen, PanelLeftClose, PanelLeftOpen, X, Brain, Settings as SettingsIcon, ChevronRight } from 'lucide-react'
 import { ChatContainer } from './components/Chat/ChatContainer'
 import { TopicList } from './components/Sidebar/TopicList'
 import { SchedulerJobList } from './components/Sidebar/SchedulerJobList'
@@ -120,6 +120,22 @@ function App() {
 
   const [rightPanelTab, setRightPanelTab] = useState<'memory' | 'skill'>('memory')
 
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem('picobot-sidebar-collapsed') === 'true'
+    } catch {
+      return false
+    }
+  })
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarCollapsed(prev => {
+      const next = !prev
+      localStorage.setItem('picobot-sidebar-collapsed', String(next))
+      return next
+    })
+  }, [])
+
   const [theme, setTheme] = useState<'dark' | 'light'>(() => {
     const saved = localStorage.getItem('picobot-theme')
     return saved === 'light' ? 'light' : 'dark'
@@ -562,34 +578,83 @@ function App() {
 
       {/* Main Content */}
       <div className="flex flex-1 overflow-hidden relative">
-        {/* Left Sidebar */}
-        <div className={`w-72 shrink-0 border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50 flex flex-col ${subAgentView || schedulerView ? 'opacity-50 pointer-events-none' : ''}`}>
-          {/* Tab 栏 */}
-          <div className="flex border-b border-[var(--border-color)]">
-            <button
-              onClick={() => setSidebarTab('topics')}
-              className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
-                sidebarTab === 'topics'
-                  ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
-                  : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
-              }`}
-            >
-              话题
-            </button>
-            <button
-              onClick={() => setSidebarTab('scheduler')}
-              className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
-                sidebarTab === 'scheduler'
-                  ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
-                  : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
-              }`}
-            >
-              定时任务
-            </button>
+        {/* Left Sidebar — smooth width animation via will-change + overflow-hidden */}
+        <div
+          className={`shrink-0 border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50 flex flex-col overflow-hidden ${sidebarCollapsed ? 'w-11' : 'w-72'} ${subAgentView || schedulerView ? 'opacity-50 pointer-events-none' : ''}`}
+          style={{ transition: 'width 200ms ease-out', willChange: 'width' }}
+        >
+          {/* Tab 栏 + collapse toggle */}
+          <div className="flex border-b border-[var(--border-color)]" style={{ minWidth: sidebarCollapsed ? 0 : '288px' }}>
+            {sidebarCollapsed ? (
+              /* 收起态：紧凑竖排 tab 按钮 */
+              <div className="flex flex-col w-full">
+                <button
+                  onClick={() => { setSidebarTab('topics'); setSidebarCollapsed(false); localStorage.setItem('picobot-sidebar-collapsed', 'false'); }}
+                  className={`py-2 text-xs font-medium text-center transition-colors ${
+                    sidebarTab === 'topics'
+                      ? 'text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/10'
+                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
+                  }`}
+                  title="话题"
+                >
+                  话<br/>题
+                </button>
+                <button
+                  onClick={() => { setSidebarTab('scheduler'); setSidebarCollapsed(false); localStorage.setItem('picobot-sidebar-collapsed', 'false'); }}
+                  className={`py-2 text-xs font-medium text-center transition-colors ${
+                    sidebarTab === 'scheduler'
+                      ? 'text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/10'
+                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
+                  }`}
+                  title="定时任务"
+                >
+                  定<br/>时
+                </button>
+                {/* 展开按钮 */}
+                <button
+                  onClick={toggleSidebar}
+                  className="flex items-center justify-center py-2 text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-colors"
+                  title="展开侧栏"
+                >
+                  <PanelLeftOpen className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ) : (
+              <>
+                <button
+                  onClick={() => setSidebarTab('topics')}
+                  className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors whitespace-nowrap ${
+                    sidebarTab === 'topics'
+                      ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
+                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                  }`}
+                >
+                  话题
+                </button>
+                <button
+                  onClick={() => setSidebarTab('scheduler')}
+                  className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors whitespace-nowrap ${
+                    sidebarTab === 'scheduler'
+                      ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
+                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                  }`}
+                >
+                  定时任务
+                </button>
+                {/* 收起按钮 */}
+                <button
+                  onClick={toggleSidebar}
+                  className="flex items-center justify-center px-2 text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-colors shrink-0"
+                  title="收起侧栏"
+                >
+                  <PanelLeftClose className="h-4 w-4" />
+                </button>
+              </>
+            )}
           </div>
 
-          <div className="flex-1 overflow-hidden">
-            {sidebarTab === 'topics' ? (
+          <div className="flex-1 overflow-hidden" style={{ minWidth: sidebarCollapsed ? 0 : '288px' }}>
+            {sidebarCollapsed ? null : sidebarTab === 'topics' ? (
               <TopicList
                 sessionId={sessionId}
                 topics={topics}