From 271f2e081e9aea49e43233fc0c51191d08861db2 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Fri, 9 May 2025 10:01:51 +0800
Subject: [PATCH] add

---
 apps/web/src/app/main/help/VideoContent.tsx   |   5 +-
 .../app/main/help/example/ExampleContent.tsx  |   2 +-
 .../app/main/help/news/PublicityContent.tsx   |   2 +-
 .../app/main/help/science/ScienceContent.tsx  |   2 +-
 .../models/post/list/LetterList.tsx           | 265 +++++++++++-------
 5 files changed, 169 insertions(+), 107 deletions(-)

diff --git a/apps/web/src/app/main/help/VideoContent.tsx b/apps/web/src/app/main/help/VideoContent.tsx
index 31152a1..0654616 100755
--- a/apps/web/src/app/main/help/VideoContent.tsx
+++ b/apps/web/src/app/main/help/VideoContent.tsx
@@ -67,7 +67,10 @@ export function VideoContent() {
     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"] },
+    video: {
+      label: "音视频",
+      extensions: ["mp4", "avi", "mov", "webm", "mp3", "wav", "ogg"],
+    },
     archive: { label: "压缩包", extensions: ["zip", "rar", "7z"] },
   };
 
diff --git a/apps/web/src/app/main/help/example/ExampleContent.tsx b/apps/web/src/app/main/help/example/ExampleContent.tsx
index f034dcd..a9fbb8b 100755
--- a/apps/web/src/app/main/help/example/ExampleContent.tsx
+++ b/apps/web/src/app/main/help/example/ExampleContent.tsx
@@ -14,7 +14,7 @@ export function ExampleContent() {
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [searchTerm, setSearchTerm] = useState("");
-  const pageSize = 6; // 每页显示5条案例
+  const pageSize = 10; // 每页显示5条案例
   const isDomainAdmin = useMemo(() => {
     return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF");
   }, [hasSomePermissions]);
diff --git a/apps/web/src/app/main/help/news/PublicityContent.tsx b/apps/web/src/app/main/help/news/PublicityContent.tsx
index abd30d6..e785dff 100755
--- a/apps/web/src/app/main/help/news/PublicityContent.tsx
+++ b/apps/web/src/app/main/help/news/PublicityContent.tsx
@@ -14,7 +14,7 @@ export function PublicityContent() {
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [searchTerm, setSearchTerm] = useState("");
-  const pageSize = 6; // 每页显示5条新闻
+  const pageSize = 10; // 每页显示5条新闻
   const isDomainAdmin = useMemo(() => {
     return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF");
   }, [hasSomePermissions]);
diff --git a/apps/web/src/app/main/help/science/ScienceContent.tsx b/apps/web/src/app/main/help/science/ScienceContent.tsx
index 7ba3c3d..9c9d74c 100755
--- a/apps/web/src/app/main/help/science/ScienceContent.tsx
+++ b/apps/web/src/app/main/help/science/ScienceContent.tsx
@@ -14,7 +14,7 @@ export function ScienceContent() {
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [searchTerm, setSearchTerm] = useState("");
-  const pageSize = 6; // 每页显示5条科普
+  const pageSize = 10; // 每页显示5条科普
   const isDomainAdmin = useMemo(() => {
     return hasSomePermissions("MANAGE_DOM_STAFF", "MANAGE_ANY_STAFF");
   }, [hasSomePermissions]);
diff --git a/apps/web/src/components/models/post/list/LetterList.tsx b/apps/web/src/components/models/post/list/LetterList.tsx
index 4e03e6e..48a9211 100755
--- a/apps/web/src/components/models/post/list/LetterList.tsx
+++ b/apps/web/src/components/models/post/list/LetterList.tsx
@@ -1,121 +1,180 @@
 import { useState, useEffect, useMemo } from "react";
-import { Input, Pagination, Empty, Spin } from "antd";
+import { Input, Pagination, Empty, Spin, Radio, Space, Tag } from "antd";
 import { api, RouterInputs } from "@nice/client";
 import { LetterCard } from "../LetterCard";
 import { NonVoid } from "@nice/utils";
-import { SearchOutlined } from "@ant-design/icons";
+import { SearchOutlined, FilterOutlined } from "@ant-design/icons";
 import debounce from "lodash/debounce";
 import { postDetailSelect } from "@nice/common";
+
 export default function LetterList({
-    params,
-    search = ''
+  params,
+  search = "",
 }: {
-    search?: string,
-    params: NonVoid<RouterInputs["post"]["findManyWithPagination"]>;
+  search?: string;
+  params: NonVoid<RouterInputs["post"]["findManyWithPagination"]>;
 }) {
-    const [keyword, setKeyword] = useState<string | undefined>('');
-    const [currentPage, setCurrentPage] = useState(1);
-    useEffect(() => {
+  const [keyword, setKeyword] = useState<string | undefined>("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
 
-        setKeyword(search || '')
-    }, [search])
-    const { data, isLoading } = api.post.findManyWithPagination.useQuery({
-        page: currentPage,
-        pageSize: params.pageSize,
-        where: {
-            OR: [
-                {
-                    title: {
-                        contains: keyword,
-                    },
-                },
-            ],
-            ...params?.where,
-        },
-        orderBy: {
-            updatedAt: "desc",
-        },
-        select: {
-            ...postDetailSelect,
-            ...params.select,
-        },
-    });
+  const { data: categoriesData } = api.term.findMany.useQuery({
+    where: {
+      taxonomy: {
+        slug: "category",
+      },
+    },
+  });
 
-    const debouncedSearch = useMemo(
-        () =>
-            debounce((value: string) => {
-                setKeyword(value);
-                setCurrentPage(1);
-            }, 300),
-        []
-    );
-    // Cleanup debounce on unmount
-    useEffect(() => {
-        return () => {
-            debouncedSearch.cancel();
-        };
-    }, [debouncedSearch]);
-    const handleSearch = (value: string) => {
-        debouncedSearch(value);
+  const categoryOptions = useMemo(() => {
+    const options = [{ value: "all", label: "全部分类" }];
+    if (categoriesData) {
+      categoriesData.forEach((category) => {
+        options.push({
+          value: category.id,
+          label: category.name,
+        });
+      });
+    }
+    return options;
+  }, [categoriesData]);
+
+  useEffect(() => {
+    setKeyword(search || "");
+  }, [search]);
+
+  const { data, isLoading } = api.post.findManyWithPagination.useQuery({
+    page: currentPage,
+    pageSize: params.pageSize,
+    where: {
+      OR: [
+        {
+          title: {
+            contains: keyword,
+          },
+        },
+      ],
+      ...(selectedCategory !== "all"
+        ? {
+            terms: {
+              some: {
+                id: selectedCategory,
+              },
+            },
+          }
+        : {}),
+      ...params?.where,
+    },
+    orderBy: {
+      updatedAt: "desc",
+    },
+    select: {
+      ...postDetailSelect,
+      ...params.select,
+    },
+  });
+
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((value: string) => {
+        setKeyword(value);
+        setCurrentPage(1);
+      }, 300),
+    []
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
     };
+  }, [debouncedSearch]);
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
-        // Scroll to top when page changes
-        window.scrollTo({ top: 0, behavior: "smooth" });
-    };
+  const handleSearch = (value: string) => {
+    debouncedSearch(value);
+  };
 
-    return (
-        <div className="flex flex-col h-full">
-            {/* Search Bar */}
-            <div className="p-6 transition-all ">
-                <Input
-                    value={keyword}
-                    variant="filled"
-                    className="w-full bg-white"
-                    placeholder="搜索信件标题..."
-                    allowClear
-                    size="large"
-                    onChange={(e) => handleSearch(e.target.value)}
-                    prefix={<SearchOutlined className="text-gray-400" />}
-                />
-            </div>
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
 
-            {/* Content Area */}
-            <div className="flex-grow  px-6">
-                {isLoading ? (
-                    <div className="flex justify-center items-center pt-6">
-                        <Spin size="large"></Spin>
-                    </div>
-                ) : data?.items.length ? (
-                    <>
-                        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4 mb-6">
-                            {data.items.map((letter: any) => (
-                                <LetterCard key={letter.id} letter={letter} />
-                            ))}
-                        </div>
-                        <div className="flex justify-center pb-6">
-                            <Pagination
-                                current={currentPage}
-                                total={data.totalCount}
-                                pageSize={params.pageSize}
-                                onChange={handlePageChange}
-                                showSizeChanger={false}
-                                showQuickJumper
-                            />
-                        </div>
-                    </>
-                ) : (
-                    <div className="flex flex-col justify-center items-center pt-6">
-                        <Empty
+  const handleCategoryChange = (value: string) => {
+    setSelectedCategory(value);
+    setCurrentPage(1);
+  };
 
-                            description={
-                                keyword ? "未找到相关信件" : "暂无信件"
-                            }
-                        />
-                    </div>
-                )}
-            </div>
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-6 transition-all">
+        <div className="flex items-center mb-4">
+          <Radio.Group
+            value={selectedCategory}
+            onChange={(e) => handleCategoryChange(e.target.value)}
+            optionType="button"
+            buttonStyle="solid"
+            className="flex-wrap"
+          >
+            {categoryOptions.map((option) => (
+              <Radio.Button
+                key={option.value}
+                value={option.value}
+                className="my-1"
+              >
+                {option.label}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
         </div>
-    );
+
+        <Space direction="vertical" className="w-full" size="middle">
+          <Input
+            value={keyword}
+            variant="filled"
+            className="w-full bg-white"
+            placeholder="搜索信件标题..."
+            allowClear
+            size="large"
+            onChange={(e) => handleSearch(e.target.value)}
+            prefix={<SearchOutlined className="text-gray-400" />}
+          />
+        </Space>
+      </div>
+
+      <div className="flex-grow px-6">
+        {isLoading ? (
+          <div className="flex justify-center items-center pt-6">
+            <Spin size="large"></Spin>
+          </div>
+        ) : data?.items.length ? (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4 mb-6">
+              {data.items.map((letter: any) => (
+                <LetterCard key={letter.id} letter={letter} />
+              ))}
+            </div>
+            <div className="flex justify-center pb-6">
+              <Pagination
+                current={currentPage}
+                total={data.totalCount}
+                pageSize={params.pageSize}
+                onChange={handlePageChange}
+                showSizeChanger={false}
+                showQuickJumper
+              />
+            </div>
+          </>
+        ) : (
+          <div className="flex flex-col justify-center items-center pt-6">
+            <Empty
+              description={
+                keyword || selectedCategory !== "all"
+                  ? "未找到相关信件"
+                  : "暂无信件"
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }