add
This commit is contained in:
parent
89102d7f8c
commit
84a5066097
|
|
@ -10,6 +10,9 @@ import {
|
|||
Input,
|
||||
Alert,
|
||||
Pagination,
|
||||
Select,
|
||||
Space,
|
||||
Tag,
|
||||
} from "antd";
|
||||
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
|
||||
import { SendOutlined, DeleteOutlined, LoginOutlined } from "@ant-design/icons";
|
||||
|
|
@ -27,6 +30,7 @@ export function VideoContent() {
|
|||
const [fileIds, setFileIds] = useState<string[]>([]);
|
||||
const [uploaderKey, setUploaderKey] = useState<number>(0);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [fileType, setFileType] = useState<string>("all");
|
||||
|
||||
// 分页状态
|
||||
const [imagePage, setImagePage] = useState(1);
|
||||
|
|
@ -43,18 +47,31 @@ export function VideoContent() {
|
|||
data: resources,
|
||||
refetch,
|
||||
isLoading,
|
||||
}: { data: ResourceDto[]; refetch: () => void; isLoading: boolean } =
|
||||
api.resource.findMany.useQuery({
|
||||
where: {
|
||||
deletedAt: null,
|
||||
postId: null,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
}: {
|
||||
data: ResourceDto[];
|
||||
refetch: () => void;
|
||||
isLoading: boolean;
|
||||
} = api.resource.findMany.useQuery({
|
||||
where: {
|
||||
deletedAt: null,
|
||||
postId: null,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
// 处理资源数据
|
||||
// 定义常见文件类型和它们的扩展名
|
||||
const fileTypes = {
|
||||
all: { label: "全部", extensions: [] },
|
||||
document: { label: "文档", extensions: ["doc", "docx", "pdf", "txt"] },
|
||||
spreadsheet: { label: "表格", extensions: ["xls", "xlsx", "csv"] },
|
||||
presentation: { label: "ppt", extensions: ["ppt", "pptx"] },
|
||||
video: { label: "音视频", extensions: ["mp4", "avi", "mov", "webm","mp3", "wav", "ogg"] },
|
||||
archive: { label: "压缩包", extensions: ["zip", "rar", "7z"] },
|
||||
};
|
||||
|
||||
// 修改资源处理逻辑，加入文件类型筛选
|
||||
const { imageResources, fileResources, imagePagination, filePagination } =
|
||||
useMemo(() => {
|
||||
if (!resources) {
|
||||
|
|
@ -74,10 +91,11 @@ export function VideoContent() {
|
|||
const original = `http://${env.SERVER_IP}:${env.UPLOAD_PORT}/uploads/${resource.url}`;
|
||||
const isImg = isImage(resource.url);
|
||||
|
||||
// 确保 title 存在，优先使用 resource.title，然后是 resource.meta.filename
|
||||
// 提取文件扩展名
|
||||
const extension = resource.url.split(".").pop()?.toLowerCase() || "";
|
||||
|
||||
const displayTitle =
|
||||
resource.title || resource.meta?.filename || "未命名文件";
|
||||
// 用于搜索的名称，确保从 meta.filename 获取（如果存在）
|
||||
const searchableFilename = resource.meta?.filename || "";
|
||||
|
||||
return {
|
||||
|
|
@ -85,20 +103,27 @@ export function VideoContent() {
|
|||
url: isImg ? getCompressedImageUrl(original) : original,
|
||||
originalUrl: original,
|
||||
isImage: isImg,
|
||||
title: displayTitle, // 用于显示
|
||||
searchableFilename: searchableFilename, // 用于搜索
|
||||
title: displayTitle,
|
||||
searchableFilename: searchableFilename,
|
||||
extension: extension,
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
// 根据搜索词筛选文件资源 (基于 searchableFilename)
|
||||
const filteredFileResources = processedResources.filter(
|
||||
(res) =>
|
||||
!res.isImage &&
|
||||
res.searchableFilename
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase())
|
||||
);
|
||||
// 根据搜索词和文件类型筛选
|
||||
const filteredFileResources = processedResources.filter((res) => {
|
||||
// 首先检查是否符合搜索词
|
||||
const matchesSearch = res.searchableFilename
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
|
||||
// 然后检查文件类型
|
||||
const matchesType =
|
||||
fileType === "all" ||
|
||||
fileTypes[fileType]?.extensions.includes(res.extension);
|
||||
|
||||
return !res.isImage && matchesSearch && matchesType;
|
||||
});
|
||||
|
||||
const allImageResources = processedResources.filter((res) => res.isImage);
|
||||
|
||||
|
|
@ -124,7 +149,7 @@ export function VideoContent() {
|
|||
data: filteredFileResources,
|
||||
},
|
||||
};
|
||||
}, [resources, imagePage, filePage, searchTerm]); // searchTerm 作为依赖项
|
||||
}, [resources, imagePage, filePage, searchTerm, fileType]); // 添加fileType依赖
|
||||
|
||||
const createMutation = api.resource.create.useMutation({});
|
||||
const handleSubmit = async () => {
|
||||
|
|
@ -223,13 +248,31 @@ export function VideoContent() {
|
|||
<p>支持视频、excel、文档、ppt等多种格式文件</p>
|
||||
</div>
|
||||
</header>
|
||||
<Input.Search
|
||||
placeholder="搜索文件名"
|
||||
allowClear
|
||||
onSearch={(value) => setSearchTerm(value)}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
/>
|
||||
<div className="flex flex-wrap items-center gap-4 mb-4">
|
||||
<Input.Search
|
||||
placeholder="搜索文件名"
|
||||
allowClear
|
||||
onSearch={(value) => setSearchTerm(value)}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={fileType}
|
||||
onChange={(value) => setFileType(value)}
|
||||
style={{ width: 120 }}
|
||||
options={Object.entries(fileTypes).map(([key, { label }]) => ({
|
||||
value: key,
|
||||
label: label,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{/* {fileType !== "all" && (
|
||||
<Tag color="blue" closable onClose={() => setFileType("all")}>
|
||||
{fileTypes[fileType]?.label}
|
||||
</Tag>
|
||||
)} */}
|
||||
</div>
|
||||
{!isAuthenticated && (
|
||||
<Alert
|
||||
message="请先登录"
|
||||
|
|
@ -373,20 +416,20 @@ export function VideoContent() {
|
|||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">
|
||||
{resource.title}
|
||||
{resource.meta?.filename}
|
||||
</div>
|
||||
{resource.description && (
|
||||
{/* {resource.meta?.filetype && (
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
描述: {resource.description}
|
||||
类型: {resource.meta?.filetype}
|
||||
</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)}
|
||||
formatFileSize(resource.meta?.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -416,12 +459,6 @@ export function VideoContent() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{fileResources.length === 0 && searchTerm && (
|
||||
<div className="text-center py-4 text-gray-500">
|
||||
未找到匹配 "{searchTerm}" 的文件。
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 文件分页 */}
|
||||
{filePagination.total > pageSize && (
|
||||
<div className="flex justify-center mt-6">
|
||||
|
|
|
|||
Loading…
Reference in New Issue