feat: 优化项目目录结构

2025-12-12 17:25:26 +08:00
parent ae627d0496
commit b89f83291e
235 changed files with 0 additions and 0 deletions
--- a/apps/frontend/app/console/(with-menu)/storage/page.tsx
+++ b/apps/frontend/app/console/(with-menu)/storage/page.tsx
@@ -0,0 +1,164 @@
+'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 { Delete, Download, 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';
+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) => {
+    const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+    for (const [i] of unit.entries()) {
+        if (n < 1024 ** (i + 1)) {
+            if (i <= 0) {
+                return `${(n)}${unit[i]}`;
+            } else {
+                return `${(n / 1024 ** i).toFixed(2)}${unit[i]}`;
+            }
+        }
+    }
+}
+
+const ossStore = new OssStore();
+
+export default function Page() {
+    const [objectList, setObjectList] = useState<OssObjectList>(null)
+
+    ossStore.setSetObjectList(setObjectList);
+
+    const storeMeta = useOssStore();
+
+    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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- storeMeta引用会导致无限循环，依赖stsTokenData即可
+    }, [storeMeta.stsTokenData]);
+
+    const handleRefreshFileList = async () => ossStore.loadObjectList().catch(e => toast.error(e.message));
+    const handleCheckboxChange = ossStore.handleObjectCheckedStateChanged.bind(ossStore);
+
+    const checkedFileIds = useMemo(() => {
+        return (objectList || []).filter(i => i.isChecked).map(i => i.id);
+    }, [objectList])
+
+    const handleDeleteObject = async (objectItem: OssObjectItem) => {
+        await ossStore.deleteObject(objectItem)
+            .then(() => ossStore.loadObjectList())
+            .catch(e => toast.error(`${e.message}`))
+    }
+
+    const handleDeleteCheckedFiles = async () => {
+        if (!objectList) return;
+        const checkedObjects = objectList.filter(o => o.isChecked);
+
+        const res = await ossStore.deleteCheckedObjects(checkedObjects);
+
+        if (res.failed > 0) {
+            toast.warning(`删除完成，共有${res.failed}个文件删除失败`)
+        } else {
+            toast.success(`${res.all}个文件删除完成`)
+        }
+        handleRefreshFileList();
+    }
+
+    const handleDownloadObject = async (objectItem: OssObjectItem) => {
+        ossStore.downloadObject(objectItem).catch(e => toast.error(`${e.message}`));
+    }
+
+    return (
+        <div>
+            <div className='mt-1 flex gap-2'>
+                <UploadManager
+                    ossStore={ossStore}
+                    handleRefreshFileList={handleRefreshFileList}
+                >
+                    <Button variant='default' className='cursor-pointer'><Upload />上传</Button>
+                </UploadManager>
+                <Button
+                    variant='destructive'
+                    className='cursor-pointer'
+                    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>
+                    {objectList && <div className='text-sm ml-2'>共有 {objectList.length} 个文件，目前最大支持100个文件</div>}
+                </div>
+            </div>
+            <Table>
+                <TableCaption>
+                    {objectList === null && <div>加载中...</div>}
+                    {/* {error && <div>{`${error}`}</div>} */}
+                    {objectList && objectList.length === 0 && <div>暂无文件</div>}
+                </TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className='w-10'></TableHead>
+                        <TableHead>文件名</TableHead>
+                        <TableHead>文件大小</TableHead>
+                        <TableHead>上次修改时间</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {
+                        objectList && objectList.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={() => handleDownloadObject(d)}><Download />下载</DropdownMenuItem>
+                                            {/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
+                                            <DropdownMenuItem onClick={() => handleDeleteObject(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 >
+    )
+}