caszl-next/app/_components/LatestNews.tsx

import { articleDetail, listArticles } from "@/app/_services/articles";
import Link from "next/link";
import Image from "next/image";
import { htmlToText } from "html-to-text";

const LatestNews = async () => {
  const { lists } = await listArticles({
    pageNo: 1,
    cid: "4",
    pageSize: 1,
    sort: "new",
  });
  if (!lists?.length) {
    return <></>;
  }
  const { id } = lists[0];
  const article = await articleDetail({
    id: `${id}`,
  });

  const content = htmlToText(article.content, {
    selectors: [{ selector: "img", format: "skip" }],
  });

  return (
    <div className={"flex h-[180px] bg-white p-2"}>
      <Link
        href={`general-news/${lists[0].id}`}
        className={"article-cover w-[207px]"}
      >
        <img
          className={"h-full w-full object-cover"}
          src={
            article.image
              ? `${
                  process.env.NEXT_PUBLIC_CLIENT_BASE_URL
                }${article.image.match(/\/uploads\/.*/)?.[0]}`
              : undefined
          }
          alt={""}
        />
      </Link>
      <div className={"relative ml-1 w-0 flex-1"}>
        <Link
          href={`general-news/${lists[0].id}`}
          className={"title block truncate text-base text-[#186ab6]"}
        >
          {article.title}
        </Link>
        <Link
          href={`general-news/${lists[0].id}`}
          className={"content line-clamp-4 text-xs leading-7"}
        >
          {content}
        </Link>
        <Link
          href={"/general-news/pages/1"}
          className={"absolute bottom-0 left-0 text-xs text-[#ffc001]"}
        >
          更多新闻内容＞＞
        </Link>
      </div>
    </div>
  );
};

export default LatestNews;