update

app/components/AnhuiSwiper.tsx

@@ -0,0 +1,171 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { register } from "swiper/element/bundle";
+import axios from "axios";
+import request from "@/app/lib/request";
+import { BaseResponse, PageData } from "@/app/types/base";
+import { Album } from "@/app/types/album";
+
+register();
+
+const albums = [
+  {
+    id: 28,
+    cid: 3,
+    name: "ah9.jpeg",
+    path: "/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
+    ext: "jpeg",
+    size: "40KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 27,
+    cid: 3,
+    name: "ah7.jpeg",
+    path: "/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
+    ext: "jpeg",
+    size: "4KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 26,
+    cid: 3,
+    name: "ah8.jpeg",
+    path: "/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg",
+    uri: `http://localhost:8082/api/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg`,
+    ext: "jpeg",
+    size: "29KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 25,
+    cid: 3,
+    name: "ah2.jpeg",
+    path: "/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg",
+    uri: `http://localhost:8082/api/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg`,
+    ext: "jpeg",
+    size: "26KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 24,
+    cid: 3,
+    name: "ah5.jpeg",
+    path: "/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
+    ext: "jpeg",
+    size: "22KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 23,
+    cid: 3,
+    name: "ah6.jpeg",
+    path: "/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
+    ext: "jpeg",
+    size: "22KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 22,
+    cid: 3,
+    name: "ah3.jpeg",
+    path: "/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
+    ext: "jpeg",
+    size: "14KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 21,
+    cid: 3,
+    name: "ah1.jpeg",
+    path: "/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
+    ext: "jpeg",
+    size: "9KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+  {
+    id: 20,
+    cid: 3,
+    name: "ah4.jpeg",
+    path: "/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
+    uri: "http://localhost:8082/api/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
+    ext: "jpeg",
+    size: "31KB",
+    createTime: "2023-11-01 10:40:15",
+    updateTime: "2023-11-01 10:40:15",
+  },
+];
+
+const AnhuiSwiper = () => {
+  // const [albums, setAlbums] = useState<Album[]>([]);
+  // useEffect(() => {
+  //   request
+  //     .get<never, BaseResponse<PageData<Album>>>(`/albums/albumList`, {
+  //       // baseURL: `${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}`,
+  //       baseURL: `http://localhost:8082/api}`,
+  //       params: {
+  //         cid: 3,
+  //       },
+  //     })
+  //     .then((res) => {
+  //       setAlbums(() => res.data.lists);
+  //     });
+  // }, []);
+  return (
+    <div className={"h-[205px] bg-white flex flex-col"}>
+      <div
+        className={
+          "bg-[#1f87e8] text-white h-[30px] pl-[5px] flex items-center"
+        }
+      >
+        安徽风采
+      </div>
+      <div className={"flex-1 h-0"}>
+        {/* @ts-ignore*/}
+        <swiper-container
+          effect={"coverflow"}
+          autoplay
+          slides-per-view="3"
+          loop
+          style={{
+            height: "100%",
+          }}
+        >
+          {/* @ts-ignore*/}
+          {albums.map((el) => (
+            // @ts-ignore
+            <swiper-slide
+              key={el.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <img
+                src={`${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}${el.path}`}
+              />
+              {/*@ts-ignore*/}
+            </swiper-slide>
+          ))}
+          {/* @ts-ignore */}
+        </swiper-container>
+      </div>
+    </div>
+  );
+};
+
+export default AnhuiSwiper;

app/components/ArticleBlock.tsx

@@ -4,6 +4,7 @@ import styles from "@/app/assets/page.module.css";
 import Link from "next/link";
 import request from "@/app/lib/request";
 import { listArticles } from "@/app/api/articles";
+import dayjs from "dayjs";
 
 interface ArticleLink {
   title: string;
@@ -17,12 +18,14 @@ const ArticleBlock = async ({
   height,
   category,
   linkPrefix,
+  showDate,
 }: {
   title: string;
   height?: number | string;
   width?: number | string;
   category: string;
   linkPrefix: string;
+  showDate?: boolean;
 }) => {
   const data = await listArticles({ cid: category });
   return (
@@ -31,23 +34,34 @@ const ArticleBlock = async ({
         width,
         height,
       }}
-      className={"flex flex-col"}
+      className={"flex flex-col overflow-hidden"}
     >
       <div
-        className={`title-bar flex items-center px-2 ${styles.articleBlockTitleBar}`}
+        className={`title-bar text-white flex items-center px-2 font-bold ${styles.articleBlockTitleBar} relative`}
       >
         <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
         <span className={"ml-2 text-[14px]"}>{title}</span>
+        <Link
+          className={"absolute right-3 text-white text-xs"}
+          href={`${linkPrefix}/pages/1`}
+        >
+          更多+
+        </Link>
       </div>
       <div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
         <ul>
           {data.lists.map((article) => (
-            <li className={"h-7 px-1 flex items-center"} key={article.id}>
+            <li className={"h-8"} key={article.id}>
               <Link
-                className={"w-full truncate text-xs"}
+                className={
+                  "w-full px-1 h-full flex items-center text-xs justify-between"
+                }
                 href={`${linkPrefix}/${article.id}`}
               >
-                {article.title}
+                <span className={"flex-1 truncate"}>{article.title}</span>
+                {showDate && (
+                  <span>{dayjs(article.createTime).format("YYYY-MM-DD")}</span>
+                )}
               </Link>
             </li>
           ))}

app/components/ArticleHeading.tsx

@@ -0,0 +1,9 @@
+const ArticleHeading = ({ text }: { text: string }) => {
+  return (
+    <h2 className={"text-center text-lg font-bold text-[#054786] mb-8"}>
+      {text}
+    </h2>
+  );
+};
+
+export default ArticleHeading;

app/components/ArticleLayout.tsx

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

app/components/ArticleList.module.scss

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

app/components/ArticleList.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { listArticles } from "@/app/api/articles";
+import styles from "./ArticleList.module.scss";
+import Link from "next/link";
+import Pagination from "@/app/components/Pagination";
+import dayjs from "dayjs";
+
+const ArticleList = async ({
+  cid,
+  pageNo,
+  title,
+}: {
+  title: string;
+  cid: string;
+  pageNo: number;
+}) => {
+  const data = await listArticles({
+    pageNo,
+    cid,
+    pageSize: 20,
+    sort: "new",
+  });
+  return (
+    <>
+      <h2 className={"text-[#0f6fca] text-sm"}>{title}</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={`../${article.id}`}
+            >
+              <span className={"flex-1 w-0 truncate"}>{article.title}</span>
+              <span>{dayjs(article.createTime).format("YYYY-MM-DD")}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <Pagination page={pageNo} total={data.count} perPage={20} />
+    </>
+  );
+};
+
+export default ArticleList;

app/components/ArticleRender.tsx

@@ -1,13 +1,11 @@
-import React from "react";
 import { ArticleDetail } from "@/app/types/article";
 import Link from "next/link";
+import ArticleHeading from "@/app/components/ArticleHeading";
 
-const ArticleContent = ({ article }: { article: ArticleDetail }) => {
+const ArticleRender = ({ article }: { article: ArticleDetail }) => {
   return (
     <div className={"h-full"}>
-      <h1 className={"text-[18px] text-[#054786] text-center font-bold"}>
-        {article.title}
-      </h1>
+      <ArticleHeading text={article.title} />
       <div dangerouslySetInnerHTML={{ __html: article.content }}></div>
       <div className={"bottom-nav mt-[27px] mb-[50px]"}>
         <div className={"prev"}>
@@ -33,4 +31,4 @@ const ArticleContent = ({ article }: { article: ArticleDetail }) => {
   );
 };
 
-export default ArticleContent;
+export default ArticleRender;

app/components/ArticleWithBreadcrumb.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import Breadcrumb, { BreadcrumbItem } from "@/app/components/Breadcrumb";
+
+const ArticleWithBreadcrumb = ({
+  breadcrumb,
+  children,
+}: {
+  breadcrumb: BreadcrumbItem[];
+  children: ReactNode;
+}) => {
+  return (
+    <div className={"flex flex-col h-full"}>
+      <Breadcrumb navigations={breadcrumb} />
+      <div className={"bg-white px-5 py-4 flex-1 mt-2"}>{children}</div>
+    </div>
+  );
+};
+
+export default ArticleWithBreadcrumb;

app/components/Breadcrumb.tsx

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

app/components/FriendLinks.module.scss

@@ -0,0 +1,3 @@
+.titleBar {
+  background: linear-gradient(160deg, rgba(151, 193, 233, 1) 44.73684210526316%, rgba(15, 111, 202, 1) 100%);;
+}

app/components/FriendLinks.tsx

@@ -0,0 +1,77 @@
+import Image from "next/image";
+import Link from "next/link";
+import pin from "@/app/assets/pin.png";
+import styles from "./FriendLinks.module.scss";
+
+const links = [
+  {
+    title: "中国科学院",
+    href: "https://www.cas.cn/",
+  },
+  {
+    title: "国家发改委",
+    href: "https://www.ndrc.gov.cn/",
+  },
+  {
+    title: "国家科技部",
+    href: "http://www.most.gov.cn/",
+  },
+  {
+    title: "安徽省发改委",
+    href: "http://fzggw.ah.gov.cn/",
+  },
+  {
+    title: "安徽省科技厅",
+    href: "http://kjt.ah.gov.cn/",
+  },
+  {
+    title: "中科院重庆研究院",
+    href: "http://www.cigit.cas.cn/",
+  },
+  {
+    title: "中科院成都文献情报中心",
+    href: "http://www.clas.ac.cn/",
+  },
+  {
+    title: "中国技术交易所",
+    href: "http://us.ctex.cn/",
+  },
+  {
+    title: "合肥市高新区",
+    href: "http://gxq.hefei.gov.cn/",
+  },
+  {
+    title: "合肥市发改委",
+    href: "http://hfdrc.hefei.gov.cn/",
+  },
+  {
+    title: "汇桔网",
+    href: "https://www.wtoip.com/",
+  },
+];
+const FriendLinks = () => {
+  return (
+    <div className={"h-[360px] bg-white"}>
+      <div
+        className={`title-bar text-black flex items-center px-2 font-bold ${styles.titleBar} relative`}
+      >
+        <Image width={30} height={30} src={pin} alt={"trumpet icon"} />
+        <span className={"ml-2 text-[14px]"}>友情链接</span>
+      </div>
+      <ul className={"p-4"}>
+        {links.map((link) => (
+          <li key={link.href} className={"flex"}>
+            <Link
+              href={link.href}
+              className={"flex items-center text-xs hover:underline h-7"}
+            >
+              • {link.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default FriendLinks;

app/components/LatestNews.tsx

@@ -0,0 +1,62 @@
+import { articleDetail, listArticles } from "@/app/api/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 text = window.document.createElement("div");
+  // text.innerHTML = article.content;
+  const content = htmlToText(article.content, {
+    // baseElements:{
+    //   selectors:['p']
+    // }
+    selectors: [{ selector: "img", format: "skip" }],
+  });
+  // const content = text.innerText;
+  return (
+    <div className={"h-[180px] bg-white p-2 flex"}>
+      <Link
+        href={`general-news/${lists[0].id}`}
+        className={"article-cover w-[207px]"}
+      >
+        <Image src={article.image} alt={""} />
+      </Link>
+      <div className={"w-0 flex-1 ml-1 relative"}>
+        <Link
+          href={`general-news/${lists[0].id}`}
+          className={"title block truncate text-[#186ab6] text-base"}
+        >
+          {article.title}
+        </Link>
+        <Link
+          href={`general-news/${lists[0].id}`}
+          className={"content text-xs line-clamp-4 leading-7"}
+        >
+          {content}
+        </Link>
+        <Link
+          href={"/general-news/pages/1"}
+          className={"text-xs text-[#ffc001] absolute left-0 bottom-0"}
+        >
+          更多新闻内容＞＞
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LatestNews;

app/components/LeftNav.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+
 import Image from "next/image";
 import circle from "@/app/assets/circle.png";
 import styles from "./LeftNav.module.scss";
@@ -10,7 +10,7 @@ const LeftNav = ({
   navigations,
   title,
 }: {
-  navigations: any[];
+  navigations?: any[];
   title: string;
 }) => {
   const pathname = usePathname();
@@ -24,12 +24,12 @@ const LeftNav = ({
         <Image src={circle} alt={"circle icon"} height={16} width={16} />
         <span className={"pl-2"}>{title}</span>
       </div>
-      {navigations.length > 0 && (
+      {(navigations?.length ?? 0) > 0 && (
         <div
           className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
         >
           <ul className={styles.navItems}>
-            {navigations.map((navigation) => (
+            {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 ${

app/components/MainNav.tsx

@@ -1,18 +1,42 @@
 "use client";
-import React from "react";
+import { navigations as orgNavigations } from "@/app/(introduce)/organization/(generally)/config";
+import { navigations as achieveNavigations } from "@/app/(introduce)/achievements-transformation/config";
+import { navigations as talentsNavigations } from "@/app/(introduce)/talents/config";
+import { navigations as academyNavigations } from "@/app/(articles)/academic-exchange/academic-events/pages/[pageIndex]/config";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 const navigations = [
   { title: "首页", href: "/" },
-  { title: "机构设置", href: "/organization/overview" },
-  { title: "人才队伍", href: "/talents/overview" },
-  { title: "科研进展", href: "#" },
-  { title: "科技成果", href: "#" },
-  { title: "学术交流", href: "#" },
-  { title: "成果转化服务", href: "#" },
-  { title: "中科院科技资源共享平台", href: "#" },
-  { title: "联系我们", href: "#" },
+  {
+    title: "机构设置",
+    href: "/organization/overview",
+    children: orgNavigations,
+  },
+  {
+    title: "人才队伍",
+    href: "/talents/overview",
+    children: talentsNavigations,
+  },
+  { title: "科研进展", href: "/research-progress/pages/1" },
+  { title: "科技成果", href: "/technological-achievements/pages/1" },
+  {
+    title: "学术交流",
+    href: "/academic-exchange/academic-events/pages/1",
+    children: academyNavigations,
+  },
+  {
+    title: "成果转化服务",
+    href: "/achievements-transformation/government-policy",
+    children: achieveNavigations,
+  },
+  {
+    title: "中科院科技资源共享平台",
+    href: "https://casshare.com/experts/index.jsp",
+    target: "_blank",
+  },
+  { title: "联系我们", href: "/contact-us" },
 ];
 
 const isActive = (link: string, current: string): boolean => {
@@ -25,13 +49,24 @@ const isActive = (link: string, current: string): boolean => {
 
 const MainNav = () => {
   const pathname = usePathname();
+  const [activePopup, setActivePopup] = useState(-1);
   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}>
+          <li
+            className={"relative"}
+            onMouseOver={() => {
+              setActivePopup(() => index);
+            }}
+            onMouseLeave={() => {
+              setActivePopup(() => -1);
+            }}
+            key={navigation.title + index}
+          >
             <Link
               href={navigation.href}
+              target={navigation.target}
               className={`${
                 isActive(navigation.href, pathname)
                   ? "text-[#dedede]"
@@ -40,6 +75,31 @@ const MainNav = () => {
             >
               {navigation.title}
             </Link>
+            {index === activePopup && navigation.children?.length && (
+              <div
+                className={`z-40 popup-menu min-w-[120px] absolute top-full left-1/2 -translate-x-1/2`}
+              >
+                <div
+                  className={
+                    "w-0 h-0 mx-auto border-b-[12px] border-l-[12px] border-r-[12px] border-b-[#b0d3eb] border-l-transparent border-r-transparent"
+                  }
+                ></div>
+                <ul className={"whitespace-nowrap bg-[#b0d3eb]"}>
+                  {navigation.children.map((child) => (
+                    <li key={child.href}>
+                      <Link
+                        className={
+                          "h-10 flex justify-center items-center text-[13px] px-2 hover:text-[#fe5722]"
+                        }
+                        href={child.href}
+                      >
+                        {child.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </li>
         ))}
       </ul>

app/components/Pagination.tsx

@@ -15,24 +15,33 @@ const Pagination = ({
       className={"w-full flex justify-center mt-2.5 h-10 items-center text-sm"}
     >
       {page <= 1 ? (
-        <div className={"prev mx-3"}>上一页</div>
+        <div className={"prev mx-3 text-gray-500 cursor-not-allowed"}>
+          上一页
+        </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>
-      ))}
+      {[...Array(pageCount)].map((el, index) =>
+        page === index + 1 ? (
+          <div key={index} className={`page-item mx-3 text-[#009fe9]`}>
+            {index + 1}
+          </div>
+        ) : (
+          <Link
+            className={"page-item mx-3 text-[#666666]"}
+            key={index}
+            href={`./${index + 1}`}
+          >
+            {index + 1}
+          </Link>
+        ),
+      )}
       {page >= pageCount ? (
-        <div className={"next mx-3"}>下一页</div>
+        <div className={"next mx-3 text-gray-500 cursor-not-allowed"}>
+          下一页
+        </div>
       ) : (
         <Link className={"next block mx-3"} href={`./${page + 1}`}>
           下一页