From b433662dbafae3892bde362387c76219d51d5628 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Tue, 9 Apr 2024 18:02:16 +0800 Subject: [PATCH] fix: 1. Fix collect function; 2. Show single duration; --- public/img/icon/comment-active.svg | 3 + src/app/vol/[journalId]/page.tsx | 14 ++-- src/components/ButtonCollect.tsx | 90 ++++++++++++++++++++++++++ src/components/Collect.tsx | 42 ------------ src/components/Comment/Comment.tsx | 2 +- src/components/Journal/JournalItem.tsx | 39 ++++++----- src/components/Song/SongCard.tsx | 16 +++-- src/components/index.ts | 2 +- src/services/client/operate.ts | 6 +- src/types/reqeust.d.ts | 7 ++ 10 files changed, 145 insertions(+), 76 deletions(-) create mode 100644 public/img/icon/comment-active.svg create mode 100644 src/components/ButtonCollect.tsx delete mode 100644 src/components/Collect.tsx diff --git a/public/img/icon/comment-active.svg b/public/img/icon/comment-active.svg new file mode 100644 index 0000000..50dee48 --- /dev/null +++ b/public/img/icon/comment-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx index 34fc432..15ccb7a 100644 --- a/src/app/vol/[journalId]/page.tsx +++ b/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: {/* 收藏 */} - {/* 内容 */} diff --git a/src/components/ButtonCollect.tsx b/src/components/ButtonCollect.tsx new file mode 100644 index 0000000..5af039b --- /dev/null +++ b/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(false); // 收藏状态 + const [hover, setHover] = useState(false); + const [currentCount, setCurrentCount] = useState(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 ( +
+ ); + }; + + return ( +
setHover(true)} + onMouseLeave={() => setHover(false)} + > + {iconPosition === 'left' && } + {/* 文案 */} + {!!(showText && currentCount) && ( +

+ {`${currentCount || ''}${text || ''}`} +

+ )} + {/* 图标 */} + {iconPosition === 'right' && } +
+ ); +} diff --git a/src/components/Collect.tsx b/src/components/Collect.tsx deleted file mode 100644 index 3b938a7..0000000 --- a/src/components/Collect.tsx +++ /dev/null @@ -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(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 ( -
- {/* 文案 */} - {!!text &&

{text}

} - {/* 图标 */} - -
-
- ); -} diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx index ec36e40..161aed3 100644 --- a/src/components/Comment/Comment.tsx +++ b/src/components/Comment/Comment.tsx @@ -74,7 +74,7 @@ export default function Comment({ journalId, className, totalCommentReply, total }, [handleLoadMore]); return ( -
+
{!!totalCommentReply && ( <> diff --git a/src/components/Journal/JournalItem.tsx b/src/components/Journal/JournalItem.tsx index 5092388..1d694a6 100644 --- a/src/components/Journal/JournalItem.tsx +++ b/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({
)} - {/* 评论 & 收藏 */}
- comment -

- {totalCommentReply} -

- love +
+

+ {totalCommentReply} +

+ + {/* 收藏 */} + -

- {userCollectCount} -

); diff --git a/src/components/Song/SongCard.tsx b/src/components/Song/SongCard.tsx index e2420d7..0aa9e26 100644 --- a/src/components/Song/SongCard.tsx +++ b/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" /> -

05:09

+

{duration || '00:00'}

- {title}
diff --git a/src/components/index.ts b/src/components/index.ts index 4b82202..98bb520 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/services/client/operate.ts b/src/services/client/operate.ts index 98934ae..bae37c5 100644 --- a/src/services/client/operate.ts +++ b/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 = 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 = 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 }); diff --git a/src/types/reqeust.d.ts b/src/types/reqeust.d.ts index 8bf4ed1..f9082ec 100644 --- a/src/types/reqeust.d.ts +++ b/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';