344 lines
11 KiB
TypeScript
344 lines
11 KiB
TypeScript
|
import React, { useState, useMemo } from "react";
|
||
|
|
import {
|
||
|
|
Tabs,
|
||
|
|
Button,
|
||
|
|
message,
|
||
|
|
Image,
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
Modal,
|
||
|
|
Input,
|
||
|
|
Alert,
|
||
|
|
} from "antd";
|
||
|
|
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
|
||
|
|
import { SendOutlined, DeleteOutlined, LoginOutlined } from "@ant-design/icons";
|
||
|
|
import { api } from "@nice/client";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
import { env } from "@web/src/env";
|
||
|
|
import { getFileIcon } from "@web/src/components/models/post/detail/utils";
|
||
|
|
import { formatFileSize, getCompressedImageUrl } from "@nice/utils";
|
||
|
|
import { ResourceDto, RoleName } from "packages/common/dist";
|
||
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||
|
|
const { TabPane } = Tabs;
|
||
|
|
|
||
|
|
export function VideoContent() {
|
||
|
|
const { isAuthenticated, user, hasSomePermissions } = useAuth();
|
||
|
|
const [fileIds, setFileIds] = useState<string[]>([]);
|
||
|
|
const [uploaderKey, setUploaderKey] = useState<number>(0);
|
||
|
|
// const [description, setDescription] = useState<string>('');
|
||
|
|
|
||
|
|
// 检查是否为域管理员
|
||
|
|
const isDomainAdmin = useMemo(() => {
|
||
|
|
return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF"); // 使用权限检查而不是角色名称
|
||
|
|
}, [hasSomePermissions]);
|
||
|
|
|
||
|
|
// 获取资源列表
|
||
|
|
const {
|
||
|
|
data: resources,
|
||
|
|
refetch,
|
||
|
|
}: { data: ResourceDto[]; refetch: () => void } =
|
||
|
|
api.resource.findMany.useQuery({
|
||
|
|
where: {
|
||
|
|
deletedAt: null,
|
||
|
|
postId: null,
|
||
|
|
},
|
||
|
|
orderBy: {
|
||
|
|
createdAt: "desc",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// 处理资源数据
|
||
|
|
const { imageResources, fileResources } = useMemo(() => {
|
||
|
|
if (!resources) return { imageResources: [], fileResources: [] };
|
||
|
|
const isImage = (url: string) => /\.(png|jpg|jpeg|gif|webp)$/i.test(url);
|
||
|
|
|
||
|
|
const processedResources = resources
|
||
|
|
.map((resource) => {
|
||
|
|
if (!resource?.url) return null;
|
||
|
|
const original = `http://${env.SERVER_IP}:${env.UPLOAD_PORT}/uploads/${resource.url}`;
|
||
|
|
const isImg = isImage(resource.url);
|
||
|
|
return {
|
||
|
|
...resource,
|
||
|
|
url: isImg ? getCompressedImageUrl(original) : original,
|
||
|
|
originalUrl: original,
|
||
|
|
isImage: isImg,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
.filter(Boolean);
|
||
|
|
|
||
|
|
return {
|
||
|
|
imageResources: processedResources.filter((res) => res.isImage),
|
||
|
|
fileResources: processedResources.filter((res) => !res.isImage),
|
||
|
|
};
|
||
|
|
}, [resources]);
|
||
|
|
|
||
|
|
const createMutation = api.resource.create.useMutation({});
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!isAuthenticated) {
|
||
|
|
message.error("请先登录");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isDomainAdmin) {
|
||
|
|
message.error("只有管理员才能上传文件");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!fileIds.length) {
|
||
|
|
message.error("请先上传文件");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
// 逐个上传文件，而不是使用 Promise.all
|
||
|
|
for (const fileId of fileIds) {
|
||
|
|
try {
|
||
|
|
await createMutation.mutateAsync({
|
||
|
|
data: {
|
||
|
|
fileId,
|
||
|
|
// description: description.trim(),
|
||
|
|
isPublic: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
if (
|
||
|
|
error instanceof Error &&
|
||
|
|
error.message.includes("Unique constraint failed")
|
||
|
|
) {
|
||
|
|
console.warn(`文件 ${fileId} 已存在，跳过`);
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
message.success("上传成功！");
|
||
|
|
setFileIds([]);
|
||
|
|
// setDescription('');
|
||
|
|
setUploaderKey((prev) => prev + 1);
|
||
|
|
refetch(); // 刷新列表
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error uploading:", error);
|
||
|
|
message.error("上传失败，请稍后重试");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 删除资源
|
||
|
|
const deleteMutation = api.resource.softDeleteByIds.useMutation();
|
||
|
|
|
||
|
|
const handleDelete = async (id: string) => {
|
||
|
|
if (!isAuthenticated) {
|
||
|
|
message.error("请先登录");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isDomainAdmin) {
|
||
|
|
message.error("只有域管理员才能删除文件");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log("Delete resource id:", id);
|
||
|
|
try {
|
||
|
|
const confirmed = await new Promise((resolve) => {
|
||
|
|
Modal.confirm({
|
||
|
|
title: "确认删除",
|
||
|
|
content: "确定要删除这个文件吗？此操作不可恢复。",
|
||
|
|
okText: "确认",
|
||
|
|
cancelText: "取消",
|
||
|
|
onOk: () => resolve(true),
|
||
|
|
onCancel: () => resolve(false),
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!confirmed) return;
|
||
|
|
|
||
|
|
await deleteMutation.mutateAsync({
|
||
|
|
ids: [id],
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Delete error:", error);
|
||
|
|
message.error("删除失败，请重试");
|
||
|
|
}
|
||
|
|
|
||
|
|
refetch();
|
||
|
|
message.success("删除成功");
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6">
|
||
|
|
<header className="rounded-t-xl bg-gradient-to-r from-primary to-primary-400 text-white p-6 relative mb-4">
|
||
|
|
<div className="flex flex-col space-b-1">
|
||
|
|
<h1>锦囊资源上传</h1>
|
||
|
|
<p>支持视频、图片、文档、PPT等多种格式文件</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{!isAuthenticated && (
|
||
|
|
<Alert
|
||
|
|
message="请先登录"
|
||
|
|
description="您需要登录后才能查看和管理文件资源"
|
||
|
|
type="warning"
|
||
|
|
showIcon
|
||
|
|
className="mb-4"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{isAuthenticated && !isDomainAdmin && (
|
||
|
|
<Alert
|
||
|
|
message="权限不足"
|
||
|
|
description="只有管理员才能上传和管理文件资源"
|
||
|
|
type="warning"
|
||
|
|
showIcon
|
||
|
|
className="mb-4"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 上传区域 */}
|
||
|
|
<div className="space-y-4">
|
||
|
|
<Tabs defaultActiveKey="1">
|
||
|
|
<TabPane>
|
||
|
|
<div
|
||
|
|
className={`relative rounded-xl border hover:ring-1 ring-white transition-all duration-300 ease-in-out bg-slate-100 ${!isDomainAdmin ? " pointer-events-none" : ""}`}
|
||
|
|
>
|
||
|
|
<TusUploader
|
||
|
|
key={uploaderKey}
|
||
|
|
value={fileIds}
|
||
|
|
onChange={(value) => {
|
||
|
|
if (!isDomainAdmin) {
|
||
|
|
message.error("只有管理员才能上传文件");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setFileIds(value);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{/* {!isDomainAdmin && (
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 rounded-xl">
|
||
|
|
<span className="text-white font-medium">
|
||
|
|
只有管理员才能使用上传功能
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)} */}
|
||
|
|
</div>
|
||
|
|
</TabPane>
|
||
|
|
</Tabs>
|
||
|
|
{isDomainAdmin && fileIds.length > 0 && (
|
||
|
|
<div className="flex items-center justify-end gap-2">
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
onClick={handleSubmit}
|
||
|
|
className="flex items-center space-x-2 bg-primary"
|
||
|
|
icon={<SendOutlined />}
|
||
|
|
>
|
||
|
|
上传
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 文件展示区域 */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* 图片资源展示 */}
|
||
|
|
{imageResources?.length > 0 && (
|
||
|
|
<div className="rounded-xl border p-4 bg-white">
|
||
|
|
<h3 className="text-lg font-medium mb-4">图片列表</h3>
|
||
|
|
<Row gutter={[16, 16]}>
|
||
|
|
<Image.PreviewGroup>
|
||
|
|
{imageResources.map((resource) => (
|
||
|
|
<Col key={resource.url} xs={12} sm={8} md={6} lg={4}>
|
||
|
|
<div className="relative aspect-square rounded-lg overflow-hidden flex items-center justify-center bg-gray-100">
|
||
|
|
<Image
|
||
|
|
src={resource.url}
|
||
|
|
alt={resource.title}
|
||
|
|
preview={{
|
||
|
|
src: resource.originalUrl,
|
||
|
|
}}
|
||
|
|
className="object-contain w-full h-full"
|
||
|
|
/>
|
||
|
|
<div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent">
|
||
|
|
<div className="flex items-center justify-between text-white">
|
||
|
|
<span className="text-sm truncate">
|
||
|
|
{resource.title}
|
||
|
|
</span>
|
||
|
|
{isDomainAdmin && (
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
className="text-white hover:text-red-500"
|
||
|
|
icon={<DeleteOutlined />}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
handleDelete(resource.id);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
))}
|
||
|
|
</Image.PreviewGroup>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 其他文件资源展示 */}
|
||
|
|
{fileResources?.length > 0 && (
|
||
|
|
<div className="rounded-xl border p-4 bg-white">
|
||
|
|
<h3 className="text-lg font-medium mb-4">文件列表</h3>
|
||
|
|
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{fileResources.map((resource) => (
|
||
|
|
<div
|
||
|
|
key={resource.url}
|
||
|
|
className="flex items-center p-3 rounded-lg border hover:shadow-md transition-shadow"
|
||
|
|
>
|
||
|
|
<div className="text-primary-600 text-2xl mr-3">
|
||
|
|
{getFileIcon(resource.url)}
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="font-medium truncate">
|
||
|
|
{resource.title || "未命名文件"}
|
||
|
|
</div>
|
||
|
|
{resource.description && (
|
||
|
|
<div className="text-xs text-gray-500 mt-1">
|
||
|
|
描述: {resource.description}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="text-xs text-gray-500 flex items-center gap-2">
|
||
|
|
<span>
|
||
|
|
{dayjs(resource.createdAt).format("YYYY-MM-DD")}
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
{resource.meta?.size &&
|
||
|
|
formatFileSize(resource.meta.size)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
onClick={() => window.open(resource.url)}
|
||
|
|
>
|
||
|
|
下载
|
||
|
|
</Button>
|
||
|
|
{isDomainAdmin && (
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
size="small"
|
||
|
|
danger
|
||
|
|
icon={<DeleteOutlined />}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
handleDelete(resource.id);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|