feat:完成dify知识库文档基础CRUD模块
This commit is contained in:
PingChuan
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,30 +1,18 @@
|
||||
import { Layout, theme, message } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import DatasetSidebar from './sidebar';
|
||||
import { message, Spin } from 'antd';
|
||||
import DocumentList from './document-list';
|
||||
import type { Dataset, Document } from '~/api/dify-dataset';
|
||||
import { fetchDatasets, fetchDocuments } from '~/api/dify-dataset';
|
||||
import '../../styles/components/dify-dataset-manager/index.css';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
/**
|
||||
* 知识库管理主组件
|
||||
* 简化版 - 假设只有一个知识库，直接显示文档列表
|
||||
*/
|
||||
export default function DatasetManager() {
|
||||
// 主题
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
// 侧边栏状态
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// 知识库状态
|
||||
const [datasets, setDatasets] = useState<Dataset[]>([]);
|
||||
const [currentDatasetId, setCurrentDatasetId] = useState<string>('');
|
||||
const [loadingDatasets, setLoadingDatasets] = useState(true);
|
||||
const [dataset, setDataset] = useState<Dataset | null>(null);
|
||||
const [loadingDataset, setLoadingDataset] = useState(true);
|
||||
|
||||
// 文档状态
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
@@ -38,29 +26,29 @@ export default function DatasetManager() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
/**
|
||||
* 加载知识库列表
|
||||
* 加载知识库（获取第一个知识库）
|
||||
*/
|
||||
const loadDatasets = async () => {
|
||||
setLoadingDatasets(true);
|
||||
const loadDataset = async () => {
|
||||
setLoadingDataset(true);
|
||||
try {
|
||||
console.log('[DatasetManager] 加载知识库列表...');
|
||||
const response = await fetchDatasets(1, 100);
|
||||
console.log('[DatasetManager] 知识库列表响应:', response);
|
||||
console.log('[DatasetManager] 加载知识库...');
|
||||
const response = await fetchDatasets(1, 1);
|
||||
console.log('[DatasetManager] 知识库响应:', response);
|
||||
|
||||
if (response && response.data) {
|
||||
setDatasets(response.data);
|
||||
|
||||
// 如果有知识库，默认选中第一个
|
||||
if (response.data.length > 0 && !currentDatasetId) {
|
||||
setCurrentDatasetId(response.data[0].id);
|
||||
}
|
||||
if (response && response.data && response.data.length > 0) {
|
||||
const firstDataset = response.data[0];
|
||||
setDataset(firstDataset);
|
||||
// 立即加载文档
|
||||
await loadDocuments(firstDataset.id, 1);
|
||||
} else {
|
||||
setError('未找到知识库，请先在Dify中创建知识库');
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('[DatasetManager] 加载知识库列表失败:', err);
|
||||
setError(err.message || '加载知识库列表失败');
|
||||
message.error('加载知识库列表失败');
|
||||
console.error('[DatasetManager] 加载知识库失败:', err);
|
||||
setError(err.message || '加载知识库失败');
|
||||
message.error('加载知识库失败');
|
||||
} finally {
|
||||
setLoadingDatasets(false);
|
||||
setLoadingDataset(false);
|
||||
setInited(true);
|
||||
}
|
||||
};
|
||||
@@ -90,21 +78,13 @@ export default function DatasetManager() {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理知识库选择
|
||||
*/
|
||||
const handleDatasetSelect = (datasetId: string) => {
|
||||
if (datasetId !== currentDatasetId) {
|
||||
setCurrentDatasetId(datasetId);
|
||||
setDocumentPage(1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理文档页码变化
|
||||
*/
|
||||
const handlePageChange = (page: number) => {
|
||||
loadDocuments(currentDatasetId, page);
|
||||
if (dataset) {
|
||||
loadDocuments(dataset.id, page);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -115,13 +95,12 @@ export default function DatasetManager() {
|
||||
setDocumentTotal((prev) => prev - 1);
|
||||
|
||||
// 更新知识库的文档数量
|
||||
setDatasets((prev) =>
|
||||
prev.map((ds) =>
|
||||
ds.id === currentDatasetId
|
||||
? { ...ds, document_count: ds.document_count - 1 }
|
||||
: ds
|
||||
)
|
||||
);
|
||||
if (dataset) {
|
||||
setDataset({
|
||||
...dataset,
|
||||
document_count: dataset.document_count - 1
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -139,103 +118,62 @@ export default function DatasetManager() {
|
||||
* 刷新文档列表
|
||||
*/
|
||||
const handleRefresh = () => {
|
||||
loadDocuments(currentDatasetId, documentPage);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理侧边栏切换
|
||||
*/
|
||||
const handleSidebarToggle = () => {
|
||||
setSidebarCollapsed(!sidebarCollapsed);
|
||||
if (dataset) {
|
||||
loadDocuments(dataset.id, documentPage);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
loadDatasets();
|
||||
loadDataset();
|
||||
}, []);
|
||||
|
||||
// 当选中的知识库变化时，加载文档列表
|
||||
useEffect(() => {
|
||||
if (currentDatasetId) {
|
||||
loadDocuments(currentDatasetId, 1);
|
||||
}
|
||||
}, [currentDatasetId]);
|
||||
|
||||
// 检查屏幕尺寸
|
||||
useEffect(() => {
|
||||
const checkScreenSize = () => {
|
||||
setIsMobile(window.innerWidth < 992);
|
||||
};
|
||||
|
||||
checkScreenSize();
|
||||
window.addEventListener('resize', checkScreenSize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkScreenSize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 获取当前选中的知识库
|
||||
const currentDataset = datasets.find((ds) => ds.id === currentDatasetId);
|
||||
|
||||
// 如果有错误，显示错误页面
|
||||
if (error && !inited) {
|
||||
// 加载中状态
|
||||
if (!inited || loadingDataset) {
|
||||
return (
|
||||
<div className="dataset-manager-container">
|
||||
<div className="dataset-empty">
|
||||
<h3>加载失败</h3>
|
||||
<p>{error}</p>
|
||||
<div className="dataset-manager-wrapper">
|
||||
<div className="dataset-manager-card">
|
||||
<div className="dataset-loading-state">
|
||||
<Spin size="large" />
|
||||
<span className="loading-text">正在加载知识库...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 错误状态
|
||||
if (error) {
|
||||
return (
|
||||
<div className="dataset-manager-wrapper">
|
||||
<div className="dataset-manager-card">
|
||||
<div className="dataset-error-state">
|
||||
<i className="ri-error-warning-line error-icon"></i>
|
||||
<h3>加载失败</h3>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
|
||||
{/* 移动端遮罩层 */}
|
||||
{!sidebarCollapsed && isMobile && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-[999]"
|
||||
onClick={handleSidebarToggle}
|
||||
<div className="dataset-manager-wrapper">
|
||||
<div className="dataset-manager-card">
|
||||
<DocumentList
|
||||
datasetId={dataset?.id || ''}
|
||||
datasetName={dataset?.name || ''}
|
||||
documents={documents}
|
||||
loading={loadingDocuments}
|
||||
total={documentTotal}
|
||||
page={documentPage}
|
||||
pageSize={documentPageSize}
|
||||
onPageChange={handlePageChange}
|
||||
onDocumentDeleted={handleDocumentDeleted}
|
||||
onDocumentStatusChanged={handleDocumentStatusChanged}
|
||||
onRefresh={handleRefresh}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<DatasetSidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggle={handleSidebarToggle}
|
||||
datasets={datasets}
|
||||
currentDatasetId={currentDatasetId}
|
||||
onDatasetSelect={handleDatasetSelect}
|
||||
loading={loadingDatasets}
|
||||
/>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<Layout style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
<Content
|
||||
style={{
|
||||
background: colorBgContainer,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
}}
|
||||
>
|
||||
<DocumentList
|
||||
datasetId={currentDatasetId}
|
||||
datasetName={currentDataset?.name || ''}
|
||||
documents={documents}
|
||||
loading={loadingDocuments}
|
||||
total={documentTotal}
|
||||
page={documentPage}
|
||||
pageSize={documentPageSize}
|
||||
onPageChange={handlePageChange}
|
||||
onDocumentDeleted={handleDocumentDeleted}
|
||||
onDocumentStatusChanged={handleDocumentStatusChanged}
|
||||
onRefresh={handleRefresh}
|
||||
/>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Layout, Menu, theme, Input, Spin } from 'antd';
|
||||
import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
DatabaseOutlined,
|
||||
SearchOutlined,
|
||||
FileTextOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { Dataset } from '~/api/dify-dataset';
|
||||
import '../../styles/components/dify-dataset-manager/sidebar.css';
|
||||
|
||||
const { Sider } = Layout;
|
||||
|
||||
interface DatasetSidebarProps {
|
||||
collapsed: boolean;
|
||||
onToggle: () => void;
|
||||
datasets: Dataset[];
|
||||
currentDatasetId: string;
|
||||
onDatasetSelect: (datasetId: string) => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 知识库侧边栏组件
|
||||
*/
|
||||
export default function DatasetSidebar({
|
||||
collapsed,
|
||||
onToggle,
|
||||
datasets,
|
||||
currentDatasetId,
|
||||
onDatasetSelect,
|
||||
loading = false,
|
||||
}: DatasetSidebarProps) {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
// 过滤知识库列表
|
||||
const filteredDatasets = datasets.filter((ds) =>
|
||||
ds.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
// 生成菜单项
|
||||
const menuItems = filteredDatasets.map((ds) => ({
|
||||
key: ds.id,
|
||||
icon: <DatabaseOutlined />,
|
||||
label: (
|
||||
<div className="dataset-info">
|
||||
<span className="dataset-info-name" title={ds.name}>
|
||||
{ds.name}
|
||||
</span>
|
||||
{!collapsed && (
|
||||
<div className="dataset-info-meta">
|
||||
<span className="dataset-info-meta-item">
|
||||
<FileTextOutlined />
|
||||
{ds.document_count}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Sider
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
width={280}
|
||||
collapsedWidth={60}
|
||||
className="dataset-sidebar"
|
||||
style={{
|
||||
background: colorBgContainer,
|
||||
borderRight: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{/* 侧边栏头部 */}
|
||||
<div className="dataset-sidebar-header">
|
||||
<div className="dataset-sidebar-title">
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={onToggle}
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
width: 32,
|
||||
height: 32,
|
||||
color: 'rgb(0, 104, 74)',
|
||||
}}
|
||||
/>
|
||||
{!collapsed && (
|
||||
<h3>知识库</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
{!collapsed && (
|
||||
<Input
|
||||
placeholder="搜索知识库..."
|
||||
prefix={<SearchOutlined />}
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
allowClear
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 知识库列表 */}
|
||||
<div className="dataset-sidebar-list">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!collapsed && filteredDatasets.length === 0 && searchValue && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<DatabaseOutlined className="text-2xl mb-2" />
|
||||
<p>未找到相关知识库</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!collapsed && datasets.length === 0 && !searchValue && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<DatabaseOutlined className="text-2xl mb-2" />
|
||||
<p>暂无知识库</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[currentDatasetId]}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => onDatasetSelect(key)}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
}}
|
||||
className="dataset-sidebar-menu"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 侧边栏底部 */}
|
||||
{!collapsed && datasets.length > 0 && (
|
||||
<div className="dataset-sidebar-footer">
|
||||
<div className="stats-text">
|
||||
共 {datasets.length} 个知识库
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Sider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user