update(page): discover journal page

src/app/discover/journal/[category]/page.tsx

@@ -28,8 +28,8 @@ export default async function Journal({ params }: { params: { category: string }
 
       {/* 右侧 */}
       <div className="w-[346px] mt-[217px]">
-        <p className="text-[17px] leading-[23.8px]">热门推荐</p>
-        {/* <HotJournalList /> */}
+        {/* 热门推荐 */}
+        <HotJournalList />
       </div>
     </main>
   );

src/components/Journal/HotJournalCard.tsx

@@ -2,11 +2,14 @@ import Image from 'next/image';
 
 export default function JournalCard({ title, image, totalCommentReply }: JournalInfo) {
   return (
-    <div>
-      <Image src={image} alt={title} width={80} height={56} className="w-[80px] h-[56px] rounded-[3px]" />
-      <div>
-        <p className="text-[15px] leading-[21px]">{title}</p>
-        <p className="text-[13px] leading-[18.2px]">{totalCommentReply}</p>
+    <div className="flex flex-row items-center h-[56px]">
+      <Image src={image} alt={title} width={80} height={56} unoptimized className="w-[80px] h-[56px] rounded-[3px]" />
+
+      <div className="flex flex-col justify-between h-full ml-[20px] py-[6px]">
+        <p className="w-[200px] text-[15px] leading-[21px]  overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+          {title}
+        </p>
+        <p className="text-[13px] leading-[18.2px]">{`${totalCommentReply}人收藏`}</p>
       </div>
     </div>
   );

src/components/Journal/HotJournalList.tsx

@@ -1,23 +1,10 @@
 import HotJournalCard from './HotJournalCard';
 
-import { apiJournalList } from '@/services/server/journal';
+import { apiJournalRecommend } from '@/services/server/journal';
 
-const RecommondJournal = async ({
-  categoryId,
-  journalNoRange,
-  pageNum,
-  pageSize,
-}: {
-  categoryId?: string;
-  journalNoRange?: string;
-  pageNum?: number;
-  pageSize?: number;
-}) => {
-  const journalList: JournalList = await apiJournalList({
-    categoryId,
-    journalNoRange,
-    pageNum,
-    pageSize,
+const RecommondJournal = async ({ categoryId }: { categoryId: string }) => {
+  const journalList: JournalInfo[] = await apiJournalRecommend({
+    id: categoryId,
   });
 
   return (
@@ -26,10 +13,8 @@ const RecommondJournal = async ({
       <div className="text-[17px] leading-[23.8px]">热门推荐</div>
 
       {/* 期刊 list */}
-      <div className="flex flex-col gap-[60px] mt-[17px]">
-        {journalList.rows.map((item: JournalInfo) => (
-          <HotJournalCard key={item.id} {...item} />
-        ))}
+      <div className="flex flex-col gap-[30px] mt-[17px]">
+        {journalList?.length && journalList.map((item: JournalInfo) => <HotJournalCard key={item.id} {...item} />)}
       </div>
     </div>
   );

src/components/Journal/JournalCard.tsx

@@ -36,7 +36,7 @@ export default function JournalCard({
         <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
       </div>
       {/* 摘要 */}
-      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-[#000]  overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-[#000] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
         {summary}
       </p>
       {/* 评论 */}

src/components/Journal/JournalList.tsx

@@ -35,9 +35,8 @@ const JournalList = async ({
 
       {/* 期刊 list */}
       <div className="flex flex-col gap-[60px] mt-[17px]">
-        {journalList.rows.map((item: JournalInfo) => (
-          <JournalCard key={item.id} {...item} />
-        ))}
+        {journalList?.rows.length &&
+          journalList.rows.map((item: JournalInfo) => <JournalCard key={item.id} {...item} />)}
       </div>
     </div>
   );

src/services/server/journal.ts

@@ -49,3 +49,12 @@ export const apiTagName = async ({
   );
   return verifyResponse(result);
 };
+
+/**
+ * @description 根据当前期刊的标签推荐6期类似期刊
+ */
+export const apiJournalRecommend = async ({ id }: { id: string }) => {
+  const result: FetchResponse<JournalInfo[]> = await request(`/luoo-music/journal/recommend/${id}`);
+  console.log({ result });
+  return verifyResponse(result);
+};