feat(knowledge-testing): add pagination and document filtering to testing interface

src/pages/knowledge/testing.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import {
   Box,
   Container,
@@ -15,270 +15,206 @@ import {
   MenuItem,
   FormControlLabel,
   Switch,
-  Fab,
-  Snackbar,
-  Alert,
   Grid,
-  Card,
-  CardContent,
+  Pagination,
+  Checkbox,
+  ListItemText,
+  OutlinedInput,
+  ListSubheader,
   Chip,
-  Divider,
-  Stack,
-  CircularProgress,
 } from '@mui/material';
-import {
-  ArrowBack as ArrowBackIcon,
-  Search as SearchIcon,
-  Psychology as PsychologyIcon,
-} from '@mui/icons-material';
 import { useKnowledgeDetail } from '@/hooks/knowledge-hooks';
+import { useRerankModelOptions } from '@/hooks/llm-hooks';
 import knowledgeService from '@/services/knowledge_service';
 import type { ITestRetrievalRequestBody } from '@/interfaces/request/knowledge';
-import type { ITestingResult, ITestingChunk, ITestingDocument } from '@/interfaces/database/knowledge';
+import type { INextTestingResult } from '@/interfaces/database/knowledge';
 import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
+import TestChunkResult from './components/TestChunkResult';
+import { useSnackbar } from '@/components/Provider/SnackbarProvider';
+import { useTranslation } from 'react-i18next';
+import { toLower } from 'lodash';
+import { t } from 'i18next';
 
+// 语言选项常量
+const Languages = [
+  'English',
+  'Chinese',
+  'Spanish',
+  'French',
+  'German',
+  'Japanese',
+  'Korean',
+  'Vietnamese',
+];
+
+const options = Languages.map((x) => ({
+  label: t('language.' + toLower(x)),
+  value: x,
+}));
+
+// 表单数据接口
 interface TestFormData {
   question: string;
   similarity_threshold: number;
   vector_similarity_weight: number;
   rerank_id?: string;
-  top_k: number;
-  use_kg: boolean;
-  highlight: boolean;
-}
-
-interface ResultViewProps {
-  result: ITestingResult | null;
-  loading: boolean;
-}
-
-function ResultView({ result, loading }: ResultViewProps) {
-  if (loading) {
-    return (
-      <Paper sx={{ p: 3, textAlign: 'center' }}>
-        <CircularProgress />
-        <Typography variant="body2" sx={{ mt: 2 }}>
-          正在检索测试...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (!result) {
-    return (
-      <Paper sx={{ p: 3, textAlign: 'center' }}>
-        <PsychologyIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 2 }} />
-        <Typography variant="h6" color="text.secondary">
-          请输入测试问题并点击测试按钮
-        </Typography>
-      </Paper>
-    );
-  }
-
-  return (
-    <Box>
-      {/* 测试结果概览 */}
-      <Paper sx={{ p: 3, mb: 3 }}>
-        <Typography variant="h6" gutterBottom>
-          测试结果概览
-        </Typography>
-        <Grid container spacing={2}>
-          <Grid size={{xs: 12, sm: 4}}>
-            <Card>
-              <CardContent>
-                <Typography variant="h4" color="primary">
-                  {result.total}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  匹配的文档块
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid size={{xs: 12, sm: 4}}>
-            <Card>
-              <CardContent>
-                <Typography variant="h4" color="secondary">
-                  {result.documents?.length || 0}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  相关文档
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid size={{xs: 12, sm: 4}}>
-            <Card>
-              <CardContent>
-                <Typography variant="h4" color="success.main">
-                  {result.chunks?.length || 0}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  返回的块数
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        </Grid>
-      </Paper>
-
-      {/* 匹配的文档块 */}
-      {result.chunks && result.chunks.length > 0 && (
-        <Paper sx={{ p: 3, mb: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            匹配的文档块
-          </Typography>
-          <Stack spacing={2}>
-            {result.chunks.map((chunk: ITestingChunk, index: number) => (
-              <Card key={chunk.id || index} variant="outlined">
-                <CardContent>
-                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
-                    <Typography variant="subtitle2" color="primary">
-                      文档: {chunk.document_name}
-                    </Typography>
-                    <Stack direction="row" spacing={1}>
-                      <Chip 
-                        label={`相似度: ${(chunk.similarity * 100).toFixed(1)}%`} 
-                        size="small" 
-                        color="primary" 
-                        variant="outlined"
-                      />
-                      {chunk.vector_similarity && (
-                        <Chip 
-                          label={`向量: ${(chunk.vector_similarity * 100).toFixed(1)}%`} 
-                          size="small" 
-                          color="secondary" 
-                          variant="outlined"
-                        />
-                      )}
-                      {chunk.term_similarity && (
-                        <Chip 
-                          label={`词项: ${(chunk.term_similarity * 100).toFixed(1)}%`} 
-                          size="small" 
-                          color="info" 
-                          variant="outlined"
-                        />
-                      )}
-                    </Stack>
-                  </Box>
-                  <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
-                    {chunk.content || '内容不可用'}
-                  </Typography>
-                </CardContent>
-              </Card>
-            ))}
-          </Stack>
-        </Paper>
-      )}
-
-      {/* 相关文档统计 */}
-      {result.documents && result.documents.length > 0 && (
-        <Paper sx={{ p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            相关文档统计
-          </Typography>
-          <Stack spacing={1}>
-            {result.documents.map((doc: ITestingDocument, index: number) => (
-              <Box key={doc.doc_id || index} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Typography variant="body2">
-                  {doc.doc_name}
-                </Typography>
-                <Chip 
-                  label={`${doc.count} 个匹配块`} 
-                  size="small" 
-                  color="default"
-                />
-              </Box>
-            ))}
-          </Stack>
-        </Paper>
-      )}
-    </Box>
-  );
+  top_k?: number;
+  use_kg?: boolean;
+  cross_languages?: string[];
+  doc_ids?: string[];
 }
 
 function KnowledgeBaseTesting() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const [testResult, setTestResult] = useState<ITestingResult | null>(null);
+  const { t } = useTranslation();
+
+  // 状态管理
+  const [testResult, setTestResult] = useState<INextTestingResult | null>(null);
   const [testing, setTesting] = useState(false);
-  const [snackbar, setSnackbar] = useState<{
-    open: boolean;
-    message: string;
-    severity: 'success' | 'error';
-  }>({
-    open: false,
-    message: '',
-    severity: 'success',
-  });
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [selectedDocIds, setSelectedDocIds] = useState<string[]>([]);
+
+  const { showMessage } = useSnackbar();
 
   // 获取知识库详情
-  const { knowledge, loading: detailLoading } = useKnowledgeDetail(id || '');
+  const { knowledge: knowledgeDetail, loading: detailLoading } = useKnowledgeDetail(id || '');
 
-  // 测试表单
-  const form = useForm<TestFormData>({
+  // 获取重排序模型选项
+  const { options: rerankOptions, loading: rerankLoading } = useRerankModelOptions();
+
+  // 表单配置
+  const { control, handleSubmit, watch, register, setValue, getValues, formState: { errors } } = useForm<TestFormData>({
     defaultValues: {
       question: '',
       similarity_threshold: 0.2,
       vector_similarity_weight: 0.3,
       rerank_id: '',
-      top_k: 6,
+      top_k: 1024,
       use_kg: false,
-      highlight: true,
+      cross_languages: [],
+      doc_ids: [],
     },
   });
 
-  const { register, handleSubmit, watch, setValue, formState: { errors } } = form;
-
+  // 处理测试提交
   const handleTestSubmit = async (data: TestFormData) => {
     if (!id) return;
 
+    setTesting(true);
     try {
-      setTesting(true);
-      
       const requestBody: ITestRetrievalRequestBody = {
         question: data.question,
         similarity_threshold: data.similarity_threshold,
         vector_similarity_weight: data.vector_similarity_weight,
-        top_k: data.top_k,
-        use_kg: data.use_kg,
-        highlight: data.highlight,
-        kb_id: [id],
+        kb_id: id,
+        page: page,
+        size: pageSize,
       };
 
-      if (data.rerank_id && data.rerank_id.trim()) {
+      // 只有当字段有值时才添加到请求体中
+      if (data.rerank_id) {
         requestBody.rerank_id = data.rerank_id;
       }
 
+      if (data.top_k) {
+        requestBody.top_k = data.top_k;
+      }
+
+      if (data.use_kg !== undefined) {
+        requestBody.use_kg = data.use_kg;
+      }
+
+      // 如果有选择的文档，添加到请求中
+      if (data.doc_ids && data.doc_ids.length > 0) {
+        requestBody.doc_ids = data.doc_ids;
+      } else {
+        if (selectedDocIds.length > 0) {
+          requestBody.doc_ids = selectedDocIds;
+        }
+      }
+
+      if (data.cross_languages && data.cross_languages.length > 0) {
+        requestBody.cross_languages = data.cross_languages;
+      }
+
       const response = await knowledgeService.retrievalTest(requestBody);
 
       if (response.data.code === 0) {
         setTestResult(response.data.data);
-        setSnackbar({
-          open: true,
-          message: '检索测试完成',
-          severity: 'success',
-        });
+        setPage(1); // 重置到第一页
+        showMessage.success('检索测试完成');
       } else {
         throw new Error(response.data.message || '检索测试失败');
       }
     } catch (error: any) {
-      setSnackbar({
-        open: true,
-        message: error.message || '检索测试失败',
-        severity: 'error',
-      });
+      showMessage.error(error.message || '检索测试失败');
     } finally {
       setTesting(false);
     }
   };
 
-  const handleBackToDetail = () => {
-    navigate(`/knowledge/${id}`);
+  // 处理分页变化
+  const handlePageChange = async (event: React.ChangeEvent<unknown>, value: number) => {
+    if (!id) return;
+
+    setPage(value);
+    setTesting(true);
+
+    try {
+      const formData = getValues();
+      const requestBody: ITestRetrievalRequestBody = {
+        question: formData.question,
+        similarity_threshold: formData.similarity_threshold,
+        vector_similarity_weight: formData.vector_similarity_weight,
+        kb_id: id,
+        page: value,
+        size: pageSize,
+        highlight: true,
+      };
+
+      // 只有当字段有值时才添加到请求体中
+      if (formData.rerank_id) {
+        requestBody.rerank_id = formData.rerank_id;
+      }
+      if (formData.top_k) {
+        requestBody.top_k = formData.top_k;
+      }
+      if (formData.use_kg !== undefined) {
+        requestBody.use_kg = formData.use_kg;
+      }
+      if (selectedDocIds.length > 0) {
+        requestBody.doc_ids = selectedDocIds;
+      }
+
+      if (formData.cross_languages && formData.cross_languages.length > 0) {
+        requestBody.cross_languages = formData.cross_languages;
+      }
+
+      const response = await knowledgeService.retrievalTest(requestBody);
+      if (response.data.code === 0) {
+        setTestResult(response.data.data);
+      } else {
+        throw new Error(response.data.message || '分页请求失败');
+      }
+    } catch (error: any) {
+      showMessage.error(error.message || '分页请求失败');
+    } finally {
+      setTesting(false);
+    }
   };
 
-  const handleCloseSnackbar = () => {
-    setSnackbar(prev => ({ ...prev, open: false }));
+  // 处理文档过滤
+  const handleDocumentFilter = (docIds: string[]) => {
+    setSelectedDocIds(docIds);
+    setValue('doc_ids', docIds);
+    handleTestSubmit(getValues());
+  };
+
+  // 返回详情页
+  const handleBackToDetail = () => {
+    navigate(`/knowledge/${id}`);
   };
 
   if (detailLoading) {
@@ -291,26 +227,27 @@ function KnowledgeBaseTesting() {
 
   return (
     <Container maxWidth="lg" sx={{ py: 4 }}>
+
       {/* 面包屑导航 */}
-      <KnowledgeBreadcrumbs knowledge={knowledge} />
-      
+      <KnowledgeBreadcrumbs knowledge={knowledgeDetail} />
+
       <Box sx={{ mb: 3 }}>
         <Typography variant="h4" gutterBottom>
           知识库测试
         </Typography>
         <Typography variant="subtitle1" color="text.secondary">
-          {knowledge?.name}
+          {knowledgeDetail?.name}
         </Typography>
       </Box>
 
-      <Grid container spacing={3}>
+      <Grid container spacing={3} direction="row">
         {/* 测试表单 */}
-        <Grid size={{xs: 12, sm: 4}}>
+        <Grid size={4}>
           <Paper sx={{ p: 3, position: 'sticky', top: 20 }}>
             <Typography variant="h6" gutterBottom>
               测试配置
             </Typography>
-            
+
             <Box component="form" onSubmit={handleSubmit(handleTestSubmit)} sx={{ mt: 2 }}>
               <TextField
                 {...register('question', { required: '请输入测试问题' })}
@@ -356,99 +293,136 @@ function KnowledgeBaseTesting() {
                 />
               </Box>
 
-              <TextField
-                {...register('top_k')}
-                label="返回结果数量"
-                type="number"
-                fullWidth
-                margin="normal"
-                inputProps={{ min: 1, max: 50 }}
-              />
+              <FormControl fullWidth margin="normal">
+                <InputLabel>重排序模型 (可选)</InputLabel>
+                <Controller
+                  name="rerank_id"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      label="重排序模型 (可选)"
+                      disabled={rerankLoading}
+                    >
+                      <MenuItem value="">
+                        <em>不使用重排序</em>
+                      </MenuItem>
+                      {rerankOptions.map((group) => [
+                        <ListSubheader key={group.label}>{group.label}</ListSubheader>,
+                        ...group.options.map((option) => (
+                          <MenuItem key={option.value} value={option.value} disabled={option.disabled}>
+                            {option.label}
+                          </MenuItem>
+                        ))
+                      ])}
+                    </Select>
+                  )}
+                />
+              </FormControl>
 
-              <TextField
-                {...register('rerank_id')}
-                label="重排序模型ID (可选)"
-                fullWidth
-                margin="normal"
-                placeholder="留空使用默认设置"
-              />
+              {/* Top-K 字段 - 只有选择了rerank_id时才显示 */}
+              {watch('rerank_id') && (
+                <TextField
+                  {...register('top_k', {
+                    required: '请输入返回结果数量',
+                    min: { value: 1, message: '最小值为1' },
+                    max: { value: 2048, message: '最大值为2048' }
+                  })}
+                  label="Top-K"
+                  type="number"
+                  fullWidth
+                  margin="normal"
+                  inputProps={{ min: 1, max: 2048 }}
+                  error={!!errors.top_k}
+                  helperText={errors.top_k?.message || '与Rerank模型配合使用'}
+                />
+              )}
+
+              <FormControl fullWidth margin="normal">
+                <InputLabel>跨语言搜索</InputLabel>
+                <Controller
+                  name="cross_languages"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      multiple
+                      label="跨语言搜索"
+                      input={<OutlinedInput label="跨语言搜索" />}
+                      renderValue={(selected) => (
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                          {selected.map((value) => {
+                            const option = options.find(opt => opt.value === value);
+                            return (
+                              <Chip key={value} label={option?.label || value} size="small" />
+                            );
+                          })}
+                        </Box>
+                      )}
+                    >
+                      {options.map((option) => (
+                        <MenuItem key={option.value} value={option.value}>
+                          <Checkbox checked={(watch('cross_languages') ?? []).indexOf(option.value) > -1} />
+                          <ListItemText primary={option.label} />
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </FormControl>
 
               <FormControlLabel
                 control={
                   <Switch
                     {...register('use_kg')}
                     checked={watch('use_kg')}
-                    onChange={(e) => setValue('use_kg', e.target.checked)}
                   />
                 }
                 label="使用知识图谱"
-                sx={{ mt: 2 }}
-              />
-
-              <FormControlLabel
-                control={
-                  <Switch
-                    {...register('highlight')}
-                    checked={watch('highlight')}
-                    onChange={(e) => setValue('highlight', e.target.checked)}
-                  />
-                }
-                label="高亮显示"
-                sx={{ mt: 1 }}
               />
 
               <Button
                 type="submit"
                 variant="contained"
                 fullWidth
-                size="large"
                 disabled={testing}
-                startIcon={testing ? <CircularProgress size={20} /> : <SearchIcon />}
-                sx={{ mt: 3 }}
+                sx={{ mt: 2 }}
               >
                 {testing ? '测试中...' : '开始测试'}
               </Button>
             </Box>
           </Paper>
         </Grid>
+        <Grid size={8}>
+          {testResult && (
+            <TestChunkResult
+              result={testResult}
+              loading={testing}
+              page={page}
+              pageSize={pageSize}
+              onDocumentFilter={handleDocumentFilter}
+              selectedDocIds={selectedDocIds}
+            />
+          )}
 
-        {/* 测试结果 */}
-        <Grid size={{xs: 12, md: 8}}>
-          <ResultView result={testResult} loading={testing} />
+          {/* 分页组件 */}
+          {testResult && testResult.total > 10 && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+              <Pagination
+                count={Math.ceil(testResult.total / 10)}
+                page={page}
+                onChange={handlePageChange}
+                color="primary"
+                size="large"
+                showFirstButton
+                showLastButton
+              />
+            </Box>
+          )}
         </Grid>
       </Grid>
-
-      {/* 返回按钮 */}
-      <Fab
-        color="primary"
-        aria-label="返回知识库详情"
-        onClick={handleBackToDetail}
-        sx={{
-          position: 'fixed',
-          bottom: 16,
-          right: 16,
-        }}
-      >
-        <ArrowBackIcon />
-      </Fab>
-
-      {/* 消息提示 */}
-      <Snackbar
-        open={snackbar.open}
-        autoHideDuration={6000}
-        onClose={handleCloseSnackbar}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      >
-        <Alert
-          onClose={handleCloseSnackbar}
-          severity={snackbar.severity}
-          sx={{ width: '100%' }}
-        >
-          {snackbar.message}
-        </Alert>
-      </Snackbar>
     </Container>
   );
-}
+};
 
 export default KnowledgeBaseTesting;