Initial commit

audi-content-portal/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,118 @@
+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>
+  )
+}