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

33
packages/resources/src/pages/file/list/FileCard.tsx
View File

@@ -1,21 +1,40 @@
import { useResourceStore } from '@/pages/store/resource';
import { Card, CardContent, Typography } from '@mui/material';
import { getIcon } from '../FileIcon';
import { amber } from '@mui/material/colors';
import clsx from 'clsx';
import { useResourceFileStore } from '@/pages/store/resource-file';
export const FileCard = () => {
const { list, prefix } = useResourceStore();
const { list, prefix, onOpenPrefix } = useResourceStore();
const { setPrefix, setOpenDrawer } = useResourceFileStore();
return (
<>
{list.map((resource) => (
<Card key={resource.etag} style={{ margin: '10px' }}>
<Card
key={resource.etag || resource.name || resource.prefix}
sx={{
boxShadow: `0px 2px 1px -1px rgba(255, 193, 7, 0.2), 0px 1px 1px 0px rgba(255, 193, 7, 0.14), 0px 1px 3px 0px rgba(255, 193, 7, 0.12)`,
borderRadius: '8px',
}}
style={{ margin: '10px' }}>
<CardContent>
<Typography
variant='h5'
component='div'
// className='flex items-center gap-2'
>
{getIcon(resource.name)}
{resource.name ? resource.name.replace(prefix, '') : resource.prefix?.replace(prefix, '')}
className={clsx('flex items-center gap-2', {
'cursor-pointer': true,
})}
onClick={(e) => {
if (!resource.name) {
onOpenPrefix(resource.prefix || '');
} else {
setPrefix(resource.name || '');
setOpenDrawer(true);
}
e.stopPropagation();
}}>
<div className='shrink-0'>{getIcon(resource.name)}</div>
<div className='flex-1 truncate'>{resource.name ? resource.name.replace(prefix, '') : resource.prefix?.replace(prefix, '')}</div>
</Typography>
{resource.lastModified && <Typography color='text.secondary'>Last Modified: {resource.lastModified}</Typography>}
{resource.size > 0 && <Typography color='text.secondary'>Size: {resource.size} bytes</Typography>}

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>