AI_POC/TERES_web_frontend
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(knowledge): add knowledge base detail page components and hooks

Browse Source 
refactor(knowledge): restructure knowledge detail page with new components
feat(components): add FileUploadDialog for file upload functionality
feat(hooks): implement document management hooks for CRUD operations
This commit is contained in:
guangfei.zhao
2025-10-14 15:42:40 +08:00
parent 34181cf025
commit 7384ae36d0
12 changed files with 1456 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
src/pages/knowledge/components/FileListComponent.tsx Normal file
View File

@@ -0,0 +1,323 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Box,
Typography,
Paper,
Chip,
IconButton,
TextField,
InputAdornment,
Menu,
MenuItem,
Tooltip,
Button,
Stack,
} from '@mui/material';
import {
Search as SearchIcon,
MoreVert as MoreVertIcon,
InsertDriveFile as FileIcon,
PictureAsPdf as PdfIcon,
Description as DocIcon,
Image as ImageIcon,
VideoFile as VideoIcon,
AudioFile as AudioIcon,
Upload as UploadIcon,
Refresh as RefreshIcon,
Delete as DeleteIcon,
} from '@mui/icons-material';
import { DataGrid, type GridColDef, type GridRowSelectionModel } from '@mui/x-data-grid';
import { zhCN, enUS } from '@mui/x-data-grid/locales';
import type { IKnowledgeFile } from '@/interfaces/database/knowledge';
import { RUNNING_STATUS_KEYS, type RunningStatus } from '@/constants/knowledge';
import { LanguageAbbreviation } from '@/locales';
import dayjs from 'dayjs';
interface FileListComponentProps {
files: IKnowledgeFile[];
loading: boolean;
searchKeyword: string;
onSearchChange: (keyword: string) => void;
onReparse: (fileIds: string[]) => void;
onDelete: (fileIds: string[]) => void;
onUpload: () => void;
onRefresh: () => void;
rowSelectionModel: GridRowSelectionModel;
onRowSelectionModelChange: (model: GridRowSelectionModel) => void;
}
const getFileIcon = (type: string) => {
switch (type.toLowerCase()) {
case 'pdf': return <PdfIcon color="error" />;
case 'doc':
case 'docx': return <DocIcon color="primary" />;
case 'jpg':
case 'jpeg':
case 'png':
case 'gif': return <ImageIcon color="success" />;
case 'mp4':
case 'avi':
case 'mov': return <VideoIcon color="secondary" />;
case 'mp3':
case 'wav': return <AudioIcon color="warning" />;
default: return <FileIcon />;
}
};
const formatFileSize = (bytes: number): string => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const getStatusChip = (status: string) => {
return <Chip label={status === '1' ? '启用' : '禁用'}
color={status === '1' ? 'success' : 'error'}
size="small" />;
};
const getRunStatusChip = (run: RunningStatus, progress: number) => {
const statusConfig = {
[RUNNING_STATUS_KEYS.UNSTART]: { label: '未开始', color: 'default' as const },
[RUNNING_STATUS_KEYS.RUNNING]: { label: `解析中 ${progress}%`, color: 'info' as const },
[RUNNING_STATUS_KEYS.CANCEL]: { label: '已取消', color: 'warning' as const },
[RUNNING_STATUS_KEYS.DONE]: { label: '完成', color: 'success' as const },
[RUNNING_STATUS_KEYS.FAIL]: { label: '失败', color: 'error' as const },
};
const config = statusConfig[run] || { label: '未知', color: 'default' as const };
return <Chip label={config.label} color={config.color} size="small" />;
};
const FileListComponent: React.FC<FileListComponentProps> = ({
files,
loading,
searchKeyword,
onSearchChange,
onReparse,
onDelete,
onUpload,
onRefresh,
rowSelectionModel,
onRowSelectionModelChange,
}) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [selectedFileId, setSelectedFileId] = useState<string>('');
const { i18n } = useTranslation();
// 根据当前语言获取DataGrid的localeText
const getDataGridLocale = () => {
const currentLanguage = i18n.language;
return currentLanguage === LanguageAbbreviation.Zh ? zhCN : enUS;
};
const handleMenuClick = (event: React.MouseEvent<HTMLElement>, fileId: string) => {
event.stopPropagation();
setAnchorEl(event.currentTarget);
setSelectedFileId(fileId);
};
const handleMenuClose = () => {
setAnchorEl(null);
setSelectedFileId('');
};
const handleReparse = () => {
if (selectedFileId) {
onReparse([selectedFileId]);
}
handleMenuClose();
};
const handleDelete = () => {
if (selectedFileId) {
onDelete([selectedFileId]);
}
handleMenuClose();
};
// 过滤文件列表
const filteredFiles = files.filter(file =>
file.name.toLowerCase().includes(searchKeyword.toLowerCase())
);
// DataGrid 列定义
const columns: GridColDef[] = [
{
field: 'name',
headerName: '文件名',
flex: 1,
minWidth: 100,
maxWidth: 300,
cellClassName: 'grid-center-cell',
renderCell: (params) => (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{getFileIcon(params.row.type)}
<Tooltip title={params.value}>
<Typography variant="body2">{params.value}</Typography>
</Tooltip>
</Box>
),
},
{
field: 'type',
headerName: '类型',
width: 100,
renderCell: (params) => (
<Chip label={params.value.toUpperCase()} size="small" variant="outlined" />
),
},
{
field: 'size',
headerName: '大小',
width: 120,
renderCell: (params) => formatFileSize(params.value),
},
{
field: 'chunk_num',
headerName: '分块数',
width: 100,
type: 'number',
},
{
field: 'status',
headerName: '状态',
width: 120,
renderCell: (params) => getStatusChip(params.value),
},
{
field: 'run',
headerName: '解析状态',
width: 120,
renderCell: (params) => getRunStatusChip(params.value, params.row.progress),
},
{
field: 'create_time',
headerName: '上传时间',
width: 160,
valueFormatter: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
},
{
field: 'actions',
headerName: '操作',
width: 80,
sortable: false,
renderCell: (params) => (
<IconButton
size="small"
onClick={(e) => handleMenuClick(e, params.row.id)}
>
<MoreVertIcon />
</IconButton>
),
},
];
return (
<Box>
{/* 文件操作栏 */}
<Paper sx={{ p: 2, mb: 2 }}>
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
<TextField
placeholder="搜索文件..."
value={searchKeyword}
onChange={(e) => onSearchChange(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
sx={{ minWidth: 300 }}
size="small"
/>
<Stack direction="row" spacing={1}>
<Button
variant="contained"
startIcon={<UploadIcon />}
onClick={onUpload}
>
上传文件
</Button>
{rowSelectionModel.ids.size > 0 && (
<>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={() => onReparse(Array.from(rowSelectionModel.ids).map((id) => id.toString()))}
>
重新解析 ({rowSelectionModel.ids.size})
</Button>
<Button
variant="outlined"
color="error"
startIcon={<DeleteIcon />}
onClick={() => onDelete(Array.from(rowSelectionModel.ids).map((id) => id.toString()))}
>
删除 ({rowSelectionModel.ids.size})
</Button>
</>
)}
<IconButton onClick={onRefresh}>
<RefreshIcon />
</IconButton>
</Stack>
</Stack>
</Paper>
{/* 文件列表 */}
<Paper sx={{ height: 600, width: '100%' }}>
<DataGrid
rows={filteredFiles}
columns={columns}
loading={loading}
checkboxSelection
disableRowSelectionOnClick
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={onRowSelectionModelChange}
pageSizeOptions={[10, 25, 50, 100]}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 25 },
},
}}
localeText={getDataGridLocale().components.MuiDataGrid.defaultProps.localeText}
sx={{
'& .MuiDataGrid-cell:focus': {
outline: 'none',
},
'& .MuiDataGrid-row:hover': {
backgroundColor: 'action.hover',
},
}}
/>
</Paper>
{/* 右边菜单 */}
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
>
<MenuItem onClick={handleReparse}>
<Typography>重新解析</Typography>
</MenuItem>
<MenuItem onClick={handleDelete}>
<Typography color="error">删除</Typography>
</MenuItem>
</Menu>
</Box>
);
};
export default FileListComponent;

