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, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog" } from "@/components/ui/dialog"
import OSS from "ali-oss"; import { Check, CloudUpload, File, Files, X } from "lucide-react";
import { ArrowUpFromLine, Check, CloudUpload, ClubIcon, Coins, File, Files, X } from "lucide-react";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { Progress } from '@/components/ui/progress'; import { Progress } from '@/components/ui/progress';
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { toast } from "sonner"; import { toast } from "sonner";
import { OssStore } from "@/lib/oss/OssStore"; import { OssStore } from "@/lib/oss/OssStore";
import { Checkpoint } from "ali-oss";
interface UploadManagerProps { interface UploadManagerProps {
children: React.ReactNode; children: React.ReactNode;
@@ -37,7 +37,7 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
const handleFileSelect = (fileList: FileList) => { const handleFileSelect = (fileList: FileList) => {
setFileList(currentFileList => { setFileList(currentFileList => {
const newFiles: UploadFileItem[] = []; const newFiles: UploadFileItem[] = [];
for (let file of fileList) { for (const file of fileList) {
const repeatFile = currentFileList.find(f => const repeatFile = currentFileList.find(f =>
f.file.name === file.name && f.file.name === file.name &&
f.file.size === file.size && f.file.size === file.size &&
@@ -90,7 +90,7 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
setIsUploading(true); setIsUploading(true);
for (const fileItem of needUploadFiles) { for (const fileItem of needUploadFiles) {
fileItem.status = 'uploading'; fileItem.status = 'uploading';
await startUploadFile(fileItem).catch(e => { fileItem.status = 'failed'; failCount++; }); await startUploadFile(fileItem).catch(() => { fileItem.status = 'failed'; failCount++; });
fileItem.status = 'finish'; fileItem.status = 'finish';
} }
setIsUploading(false); setIsUploading(false);
@@ -109,10 +109,10 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
const startUploadFile = async (fileItem: UploadFileItem) => { const startUploadFile = async (fileItem: UploadFileItem) => {
if (!ossStore) return; if (!ossStore) return;
let checkpoint: any; let checkpoint: Checkpoint | undefined;
await ossStore.storeMeta.store?.multipartUpload(`${ossStore.getWorkDir()}/${fileItem.file.name}`, fileItem.file, { await ossStore.storeMeta.store?.multipartUpload(`${ossStore.getWorkDir()}/${fileItem.file.name}`, fileItem.file, {
checkpoint: checkpoint, checkpoint: checkpoint,
progress: (p, cpt, res) => { progress: (p, cpt) => {
setFileList(currentFileList => { setFileList(currentFileList => {
return currentFileList.map(f => { return currentFileList.map(f => {
if (f.id == fileItem.id) { 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 { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { useOssStore } from '@/hooks/admin/web/blog/use-oss-store'; import { Delete, Download, RefreshCcw, Upload } from 'lucide-react';
import { ObjectMeta } from 'ali-oss'; import { useMemo, useState } from 'react';
import { Delete, Download, Edit, RefreshCcw, Upload } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { import {
DropdownMenu, DropdownMenu,
@@ -15,12 +13,12 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { UploadManager } from './components/UploadManager'; import { UploadManager } from './components/UploadManager';
import { OssStore } from '@/lib/oss/OssStore'; import { OssObjectItem, OssObjectList, OssStore } from '@/lib/oss/OssStore';
const formatSizeNumber = (n: number) => { const formatSizeNumber = (n: number) => {
const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']; 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 (n < 1024 ** (i + 1)) {
if (i <= 0) { if (i <= 0) {
return `${(n)}${unit[i]}`; return `${(n)}${unit[i]}`;
@@ -34,11 +32,14 @@ const formatSizeNumber = (n: number) => {
export default function Page() { export default function Page() {
const [objectList, setObjectList] = useState<OssObjectList>(null)
const ossStore = new OssStore({ const ossStore = new OssStore({
prefix: 'tone-page', prefix: 'tone-page',
prefixAddUserId: true, prefixAddUserId: true,
objectList: () => objectList,
setObjectList,
}); });
const objectList = ossStore.useObjectList;
const handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message)); const handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message));
const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore); const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore);
@@ -47,14 +48,17 @@ export default function Page() {
return (objectList || []).filter(i => i.isChecked).map(i => i.id); return (objectList || []).filter(i => i.isChecked).map(i => i.id);
}, [objectList]) }, [objectList])
const handleDeleteObject = async (id: string) => { const handleDeleteObject = async (objectItem: OssObjectItem) => {
await ossStore.deleteObject(id) await ossStore.deleteObject(objectItem)
.then(() => ossStore.loadObjectList()) .then(() => ossStore.loadObjectList())
.catch(e => toast.error(`${e.message}`)) .catch(e => toast.error(`${e.message}`))
} }
const handleDeleteCheckedFiles = async () => { 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) { if (res.failed > 0) {
toast.warning(`删除完成，共有${res.failed}个文件删除失败`) toast.warning(`删除完成，共有${res.failed}个文件删除失败`)
@@ -64,8 +68,8 @@ export default function Page() {
handleRefreshFileList(); handleRefreshFileList();
} }
const handleDownloadObject = async (id: string) => { const handleDownloadObject = async (objectItem: OssObjectItem) => {
ossStore.downloadObject(id).catch(e => toast.error(`${e.message}`)); ossStore.downloadObject(objectItem).catch(e => toast.error(`${e.message}`));
} }
return ( return (
@@ -90,9 +94,9 @@ export default function Page() {
</div> </div>
<Table> <Table>
<TableCaption> <TableCaption>
{/* {(ossStore.isLoading || ( == null && !error)) && <div>加载中...</div>} {objectList === null && <div>加载中...</div>}
{error && <div>{`${error}`}</div>} {/* {error && <div>{`${error}`}</div>} */}
{fileList && fileList.length === 0 && <div>暂无文件</div>} */} {objectList && objectList.length === 0 && <div>暂无文件</div>}
</TableCaption> </TableCaption>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -115,9 +119,9 @@ export default function Page() {
{d.name} {d.name}
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem onClick={() => handleDownloadObject(d.id)}><Download />下载</DropdownMenuItem> <DropdownMenuItem onClick={() => handleDownloadObject(d)}><Download />下载</DropdownMenuItem>
{/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */} {/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
<DropdownMenuItem onClick={() => handleDeleteObject(d.id)}><Delete />删除</DropdownMenuItem> <DropdownMenuItem onClick={() => handleDeleteObject(d)}><Delete />删除</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TableCell> </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 { 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; id: string;
name: string; name: string;
size: number;// Byte size: number;// Byte
@@ -9,22 +9,21 @@ interface OssObjectItem {
isChecked: boolean; isChecked: boolean;
}; };
type OssObjectList = null | OssObjectItem[]; export type OssObjectList = OssObjectItem[] | null;
export class OssStore { export class OssStore {
private objectList: OssObjectList = null; private setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
private setObjectList: Dispatch<SetStateAction<OssObjectList>>;
public storeMeta: ReturnType<typeof useOssStore>; public storeMeta: ReturnType<typeof useOssStore>;
constructor(private options: { constructor(private options: {
prefix?: string; prefix?: string;
prefixAddUserId?: boolean; prefixAddUserId?: boolean;
objectList?: () => (OssObjectList | null);
setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
} = {}) { } = {}) {
const [objectList, setObjectList] = useState<OssObjectList>(null); this.setObjectList = options.setObjectList;
this.objectList = objectList;
this.setObjectList = setObjectList;
this.storeMeta = useOssStore({ this.storeMeta = useOssStore({
region: 'oss-cn-chengdu', region: 'oss-cn-chengdu',
@@ -36,11 +35,11 @@ export class OssStore {
}); });
} }
get useObjectList() {
return this.objectList;
}
public async loadObjectList() { public async loadObjectList() {
if (!this.setObjectList) {
throw new Error('setObjectList need provided');
}
const store = await this.getStore(); const store = await this.getStore();
this.setObjectList(null); this.setObjectList(null);
@@ -58,6 +57,10 @@ export class OssStore {
} }
public handleObjectCheckedStateChanged(id: string, value: boolean) { public handleObjectCheckedStateChanged(id: string, value: boolean) {
if (!this.setObjectList) {
throw new Error('setObjectList need provided');
}
this.setObjectList(current => current ? current.map(objectItem => { this.setObjectList(current => current ? current.map(objectItem => {
if (objectItem.id === id) { if (objectItem.id === id) {
return { ...objectItem, isChecked: value } return { ...objectItem, isChecked: value }
@@ -66,41 +69,37 @@ export class OssStore {
}) : null) }) : null)
} }
public async deleteObject(id: string) { public async deleteObject(objectItem: OssObjectItem) {
if (!this.storeMeta.store || !this.storeMeta.stsTokenData) { if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试'); 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); const delRes = await this.storeMeta.store.delete(objectName).catch(() => null);
if (!delRes) throw new Error('删除失败'); if (!delRes) throw new Error('删除失败');
} }
public async deleteCheckedObjects() { public async deleteCheckedObjects(objectItems: OssObjectItem[]) {
if (!this.storeMeta.store || !this.storeMeta.stsTokenData) { if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试'); throw new Error('初始化失败，请刷新界面重试');
} }
const objects = (this.objectList || []).filter(i => i.isChecked); if (objectItems.length === 0) throw new Error('请选择需要删除的文件');
if (objects.length === 0) throw new Error('请选择需要删除的文件');
let failedCount = 0; let failedCount = 0;
for (const objectItem of objects) { for (const objectItem of objectItems) {
await this.deleteObject(objectItem.id).catch(e => failedCount++); 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) { if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
throw new Error('初始化失败，请刷新界面重试'); throw new Error('初始化失败，请刷新界面重试');
} }
const objectItem = this.getObjectItemById(id); const url = this.storeMeta.store.signatureUrl(this.getObjectNameByLocalname(objectItem.name));
const url = this.storeMeta.store.signatureUrl(this.getObjectName(objectItem.name));
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
a.download = objectItem.name; a.download = objectItem.name;
@@ -117,21 +116,10 @@ export class OssStore {
return this.storeMeta.store; return this.storeMeta.store;
} }
private getObjectName(localName: string) { private getObjectNameByLocalname(localName: string) {
return `${this.getWorkDir()}/${localName}`; 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() { public getWorkDir() {
const { stsTokenData } = this.storeMeta; const { stsTokenData } = this.storeMeta;
if (!stsTokenData) return; if (!stsTokenData) return;
@@ -142,9 +130,4 @@ export class OssStore {
return this.options.prefix; return this.options.prefix;
} }
} }
get isLoading() {
return this.storeMeta.isLoading;
}
} }