119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
|
import * as React from "react"
|
||
|
|
import {
|
||
|
|
LayoutDashboard,
|
||
|
|
Car,
|
||
|
|
NotebookPen,
|
||
|
|
Users,
|
||
|
|
UserCog,
|
||
|
|
Settings,
|
||
|
|
LogOut,
|
||
|
|
ChevronRight
|
||
|
|
} from "lucide-react"
|
||
|
|
|
||
|
|
import {
|
||
|
|
Sidebar,
|
||
|
|
SidebarContent,
|
||
|
|
SidebarFooter,
|
||
|
|
SidebarGroup,
|
||
|
|
SidebarGroupContent,
|
||
|
|
SidebarGroupLabel,
|
||
|
|
SidebarHeader,
|
||
|
|
SidebarMenu,
|
||
|
|
SidebarMenuButton,
|
||
|
|
SidebarMenuItem,
|
||
|
|
SidebarRail,
|
||
|
|
} from "@/components/ui/sidebar"
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{
|
||
|
|
title: "仪表盘",
|
||
|
|
icon: LayoutDashboard,
|
||
|
|
id: "dashboard",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "车型库",
|
||
|
|
icon: Car,
|
||
|
|
id: "car-library",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "小程序内容库",
|
||
|
|
icon: NotebookPen,
|
||
|
|
id: "mini-content",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "潜客管理",
|
||
|
|
icon: Users,
|
||
|
|
id: "leads",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "用户与权限",
|
||
|
|
icon: UserCog,
|
||
|
|
id: "user-access",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "系统设置",
|
||
|
|
icon: Settings,
|
||
|
|
id: "settings",
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
export function AppSidebar({
|
||
|
|
activeTab,
|
||
|
|
setActiveTab
|
||
|
|
}: {
|
||
|
|
activeTab: string;
|
||
|
|
setActiveTab: (id: string) => void
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<Sidebar collapsible="icon">
|
||
|
|
<SidebarHeader className="border-b border-sidebar-border/50 py-6">
|
||
|
|
<div className="flex items-center gap-3 px-2">
|
||
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-sm bg-audi-red text-white">
|
||
|
|
<span className="text-xs font-bold tracking-tighter">A</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
|
||
|
|
<span className="text-sm font-bold tracking-[0.15em] uppercase truncate">Audi Portal</span>
|
||
|
|
<span className="text-[10px] text-muted-foreground tracking-widest uppercase truncate">Smart Operations</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SidebarHeader>
|
||
|
|
<SidebarContent>
|
||
|
|
<SidebarGroup>
|
||
|
|
<SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">主要功能</SidebarGroupLabel>
|
||
|
|
<SidebarGroupContent>
|
||
|
|
<SidebarMenu>
|
||
|
|
{navItems.map((item) => (
|
||
|
|
<SidebarMenuItem key={item.id}>
|
||
|
|
<SidebarMenuButton
|
||
|
|
tooltip={item.title}
|
||
|
|
isActive={activeTab === item.id}
|
||
|
|
onClick={() => setActiveTab(item.id)}
|
||
|
|
className="data-active:bg-audi-red/5 data-active:text-audi-red"
|
||
|
|
>
|
||
|
|
<item.icon />
|
||
|
|
<span>{item.title}</span>
|
||
|
|
{activeTab === item.id && (
|
||
|
|
<ChevronRight className="ml-auto size-3 opacity-50 group-data-[collapsible=icon]:hidden" />
|
||
|
|
)}
|
||
|
|
</SidebarMenuButton>
|
||
|
|
</SidebarMenuItem>
|
||
|
|
))}
|
||
|
|
</SidebarMenu>
|
||
|
|
</SidebarGroupContent>
|
||
|
|
</SidebarGroup>
|
||
|
|
</SidebarContent>
|
||
|
|
<SidebarFooter className="border-t border-sidebar-border/50 p-4">
|
||
|
|
<SidebarMenu>
|
||
|
|
<SidebarMenuItem>
|
||
|
|
<SidebarMenuButton className="text-muted-foreground hover:text-foreground">
|
||
|
|
<LogOut />
|
||
|
|
<span>退出登录</span>
|
||
|
|
</SidebarMenuButton>
|
||
|
|
</SidebarMenuItem>
|
||
|
|
</SidebarMenu>
|
||
|
|
</SidebarFooter>
|
||
|
|
<SidebarRail />
|
||
|
|
</Sidebar>
|
||
|
|
)
|
||
|
|
}
|