first-update

easy-dataset-main/app/projects/[projectId]/settings/components/PromptDetail.js

@@ -0,0 +1,92 @@
+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;