zclaw_openfang/desktop/src/components/Sidebar.tsx

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Settings, Users, Bot, GitBranch, MessageSquare, Layers } from 'lucide-react';
import { CloneManager } from './CloneManager';
import { HandList } from './HandList';
import { TaskList } from './TaskList';
import { TeamList } from './TeamList';
import { SwarmDashboard } from './SwarmDashboard';
import { useGatewayStore } from '../store/gatewayStore';
import { Button } from './ui';
import { containerVariants, defaultTransition } from '../lib/animations';

export type MainViewType = 'chat' | 'hands' | 'workflow' | 'team' | 'swarm';

interface SidebarProps {
  onOpenSettings?: () => void;
  onMainViewChange?: (view: MainViewType) => void;
  selectedHandId?: string;
  onSelectHand?: (handId: string) => void;
  selectedTeamId?: string;
  onSelectTeam?: (teamId: string) => void;
}

type Tab = 'clones' | 'hands' | 'workflow' | 'team' | 'swarm';

const TABS: { key: Tab; label: string; icon: React.ComponentType<{ className?: string }>; mainView?: MainViewType }[] = [
  { key: 'clones', label: '分身', icon: Bot },
  { key: 'hands', label: 'Hands', icon: MessageSquare, mainView: 'hands' },
  { key: 'workflow', label: '工作流', icon: GitBranch, mainView: 'workflow' },
  { key: 'team', label: '团队', icon: Users, mainView: 'team' },
  { key: 'swarm', label: '协作', icon: Layers, mainView: 'swarm' },
];

export function Sidebar({
  onOpenSettings,
  onMainViewChange,
  selectedHandId,
  onSelectHand,
  selectedTeamId,
  onSelectTeam
}: SidebarProps) {
  const [activeTab, setActiveTab] = useState<Tab>('clones');
  const userName = useGatewayStore((state) => state.quickConfig.userName) || '用户7141';

  const handleTabClick = (key: Tab, mainView?: MainViewType) => {
    setActiveTab(key);
    if (mainView && onMainViewChange) {
      onMainViewChange(mainView);
    } else if (onMainViewChange) {
      onMainViewChange('chat');
    }
  };

  const handleSelectHand = (handId: string) => {
    onSelectHand?.(handId);
    setActiveTab('hands');
    onMainViewChange?.('hands');
  };

  const handleSelectTeam = (teamId: string) => {
    onSelectTeam?.(teamId);
    setActiveTab('team');
    onMainViewChange?.('team');
  };

  return (
    <aside className="w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
      {/* 顶部标签 - 使用图标 */}
      <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
        {TABS.map(({ key, label, icon: Icon }) => (
          <button
            key={key}
            title={label}
            aria-label={label}
            aria-selected={activeTab === key}
            role="tab"
            className={`flex-1 py-2.5 px-2 text-xs font-medium transition-colors flex flex-col items-center gap-0.5 ${
              activeTab === key
                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50'
            }`}
            onClick={() => handleTabClick(key, TABS.find(t => t.key === key)?.mainView)}
          >
            <Icon className="w-4 h-4" />
            <span className="text-[10px]">{label}</span>
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div className="flex-1 overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab}
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
            transition={defaultTransition}
            className="h-full"
          >
            {activeTab === 'clones' && <CloneManager />}
            {activeTab === 'hands' && (
              <HandList
                selectedHandId={selectedHandId}
                onSelectHand={handleSelectHand}
              />
            )}
            {activeTab === 'workflow' && <TaskList />}
            {activeTab === 'team' && (
              <TeamList
                selectedTeamId={selectedTeamId}
                onSelectTeam={handleSelectTeam}
              />
            )}
            {activeTab === 'swarm' && <SwarmDashboard />}
          </motion.div>
        </AnimatePresence>
      </div>

      {/* 底部用户 */}
      <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
            {userName?.charAt(0) || '用'}
          </div>
          <span className="font-medium text-gray-700 dark:text-gray-300 truncate">{userName}</span>
          <Button
            variant="ghost"
            size="sm"
            className="ml-auto p-1.5"
            onClick={onOpenSettings}
            aria-label="打开设置"
          >
            <Settings className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </aside>
  );
}