feat(settings): refactor LLM model management UI and components

src/pages/setting/components/LLMFactoryCard.tsx

@@ -1,12 +1,100 @@
-import { Box, Typography } from "@mui/material";
+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";
+import { useState } from "react";
 
-function LLMFactoryCard() {
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-      </Typography>
-    </Box>
-  )
+// 模型类型标签颜色映射
+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;
 }
 
-export default LLMFactoryCard;
+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