fix:

1. Fix collect function;
2. Show single duration;

public/img/icon/comment-active.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="#C43737" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 12C20.5034 13.3199 20.195 14.6219 19.6 15.8C18.8944 17.2117 17.8097 18.3992 16.4674 19.2293C15.1251 20.0594 13.5782 20.4994 12 20.5C10.6801 20.5034 9.37812 20.195 8.20001 19.6L4.10714 19.8929L4.40003 15.8C3.80496 14.6219 3.49659 13.3199 3.50003 12C3.50064 10.4218 3.94064 8.87486 4.77074 7.53257C5.60085 6.19027 6.78827 5.10559 8.20001 4.40003C9.37812 3.80496 10.6801 3.49659 12 3.50003H12.5C14.5843 3.61502 16.553 4.49479 18.0291 5.97088C19.5052 7.44697 20.385 9.41566 20.5 11.5V12Z" stroke="#C43737" stroke-opacity="1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -2,7 +2,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import { JournalCard, SongCardList, JournalRecommendList, Comment, Collect } from '@/components';
+import { JournalCard, SongCardList, JournalRecommendList, Comment, ButtonCollect } from '@/components';
 import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
 
 export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
@@ -57,11 +57,15 @@ export default async function JournalDetail({ params: { journalId } }: { params:
             </div>
           </div>
           {/* 收藏 */}
-          <Collect
+          <ButtonCollect
+            showText
+            journalId={journalInfo.id}
             active={journalInfo.haveCollect}
-            text={journalInfo.userCollectCount ? `${journalInfo.userCollectCount}人收藏` : ''}
-            id={journalInfo.id}
-            type="1"
+            count={journalInfo.userCollectCount}
+            text="人收藏"
+            collectType="1"
+            iconPosition="right"
+            gap={9}
           />
         </div>
         {/* 内容 */}

src/components/ButtonCollect.tsx

@@ -0,0 +1,90 @@
+/** 收藏期刊按钮 */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { apiCollect } from '@/services';
+
+interface Props {
+  /** 是否显示文案 */
+  showText?: boolean;
+  journalId: string;
+  active: boolean;
+  count?: number;
+  text?: string;
+  /** 收藏类型  0:歌曲，1:期刊，2:关注，3:黑名单 */
+  collectType: CollectType;
+  iconPosition?: 'left' | 'right';
+  className?: string;
+  textClassName?: string;
+  /** 文字跟图标之间的间隔  单位px */
+  gap?: number;
+}
+
+export default function ButtonCollect({
+  journalId,
+  active,
+  count = 0,
+  text = '',
+  collectType,
+  iconPosition = 'left',
+  gap = 9,
+  className = '',
+  textClassName = '',
+  showText = false,
+}: Props) {
+  const [state, setState] = useState<boolean>(false); // 收藏状态
+  const [hover, setHover] = useState<boolean>(false);
+  const [currentCount, setCurrentCount] = useState<number>(0);
+
+  // 收藏/取消收藏
+  const handleCollect = async () => {
+    setState(!state); // 更新收藏状态
+    setCurrentCount((currentCount) => currentCount + (state ? -1 : 1)); // 如果当前为收藏状态，-1，否则+1
+
+    const res = await apiCollect({ isAdd: !state, objectId: journalId, collectType });
+    // 如果请求失败，回退状态
+    if (res.code !== 200) {
+      setState(!state);
+      setCurrentCount((currentCount) => currentCount + (state ? 1 : -1));
+    }
+  };
+
+  useEffect(() => {
+    setState(active);
+  }, [active]);
+
+  useEffect(() => {
+    setCurrentCount(count);
+  }, []);
+
+  const Icon = () => {
+    return (
+      <div
+        className={`w-[24px] h-[24px] ${hover || state ? 'bg-[url(/img/icon/love-active.svg)]' : 'bg-[url(/img/icon/love.svg)]'}`}
+      />
+    );
+  };
+
+  return (
+    <div
+      className={`flex flex-row items-center gap-[${gap}px] cursor-pointer ${className}`}
+      onClick={handleCollect}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {iconPosition === 'left' && <Icon />}
+      {/* 文案 */}
+      {!!(showText && currentCount) && (
+        <p
+          className={`${hover || state ? 'text-brand' : 'text-[rgba(0,0,0,0.4)]'} text-[13px] leading-[18.2px] ${textClassName}`}
+        >
+          {`${currentCount || ''}${text || ''}`}
+        </p>
+      )}
+      {/* 图标 */}
+      {iconPosition === 'right' && <Icon />}
+    </div>
+  );
+}

src/components/Collect.tsx

@@ -1,42 +0,0 @@
-// 期刊收藏
-
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import { apiCollect } from '@/services';
-
-interface Props {
-  active: boolean;
-  id: string;
-  type: string;
-  size?: number;
-  text?: string;
-}
-
-export default function Collect({ active, id, type, size = 24, text = '' }: Props) {
-  const [state, setState] = useState<boolean>(false); // 收藏状态
-
-  useEffect(() => {
-    setState(active);
-  }, [active]);
-
-  // 收藏/取消收藏
-  const handleCollect = async () => {
-    setState(!state); // 更新收藏状态
-    const res = await apiCollect({ isAdd: !state, objectId: id, collectType: type });
-    if (res.code !== 200) setState(!state); // 如果请求失败，回退状态
-  };
-
-  return (
-    <div className="flex flex-row items-center gap-[9px] cursor-pointer group" onClick={handleCollect}>
-      {/* 文案 */}
-      {!!text && <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px] group-hover:text-brand">{text}</p>}
-      {/* 图标 */}
-
-      <div
-        className={`w-[${size}px] h-[${size}px] ${state ? 'bg-[url(/img/icon/love-active.svg)]' : 'bg-[url(/img/icon/love.svg)]'} group-hover:bg-[url(/img/icon/love-active.svg)]`}
-      />
-    </div>
-  );
-}

src/components/Comment/Comment.tsx

@@ -74,7 +74,7 @@ export default function Comment({ journalId, className, totalCommentReply, total
   }, [handleLoadMore]);
 
   return (
-    <div className={className}>
+    <div className={className} id="comment">
       <CommentForm onSubmit={handleSubmit} />
       {!!totalCommentReply && (
         <>

src/components/Journal/JournalItem.tsx

@@ -1,16 +1,16 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
-import { Avatar, JournalCard } from '@/components';
+import { Avatar, JournalCard, ButtonCollect } from '@/components';
 
 export default function JournalItem({
   journalNo,
+  id,
   title,
   image,
   summary,
+  commentList,
   haveCollect,
   totalCommentReply,
-  commentList,
   userCollectCount,
 }: JournalInfo) {
   return (
@@ -39,22 +39,27 @@ export default function JournalItem({
         </div>
       )}
 
-      {/* 评论 & 收藏 */}
       <div className="flex flex-row items-center">
-        <Image width={24} height={24} src={'/img/icon/comment.svg'} alt="comment" unoptimized />
-        <p className="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:text-brand">
-          {totalCommentReply}
-        </p>
-        <Image
-          width={24}
-          height={24}
-          src={haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
-          alt="love"
-          unoptimized
+        {/* 评论 */}
+        <Link className="flex flex-row items-center group" href={`/vol/${journalNo}#comment`}>
+          <div
+            className={`w-[24px] h-[24px] bg-[url(/img/icon/comment.svg)] group-hover:bg-[url(/img/icon/comment-active.svg)]`}
+          />
+          <p className="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4)] group-hover:text-brand">
+            {totalCommentReply}
+          </p>
+        </Link>
+        {/* 收藏 */}
+        <ButtonCollect
+          showText
+          iconPosition="left"
+          journalId={id}
+          active={haveCollect}
+          count={userCollectCount}
+          collectType="1"
+          gap={6}
+          textClassName="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px]"
         />
-        <p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:text-brand">
-          {userCollectCount}
-        </p>
       </div>
     </div>
   );

src/components/Song/SongCard.tsx

@@ -1,11 +1,14 @@
 import Image from 'next/image';
 
+import { ButtonCollect } from '@/components';
+
 export default function JournalItem({
   id,
   title,
   pic,
   artist,
   haveCollect,
+  duration,
   onPlay,
 }: SongInfo & { onPlay: (id: string) => void }) {
   return (
@@ -32,14 +35,13 @@ export default function JournalItem({
           className="w-[24px] h-[24px] overflow-hidden"
         />
 
-        <p className="ml-[30px] mr-[13px] text-[12px] leading-[16.8px] text-[rgba(0,0,0,0.4)]">05:09</p>
+        <p className="ml-[30px] mr-[13px] text-[12px] leading-[16.8px] text-[rgba(0,0,0,0.4)]">{duration || '00:00'}</p>
 
-        <Image
-          width={24}
-          height={24}
-          src={haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
-          alt={title}
-          className="w-[24px] h-[24px] overflow-hidden"
+        <ButtonCollect
+          journalId={id}
+          active={haveCollect}
+          collectType="0"
+          textClassName="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px]"
         />
       </div>
     </div>

src/components/index.ts

@@ -22,6 +22,7 @@ export { default as Input } from './common/Input';
 export { default as Button } from './common/Button';
 export { default as AutoScrollContainer } from './common/AutoScrollContainer';
 export { default as Avatar } from './Avatar';
+export { default as ButtonCollect } from './ButtonCollect';
 
 // Audio Player
 export { default as PlayerBar } from './AudioPlayer/PlayerBar';
@@ -37,5 +38,4 @@ export { default as CommentHeader } from './Comment/CommentHeader';
 export { default as CommentForm } from './Comment/CommentForm';
 export { default as CommentItem } from './Comment/CommentItem';
 export { default as CommentList } from './Comment/CommentList';
-export { default as Collect } from './Collect';
 export { default as Thumb } from './Thumb';

src/services/client/operate.ts

@@ -5,7 +5,7 @@ import clientHttp from '@/utils/request/client';
  * @objectId 喜欢歌曲/收藏期刊/关注某用户/某用户列入黑名单的id
  * @collectType 0:歌曲，1:期刊，2:关注，3:黑名单
  */
-export const apiCollectAdd = async (params: { objectId: string; collectType: string }) => {
+export const apiCollectAdd = async (params: { objectId: string; collectType: CollectType }) => {
   const result: FetchResponse<string> = await clientHttp.post('/queyueapi/user/collect', params);
   return result;
 };
@@ -15,7 +15,7 @@ export const apiCollectAdd = async (params: { objectId: string; collectType: str
  * @objectId 喜欢歌曲/收藏期刊/关注某用户/某用户列入黑名单的id
  * @collectType 0:歌曲，1:期刊，2:关注，3:黑名单
  */
-export const apiCollectRemove = async ({ objectId, collectType }: { objectId: string; collectType: string }) => {
+export const apiCollectRemove = async ({ objectId, collectType }: { objectId: string; collectType: CollectType }) => {
   const result: FetchResponse<string> = await clientHttp.delete(
     `/queyueapi/user/collect?objectId=${objectId}&collectType=${collectType}`,
   );
@@ -35,7 +35,7 @@ export const apiCollect = async ({
 }: {
   isAdd: boolean;
   objectId: string;
-  collectType: string;
+  collectType: CollectType;
 }) => {
   if (isAdd) {
     return await apiCollectAdd({ objectId, collectType });

src/types/reqeust.d.ts

@@ -51,6 +51,8 @@ declare interface SongInfo {
   pic: string;
   /** 歌曲链接 */
   src: string;
+  /** 歌曲时长 */
+  duration: string;
 }
 
 /**
@@ -174,3 +176,8 @@ interface Comment {
   /** 徽章列表 */
   badgeList: number[];
 }
+
+/**
+ * 收藏类型  0:歌曲，1:期刊，2:关注，3:黑名单
+ */
+type CollectType = '0' | '1' | '2' | '3';