完成ali-oss文件管理
This commit is contained in:
@@ -0,0 +1,204 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog"
|
||||||
|
import OSS from "ali-oss";
|
||||||
|
import { ArrowUpFromLine, Check, CloudUpload, ClubIcon, Coins, 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";
|
||||||
|
|
||||||
|
interface UploadManagerProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
store?: OSS;
|
||||||
|
basePath?: string;
|
||||||
|
handleRefreshFileList?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UploadFileItem {
|
||||||
|
id: string;
|
||||||
|
file: File;
|
||||||
|
status: 'ready' | 'uploading' | 'finish' | 'failed';
|
||||||
|
progress: number;// 0 ~ 100
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UploadManager({ children, store, basePath, handleRefreshFileList }: UploadManagerProps) {
|
||||||
|
const [filesList, setFileList] = useState<UploadFileItem[]>([]);
|
||||||
|
|
||||||
|
const handleFileSelect = (fileList: FileList) => {
|
||||||
|
setFileList(currentFileList => {
|
||||||
|
const newFiles: UploadFileItem[] = [];
|
||||||
|
for (let file of fileList) {
|
||||||
|
const repeatFile = currentFileList.find(f =>
|
||||||
|
f.file.name === file.name &&
|
||||||
|
f.file.size === file.size &&
|
||||||
|
f.file.lastModified === file.lastModified
|
||||||
|
);
|
||||||
|
if (!repeatFile) {
|
||||||
|
newFiles.push({
|
||||||
|
id: `${Math.random()}${Date.now()}`,
|
||||||
|
file: file,
|
||||||
|
progress: 0,
|
||||||
|
status: 'ready',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [...currentFileList, ...newFiles];
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileDelete = (fileItemId: string) => {
|
||||||
|
if (isUploading) return toast.warning('上传过程暂时无法删除');
|
||||||
|
setFileList(currentFileList => currentFileList.filter(i => i.id !== fileItemId))
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputFileRef = useRef<HTMLInputElement>(null);
|
||||||
|
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (!e.target.files) return;
|
||||||
|
handleFileSelect(e.target.files);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [fileDroping, setFileDroping] = useState(false);
|
||||||
|
const handleFileOnDropOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setFileDroping(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileOnDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setFileDroping(false);
|
||||||
|
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||||
|
handleFileSelect(e.dataTransfer.files);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
const handleUpload = async () => {
|
||||||
|
const needUploadFiles = filesList.filter(f => f.status !== 'finish');
|
||||||
|
if (needUploadFiles.length === 0) return toast.info('请选择需要上传的文件');
|
||||||
|
|
||||||
|
let failCount = 0;
|
||||||
|
setIsUploading(true);
|
||||||
|
for (const fileItem of needUploadFiles) {
|
||||||
|
fileItem.status = 'uploading';
|
||||||
|
await startUploadFile(fileItem).catch(e => { fileItem.status = 'failed'; failCount++; });
|
||||||
|
fileItem.status = 'finish';
|
||||||
|
}
|
||||||
|
setIsUploading(false);
|
||||||
|
|
||||||
|
if (failCount > 0) {
|
||||||
|
toast.warning(`上传完成，本次共有${failCount}个文件上传失败`);
|
||||||
|
} else {
|
||||||
|
toast.success(`上传完成，共上传了${needUploadFiles.length}个文件`)
|
||||||
|
}
|
||||||
|
handleRefreshFileList?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始上传文件
|
||||||
|
const startUploadFile = async (fileItem: UploadFileItem) => {
|
||||||
|
if (!store || !basePath) return;
|
||||||
|
|
||||||
|
let checkpoint: any;
|
||||||
|
await store.multipartUpload(`${basePath}/${fileItem.file.name}`, fileItem.file, {
|
||||||
|
checkpoint: checkpoint,
|
||||||
|
progress: (p, cpt, res) => {
|
||||||
|
setFileList(currentFileList => {
|
||||||
|
return currentFileList.map(f => {
|
||||||
|
if (f.id == fileItem.id) {
|
||||||
|
f.progress = p * 100;
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
})
|
||||||
|
});
|
||||||
|
checkpoint = cpt;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
{children}
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>上传文件</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
请点击选择文件按钮或拖动文件到指定位置
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
onDrop={handleFileOnDrop}
|
||||||
|
onDragOver={handleFileOnDropOver}
|
||||||
|
onClick={() => inputFileRef.current?.click()}
|
||||||
|
className="flex items-center justify-center border shadow rounded select-none cursor-pointer relative">
|
||||||
|
<div className={cn('flex flex-col items-center py-6 text-zinc-500 text-sm text-center', fileDroping && 'invisible')}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<CloudUpload className="size-10 text-zinc-400" />
|
||||||
|
<span>请拖动文件到此处 或 点击此处</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full px-5 mt-3 text-xs">
|
||||||
|
<p>支持同时选择多个文件，文件区分大小写，若存在同名文件，新文件将被覆；支持超过5GB的文件，上传过程请不要关闭对话框</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={cn('absolute flex items-center text-zinc-600 gap-1 invisible', fileDroping && 'visible')}>
|
||||||
|
<Files className="size-6 text-zinc-500" />
|
||||||
|
<span className="text-sm">请拖放至此处，并松开鼠标</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
ref={inputFileRef}
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleFileInputChange} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
filesList.map(f => (
|
||||||
|
<div
|
||||||
|
key={f.id}
|
||||||
|
className="group hover:bg-zinc-100 duration-300 rounded px-1 py-1">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<File className="size-4 text-zinc-500" />
|
||||||
|
{/* 存在一个bug，文本省略无法自动适配容器宽度 */}
|
||||||
|
<div className="text-sm text-zinc-800 overflow-hidden text-nowrap text-ellipsis max-w-60">
|
||||||
|
{f.file.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{f.status === 'finish' && <Check className="size-4 text-green-600 group-hover:hidden" />}
|
||||||
|
<X
|
||||||
|
onClick={() => handleFileDelete(f.id)}
|
||||||
|
className="size-4 text-zinc-500 cursor-pointer hover:text-zinc-600 hidden group-hover:block" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-0 w-full relative">
|
||||||
|
{f.status === 'uploading' && <Progress value={f.progress} className="h-1" />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={handleUpload}
|
||||||
|
disabled={isUploading}>开始上传</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog >
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,5 +1,196 @@
|
|||||||
|
'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 { 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 { toast } from 'sonner';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu"
|
||||||
|
import { UploadManager } from './components/UploadManager';
|
||||||
|
|
||||||
|
|
||||||
|
const formatSizeNumber = (n: number) => {
|
||||||
|
const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
|
||||||
|
for (const [i, u] of unit.entries()) {
|
||||||
|
if (n < 1024 ** (i + 1)) {
|
||||||
|
if (i <= 0) {
|
||||||
|
return `${(n)}${unit[i]}`;
|
||||||
|
} else {
|
||||||
|
return `${(n / 1024 ** i).toFixed(2)}${unit[i]}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FileItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
size: number;// Byte
|
||||||
|
lastModified: Date;
|
||||||
|
isChecked: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
const { stsTokenData, isLoading, error, store } = useOssStore();
|
||||||
|
|
||||||
|
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 checkedFileIds = useMemo(() => {
|
||||||
|
if (!fileList) return null;
|
||||||
|
return fileList.filter(i => i.isChecked).map(i => i.id);
|
||||||
|
}, [fileList])
|
||||||
|
|
||||||
|
|
||||||
|
const handleDeleteCheckedFiles = async () => {
|
||||||
|
if (!store || !stsTokenData) return toast.error('初始化未完成或失败，请等待或重新加载');
|
||||||
|
const deleteFiles = (fileList || []).filter(i => i.isChecked);
|
||||||
|
if (!deleteFiles) return toast.error('请选择需要删除的文件');
|
||||||
|
|
||||||
|
let failedCount = 0;
|
||||||
|
for (let item of deleteFiles) {
|
||||||
|
await deleteFile(item.name).catch(e => { failedCount++; return e; });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (failedCount > 0) {
|
||||||
|
toast.warning(`删除完成，共有${failedCount}个文件删除失败`)
|
||||||
|
} else {
|
||||||
|
toast.success(`${deleteFiles.length}个文件删除完成`)
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownloadFile = async (fileItem: FileItem) => {
|
||||||
|
downloadFile(fileItem.name);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>storage</div>
|
<div>
|
||||||
|
<div>
|
||||||
|
<Button variant='secondary' size='icon' className='cursor-pointer' onClick={() => handleRefreshFileList()}><RefreshCcw /></Button>
|
||||||
|
</div>
|
||||||
|
<div className='mt-1 flex gap-2'>
|
||||||
|
<UploadManager
|
||||||
|
store={store}
|
||||||
|
basePath={stsTokenData && `/tone-page/${stsTokenData.userId}`}
|
||||||
|
handleRefreshFileList={handleRefreshFileList}
|
||||||
|
>
|
||||||
|
<Button variant='default' className='cursor-pointer'><Upload />上传</Button>
|
||||||
|
</UploadManager>
|
||||||
|
<Button
|
||||||
|
variant='destructive'
|
||||||
|
className='cursor-pointer'
|
||||||
|
disabled={(checkedFileIds?.length || 0) <= 0}
|
||||||
|
onClick={() => handleDeleteCheckedFiles()}
|
||||||
|
><Delete />删除</Button>
|
||||||
|
</div>
|
||||||
|
<Table>
|
||||||
|
<TableCaption>
|
||||||
|
{(isLoading || (fileList == null && !error)) && <div>加载中...</div>}
|
||||||
|
{error && <div>{`${error}`}</div>}
|
||||||
|
{fileList && fileList.length === 0 && <div>暂无文件</div>}
|
||||||
|
</TableCaption>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className='w-10'></TableHead>
|
||||||
|
<TableHead>文件名</TableHead>
|
||||||
|
<TableHead>文件大小</TableHead>
|
||||||
|
<TableHead>上次修改时间</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{
|
||||||
|
fileList && fileList.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={() => handleDownloadFile(d)}><Download />下载</DropdownMenuItem>
|
||||||
|
{/* <DropdownMenuItem><Edit />编辑</DropdownMenuItem> */}
|
||||||
|
<DropdownMenuItem onClick={() => handleDeleteFile(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 >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
32
tone-page-web/components/ui/checkbox.tsx
Normal file
32
tone-page-web/components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { CheckIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Checkbox({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
data-slot="checkbox"
|
||||||
|
className={cn(
|
||||||
|
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
data-slot="checkbox-indicator"
|
||||||
|
className="flex items-center justify-center text-current transition-none"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-3.5" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
276
tone-page-web/components/ui/menubar.tsx
Normal file
276
tone-page-web/components/ui/menubar.tsx
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as MenubarPrimitive from "@radix-ui/react-menubar"
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Menubar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Root
|
||||||
|
data-slot="menubar"
|
||||||
|
className={cn(
|
||||||
|
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
|
||||||
|
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
|
||||||
|
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
|
||||||
|
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarTrigger({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Trigger
|
||||||
|
data-slot="menubar-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarContent({
|
||||||
|
className,
|
||||||
|
align = "start",
|
||||||
|
alignOffset = -4,
|
||||||
|
sideOffset = 8,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<MenubarPortal>
|
||||||
|
<MenubarPrimitive.Content
|
||||||
|
data-slot="menubar-content"
|
||||||
|
align={align}
|
||||||
|
alignOffset={alignOffset}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</MenubarPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
|
||||||
|
inset?: boolean
|
||||||
|
variant?: "default" | "destructive"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Item
|
||||||
|
data-slot="menubar-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.CheckboxItem
|
||||||
|
data-slot="menubar-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.CheckboxItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.RadioItem
|
||||||
|
data-slot="menubar-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.RadioItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
|
||||||
|
inset?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Label
|
||||||
|
data-slot="menubar-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Separator
|
||||||
|
data-slot="menubar-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="menubar-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
|
||||||
|
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.SubTrigger
|
||||||
|
data-slot="menubar-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||||
|
</MenubarPrimitive.SubTrigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.SubContent
|
||||||
|
data-slot="menubar-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Menubar,
|
||||||
|
MenubarPortal,
|
||||||
|
MenubarMenu,
|
||||||
|
MenubarTrigger,
|
||||||
|
MenubarContent,
|
||||||
|
MenubarGroup,
|
||||||
|
MenubarSeparator,
|
||||||
|
MenubarLabel,
|
||||||
|
MenubarItem,
|
||||||
|
MenubarShortcut,
|
||||||
|
MenubarCheckboxItem,
|
||||||
|
MenubarRadioGroup,
|
||||||
|
MenubarRadioItem,
|
||||||
|
MenubarSub,
|
||||||
|
MenubarSubTrigger,
|
||||||
|
MenubarSubContent,
|
||||||
|
}
|
||||||
31
tone-page-web/components/ui/progress.tsx
Normal file
31
tone-page-web/components/ui/progress.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Progress({
|
||||||
|
className,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
data-slot="progress"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
data-slot="progress-indicator"
|
||||||
|
className="bg-primary h-full w-full flex-1 transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Progress }
|
||||||
26
tone-page-web/hooks/admin/web/blog/use-oss-store.ts
Normal file
26
tone-page-web/hooks/admin/web/blog/use-oss-store.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { useOssSts } from "@/hooks/oss/use-oss-sts";
|
||||||
|
import OSS from "ali-oss";
|
||||||
|
|
||||||
|
export function useOssStore() {
|
||||||
|
const { stsTokenData, isLoading, error } = useOssSts();
|
||||||
|
|
||||||
|
return {
|
||||||
|
stsTokenData,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
store: stsTokenData ? new OSS({
|
||||||
|
region: 'oss-cn-chengdu',
|
||||||
|
bucket: 'tone-personal',
|
||||||
|
accessKeyId: stsTokenData.AccessKeyId,
|
||||||
|
accessKeySecret: stsTokenData.AccessKeySecret,
|
||||||
|
stsToken: stsTokenData.SecurityToken,
|
||||||
|
refreshSTSToken: () => new Promise(resolve => {
|
||||||
|
resolve({
|
||||||
|
accessKeyId: stsTokenData.AccessKeyId,
|
||||||
|
accessKeySecret: stsTokenData.AccessKeySecret,
|
||||||
|
stsToken: stsTokenData.SecurityToken,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
}) : undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
20
tone-page-web/hooks/oss/use-oss-sts.ts
Normal file
20
tone-page-web/hooks/oss/use-oss-sts.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { OssApi } from "@/lib/api";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
export function useOssSts() {
|
||||||
|
const { data: stsTokenData, isLoading, error } = useSWR(
|
||||||
|
'/api/oss/sts',
|
||||||
|
() => OssApi.getStsToken(),
|
||||||
|
{
|
||||||
|
shouldRetryOnError: false,
|
||||||
|
refreshInterval: 59 * 60 * 1000,
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
stsTokenData,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
}
|
||||||
|
}
|
||||||
11
tone-page-web/lib/api/oss/index.ts
Normal file
11
tone-page-web/lib/api/oss/index.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import fetcher from "../fetcher";
|
||||||
|
|
||||||
|
export async function getStsToken() {
|
||||||
|
return fetcher<{
|
||||||
|
AccessKeyId: string;
|
||||||
|
AccessKeySecret: string;
|
||||||
|
Expiration: string;// ISO 8601 格式
|
||||||
|
SecurityToken: string;
|
||||||
|
userId: string;
|
||||||
|
}>('/api/oss/sts', { method: 'GET' });
|
||||||
|
}
|
||||||
@@ -11,20 +11,25 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-alert-dialog": "^1.1.13",
|
"@radix-ui/react-alert-dialog": "^1.1.13",
|
||||||
"@radix-ui/react-avatar": "^1.1.7",
|
"@radix-ui/react-avatar": "^1.1.7",
|
||||||
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.10",
|
"@radix-ui/react-collapsible": "^1.1.10",
|
||||||
"@radix-ui/react-dialog": "^1.1.11",
|
"@radix-ui/react-dialog": "^1.1.11",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.14",
|
"@radix-ui/react-dropdown-menu": "^2.1.14",
|
||||||
"@radix-ui/react-hover-card": "^1.1.11",
|
"@radix-ui/react-hover-card": "^1.1.11",
|
||||||
"@radix-ui/react-label": "^2.1.4",
|
"@radix-ui/react-label": "^2.1.4",
|
||||||
|
"@radix-ui/react-menubar": "^1.1.15",
|
||||||
"@radix-ui/react-navigation-menu": "^1.2.10",
|
"@radix-ui/react-navigation-menu": "^1.2.10",
|
||||||
"@radix-ui/react-popover": "^1.1.11",
|
"@radix-ui/react-popover": "^1.1.11",
|
||||||
|
"@radix-ui/react-progress": "^1.1.7",
|
||||||
"@radix-ui/react-select": "^2.2.4",
|
"@radix-ui/react-select": "^2.2.4",
|
||||||
"@radix-ui/react-separator": "^1.1.6",
|
"@radix-ui/react-separator": "^1.1.6",
|
||||||
"@radix-ui/react-slot": "^1.2.0",
|
"@radix-ui/react-slot": "^1.2.0",
|
||||||
"@radix-ui/react-tooltip": "^1.2.6",
|
"@radix-ui/react-tooltip": "^1.2.6",
|
||||||
"@tailwindcss/postcss": "^4.1.7",
|
"@tailwindcss/postcss": "^4.1.7",
|
||||||
|
"@types/ali-oss": "^6.16.11",
|
||||||
"add": "^2.0.6",
|
"add": "^2.0.6",
|
||||||
"alert": "^6.0.2",
|
"alert": "^6.0.2",
|
||||||
|
"ali-oss": "^6.23.0",
|
||||||
"badge": "^1.0.3",
|
"badge": "^1.0.3",
|
||||||
"base-x": "^5.0.1",
|
"base-x": "^5.0.1",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
@@ -38,6 +43,7 @@
|
|||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"pagination": "^0.4.6",
|
"pagination": "^0.4.6",
|
||||||
"popover": "^2.4.1",
|
"popover": "^2.4.1",
|
||||||
|
"proxy-agent": "^6.5.0",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
|
|||||||
1063
tone-page-web/pnpm-lock.yaml
generated
1063
tone-page-web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user