zhou zhou
3 天以前 b0728aba5c01842e24da3cff04e44be06c6bb655
rsf-admin/src/page/system/aiParam/AiParamForm.jsx
@@ -1,59 +1,142 @@
import React from "react";
import React, { useState } from "react";
import {
    BooleanInput,
    FormDataConsumer,
    NumberInput,
    SelectInput,
    TextInput,
    useNotify,
    useTranslate,
} from "react-admin";
import { Grid, Typography } from "@mui/material";
import { Alert, Button, Grid, Stack, Typography } from "@mui/material";
import StatusSelectInput from "@/page/components/StatusSelectInput";
import { validateAiParamDraft } from "@/api/ai/configCenter";
const providerChoices = [
    { id: "OPENAI_COMPATIBLE", name: "OPENAI_COMPATIBLE" },
];
const AiParamForm = ({ readOnly = false }) => (
const AiParamValidateSection = ({ formData, readOnly }) => {
    const notify = useNotify();
    const translate = useTranslate();
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState(null);
    const handleValidate = async () => {
        setLoading(true);
        try {
            const data = await validateAiParamDraft(formData);
            setResult(data);
            notify(data?.message || translate("ai.param.validate.success"));
        } catch (error) {
            const nextResult = {
                status: "INVALID",
                message: error?.message || translate("ai.param.validate.failed"),
            };
            setResult(nextResult);
            notify(nextResult.message, { type: "error" });
        } finally {
            setLoading(false);
        }
    };
    return (
        <>
            {!readOnly && (
                <Grid item xs={12}>
                    <Stack direction="row" spacing={1} alignItems="center">
                        <Button variant="outlined" onClick={handleValidate} disabled={loading}>
                            {loading ? translate("ai.param.validate.loading") : translate("ai.param.validate.beforeSave")}
                        </Button>
                        <Typography variant="body2" color="text.secondary">
                            {translate("ai.param.validate.description")}
                        </Typography>
                    </Stack>
                </Grid>
            )}
            {result && (
                <Grid item xs={12}>
                    <Alert severity={result.status === "VALID" ? "success" : "error"}>
                        {result.message}
                        {result.elapsedMs ? ` · ${result.elapsedMs} ms` : ""}
                        {result.validatedAt ? ` · ${result.validatedAt}` : ""}
                    </Alert>
                </Grid>
            )}
        </>
    );
};
const AiParamForm = ({ readOnly = false }) => {
    const translate = useTranslate();
    return (
    <Grid container spacing={2} width={{ xs: "100%", xl: "80%" }}>
        <Grid item xs={12}>
            <Typography variant="h6">主要配置</Typography>
            <Typography variant="h6">{translate("ai.param.form.sections.main")}</Typography>
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="name" label="名称" fullWidth disabled={readOnly} />
            <TextInput source="name" label="common.field.name" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <SelectInput source="providerType" label="提供方类型" choices={providerChoices} fullWidth disabled={readOnly} />
            <SelectInput source="providerType" label="ai.param.fields.providerType" choices={providerChoices} fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="baseUrl" label="Base URL" fullWidth disabled={readOnly} />
            <TextInput source="baseUrl" label="ai.param.fields.baseUrl" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="apiKey" label="API Key" fullWidth disabled={readOnly} />
            <TextInput source="apiKey" label="ai.param.fields.apiKey" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="model" label="模型" fullWidth disabled={readOnly} />
            <TextInput source="model" label="ai.param.fields.model" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={3}>
            <NumberInput source="temperature" label="Temperature" fullWidth disabled={readOnly} />
            <NumberInput source="temperature" label="ai.param.fields.temperature" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={3}>
            <NumberInput source="topP" label="Top P" fullWidth disabled={readOnly} />
            <NumberInput source="topP" label="ai.param.fields.topP" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={3}>
            <NumberInput source="maxTokens" label="Max Tokens" fullWidth disabled={readOnly} />
            <NumberInput source="maxTokens" label="ai.param.fields.maxTokens" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={3}>
            <NumberInput source="timeoutMs" label="Timeout(ms)" fullWidth disabled={readOnly} />
            <NumberInput source="timeoutMs" label="ai.param.fields.timeoutMs" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <BooleanInput source="streamingEnabled" label="启用流式响应" disabled={readOnly} />
            <BooleanInput source="streamingEnabled" label="ai.param.fields.streamingEnabled" disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <StatusSelectInput disabled={readOnly} />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="memo" label="备注" fullWidth multiline minRows={3} disabled={readOnly} />
            <TextInput source="memo" label="common.field.memo" fullWidth multiline minRows={3} disabled={readOnly} />
        </Grid>
        <FormDataConsumer>
            {({ formData }) => <AiParamValidateSection formData={formData} readOnly={readOnly} />}
        </FormDataConsumer>
        <Grid item xs={12}>
            <Typography variant="h6">{translate("ai.param.form.sections.runtime")}</Typography>
        </Grid>
        <Grid item xs={12} md={3}>
            <TextInput source="validateStatus" label="ai.param.fields.validateStatus" fullWidth disabled />
        </Grid>
        <Grid item xs={12} md={3}>
            <TextInput source="lastValidateElapsedMs" label="ai.param.fields.lastValidateElapsedMs" fullWidth disabled />
        </Grid>
        <Grid item xs={12} md={3}>
            <TextInput source="lastValidateTime$" label="ai.param.fields.lastValidateTime" fullWidth disabled />
        </Grid>
        <Grid item xs={12} md={3}>
            <TextInput source="updateBy" label="ai.common.lastUpdatedBy" fullWidth disabled />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="lastValidateMessage" label="ai.param.fields.lastValidateMessage" fullWidth multiline minRows={3} disabled />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="updateTime$" label="ai.common.lastUpdatedAt" fullWidth disabled />
        </Grid>
    </Grid>
);
    );
};
export default AiParamForm;