import { Clover, Film, Home, Menu, MessageCircleHeart, MountainSnow, Search, Star, Swords, Tv, VenetianMask, } from 'lucide-react'; import Link from 'next/link'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useState, } from 'react'; interface SidebarContextType { isCollapsed: boolean; } const SidebarContext = createContext({ isCollapsed: false, }); export const useSidebar = () => useContext(SidebarContext); // 可替换为你自己的 logo 图片 const Logo = () => ( {process.env.NEXT_PUBLIC_SITE_NAME || 'MoonTV'} ); interface SidebarProps { onToggle?: (collapsed: boolean) => void; activePath?: string; } // 在浏览器环境下通过全局变量缓存折叠状态，避免组件重新挂载时出现初始值闪烁 declare global { interface Window { __sidebarCollapsed?: boolean; } } const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); // 若同一次 SPA 会话中已经读取过折叠状态，则直接复用，避免闪烁 const [isCollapsed, setIsCollapsed] = useState(() => { if ( typeof window !== 'undefined' && typeof window.__sidebarCollapsed === 'boolean' ) { return window.__sidebarCollapsed; } return false; // 默认展开 }); // 首次挂载时读取 localStorage，以便刷新后仍保持上次的折叠状态 useLayoutEffect(() => { const saved = localStorage.getItem('sidebarCollapsed'); if (saved !== null) { const val = JSON.parse(saved); setIsCollapsed(val); window.__sidebarCollapsed = val; } }, []); // 当折叠状态变化时，同步到 data 属性，供首屏 CSS 使用 useLayoutEffect(() => { if (typeof document !== 'undefined') { if (isCollapsed) { document.documentElement.dataset.sidebarCollapsed = 'true'; } else { delete document.documentElement.dataset.sidebarCollapsed; } } }, [isCollapsed]); const [active, setActive] = useState(activePath); useEffect(() => { // 优先使用传入的 activePath if (activePath) { setActive(activePath); } else { // 否则使用当前路径 const getCurrentFullPath = () => { const queryString = searchParams.toString(); return queryString ? `${pathname}?${queryString}` : pathname; }; const fullPath = getCurrentFullPath(); setActive(fullPath); } }, [activePath, pathname, searchParams]); const handleToggle = useCallback(() => { const newState = !isCollapsed; setIsCollapsed(newState); localStorage.setItem('sidebarCollapsed', JSON.stringify(newState)); if (typeof window !== 'undefined') { window.__sidebarCollapsed = newState; } onToggle?.(newState); }, [isCollapsed, onToggle]); const handleSearchClick = useCallback(() => { router.push('/search'); }, [router]); const contextValue = { isCollapsed, }; const menuItems = [ { icon: Film, label: '热门电影', href: '/douban?type=movie&tag=热门&title=热门电影', }, { icon: Tv, label: '热门剧集', href: '/douban?type=tv&tag=热门&title=热门剧集', }, { icon: Star, label: '豆瓣 Top250', href: '/douban?type=movie&tag=top250&title=豆瓣 Top250', }, { icon: Clover, label: '综艺', href: '/douban?type=tv&tag=综艺&title=综艺', }, { icon: Swords, label: '美剧', href: '/douban?type=tv&tag=美剧' }, { icon: MessageCircleHeart, label: '韩剧', href: '/douban?type=tv&tag=韩剧', }, { icon: MountainSnow, label: '日剧', href: '/douban?type=tv&tag=日剧' }, { icon: VenetianMask, label: '日漫', href: '/douban?type=tv&tag=日本动画' }, ]; return ( {/* 在移动端隐藏侧边栏 */}
); }; export default Sidebar;