update

app/(articles)/announcements/[articleId]/layout.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import ArticleLayout from "@/app/components/ArticleLayout";
-import Breadcrumb from "@/app/components/Breadcrumb";
 
 const Layout = ({
   children,
@@ -12,10 +11,7 @@ const Layout = ({
 }) => {
   return (
     <ArticleLayout leftNavTitle={"新闻详情"} navigations={[]}>
-      <div className={"flex flex-col h-full"}>
-        <Breadcrumb navigations={[]} />
-        <div className={"bg-white px-5 py-4 flex-1 mt-2"}>{children}</div>
-      </div>
+      {children}
     </ArticleLayout>
   );
 };

app/(articles)/announcements/[articleId]/page.tsx

@@ -1,5 +1,6 @@
 import { articleDetail } from "@/app/api/articles";
-import ArticleContent from "@/app/components/ArticleContent";
+import ArticleRender from "@/app/components/ArticleRender";
+import ArticleWithBreadcrumb from "@/app/components/ArticleWithBreadcrumb";
 
 export default async function Article({
   params,
@@ -9,5 +10,15 @@ export default async function Article({
   };
 }) {
   const data = await articleDetail({ id: params.articleId });
-  return <ArticleContent article={data} />;
+  return (
+    <ArticleWithBreadcrumb
+      breadcrumb={[
+        { title: "首页", href: "/" },
+        { title: "公告通知", href: "/announcements/pages/1" },
+        { title: data.title, href: `/announcements/${data.id}` },
+      ]}
+    >
+      <ArticleRender article={data} />
+    </ArticleWithBreadcrumb>
+  );
 }

app/(articles)/announcements/pages/[pageIndex]/layout.tsx

@@ -1,19 +1,19 @@
 import { ReactNode } from "react";
 import ArticleLayout from "@/app/components/ArticleLayout";
-import Breadcrumb from "@/app/components/Breadcrumb";
+import { BreadcrumbItem } from "@/app/components/Breadcrumb";
+import ArticleWithBreadcrumb from "@/app/components/ArticleWithBreadcrumb";
+
+const breadcrumb: BreadcrumbItem[] = [
+  { title: "首页", href: "/" },
+  { title: "公告通知", href: "/announcements/pages/1" },
+];
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <ArticleLayout navigations={[]} leftNavTitle={"公告通知"}>
-      <div className={"flex flex-col h-full"}>
-        <Breadcrumb
-          navigations={[
-            { title: "首页", href: "/" },
-            { title: "公告通知", href: "/announcements/pages/1" },
-          ]}
-        />
-        <div className={"bg-white px-5 py-4 flex-1 mt-2"}>{children}</div>
-      </div>
+      <ArticleWithBreadcrumb breadcrumb={breadcrumb}>
+        {children}
+      </ArticleWithBreadcrumb>
     </ArticleLayout>
   );
 };

app/(articles)/announcements/pages/[pageIndex]/page.tsx

@@ -1,8 +1,4 @@
-import { listArticles } from "@/app/api/articles";
-import { Fragment } from "react";
-import styles from "./styles.module.scss";
-import Link from "next/link";
-import Pagination from "@/app/components/Pagination";
+import ArticleList from "@/app/components/ArticleList";
 
 const Page = async ({
   params,
@@ -11,31 +7,10 @@ const Page = async ({
     pageIndex: string;
   };
 }) => {
-  const data = await listArticles({
-    cid: "3",
-    pageNo: params.pageIndex,
-    pageSize: 20,
-  });
+  const { pageIndex } = params;
   return (
     <div>
-      <h2 className={"text-[#0f6fca] text-sm"}>公告通知</h2>
-      <ul className={`${styles.articles} mt-5`}>
-        {data.lists.map((article, index) => (
-          <li className={`${styles.article}`} key={article.id}>
-            <Link
-              className={"flex h-8 text-sm text-[#666666] items-center"}
-              href={`/announcements/${article.id}`}
-            >
-              {article.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
-      <Pagination
-        page={parseInt(params.pageIndex)}
-        total={data.count}
-        perPage={20}
-      />
+      <ArticleList title={"公告通知"} cid={"3"} pageNo={parseInt(pageIndex)} />
     </div>
   );
 };

app/(articles)/announcements/pages/[pageIndex]/styles.module.scss

@@ -1,7 +0,0 @@
-.articles {
-  .article {
-    &:not(:last-child) {
-      border-bottom: 1px dashed #000;
-    }
-  }
-}