import React, { useMemo, useState } from "react";
|
import {
|
FilterButton,
|
List,
|
SearchInput,
|
SelectInput,
|
TextInput,
|
TopToolbar,
|
useDelete,
|
useListContext,
|
useNotify,
|
useRefresh,
|
} from "react-admin";
|
import {
|
Box,
|
Button,
|
Card,
|
CardActions,
|
CardContent,
|
Chip,
|
CircularProgress,
|
Divider,
|
Grid,
|
Stack,
|
Typography,
|
} from "@mui/material";
|
import AddRoundedIcon from "@mui/icons-material/AddRounded";
|
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
|
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
|
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
|
import MyExportButton from "@/page/components/MyExportButton";
|
import AiParamForm from "./AiParamForm";
|
import AiConfigDialog from "../aiShared/AiConfigDialog";
|
|
const filters = [
|
<SearchInput source="condition" alwaysOn />,
|
<TextInput source="providerType" label="提供方类型" />,
|
<TextInput source="model" label="模型" />,
|
<SelectInput
|
source="status"
|
label="状态"
|
choices={[
|
{ id: "1", name: "common.enums.statusTrue" },
|
{ id: "0", name: "common.enums.statusFalse" },
|
]}
|
/>,
|
];
|
|
const defaultValues = {
|
providerType: "OPENAI_COMPATIBLE",
|
temperature: 0.7,
|
topP: 1,
|
timeoutMs: 60000,
|
streamingEnabled: true,
|
status: 1,
|
};
|
|
const truncateText = (value, max = 84) => {
|
if (!value) {
|
return "--";
|
}
|
return value.length > max ? `${value.slice(0, max)}...` : value;
|
};
|
|
const AiParamCards = ({ onView, onEdit, onDelete, deleting }) => {
|
const { data, isLoading } = useListContext();
|
const records = useMemo(() => (Array.isArray(data) ? data : []), [data]);
|
|
if (isLoading) {
|
return (
|
<Box display="flex" justifyContent="center" py={8}>
|
<CircularProgress size={28} />
|
</Box>
|
);
|
}
|
|
if (!records.length) {
|
return (
|
<Box px={2} py={6}>
|
<Card variant="outlined" sx={{ p: 3, textAlign: "center", borderStyle: "dashed" }}>
|
<Typography variant="subtitle1">暂无 AI 参数配置</Typography>
|
<Typography variant="body2" color="text.secondary" mt={1}>
|
可以先新建一个 OpenAI 兼容模型参数卡片。
|
</Typography>
|
</Card>
|
</Box>
|
);
|
}
|
|
return (
|
<Box px={2} py={2}>
|
<Grid container spacing={2}>
|
{records.map((record) => (
|
<Grid item xs={12} md={6} xl={4} key={record.id}>
|
<Card
|
variant="outlined"
|
sx={{
|
height: "100%",
|
borderRadius: 3,
|
boxShadow: "0 8px 24px rgba(15, 23, 42, 0.06)",
|
}}
|
>
|
<CardContent sx={{ pb: 1.5 }}>
|
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
|
<Box>
|
<Typography variant="h6" sx={{ mb: 0.5 }}>
|
{record.name}
|
</Typography>
|
<Typography variant="body2" color="text.secondary">
|
{record.model || "--"}
|
</Typography>
|
</Box>
|
<Chip
|
size="small"
|
color={record.statusBool ? "success" : "default"}
|
label={record.statusBool ? "启用" : "停用"}
|
/>
|
</Stack>
|
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap mt={1.5}>
|
<Chip size="small" variant="outlined" label={record.providerType$ || "OPENAI_COMPATIBLE"} />
|
<Chip
|
size="small"
|
variant="outlined"
|
color={record.streamingEnabled ? "info" : "default"}
|
label={record.streamingEnabled ? "流式响应" : "非流式"}
|
/>
|
</Stack>
|
<Divider sx={{ my: 1.5 }} />
|
<Typography variant="body2" color="text.secondary">
|
Base URL
|
</Typography>
|
<Typography variant="body2" sx={{ mb: 1.5, wordBreak: "break-all" }}>
|
{truncateText(record.baseUrl, 120)}
|
</Typography>
|
<Grid container spacing={1}>
|
<Grid item xs={6}>
|
<Typography variant="caption" color="text.secondary">Temperature</Typography>
|
<Typography variant="body2">{record.temperature ?? "--"}</Typography>
|
</Grid>
|
<Grid item xs={6}>
|
<Typography variant="caption" color="text.secondary">Top P</Typography>
|
<Typography variant="body2">{record.topP ?? "--"}</Typography>
|
</Grid>
|
<Grid item xs={6}>
|
<Typography variant="caption" color="text.secondary">Max Tokens</Typography>
|
<Typography variant="body2">{record.maxTokens ?? "--"}</Typography>
|
</Grid>
|
<Grid item xs={6}>
|
<Typography variant="caption" color="text.secondary">Timeout</Typography>
|
<Typography variant="body2">{record.timeoutMs ?? "--"} ms</Typography>
|
</Grid>
|
</Grid>
|
<Typography variant="caption" color="text.secondary" display="block" mt={1.5}>
|
备注
|
</Typography>
|
<Typography variant="body2">{truncateText(record.memo)}</Typography>
|
</CardContent>
|
<CardActions sx={{ px: 2, pb: 2, pt: 0, justifyContent: "space-between" }}>
|
<Stack direction="row" spacing={1}>
|
<Button size="small" startIcon={<VisibilityOutlinedIcon />} onClick={() => onView(record.id)}>
|
详情
|
</Button>
|
<Button size="small" startIcon={<EditOutlinedIcon />} onClick={() => onEdit(record.id)}>
|
编辑
|
</Button>
|
</Stack>
|
<Button
|
size="small"
|
color="error"
|
startIcon={<DeleteOutlineOutlinedIcon />}
|
onClick={() => onDelete(record)}
|
disabled={deleting}
|
>
|
删除
|
</Button>
|
</CardActions>
|
</Card>
|
</Grid>
|
))}
|
</Grid>
|
</Box>
|
);
|
};
|
|
const AiParamList = () => {
|
const notify = useNotify();
|
const refresh = useRefresh();
|
const [deleteOne, { isPending: deleting }] = useDelete();
|
const [dialogState, setDialogState] = useState({ open: false, mode: "create", recordId: null });
|
|
const openDialog = (mode, recordId = null) => setDialogState({ open: true, mode, recordId });
|
const closeDialog = () => setDialogState({ open: false, mode: "create", recordId: null });
|
|
const handleDelete = (record) => {
|
if (!record?.id || !window.confirm(`确认删除“${record.name}”吗？`)) {
|
return;
|
}
|
deleteOne(
|
"aiParam",
|
{ id: record.id },
|
{
|
onSuccess: () => {
|
notify("删除成功");
|
refresh();
|
},
|
onError: (error) => {
|
notify(error?.message || "删除失败", { type: "error" });
|
},
|
}
|
);
|
};
|
|
const dialogTitle = {
|
create: "新建 AI 参数",
|
edit: "编辑 AI 参数",
|
show: "查看 AI 参数详情",
|
}[dialogState.mode];
|
|
return (
|
<>
|
<List
|
title="menu.aiParam"
|
filters={filters}
|
sort={{ field: "create_time", order: "desc" }}
|
actions={(
|
<TopToolbar>
|
<FilterButton />
|
<Button variant="contained" startIcon={<AddRoundedIcon />} onClick={() => openDialog("create")}>
|
新建
|
</Button>
|
<MyExportButton />
|
</TopToolbar>
|
)}
|
>
|
<AiParamCards
|
onView={(id) => openDialog("show", id)}
|
onEdit={(id) => openDialog("edit", id)}
|
onDelete={handleDelete}
|
deleting={deleting}
|
/>
|
</List>
|
<AiConfigDialog
|
open={dialogState.open}
|
mode={dialogState.mode}
|
title={dialogTitle}
|
resource="aiParam"
|
recordId={dialogState.recordId}
|
defaultValues={defaultValues}
|
maxWidth="md"
|
onClose={closeDialog}
|
>
|
<AiParamForm readOnly={dialogState.mode === "show"} />
|
</AiConfigDialog>
|
</>
|
);
|
};
|
|
export default AiParamList;
|
