封装ossStore
This commit is contained in:
@@ -15,6 +15,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { UploadManager } from './components/UploadManager';
|
||||
import { OssStore } from '@/lib/oss/OssStore';
|
||||
|
||||
|
||||
const formatSizeNumber = (n: number) => {
|
||||
@@ -30,114 +31,48 @@ const formatSizeNumber = (n: number) => {
|
||||
}
|
||||
}
|
||||
|
||||
interface FileItem {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;// Byte
|
||||
lastModified: Date;
|
||||
isChecked: boolean;
|
||||
};
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const { stsTokenData, isLoading, error, store } = useOssStore();
|
||||
const ossStore = new OssStore({
|
||||
prefix: 'tone-page',
|
||||
prefixAddUserId: true,
|
||||
});
|
||||
const objectList = ossStore.useObjectList;
|
||||
|
||||
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 handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message));
|
||||
const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore);
|
||||
|
||||
const checkedFileIds = useMemo(() => {
|
||||
if (!fileList) return null;
|
||||
return fileList.filter(i => i.isChecked).map(i => i.id);
|
||||
}, [fileList])
|
||||
return (objectList || []).filter(i => i.isChecked).map(i => i.id);
|
||||
}, [objectList])
|
||||
|
||||
const handleDeleteObject = async (id: string) => {
|
||||
await ossStore.deleteObject(id)
|
||||
.then(() => ossStore.loadObjectList())
|
||||
.catch(e => toast.error(`${e.message}`))
|
||||
}
|
||||
|
||||
const handleDeleteCheckedFiles = async () => {
|
||||
if (!store || !stsTokenData) return toast.error('初始化未完成或失败，请等待或重新加载');
|
||||
const deleteFiles = (fileList || []).filter(i => i.isChecked);
|
||||
if (!deleteFiles) return toast.error('请选择需要删除的文件');
|
||||
const res = await ossStore.deleteCheckedObjects();
|
||||
|
||||
let failedCount = 0;
|
||||
for (let item of deleteFiles) {
|
||||
await deleteFile(item.name).catch(e => { failedCount++; return e; });
|
||||
}
|
||||
|
||||
if (failedCount > 0) {
|
||||
toast.warning(`删除完成，共有${failedCount}个文件删除失败`)
|
||||
if (res.failed > 0) {
|
||||
toast.warning(`删除完成，共有${res.failed}个文件删除失败`)
|
||||
} else {
|
||||
toast.success(`${deleteFiles.length}个文件删除完成`)
|
||||
toast.success(`${res.all}个文件删除完成`)
|
||||
}
|
||||
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;
|
||||
a.target = '_blank';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
const handleDownloadFile = async (fileItem: FileItem) => {
|
||||
downloadFile(fileItem.name);
|
||||
const handleDownloadObject = async (id: string) => {
|
||||
ossStore.downloadObject(id).catch(e => toast.error(`${e.message}`));
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='mt-1 flex gap-2'>
|
||||
<UploadManager
|
||||
store={store}
|
||||
basePath={stsTokenData && `/tone-page/${stsTokenData.userId}`}
|
||||
ossStore={ossStore}
|
||||
handleRefreshFileList={handleRefreshFileList}
|
||||
>
|
||||
<Button variant='default' className='cursor-pointer'><Upload />上传</Button>
|
||||
@@ -145,19 +80,19 @@ export default function Page() {
|
||||
<Button
|
||||
variant='destructive'
|
||||
className='cursor-pointer'
|
||||
disabled={(checkedFileIds?.length || 0) <= 0}
|
||||
disabled={(checkedFileIds.length) <= 0}
|
||||
onClick={() => handleDeleteCheckedFiles()}
|
||||
><Delete />删除</Button>
|
||||
<div className='flex items-center'>
|
||||
<Button variant='secondary' size='icon' className='cursor-pointer' onClick={() => handleRefreshFileList()}><RefreshCcw /></Button>
|
||||
{fileList && <div className='text-sm ml-2'>共有 {fileList.length} 个文件，目前最大支持100个文件</div>}
|
||||
{objectList && <div className='text-sm ml-2'>共有 {objectList.length} 个文件，目前最大支持100个文件</div>}
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{(isLoading || (fileList == null && !error)) && <div>加载中...</div>}
|
||||
{/* {(ossStore.isLoading || ( == null && !error)) && <div>加载中...</div>}
|
||||
{error && <div>{`${error}`}</div>}
|
||||
{fileList && fileList.length === 0 && <div>暂无文件</div>}
|
||||
{fileList && fileList.length === 0 && <div>暂无文件</div>} */}
|
||||
</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
@@ -169,7 +104,7 @@ export default function Page() {
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
fileList && fileList.map(d => (
|
||||
objectList && objectList.map(d => (
|
||||
<TableRow key={d.name} >
|
||||
<TableCell>
|
||||
<Checkbox checked={d.isChecked} onCheckedChange={v => handleCheckboxChange(d.id, Boolean(v))} />
|
||||
@@ -180,9 +115,9 @@ export default function Page() {
|
||||
{d.name}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleDownloadFile(d)}><Download />下载</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDownloadObject(d.id)}><Download />下载</DropdownMenuItem>
|
||||
{/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
|
||||
<DropdownMenuItem onClick={() => handleDeleteFile(d)}><Delete />删除</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDeleteObject(d.id)}><Delete />删除</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user