feat(ui): collapsible sidebar and move logout into top user menu

web/src/components/Layout.tsx

@@ -1,8 +1,10 @@
 import { Outlet, useLocation, useNavigate } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Activity,
   Bell,
+  ChevronLeft,
+  ChevronRight,
   FileCode,
   Globe,
   KeyRound,
@@ -12,17 +14,20 @@ import {
   Menu,
   Moon,
   Network,
+  PanelLeftClose,
+  PanelLeftOpen,
   ScrollText,
   Server,
   Settings,
   Sun,
   Terminal,
+  UserRound,
   Variable,
   X,
 } from 'lucide-react'
 import { useTheme } from '@/context/ThemeContext'
 import { api } from '@/api'
-import { usePublicSite, useSentence } from '@/api/hooks'
+import { usePublicSite, useSentence, useUser } from '@/api/hooks'
 import { NodeSwitcher } from '@/components/business/NodeSwitcher'
 import { SystemNotice } from '@/components/business/SystemNotice'
 import { ToastHost } from '@/components/business/ToastHost'
@@ -46,6 +51,8 @@ const NAV_ITEMS = [
   { path: '/settings', icon: Settings, label: '系统设置', exact: true },
 ] as const
 
+const COLLAPSE_KEY = 'taskpool.sidebar.collapsed'
+
 function isActive(pathname: string, path: string, exact: boolean) {
   if (exact) return pathname === path
   return pathname === path || pathname.startsWith(path + '/')
@@ -57,11 +64,23 @@ export default function Layout() {
   const { theme, toggleTheme } = useTheme()
   const { data: site } = usePublicSite()
   const { data: sentenceData } = useSentence()
+  const { data: user } = useUser()
   const [menuOpen, setMenuOpen] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(COLLAPSE_KEY) === '1'
+    } catch {
+      return false
+    }
+  })
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const userMenuRef = useRef<HTMLDivElement>(null)
 
   const title = site?.title || '任务池'
   const sentence = sentenceData?.sentence || '欢迎使用任务池'