70
src/pages/knowledge/components/FloatingActionButtons.tsx Normal file
View File

@@ -0,0 +1,70 @@
import React from 'react';
import { SpeedDial, SpeedDialAction } from '@mui/material';
import {
Settings as SettingsIcon,
Search as TestIcon,
Settings as ConfigIcon,
} from '@mui/icons-material';
interface FloatingActionButtonsProps {
onTestClick: () => void;
onConfigClick: () => void;
}
const FloatingActionButtons: React.FC<FloatingActionButtonsProps> = ({
onTestClick,
onConfigClick,
}) => {
const actions = [
{
icon: <TestIcon />,
name: '检索测试',
onClick: onTestClick,
},
{
icon: <ConfigIcon />,
name: '配置设置',
onClick: onConfigClick,
},
];
return (
<SpeedDial
ariaLabel="知识库操作"
sx={{
position: 'fixed',
bottom: 128,
right: 64,
'& .MuiSpeedDial-fab': {
bgcolor: 'primary.main',
'&:hover': {
bgcolor: 'primary.dark',
},
},
}}
icon={<SettingsIcon />}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
slotProps={{
tooltip: {
title: action.name,
sx: {
bgcolor: 'primary.main',
color: 'white',
":hover": {
bgcolor: 'primary.dark',
},
},
},
}}
onClick={action.onClick}
/>
))}
</SpeedDial>
);
};
export default FloatingActionButtons;

