417 lines
14 KiB
JavaScript
417 lines
14 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Container, Typography, Box, Paper, Tabs, Tab, CircularProgress, Divider, LinearProgress } from '@mui/material';
|
||
|
||
import QuestionListView from '@/components/questions/QuestionListView';
|
||
import QuestionTreeView from '@/components/questions/QuestionTreeView';
|
||
import TabPanel from '@/components/text-split/components/TabPanel';
|
||
import useTaskSettings from '@/hooks/useTaskSettings';
|
||
import QuestionEditDialog from './components/QuestionEditDialog';
|
||
import QuestionsPageHeader from './components/QuestionsPageHeader';
|
||
import ConfirmDialog from './components/ConfirmDialog';
|
||
import TemplateListView from './components/TemplateListView';
|
||
import TemplateFormDialog from './components/template/TemplateFormDialog';
|
||
import ExportQuestionsDialog from './components/ExportQuestionsDialog';
|
||
import { useQuestionTemplates } from './hooks/useQuestionTemplates';
|
||
import { useQuestionEdit } from './hooks/useQuestionEdit';
|
||
import { useQuestionDelete } from './hooks/useQuestionDelete';
|
||
import { useQuestionsFilter } from './hooks/useQuestionsFilter';
|
||
import QuestionsFilter from './components/QuestionsFilter';
|
||
import { useQuestionGeneration } from './hooks/useQuestionGeneration';
|
||
import useQuestionExport from './hooks/useQuestionExport';
|
||
import axios from 'axios';
|
||
import { toast } from 'sonner';
|
||
import { useAtomValue } from 'jotai/index';
|
||
import { selectedModelInfoAtom } from '@/lib/store';
|
||
|
||
export default function QuestionsPage({ params }) {
|
||
const { t } = useTranslation();
|
||
const { projectId } = params;
|
||
const [loading, setLoading] = useState(true);
|
||
const [questions, setQuestions] = useState({});
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [pageSize, setPageSize] = useState(10);
|
||
const [tags, setTags] = useState([]);
|
||
const model = useAtomValue(selectedModelInfoAtom);
|
||
const [activeTab, setActiveTab] = useState(0);
|
||
|
||
// 模板管理
|
||
const {
|
||
templates,
|
||
loading: templatesLoading,
|
||
createTemplate,
|
||
updateTemplate,
|
||
deleteTemplate
|
||
} = useQuestionTemplates(projectId, null); // null 表示获取所有类型的模板
|
||
|
||
const [templateDialogOpen, setTemplateDialogOpen] = useState(false);
|
||
const [editingTemplate, setEditingTemplate] = useState(null);
|
||
const [exportDialogOpen, setExportDialogOpen] = useState(false);
|
||
|
||
// 使用新的过滤和搜索 Hook
|
||
const {
|
||
answerFilter,
|
||
searchTerm,
|
||
debouncedSearchTerm,
|
||
searchMatchMode,
|
||
chunkNameFilter,
|
||
debouncedChunkNameFilter,
|
||
sourceTypeFilter,
|
||
selectedQuestions,
|
||
setSelectedQuestions,
|
||
handleSelectQuestion,
|
||
handleSelectAll,
|
||
handleSearchChange,
|
||
handleFilterChange,
|
||
handleChunkNameFilterChange,
|
||
handleSourceTypeFilterChange,
|
||
handleSearchMatchModeChange
|
||
} = useQuestionsFilter(projectId);
|
||
|
||
const getQuestionList = async () => {
|
||
try {
|
||
// 获取问题列表
|
||
const questionsResponse = await axios.get(
|
||
`/api/projects/${projectId}/questions?page=${currentPage}&size=10&status=${answerFilter}&input=${searchTerm}&searchMatchMode=${searchMatchMode}&chunkName=${encodeURIComponent(debouncedChunkNameFilter)}&sourceType=${sourceTypeFilter}`
|
||
);
|
||
if (questionsResponse.status !== 200) {
|
||
throw new Error(t('common.fetchError'));
|
||
}
|
||
setQuestions(questionsResponse.data || {});
|
||
|
||
// 获取标签树
|
||
const tagsResponse = await axios.get(`/api/projects/${projectId}/tags`);
|
||
if (tagsResponse.status !== 200) {
|
||
throw new Error(t('common.fetchError'));
|
||
}
|
||
setTags(tagsResponse.data.tags || []);
|
||
|
||
setLoading(false);
|
||
} catch (error) {
|
||
console.error(t('common.fetchError'), error);
|
||
toast.error(error.message);
|
||
}
|
||
};
|
||
|
||
// 当筛选条件改变时，重置页码到第1页
|
||
useEffect(() => {
|
||
setCurrentPage(1);
|
||
}, [answerFilter, debouncedSearchTerm, debouncedChunkNameFilter, sourceTypeFilter, searchMatchMode]);
|
||
|
||
useEffect(() => {
|
||
getQuestionList();
|
||
}, [currentPage, answerFilter, debouncedSearchTerm, debouncedChunkNameFilter, sourceTypeFilter, searchMatchMode]);
|
||
|
||
const { taskSettings } = useTaskSettings(projectId);
|
||
|
||
// 使用新的问题生成 Hook
|
||
const {
|
||
processing,
|
||
progress,
|
||
handleBatchGenerateAnswers,
|
||
handleAutoGenerateDatasets,
|
||
handleAutoGenerateMultiTurnDatasets,
|
||
handleAutoGenerateImageDatasets
|
||
} = useQuestionGeneration(projectId, model, taskSettings, getQuestionList);
|
||
|
||
const {
|
||
editDialogOpen,
|
||
editMode,
|
||
editingQuestion,
|
||
handleOpenCreateDialog,
|
||
handleOpenEditDialog,
|
||
handleCloseDialog,
|
||
handleSubmitQuestion
|
||
} = useQuestionEdit(projectId, updatedQuestion => {
|
||
getQuestionList();
|
||
toast.success(t('questions.operationSuccess'));
|
||
});
|
||
|
||
const { confirmDialog, handleDeleteQuestion, handleBatchDeleteQuestions, closeConfirmDialog, handleConfirmAction } =
|
||
useQuestionDelete(projectId, () => {
|
||
getQuestionList();
|
||
});
|
||
|
||
const { exportQuestions } = useQuestionExport(projectId);
|
||
|
||
// 获取所有数据
|
||
useEffect(() => {
|
||
getQuestionList();
|
||
}, [projectId]);
|
||
|
||
// 处理标签页切换
|
||
const handleTabChange = (event, newValue) => {
|
||
setActiveTab(newValue);
|
||
};
|
||
|
||
// 模板管理函数
|
||
const handleOpenCreateTemplateDialog = () => {
|
||
setEditingTemplate(null);
|
||
setTemplateDialogOpen(true);
|
||
};
|
||
|
||
const handleEditTemplate = template => {
|
||
setEditingTemplate(template);
|
||
setTemplateDialogOpen(true);
|
||
};
|
||
|
||
const handleCloseTemplateDialog = () => {
|
||
setTemplateDialogOpen(false);
|
||
setEditingTemplate(null);
|
||
};
|
||
|
||
const handleSubmitTemplate = async data => {
|
||
try {
|
||
if (editingTemplate) {
|
||
await updateTemplate(editingTemplate.id, data);
|
||
} else {
|
||
await createTemplate(data);
|
||
}
|
||
getQuestionList();
|
||
handleCloseTemplateDialog();
|
||
} catch (error) {
|
||
console.error('Failed to save template:', error);
|
||
}
|
||
};
|
||
|
||
const handleDeleteTemplate = async templateId => {
|
||
const confirmed = window.confirm(t('questions.template.deleteConfirm'));
|
||
if (confirmed) {
|
||
try {
|
||
await deleteTemplate(templateId);
|
||
} catch (error) {
|
||
console.error('Failed to delete template:', error);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleOpenExportDialog = () => {
|
||
setExportDialogOpen(true);
|
||
};
|
||
|
||
const handleCloseExportDialog = () => {
|
||
setExportDialogOpen(false);
|
||
};
|
||
|
||
const handleExportQuestions = async exportOptions => {
|
||
const options = {
|
||
...exportOptions,
|
||
selectedIds: selectedQuestions,
|
||
filters: {
|
||
searchTerm: debouncedSearchTerm,
|
||
chunkName: debouncedChunkNameFilter,
|
||
sourceType: sourceTypeFilter
|
||
}
|
||
};
|
||
await exportQuestions(options);
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<Container maxWidth="lg" sx={{ mt: 4 }}>
|
||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70vh' }}>
|
||
<CircularProgress />
|
||
</Box>
|
||
</Container>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
|
||
{/* 处理中的进度显示 - 全局蒙版样式 */}
|
||
{processing && (
|
||
<Box
|
||
sx={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
width: '100vw',
|
||
height: '100vh',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
zIndex: 9999,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center'
|
||
}}
|
||
>
|
||
<Paper
|
||
elevation={6}
|
||
sx={{
|
||
width: '90%',
|
||
maxWidth: 500,
|
||
p: 3,
|
||
borderRadius: 2,
|
||
textAlign: 'center'
|
||
}}
|
||
>
|
||
<Typography variant="h6" sx={{ mb: 2, color: 'primary.main', fontWeight: 'bold' }}>
|
||
{t('datasets.generatingDataset')}
|
||
</Typography>
|
||
|
||
<Box sx={{ mb: 3 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
||
<Typography variant="body1" sx={{ mr: 1 }}>
|
||
{progress.percentage}%
|
||
</Typography>
|
||
<Box sx={{ width: '100%' }}>
|
||
<LinearProgress
|
||
variant="determinate"
|
||
value={progress.percentage}
|
||
sx={{ height: 8, borderRadius: 4 }}
|
||
color="primary"
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
|
||
<Typography variant="body2">
|
||
{t('questions.generatingProgress', {
|
||
completed: progress.completed,
|
||
total: progress.total
|
||
})}
|
||
</Typography>
|
||
<Typography variant="body2" color="success.main" sx={{ fontWeight: 'medium' }}>
|
||
{t('questions.generatedCount', { count: progress.datasetCount })}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<CircularProgress size={60} thickness={4} sx={{ mb: 2 }} />
|
||
|
||
<Typography variant="body2" color="text.secondary">
|
||
{t('questions.pleaseWait')}
|
||
</Typography>
|
||
</Paper>
|
||
</Box>
|
||
)}
|
||
|
||
<QuestionsPageHeader
|
||
questionsTotal={questions.total}
|
||
selectedQuestionsCount={selectedQuestions.length}
|
||
onBatchDeleteQuestions={() => handleBatchDeleteQuestions(selectedQuestions, setSelectedQuestions)}
|
||
onOpenCreateDialog={handleOpenCreateDialog}
|
||
onOpenCreateTemplateDialog={handleOpenCreateTemplateDialog}
|
||
onBatchGenerateAnswers={() => handleBatchGenerateAnswers(selectedQuestions)}
|
||
onAutoGenerateDatasets={handleAutoGenerateDatasets}
|
||
onAutoGenerateMultiTurnDatasets={handleAutoGenerateMultiTurnDatasets}
|
||
onAutoGenerateImageDatasets={handleAutoGenerateImageDatasets}
|
||
onExportQuestions={handleOpenExportDialog}
|
||
/>
|
||
|
||
<Paper sx={{ mb: 4 }}>
|
||
<Tabs
|
||
value={activeTab}
|
||
onChange={handleTabChange}
|
||
variant="fullWidth"
|
||
indicatorColor="primary"
|
||
sx={{
|
||
borderBottom: 1,
|
||
borderColor: 'divider'
|
||
}}
|
||
>
|
||
<Tab label={t('questions.listView')} />
|
||
<Tab label={t('questions.template.management')} />
|
||
<Tab label={t('questions.treeView')} />
|
||
</Tabs>
|
||
|
||
<QuestionsFilter
|
||
selectedQuestionsCount={selectedQuestions.length}
|
||
totalQuestions={questions?.total || 0}
|
||
isAllSelected={selectedQuestions.length > 0 && selectedQuestions.length === questions?.total}
|
||
isIndeterminate={selectedQuestions.length > 0 && selectedQuestions.length < questions?.total}
|
||
onSelectAll={handleSelectAll}
|
||
searchTerm={searchTerm}
|
||
onSearchChange={handleSearchChange}
|
||
searchMatchMode={searchMatchMode}
|
||
onSearchMatchModeChange={handleSearchMatchModeChange}
|
||
answerFilter={answerFilter}
|
||
onFilterChange={handleFilterChange}
|
||
chunkNameFilter={chunkNameFilter}
|
||
onChunkNameFilterChange={handleChunkNameFilterChange}
|
||
sourceTypeFilter={sourceTypeFilter}
|
||
onSourceTypeFilterChange={handleSourceTypeFilterChange}
|
||
activeTab={activeTab}
|
||
/>
|
||
|
||
<Divider />
|
||
|
||
<TabPanel value={activeTab} index={0}>
|
||
<QuestionListView
|
||
questions={questions.data}
|
||
currentPage={currentPage}
|
||
totalQuestions={Math.ceil(questions.total / pageSize)}
|
||
handlePageChange={(_, newPage) => setCurrentPage(newPage)}
|
||
selectedQuestions={selectedQuestions}
|
||
onSelectQuestion={handleSelectQuestion}
|
||
onDeleteQuestion={questionId => handleDeleteQuestion(questionId, selectedQuestions, setSelectedQuestions)}
|
||
onEditQuestion={handleOpenEditDialog}
|
||
refreshQuestions={getQuestionList}
|
||
projectId={projectId}
|
||
/>
|
||
</TabPanel>
|
||
|
||
<TabPanel value={activeTab} index={1}>
|
||
<TemplateListView
|
||
templates={templates}
|
||
onEditTemplate={handleEditTemplate}
|
||
onDeleteTemplate={handleDeleteTemplate}
|
||
loading={templatesLoading}
|
||
/>
|
||
</TabPanel>
|
||
|
||
<TabPanel value={activeTab} index={2}>
|
||
<QuestionTreeView
|
||
questions={questions.data}
|
||
tags={tags}
|
||
selectedQuestions={selectedQuestions}
|
||
onSelectQuestion={handleSelectQuestion}
|
||
onDeleteQuestion={questionId => handleDeleteQuestion(questionId, selectedQuestions, setSelectedQuestions)}
|
||
onEditQuestion={handleOpenEditDialog}
|
||
projectId={projectId}
|
||
searchTerm={searchTerm}
|
||
/>
|
||
</TabPanel>
|
||
</Paper>
|
||
|
||
{/* 确认对话框 */}
|
||
<ConfirmDialog
|
||
open={confirmDialog.open}
|
||
onClose={closeConfirmDialog}
|
||
onConfirm={handleConfirmAction}
|
||
title={confirmDialog.title}
|
||
content={confirmDialog.content}
|
||
/>
|
||
|
||
<QuestionEditDialog
|
||
open={editDialogOpen}
|
||
onClose={handleCloseDialog}
|
||
onSubmit={handleSubmitQuestion}
|
||
initialData={editingQuestion}
|
||
tags={tags}
|
||
mode={editMode}
|
||
projectId={projectId}
|
||
/>
|
||
|
||
<TemplateFormDialog
|
||
open={templateDialogOpen}
|
||
onClose={handleCloseTemplateDialog}
|
||
onSubmit={handleSubmitTemplate}
|
||
template={editingTemplate}
|
||
/>
|
||
|
||
<ExportQuestionsDialog
|
||
open={exportDialogOpen}
|
||
onClose={handleCloseExportDialog}
|
||
onExport={handleExportQuestions}
|
||
selectedCount={selectedQuestions.length}
|
||
totalCount={questions.total || 0}
|
||
/>
|
||
</Container>
|
||
);
|
||
}
|