TERES_web_frontend/src/pages/setting/components/LLMFactoryCard.tsx

import {
  Settings as SettingsIcon,
} from '@mui/icons-material'
import { LlmSvgIcon } from "@/components/AppSvgIcon";
import { IconMap, type LLMFactory } from "@/constants/llm";
import type { IFactory } from "@/interfaces/database/llm";
import { Box, Button, Card, CardContent, Chip, Typography } from "@mui/material";

// 模型类型标签颜色映射
export const MODEL_TYPE_COLORS: Record<string, string> = {
  'LLM': '#1976d2',
  'TEXT EMBEDDING': '#388e3c',
  'TEXT RE-RANK': '#f57c00',
  'TTS': '#7b1fa2',
  'SPEECH2TEXT': '#c2185b',
  'IMAGE2TEXT': '#5d4037',
  'MODERATION': '#455a64',
};

// 模型工厂卡片组件
interface ModelFactoryCardProps {
  factory: IFactory;
  onConfigure: (factory: IFactory) => void;
}

const LLMFactoryCard: React.FC<ModelFactoryCardProps> = ({
  factory,
  onConfigure,
}) => {

  // 获取工厂图标名称
  const getFactoryIconName = (factoryName: LLMFactory) => {
    return IconMap[factoryName] || 'default';
  };

  return (
      <Card sx={{ 
        mb: 2, 
        border: '1px solid #e0e0e0',
        height: '100%',
        display: 'flex',
        flexDirection: 'column'
      }}>
        <CardContent sx={{ 
          display: 'flex', 
          flexDirection: 'column', 
          alignItems: 'flex-start', 
          textAlign: 'left',
          gap: 2,
          flex: 1,
        }}>
          {/* 图标 */}
          <LlmSvgIcon
            name={getFactoryIconName(factory.name as LLMFactory)}
            sx={{ width: 48, height: 48, color: 'primary.main' }} 
          />
          
          {/* 标题 */}
          <Typography variant="h6" component="div" sx={{ fontWeight: 'bold' }}>
            {factory.name}
          </Typography>
          
          {/* 标签 */}
          <Box display="flex" flexWrap="wrap" gap={0.5} justifyContent="left">
            {factory.model_types.map((type) => (
              <Chip
                key={type}
                label={type.toUpperCase()}
                size="small"
                sx={{
                  backgroundColor: MODEL_TYPE_COLORS[type.toUpperCase()] || '#757575',
                  color: 'white',
                  fontSize: '0.65rem',
                  height: '20px',
                }}
              />
            ))}
          </Box>
          
          {/* 配置按钮 */}
          <Button
            variant="text"
            size="small"
            onClick={() => onConfigure(factory)}
            sx={{ 
              mt: 'auto',
              color: 'primary.main',
              alignSelf: 'center',
              width: 'fit-content'
            }}
          >
            添加模型
          </Button>
        </CardContent>
      </Card>
  );
};

export default LLMFactoryCard