casualroom/apps/fenghuo/web/components/app-sidebar.tsx

'use client';

import * as React from 'react';
import {
	IconBell,
	IconCloud,
	IconSettings as IconSettingsConfig,
	IconDashboard,
	IconFileText,
	IconFolder,
	IconHelp,
	IconInnerShadowTop,
	IconServer,
	IconSettings,
	IconTags,
	IconUsers,
	IconUserShield,
	IconUser,
	IconUserShare,
} from '@tabler/icons-react';
import type { Icon } from '@tabler/icons-react';

import { NavDocuments } from '@/components/nav-documents';
import { NavMain } from '@/components/nav-main';
import { NavSecondary } from '@/components/nav-secondary';
import { NavUser } from '@/components/nav-user';
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from '@nice/ui/components/sidebar';
import {
	useAuth,
	filterMenuItems,
	SystemRole,
	SystemPermission,
	type User,
} from '@/components/providers/auth-provider';

// 统一的菜单项接口
interface MenuItem {
	title: string;
	url: string;
	icon: Icon;
	roles?: string[]; // 允许访问的角色
	permissions?: SystemPermission[]; // 允许访问的权限
	badge?: string; // 徽章内容
}

import { useTranslation } from '@nice/i18n';

const createPortalData = (user: User) => {
	const { t } = useTranslation();
	// 主导航菜单 - 用户个人功能
	const navMain: MenuItem[] = [
		{
			title: '仪表盘',
			url: '/dashboard',
			icon: IconDashboard,
			// 显示用户自己的数据：文章发布数，阅读量，点赞量，存储空间使用量，最新通知等
		},
		{
			title: '个人资料',
			url: '/dashboard/user',
			icon: IconUser,
		},
		{
			title: '我的文章',
			url: '/dashboard/articles',
			icon: IconFileText,
			permissions: [SystemPermission.POST_VIEW, SystemPermission.POST_LIST],
		},
		// {
		// 	title: '我的云盘',
		// 	url: '/dashboard/drive',
		// 	icon: IconCloud,
		// 	permissions: [SystemPermission.FILE_VIEW, SystemPermission.DRIVE_CREATE_FOLDER],
		// },
		{
			title: '文件媒体库',
			url: '/dashboard/resource',
			icon: IconFolder,
			permissions: [SystemPermission.FILE_VIEW],
		},

	];

	// 系统管理菜单 - 管理员专用
	const adminMenus: MenuItem[] = [

		{
			title: '分类管理',
			url: '/dashboard/categories',
			icon: IconTags,
			permissions: [SystemPermission.TAXONOMY_LIST, SystemPermission.TERM_LIST],
		},
		{
			title: '组织管理',
			url: '/dashboard/organization',
			icon: IconUsers,
			permissions: [SystemPermission.ORG_LIST, SystemPermission.ORG_VIEW],
		},
		{
			title: t('profile.title'),
			url: '/dashboard/profile',
			icon: IconUserShare,
			permissions: [SystemPermission.PROFILE_LIST, SystemPermission.PROFILE_VIEW],
		},
		{
			title: '角色权限',
			url: '/dashboard/permissions',
			icon: IconUserShield,
			permissions: [SystemPermission.ROLE_LIST, SystemPermission.ROLE_VIEW],
		},
		{
			title: '系统监控',
			url: '/dashboard/monitoring',
			icon: IconServer,
			permissions: [SystemPermission.MONITORING_VIEW],
		},
		{
			title: '系统配置',
			url: '/dashboard/config',
			icon: IconSettingsConfig,
			permissions: [SystemPermission.CONFIG_VIEW, SystemPermission.CONFIG_EDIT],
		},
	];

	// 通用菜单
	const navSecondary: MenuItem[] = [
		{
			title: '通知中心',
			url: '/dashboard/notification',
			icon: IconBell,
			badge: '3', // 示例通知数量
		},
		{
			title: '设置',
			url: '/settings',
			icon: IconSettings,
		},
	];

	// 文档快捷访问
	const documents: MenuItem[] = [
		{
			title: '我的文件夹',
			url: '/drive/folders',
			icon: IconFolder,
			permissions: [SystemPermission.FILE_VIEW, SystemPermission.DRIVE_CREATE_FOLDER],
		},
		{
			title: '最近文档',
			url: '/drive/recent',
			icon: IconFileText,
			permissions: [SystemPermission.FILE_VIEW],
		},
		{
			title: '共享文件',
			url: '/drive/shared',
			icon: IconCloud,
			permissions: [SystemPermission.FILE_VIEW, SystemPermission.FILE_SHARE],
		},
	];
	return {
		navMain: filterMenuItems(navMain, user),
		adminMenus: filterMenuItems(adminMenus, user),
		navSecondary: filterMenuItems(navSecondary, user),
		documents: filterMenuItems(documents, user),
	};
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	const { user, isLoading } = useAuth();
	const data = createPortalData(user!);
	return (
		<Sidebar collapsible="offcanvas" {...props}>
			<SidebarHeader>
				<SidebarMenu>
					<SidebarMenuItem>
						<SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
							<a href="/dashboard">
								<IconInnerShadowTop className="!size-5" />
								<span className="text-base font-semibold">FengHuo</span>
							</a>
						</SidebarMenuButton>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarHeader>
			<SidebarContent>
				{/* 主导航 - 用户个人功能 */}
				<NavMain items={data.navMain} showQuickActions={true} />
				{/* 系统管理菜单 - 仅管理员可见 */}
				{data.adminMenus.length > 0 && <NavMain items={data.adminMenus} title="系统管理" />}
				{/* 文档快捷访问 */}
				{/* <NavDocuments items={data.documents} /> */}
				{/* 底部菜单 */}
				{/* <NavSecondary items={data.navSecondary} className="mt-auto" /> */}
			</SidebarContent>
			<SidebarFooter>
				<NavUser user={user!} />
			</SidebarFooter>
		</Sidebar>
	);
}