重构ossStore

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

@@ -16,7 +16,7 @@ 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";
+import OSS, { Checkpoint } from "ali-oss";
 
 interface UploadManagerProps {
     children: React.ReactNode;
@@ -82,7 +82,12 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
     }
 
     const [isUploading, setIsUploading] = useState(false);
+    /** 开始上传文件 */
     const handleUpload = async () => {
+        if (!ossStore) return;
+        let store: OSS;
+        try { store = ossStore.getStore(); } catch { return toast.error(`初始化失败`) };
+
         const needUploadFiles = filesList.filter(f => f.status !== 'finish');
         if (needUploadFiles.length === 0) return toast.info('请选择需要上传的文件');
 
@@ -90,7 +95,7 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
         setIsUploading(true);
         for (const fileItem of needUploadFiles) {
             fileItem.status = 'uploading';
-            await startUploadFile(fileItem).catch(() => { fileItem.status = 'failed'; failCount++; });
+            await startUploadFile(store, fileItem, ossStore.getWorkDir()).catch(() => { fileItem.status = 'failed'; failCount++; });
             fileItem.status = 'finish';
         }
         setIsUploading(false);
@@ -105,12 +110,11 @@ export function UploadManager({ children, ossStore, handleRefreshFileList }: Upl
         handleRefreshFileList?.();
     }
 
-    // 开始上传文件
+    // 上传单个文件
-    const startUploadFile = async (fileItem: UploadFileItem) => {
+    const startUploadFile = async (store: OSS, fileItem: UploadFileItem, workDir?: string) => {
-        if (!ossStore) return;
-
         let checkpoint: Checkpoint | undefined;
-        await ossStore.storeMeta.store?.multipartUpload(`${ossStore.getWorkDir()}/${fileItem.file.name}`, fileItem.file, {
+
+        await store.multipartUpload(`${workDir ? `${workDir}/` : ''}${fileItem.file.name}`, fileItem.file, {
             checkpoint: checkpoint,
             progress: (p, cpt) => {
                 setFileList(currentFileList => {

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

@@ -4,7 +4,7 @@ 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 { Delete, Download, RefreshCcw, Upload } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import {
     DropdownMenu,
@@ -14,6 +14,8 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { UploadManager } from './components/UploadManager';
 import { OssObjectItem, OssObjectList, OssStore } from '@/lib/oss/OssStore';
+import { useOssStore } from '@/hooks/admin/web/blog/use-oss-store';
+import OSS from 'ali-oss';
 
 
 const formatSizeNumber = (n: number) => {
@@ -29,17 +31,41 @@ const formatSizeNumber = (n: number) => {
     }
 }
 
-
+const ossStore = new OssStore();
 
 export default function Page() {
     const [objectList, setObjectList] = useState<OssObjectList>(null)
 
-    const ossStore = new OssStore({
+    ossStore.setSetObjectList(setObjectList);
-        prefix: 'tone-page',
+
-        prefixAddUserId: true,
+    const storeMeta = useOssStore();
-        objectList: () => objectList,
+
-        setObjectList,
+    useEffect(() => {
-    });
+        const data = storeMeta.stsTokenData;
+        if (!data) return;
+
+        const store = new OSS({
+            region: 'oss-cn-chengdu',
+            bucket: 'tone-personal',
+            accessKeyId: data.AccessKeyId,
+            accessKeySecret: data.AccessKeySecret,
+            stsToken: data.SecurityToken,
+            refreshSTSToken: async () => {
+                await storeMeta.refresh();
+                if (!storeMeta.stsTokenData) throw new Error();
+                const { AccessKeyId, AccessKeySecret, SecurityToken } = storeMeta.stsTokenData;
+                return {
+                    accessKeyId: AccessKeyId,
+                    accessKeySecret: AccessKeySecret,
+                    stsToken: SecurityToken,
+                };
+            },
+        })
+
+        ossStore.setStore(store);
+        ossStore.setWorkDir(`tone-page/${data.userId}`)
+        ossStore.loadObjectList();
+    }, [storeMeta.stsTokenData]);
 
     const handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message));
     const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore);

tone-page-web/hooks/admin/web/blog/use-oss-store.ts

@@ -3,30 +3,22 @@ import { StsToken } from "@/lib/api/oss";
 import OSS from "ali-oss";
 import { useEffect } from "react";
 
-export function useOssStore(options: { region: string; bucket: string; onStsTokenDataChanged?: (data: StsToken | undefined) => void; }) {
+export function useOssStore(options: { onStsTokenDataChanged?: (data: StsToken | undefined) => void; } = {}) {
-    const { stsTokenData, isLoading, error } = useOssSts();
+    const { stsTokenData, isLoading, error, mutate } = useOssSts();
 
     useEffect(() => {
         options.onStsTokenDataChanged?.(stsTokenData);
-    }, [stsTokenData])
+    }, [stsTokenData]);
+
+    /** @todo */
+    const refresh = async () => {
+        await mutate();
+    }
 
     return {
         stsTokenData,
         isLoading,
         error,
-        store: stsTokenData ? new OSS({
+        refresh,
-            region: options.region,
-            bucket: options.bucket,
-            accessKeyId: stsTokenData.AccessKeyId,
-            accessKeySecret: stsTokenData.AccessKeySecret,
-            stsToken: stsTokenData.SecurityToken,
-            refreshSTSToken: () => new Promise(resolve => {
-                resolve({
-                    accessKeyId: stsTokenData.AccessKeyId,
-                    accessKeySecret: stsTokenData.AccessKeySecret,
-                    stsToken: stsTokenData.SecurityToken,
-                })
-            }),
-        }) : undefined,
     }
 }

tone-page-web/hooks/oss/use-oss-sts.ts

@@ -3,12 +3,12 @@ import { toast } from "sonner";
 import useSWR from "swr";
 
 export function useOssSts() {
-    const { data: stsTokenData, isLoading, error } = useSWR(
+    const { data: stsTokenData, isLoading, error, mutate } = useSWR(
         '/api/oss/sts',
         () => OssApi.getStsToken(),
         {
             shouldRetryOnError: false,
-            refreshInterval: 59 * 60 * 1000,
+            // refreshInterval: 59 * 60 * 1000,
             revalidateOnFocus: false,
             onError: (e) => {
                 toast.error(`${e.message || e}`)
@@ -20,5 +20,6 @@ export function useOssSts() {
         stsTokenData,
         isLoading,
         error,
+        mutate,
     }
 }

tone-page-web/lib/oss/OssStore.ts

@@ -1,5 +1,7 @@
 import { useOssStore } from "@/hooks/admin/web/blog/use-oss-store";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction } from "react";
+import { StsToken } from "../api/oss";
+import OSS from "ali-oss";
 
 export interface OssObjectItem {
     id: string;
@@ -14,25 +16,23 @@ export type OssObjectList = OssObjectItem[] | null;
 export class OssStore {
 
     private setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
+    public store?: OSS;
+    private workDir: string;
 
-    public storeMeta: ReturnType<typeof useOssStore>;
+    constructor(options: {
-
+        workDir?: string;
-    constructor(private options: {
-        prefix?: string;
-        prefixAddUserId?: boolean;
-        objectList?: () => (OssObjectList | null);
         setObjectList?: Dispatch<SetStateAction<OssObjectList>>;
     } = {}) {
+        this.workDir = options.workDir ?? '';
         this.setObjectList = options.setObjectList;
+    }
 
-        this.storeMeta = useOssStore({
+    public setStore(store: OSS | undefined) {
-            region: 'oss-cn-chengdu',
+        this.store = store;
-            bucket: 'tone-personal',
+    }
-            onStsTokenDataChanged: (data) => {
+
-                if (!data) return;
+    public setSetObjectList(setObjectList: Dispatch<SetStateAction<OssObjectList>>) {
-                this.loadObjectList();
+        this.setObjectList = setObjectList;
-            }
-        });
     }
 
     public async loadObjectList() {
@@ -40,7 +40,7 @@ export class OssStore {
             throw new Error('setObjectList need provided');
         }
 
-        const store = await this.getStore();
+        const store = this.getStore();
         this.setObjectList(null);
 
         const workDir = this.getWorkDir();
@@ -70,17 +70,15 @@ export class OssStore {
     }
 
     public async deleteObject(objectItem: OssObjectItem) {
-        if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
+        const store = this.getStore();
-            throw new Error('初始化失败，请刷新界面重试');
-        }
 
         const objectName = this.getObjectNameByLocalname(objectItem.name);
-        const delRes = await this.storeMeta.store.delete(objectName).catch(() => null);
+        const delRes = await store.delete(objectName).catch(() => null);
         if (!delRes) throw new Error('删除失败');
     }
 
     public async deleteCheckedObjects(objectItems: OssObjectItem[]) {
-        if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
+        if (!this.getStore()) {
             throw new Error('初始化失败，请刷新界面重试');
         }
 
@@ -95,11 +93,12 @@ export class OssStore {
     }
 
     public async downloadObject(objectItem: OssObjectItem) {
-        if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
+        const store = this.getStore();
+        if (!store) {
             throw new Error('初始化失败，请刷新界面重试');
         }
 
-        const url = this.storeMeta.store.signatureUrl(this.getObjectNameByLocalname(objectItem.name));
+        const url = store.signatureUrl(this.getObjectNameByLocalname(objectItem.name));
         const a = document.createElement('a');
         a.href = url;
         a.download = objectItem.name;
@@ -109,11 +108,14 @@ export class OssStore {
         document.body.removeChild(a);
     }
 
-    private async getStore() {
+    /**
-        if (!this.storeMeta.store || !this.storeMeta.stsTokenData) {
+     * @throws Error
+     */
+    public getStore() {
+        if (!this.store) {
             throw new Error('初始化失败，请刷新界面重试');
         }
-        return this.storeMeta.store;
+        return this.store;
     }
 
     private getObjectNameByLocalname(localName: string) {
@@ -121,13 +123,10 @@ export class OssStore {
     }
 
     public getWorkDir() {
-        const { stsTokenData } = this.storeMeta;
+        return this.workDir;
-        if (!stsTokenData) return;
+    }
 
-        if (this.options.prefixAddUserId) {
+    public setWorkDir(dir: string) {
-            return `${this.options.prefix ? `${this.options.prefix}/` : ''}${stsTokenData.userId}`;
+        this.workDir = dir;
-        } else {
-            return this.options.prefix;
-        }
     }
 }