refactor: move sidebar toggle to title bar

src/App.tsx

@@ -72,6 +72,7 @@ function App() {
   const isNotificationWindow = location.pathname === '/notification-window'
   const isExportRoute = location.pathname === '/export'
   const [themeHydrated, setThemeHydrated] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
   // 锁定状态
   // const [isLocked, setIsLocked] = useState(false) // Moved to store
@@ -446,7 +447,10 @@ function App() {
           useHello={lockUseHello}
         />
       )}
-      <TitleBar />
+      <TitleBar
+        sidebarCollapsed={sidebarCollapsed}
+        onToggleSidebar={() => setSidebarCollapsed((prev) => !prev)}
+      />
 
       {/* 全局悬浮进度胶囊 (处理：新版本提示、下载进度、错误提示) */}
       <UpdateProgressCapsule />
@@ -557,7 +561,7 @@ function App() {
       />
 
       <div className="main-layout">
-        <Sidebar />
+        <Sidebar collapsed={sidebarCollapsed} />
         <main className="content">
           <RouteGuard>
             <div className={`export-keepalive-page ${isExportRoute ? 'active' : 'hidden'}`} aria-hidden={!isExportRoute}>

src/components/Sidebar.scss

@@ -244,26 +244,6 @@
   gap: 4px;
 }
 
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 8px;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: 9999px;
-  transition: all 0.2s ease;
-  margin-top: 4px;
-
-  &:hover {
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-  }
-}
-
 .sidebar-clear-dialog-overlay {
   position: fixed;
   inset: 0;

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { NavLink, useLocation, useNavigate } from 'react-router-dom'
-import { Home, MessageSquare, BarChart3, FileText, Settings, ChevronLeft, ChevronRight, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, Trash2 } from 'lucide-react'
+import { Home, MessageSquare, BarChart3, FileText, Settings, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, Trash2 } from 'lucide-react'
 import { useAppStore } from '../stores/appStore'
 import * as configService from '../services/config'
 import { onExportSessionStatus, requestExportSessionStatus } from '../services/exportBridge'
@@ -62,10 +62,13 @@ const normalizeAccountId = (value?: string | null): string => {
   return suffixMatch ? suffixMatch[1] : trimmed
 }
 
-function Sidebar() {
+interface SidebarProps {
+  collapsed: boolean
+}
+
+function Sidebar({ collapsed }: SidebarProps) {
   const location = useLocation()
   const navigate = useNavigate()
-  const [collapsed, setCollapsed] = useState(false)
   const [authEnabled, setAuthEnabled] = useState(false)
   const [activeExportTaskCount, setActiveExportTaskCount] = useState(0)
   const [userProfile, setUserProfile] = useState<SidebarUserProfile>({
@@ -482,13 +485,6 @@ function Sidebar() {
           <span className="nav-label">设置</span>
         </NavLink>
 
-        <button
-          className="collapse-btn"
-          onClick={() => setCollapsed(!collapsed)}
-          title={collapsed ? '展开菜单' : '收起菜单'}
-        >
-          {collapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
-        </button>
       </div>
 
       {showClearAccountDialog && (

src/components/TitleBar.scss

@@ -4,10 +4,13 @@
   display: flex;
   align-items: center;
   padding-left: 16px;
+  padding-right: 16px;
   border-bottom: 1px solid var(--border-color);
   -webkit-app-region: drag;
   flex-shrink: 0;
   gap: 8px;
+  position: relative;
+  z-index: 2101;
 }
 
 // 繁花如梦：标题栏毛玻璃
@@ -16,6 +19,12 @@
   -webkit-backdrop-filter: blur(20px);
 }
 
+.title-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .title-logo {
   width: 20px;
   height: 20px;
@@ -27,3 +36,24 @@
   font-weight: 500;
   color: var(--text-secondary);
 }
+
+.title-sidebar-toggle {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+  -webkit-app-region: no-drag;
+
+  &:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+}

src/components/TitleBar.tsx

@@ -1,14 +1,30 @@
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
 import './TitleBar.scss'
 
 interface TitleBarProps {
   title?: string
+  sidebarCollapsed?: boolean
+  onToggleSidebar?: () => void
 }
 
-function TitleBar({ title }: TitleBarProps = {}) {
+function TitleBar({ title, sidebarCollapsed = false, onToggleSidebar }: TitleBarProps = {}) {
   return (
     <div className="title-bar">
+      <div className="title-brand">
         <img src="./logo.png" alt="WeFlow" className="title-logo" />
         <span className="titles">{title || 'WeFlow'}</span>
+        {onToggleSidebar ? (
+          <button
+            type="button"
+            className="title-sidebar-toggle"
+            onClick={onToggleSidebar}
+            title={sidebarCollapsed ? '展开菜单' : '收起菜单'}
+            aria-label={sidebarCollapsed ? '展开菜单' : '收起菜单'}
+          >
+            {sidebarCollapsed ? <PanelLeftOpen size={16} /> : <PanelLeftClose size={16} />}
+          </button>
+        ) : null}
+      </div>
     </div>
   )
 }