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

feat: 添加i18n，美化界面

Browse Source
This commit is contained in:
熊潇
2025-03-20 02:29:01 +08:00
parent 27d9bdf54e
commit c206add7eb
56 changed files with 2743 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,107 +6,116 @@ import { getIcon } from '../FileIcon';
import { Download, Trash } from 'lucide-react';
import clsx from 'clsx';
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
import { useConfirm } from '@kevisual/center-components/modal/Confirm.tsx';
export const FileTable = () => {
const { list, prefix, download, onOpenPrefix, deleteFile } = useResourceStore();
const { setOpenDrawer, setPrefix } = useResourceFileStore();
const { confirm, contextHolder } = useConfirm();
return (
<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
<>
{contextHolder}
<TableContainer
className='scrollbar'
sx={{
minWidth: 650,
'&': {
// scrollbarWidth: 'none',
// scrollbarColor: '#888 #fff',
},
'&::-webkit-scrollbar': {
width: '4px !important',
height: '4px !important',
background: '#fff',
},
'&::-webkit-scrollbar-thumb': {
background: '#888',
borderRadius: '2px',
},
}}
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'
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();
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>
<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();
confirm('删除文件', '确定删除该文件吗？', {
onConfirm: () => {
deleteFile(row);
},
});
}}
sx={{
color: 'white',
minWidth: '32px',
padding: '4px',
}}>
<Trash />
</Button>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</>
);
};