72
src/pages/knowledge/components/KnowledgeInfoCard.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import {
Card,
CardContent,
Grid,
Typography,
Chip,
Stack,
} from '@mui/material';
import dayjs from 'dayjs';
import type { IKnowledge } from '@/interfaces/database/knowledge';
interface KnowledgeInfoCardProps {
knowledgeBase: IKnowledge;
}
const formatFileSize = (bytes: number): string => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const KnowledgeInfoCard: React.FC<KnowledgeInfoCardProps> = ({ knowledgeBase }) => {
return (
<Card sx={{ mb: 3 }}>
<CardContent>
<Grid container spacing={3}>
<Grid size={{ xs: 12, md: 8 }}>
<Typography variant="h4" gutterBottom>
{knowledgeBase.name}
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
{knowledgeBase.description || '暂无描述'}
</Typography>
<Stack direction="row" spacing={2} flexWrap="wrap">
<Chip label={`${knowledgeBase.doc_num || 0} 个文件`} variant="outlined" />
<Chip label={`${knowledgeBase.chunk_num || 0} 个分块`} variant="outlined" />
<Chip label={`${knowledgeBase.token_num || 0} 个令牌`} variant="outlined" />
<Chip label={`大小: ${formatFileSize(knowledgeBase.size || 0)}`} variant="outlined" />
</Stack>
</Grid>
<Grid size={{ xs: 12, md: 4 }}>
<Stack spacing={1} alignItems="flex-end">
<Typography variant="body2" color="text.secondary">
创建时间: {dayjs(knowledgeBase.create_time).format('YYYY-MM-DD HH:mm:ss')}
</Typography>
<Typography variant="body2" color="text.secondary">
更新时间: {dayjs(knowledgeBase.update_time).format('YYYY-MM-DD HH:mm:ss')}
</Typography>
<Typography variant="body2" color="text.secondary">
语言: {knowledgeBase.language || 'English'}
</Typography>
<Typography variant="body2" color="text.secondary">
权限: {knowledgeBase.permission}
</Typography>
<Typography variant="body2" color="text.secondary">
嵌入模型: {knowledgeBase.embd_id}
</Typography>
<Typography variant="body2" color="text.secondary">
解析器: {knowledgeBase.parser_id}
</Typography>
</Stack>
</Grid>
</Grid>
</CardContent>
</Card>
);
};
export default KnowledgeInfoCard;

8
src/pages/knowledge/create.tsx
View File

