diff --git a/src/App.tsx b/src/App.tsx index 36f2fc0..79b5253 100644 --- a/src/App.tsx +++ b/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} /> )} - + setSidebarCollapsed((prev) => !prev)} + /> {/* 全局悬浮进度胶囊 (处理:新版本提示、下载进度、错误提示) */} @@ -557,7 +561,7 @@ function App() { />
- +
diff --git a/src/components/Sidebar.scss b/src/components/Sidebar.scss index bdead0a..f4805a2 100644 --- a/src/components/Sidebar.scss +++ b/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; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index af6f4f5..2f68ba6 100644 --- a/src/components/Sidebar.tsx +++ b/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({ @@ -482,13 +485,6 @@ function Sidebar() { 设置 -
{showClearAccountDialog && ( diff --git a/src/components/TitleBar.scss b/src/components/TitleBar.scss index 9c18972..139083c 100644 --- a/src/components/TitleBar.scss +++ b/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); + } +} diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index 570e6e9..7b1b4e0 100644 --- a/src/components/TitleBar.tsx +++ b/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 (
- WeFlow - {title || 'WeFlow'} +
+ WeFlow + {title || 'WeFlow'} + {onToggleSidebar ? ( + + ) : null} +
) }