update

app/components/ArticleContent.tsx

@@ -1,13 +1,34 @@
 import React from "react";
 import { ArticleDetail } from "@/app/types/article";
+import Link from "next/link";
 
 const ArticleContent = ({ article }: { article: ArticleDetail }) => {
   return (
-    <div className={"px-5 py-4 h-full"}>
+    <div className={"h-full"}>
       <h1 className={"text-[18px] text-[#054786] text-center font-bold"}>
         {article.title}
       </h1>
       <div dangerouslySetInnerHTML={{ __html: article.content }}></div>
+      <div className={"bottom-nav mt-[27px] mb-[50px]"}>
+        <div className={"prev"}>
+          <span className={"text-base"}>上一篇</span>
+          <Link
+            className={"text-sm text-[#666] ml-8"}
+            href={`./${article.prev?.id}`}
+          >
+            {article.prev?.title ?? "没有了"}
+          </Link>
+        </div>
+        <div className={"next mt-8"}>
+          <span className={"text-base"}>下一篇</span>
+          <Link
+            className={"text-sm text-[#666] ml-8"}
+            href={`./${article.next?.id}`}
+          >
+            {article.next?.title ?? "没有了"}
+          </Link>
+        </div>
+      </div>
     </div>
   );
 };

app/components/ArticleLayout.tsx

@@ -15,7 +15,7 @@ const ArticleLayout = ({
       <div className={"left-side w-[325px]"}>
         <LeftNav navigations={navigations} title={leftNavTitle} />
       </div>
-      <div className={"flex-1 ml-3 bg-white"}>{children}</div>
+      <div className={"flex-1 ml-3"}>{children}</div>
     </div>
   );
 };

app/components/Breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { Fragment } from "react";
+import Link from "next/link";
+
+interface BreadcrumbItem {
+  href: string;
+  title: string;
+}
+
+const Breadcrumb = ({ navigations }: { navigations: BreadcrumbItem[] }) => {
+  return (
+    <div className={"flex text-xs text-[#13426e]"}>
+      <span className={"mr-2"}>当前位置:</span>
+      {navigations.map((navigation, index) => {
+        if (index === navigations.length - 1) {
+          return <div key={navigation.href}>{navigation.title}</div>;
+        } else {
+          return (
+            <Fragment key={navigation.href}>
+              <Link href={navigation.href}>{navigation.title}</Link>
+              <div className={"mx-2"}>/</div>
+            </Fragment>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default Breadcrumb;

app/components/LeftNav.tsx

@@ -15,7 +15,11 @@ const LeftNav = ({
 }) => {
   const pathname = usePathname();
   return (
-    <div className={"left-nav min-h-[600px] bg-[#d7ecfd] rounded shadow pt-2"}>
+    <div
+      className={
+        "left-nav min-h-[600px] h-full bg-[#d7ecfd] rounded shadow pt-2"
+      }
+    >
       <div className={"flex items-center pl-2 h-7"}>
         <Image src={circle} alt={"circle icon"} height={16} width={16} />
         <span className={"pl-2"}>{title}</span>

app/components/MainNav.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navigations = [
+  { title: "首页", href: "/" },
+  { title: "机构设置", href: "/organization/overview" },
+  { title: "人才队伍", href: "/talents/overview" },
+  { title: "科研进展", href: "#" },
+  { title: "科技成果", href: "#" },
+  { title: "学术交流", href: "#" },
+  { title: "成果转化服务", href: "#" },
+  { title: "中科院科技资源共享平台", href: "#" },
+  { title: "联系我们", href: "#" },
+];
+
+const isActive = (link: string, current: string): boolean => {
+  if (link === current) return true;
+  if (link === "/") return false;
+  const link_0 = link.split(/\/+/).filter(Boolean)[0];
+  const current_0 = current.split(/\/+/).filter(Boolean)[0];
+  return link_0 === current_0;
+};
+
+const MainNav = () => {
+  const pathname = usePathname();
+  return (
+    <nav className={"main-nav bg-[#1958a7] h-[38px]"}>
+      <ul className={"w-full h-full flex"}>
+        {navigations.map((navigation, index) => (
+          <li key={navigation.title + index}>
+            <Link
+              href={navigation.href}
+              className={`${
+                isActive(navigation.href, pathname)
+                  ? "text-[#dedede]"
+                  : "text-white"
+              } hover:text-[#dedede] text-sm h-[38px] flex justify-center items-center min-w-[60px] mx-2.5`}
+            >
+              {navigation.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default MainNav;

app/components/Pagination.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+const Pagination = ({
+  page,
+  total,
+  perPage,
+}: {
+  page: number;
+  total: number;
+  perPage: number;
+}) => {
+  const pageCount = Math.ceil(total / perPage);
+  return (
+    <div
+      className={"w-full flex justify-center mt-2.5 h-10 items-center text-sm"}
+    >
+      {page <= 1 ? (
+        <div className={"prev mx-3"}>上一页</div>
+      ) : (
+        <Link className={"next block mx-3"} href={`./${page - 1}`}>
+          上一页
+        </Link>
+      )}
+      {[...Array(pageCount)].map((el, index) => (
+        <div
+          key={index}
+          className={`page-item mx-3 ${
+            page === index + 1 ? "text-[#009fe9]" : "text-[#666666]"
+          }`}
+        >
+          {index + 1}
+        </div>
+      ))}
+      {page >= pageCount ? (
+        <div className={"next mx-3"}>下一页</div>
+      ) : (
+        <Link className={"next block mx-3"} href={`./${page + 1}`}>
+          下一页
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;