TERES_web_frontend/src/pages/knowledge/components/FloatingActionButtons.tsx

import React from 'react';
import { SpeedDial, SpeedDialAction } from '@mui/material';
import { 
  Dashboard as DashboardIcon,
  Search as TestIcon,
  Settings as ConfigIcon,

} from '@mui/icons-material';

interface FloatingActionButtonsProps {
  onTestClick: () => void;
  onConfigClick: () => void;
}

const FloatingActionButtons: React.FC<FloatingActionButtonsProps> = ({
  onTestClick,
  onConfigClick,
}) => {
  const actions = [
    { 
      icon: <TestIcon />, 
      name: '检索测试', 
      onClick: onTestClick,
    },
    { 
      icon: <ConfigIcon />, 
      name: '配置设置', 
      onClick: onConfigClick,
    },
  ];

  return (
    <SpeedDial
      ariaLabel="知识库操作"
      sx={{ 
        position: 'fixed', 
        bottom: 128,
        right: 64,
        '& .MuiSpeedDial-fab': {
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        },
      }}
      icon={<DashboardIcon />}
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          slotProps={{
            tooltip: {
              title: action.name,
              sx: {
                bgcolor: 'primary.main',
                color: 'white',
                ":hover": {
                  bgcolor: 'primary.dark',
                },
              },
            },
          }}
          onClick={action.onClick}
        />
      ))}
    </SpeedDial>
  );
};

export default FloatingActionButtons;