/* eslint-disable @typescript-eslint/no-explicit-any */ 'use client'; import { Cat, Clover, Film, Home, Menu, Radio, Search, Star, Tv } from 'lucide-react'; import Link from 'next/link'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useState, } from 'react'; import { useSite } from './SiteProvider'; interface SidebarContextType { isCollapsed: boolean; } const SidebarContext = createContext({ isCollapsed: false, }); export const useSidebar = () => useContext(SidebarContext); // 可替换为你自己的 logo 图片 const Logo = () => { const { siteName } = useSite(); return ( {siteName} ); }; 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, setMenuItems] = useState([ { icon: Film, label: '电影', href: '/douban?type=movie', }, { icon: Tv, label: '剧集', href: '/douban?type=tv', }, { icon: Cat, label: '动漫', href: '/douban?type=anime', }, { icon: Clover, label: '综艺', href: '/douban?type=show', }, { icon: Radio, label: '直播', href: '/live', }, ]); useEffect(() => { const runtimeConfig = (window as any).RUNTIME_CONFIG; if (runtimeConfig?.CUSTOM_CATEGORIES?.length > 0) { setMenuItems((prevItems) => [ ...prevItems, { icon: Star, label: '自定义', href: '/douban?type=custom', }, ]); } }, []); return ( {/* 在移动端隐藏侧边栏 */}
); }; export default Sidebar;