first-update

easy-dataset-main/components/conversations/ConversationHeader.js

@@ -0,0 +1,87 @@
+'use client';
+
+import { Box, Button, Divider, Typography, IconButton, CircularProgress, Paper, Tooltip } from '@mui/material';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/navigation';
+
+/**
+ * 多轮对话详情页面的头部导航组件
+ */
+export default function ConversationHeader({
+  projectId,
+  conversationId,
+  conversation,
+  editMode,
+  saving,
+  onEdit,
+  onSave,
+  onCancel,
+  onDelete,
+  onNavigate
+}) {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  return (
+    <Paper sx={{ p: 2, mb: 3 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <Button startIcon={<NavigateBeforeIcon />} onClick={() => router.push(`/projects/${projectId}/multi-turn`)}>
+            {t('common.backToList')}
+          </Button>
+          <Divider orientation="vertical" flexItem />
+          <Typography variant="h6">{t('datasets.conversationDetail')}</Typography>
+          {conversation && (
+            <Typography variant="body2" color="text.secondary">
+              {conversation.scenario && (
+                <>
+                  {conversation.scenario} • {conversation.turnCount}/{conversation.maxTurns} 轮
+                </>
+              )}
+            </Typography>
+          )}
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          {/* 翻页按钮 */}
+          <IconButton onClick={() => onNavigate && onNavigate('prev')}>
+            <NavigateBeforeIcon />
+          </IconButton>
+          <IconButton onClick={() => onNavigate && onNavigate('next')}>
+            <NavigateNextIcon />
+          </IconButton>
+          <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+          {/* 编辑/保存按钮 */}
+          {editMode ? (
+            <>
+              <Button onClick={onCancel}>{t('common.cancel')}</Button>
+              <Button
+                variant="contained"
+                startIcon={saving ? <CircularProgress size={16} /> : <SaveIcon />}
+                onClick={onSave}
+                disabled={saving}
+              >
+                {saving ? t('datasets.saving') : t('common.save')}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="outlined" startIcon={<EditIcon />} onClick={onEdit}>
+                {t('common.edit')}
+              </Button>
+              <Button variant="outlined" color="error" startIcon={<DeleteIcon />} onClick={onDelete}>
+                {t('common.delete')}
+              </Button>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Paper>
+  );
+}