2026-03-17 13:17:02 +08:00

292 lines
9.2 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { logout } from "@/lib/api/auth"
import {
Brain,
Music,
Shirt,
Gift,
Home,
Utensils,
User,
Settings,
BarChart,
LogOut,
Lock,
Sparkles,
Heart,
Footprints,
Trophy,
} from "lucide-react"
export function Sidebar() {
const pathname = usePathname()
const router = useRouter()
const handleLogout = async () => {
try {
// 调用退出登录API
await logout()
// 退出后重定向到登录页面
router.push("/login")
} catch (error) {
console.error("退出登录失败:", error)
}
}
return (
<div className="flex h-screen border-r bg-gradient-to-b from-white to-gray-50 shadow-md">
<div className="flex w-full flex-col space-y-4 p-4">
<div className="flex h-16 items-center px-4 py-2">
<div className="flex items-center gap-2">
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
<Sparkles className="h-4 w-4 text-white" />
</div>
<h2 className="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-purple-600">
</h2>
</div>
</div>
<div className="space-y-1.5">
<Button
variant={pathname === "/" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/">
<BarChart className="mr-2 h-4 w-4" />
</Link>
</Button>
<div className="pt-4 pb-2">
<p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI </p>
</div>
<Button
variant={pathname === "/ai-model" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/ai-model"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/ai-model">
<Brain className="mr-2 h-4 w-4" />
</Link>
</Button>
<div className="pt-4 pb-2">
<p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider"></p>
</div>
<Button
variant={pathname === "/outfits" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/outfits"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/outfits">
<Shirt className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/props" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/props"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/props">
<Gift className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/home-decor" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/home-decor"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/home-decor">
<Home className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/songs" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/songs"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/songs">
<Music className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/dances" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/dances"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/dances">
<Footprints className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/food" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/food"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/food">
<Utensils className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/achievements" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/achievements"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/achievements">
<Trophy className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/affinity" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/affinity"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/affinity">
<Heart className="mr-2 h-4 w-4" />
</Link>
</Button>
<div className="pt-4 pb-2">
<p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider"></p>
</div>
<Button
variant={pathname === "/users" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/users"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/users">
<User className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/permissions" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/permissions"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/permissions">
<Lock className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button
variant={pathname === "/settings" ? "default" : "ghost"}
className={cn(
"w-full justify-start",
pathname === "/settings"
? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
: "hover:bg-gray-100",
)}
asChild
>
<Link href="/settings">
<Settings className="mr-2 h-4 w-4" />
</Link>
</Button>
</div>
<div className="mt-auto pt-4">
<Button
variant="ghost"
className="w-full justify-start hover:bg-red-50 hover:text-red-600 transition-colors"
onClick={handleLogout}
>
<LogOut className="mr-2 h-4 w-4" />
退
</Button>
</div>
</div>
</div>
)
}