rsf-admin/src/page/system/aiPrompt/AiPromptList.jsx
New file
@@ -0,0 +1,229 @@
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 AiPromptForm from "./AiPromptForm";
import AiConfigDialog from "../aiShared/AiConfigDialog";
const filters = [
    <SearchInput source="condition" alwaysOn />,
    <TextInput source="code" label="编码" />,
    <TextInput source="scene" label="场景" />,
    <SelectInput
        source="status"
        label="状态"
        choices={[
            { id: "1", name: "common.enums.statusTrue" },
            { id: "0", name: "common.enums.statusFalse" },
        ]}
    />,
];
const defaultValues = {
    code: "home.default",
    scene: "home",
    status: 1,
};
const truncateText = (value, max = 120) => {
    if (!value) {
        return "--";
    }
    return value.length > max ? `${value.slice(0, max)}...` : value;
};
const AiPromptCards = ({ 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">暂无 Prompt 配置</Typography>
                    <Typography variant="body2" color="text.secondary" mt={1}>
                        新建一张 Prompt 卡片后,AI 对话会动态加载这里的内容。
                    </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.code || "--"}
                                        </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={`Scene: ${record.scene || "--"}`} />
                                </Stack>
                                <Divider sx={{ my: 1.5 }} />
                                <Typography variant="caption" color="text.secondary">System Prompt</Typography>
                                <Typography variant="body2" sx={{ mt: 0.5 }}>
                                    {truncateText(record.systemPrompt)}
                                </Typography>
                                <Typography variant="caption" color="text.secondary" display="block" mt={1.5}>
                                    User Prompt Template
                                </Typography>
                                <Typography variant="body2">{truncateText(record.userPromptTemplate, 100)}</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 AiPromptList = () => {
    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(
            "aiPrompt",
            { id: record.id },
            {
                onSuccess: () => {
                    notify("删除成功");
                    refresh();
                },
                onError: (error) => {
                    notify(error?.message || "删除失败", { type: "error" });
                },
            }
        );
    };
    const dialogTitle = {
        create: "新建 Prompt",
        edit: "编辑 Prompt",
        show: "查看 Prompt 详情",
    }[dialogState.mode];
    return (
        <>
            <List
                title="menu.aiPrompt"
                filters={filters}
                sort={{ field: "create_time", order: "desc" }}
                actions={(
                    <TopToolbar>
                        <FilterButton />
                        <Button variant="contained" startIcon={<AddRoundedIcon />} onClick={() => openDialog("create")}>
                            新建
                        </Button>
                        <MyExportButton />
                    </TopToolbar>
                )}
            >
                <AiPromptCards
                    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="aiPrompt"
                recordId={dialogState.recordId}
                defaultValues={defaultValues}
                maxWidth="lg"
                onClose={closeDialog}
            >
                <AiPromptForm readOnly={dialogState.mode === "show"} />
            </AiConfigDialog>
        </>
    );
};
export default AiPromptList;