refactor: move sidebar toggle to title bar

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">
-      <img src="./logo.png" alt="WeFlow" className="title-logo" />
-      <span className="titles">{title || 'WeFlow'}</span>
+      <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>
   )
 }