users/app/components/Sidebar.tsx

"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { LayoutDashboard, Database, Users, BrainCircuit, Settings, ChevronLeft } from "lucide-react"

export default function Sidebar() {
  const pathname = usePathname()
  const [expanded, setExpanded] = useState(true)

  const toggleSidebar = () => {
    setExpanded(!expanded)
  }

  // 简化的导航结构
  const navItems = [
    {
      title: "数据概览",
      href: "/",
      icon: <LayoutDashboard className="h-5 w-5" />,
      description: "平台整体数据分析与监控",
    },
    {
      title: "数据中台",
      href: "/data-platform",
      icon: <Database className="h-5 w-5" />,
      description: "多源数据整合与处理中心",
    },
    {
      title: "用户画像",
      href: "/user-portrait",
      icon: <Users className="h-5 w-5" />,
      description: "用户数据管理与画像分析",
    },
    {
      title: "AI智能助手",
      href: "/ai-assistant",
      icon: <BrainCircuit className="h-5 w-5" />,
      description: "AI数据分析与营销策略",
    },
  ]

  return (
    <div
      className={cn(
        "flex flex-col h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
        expanded ? "w-72" : "w-20",
      )}
    >
      {/* 头部 */}
      <div className="flex items-center h-16 px-6 border-b border-gray-200">
        {expanded ? (
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
              <Database className="h-5 w-5 text-blue-600" />
            </div>
            <h1 className="text-lg font-semibold text-gray-900">数据资产中台</h1>
          </div>
        ) : (
          <div className="mx-auto">
            <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
              <Database className="h-5 w-5 text-blue-600" />
            </div>
          </div>
        )}
      </div>

      {/* 导航菜单 */}
      <div className="flex-1 overflow-y-auto py-4">
        <nav className="space-y-2 px-4">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200 group",
                pathname === item.href
                  ? "bg-blue-50 text-blue-700 border border-blue-200"
                  : "text-gray-700 hover:bg-gray-50 hover:text-blue-600",
              )}
            >
              <div className="transition-colors duration-200">{item.icon}</div>
              {expanded && (
                <div className="flex-1 ml-3">
                  <div className="font-medium">{item.title}</div>
                  <div className="text-xs text-gray-500 mt-0.5">{item.description}</div>
                </div>
              )}
            </Link>
          ))}
        </nav>
      </div>

      {/* 底部设置和折叠按钮 */}
      <div className="mt-auto border-t border-gray-200">
        <Link
          href="/settings"
          className={cn(
            "flex items-center px-4 py-3 mx-4 my-2 text-sm font-medium rounded-lg transition-all duration-200",
            pathname === "/settings"
              ? "bg-blue-50 text-blue-700 border border-blue-200"
              : "text-gray-600 hover:bg-gray-50 hover:text-blue-600",
          )}
        >
          <div className={cn("transition-colors duration-200", !expanded && "mx-auto")}>
            <Settings className="h-4 w-4" />
          </div>
          {expanded && <span className="ml-2">系统设置</span>}
        </Link>

        <div className="p-4">
          <button
            onClick={toggleSidebar}
            className="w-full flex items-center justify-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-all duration-200"
          >
            <ChevronLeft
              className={cn(
                "h-5 w-5 transform transition-transform duration-300",
                expanded ? "rotate-0" : "rotate-180",
              )}
            />
          </button>
        </div>
      </div>
    </div>
  )
}