Initial commit
This commit is contained in:
Xin Wang
248
pages/KnowledgeBase.tsx
Normal file
248
pages/KnowledgeBase.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Search, Plus, FileText, Upload, ArrowLeft, CloudUpload, File as FileIcon, X } from 'lucide-react';
|
||||
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Card, Dialog } from '../components/UI';
|
||||
import { mockKnowledgeBases } from '../services/mockData';
|
||||
import { KnowledgeBase } from '../types';
|
||||
|
||||
export const KnowledgeBasePage: React.FC = () => {
|
||||
const [view, setView] = useState<'list' | 'detail'>('list');
|
||||
const [selectedKb, setSelectedKb] = useState<KnowledgeBase | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [kbs, setKbs] = useState(mockKnowledgeBases);
|
||||
const [isUploadOpen, setIsUploadOpen] = useState(false);
|
||||
|
||||
const filteredKbs = kbs.filter(kb => kb.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
|
||||
const handleSelect = (kb: KnowledgeBase) => {
|
||||
setSelectedKb(kb);
|
||||
setView('detail');
|
||||
};
|
||||
|
||||
const handleImportClick = () => {
|
||||
setIsUploadOpen(true);
|
||||
};
|
||||
|
||||
if (view === 'detail' && selectedKb) {
|
||||
return (
|
||||
<>
|
||||
<KnowledgeBaseDetail
|
||||
kb={selectedKb}
|
||||
onBack={() => setView('list')}
|
||||
onImport={handleImportClick}
|
||||
/>
|
||||
<UploadModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold tracking-tight">知识库</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 bg-card/50 p-2 rounded-lg border border-white/5 shadow-sm w-full md:w-1/3">
|
||||
<Search className="h-4 w-4 text-muted-foreground ml-2" />
|
||||
<Input
|
||||
placeholder="搜索知识库名称..."
|
||||
className="border-0 shadow-none bg-transparent focus-visible:ring-0"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredKbs.map(kb => (
|
||||
<Card
|
||||
key={kb.id}
|
||||
className="p-6 hover:border-primary/50 transition-colors cursor-pointer group"
|
||||
>
|
||||
<div onClick={() => handleSelect(kb)}>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<FileText className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold group-hover:text-primary transition-colors">{kb.name}</h3>
|
||||
<div className="mt-4 space-y-1 text-sm text-muted-foreground">
|
||||
<p>文档数量: {kb.documents.length}</p>
|
||||
<p>创建人: {kb.creator}</p>
|
||||
<p>创建时间: {kb.createdAt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Add New Placeholer */}
|
||||
<div className="border border-dashed border-white/10 rounded-xl p-6 flex flex-col items-center justify-center text-muted-foreground hover:bg-white/5 hover:border-primary/30 transition-all cursor-pointer min-h-[200px]">
|
||||
<Plus className="h-8 w-8 mb-2 opacity-50" />
|
||||
<span>新建知识库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const KnowledgeBaseDetail: React.FC<{
|
||||
kb: KnowledgeBase;
|
||||
onBack: () => void;
|
||||
onImport: () => void;
|
||||
}> = ({ kb, onBack, onImport }) => {
|
||||
const [docSearch, setDocSearch] = useState('');
|
||||
const filteredDocs = kb.documents.filter(d => d.name.toLowerCase().includes(docSearch.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in slide-in-from-right-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="icon" onClick={onBack}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{kb.name}</h1>
|
||||
<p className="text-sm text-muted-foreground">创建于 {kb.createdAt} · by {kb.creator}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={onImport}>
|
||||
<Upload className="mr-2 h-4 w-4" /> 新增知识 (导入)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden border-white/5">
|
||||
<div className="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
|
||||
<h3 className="font-medium">文档列表</h3>
|
||||
<div className="w-64">
|
||||
<Input
|
||||
placeholder="搜索文档..."
|
||||
value={docSearch}
|
||||
onChange={(e) => setDocSearch(e.target.value)}
|
||||
className="bg-black/20 border-transparent focus:bg-black/40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<table className="w-full text-sm">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>文档名称</TableHead>
|
||||
<TableHead>大小</TableHead>
|
||||
<TableHead>上传时间</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<tbody>
|
||||
{filteredDocs.length > 0 ? filteredDocs.map(doc => (
|
||||
<TableRow key={doc.id}>
|
||||
<TableCell className="font-medium flex items-center">
|
||||
<FileText className="h-4 w-4 mr-2 text-primary"/> {doc.name}
|
||||
</TableCell>
|
||||
<TableCell>{doc.size}</TableCell>
|
||||
<TableCell>{doc.uploadDate}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" className="text-destructive hover:text-destructive/80">删除</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)) : (
|
||||
<TableRow>
|
||||
<TableCell className="text-center py-8 text-muted-foreground">暂无文档</TableCell>
|
||||
<TableCell> </TableCell>
|
||||
<TableCell> </TableCell>
|
||||
<TableCell> </TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UploadModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDrag = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === "dragenter" || e.type === "dragover") {
|
||||
setDragActive(true);
|
||||
} else if (e.type === "dragleave") {
|
||||
setDragActive(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragActive(false);
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
// Add new files to existing state
|
||||
setFiles(prev => [...prev, ...Array.from(e.dataTransfer.files)]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFiles(prev => [...prev, ...Array.from(e.target.files || [])]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeFile = (idx: number) => {
|
||||
setFiles(prev => prev.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="上传知识文档"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={onClose}>取消</Button>
|
||||
<Button onClick={() => { alert('Upload Started!'); onClose(); setFiles([]); }}>确认上传</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`relative flex flex-col items-center justify-center w-full h-48 rounded-lg border-2 border-dashed transition-colors ${dragActive ? "border-primary bg-primary/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleChange}
|
||||
accept=".pdf,.doc,.docx,.txt,.md"
|
||||
/>
|
||||
<CloudUpload className={`h-10 w-10 mb-3 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
<span className="font-semibold text-primary">点击上传</span> 或将文件拖拽到此处
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">支持 PDF, DOCX, TXT (Max 10MB)</p>
|
||||
</div>
|
||||
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4 space-y-2 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{files.map((file, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-2 rounded-md bg-white/5 border border-white/5">
|
||||
<div className="flex items-center space-x-2 overflow-hidden">
|
||||
<FileIcon className="h-4 w-4 text-primary shrink-0" />
|
||||
<span className="text-sm truncate max-w-[200px]">{file.name}</span>
|
||||
<span className="text-xs text-muted-foreground">({(file.size / 1024).toFixed(1)} KB)</span>
|
||||
</div>
|
||||
<button onClick={() => removeFile(idx)} className="text-muted-foreground hover:text-destructive">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user