tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构OssStore

Browse Source
This commit is contained in:
tone
2025-06-19 22:03:50 +08:00
parent 1bd717f84f
commit 8f2df85208
3 changed files with 52 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tone-page-web/app/console/(with-menu)/storage/components/UploadManager.tsx
View File

@@ -10,13 +10,13 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import OSS from "ali-oss";
import { ArrowUpFromLine, Check, CloudUpload, ClubIcon, Coins, File, Files, X } from "lucide-react";
import { Check, CloudUpload, File, Files, X } from "lucide-react";
import React, { useRef, useState } from "react";
import { Progress } from '@/components/ui/progress';
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { OssStore } from "@/lib/oss/OssStore";
import { Checkpoint } from "ali-oss";
interface UploadManagerProps {
children: React.ReactNode;
@@ -37,7 +37,7 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
const handleFileSelect = (fileList: FileList) => {
setFileList(currentFileList => {
const newFiles: UploadFileItem[] = [];
for (let file of fileList) {
for (const file of fileList) {
const repeatFile = currentFileList.find(f =>
f.file.name === file.name &&
f.file.size === file.size &&
@@ -90,7 +90,7 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
setIsUploading(true);
for (const fileItem of needUploadFiles) {
fileItem.status = 'uploading';
await startUploadFile(fileItem).catch(e => { fileItem.status = 'failed'; failCount++; });
await startUploadFile(fileItem).catch(() => { fileItem.status = 'failed'; failCount++; });
fileItem.status = 'finish';
}
setIsUploading(false);
@@ -109,10 +109,10 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
const startUploadFile = async (fileItem: UploadFileItem) => {
if (!ossStore) return;
let checkpoint: any;
let checkpoint: Checkpoint | undefined;
await ossStore.storeMeta.store?.multipartUpload(`${ossStore.getWorkDir()}/${fileItem.file.name}`, fileItem.file, {
checkpoint: checkpoint,
progress: (p, cpt, res) => {
progress: (p, cpt) => {
setFileList(currentFileList => {
return currentFileList.map(f => {
if (f.id == fileItem.id) {

38
tone-page-web/app/console/(with-menu)/storage/page.tsx
View File

@@ -3,10 +3,8 @@
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 { Delete, Download, RefreshCcw, Upload } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import {
DropdownMenu,
@@ -15,12 +13,12 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { UploadManager } from './components/UploadManager';
import { OssStore } from '@/lib/oss/OssStore';
import { OssObjectItem, OssObjectList, OssStore } from '@/lib/oss/OssStore';
const formatSizeNumber = (n: number) => {
const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
for (const [i, u] of unit.entries()) {
for (const [i] of unit.entries()) {
if (n < 1024 ** (i + 1)) {
if (i <= 0) {
return `${(n)}${unit[i]}`;
@@ -34,11 +32,14 @@ const formatSizeNumber = (n: number) => {
export default function Page() {
const [objectList, setObjectList] = useState<OssObjectList>(null)
const ossStore = new OssStore({
prefix: 'tone-page',
prefixAddUserId: true,
objectList: () => objectList,
setObjectList,
});
const objectList = ossStore.useObjectList;
const handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message));
const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore);
@@ -47,14 +48,17 @@ export default function Page() {
return (objectList || []).filter(i => i.isChecked).map(i => i.id);
}, [objectList])
const handleDeleteObject = async (id: string) => {
await ossStore.deleteObject(id)
const handleDeleteObject = async (objectItem: OssObjectItem) => {
await ossStore.deleteObject(objectItem)
.then(() => ossStore.loadObjectList())
.catch(e => toast.error(`${e.message}`))
}
const handleDeleteCheckedFiles = async () => {
const res = await ossStore.deleteCheckedObjects();
if (!objectList) return;
const checkedObjects = objectList.filter(o => o.isChecked);
const res = await ossStore.deleteCheckedObjects(checkedObjects);
if (res.failed > 0) {
toast.warning(`删除完成，共有${res.failed}个文件删除失败`)
@@ -64,8 +68,8 @@ export default function Page() {
handleRefreshFileList();
}
const handleDownloadObject = async (id: string) => {
ossStore.downloadObject(id).catch(e => toast.error(`${e.message}`));
const handleDownloadObject = async (objectItem: OssObjectItem) => {
ossStore.downloadObject(objectItem).catch(e => toast.error(`${e.message}`));
}
return (
@@ -90,9 +94,9 @@ export default function Page() {
</div>
<Table>
<TableCaption>
{/* {(ossStore.isLoading || ( == null && !error)) && <div>加载中...</div>}
{error && <div>{`${error}`}</div>}
{fileList && fileList.length === 0 && <div>暂无文件</div>} */}
{objectList === null && <div>加载中...</div>}
{/* {error && <div>{`${error}`}</div>} */}
{objectList && objectList.length === 0 && <div>暂无文件</div>}
</TableCaption>
<TableHeader>
<TableRow>
@@ -115,9 +119,9 @@ export default function Page() {
{d.name}
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => handleDownloadObject(d.id)}><Download />下载</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDownloadObject(d)}><Download />下载</DropdownMenuItem>
{/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
<DropdownMenuItem onClick={() => handleDeleteObject(d.id)}><Delete />删除</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDeleteObject(d)}><Delete />删除</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>

67
tone-page-web/lib/oss/OssStore.ts
View File

@@ -1,7 +1,7 @@
import { useOssStore } from "@/hooks/admin/web/blog/use-oss-store";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Dispatch, SetStateAction, useState } from "react";
interface OssObjectItem {
export interface OssObjectItem {
id: string;
name: string;
size: number;// Byte
@@ -9,22 +9,21 @@ interface OssObjectItem {
isChecked: boolean;
};
type OssObjectList = null | OssObjectItem[];
export type OssObjectList = OssObjectItem[] | null;
export class OssStore {
private objectList: OssObjectList = null;
private setObjectList: Dispatch<SetStateAction<OssObjectList>>;
private setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
public storeMeta: ReturnType<typeof useOssStore>;
constructor(private options: {
prefix?: string;
prefixAddUserId?: boolean;
objectList?: () => (OssObjectList | null);
setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
} = {}) {
const [objectList, setObjectList] = useState<OssObjectList>(null);
this.objectList = objectList;
this.setObjectList = setObjectList;
this.setObjectList = options.setObjectList;
this.storeMeta = useOssStore({
region: 'oss-cn-chengdu',
@@ -36,11 +35,11 @@ export class OssStore {
});
}
get useObjectList() {
return this.objectList;
}
public async loadObjectList() {
if (!this.setObjectList) {
throw new Error('setObjectList need provided');
}
const store = await this.getStore();
this.setObjectList(null);
@@ -58,6 +57,10 @@ export class OssStore {
}
public handleObjectCheckedStateChanged(id: string, value: boolean) {
if (!this.setObjectList) {
throw new Error('setObjectList need provided');
}
this.setObjectList(current => current ? current.map(objectItem => {
if (objectItem.id === id) {
return { ...objectItem, isChecked: value }
@@ -66,41 +69,37 @@ export class OssStore {
}) : null)
}
public async deleteObject(id: string) {
public async deleteObject(objectItem: OssObjectItem) {
if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试');
}
const fileItem = (this.objectList || []).find(i => i.id === id);
if (!fileItem) throw new Error('文件不存在');
const objectName = this.getObjectName(fileItem.name);
const objectName = this.getObjectNameByLocalname(objectItem.name);
const delRes = await this.storeMeta.store.delete(objectName).catch(() => null);
if (!delRes) throw new Error('删除失败');
}
public async deleteCheckedObjects() {
public async deleteCheckedObjects(objectItems: OssObjectItem[]) {
if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试');
}
const objects = (this.objectList || []).filter(i => i.isChecked);
if (objects.length === 0) throw new Error('请选择需要删除的文件');
if (objectItems.length === 0) throw new Error('请选择需要删除的文件');
let failedCount = 0;
for (const objectItem of objects) {
await this.deleteObject(objectItem.id).catch(e => failedCount++);
for (const objectItem of objectItems) {
await this.deleteObject(objectItem).catch(e => failedCount++);
}
return { all: objects.length, failed: failedCount };
return { all: objectItems.length, failed: failedCount };
}
public async downloadObject(id: string) {
public async downloadObject(objectItem: OssObjectItem) {
if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试');
}
const objectItem = this.getObjectItemById(id);
const url = this.storeMeta.store.signatureUrl(this.getObjectName(objectItem.name));
const url = this.storeMeta.store.signatureUrl(this.getObjectNameByLocalname(objectItem.name));
const a = document.createElement('a');
a.href = url;
a.download = objectItem.name;
@@ -117,21 +116,10 @@ export class OssStore {
return this.storeMeta.store;
}
private getObjectName(localName: string) {
private getObjectNameByLocalname(localName: string) {
return `${this.getWorkDir()}/${localName}`;
}
private getObjectNameById(id: string) {
const objectItem = this.getObjectItemById(id);
return this.getObjectName(objectItem.name);
}
private getObjectItemById(id: string) {
const objectItem = (this.objectList || []).find(i => i.id === id);
if (!objectItem) throw new Error('文件不存在');
return objectItem;
}
public getWorkDir() {
const { stsTokenData } = this.storeMeta;
if (!stsTokenData) return;
@@ -142,9 +130,4 @@ export class OssStore {
return this.options.prefix;
}
}
get isLoading() {
return this.storeMeta.isLoading;
}
}