From 84a5066097168598134f9efab1b4a1d4be068ad7 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Thu, 8 May 2025 16:31:48 +0800
Subject: [PATCH] add

---
 apps/web/src/app/main/help/VideoContent.tsx | 121 +++++++++++++-------
 1 file changed, 79 insertions(+), 42 deletions(-)

diff --git a/apps/web/src/app/main/help/VideoContent.tsx b/apps/web/src/app/main/help/VideoContent.tsx
index 3800758..31152a1 100755
--- a/apps/web/src/app/main/help/VideoContent.tsx
+++ b/apps/web/src/app/main/help/VideoContent.tsx
@@ -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">