update

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

@@ -1,7 +1,4 @@
 import { ReactNode } from "react";
-import circle from "@/app/assets/circle.png";
-import Image from "next/image";
-import LeftNav from "@/app/components/LeftNav";
 import ArticleLayout from "@/app/components/ArticleLayout";
 
 const navLinks = [
@@ -20,7 +17,11 @@ const Layout = ({
     articleId: string;
   };
 }) => {
-  return <ArticleLayout>{children}</ArticleLayout>;
+  return (
+    <ArticleLayout leftNavTitle={"新闻详情"} navigations={[]}>
+      {children}
+    </ArticleLayout>
+  );
 };
 
 export default Layout;

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

@@ -9,9 +9,5 @@ export default async function Article({
   };
 }) {
   const data = await articleDetail({ id: params.articleId });
-  return (
-    <div className={"ml-2.5"}>
-      <ArticleContent article={data} />
-    </div>
-  );
+  return <ArticleContent article={data} />;
 }

app/(introduce)/talents/academician/page.tsx

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>院士</div>;
+};
+
+export default Page;

app/(introduce)/talents/layout.tsx

@@ -0,0 +1,19 @@
+import ArticleLayout from "@/app/components/ArticleLayout";
+import { ReactNode } from "react";
+
+const navigations = [
+  { title: "人才概览", href: "/talents/overview" },
+  { title: "两院院士", href: "/talents/academician" },
+  { title: "研究员", href: "/talents/researcher" },
+  { title: "副研究员", href: "/talents/vice-researcher" },
+];
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <ArticleLayout leftNavTitle={"人才队伍"} navigations={navigations}>
+      {children}
+    </ArticleLayout>
+  );
+};
+
+export default Layout;

app/(introduce)/talents/researcher/page.tsx

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>研究员</div>;
+};
+
+export default Page;

app/(introduce)/talents/vice-researcher/page.tsx

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>副研究员</div>;
+};
+
+export default Page;

app/components/ArticleContent.tsx

@@ -3,7 +3,7 @@ import { ArticleDetail } from "@/app/types/article";
 
 const ArticleContent = ({ article }: { article: ArticleDetail }) => {
   return (
-    <div className={"bg-white px-5 py-4 h-full"}>
+    <div className={"px-5 py-4 h-full"}>
       <h1 className={"text-[18px] text-[#054786] text-center font-bold"}>
         {article.title}
       </h1>

app/components/ArticleLayout.tsx

@@ -3,17 +3,19 @@ import { ReactNode } from "react";
 
 const ArticleLayout = ({
   children,
-  navs,
+  navigations,
+  leftNavTitle,
 }: {
   children: ReactNode;
-  navs: any;
+  navigations: any[];
+  leftNavTitle: string;
 }) => {
   return (
     <div className={"flex bg-[#6bb7f6] p-2.5"}>
       <div className={"left-side w-[325px]"}>
-        <LeftNav />
+        <LeftNav navigations={navigations} title={leftNavTitle} />
       </div>
-      <div className={"flex-1"}>{children}</div>
+      <div className={"flex-1 ml-3 bg-white"}>{children}</div>
     </div>
   );
 };

app/components/LeftNav.tsx

@@ -1,54 +1,47 @@
+"use client";
 import React from "react";
 import Image from "next/image";
 import circle from "@/app/assets/circle.png";
 import styles from "./LeftNav.module.scss";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
-const LeftNav = () => {
+const LeftNav = ({
+  navigations,
+  title,
+}: {
+  navigations: any[];
+  title: string;
+}) => {
+  const pathname = usePathname();
   return (
-    <div className={"left-nav min-h-[600px] bg-[#d7ecfd] rounded shadow"}>
-      <div className={"flex items-center pl-2"}>
+    <div className={"left-nav min-h-[600px] 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"}>新闻详情</span>
-      </div>
-      <div
-        className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
-      >
-        <ul className={styles.navItems}>
-          <li>
-            <Link
-              className={"text-sm px-[9px] py-[7px] block text-white"}
-              href={"/"}
-            >
-              人才概况
-            </Link>
-          </li>
-          <li>
-            <Link
-              className={"text-sm px-[9px] py-[7px] block text-white"}
-              href={"/"}
-            >
-              人才概况
-            </Link>
-          </li>
-          <li>
-            <Link
-              className={"text-sm px-[9px] py-[7px] block text-white"}
-              href={"/"}
-            >
-              人才概况
-            </Link>
-          </li>
-          <li>
-            <Link
-              className={"text-sm px-[9px] py-[7px] block text-white"}
-              href={"/"}
-            >
-              人才概况
-            </Link>
-          </li>
-        </ul>
+        <span className={"pl-2"}>{title}</span>
       </div>
+      {navigations.length > 0 && (
+        <div
+          className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
+        >
+          <ul className={styles.navItems}>
+            {navigations.map((navigation) => (
+              <li key={navigation.href}>
+                <Link
+                  className={`text-sm px-[9px] h-[34px] flex items-center font-bold transition-all hover:text-[#fff176] hover:text-xs ${
+                    navigation.href === pathname
+                      ? "text-[#fff176] text-xs"
+                      : "text-white"
+                  }`}
+                  href={navigation.href}
+                >
+                  {navigation.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 };

app/layout.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 const navLinks = [
   { title: "首页", href: "/" },
   { title: "机构设置", href: "#" },
-  { title: "人才队伍", href: "#" },
+  { title: "人才队伍", href: "/talents/overview" },
   { title: "科研进展", href: "#" },
   { title: "科技成果", href: "#" },
   { title: "学术交流", href: "#" },