feat:前端新增初版知识库管理页面
This commit is contained in:
PingChuan
@@ -0,0 +1,373 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
Tooltip,
|
||||
Popconfirm,
|
||||
Switch,
|
||||
message,
|
||||
Empty,
|
||||
Spin,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
DeleteOutlined,
|
||||
FileTextOutlined,
|
||||
CloudUploadOutlined,
|
||||
EyeOutlined,
|
||||
ClockCircleOutlined,
|
||||
CheckCircleOutlined,
|
||||
SyncOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
PauseCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { Document, IndexingStatus } from '~/api/dify-dataset';
|
||||
import { deleteDocument, toggleDocumentStatus, uploadDocument } from '~/api/dify-dataset';
|
||||
import '../../styles/components/dify-dataset-manager/document-list.css';
|
||||
|
||||
interface DocumentListProps {
|
||||
datasetId: string;
|
||||
datasetName: string;
|
||||
documents: Document[];
|
||||
loading: boolean;
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onDocumentDeleted: (documentId: string) => void;
|
||||
onDocumentStatusChanged: (documentId: string, enabled: boolean) => void;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档列表组件
|
||||
*/
|
||||
export default function DocumentList({
|
||||
datasetId,
|
||||
datasetName,
|
||||
documents,
|
||||
loading,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
onPageChange,
|
||||
onDocumentDeleted,
|
||||
onDocumentStatusChanged,
|
||||
onRefresh,
|
||||
}: DocumentListProps) {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
/**
|
||||
* 获取状态标签配置
|
||||
*/
|
||||
const getStatusConfig = (status: IndexingStatus) => {
|
||||
const configs: Record<IndexingStatus, { color: string; icon: React.ReactNode; text: string }> = {
|
||||
completed: { color: 'success', icon: <CheckCircleOutlined />, text: '已完成' },
|
||||
indexing: { color: 'processing', icon: <SyncOutlined spin />, text: '索引中' },
|
||||
waiting: { color: 'warning', icon: <ClockCircleOutlined />, text: '等待中' },
|
||||
parsing: { color: 'processing', icon: <SyncOutlined spin />, text: '解析中' },
|
||||
cleaning: { color: 'processing', icon: <SyncOutlined spin />, text: '清洗中' },
|
||||
splitting: { color: 'processing', icon: <SyncOutlined spin />, text: '分段中' },
|
||||
paused: { color: 'default', icon: <PauseCircleOutlined />, text: '已暂停' },
|
||||
error: { color: 'error', icon: <ExclamationCircleOutlined />, text: '错误' },
|
||||
};
|
||||
return configs[status] || { color: 'default', icon: null, text: status };
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp * 1000).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化数字
|
||||
*/
|
||||
const formatNumber = (num: number) => {
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(1) + 'w';
|
||||
}
|
||||
if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + 'k';
|
||||
}
|
||||
return num.toString();
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理删除文档
|
||||
*/
|
||||
const handleDelete = async (documentId: string) => {
|
||||
setDeletingId(documentId);
|
||||
try {
|
||||
await deleteDocument(datasetId, documentId);
|
||||
message.success('删除成功');
|
||||
onDocumentDeleted(documentId);
|
||||
} catch (err: any) {
|
||||
console.error('删除文档失败:', err);
|
||||
message.error(err.message || '删除失败');
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理启用/禁用文档
|
||||
*/
|
||||
const handleToggleStatus = async (documentId: string, enabled: boolean) => {
|
||||
try {
|
||||
await toggleDocumentStatus(datasetId, documentId, enabled);
|
||||
message.success(enabled ? '已启用' : '已禁用');
|
||||
onDocumentStatusChanged(documentId, enabled);
|
||||
} catch (err: any) {
|
||||
console.error('切换文档状态失败:', err);
|
||||
message.error(err.message || '操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理文件上传
|
||||
*/
|
||||
const handleUpload = async (file: File) => {
|
||||
if (!datasetId) {
|
||||
message.error('请先选择知识库');
|
||||
return false;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
await uploadDocument(datasetId, file, (percent) => {
|
||||
console.log('上传进度:', percent);
|
||||
});
|
||||
message.success('上传成功，正在处理...');
|
||||
onRefresh();
|
||||
} catch (err: any) {
|
||||
console.error('上传文件失败:', err);
|
||||
message.error(err.message || '上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// 过滤文档
|
||||
const filteredDocuments = documents.filter((doc) =>
|
||||
doc.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
// 表格列定义
|
||||
const columns: ColumnsType<Document> = [
|
||||
{
|
||||
title: '文档名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
render: (name: string) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<FileTextOutlined className="text-gray-400" />
|
||||
<span className="font-medium">{name}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'indexing_status',
|
||||
key: 'indexing_status',
|
||||
width: 120,
|
||||
render: (status: IndexingStatus) => {
|
||||
const config = getStatusConfig(status);
|
||||
return (
|
||||
<Tag color={config.color} icon={config.icon}>
|
||||
{config.text}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字数',
|
||||
dataIndex: 'word_count',
|
||||
key: 'word_count',
|
||||
width: 100,
|
||||
render: (count: number) => formatNumber(count),
|
||||
},
|
||||
{
|
||||
title: '命中次数',
|
||||
dataIndex: 'hit_count',
|
||||
key: 'hit_count',
|
||||
width: 100,
|
||||
render: (count: number) => formatNumber(count),
|
||||
},
|
||||
{
|
||||
title: '启用',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
width: 80,
|
||||
render: (enabled: boolean, record) => (
|
||||
<Switch
|
||||
size="small"
|
||||
checked={enabled}
|
||||
onChange={(checked) => handleToggleStatus(record.id, checked)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 160,
|
||||
render: (timestamp: number) => formatDate(timestamp),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Tooltip title="查看详情">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => {
|
||||
// TODO: 查看文档详情/分段
|
||||
message.info('功能开发中');
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Popconfirm
|
||||
title="确定要删除这个文档吗？"
|
||||
description="删除后无法恢复"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true }}
|
||||
>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
loading={deletingId === record.id}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="dataset-content">
|
||||
{/* 头部区域 */}
|
||||
<div className="dataset-header" style={{ marginBottom: 16, padding: 0, height: 'auto', border: 'none' }}>
|
||||
<h1 style={{ margin: 0 }}>
|
||||
{datasetName || '请选择知识库'}
|
||||
</h1>
|
||||
<div className="dataset-header-actions">
|
||||
<Tooltip title="刷新">
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={onRefresh}
|
||||
loading={loading}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Upload
|
||||
beforeUpload={handleUpload}
|
||||
showUploadList={false}
|
||||
accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
|
||||
disabled={!datasetId}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CloudUploadOutlined />}
|
||||
loading={uploading}
|
||||
disabled={!datasetId}
|
||||
>
|
||||
上传文档
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 工具栏 */}
|
||||
<div className="document-list-toolbar">
|
||||
<Input
|
||||
className="document-list-search"
|
||||
placeholder="搜索文档..."
|
||||
prefix={<SearchOutlined />}
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
allowClear
|
||||
/>
|
||||
<div className="document-list-actions">
|
||||
<span className="text-gray-500 text-sm">
|
||||
共 {total} 个文档
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 文档表格 */}
|
||||
{!datasetId ? (
|
||||
<div className="dataset-empty">
|
||||
<Empty description="请先选择一个知识库" />
|
||||
</div>
|
||||
) : loading && documents.length === 0 ? (
|
||||
<div className="dataset-loading">
|
||||
<Spin size="large" />
|
||||
<span className="text-gray-500">加载中...</span>
|
||||
</div>
|
||||
) : filteredDocuments.length === 0 ? (
|
||||
<div className="dataset-empty">
|
||||
<Empty
|
||||
description={searchValue ? '未找到匹配的文档' : '暂无文档'}
|
||||
>
|
||||
{!searchValue && (
|
||||
<Upload
|
||||
beforeUpload={handleUpload}
|
||||
showUploadList={false}
|
||||
accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
|
||||
>
|
||||
<Button type="primary" icon={<CloudUploadOutlined />}>
|
||||
上传第一个文档
|
||||
</Button>
|
||||
</Upload>
|
||||
)}
|
||||
</Empty>
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
className="document-table"
|
||||
columns={columns}
|
||||
dataSource={filteredDocuments}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
onChange: onPageChange,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
}}
|
||||
size="middle"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user