93 lines
2.5 KiB
JavaScript
93 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Card, CardContent, Box, Typography, Chip, Button, Paper } from '@mui/material';
|
|
import { Edit as EditIcon, Restore as RestoreIcon } from '@mui/icons-material';
|
|
import ReactMarkdown from 'react-markdown';
|
|
|
|
import 'github-markdown-css/github-markdown-light.css';
|
|
|
|
/**
|
|
* 右侧提示词详情展示组件
|
|
*/
|
|
const PromptDetail = ({
|
|
currentPromptConfig,
|
|
selectedPrompt,
|
|
promptContent,
|
|
isCustomized,
|
|
onEditClick,
|
|
onDeleteClick
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (!currentPromptConfig) {
|
|
return (
|
|
<Box sx={{ p: 3, textAlign: 'center', color: 'text.secondary' }}>{t('settings.prompts.selectPromptFirst')}</Box>
|
|
);
|
|
}
|
|
|
|
const handleEditClick = () => {
|
|
onEditClick();
|
|
};
|
|
|
|
const handleDeleteClick = () => {
|
|
onDeleteClick();
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
{/* 标题、描述与操作区域 */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: 2,
|
|
flexWrap: 'wrap'
|
|
}}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Typography variant="h6">{currentPromptConfig.name}</Typography>
|
|
{isCustomized(selectedPrompt) && (
|
|
<Chip label={t('settings.prompts.customized')} color="primary" size="small" />
|
|
)}
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Button startIcon={<EditIcon />} variant="contained" size="small" onClick={handleEditClick}>
|
|
{t('settings.prompts.editPrompt')}
|
|
</Button>
|
|
|
|
{isCustomized(selectedPrompt) && (
|
|
<Button startIcon={<RestoreIcon />} color="error" size="small" onClick={handleDeleteClick}>
|
|
{t('settings.prompts.restoreDefault')}
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
|
{currentPromptConfig.description}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Markdown 渲染提示词内容 */}
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 2,
|
|
overflow: 'auto'
|
|
}}
|
|
>
|
|
<div className="markdown-body">
|
|
<ReactMarkdown>{promptContent}</ReactMarkdown>
|
|
</div>
|
|
</Paper>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default PromptDetail;
|