ud

src/components/layout/Article/index.module.css

@@ -1,16 +1,16 @@
 .article {
     width: 100%;
-    min-height: 100vh;
+    /* min-height: 100vh; */
     padding: 7.5rem 0;
 
-    .articleHeaderLine, .articleHeader, .articleContent {
+    .articleHeaderLine, .articleHeader, .articleContent, .articleBottomLine {
         width: 90%;
         margin: 0 auto;
     }
 
     .articleHeaderLine {
         height: 6.25rem;
-        border-bottom: .0625rem solid #222222;
+        border-bottom: 1px solid #222222;
         display: flex;
 
         .articleHeaderLineBack {
@@ -51,5 +51,14 @@
 
     .articleContent {
         font-size: 1.25rem;
+        min-height: 50vh;
+    }
+
+    .articleBottomLine {
+        border-top: 1px solid #222222;
+        margin-top: 9.375rem;
+        padding: 30px 0;
+        display: flex;
+        justify-content: space-between;
     }
 }

src/components/layout/Article/index.tsx

@@ -1,5 +1,5 @@
 import styles from "./index.module.css";
-
+import { dateFormat } from "@/utils";
 
 type Data = {
     title: string;
@@ -8,7 +8,16 @@ type Data = {
     content: string;
 }
 
-export default function Article({ data }: { data: Data }) {
+type Item = {
+    id: number;
+    title: string;
+}
+
+export default function Article({ data, prevItem, nextItem, setDetailId }: {
+    data: Data,
+    prevItem?: Item, nextItem?: Item,
+    setDetailId: (id: number) => void,
+}) {
     return (
         <div className={styles.article}>
             <div className={styles.articleHeaderLine}>
@@ -20,13 +29,17 @@ export default function Article({ data }: { data: Data }) {
             <div className={styles.articleHeader}>
                 <div className={styles.articleHeaderTitle}>{data.title}</div>
                 <div className={styles.articleHeaderTimeLine}>
-                    <span className={styles.articleHeaderTime}>发布时间：{data.createTime}</span>
+                    <span className={styles.articleHeaderTime}>发布时间：{dateFormat(data.createTime, 'yyyy-MM-dd')}</span>
                     <span className={styles.articleHeaderReadTimes}>阅读次数：{data.readTimes}</span>
                 </div>
             </div>
             <div className={styles.articleContent}>
                 <div className={styles.articleContentText} dangerouslySetInnerHTML={{ __html: data.content }}></div>
             </div>
+            <div className={styles.articleBottomLine}>
+                {prevItem && <div onClick={() => setDetailId(prevItem.id)}>上一篇：{prevItem.title}</div>}
+                {nextItem && <div onClick={() => setDetailId(nextItem.id)}>下一篇：{nextItem.title}</div>}
+            </div>
         </div>
     )
 }

src/layouts/Header.module.css

@@ -209,6 +209,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
+  font-weight: bold;
 }
 
 .searchBtn {

src/pages/News/Detail.tsx

@@ -1,9 +1,8 @@
 import Article from "@/components/layout/Article";
 import { useStore } from "@/store";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import appApi from "@/api/app";
-
 type NewsDetail = {
     id: number;
     title: string;
@@ -23,8 +22,8 @@ export default function NewsDetail() {
         return newsDetailList?.find((item) => item.lang.toLowerCase() === locale.split('-')[0]);
     }, [newsDetailList, locale]);
 
-    useEffect(() => {
+    const getNewsDetail = useCallback((id: string | number) => {
-        appApi.getNewsDetail(id).then((res) => {
+        id && appApi.getNewsDetail(id).then((res) => {
             const data = res.data.map((item: any) => {
                 return {
                     id: item.id,
@@ -37,12 +36,15 @@ export default function NewsDetail() {
             })
             setNewsDetailList(data)
         })
-    }, [id])
+    }, [])
 
+    useEffect(() => {
+        getNewsDetail(id)
+    }, [id])
 
     return (
         <div>
-            {newsDetail && <Article data={newsDetail} />}
+            {newsDetail && <Article data={newsDetail} setDetailId={(id) => getNewsDetail(id)}/>}
         </div>
     );
 }

src/pages/News/NewsPublic.tsx

@@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 import { useStore } from "@/store";
 import appApi from "@/api/app";
 import ScrollReveal from "@/components/ScrollReveal";
-
 type NewsItem = {
     id: number;
     title: string;

src/pages/Others/Search.tsx

@@ -48,6 +48,7 @@ export default function Search() {
             size,
             title: searchKeyword,
             category_id: categoryId,
+            sort: "create_time DESC",
         }).then((res) => {
             setSearched(true);
             const data = res.data.items.map((item: any) => {

src/proxy.cjs

@@ -10,7 +10,6 @@ console.log('isDev', isDev)
 module.exports = {
   '/companyHome': {
     target: isDev === 'true' ? 'http://10.3.0.7:9999/' : 'http://yintai.batiao8.com/',
-    // target: "http://10.3.0.24:9211/",
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/companyHome/, '')
   }

src/store/app.ts

@@ -1,13 +1,16 @@
 import { create } from "zustand";
 
+type Item = {
+    id: number;
+    title: string;
+}
+
 interface AppStoreState {
     screenOpened: boolean;
     setScreenOpened: (screenOpened: boolean) => void;
 }
 
-export const useAppStore = create<AppStoreState>()(
+export const useAppStore = create<AppStoreState>()(set => ({
-    (set) => ({
+    screenOpened: false,
-        screenOpened: false,
+    setScreenOpened: (screenOpened) => set({ screenOpened }),
-        setScreenOpened: (screenOpened) => set({ screenOpened }),
+}));
-    }),
-);

src/store/index.ts

@@ -21,7 +21,7 @@ interface StoreState {
         type: string;
     }[] | null;
     supportLocales: SupportLocale[];
-    token: string | null;
+    token: string | null;    
     setLocale: (locale: LocaleKey) => void;
     setAppConfig: (data: I18nData) => void;
     setCategoryList: (list: any[]) => void;