@@ -58,7 +58,7 @@ function KnowledgeBaseCreate() {
// 使用知识库操作 hooks
const {
loading: isSubmitting,
loading: isSubmitting,
error,
createKnowledge,
updateKnowledgeModelConfig,
@@ -82,9 +82,9 @@ function KnowledgeBaseCreate() {
embd_id: 'text-embedding-v3@Tongyi-Qianwen',
chunk_token_num: 512,
layout_recognize: 'DeepDOC',
delimiter: '\n!?。；！？',
auto_keywords: 5,
auto_questions: 3,
delimiter: '\n',
auto_keywords: 0,
auto_questions: 0,
html4excel: false,
topn_tags: 10,
use_raptor: false,

525
src/pages/knowledge/detail.tsx
View File

@@ -3,110 +3,26 @@ import { useParams, useNavigate } from 'react-router-dom';
import {
Box,
Typography,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Chip,
IconButton,
Button,
TextField,
InputAdornment,
LinearProgress,
Alert,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Menu,
MenuItem,
Tooltip,
Stack,
Card,
CardContent,
Grid,
Button,
TextField,
Breadcrumbs,
Link,
Stack,
} from '@mui/material';
import {
Search as SearchIcon,
Upload as UploadIcon,
Delete as DeleteIcon,
Refresh as RefreshIcon,
MoreVert as MoreVertIcon,
InsertDriveFile as FileIcon,
PictureAsPdf as PdfIcon,
Description as DocIcon,
Image as ImageIcon,
VideoFile as VideoIcon,
AudioFile as AudioIcon,
CloudUpload as CloudUploadIcon,
Settings as SettingsIcon,
} from '@mui/icons-material';
import { type GridRowSelectionModel } from '@mui/x-data-grid';
import knowledgeService from '@/services/knowledge_service';
import type { IKnowledge, IKnowledgeFile } from '@/interfaces/database/knowledge';
import { RUNNING_STATUS_KEYS, type RunningStatus } from '@/constants/knowledge';
// 文件类型图标映射
const getFileIcon = (type: string) => {
const lowerType = type.toLowerCase();
if (lowerType.includes('pdf')) return <PdfIcon />;
if (lowerType.includes('doc') || lowerType.includes('txt') || lowerType.includes('md')) return <DocIcon />;
if (lowerType.includes('jpg') || lowerType.includes('png') || lowerType.includes('jpeg')) return <ImageIcon />;
if (lowerType.includes('mp4') || lowerType.includes('avi') || lowerType.includes('mov')) return <VideoIcon />;
if (lowerType.includes('mp3') || lowerType.includes('wav') || lowerType.includes('m4a')) return <AudioIcon />;
return <FileIcon />;
};
// 文件大小格式化
const formatFileSize = (bytes: number): string => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
// 解析状态映射
const getStatusChip = (status: string, progress: number) => {
switch (status) {
case '1':
return <Chip label="已启用" color="success" size="small" />;
case '0':
return <Chip label="已禁用" color="default" size="small" />;
default:
return <Chip label="未知" color="warning" size="small" />;
}
};
// 运行状态映射
const getRunStatusChip = (run: RunningStatus, progress: number) => {
switch (run) {
case RUNNING_STATUS_KEYS.UNSTART:
return <Chip label="未开始" color="default" size="small" />;
case RUNNING_STATUS_KEYS.RUNNING:
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Chip label="解析中" color="primary" size="small" />
<Box sx={{ width: 60 }}>
<LinearProgress variant="determinate" value={progress} />
</Box>
<Typography variant="caption">{progress}%</Typography>
</Box>
);
case RUNNING_STATUS_KEYS.CANCEL:
return <Chip label="已取消" color="warning" size="small" />;
case RUNNING_STATUS_KEYS.DONE:
return <Chip label="已完成" color="success" size="small" />;
case RUNNING_STATUS_KEYS.FAIL:
return <Chip label="失败" color="error" size="small" />;
default:
return <Chip label="未知" color="default" size="small" />;
}
};
import FileUploadDialog from '@/components/FileUploadDialog';
import KnowledgeInfoCard from './components/KnowledgeInfoCard';
import FileListComponent from './components/FileListComponent';
import FloatingActionButtons from './components/FloatingActionButtons';
import { useDocumentList, useDocumentOperations } from '@/hooks/document-hooks';
function KnowledgeBaseDetail() {
const { id } = useParams<{ id: string }>();
@@ -114,15 +30,34 @@ function KnowledgeBaseDetail() {
// 状态管理
const [knowledgeBase, setKnowledgeBase] = useState<IKnowledge | null>(null);
const [files, setFiles] = useState<IKnowledgeFile[]>([]);
const [loading, setLoading] = useState(true);
const [filesLoading, setFilesLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [searchKeyword, setSearchKeyword] = useState('');
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [rowSelectionModel, setRowSelectionModel] = useState<GridRowSelectionModel>({
type: 'include',
ids: new Set()
});
const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [testingDialogOpen, setTestingDialogOpen] = useState(false);
const [configDialogOpen, setConfigDialogOpen] = useState(false);
// 使用新的document hooks
const {
documents: files,
loading: filesLoading,
error: filesError,
refresh: refreshFiles,
setKeywords,
} = useDocumentList(id || '');
const {
uploadDocuments,
deleteDocuments,
runDocuments,
loading: operationLoading,
error: operationError,
} = useDocumentOperations();
// 获取知识库详情
const fetchKnowledgeDetail = async () => {
@@ -144,48 +79,38 @@ function KnowledgeBaseDetail() {
}
};
// 获取文件列表
const fetchFileList = async () => {
if (!id) return;
try {
setFilesLoading(true);
// const response = await knowledgeService.getDocumentList(
// { kb_id: id },
// { keywords: searchKeyword }
// );
// if (response.data.code === 0) {
// setFiles(response.data.data.docs || []);
// } else {
// setError(response.data.message || '获取文件列表失败');
// }
// 删除文件
const handleDeleteFiles = async () => {
try {
await deleteDocuments(Array.from(rowSelectionModel.ids) as string[]);
setDeleteDialogOpen(false);
setRowSelectionModel({
type: 'include',
ids: new Set()
});
refreshFiles();
} catch (err: any) {
setError(err.response?.data?.message || err.message || '获取文件列表失败');
} finally {
setFilesLoading(false);
setError(err.response?.data?.message || err.message || '删除文件失败');
}
};
// 删除文件
const handleDeleteFiles = async () => {
if (selectedFiles.length === 0) return;
// 上传文件处理
const handleUploadFiles = async (uploadFiles: File[]) => {
console.log('上传文件:', uploadFiles);
const kb_id = knowledgeBase?.id || '';
try {
await knowledgeService.removeDocument({ doc_ids: selectedFiles });
setSelectedFiles([]);
setDeleteDialogOpen(false);
fetchFileList(); // 刷新列表
await uploadDocuments(kb_id, uploadFiles);
refreshFiles();
} catch (err: any) {
setError(err.response?.data?.message || err.message || '删除文件失败');
throw new Error(err.response?.data?.message || err.message || '上传文件失败');
}
};
// 重新解析文件
const handleReparse = async (docIds: string[]) => {
try {
await knowledgeService.runDocument({ doc_ids: docIds });
fetchFileList(); // 刷新列表
await runDocuments(docIds);
refreshFiles(); // 刷新列表
} catch (err: any) {
setError(err.response?.data?.message || err.message || '重新解析失败');
}
@@ -194,22 +119,19 @@ function KnowledgeBaseDetail() {
// 初始化数据
useEffect(() => {
fetchKnowledgeDetail();
// fetchFileList();
}, [id]);
// 搜索文件
useEffect(() => {
const timer = setTimeout(() => {
fetchFileList();
setKeywords(searchKeyword);
}, 500);
return () => clearTimeout(timer);
}, [searchKeyword]);
// 过滤文件
const filteredFiles = files.filter(file =>
file.name.toLowerCase().includes(searchKeyword.toLowerCase())
);
return () => clearTimeout(timer);
}, [searchKeyword, setKeywords]);
// 合并错误状态
const combinedError = error || filesError || operationError;
if (loading) {
return (
@@ -220,10 +142,10 @@ function KnowledgeBaseDetail() {
);
}
if (error) {
if (combinedError) {
return (
<Box sx={{ p: 3 }}>
<Alert severity="error">{error}</Alert>
<Alert severity="error">{combinedError}</Alert>
</Box>
);
}
@@ -252,220 +174,59 @@ function KnowledgeBaseDetail() {
</Breadcrumbs>
{/* 知识库信息卡片 */}
<Card sx={{ mb: 3 }}>
<CardContent>
<Grid container spacing={3}>
<Grid size={{xs:12,md:8}}>
<Typography variant="h4" gutterBottom>
{knowledgeBase.name}
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
{knowledgeBase.description || '暂无描述'}
</Typography>
<Stack direction="row" spacing={2}>
<Chip label={`${knowledgeBase.doc_num} 个文件`} variant="outlined" />
<Chip label={`${knowledgeBase.chunk_num} 个分块`} variant="outlined" />
<Chip label={`${knowledgeBase.token_num} 个令牌`} variant="outlined" />
</Stack>
</Grid>
<Grid size={{xs:12,md:4}}>
<Stack spacing={1} alignItems="flex-end">
<Typography variant="body2" color="text.secondary">
创建时间: {knowledgeBase.create_date}
</Typography>
<Typography variant="body2" color="text.secondary">
更新时间: {knowledgeBase.update_date}
</Typography>
<Typography variant="body2" color="text.secondary">
语言: {knowledgeBase.language}
</Typography>
</Stack>
</Grid>
</Grid>
</CardContent>
</Card>
<KnowledgeInfoCard knowledgeBase={knowledgeBase} />
{/* 文件操作栏 */}
<Paper sx={{ p: 2, mb: 2 }}>
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
<TextField
placeholder="搜索文件..."
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
sx={{ minWidth: 300 }}
size="small"
/>
{/* 文件列表组件 */}
<FileListComponent
files={files}
loading={filesLoading}
searchKeyword={searchKeyword}
onSearchChange={setSearchKeyword}
onReparse={(fileIds) => handleReparse(fileIds)}
onDelete={(fileIds) => {
console.log('删除文件:', fileIds);
<Stack direction="row" spacing={1}>
<Button
variant="contained"
startIcon={<UploadIcon />}
onClick={() => setUploadDialogOpen(true)}
>
上传文件
</Button>
{selectedFiles.length > 0 && (
<>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={() => handleReparse(selectedFiles)}
>
重新解析
</Button>
<Button
variant="outlined"
color="error"
startIcon={<DeleteIcon />}
onClick={() => setDeleteDialogOpen(true)}
>
删除 ({selectedFiles.length})
</Button>
</>
)}
<IconButton onClick={() => fetchFileList()}>
<RefreshIcon />
</IconButton>
</Stack>
</Stack>
</Paper>
setRowSelectionModel({
type: 'include',
ids: new Set(fileIds)
});
setDeleteDialogOpen(true);
}}
onUpload={() => setUploadDialogOpen(true)}
onRefresh={() => {
refreshFiles();
fetchKnowledgeDetail();
}}
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newModel) => {
console.log('新的选择模型:', newModel);
setRowSelectionModel(newModel);
}}
/>
{/* 文件列表 */}
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
{/* 全选复选框可以在这里添加 */}
</TableCell>
<TableCell>文件名</TableCell>
<TableCell>类型</TableCell>
<TableCell>大小</TableCell>
<TableCell>分块数</TableCell>
<TableCell>状态</TableCell>
<TableCell>解析状态</TableCell>
<TableCell>上传时间</TableCell>
<TableCell>操作</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filesLoading ? (
<TableRow>
<TableCell colSpan={9} align="center">
<LinearProgress />
<Typography sx={{ mt: 1 }}>加载文件列表...</Typography>
</TableCell>
</TableRow>
) : filteredFiles.length === 0 ? (
<TableRow>
<TableCell colSpan={9} align="center">
<Typography color="text.secondary">
{searchKeyword ? '没有找到匹配的文件' : '暂无文件'}
</Typography>
</TableCell>
</TableRow>
) : (
filteredFiles.map((file) => (
<TableRow key={file.id} hover>
<TableCell padding="checkbox">
{/* 文件选择复选框 */}
</TableCell>
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{getFileIcon(file.type)}
<Typography variant="body2">{file.name}</Typography>
</Box>
</TableCell>
<TableCell>
<Chip label={file.type.toUpperCase()} size="small" variant="outlined" />
</TableCell>
<TableCell>{formatFileSize(file.size)}</TableCell>
<TableCell>{file.chunk_num}</TableCell>
<TableCell>{getStatusChip(file.status, file.progress)}</TableCell>
<TableCell>{getRunStatusChip(file.run, file.progress)}</TableCell>
<TableCell>{file.create_date}</TableCell>
<TableCell>
<IconButton
size="small"
onClick={(e) => setAnchorEl(e.currentTarget)}
>
<MoreVertIcon />
</IconButton>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
{/* 文件操作菜单 */}
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
<MenuItem onClick={() => setAnchorEl(null)}>
<RefreshIcon sx={{ mr: 1 }} />
重新解析
</MenuItem>
<MenuItem onClick={() => setAnchorEl(null)}>
<SettingsIcon sx={{ mr: 1 }} />
解析设置
</MenuItem>
<MenuItem onClick={() => setAnchorEl(null)} sx={{ color: 'error.main' }}>
<DeleteIcon sx={{ mr: 1 }} />
删除
</MenuItem>
</Menu>
{/* 浮动操作按钮 */}
<FloatingActionButtons
onTestClick={() => setTestingDialogOpen(true)}
onConfigClick={() => setConfigDialogOpen(true)}
/>
{/* 上传文件对话框 */}
<Dialog open={uploadDialogOpen} onClose={() => setUploadDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>上传文件</DialogTitle>
<DialogContent>
<Box
sx={{
border: '2px dashed #ccc',
borderRadius: 2,
p: 4,
textAlign: 'center',
cursor: 'pointer',
'&:hover': {
borderColor: 'primary.main',
backgroundColor: 'action.hover',
},
}}
>
<CloudUploadIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 2 }} />
<Typography variant="h6" gutterBottom>
拖拽文件到此处或点击上传
</Typography>
<Typography variant="body2" color="text.secondary">
支持 PDF, DOCX, TXT, MD, PNG, JPG, MP4, WAV 等格式
</Typography>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setUploadDialogOpen(false)}>取消</Button>
<Button variant="contained">上传</Button>
</DialogActions>
</Dialog>
<FileUploadDialog
open={uploadDialogOpen}
onClose={() => setUploadDialogOpen(false)}
onUpload={handleUploadFiles}
title="上传文件到知识库"
acceptedFileTypes={['.pdf', '.docx', '.txt', '.md', '.png', '.jpg', '.jpeg', '.mp4', '.wav']}
maxFileSize={100}
maxFiles={10}
/>
{/* 删除确认对话框 */}
<Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
<DialogTitle>确认删除</DialogTitle>
<DialogContent>
<Typography>
确定要删除选中的 {selectedFiles.length} 个文件吗？此操作不可撤销。
确定要删除选中的 {rowSelectionModel.ids.size} 个文件吗？此操作不可撤销。
</Typography>
</DialogContent>
<DialogActions>
@@ -473,6 +234,88 @@ function KnowledgeBaseDetail() {
<Button color="error" onClick={handleDeleteFiles}>删除</Button>
</DialogActions>
</Dialog>
{/* 检索测试对话框 */}
<Dialog open={testingDialogOpen} onClose={() => setTestingDialogOpen(false)} maxWidth="md" fullWidth>
<DialogTitle>检索测试</DialogTitle>
<DialogContent>
<Stack spacing={3} sx={{ mt: 1 }}>
<TextField
fullWidth
label="测试查询"
placeholder="输入要测试的查询内容..."
multiline
rows={3}
/>
<Stack direction="row" spacing={2}>
<TextField
label="返回结果数量"
type="number"
defaultValue={5}
sx={{ width: 150 }}
/>
<TextField
label="相似度阈值"
type="number"
defaultValue={0.7}
inputProps={{ min: 0, max: 1, step: 0.1 }}
sx={{ width: 150 }}
/>
</Stack>
<Box sx={{ minHeight: 200, border: '1px solid #e0e0e0', borderRadius: 1, p: 2 }}>
<Typography variant="body2" color="text.secondary">
测试结果将在这里显示...
</Typography>
</Box>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setTestingDialogOpen(false)}>关闭</Button>
<Button variant="contained">开始测试</Button>
</DialogActions>
</Dialog>
{/* 配置设置对话框 */}
<Dialog open={configDialogOpen} onClose={() => setConfigDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>配置设置</DialogTitle>
<DialogContent>
<Stack spacing={3} sx={{ mt: 1 }}>
<TextField
fullWidth
label="知识库名称"
defaultValue={knowledgeBase?.name}
/>
<TextField
fullWidth
label="描述"
multiline
rows={3}
defaultValue={knowledgeBase?.description}
/>
<TextField
fullWidth
label="语言"
defaultValue={knowledgeBase?.language}
/>
<TextField
fullWidth
label="嵌入模型"
defaultValue={knowledgeBase?.embd_id}
disabled
/>
<TextField
fullWidth
label="解析器"
defaultValue={knowledgeBase?.parser_id}
disabled
/>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setConfigDialogOpen(false)}>取消</Button>
<Button variant="contained">保存</Button>
</DialogActions>
</Dialog>
</Box>
);
}