99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { cn } from '@/lib/utils';
|
|
import { useUser } from './user-context';
|
|
import {
|
|
LayoutDashboard,
|
|
FolderKanban,
|
|
Target,
|
|
CalendarClock,
|
|
BarChart3,
|
|
Users,
|
|
Gauge,
|
|
Files,
|
|
} from 'lucide-react';
|
|
|
|
const mainNavItems = [
|
|
{ href: '/', label: '驾驶舱', icon: LayoutDashboard },
|
|
{ href: '/projects', label: '项目', icon: FolderKanban },
|
|
{ href: '/my-krs', label: '我的KR', icon: Target },
|
|
{ href: '/meeting', label: '例会', icon: CalendarClock },
|
|
{ href: '/analysis', label: '分析', icon: BarChart3 },
|
|
];
|
|
|
|
const adminNavItems = [
|
|
{ href: '/admin/users', label: '用户管理', icon: Users },
|
|
{ href: '/admin/metrics', label: '指标库', icon: Gauge },
|
|
{ href: '/admin/templates', label: '模板库', icon: Files },
|
|
];
|
|
|
|
export function MainNav() {
|
|
const pathname = usePathname();
|
|
const { currentUser } = useUser();
|
|
const isOwner = currentUser?.role === 'owner';
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-40 bg-white border-b">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="flex items-center justify-between h-14">
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/" className="flex items-center gap-2 font-bold text-lg">
|
|
<Target className="h-6 w-6 text-teal-600" />
|
|
<span className="text-slate-800">OKR 执行系统</span>
|
|
</Link>
|
|
<div className="hidden md:flex items-center gap-1">
|
|
{mainNavItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href ||
|
|
(item.href !== '/' && pathname.startsWith(item.href));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-teal-50 text-teal-700'
|
|
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{isOwner && (
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-xs text-muted-foreground mr-2 hidden lg:block">管理</span>
|
|
{adminNavItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-slate-800 text-white'
|
|
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span className="hidden lg:inline">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|