ud

src/components/YearPicker/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import styles from "./YearPicker.module.css";
+import { useStore } from "@/store";
 
 export type YearPickerProps = {
   value?: number | null;
@@ -26,6 +27,7 @@ export default function YearPicker({
   className,
   disabled = false,
 }: YearPickerProps) {
+  const locale = useStore((s) => s.locale);
   const [open, setOpen] = useState(false);
   const [decadeStart, setDecadeStart] = useState(() =>
     getDecadeStart(value ?? currentYear)
@@ -91,7 +93,7 @@ export default function YearPicker({
         }}
       >
         <span className={styles.text}>
-          {value != null ? `${value}年` : placeholder}
+          {value != null ? `${value}${locale === "zh-CN" ? "年" : ""}` : placeholder}
         </span>
         <div className={styles.icons}>
           <img className={`${styles.arrow} ${open ? styles.arrowOpen : ""}`} src="/images/icons/icon-arrow-down.png" alt="arrow-down" style={{ width: "1.5rem", height: "1.5rem" }} />

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

@@ -60,6 +60,14 @@
         padding: 30px 0;
         display: flex;
         justify-content: space-between;
+
+        & > div {
+            cursor: pointer;
+        }
+    }
+
+    .articleBottomLineNone {
+        border: none;
     }
 }
 

src/components/layout/Article/index.tsx

@@ -1,5 +1,6 @@
 import styles from "./index.module.css";
 import { dateFormat } from "@/utils";
+import { useStore } from "@/store";
 
 type Data = {
     title: string;
@@ -18,27 +19,39 @@ export default function Article({ data, prevItem, nextItem, setDetailId }: {
     prevItem?: Item, nextItem?: Item,
     setDetailId: (id: number) => void,
 }) {
+    const appConfig = useStore((s) => s.appConfig);
+    const {
+        back = "返回",
+        publishTime = "发布时间",
+        readTimes = "阅读次数",
+        prevArticle = "上一篇",
+        nextArticle = "下一篇",
+    } = appConfig?.__global__?.others || {};
     return (
         <div className={styles.article}>
             <div className={styles.articleHeaderLine}>
                 <div className={styles.articleHeaderLineBack} onClick={() => window.history.back()}>
                     <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "1.25rem", height: "1.25rem" }} />
-                    <span>返回</span>
+                    <span>{back}</span>
                 </div>
             </div>
             <div className={styles.articleHeader}>
                 <div className={styles.articleHeaderTitle}>{data.title}</div>
                 <div className={styles.articleHeaderTimeLine}>
-                    <span className={styles.articleHeaderTime}>发布时间：{dateFormat(data.createTime, 'yyyy-MM-dd')}</span>
+                    <span className={styles.articleHeaderTime}>{publishTime}：{dateFormat(data.createTime, 'yyyy-MM-dd')}</span>
-                    <span className={styles.articleHeaderReadTimes}>阅读次数：{data.readTimes}</span>
+                    <span className={styles.articleHeaderReadTimes}>{readTimes}：{data.readTimes}</span>
                 </div>
             </div>
             <div className={styles.articleContent}>
                 <div className={styles.articleContentText} dangerouslySetInnerHTML={{ __html: data.content }}></div>
             </div>
-            <div className={styles.articleBottomLine}>
+            <div className={`${styles.articleBottomLine} ${!prevItem && !nextItem ? styles.articleBottomLineNone : ""}`}>
-                {prevItem && <div onClick={() => setDetailId(prevItem.id)}>上一篇：{prevItem.title}</div>}
+                <div>
-                {nextItem && <div onClick={() => setDetailId(nextItem.id)}>下一篇：{nextItem.title}</div>}
+                    {prevItem && <div onClick={() => setDetailId(prevItem.id)}>{prevArticle}：{prevItem.title}</div>}
+                </div>
+                <div>
+                    {nextItem && <div onClick={() => setDetailId(nextItem.id)}>{nextArticle}：{nextItem.title}</div>}
+                </div>
             </div>
         </div>
     )

src/pages/Home/index.tsx

@@ -22,6 +22,7 @@ export default function Home() {
     const banner = home?.banner;
     const section1Data = home?.section1Data;
     const section2Data = home?.section2Data ?? null;
+    const section3Data = home?.section3Data ?? null;
 
     if (!home) return null;
 
@@ -75,13 +76,13 @@ export default function Home() {
                 </div>
             </Section>
 
-            <News />
+            <News data={section3Data} />
         </div>
     );
 }
 
 
-function News() {
+function News({data}: any) {
     const locale = useStore((s) => s.locale);
     const categoryList = useStore((s) => s.categoryList);
     const [newsData, setNewsData] = useState<any[]>([]);
@@ -130,7 +131,7 @@ function News() {
         handleSearch(category_id)
     }, [])
     return (
-        <Section title="新闻资讯" maskBackground="#F0F2F4">
+        <Section title={data?.title ?? "新闻资讯"} maskBackground="#F0F2F4">
             <div className={styles.newsGrid}>
                 <div className={`${styles.newsFeatured} hover-scale`}>
                     <div className={styles.newsFeaturedImgWrap}>

src/pages/News/Detail.tsx

@@ -33,7 +33,8 @@ export default function NewsDetail() {
                     readTimes: item.count,
                     content: item.content,
                     lang: item.lang,
-                    category_id: item.category_id
+                    category_id: item.category_id,
+                    category_name: item.category_name
                 }
             })
             setNewsDetailList(data)
@@ -41,25 +42,54 @@ export default function NewsDetail() {
         }
     }, [])
 
+    const [preList, setPreList] = useState<any[]>([])
+    const [nextList, setNextList] = useState<any[]>([])
+
+    const preItem = useMemo(() => {
+        return preList.find((item) => item.lang.toLowerCase() === locale.split('-')[0])
+    }, [preList, locale])
+    const nextItem = useMemo(() => {
+        return nextList.find((item) => item.lang.toLowerCase() === locale.split('-')[0])
+    }, [nextList, locale])
+
     const getNewsSiblings = useCallback((id: string | number, category_id: string | number) => {
         appApi.getNewsSiblings({ id, category_id }).then((res) => {
-            console.log(res)
+            const pList: any[] = []
+            const nList: any[] = []
+            res.data.forEach((item: any) => {
+                if (item.id < id) {
+                    pList.push(item)
+                } else if (item.id > id) {
+                    nList.push(item)
+                }
+            })
+            setPreList(pList)
+            setNextList(nList)
         })
     }, [])
 
-    useEffect(() => {
+
-        getNewsDetail(id).then((data) => {
+    const getAllData = useCallback(async (id: string | number) => {
-            if(data && data.length > 0) {
+        const data = await getNewsDetail(id)
+        if (data && data.length > 0) {
             const id = data[0].id
-                const category_id = data[0].category_id
+            const category_id = data[0].category_id;
-                getNewsSiblings(id, category_id)
+            if(data[0].category_name !== "【集团发布】") {
+                return
             }
-        })
+            await getNewsSiblings(id, category_id)
+        }
+    }, [])
+
+    useEffect(() => {
+        getAllData(id)
     }, [id])
 
     return (
         <div>
-            {newsDetail && <Article data={newsDetail} setDetailId={(id) => getNewsDetail(id)} />}
+            {newsDetail && <Article data={newsDetail} setDetailId={(id) => getAllData(id)}
+                prevItem={preItem} nextItem={nextItem}
+            />}
         </div>
     );
 }