ftb-project-management/apps/web/components/layout/Sidebar.tsx

'use client';

import { usePathname, useRouter } from 'next/navigation';
import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search, Lightbulb, Clock, Shield, Settings, Sparkles } from 'lucide-react';
import { useHasPermission } from '@/components/auth/Guard';
import { useAuthStore } from '@/stores/useAuthStore';
import { useMemberStore } from '@/stores/useMemberStore';

const NAV_GROUPS = [
  {
    label: '工作区',
    items: [
      { label: '与我相关', path: '/workspace', icon: Inbox, permission: null as string | null },
      { label: '产品', path: '/products', icon: Package, permission: 'product:view' },
      { label: '项目', path: '/projects', icon: FolderKanban, permission: 'project:view' },
      { label: '版本', path: '/versions', icon: Tag, permission: 'version:view' },
      { label: '需求池', path: '/requirements', icon: Lightbulb, permission: 'requirement:view' },
      { label: '加班记录', path: '/overtime', icon: Clock, permission: 'overtime:view' },
    ],
  },
  {
    label: '管理',
    items: [
      { label: '成员', path: '/admin/members', icon: Users, permission: 'member:view' },
      { label: '角色', path: '/admin/roles', icon: Shield, permission: 'role:view' },
      { label: 'AI 配置', path: '/admin/ai-config', icon: Sparkles, permission: '*' },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();

  const isActive = (path: string) =>
    pathname === path || (path !== '/' && pathname.startsWith(path));

  return (
    <aside className="flex h-screen w-60 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
      <div className="flex h-14 items-center gap-2 px-4">
        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--accent)]">
          <LayoutGrid className="h-4 w-4 text-white" strokeWidth={2.25} />
        </div>
        <span className="text-[13px] font-semibold tracking-tight text-[var(--ink)]">FTB</span>
      </div>

      <div className="px-3 pb-2">
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
          <input
            placeholder="搜索"
            className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] pl-8 pr-2 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:bg-[var(--bg-card)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
          />
        </div>
      </div>

      <nav className="flex-1 px-2 pt-2">
        {NAV_GROUPS.map((group) => (
          <NavGroup key={group.label} label={group.label} items={group.items} isActive={isActive} onNavigate={(p) => router.push(p)} />
        ))}
      </nav>

      <div className="border-t border-[var(--line)] p-2">
        <UserBlock />
      </div>
    </aside>
  );
}

function UserBlock() {
  const router = useRouter();
  const user = useAuthStore((s) => s.user);
  const role = useMemberStore((s) => s.roles.find((r) => r.id === user?.roleId));

  if (!user) {
    return (
      <div className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left">
        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--bg-subtle)] text-[11px] font-semibold text-[var(--ink-muted)]">?</div>
        <p className="truncate text-[13px] text-[var(--ink-muted)]">未登录</p>
      </div>
    );
  }

  return (
    <div className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5">
      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-[11px] font-semibold text-white">
        {user.name?.[0] ?? '?'}
      </div>
      <div className="min-w-0 flex-1">
        <p className="truncate text-[13px] font-medium text-[var(--ink)]">{user.name}</p>
        <p className="truncate text-[11px] text-[var(--ink-muted)]">{role?.name ?? '-'}</p>
      </div>
      <button
        onClick={() => router.push('/profile')}
        className="p-1 rounded hover:bg-[var(--bg-subtle)] text-[var(--ink-muted)] hover:text-[var(--accent)]"
        title="个人中心"
      >
        <Settings className="h-4 w-4" strokeWidth={1.75} />
      </button>
    </div>
  );
}

function NavGroup({ label, items, isActive, onNavigate }: {
  label: string;
  items: { label: string; path: string; icon: any; permission: string | null }[];
  isActive: (p: string) => boolean;
  onNavigate: (p: string) => void;
}) {
  const visibleItems = items.filter((item) => item.permission === null || /* eslint-disable-next-line react-hooks/rules-of-hooks */ true);
  if (visibleItems.length === 0) return null;
  return (
    <div className="mb-4">
      <p className="mb-1 px-2 text-[11px] font-medium text-[var(--ink-muted)]">{label}</p>
      {items.map((item) => (
        <NavItem key={item.path} item={item} active={isActive(item.path)} onNavigate={onNavigate} />
      ))}
    </div>
  );
}

function NavItem({ item, active, onNavigate }: {
  item: { label: string; path: string; icon: any; permission: string | null };
  active: boolean;
  onNavigate: (p: string) => void;
}) {
  const hasPerm = useHasPermission(item.permission ?? '');
  if (item.permission && !hasPerm) return null;
  const Icon = item.icon;
  return (
    <button
      onClick={() => onNavigate(item.path)}
      className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-[13px] transition-colors ${
        active
          ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent-hover)]'
          : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]'
      }`}
    >
      <Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
      <span className="truncate">{item.label}</span>
    </button>
  );
}