94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import { useEffect, useMemo } from 'react';
|
|
import { useResourceStore } from '../store/resource';
|
|
import { Box, Button, Typography, ButtonGroup } from '@mui/material';
|
|
import { FileText, Table, Grid } from 'lucide-react';
|
|
import { FileTable } from './list/FileTable';
|
|
import { FileCard } from './list/FileCard';
|
|
import { PrefixRedirect } from './modules/PrefixRedirect';
|
|
import { UploadButton } from '../upload';
|
|
import { FileDrawer } from './draw/FileDrawer';
|
|
import { useResourceFileStore } from '../store/resource-file';
|
|
export const FileApp = () => {
|
|
const { getList, prefix, setListType, listType } = useResourceStore();
|
|
const { getStatFile, prefix: statPrefix, openDrawer } = useResourceFileStore();
|
|
useEffect(() => {
|
|
getList();
|
|
}, []);
|
|
const directory = useMemo(() => {
|
|
const _prefix = prefix.split('/');
|
|
let dir = _prefix.slice(2).join('/');
|
|
if (dir.endsWith('/')) {
|
|
dir = dir.slice(0, -1);
|
|
}
|
|
return dir;
|
|
}, [prefix]);
|
|
useEffect(() => {
|
|
if (statPrefix && openDrawer) {
|
|
getStatFile();
|
|
}
|
|
}, [statPrefix, openDrawer]);
|
|
const handleUpload = (res: any) => {
|
|
getList();
|
|
};
|
|
return (
|
|
<div className='h-full py-4 px-2 w-full'>
|
|
<Box
|
|
sx={{
|
|
borderRadius: 2,
|
|
display: 'flex',
|
|
marginBottom: 4,
|
|
height: '100%',
|
|
flexDirection: 'column',
|
|
}}>
|
|
<div className='flex items-center gap-3 mb-8'>
|
|
<FileText className='w-8 h-8 text-amber-600' />
|
|
<Typography
|
|
variant='h1'
|
|
className='text-amber-900'
|
|
sx={{
|
|
fontSize: { xs: '1.3rem', sm: '2rem' },
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Resources
|
|
</Typography>
|
|
</div>
|
|
<Box className='flex items-center gap-2 mb-4'>
|
|
<PrefixRedirect />
|
|
<UploadButton prefix={directory} onUpload={handleUpload} />
|
|
<ButtonGroup className='ml-auto' variant='contained' color='primary' sx={{ color: 'white' }}>
|
|
<Button
|
|
variant={listType === 'table' ? 'contained' : 'outlined'}
|
|
sx={{
|
|
'& > svg': {
|
|
color: listType === 'table' ? 'white' : 'inherit',
|
|
},
|
|
}}
|
|
onClick={() => setListType('table')}>
|
|
<Table />
|
|
</Button>
|
|
<Button
|
|
variant={listType === 'card' ? 'contained' : 'outlined'}
|
|
sx={{
|
|
'& > svg': {
|
|
color: listType === 'card' ? 'white' : 'inherit',
|
|
},
|
|
}}
|
|
onClick={() => setListType('card')}>
|
|
<Grid />
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Box>
|
|
<Box
|
|
className='scrollbar'
|
|
sx={{
|
|
height: 'calc(100% - 80px)',
|
|
overflow: 'auto',
|
|
}}>
|
|
{listType === 'card' ? <FileCard /> : <FileTable />}
|
|
</Box>
|
|
</Box>
|
|
<FileDrawer />
|
|
</div>
|
|
);
|
|
};
|