s2f/frontend/components/layout/Sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "motion/react";
import { 
  LayoutDashboard, 
  FileText, 
  AlertTriangle, 
  Settings,
  ChevronLeft,
  ChevronRight,
  BarChart3,
  Receipt,
  Download,
  BookOpen,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useState } from "react";

const navItems = [
  { 
    label: "工作台", 
    href: "/dashboard", 
    icon: LayoutDashboard 
  },
  { 
    label: "对账任务", 
    href: "/tasks", 
    icon: FileText 
  },
  { 
    label: "异常处理", 
    href: "/exceptions", 
    icon: AlertTriangle 
  },
  { 
    label: "成本分析", 
    href: "/analysis", 
    icon: BarChart3 
  },
  { 
    label: "凭证管理", 
    href: "/vouchers", 
    icon: Receipt 
  },
  { 
    label: "导出中心", 
    href: "/exports", 
    icon: Download 
  },
  { 
    label: "知识库", 
    href: "/knowledge", 
    icon: BookOpen 
  },
  { 
    label: "规则设置", 
    href: "/settings/rules", 
    icon: Settings 
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <aside 
      className={cn(
        "sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-card transition-all duration-300 flex flex-col",
        collapsed ? "w-16" : "w-56"
      )}
    >
      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-1">
        {navItems.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
          const Icon = item.icon;
          
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all relative group",
                isActive 
                  ? "bg-primary/10 text-primary" 
                  : "text-muted-foreground hover:bg-accent hover:text-foreground",
                collapsed && "justify-center px-0"
              )}
            >
              {/* Active indicator bar */}
              {isActive && (
                <>
                  <motion.div
                    layoutId="activeIndicator"
                    className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-primary rounded-r-full"
                    transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
                  />
                  <motion.div
                    layoutId="activeBg"
                    className="absolute inset-0 bg-primary/10 rounded-lg -z-10"
                    transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
                  />
                </>
              )}
              
              <Icon className={cn("w-5 h-5 shrink-0", isActive && "text-primary")} />
              
              {!collapsed && (
                <span className={cn(
                  "text-sm font-medium",
                  isActive && "text-primary"
                )}>
                  {item.label}
                </span>
              )}
              
              {/* Tooltip for collapsed state */}
              {collapsed && (
                <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-md">
                  {item.label}
                </div>
              )}
            </Link>
          );
        })}
      </nav>

      {/* Collapse toggle */}
      <div className="border-t border-border">
        <button
          onClick={() => setCollapsed(!collapsed)}
          className={cn(
            "flex items-center h-10 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
            collapsed ? "justify-center w-full" : "px-4 gap-2"
          )}
        >
          {collapsed ? (
            <ChevronRight className="w-4 h-4" />
          ) : (
            <>
              <ChevronLeft className="w-4 h-4" />
              <span className="text-xs">收起菜单</span>
            </>
          )}
        </button>
      </div>
    </aside>
  );
}