From 66041bc17c7e4e337961b3f59fbaa5935b210756 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 18 Jun 2025 15:58:30 +0800
Subject: [PATCH] =?UTF-8?q?CategoryItems=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=97=A5=E6=9C=9F=E6=A0=BC=E5=BC=8F=E5=8C=96=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.jsx                               |  2 +-
 components/homes/home-15/CategoryItems.jsx | 78 +++++++++-------------
 2 files changed, 33 insertions(+), 47 deletions(-)

diff --git a/app/page.jsx b/app/page.jsx
index 22c0562..41bb75b 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -41,7 +41,7 @@ export default function Page() {
           </section>
           <section className="wrapper !bg-[#ffffff] ">
             <div className="w-full">
-            <CategoryItems pagetype="Jsite Project" category="案例" />
+            <CategoryItems pagetype="Jsite Project" category="案例" category_slug="case" count={12} columns={4} />
             <PageItems page_slug="case" page_size={5} columns={5} />
             </div>
           </section>
diff --git a/components/homes/home-15/CategoryItems.jsx b/components/homes/home-15/CategoryItems.jsx
index a4edce8..0af6ca2 100644
--- a/components/homes/home-15/CategoryItems.jsx
+++ b/components/homes/home-15/CategoryItems.jsx
@@ -6,13 +6,8 @@ import Link from "next/link";
 import Image from "next/image";
 import PropTypes from "prop-types";
 
-const PAGE_SIZE = 8; // 每页8条，4列2行
-const PAGE_SLUG = "case"; // 博客slug常量
-
-export default function CategoryItems({ pagetype = "", category = "", count = undefined }) {
+export default function CategoryItems({ pagetype = "", category = "", category_slug = "" , count = 8, columns = 4 }) {
   const [posts, setPosts] = useState([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -22,49 +17,22 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
         const params = new URLSearchParams({ pagetype });
         if (category) params.append("category", category);
         if (count !== undefined && count !== null) params.append("count", count);
-        params.append("page", currentPage);
-        params.append("page_size", PAGE_SIZE);
         const res = await fetch(`/api/get-listview-data?${params.toString()}`);
         const json = await res.json();
         if (Array.isArray(json.data)) {
           setPosts(json.data);
-          setTotalPages(Math.ceil((json.total || json.data.length || 0) / PAGE_SIZE));
         } else {
           setPosts([]);
-          setTotalPages(1);
         }
       } catch (e) {
         setPosts([]);
-        setTotalPages(1);
       }
       setLoading(false);
     }
     fetchData();
-  }, [currentPage, pagetype, category, count]);
+  }, [pagetype, category, count]);
 
-  // 分页控件
-  function PaginationComp() {
-    if (totalPages <= 1) return null;
-    return (
-      <nav className="flex justify-center mt-8" aria-label="pagination">
-        <ul className="pagination flex gap-2">
-          {Array.from({ length: totalPages }).map((_, idx) => (
-            <li key={idx}>
-              <button
-                className={`px-3 py-1 rounded ${currentPage === idx + 1 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700"}`}
-                onClick={() => setCurrentPage(idx + 1)}
-                disabled={currentPage === idx + 1}
-              >
-                {idx + 1}
-              </button>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    );
-  }
-
-  // 渲染卡片内容（只返回图片部分，结构在下方article里）
+  // 渲染卡片内容
   function renderCardImage(post, idx) {
     // 多图轮播
     if (Array.isArray(post.images) && post.images.length > 1) {
@@ -128,7 +96,7 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
     return null;
   }
 
-  function getSummary(text, maxLen = 100) {
+  function getSummary(text, maxLen = 60) {
     if (!text) return "";
     // 中文：直接按字符截断
     if (/[\u4e00-\u9fa5]/.test(text)) {
@@ -145,20 +113,39 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
     return cut + "...";
   }
 
+  // 日期格式化函数，支持自定义是否显示时分秒
+  function formatDate(dateStr, options = {}) {
+    if (!dateStr) return "";
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    const { showTime = false } = options;
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    let result = `${yyyy}-${mm}-${dd}`;
+    if (showTime) {
+      const hh = String(d.getHours()).padStart(2, '0');
+      const min = String(d.getMinutes()).padStart(2, '0');
+      const ss = String(d.getSeconds()).padStart(2, '0');
+      result += ` ${hh}:${min}:${ss}`;
+    }
+    return result;
+  }
+
   return (
     <div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto my-[150px]">
-      <div className="blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} gap-6`}>
         {loading ? (
-          <div className="col-span-4 text-center py-12 text-gray-400">加载中...</div>
+          <div className={`col-span-${columns} text-center py-12 text-gray-400`}>加载中...</div>
         ) : posts.length === 0 ? (
-          <div className="col-span-4 text-center py-12 text-gray-400">暂无数据</div>
+          <div className={`col-span-${columns} text-center py-12 text-gray-400`}>暂无数据</div>
         ) : (
           posts.map((post, idx) => (
             <article key={post.slug || post.id || idx} className="post !mb-8">
               <div className="card">
                 {/* 图片/轮播/视频部分 */}
                 <figure className="card-img-top overlay overlay-1 hover-scale group">
-                  <Link href={post.slug ? `/${PAGE_SLUG}/${post.slug}` : "#"} className="block relative">
+                  <Link href={post.slug ? `/${category_slug}/${post.slug}` : "#"} className="block relative">
                     {renderCardImage(post, idx)}
                     <span className="bg"></span>
                     <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
@@ -172,14 +159,14 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
                 <div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
                   <div className="post-header !mb-[.9rem]">
                     <div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
-                      <a href="#" className="hover" rel="category">
+                      <a href={`/${category_slug}`} className="hover" rel="category">
                         {post.category || ""}
                       </a>
                     </div>
                     <h2 className="post-title !mt-1 !leading-[1.35] !mb-0">
                       <Link
                         className="!text-[#343f52] hover:!text-[#3f78e0]"
-                        href={post.slug ? `/${PAGE_SLUG}/${post.slug}` : "#"}
+                        href={post.slug ? `/${category_slug}/${post.slug}` : "#"}
                       >
                         {post.title}
                       </Link>
@@ -194,14 +181,12 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
                   <ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
                     <li className="post-date inline-block">
                       <i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\\e9ba']" />
-                      <span>{post.date || post.published_at || ""}</span>
+                      <span>{formatDate(post.creation)}</span>
                     </li>
                     {post.author && (
                       <li className="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
-                        <a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
                           <i className="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\\ed6f']" />
                           <span>{post.author}</span>
-                        </a>
                       </li>
                     )}
                     {typeof post.comments === 'number' && (
@@ -227,7 +212,6 @@ export default function CategoryItems({ pagetype = "", category = "", count = un
           ))
         )}
       </div>
-      <PaginationComp />
     </div>
   );
 }
@@ -239,4 +223,6 @@ CategoryItems.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
+  columns: PropTypes.number,
+  category_slug: PropTypes.string,
 };