#AI.配置中心可运营化

zhou zhou

8 小时以前 05148eeef860d33232874a640dbd67ba43ac5686

 rsf-admin/src/page/system/aiPrompt/AiPromptForm.jsx

@@ -1,9 +1,106 @@
import React from "react";
import React, { useState } from "react";
import {
    FormDataConsumer,
    TextInput,
    useNotify,
} from "react-admin";
import { Grid, Typography } from "@mui/material";
import { Alert, Button, Grid, Stack, TextField, Typography } from "@mui/material";
import StatusSelectInput from "@/page/components/StatusSelectInput";
import { renderAiPromptPreview } from "@/api/ai/configCenter";

const AiPromptPreviewSection = ({ formData }) => {
    const notify = useNotify();
    const [input, setInput] = useState("请帮我总结当前页面能做什么");
    const [metadataText, setMetadataText] = useState("{\"path\":\"/system/aiPrompt\"}");
    const [preview, setPreview] = useState(null);
    const [loading, setLoading] = useState(false);

    const handlePreview = async () => {
        setLoading(true);
        try {
            const metadata = metadataText ? JSON.parse(metadataText) : {};
            const data = await renderAiPromptPreview({
                ...formData,
                input,
                metadata,
            });
            setPreview(data);
            notify("Prompt 预览完成");
        } catch (error) {
            setPreview(null);
            notify(error?.message || "Prompt 预览失败", { type: "error" });
        } finally {
            setLoading(false);
        }
    };

    return (
        <>
            <Grid item xs={12}>
                <Typography variant="h6">Prompt 预览</Typography>
            </Grid>
            <Grid item xs={12}>
                <TextField
                    label="示例输入"
                    value={input}
                    onChange={(event) => setInput(event.target.value)}
                    fullWidth
                    multiline
                    minRows={3}
                />
            </Grid>
            <Grid item xs={12}>
                <TextField
                    label="示例元数据 JSON"
                    value={metadataText}
                    onChange={(event) => setMetadataText(event.target.value)}
                    fullWidth
                    multiline
                    minRows={3}
                />
            </Grid>
            <Grid item xs={12}>
                <Stack direction="row" spacing={1} alignItems="center">
                    <Button variant="outlined" onClick={handlePreview} disabled={loading}>
                        {loading ? "预览中..." : "预览渲染"}
                    </Button>
                    <Typography variant="body2" color="text.secondary">
                        用当前表单内容渲染 System Prompt 和 User Prompt。
                    </Typography>
                </Stack>
            </Grid>
            {preview && (
                <>
                    <Grid item xs={12}>
                        <Alert severity="success">
                            已解析变量：{(preview.resolvedVariables || []).join(", ") || "无"}
                        </Alert>
                    </Grid>
                    <Grid item xs={12}>
                        <TextField
                            label="渲染后的 System Prompt"
                            value={preview.renderedSystemPrompt || ""}
                            fullWidth
                            multiline
                            minRows={5}
                            InputProps={{ readOnly: true }}
                        />
                    </Grid>
                    <Grid item xs={12}>
                        <TextField
                            label="渲染后的 User Prompt"
                            value={preview.renderedUserPrompt || ""}
                            fullWidth
                            multiline
                            minRows={5}
                            InputProps={{ readOnly: true }}
                        />
                    </Grid>
                </>
            )}
        </>
    );
};

const AiPromptForm = ({ readOnly = false }) => (
    <Grid container spacing={2} width={{ xs: "100%", xl: "80%" }}>
@@ -31,6 +128,18 @@
        <Grid item xs={12}>
            <TextInput source="memo" label="备注" fullWidth multiline minRows={3} disabled={readOnly} />
        </Grid>
        <FormDataConsumer>
            {({ formData }) => <AiPromptPreviewSection formData={formData} />}
        </FormDataConsumer>
        <Grid item xs={12}>
            <Typography variant="h6">运行与审计信息</Typography>
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="updateBy" label="最近更新人" fullWidth disabled />
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="updateTime$" label="最近更新时间" fullWidth disabled />
        </Grid>
    </Grid>
);