kevisual/kevisual-center-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add drawer and add upload feat

Browse Source
This commit is contained in:
熊潇
2025-03-16 03:39:16 +08:00
parent fd30741151
commit cc76842582
15 changed files with 417 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
packages/resources/src/pages/file/list/FileTable.tsx
View File

@@ -3,48 +3,87 @@ import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead,
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 '@/pages/store/resource-file';
export const FileTable = () => {
const { list, prefix, download } = useResourceStore();
const { list, prefix, download, onOpenPrefix, deleteFile } = useResourceStore();
const { setOpenDrawer, setPrefix } = useResourceFileStore();
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label='simple table'>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell sx={{ minWidth: 100 }}>Size</TableCell>
<TableCell sx={{ minWidth: 100 }}>Last Modified</TableCell>
<TableCell sx={{ minWidth: 100 }}>Actions</TableCell>
<TableCell sx={{ maxWidth: 100 }}>Size</TableCell>
<TableCell sx={{ maxWidth: 100 }}>Last Modified</TableCell>
<TableCell sx={{ maxWidth: 100 }}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{list.map((row) => (
<TableRow key={row.name}>
<TableCell>
<div className='flex items-center gap-2'>
{getIcon(row.name)}
{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>
{!row.prefix ? (
<Button
variant='contained'
color='primary'
onClick={() => download(row)}
sx={{
color: 'white',
{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();
}}>
Download
</Button>
) : (
''
)}
</TableCell>
</TableRow>
))}
<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();
deleteFile(row);
}}
sx={{
color: 'white',
minWidth: '32px',
padding: '4px',
}}>
<Trash />
</Button>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>