update

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>
           ))}