+  const username = user?.username || '管理员'
+  const sidebarCollapsed = !isMobile && collapsed
 
   useEffect(() => {
     document.title = title
@@ -86,12 +105,32 @@ export default function Layout() {
 
   useEffect(() => {
     setMenuOpen(false)
+    setUserMenuOpen(false)
   }, [location.pathname])
 
   useEffect(() => {
     eventBus.init()
   }, [])
 
+  useEffect(() => {
+    try {
+      localStorage.setItem(COLLAPSE_KEY, collapsed ? '1' : '0')
+    } catch {
+      // ignore
+    }
+  }, [collapsed])
+
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (!userMenuRef.current) return
+      if (!userMenuRef.current.contains(e.target as Node)) {
+        setUserMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [])
+
   async function logout() {
     try {
       await api.auth.logout()
@@ -110,18 +149,26 @@ export default function Layout() {
 
       <aside
         className={cn(
-            'fixed inset-y-0 left-0 z-50 flex w-[200px] shrink-0 flex-col border-r border-[var(--border)] bg-[var(--bg-secondary)] transition-transform duration-200 lg:static lg:translate-x-0',
+          'fixed inset-y-0 left-0 z-50 flex shrink-0 flex-col border-r border-[var(--border)] bg-[var(--bg-secondary)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0',
+          sidebarCollapsed ? 'w-[68px]' : 'w-[200px]',
           isMobile && !menuOpen ? '-translate-x-full' : 'translate-x-0',
         )}
       >
-          <div className="relative flex h-14 items-center gap-2.5 border-b border-[var(--border)] px-4">
+        <div
+          className={cn(
+            'relative flex h-14 items-center border-b border-[var(--border)]',
+            sidebarCollapsed ? 'justify-center px-2' : 'gap-2.5 px-4',
+          )}
+        >
           <div className="ms-on-accent flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-[var(--bg-accent)] text-[13px] font-bold text-[var(--text-on-accent)]">
             T
           </div>
+          {!sidebarCollapsed && (
             <div className="min-w-0 flex-1">
               <div className="truncate text-[13px] font-semibold tracking-tight">{title}</div>
               <div className="truncate text-[10px] text-[var(--text-muted)]">TaskPool</div>
             </div>
+          )}
           {isMobile && (
             <button
               className="rounded-md p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
@@ -132,15 +179,17 @@ export default function Layout() {
           )}
         </div>
 
-          <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 py-3">
+        <nav className={cn('flex flex-1 flex-col gap-0.5 overflow-y-auto py-3', sidebarCollapsed ? 'px-1.5' : 'px-2.5')}>
           {NAV_ITEMS.map(({ path, icon: Icon, label, exact }) => {
             const active = isActive(location.pathname, path, exact)
             return (
               <button
                 key={path}
+                title={sidebarCollapsed ? label : undefined}
                 onClick={() => navigate({ to: path })}
                 className={cn(
-                    'group flex h-9 w-full items-center gap-2.5 rounded-md px-2.5 text-[13px] transition-[background,color,border-color] duration-150',
+                  'group relative flex h-9 w-full items-center rounded-md text-[13px] transition-[background,color,border-color] duration-150',
+                  sidebarCollapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5',
                   active
                     ? 'border border-[var(--border-hover)] bg-[var(--bg-tertiary)] font-medium text-[var(--text-primary)]'
                     : 'border border-transparent text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]',
@@ -151,36 +200,63 @@ export default function Layout() {
                   strokeWidth={1.5}
                   className={cn(active ? 'text-[var(--text-primary)]' : 'text-[var(--text-muted)] group-hover:text-[var(--text-primary)]')}
                 />
+                {!sidebarCollapsed && (
+                  <>
                     <span className="truncate">{label}</span>
                     {active ? <span className="ml-auto h-1.5 w-1.5 rounded-full bg-[var(--bg-accent)]" /> : null}
+                  </>
+                )}
+                {sidebarCollapsed && active ? (
+                  <span className="absolute right-1 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-[var(--bg-accent)]" />
+                ) : null}
               </button>
             )
           })}
         </nav>
 
-          <div className="space-y-1 border-t border-[var(--border)] p-2.5">
-            <Button variant="ghost" className="h-9 w-full justify-start gap-2.5 px-2.5 text-[13px]" onClick={logout}>
-              <LogOut size={15} strokeWidth={1.5} />
-              退出登录
-            </Button>
+        {/* 桌面端：侧栏底部放一个次要折叠入口，主入口在顶栏 */}
+        {!isMobile && (
+          <div className="border-t border-[var(--border)] p-2">
+            <button
+              onClick={() => setCollapsed((v) => !v)}
+              title={collapsed ? '展开侧边栏' : '收起侧边栏'}
+              className={cn(
+                'flex h-9 w-full items-center rounded-md text-[12px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]',
+                sidebarCollapsed ? 'justify-center' : 'gap-2 px-2.5',
+              )}
+            >
+              {collapsed ? <ChevronRight size={15} strokeWidth={1.5} /> : <ChevronLeft size={15} strokeWidth={1.5} />}
+              {!sidebarCollapsed && <span>收起导航</span>}
+            </button>
           </div>
+        )}
       </aside>
 
       <main className="flex min-w-0 flex-1 flex-col">
         <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-secondary)_92%,transparent)] px-4 backdrop-blur-md">
           <div className="flex min-w-0 flex-1 items-center gap-2">
-              {isMobile && (
+            {isMobile ? (
               <button
                 className="rounded-md p-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]"
                 onClick={() => setMenuOpen(true)}
+                title="打开菜单"
               >
                 <Menu size={18} strokeWidth={1.5} />
               </button>
+            ) : (
+              <button
+                className="rounded-md p-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
+                onClick={() => setCollapsed((v) => !v)}
+                title={collapsed ? '展开侧边栏' : '收起侧边栏'}
+              >
+                {collapsed ? <PanelLeftOpen size={17} strokeWidth={1.5} /> : <PanelLeftClose size={17} strokeWidth={1.5} />}
+              </button>
             )}
             <p className="truncate text-[13px] text-[var(--text-muted)]" title={sentence}>
               {sentence}
             </p>
           </div>
+
           <div className="flex items-center gap-1.5">
             <NodeSwitcher />
             <SystemNotice />
@@ -193,6 +269,42 @@ export default function Layout() {
             >
               {theme === 'light' ? <Moon size={15} strokeWidth={1.5} /> : <Sun size={15} strokeWidth={1.5} />}
             </Button>
+
+            {/* 用户菜单：退出登录放这里，比左下角更干净 */}
+            <div className="relative" ref={userMenuRef}>
+              <button
+                onClick={() => setUserMenuOpen((v) => !v)}
+                className={cn(
+                  'flex h-8 items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 text-[12px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:text-[var(--text-primary)]',
+                  userMenuOpen && 'border-[var(--border-hover)] text-[var(--text-primary)]',
+                )}
+                title="账户"
+              >
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[var(--text-muted)]">
+                  <UserRound size={12} strokeWidth={1.75} />
+                </span>
+                <span className="hidden max-w-[96px] truncate sm:inline">{username}</span>
+              </button>
+
+              {userMenuOpen && (
+                <div className="absolute right-0 top-[calc(100%+6px)] z-50 w-44 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-[0_12px_40px_rgba(0,0,0,0.18)]">
+                  <div className="border-b border-[var(--border)] px-3 py-2.5">
+                    <div className="truncate text-[12px] font-medium text-[var(--text-primary)]">{username}</div>
+                    <div className="truncate text-[11px] text-[var(--text-muted)]">已登录</div>
+                  </div>
+                  <button
+                    onClick={() => {
+                      setUserMenuOpen(false)
+                      void logout()
+                    }}
+                    className="flex h-10 w-full items-center gap-2 px-3 text-[13px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--danger)]"
+                  >
+                    <LogOut size={14} strokeWidth={1.5} />
+                    退出登录
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
         </header>