CA/frontend/src/components/SideNav.tsx

import { useState } from 'react';

interface SideNavProps {
  activePage: string;
  onPageChange: (page: string) => void;
  alertCount?: number;
}

const modules: { id: string; label: string; icon: React.ReactNode; items: { id: string; label: string }[] }[] = [
  {
    id: 'monitoring',
    label: '监测',
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
      </svg>
    ),
    items: [
      { id: 'monitoring', label: '监测面板' },
    ],
  },
  {
    id: 'alert',
    label: '预警',
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
      </svg>
    ),
    items: [
      { id: 'alerts', label: '预警地图' },
    ],
  },
  {
    id: 'analysis',
    label: '分析',
    icon: (
      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
      </svg>
    ),
    items: [
      { id: 'trend-analysis', label: '趋势分析' },
      { id: 'district-comparison', label: '区域对比' },
      { id: 'insights', label: '智能洞察' },
      { id: 'reports', label: '报表中心' },
    ],
  },
];

export function SideNav({
  activePage,
  onPageChange,
  alertCount = 0,
}: SideNavProps) {
  const [expanded, setExpanded] = useState<string | null>('monitoring');

  const handleItemClick = (moduleId: string, itemId: string) => {
    setExpanded(moduleId);
    onPageChange(itemId);
  };

  const isActiveModule = (moduleId: string) => {
    const module = modules.find(m => m.id === moduleId);
    if (!module) return false;
    return module.items.some(item => item.id === activePage);
  };

  return (
    <aside className="w-[200px] bg-bg-card border-r border-border fixed top-[52px] left-0 bottom-0 overflow-y-auto py-4 px-2">
      {modules.map((module) => (
        <div key={module.id} className="mb-4">
          <button
            onClick={() => setExpanded(expanded === module.id ? null : module.id)}
            className={`w-full flex items-center gap-[10px] px-3 py-[9px] rounded-md text-[14px] font-semibold transition-colors ${
              isActiveModule(module.id)
                ? 'bg-primary-muted text-primary'
                : 'text-text-primary hover:bg-bg-hover'
            }`}
          >
            <span className="w-4 h-4 flex items-center justify-center">
              {module.icon}
            </span>
            <span>{module.label}</span>
            {module.id === 'alert' && alertCount > 0 && (
              <span className="ml-auto bg-danger-light text-danger text-[10px] font-semibold px-[5px] py-[2px] rounded">
                {alertCount > 99 ? '99+' : alertCount}
              </span>
            )}
          </button>

          {expanded === module.id && (
            <div className="mt-1 pl-7">
              {module.items.map((item) => (
                <button
                  key={item.id}
                  onClick={() => handleItemClick(module.id, item.id)}
                  className={`w-full text-left px-3 py-[7px] rounded text-[13px] font-medium transition-colors ${
                    activePage === item.id
                      ? 'bg-bg-active text-primary'
                      : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
                  }`}
                >
                  {item.label}
                </button>
              ))}
            </div>
          )}
        </div>
      ))}
    </aside>
  );
}