update(component): Update HotJournalRecommed.

src/app/vol/[journalId]/page.tsx

@@ -1,11 +1,10 @@
 /** 期刊详情 */
 
-import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import { JournalCard, SongCardList, HotJournalList, Comment, Coolect } from '@/components';
-import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiCollect } from '@/services';
+import { apiGetJournalInfoById, apiGetSongsByJournalNo } from '@/services';
 
 const getData = async (journalId: string) => {
   const [journalInfoRes, songListRes] = await Promise.all([
@@ -16,13 +15,6 @@ const getData = async (journalId: string) => {
   return { journalInfo: journalInfoRes.data, songList: songListRes.data };
 };
 
-// 收藏/取消收藏
-const handleCollect = async ({ isAdd, id }: { isAdd: boolean; id: string }) => {
-  const res = await apiCollect({ isAdd: !isAdd, objectId: id, collectType: '1' });
-  if (res.code === 200) {
-  }
-};
-
 export default async function JournalDetail({ params: { journalId } }: { params: { journalId: string } }) {
   const { journalInfo, songList } = await getData(journalId);
 
@@ -66,20 +58,9 @@ export default async function JournalDetail({ params: { journalId } }: { params:
             id={journalInfo.id}
             type="1"
           />
-          {/* <div className="flex flex-row items-center gap-[9px]">
-            <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px]">{`${journalInfo.totalCommentReply}人收藏`}</p>
-            <div onClick={() => handleCollect({ id: journalInfo.id, isAdd: !journalInfo.haveCollect })}>
-              <Image
-                width={24}
-                height={24}
-                src={journalInfo.haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
-                alt="collect"
-              />
-            </div>
-          </div> */}
         </div>
         {/* 内容 */}
-        <div
+        <article
           className="mt-[24px] text-[15px] leading-[21px] text-base"
           dangerouslySetInnerHTML={{ __html: journalInfo.content }}
         />
@@ -96,7 +77,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
 
       <div className="w-[346px]">
         {/* 热门推荐 */}
-        <HotJournalList type="hot" />
+        <HotJournalList type="journal" journalId={journalInfo.id} />
       </div>
     </main>
   );

src/app/vol/list/[category]/[[...page]]/page.tsx

@@ -1,3 +1,5 @@
+/** 期刊列表 */
+
 import { Category, JournalList, HotJournalList } from '@/components';
 import { apiSearchCategory } from '@/services';
 

src/components/Avatar.tsx

@@ -1,16 +1,13 @@
 import Image from 'next/image';
 
-const Avatar = ({
+interface Props {
-  src,
-  alt = 'avatar',
-  size,
-  className = '',
-}: {
   src: string;
   alt?: string;
   size: number;
   className?: string;
-}) => {
+}
+
+const Avatar = ({ src, alt = 'avatar', size, className = '' }: Props) => {
   return (
     <div className={`rounded-[50%] bg-[#fff] overflow-hidden ${className}`} style={{ width: size, height: size }}>
       <Image className="w-full h-full object-cover" width={size} height={size} src={src} alt={alt} unoptimized />

src/components/Journal/HotJournalCard.tsx

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

src/components/Journal/HotJournalList.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+
 import HotJournalCard from './HotJournalCard';
 
 import { apiJournalRecommend } from '@/services/server/journal';
@@ -12,22 +13,28 @@ interface JournalProp {
   journalId: string;
 }
 
-// const RecommondJournal = async (prop: HotProp | JournalProp) => {
+const getData = async (id: string) => {
-const RecommondJournal = async (prop: any) => {
+  const res = await apiJournalRecommend({ id });
+  return res.code === 200 ? res.data : [];
+};
+
+const RecommondJournal = async (prop: HotProp | JournalProp) => {
   let journalList: JournalInfo[] = [];
-  const res = await apiJournalRecommend({ id: prop.journalId });
+  if (prop.type === 'hot') journalList = [];
-  if (res) {
+  if (prop.type === 'journal') journalList = await getData(prop.journalId);
-    journalList = res;
-  }
 
   return (
     <div className="flex flex-col">
       {/* 分类 & 电台 */}
       <div className="text-[17px] leading-[23.8px]">热门推荐</div>
-
       {/* 期刊 list */}
       <div className="flex flex-col gap-[30px] mt-[17px]">
-        {journalList?.length && journalList.map((item: JournalInfo) => <HotJournalCard key={item.id} {...item} />)}
+        {!!journalList?.length &&
+          journalList.map((item: JournalInfo) => (
+            <Link key={item.id} href={`/vol/${item.journalNo}`}>
+              <HotJournalCard key={item.id} {...item} />
+            </Link>
+          ))}
       </div>
     </div>
   );

src/services/server/journal.ts

@@ -85,7 +85,7 @@ export const apiGetJournalInfoById: (params: { id: string }) => Promise<FetchRes
  * @description 根据期刊号查询歌曲 (若为游客，期刊号须在最新10期内)
  * @id 期刊号
  */
-export const apiGetSongsByJournalNo: (params: { id: string }) => Promise<FetchResponse<JournalInfo>> = async ({
+export const apiGetSongsByJournalNo: (params: { id: string }) => Promise<FetchResponse<SongInfo[]>> = async ({
   id,
 }) => {
   const request = new Request('http://localhost/', {