feat:完成dify知识库文档基础CRUD模块

This commit is contained in:
PingChuan
2025-11-30 21:28:49 +08:00
parent d85010bada
commit 754ec2c7b5
21 changed files with 1142 additions and 706 deletions
@@ -29,7 +29,7 @@ import {
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';
import '../../styles/components/dify-dataset-manager/index.css';
interface DocumentListProps {
datasetId: string;
@@ -275,10 +275,8 @@ export default function DocumentList({
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">
<h1>{datasetName || '知识库文档'}</h1>
<div className="dataset-header-actions">
<Tooltip title="刷新">
<Button
@@ -315,58 +313,71 @@ export default function DocumentList({
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 className="document-table-container">
{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={false}
size="small"
scroll={{ x: 'max-content' }}
/>
)}
</div>
{/* 固定底部分页器 */}
{filteredDocuments.length > 0 && (
<div className="document-pagination">
<span className="pagination-total"> {total} </span>
<div className="pagination-controls">
<Button
size="small"
disabled={page <= 1}
onClick={() => onPageChange(page - 1)}
>
</Button>
<span className="pagination-info">
{page} / {Math.ceil(total / pageSize)}
</span>
<Button
size="small"
disabled={page >= Math.ceil(total / pageSize)}
onClick={() => onPageChange(page + 1)}
>
</Button>
</div>
</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>
);