first-update

easy-dataset-main/app/projects/[projectId]/multi-turn/[conversationId]/page.js

@@ -0,0 +1,139 @@
+'use client';
+
+import {
+  Container,
+  Box,
+  Typography,
+  Alert,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Paper
+} from '@mui/material';
+import ConversationHeader from '@/components/conversations/ConversationHeader';
+import ConversationMetadata from '@/components/conversations/ConversationMetadata';
+import ConversationContent from '@/components/conversations/ConversationContent';
+import ConversationRatingSection from '@/components/conversations/ConversationRatingSection';
+import useConversationDetails from './useConversationDetails';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * 多轮对话详情页面
+ */
+export default function ConversationDetailPage({ params }) {
+  const { projectId, conversationId } = params;
+  const { t } = useTranslation();
+
+  // 使用自定义Hook管理状态和逻辑
+  const {
+    conversation,
+    messages,
+    loading,
+    editMode,
+    saving,
+    editData,
+    setEditData,
+    deleteDialogOpen,
+    setDeleteDialogOpen,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete,
+    handleNavigate,
+    updateMessageContent
+  } = useConversationDetails(projectId, conversationId);
+
+  // 加载状态
+  if (loading) {
+    return (
+      <Container maxWidth="xl" sx={{ py: 4 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70vh' }}>
+          <Alert severity="info">{t('datasets.loadingDataset')}</Alert>
+        </Box>
+      </Container>
+    );
+  }
+
+  // 无数据状态
+  if (!conversation) {
+    return (
+      <Container maxWidth="xl" sx={{ py: 4 }}>
+        <Alert severity="error">{t('datasets.conversationNotFound')}</Alert>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="xl" sx={{ py: 4 }}>
+      {/* 顶部导航栏 */}
+      <ConversationHeader
+        projectId={projectId}
+        conversationId={conversationId}
+        conversation={conversation}
+        editMode={editMode}
+        saving={saving}
+        onEdit={handleEdit}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        onDelete={() => setDeleteDialogOpen(true)}
+        onNavigate={handleNavigate}
+      />
+
+      {/* 主要布局：左右分栏 */}
+      <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
+        {/* 左侧主要内容区域 */}
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Paper sx={{ p: 3 }}>
+            {/* 对话内容 */}
+            <ConversationContent
+              messages={editMode ? editData.messages : messages}
+              editMode={editMode}
+              onMessageChange={updateMessageContent}
+              conversation={conversation}
+            />
+          </Paper>
+        </Box>
+
+        {/* 右侧固定侧边栏 */}
+        <Box
+          sx={{
+            width: 360,
+            position: 'sticky',
+            top: 24,
+            maxHeight: 'calc(100vh - 48px)',
+            overflowY: 'auto'
+          }}
+        >
+          {/* 元数据展示 */}
+          <ConversationMetadata conversation={conversation} />
+
+          {/* 评分、标签、备注区域 */}
+          <ConversationRatingSection
+            conversation={conversation}
+            projectId={projectId}
+            onUpdate={() => {
+              // 更新成功后刷新数据，保持页面状态同步
+              // 这里可以调用 useConversationDetails 的刷新逻辑
+            }}
+          />
+        </Box>
+      </Box>
+
+      {/* 删除确认对话框 */}
+      <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
+        <DialogTitle>{t('datasets.confirmDelete')}</DialogTitle>
+        <DialogContent>
+          <Typography>{t('datasets.confirmDeleteConversation')}</Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteDialogOpen(false)}>{t('common.cancel')}</Button>
+          <Button color="error" onClick={handleDelete}>
+            {t('common.delete')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+}