AIclinicalresearch/frontend-v2/src/modules/dc/pages/tool-c/components/Toolbar.tsx

/**
 * Tool C Toolbar组件
 * 
 * 扁平化工具栏：7个快捷操作按钮 + 搜索框
 */

import {
  Calculator,
  ArrowLeftRight,
  Wand2,
  Filter,
  Search,
  Trash2,
} from 'lucide-react';

interface ToolbarButtonProps {
  icon: React.ElementType;
  label: string;
  colorClass: string;
  onClick?: () => void;
  disabled?: boolean;
}

const ToolbarButton: React.FC<ToolbarButtonProps> = ({
  icon: Icon,
  label,
  colorClass,
  onClick,
  disabled = true, // MVP阶段暂不可用
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        flex items-center gap-1.5
        px-3 py-2
        rounded-lg
        transition-all
        disabled:opacity-40 disabled:cursor-not-allowed
        hover:bg-slate-50 hover:shadow-sm
        ${disabled ? 'text-slate-400' : colorClass}
      `}
      title={disabled ? '开发中...' : label}
    >
      <Icon className="w-4 h-4" />
      <span className="text-xs font-medium">{label}</span>
    </button>
  );
};

interface ToolbarProps {
  onFilterClick?: () => void;
  onRecodeClick?: () => void;
  onBinningClick?: () => void;
  onConditionalClick?: () => void;
  onDropnaClick?: () => void;
  onComputeClick?: () => void;
  onDedupClick?: () => void;
  onPivotClick?: () => void;
  onMiceClick?: () => void;
  sessionId: string | null;
}

const Toolbar: React.FC<ToolbarProps> = ({
  onFilterClick,
  onRecodeClick,
  onBinningClick,
  onConditionalClick,
  onDropnaClick,
  onComputeClick,
  onPivotClick,
  sessionId,
}) => {
  return (
    <div className="bg-white border-b border-slate-200 px-4 py-2 flex items-center gap-2 overflow-x-auto flex-none shadow-sm z-10">
      {/* 核心按钮（Phase 1-2） */}
      <ToolbarButton
        icon={Filter}
        label="高级筛选"
        colorClass="text-indigo-600 bg-indigo-50 hover:bg-indigo-100"
        onClick={onFilterClick}
        disabled={!sessionId}
      />
      <ToolbarButton
        icon={ArrowLeftRight}
        label="数值映射"
        colorClass="text-cyan-600 bg-cyan-50 hover:bg-cyan-100"
        onClick={onRecodeClick}
        disabled={!sessionId}
      />
      <ToolbarButton
        icon={Calculator}
        label="生成分类"
        colorClass="text-emerald-600 bg-emerald-50 hover:bg-emerald-100"
        onClick={onBinningClick}
        disabled={!sessionId}
      />
      
      <div className="w-[1px] h-8 bg-slate-200 mx-2"></div>
      
      {/* 辅助按钮（Phase 2） */}
      <ToolbarButton
        icon={Wand2}
        label="条件生成列"
        colorClass="text-purple-600 bg-purple-50 hover:bg-purple-100"
        onClick={onConditionalClick}
        disabled={!sessionId}
      />
      <ToolbarButton
        icon={Trash2}
        label="缺失值处理"
        colorClass="text-red-600 bg-red-50 hover:bg-red-100"
        onClick={onDropnaClick}
        disabled={!sessionId}
      />
      <ToolbarButton
        icon={Calculator}
        label="计算列"
        colorClass="text-green-600 bg-green-50 hover:bg-green-100"
        onClick={onComputeClick}
        disabled={!sessionId}
      />
      
      <div className="w-[1px] h-8 bg-slate-200 mx-2"></div>
      
      {/* 高级按钮（Phase 3） */}
      <ToolbarButton
        icon={ArrowLeftRight}
        label="长↔宽表"
        colorClass="text-indigo-600 bg-indigo-50 hover:bg-indigo-100"
        onClick={onPivotClick}
        disabled={!sessionId}
      />
      
      <div className="flex-1"></div>
      
      {/* ✅ 优化3.2：搜索框高度缩小 */}
      <div className="relative">
        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
        <input
          className="pl-8 pr-4 py-1.5 text-xs bg-slate-50 border border-slate-200 rounded-lg w-48 focus:w-64 transition-all outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500"
          placeholder="搜索值..."
          disabled
          title="开发中..."
        />
      </div>
    </div>
  );
};

export default Toolbar;