276 lines
13 KiB
TypeScript
276 lines
13 KiB
TypeScript
|
import { Link, useParams } from "react-router-dom";
|
|||
|
|
import { Button } from "../../components/ui/button";
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCaption,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow
|
|||
|
|
} from "../../components/ui/table";
|
|||
|
|
import {
|
|||
|
|
Tabs,
|
|||
|
|
TabsContent,
|
|||
|
|
TabsList,
|
|||
|
|
TabsTrigger,
|
|||
|
|
} from "../../components/ui/tabs";
|
|||
|
|
|
|||
|
|
import { ArrowLeft, Filter, RotateCw, Search, X } from "lucide-react";
|
|||
|
|
import { useContext, useEffect, useRef, useState } from "react";
|
|||
|
|
import { useTranslation } from "react-i18next";
|
|||
|
|
import { bsconfirm } from "../../alerts/confirm";
|
|||
|
|
import PaginationComponent from "../../components/PaginationComponent";
|
|||
|
|
import ShadTooltip from "../../components/ShadTooltipComponent";
|
|||
|
|
import { Input } from "../../components/ui/input";
|
|||
|
|
import { Select, SelectContent, SelectGroup, SelectIconTrigger, SelectItem } from "../../components/ui/select1";
|
|||
|
|
import { locationContext } from "../../contexts/locationContext";
|
|||
|
|
import { deleteFile, readFileByLibDatabase, retryKnowledgeFileApi } from "../../controllers/API";
|
|||
|
|
import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
|
|||
|
|
import UploadModal from "../../modals/UploadModal";
|
|||
|
|
import { useTable } from "../../util/hook";
|
|||
|
|
import del from "../../assets/npc/del.png"
|
|||
|
|
|
|||
|
|
export default function FilesPage() {
|
|||
|
|
const { t } = useTranslation()
|
|||
|
|
|
|||
|
|
const { id } = useParams()
|
|||
|
|
// 上传 上传成功添加到列表
|
|||
|
|
const [open, setOpen] = useState(false)
|
|||
|
|
const [title, setTitle] = useState('')
|
|||
|
|
|
|||
|
|
const { page, pageSize, data: datalist, total, loading, setPage, search, reload, filterData, refreshData,loadData } = useTable((param) =>
|
|||
|
|
readFileByLibDatabase({ ...param, id, name: param.keyword }).then(res => {
|
|||
|
|
setHasPermission(res.writeable)
|
|||
|
|
return res
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
// loadData();
|
|||
|
|
setTimeout(() => reload(), 5000);
|
|||
|
|
|
|||
|
|
const [hasPermission, setHasPermission] = useState(true)
|
|||
|
|
const { appConfig } = useContext(locationContext)
|
|||
|
|
|
|||
|
|
// filter
|
|||
|
|
const [filter, setFilter] = useState(999)
|
|||
|
|
useEffect(() => {
|
|||
|
|
filterData({ status: filter })
|
|||
|
|
}, [filter])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// @ts-ignore
|
|||
|
|
const libname = window.libname // 临时记忆
|
|||
|
|
if (libname) {
|
|||
|
|
localStorage.setItem('libname', window.libname)
|
|||
|
|
}
|
|||
|
|
setTitle(window.libname || localStorage.getItem('libname'))
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const handleOpen = (e) => {
|
|||
|
|
setOpen(e)
|
|||
|
|
reload()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除
|
|||
|
|
const { delShow, idRef, close, delConfim } = useDelete()
|
|||
|
|
|
|||
|
|
const handleDelete = () => {
|
|||
|
|
captureAndAlertRequestErrorHoc(deleteFile(idRef.current).then(res => {
|
|||
|
|
reload()
|
|||
|
|
close()
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [repeatFiles, setRepeatFiles] = useState([])
|
|||
|
|
// 上传结果展示
|
|||
|
|
const handleUploadResult = (fileCount, failFiles, res) => {
|
|||
|
|
const _repeatFiles = res.filter(e => e.status === 3)
|
|||
|
|
if (_repeatFiles.length) {
|
|||
|
|
setRepeatFiles(_repeatFiles)
|
|||
|
|
} else {
|
|||
|
|
failFiles.length && bsconfirm({
|
|||
|
|
desc: <div>
|
|||
|
|
<p>{t('lib.fileUploadResult', { total: fileCount, failed: failFiles.length })}</p>
|
|||
|
|
<div className="max-h-[160px] overflow-y-auto no-scrollbar">
|
|||
|
|
{failFiles.map(str => <p className=" text-red-400" key={str}>{str}</p>)}
|
|||
|
|
</div>
|
|||
|
|
</div>,
|
|||
|
|
onOk(next) {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重试解析
|
|||
|
|
const [retryLoad, setRetryLoad] = useState(false)
|
|||
|
|
const handleRetry = (objs) => {
|
|||
|
|
setRetryLoad(true)
|
|||
|
|
captureAndAlertRequestErrorHoc(retryKnowledgeFileApi(objs).then(res => {
|
|||
|
|
// 乐观更新
|
|||
|
|
// refreshData(
|
|||
|
|
// (item) => ids.includes(item.id),
|
|||
|
|
// { status: 1 }
|
|||
|
|
// )
|
|||
|
|
reload()
|
|||
|
|
setRepeatFiles([])
|
|||
|
|
setRetryLoad(false)
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectChange = (id) => {
|
|||
|
|
setFilter(Number(id))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return <div className="w-full h-screen p-6 relative overflow-y-auto">
|
|||
|
|
{loading && <div className="absolute w-full h-full top-0 left-0 flex justify-center items-center z-10 bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
|
|||
|
|
<span className="loading loading-infinity loading-lg"></span>
|
|||
|
|
</div>}
|
|||
|
|
<ShadTooltip content="back" side="top">
|
|||
|
|
<button className="extra-side-bar-buttons w-[36px] absolute top-[26px]" onClick={() => { }} >
|
|||
|
|
<Link to='/filelib'><ArrowLeft className="side-bar-button-size" /></Link>
|
|||
|
|
</button>
|
|||
|
|
</ShadTooltip>
|
|||
|
|
<Tabs defaultValue="account" className="w-full">
|
|||
|
|
{/* <TabsList className="ml-12">
|
|||
|
|
<TabsTrigger value="account" className="roundedrounded-xl">{t('lib.fileList')}</TabsTrigger>
|
|||
|
|
<TabsTrigger disabled value="password">{t('lib.systemIntegration')}</TabsTrigger>
|
|||
|
|
</TabsList> */}
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<p className="text-[16px] ml-[40px]" style={{color:"#FFF"}}>{t('lib.fileData')}</p>
|
|||
|
|
<div className="flex justify-center items-center w-[74px] h-[27px] cursor-pointer" style={{background: "#FFD025",borderRadius: "7px"}}>
|
|||
|
|
{/* <img src={jia1} className="w-[14px] mr-[5px]" alt=""/> */}
|
|||
|
|
<span className="text-[12px]" style={{color:"#333333"}} onClick={() => setOpen(true)}>上 传</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<TabsContent value="account">
|
|||
|
|
{/* <div className="flex justify-between items-center">
|
|||
|
|
<span className=" text-gray-800">{title}</span>
|
|||
|
|
<div className="flex gap-4 items-center">
|
|||
|
|
<div className="w-[180px] relative">
|
|||
|
|
<Input placeholder={t('lib.fileName')} onChange={(e) => search(e.target.value)}></Input>
|
|||
|
|
<Search className="absolute right-4 top-2 text-gray-300 pointer-events-none"></Search>
|
|||
|
|
</div>
|
|||
|
|
{hasPermission && <Button className="h-8 rounded-full" onClick={() => setOpen(true)}>{t('lib.upload')}</Button>}
|
|||
|
|
</div>
|
|||
|
|
</div> */}
|
|||
|
|
<Table>
|
|||
|
|
<TableCaption>
|
|||
|
|
<div className="join grid grid-cols-2 w-[200px]">
|
|||
|
|
<PaginationComponent
|
|||
|
|
page={page}
|
|||
|
|
pageSize={pageSize}
|
|||
|
|
total={total}
|
|||
|
|
onChange={(newPage) => setPage(newPage)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</TableCaption>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow>
|
|||
|
|
<TableHead className="w-[600px] dialogueLog-header">{t('lib.fileName')}</TableHead>
|
|||
|
|
{/* 状态 */}
|
|||
|
|
<TableHead className="flex items-center gap-4 dialogueLog-header">{t('lib.status')}
|
|||
|
|
{/* Select component */}
|
|||
|
|
<Select onValueChange={selectChange}>
|
|||
|
|
<SelectIconTrigger className="">
|
|||
|
|
<Filter size={16} className={`cursor-pointer ${filter === 999 ? '' : 'text-gray-950'}`} />
|
|||
|
|
</SelectIconTrigger>
|
|||
|
|
<SelectContent className="">
|
|||
|
|
<SelectGroup>
|
|||
|
|
<SelectItem value={'999'}>{t('all')}</SelectItem>
|
|||
|
|
<SelectItem value={'1'}>{t('lib.parsing')}</SelectItem>
|
|||
|
|
<SelectItem value={'2'}>{t('lib.completed')}</SelectItem>
|
|||
|
|
<SelectItem value={'3'}>{t('lib.parseFailed')}</SelectItem>
|
|||
|
|
</SelectGroup>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className=" dialogueLog-header">{t('lib.uploadTime')}</TableHead>
|
|||
|
|
<TableHead className=" dialogueLog-header">{t('operations')}</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{datalist.map(el => (
|
|||
|
|
<TableRow key={el.id}>
|
|||
|
|
<TableCell className="dialogueLog-body">{el.file_name}</TableCell>
|
|||
|
|
<TableCell className="dialogueLog-body">
|
|||
|
|
{el.status === 3 ? <div className="flex items-center">
|
|||
|
|
<div className="tooltip" data-tip={el.remark}>
|
|||
|
|
<span className='text-red-500'>{t('lib.parseFailed')}</span>
|
|||
|
|
</div>
|
|||
|
|
<Button variant="link"><RotateCw size={16} onClick={() => handleRetry([el])} /></Button>
|
|||
|
|
</div> :
|
|||
|
|
<span className={el.status === 3 && 'text-red-500'}>{[t('lib.parseFailed'), t('lib.parsing'), t('lib.completed'), t('lib.parseFailed')][el.status]}</span>
|
|||
|
|
}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="dialogueLog-body">{el.update_time.replace('T', ' ')}</TableCell>
|
|||
|
|
<TableCell className="text-right dialogueLog-body">
|
|||
|
|
{hasPermission ?
|
|||
|
|
// <a href="javascript:;" onClick={() => delConfim(el.id)} className="underline ml-4">{t('delete')}</a>
|
|||
|
|
<img src={del} onClick={() => delConfim(el.id)} className="w-[20px] cursor-pointer" alt=""/>
|
|||
|
|
:
|
|||
|
|
// <a href="javascript:;" className="underline ml-4 text-gray-400">{t('delete')}</a>
|
|||
|
|
<img src={del} className="w-[20px] cursor-pointer" alt=""/>
|
|||
|
|
}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
{/* Pagination */}
|
|||
|
|
</TabsContent>
|
|||
|
|
<TabsContent value="password"></TabsContent>
|
|||
|
|
</Tabs>
|
|||
|
|
{/* upload modal */}
|
|||
|
|
<UploadModal id={id} accept={appConfig.libAccepts} open={open} setOpen={handleOpen} onResult={handleUploadResult}></UploadModal>
|
|||
|
|
{/* 重复文件提醒 */}
|
|||
|
|
<dialog className={`modal ${repeatFiles.length && 'modal-open'}`}>
|
|||
|
|
<div className="modal-box w-[560px] bg-[#fff] shadow-lg dark:bg-background">
|
|||
|
|
<h3 className="font-bold text-lg relative">文件重复提示
|
|||
|
|
<X className="absolute right-0 top-0 text-gray-400 cursor-pointer" size={20} onClick={() => setRepeatFiles([])}></X>
|
|||
|
|
</h3>
|
|||
|
|
<p className="py-4">以下文件在知识库中已存在，继续上传将会覆盖原有文件以及处理策略，是否覆盖？</p>
|
|||
|
|
<ul className="overflow-y-auto max-h-[400px]">
|
|||
|
|
{repeatFiles.map(el => (
|
|||
|
|
<li key={el.id} className="py-2 text-red-500">{el.remark}</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
<div className="modal-action">
|
|||
|
|
<Button className="h-8 rounded-full" variant="outline" onClick={() => setRepeatFiles([])}>不覆盖，保留原文件</Button>
|
|||
|
|
<Button className="h-8 rounded-full" disabled={retryLoad} onClick={() => handleRetry(repeatFiles)}>
|
|||
|
|
{retryLoad && <span className="loading loading-spinner loading-xs"></span>}覆盖
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</dialog>
|
|||
|
|
{/* Delete confirmation */}
|
|||
|
|
<dialog className={`modal ${delShow && 'modal-open'}`}>
|
|||
|
|
<form method="dialog" className="modal-box w-[400px] bg-[#262626] shadow-lg">
|
|||
|
|
<h3 className="text-[16px] font-bold text-center" style={{color:"#FFFFFF"}}>{t('prompt')}</h3>
|
|||
|
|
<p className="text-[12px] text-center mt-[18px]" style={{color:"#FFFFFF"}}>{t('lib.confirmDeleteFile')}</p>
|
|||
|
|
<div className="flex justify-center mt-[27px]">
|
|||
|
|
<Button className="baogao-btn" variant="outline" onClick={close}>{t('cancel')}</Button>
|
|||
|
|
<Button className="baogao-btn ml-[27px]" variant="destructive" onClick={handleDelete}>{t('delete')}</Button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</dialog>
|
|||
|
|
</div>
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
const useDelete = () => {
|
|||
|
|
const [delShow, setDelShow] = useState(false)
|
|||
|
|
const idRef = useRef<any>(null)
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
delShow,
|
|||
|
|
idRef,
|
|||
|
|
close: () => {
|
|||
|
|
setDelShow(false)
|
|||
|
|
},
|
|||
|
|
delConfim: (id) => {
|
|||
|
|
idRef.current = id
|
|||
|
|
setDelShow(true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|