zclaw_openfang/desktop/src/components/Sidebar.tsx

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Users, Bot, Zap, Layers, Package,
  Search, Sparkles, ChevronRight, X
} from 'lucide-react';
import { CloneManager } from './CloneManager';
import { TeamList } from './TeamList';
import { useConfigStore } from '../store/configStore';
import { containerVariants, defaultTransition } from '../lib/animations';

export type MainViewType = 'chat' | 'automation' | 'team' | 'swarm' | 'skills';

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

type Tab = 'chat' | 'clones' | 'automation' | 'team' | 'swarm' | 'skills';

// 导航项配置 - WorkBuddy 风格
const NAV_ITEMS: {
  key: Tab;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  mainView?: MainViewType;
}[] = [
  { key: 'clones', label: '分身', icon: Bot },
  { key: 'automation', label: '自动化', icon: Zap, mainView: 'automation' },
  { key: 'skills', label: '技能', icon: Package, mainView: 'skills' },
  { key: 'team', label: '团队', icon: Users, mainView: 'team' },
  { key: 'swarm', label: '协作', icon: Layers, mainView: 'swarm' },
];

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

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

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

  return (
    <aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
      {/* 搜索框 */}
      <div className="p-3 border-b border-gray-100 dark:border-gray-800">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
          <input
            type="text"
            placeholder="搜索..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-9 pr-8 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:border-gray-400 focus:ring-1 focus:ring-gray-400 transition-all text-gray-700 dark:text-gray-300 placeholder-gray-400"
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-400 transition-colors"
            >
              <X className="w-3 h-3" />
            </button>
          )}
        </div>
      </div>

      {/* 新对话按钮 */}
      <div className="px-3 py-2">
        <button
          onClick={() => {
            setActiveTab('clones');
            onNewChat?.();
          }}
          className="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-700 dark:text-gray-300 transition-colors group"
        >
          <Sparkles className="w-5 h-5 text-gray-500" />
          <span className="font-medium">新对话</span>
        </button>
      </div>

      {/* 导航项 */}
      <nav className="px-3 space-y-0.5">
        {NAV_ITEMS.map(({ key, label, icon: Icon, mainView }) => (
          <button
            key={key}
            onClick={() => handleNavClick(key, mainView)}
            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
              activeTab === key
                ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-gray-200'
            }`}
          >
            <Icon className={`w-5 h-5 ${activeTab === key ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400'}`} />
            <span>{label}</span>
            {activeTab === key && (
              <ChevronRight className="w-4 h-4 ml-auto text-gray-400" />
            )}
          </button>
        ))}
      </nav>

      {/* 分隔线 */}
      <div className="my-3 mx-3 border-t border-gray-100 dark:border-gray-800" />

      {/* 内容区域 - 只显示分身、团队、协作的内容，自动化和技能在主内容区显示 */}
      <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 overflow-y-auto"
          >
            {activeTab === 'clones' && <CloneManager />}
            {/* skills、automation 和 swarm 不在侧边栏显示内容，由主内容区显示 */}
            {activeTab === 'team' && (
              <TeamList
                selectedTeamId={selectedTeamId}
                onSelectTeam={handleSelectTeam}
              />
            )}
          </motion.div>
        </AnimatePresence>
      </div>

      {/* 底部用户栏 */}
      <div className="p-3 border-t border-gray-200 dark:border-gray-700">
        <button
          onClick={onOpenSettings}
          className="flex items-center gap-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors"
        >
          <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
            {userName?.charAt(0) || '用'}
          </div>
          <span className="flex-1 text-left text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
            {userName}
          </span>
          <ChevronRight className="w-4 h-4 text-gray-400" />
        </button>
      </div>
    </aside>
  );
}