216 lines
8.3 KiB
JavaScript
216 lines
8.3 KiB
JavaScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Navigation, Pagination } from "swiper/modules";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import PropTypes from "prop-types";
|
|
|
|
export default function CategoryItems({ pagetype = "", category = "", category_slug = "" , count = 8, columns = 4, title = "", subtitle = "" }) {
|
|
const [posts, setPosts] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({ pagetype });
|
|
if (category) params.append("category", category);
|
|
if (count !== undefined && count !== null) params.append("count", count);
|
|
const res = await fetch(`/api/get-listview-data?${params.toString()}`);
|
|
const json = await res.json();
|
|
if (Array.isArray(json.data)) {
|
|
setPosts(json.data);
|
|
} else {
|
|
setPosts([]);
|
|
}
|
|
} catch (e) {
|
|
setPosts([]);
|
|
}
|
|
setLoading(false);
|
|
}
|
|
fetchData();
|
|
}, [pagetype, category, count]);
|
|
|
|
// 渲染卡片内容
|
|
function renderCardImage(post, idx) {
|
|
// 多图轮播
|
|
if (Array.isArray(post.images) && post.images.length > 1) {
|
|
return (
|
|
<Swiper
|
|
className="swiper"
|
|
modules={[Navigation, Pagination]}
|
|
pagination={{ clickable: true, el: `.spdb${idx}` }}
|
|
navigation={{ prevEl: `.snbpb${idx}`, nextEl: `.snbnb${idx}` }}
|
|
>
|
|
{post.images.map((img, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<Image
|
|
className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
|
|
alt={post.title || "image"}
|
|
src={img}
|
|
width={960}
|
|
height={600}
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
);
|
|
}
|
|
// 视频
|
|
if (post.video_src || post.videoId) {
|
|
if (post.video_src && (post.video_src.endsWith('.mp4') || post.video_src.startsWith('/files/'))) {
|
|
return (
|
|
<video controls className="w-full h-56 rounded-xl object-cover">
|
|
<source src={post.video_src} type="video/mp4" />
|
|
您的浏览器不支持视频播放。
|
|
</video>
|
|
);
|
|
}
|
|
const vid = post.videoId || (post.video_src && post.video_src.includes('youtube') ? post.video_src.split('embed/')[1] : null);
|
|
if (vid) {
|
|
return (
|
|
<iframe
|
|
className="w-full h-56 rounded-xl"
|
|
src={`https://www.youtube.com/embed/${vid}`}
|
|
title="YouTube video"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
// 单图
|
|
const img = post.image || (Array.isArray(post.images) && post.images[0]);
|
|
if (img) {
|
|
return (
|
|
<Image
|
|
className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
|
|
alt={post.title || "image"}
|
|
src={img}
|
|
width={960}
|
|
height={600}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getSummary(text, maxLen = 60) {
|
|
if (!text) return "";
|
|
// 中文：直接按字符截断
|
|
if (/[\u4e00-\u9fa5]/.test(text)) {
|
|
return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
|
|
}
|
|
// 英文：按字符截断，但不截断单词
|
|
if (text.length <= maxLen) return text;
|
|
let cut = text.slice(0, maxLen);
|
|
// 如果最后一个字符不是空格，向前找到最近的空格
|
|
if (!/\s/.test(text[maxLen])) {
|
|
const lastSpace = cut.lastIndexOf(" ");
|
|
if (lastSpace > 0) cut = cut.slice(0, lastSpace);
|
|
}
|
|
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-[300px]">
|
|
{/* 新增模块标题和副标题显示 */}
|
|
{(title || subtitle) && (
|
|
<div className="relative z-20 text-center mb-10 select-text">
|
|
{title && <h2 className="text-3xl font-bold mb-2">{title}</h2>}
|
|
{subtitle && <p className="text-lg text-gray-500">{subtitle}</p>}
|
|
</div>
|
|
)}
|
|
<div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} gap-6`}>
|
|
{loading ? (
|
|
<div className={`col-span-${columns} text-center py-12 text-gray-400`}>加载中...</div>
|
|
) : posts.length === 0 ? (
|
|
<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 ? `/${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">
|
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">
|
|
查看详情
|
|
</h5>
|
|
</figcaption>
|
|
</Link>
|
|
</figure>
|
|
{/* 文字内容 */}
|
|
<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]">
|
|
{post.additional_title}
|
|
</div>
|
|
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0">
|
|
<Link
|
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
|
href={post.slug ? `/${category_slug}/${post.slug}` : "#"}
|
|
>
|
|
{post.title}
|
|
</Link>
|
|
</h2>
|
|
</div>
|
|
<div className="!relative">
|
|
<p>{getSummary(post.subtitle)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))
|
|
)}
|
|
</div>
|
|
{/* 底部更多按钮 */}
|
|
{category_slug && (
|
|
<div className="text-center mt-8">
|
|
<a
|
|
href={`/${category_slug}`}
|
|
className="btn btn-lg btn-fuchsia !text-white !bg-[#1A1A1A] hover:text-white hover:bg-[#1A1A1A] hover:!border-[#1A1A1A] active:text-white active:bg-[#1A1A1A] active:border-[#1A1A1A] disabled:text-white disabled:bg-[#1A1A1A] disabled:border-[#1A1A1A] !rounded-[0.8rem] mx-1"
|
|
>
|
|
更多
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
CategoryItems.propTypes = {
|
|
pagetype: PropTypes.string,
|
|
category: PropTypes.string,
|
|
count: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.number
|
|
]),
|
|
columns: PropTypes.number,
|
|
category_slug: PropTypes.string,
|
|
title: PropTypes.string,
|
|
subtitle: PropTypes.string,
|
|
};
|