128 lines
4.7 KiB
TypeScript
128 lines
4.7 KiB
TypeScript
import { useResourceStore } from '@kevisual/resources/pages/store/resource';
|
|
import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
|
|
import prettyBytes from 'pretty-bytes';
|
|
import dayjs from 'dayjs';
|
|
import { getIcon } from '../FileIcon';
|
|
import { Download, Trash } from 'lucide-react';
|
|
import clsx from 'clsx';
|
|
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
|
|
import { useModal } from '@kevisual/components/modal/Confirm.tsx';
|
|
|
|
export const FileTable = () => {
|
|
const { list, prefix, download, onOpenPrefix, getList } = useResourceStore();
|
|
const { setOpenDrawer, setPrefix, deleteFile } = useResourceFileStore();
|
|
const [modal, contextHolder] = useModal();
|
|
return (
|
|
<>
|
|
{contextHolder}
|
|
<TableContainer
|
|
className='scrollbar'
|
|
sx={{
|
|
'&': {
|
|
// scrollbarWidth: 'none',
|
|
// scrollbarColor: '#888 #fff',
|
|
},
|
|
'&::-webkit-scrollbar': {
|
|
width: '4px !important',
|
|
height: '4px !important',
|
|
background: '#fff',
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
background: '#888',
|
|
borderRadius: '2px',
|
|
},
|
|
}}
|
|
component={Paper}>
|
|
<Table
|
|
sx={{
|
|
minWidth: 650,
|
|
}}
|
|
aria-label='simple table'>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell sx={{ minWidth: 100 }}>Size</TableCell>
|
|
<TableCell sx={{ minWidth: 180 }}>Last Modified</TableCell>
|
|
<TableCell sx={{ minWidth: 110 }}>Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{list.map((row) => {
|
|
const isFile = !!row.name;
|
|
return (
|
|
<TableRow key={row.etag || row.name || row.prefix}>
|
|
<TableCell>
|
|
<div
|
|
className={clsx('flex items-center gap-2 max-w-[300px] line-clamp-2 text-ellipsis', {
|
|
'cursor-pointer': true,
|
|
})}
|
|
onClick={(e) => {
|
|
if (!row.name) {
|
|
onOpenPrefix(row.prefix || '');
|
|
} else {
|
|
setPrefix(row.name || '');
|
|
setOpenDrawer(true);
|
|
}
|
|
e.stopPropagation();
|
|
}}>
|
|
<div className='shrink-0'>{getIcon(row.name)}</div>
|
|
{row.name ? row.name.replace(prefix, '') : row.prefix?.replace?.(prefix, '')}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{row.size ? prettyBytes(row.size) : ''}</TableCell>
|
|
<TableCell>{row.lastModified ? dayjs(row.lastModified).format('YYYY-MM-DD HH:mm:ss') : ''}</TableCell>
|
|
<TableCell>
|
|
{isFile && (
|
|
<Button
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
download(row);
|
|
}}
|
|
sx={{
|
|
color: 'white',
|
|
minWidth: '32px',
|
|
padding: '4px',
|
|
}}>
|
|
<Download />
|
|
</Button>
|
|
)}
|
|
{isFile && (
|
|
<Button
|
|
variant='contained'
|
|
color='error'
|
|
className='ml-2!'
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
modal.confirm({
|
|
title: '删除文件',
|
|
content: '确定删除该文件吗？',
|
|
onOk: () => {
|
|
deleteFile(row, {
|
|
onSuccess: () => {
|
|
getList();
|
|
},
|
|
});
|
|
},
|
|
});
|
|
}}
|
|
sx={{
|
|
color: 'white',
|
|
minWidth: '32px',
|
|
padding: '4px',
|
|
}}>
|
|
<Trash />
|
|
</Button>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</>
|
|
);
|
|
};
|