完成ali-oss文件管理
This commit is contained in:
@@ -1,5 +1,196 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { useOssStore } from '@/hooks/admin/web/blog/use-oss-store';
|
||||
import { ObjectMeta } from 'ali-oss';
|
||||
import { Delete, Download, Edit, RefreshCcw, Upload } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { UploadManager } from './components/UploadManager';
|
||||
|
||||
|
||||
const formatSizeNumber = (n: number) => {
|
||||
const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
|
||||
for (const [i, u] of unit.entries()) {
|
||||
if (n < 1024 ** (i + 1)) {
|
||||
if (i <= 0) {
|
||||
return `${(n)}${unit[i]}`;
|
||||
} else {
|
||||
return `${(n / 1024 ** i).toFixed(2)}${unit[i]}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface FileItem {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;// Byte
|
||||
lastModified: Date;
|
||||
isChecked: boolean;
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
const { stsTokenData, isLoading, error, store } = useOssStore();
|
||||
|
||||
const [fileList, setFileList] = useState<null | FileItem[]>(null);
|
||||
|
||||
const handleRefreshFileList = async () => {
|
||||
if (!store || !stsTokenData) return toast.error('初始化失败，请刷新界面重试');
|
||||
setFileList(null);
|
||||
const res = await store.listV2({ prefix: `tone-page/${stsTokenData.userId}` }, {}).catch(e => {
|
||||
toast.error('文件列表加载失败');
|
||||
});
|
||||
|
||||
if (res && res.objects) {
|
||||
setFileList(res.objects.map(v => ({
|
||||
id: v.name,
|
||||
name: v.name.replace(`tone-page/${stsTokenData.userId}/`, ''),
|
||||
size: v.size,
|
||||
lastModified: new Date(v.lastModified),
|
||||
isChecked: false,
|
||||
})));
|
||||
}
|
||||
}
|
||||
|
||||
const handleCheckboxChange = (id: string, checked: boolean) => {
|
||||
setFileList((prevFileList) => {
|
||||
if (!prevFileList) return null;
|
||||
|
||||
return prevFileList.map(item => {
|
||||
if (item.id === id) {
|
||||
return { ...item, isChecked: checked };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
store && stsTokenData && handleRefreshFileList();
|
||||
}, [stsTokenData]);
|
||||
|
||||
const checkedFileIds = useMemo(() => {
|
||||
if (!fileList) return null;
|
||||
return fileList.filter(i => i.isChecked).map(i => i.id);
|
||||
}, [fileList])
|
||||
|
||||
|
||||
const handleDeleteCheckedFiles = async () => {
|
||||
if (!store || !stsTokenData) return toast.error('初始化未完成或失败，请等待或重新加载');
|
||||
const deleteFiles = (fileList || []).filter(i => i.isChecked);
|
||||
if (!deleteFiles) return toast.error('请选择需要删除的文件');
|
||||
|
||||
let failedCount = 0;
|
||||
for (let item of deleteFiles) {
|
||||
await deleteFile(item.name).catch(e => { failedCount++; return e; });
|
||||
}
|
||||
|
||||
if (failedCount > 0) {
|
||||
toast.warning(`删除完成，共有${failedCount}个文件删除失败`)
|
||||
} else {
|
||||
toast.success(`${deleteFiles.length}个文件删除完成`)
|
||||
}
|
||||
handleRefreshFileList();
|
||||
}
|
||||
|
||||
const handleDeleteFile = async (fileItem: FileItem) => {
|
||||
await deleteFile(fileItem.name)
|
||||
.then(() => toast.success('删除完成'))
|
||||
.catch(() => toast.error('删除失败'));
|
||||
handleRefreshFileList();
|
||||
}
|
||||
|
||||
const deleteFile = async (localFilename: string) => {
|
||||
if (!store) throw new Error('store未初始化');
|
||||
if (!stsTokenData) throw new Error('sts服务未初始化');
|
||||
return store.delete(`/tone-page/${stsTokenData.userId}/${localFilename}`);
|
||||
}
|
||||
|
||||
const downloadFile = (localFilename: string) => {
|
||||
if (!store) throw new Error('store未初始化');
|
||||
if (!stsTokenData) throw new Error('sts服务未初始化');
|
||||
const url = store.signatureUrl(`/tone-page/${stsTokenData.userId}/${localFilename}`);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = localFilename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
const handleDownloadFile = async (fileItem: FileItem) => {
|
||||
downloadFile(fileItem.name);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>storage</div>
|
||||
<div>
|
||||
<div>
|
||||
<Button variant='secondary' size='icon' className='cursor-pointer' onClick={() => handleRefreshFileList()}><RefreshCcw /></Button>
|
||||
</div>
|
||||
<div className='mt-1 flex gap-2'>
|
||||
<UploadManager
|
||||
store={store}
|
||||
basePath={stsTokenData && `/tone-page/${stsTokenData.userId}`}
|
||||
handleRefreshFileList={handleRefreshFileList}
|
||||
>
|
||||
<Button variant='default' className='cursor-pointer'><Upload />上传</Button>
|
||||
</UploadManager>
|
||||
<Button
|
||||
variant='destructive'
|
||||
className='cursor-pointer'
|
||||
disabled={(checkedFileIds?.length || 0) <= 0}
|
||||
onClick={() => handleDeleteCheckedFiles()}
|
||||
><Delete />删除</Button>
|
||||
</div>
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{(isLoading || (fileList == null && !error)) && <div>加载中...</div>}
|
||||
{error && <div>{`${error}`}</div>}
|
||||
{fileList && fileList.length === 0 && <div>暂无文件</div>}
|
||||
</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className='w-10'></TableHead>
|
||||
<TableHead>文件名</TableHead>
|
||||
<TableHead>文件大小</TableHead>
|
||||
<TableHead>上次修改时间</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
fileList && fileList.map(d => (
|
||||
<TableRow key={d.name} >
|
||||
<TableCell>
|
||||
<Checkbox checked={d.isChecked} onCheckedChange={v => handleCheckboxChange(d.id, Boolean(v))} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className='whitespace-normal break-all cursor-pointer text-left'>
|
||||
{d.name}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleDownloadFile(d)}><Download />下载</DropdownMenuItem>
|
||||
{/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
|
||||
<DropdownMenuItem onClick={() => handleDeleteFile(d)}><Delete />删除</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
<TableCell>{formatSizeNumber(d.size)}</TableCell>
|
||||
<TableCell className='whitespace-normal break-words'>{d.lastModified.toLocaleString()}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user