diff --git a/changelog/unreleased/sidebar-roomy.md b/changelog/unreleased/sidebar-roomy.md new file mode 100644 index 00000000..01752ee0 --- /dev/null +++ b/changelog/unreleased/sidebar-roomy.md @@ -0,0 +1,7 @@ +### English +- Sidebar redesign: wider (260px), taller 40px items with 20px icons, clearer group spacing, a larger brand block with the collapse toggle, and a soft filled active state replacing the accent rail. +- Sidebar footer is calmer and adds a live in-flight request indicator (polls every 3s while the page is visible). + +### 中文 +- 侧边栏重新设计:宽度 260px,导航项高 40px、图标 20px,分组间距更清晰,品牌区更大并集成折叠按钮,选中态改为柔和填充,移除强调竖条。 +- 侧边栏底部更简洁,并新增实时并发请求指示(页面可见时每 3 秒刷新)。 diff --git a/frontend/src/components/layout/AppSidebar.tsx b/frontend/src/components/layout/AppSidebar.tsx index 528a29ed..7db60d3c 100644 --- a/frontend/src/components/layout/AppSidebar.tsx +++ b/frontend/src/components/layout/AppSidebar.tsx @@ -1,14 +1,14 @@ -import { useEffect, useRef, useState } from 'react' -import { NavLink, useLocation } from 'react-router-dom' +import { useEffect, useState } from 'react' +import { NavLink } from 'react-router-dom' import { Drawer, Button, Chip, Separator, Tooltip } from '@heroui/react' import { ChartBar, Cube, Gauge, GearSix, Key, Lightning, Scroll, SidebarSimple, UsersThree, X } from '@phosphor-icons/react' import { SidebarUpdateItem } from '@/components/layout/SidebarUpdateItem' import { BrandMark } from '@/components/BrandMark' import { SkeletonBlock } from '@/components/ui/PageSkeletons' -import { gsap } from 'gsap' import { pressScale } from '@/hooks/useGsapReveal' import { useI18n } from '@/hooks/useI18n' import { useOverview } from '@/hooks/useOverview' +import { fetchOverviewSummary } from '@/api/overview' const nav = [ { to: '/', key: 'navOverview', icon: Gauge, section: 'workspace', end: true }, @@ -30,47 +30,20 @@ type Props = { function NavList({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) { const { t } = useI18n() - const location = useLocation() - const navRef = useRef(null) - const indicatorRef = useRef(null) const groups = [ { key: 'workspace', label: t('workspace') }, { key: 'develop', label: t('develop') }, { key: 'system', label: t('system') }, ] as const - useEffect(() => { - const navElement = navRef.current - const indicator = indicatorRef.current - if (!navElement || !indicator) return - const active = navElement.querySelector('[aria-current="page"]') - if (!active) { - gsap.set(indicator, { autoAlpha: 0 }) - return - } - const navRect = navElement.getBoundingClientRect() - const activeRect = active.getBoundingClientRect() - gsap.to(indicator, { - x: activeRect.left - navRect.left, - y: activeRect.top - navRect.top + activeRect.height / 2 - 9, - autoAlpha: 1, - scaleY: 1, - duration: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 0.28, - ease: 'power3.out', - overwrite: true, - }) - return () => gsap.killTweensOf(indicator) - }, [collapsed, location.pathname]) - return ( -