import React, { useState } from "react";
|
import {
|
List,
|
SearchInput,
|
TopToolbar,
|
SelectColumnsButton,
|
EditButton,
|
FilterButton,
|
TextInput,
|
DateInput,
|
SelectInput,
|
useListContext,
|
Pagination,
|
DeleteButton,
|
} from 'react-admin';
|
import { Box, Button, Chip, Grid, Stack, Typography } from '@mui/material';
|
import EmptyData from "@/page/components/EmptyData";
|
import MyCreateButton from "@/page/components/MyCreateButton";
|
import MyExportButton from '@/page/components/MyExportButton';
|
import { OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
|
import AiToolConfigCreate from "./AiToolConfigCreate";
|
import { AiConsoleLayout, AiConsolePanel, aiCardSx } from "@/page/components/AiConsoleLayout";
|
|
const sceneChoices = [
|
{ id: 'general_chat', name: '通用对话' },
|
{ id: 'system_diagnose', name: '系统诊断' },
|
];
|
|
const filters = [
|
<SearchInput source="condition" alwaysOn />,
|
<DateInput label='common.time.after' source="timeStart" alwaysOn />,
|
<DateInput label='common.time.before' source="timeEnd" alwaysOn />,
|
<SelectInput source="sceneCode" label="场景" choices={sceneChoices} />,
|
<TextInput source="toolCode" label="工具编码" />,
|
<TextInput source="toolName" label="工具名称" />,
|
];
|
|
const ToolConfigBoard = () => {
|
const { data, isLoading } = useListContext();
|
const records = data || [];
|
const enabledCount = records.filter((item) => item.enabledFlag === 1).length;
|
const diagnoseCount = records.filter((item) => item.sceneCode === 'system_diagnose').length;
|
const chatCount = records.filter((item) => item.sceneCode === 'general_chat').length;
|
|
if (!isLoading && !records.length) {
|
return <EmptyData />;
|
}
|
|
return (
|
<AiConsoleLayout
|
title="AI诊断工具中心"
|
subtitle="参考 zy-wcs-master 的工作区布局，提供场景化工具编排、启停和提示词增强，但控件与交互仍保持当前系统的 react-admin 风格。"
|
stats={[
|
{ label: '工具总数', value: records.length },
|
{ label: '已启用', value: enabledCount },
|
{ label: '诊断场景', value: diagnoseCount },
|
{ label: '通用对话', value: chatCount },
|
]}
|
>
|
<AiConsolePanel
|
title="工具编排"
|
subtitle="同一场景会按优先级执行，启用状态和工具提示词会直接进入诊断运行时。"
|
minHeight={420}
|
>
|
<Grid container spacing={2}>
|
{records.map((record) => (
|
<Grid item xs={12} md={6} xl={4} key={record.id}>
|
<Box sx={aiCardSx(record.enabledFlag === 1)}>
|
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
|
<Box>
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: '#284059' }}>
|
{record.toolName || record.toolCode}
|
</Typography>
|
<Typography variant="caption" sx={{ color: '#8093a8' }}>
|
{record.sceneCode} · {record.toolCode}
|
</Typography>
|
</Box>
|
<Stack direction="row" spacing={0.75} flexWrap="wrap" justifyContent="flex-end">
|
<Chip size="small" color={record.enabledFlag === 1 ? 'success' : 'default'} label={record.enabledFlag === 1 ? '启用' : '停用'} />
|
<Chip size="small" color={record.status === 1 ? 'primary' : 'default'} label={`P${record.priority || 0}`} />
|
</Stack>
|
</Stack>
|
<Box sx={{ mt: 1.5 }}>
|
<Typography variant="caption" sx={{ color: '#70839a' }}>工具提示词</Typography>
|
<Typography variant="body2" sx={{ mt: 0.5, color: '#31465d', minHeight: 72 }}>
|
{record.toolPrompt || '未配置附加提示词，将只使用默认工具摘要。'}
|
</Typography>
|
</Box>
|
<Stack direction="row" spacing={1} sx={{ mt: 1.5 }}>
|
<EditButton record={record} sx={{ px: 1.25, py: 0.5, minWidth: 64 }} />
|
<DeleteButton record={record} sx={{ px: 1.25, py: 0.5, minWidth: 64 }} mutationMode={OPERATE_MODE} />
|
</Stack>
|
</Box>
|
</Grid>
|
))}
|
</Grid>
|
<Box sx={{ mt: 2 }}>
|
<Pagination rowsPerPageOptions={[DEFAULT_PAGE_SIZE, 25, 50]} />
|
</Box>
|
</AiConsolePanel>
|
</AiConsoleLayout>
|
);
|
};
|
|
const AiToolConfigList = () => {
|
const [createDialog, setCreateDialog] = useState(false);
|
|
return (
|
<Box display="flex" sx={{ width: '100%' }}>
|
<List
|
sx={{ width: '100%', flexGrow: 1 }}
|
title={"menu.aiToolConfig"}
|
empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
|
filters={filters}
|
sort={{ field: "priority", order: "asc" }}
|
actions={(
|
<TopToolbar>
|
<FilterButton />
|
<MyCreateButton onClick={() => { setCreateDialog(true) }} />
|
<SelectColumnsButton preferenceKey='aiToolConfig' />
|
<MyExportButton />
|
</TopToolbar>
|
)}
|
perPage={DEFAULT_PAGE_SIZE}
|
pagination={false}
|
>
|
<ToolConfigBoard />
|
</List>
|
<AiToolConfigCreate open={createDialog} setOpen={setCreateDialog} />
|
</Box>
|
)
|
}
|
|
export default AiToolConfigList;
|
