"use client"; // 中后台侧边导航区块 —— 独立侧栏片段（非整页壳，整页壳见 AdminLayout）。 // 结构：顶部 Logo + 折叠切换 / 分组菜单（组标题 + 图标 + 文字 + 选中高亮 + 计数 Badge）/ 底部用户卡。 // 复制后改：GROUPS 菜单数据、品牌名、底部用户信息。约 220px 宽，放在示意容器里展示。 // 折叠态：收起为 56px，仅留图标（带计数的项用红点提示）。 import { useState } from "react"; import { Avatar, Badge, Button } from "@hulianui/ui"; import { BarChart3, Bell, ChevronsLeft, ChevronsRight, CreditCard, FileText, LayoutDashboard, Settings, ShieldCheck, Users, } from "lucide-react"; // 分组菜单 —— 复制后按需增删；count 为可选计数 Badge const GROUPS = [ { title: "概览", items: [ { key: "dashboard", label: "工作台", icon: LayoutDashboard }, { key: "analytics", label: "数据分析", icon: BarChart3 }, ], }, { title: "业务", items: [ { key: "customers", label: "客户管理", icon: Users, count: 12 }, { key: "billing", label: "账单结算", icon: CreditCard }, { key: "docs", label: "文档中心", icon: FileText }, { key: "alerts", label: "告警通知", icon: Bell, count: 5 }, ], }, { title: "系统", items: [ { key: "security", label: "安全合规", icon: ShieldCheck }, { key: "settings", label: "系统设置", icon: Settings }, ], }, ] as const; export function SidebarNavBlock() { const [collapsed, setCollapsed] = useState(false); const [active, setActive] = useState("customers"); return ( // 示意容器：模拟中后台页面背景，让侧栏有上下文

{/* 顶部：Logo + 折叠切换 */}

瀚

{!collapsed && ( 瀚云控制台 )}

{/* 分组菜单 */}

{GROUPS.map((group) => (

{!collapsed && (

{group.title}

)}

))}

{/* 底部用户卡 */}

{!collapsed && ( <>

林晚晴

管理员

)}

{/* 右侧内容占位，仅作示意 */}

主内容区

); }