feat: add drawer and add upload feat

packages/resources/src/pages/file/index.tsx

@@ -1,50 +1,93 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useResourceStore } from '../store/resource';
-import { useSettingsStore } from '../store/settings';
-import { Box, Button, Card, CardContent, Typography, ButtonGroup, useTheme } from '@mui/material';
-import { FileText, Image, File, Table, Grid } from 'lucide-react';
-import { getIcon } from './FileIcon';
+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 { list, getList, prefix, setListType, listType } = useResourceStore();
-  const { settings } = useSettingsStore();
-
+  const { getList, prefix, setListType, listType } = useResourceStore();
+  const { getStatFile, prefix: statPrefix, openDrawer } = useResourceFileStore();
   useEffect(() => {
     getList();
   }, []);
-  const theme = useTheme();
+  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 (
-    <Box sx={{ padding: 2, backgroundColor: 'white', borderRadius: 2, marginTop: 4, boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)' }}>
-      <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'
+    <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={{
-            fontSize: { xs: '1.3rem', sm: '2rem' },
-            fontWeight: 'bold',
+            height: 'calc(100% - 80px)',
+            overflow: 'auto',
           }}>
-          Resources
-        </Typography>
-      </div>
-      <Box className='flex items-center gap-2 mb-4'>
-        <Typography variant='h5' sx={{ fontWeight: 'bold', color: theme.palette.primary.main }}>
-          <span className='mr-2' style={{ color: theme.palette.secondary.main }}>
-            Prefix:
-          </span>
-          {prefix}
-        </Typography>
-        <ButtonGroup className='ml-auto' variant='contained' color='primary' sx={{ color: 'white' }}>
-          <Button variant={listType === 'table' ? 'contained' : 'outlined'} onClick={() => setListType('table')}>
-            <Table />
-          </Button>
-          <Button variant={listType === 'card' ? 'contained' : 'outlined'} onClick={() => setListType('card')}>
-            <Grid />
-          </Button>
-        </ButtonGroup>
+          {listType === 'card' ? <FileCard /> : <FileTable />}
+        </Box>
       </Box>
-      <div>{listType === 'card' ? <FileCard /> : <FileTable />}</div>
-    </Box>
+      <FileDrawer />
+    </div>
   );
 };