CategoryItems组件增加日期格式化功能
This commit is contained in:
parent
b5d04a867d
commit
66041bc17c
@ -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>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user