'use client'; import { useRouter, usePathname } from 'next/navigation'; import { useState, useEffect, useRef } from 'react'; import { useTranslation } from '@/hooks/useTranslation'; import { useSidebar } from '@/hooks/useSidebar'; import { getNavigationConfig } from '@/config/navigation'; import { useFilteredNavigation } from '@/hooks/useFilteredNavigation'; import { getEnvBannerVariant } from '@/lib/env-banner'; export function Sidebar() { const router = useRouter(); const pathname = usePathname(); const { t } = useTranslation(); const { collapsed, userPreference, setCollapsed } = useSidebar(); const envBannerVariant = getEnvBannerVariant(); const [expandedMenus, setExpandedMenus] = useState(['organization']); // 默认展开组织架构 const [mounted, setMounted] = useState(false); const [hoveredTooltip, setHoveredTooltip] = useState<{ label: string; x: number; y: number; } | null>(null); const showTimerRef = useRef | null>(null); const hideTimerRef = useRef | null>(null); // 定义图标（必须在所有 hooks 之后，条件渲染之前） const icons = { dashboard: ( ), organization: ( ), syncCenter: ( ), approvals: ( ), smartHr: ( ), workRecord: ( ), automation: ( ), parts: ( ), forms: ( ), feedback: ( ), tickets: ( ), knowledgeBase: ( ), audit: ( ), logs: ( ), performance: ( ), devtracker: ( ), meetingAttendance: ( ), robotManager: ( ), opsCenter: ( ), iamAdmin: ( ), internalApps: ( ), }; // 获取导航配置并根据权限过滤（必须在所有 hooks 之后，条件渲染之前） const allNavItems = getNavigationConfig(t, icons); const navItems = useFilteredNavigation(allNavItems); useEffect(() => { setMounted(true); }, []); useEffect(() => { return () => { if (showTimerRef.current) clearTimeout(showTimerRef.current); if (hideTimerRef.current) clearTimeout(hideTimerRef.current); }; }, []); useEffect(() => { if (!collapsed) { setHoveredTooltip(null); } }, [collapsed]); // 当直接访问具体应用页面时，自动折叠侧边栏（仅当用户未手动设置偏好时） useEffect(() => { if (!mounted) return; // 🔍 调试日志 console.log('[Sidebar] Route changed:', { pathname, userPreference, currentCollapsed: collapsed }); // 如果用户已手动设置过偏好，则尊重用户选择，不再自动折叠 if (userPreference !== null) { console.log('[Sidebar] User preference detected, skipping auto-collapse'); return; } // 概览页面保持侧边栏展开 if (pathname === '/overview' || pathname === '/') { return; } // 检查是否是具体应用页面（非概览页） const isAppPage = pathname !== '/overview' && pathname !== '/' && pathname !== '/login'; if (isAppPage) { console.log('[Sidebar] Auto-collapsing sidebar (no user preference)'); // 自动折叠侧边栏（非用户操作，不记录偏好） setCollapsed(true, false); } }, [pathname, mounted, userPreference, setCollapsed, collapsed]); // 防止 hydration 错误：在客户端挂载前显示骨架屏 if (!mounted) { return (
{[1, 2, 3, 4, 5].map((i) => (
))}
); } const toggleMenu = (path: string) => { setExpandedMenus(prev => prev.includes(path) ? prev.filter(p => p !== path) : [...prev, path] ); }; const showCollapsedTooltip = ( label: string, rect: { right: number; top: number; height: number } ) => { if (!collapsed) return; if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); hideTimerRef.current = null; } if (showTimerRef.current) { clearTimeout(showTimerRef.current); } showTimerRef.current = setTimeout(() => { setHoveredTooltip({ label, x: rect.right + 10, y: rect.top + rect.height / 2, }); }, 120); }; const hideCollapsedTooltip = (label: string) => { if (!collapsed) return; if (showTimerRef.current) { clearTimeout(showTimerRef.current); showTimerRef.current = null; } if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); } hideTimerRef.current = setTimeout(() => { setHoveredTooltip((prev) => (prev?.label === label ? null : prev)); }, 80); }; const sidebarTop = envBannerVariant === 'uat' ? '92px' : '64px'; return (
{/* Navigation Items - 飞书风格 */} {/* Collapse Button - 飞书风格 */}
{/* 折叠态悬浮名称（全局浮层，避免被滚动容器裁剪） */} {collapsed && hoveredTooltip && (
{hoveredTooltip.label}
)}
); }