From 6b1e8aff1c9fd5f20862085a0c1494393da4f699 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Thu, 18 Apr 2024 15:54:48 +0800 Subject: [PATCH] =?UTF-8?q?update(VolCard):=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/my/index.module.css | 2 +- src/app/vol/[journalId]/page.tsx | 4 +-- src/components/Journal/JournalCard.tsx | 35 ++++++++++++------- .../JournalDetail/VolDetailCoverCard.tsx | 16 +++++++++ src/components/Journal/JournalItem.tsx | 2 +- .../Journal/JournalList/VolListCoverCard.tsx | 28 +++++++++++++++ src/components/Journal/VolPlayButton.tsx | 31 ++++++++++++++++ src/components/SongCard/SongCard.tsx | 2 +- src/components/index.ts | 2 ++ 9 files changed, 105 insertions(+), 17 deletions(-) create mode 100644 src/components/Journal/JournalDetail/VolDetailCoverCard.tsx create mode 100644 src/components/Journal/JournalList/VolListCoverCard.tsx create mode 100644 src/components/Journal/VolPlayButton.tsx diff --git a/src/app/my/index.module.css b/src/app/my/index.module.css index 61e807b..016f306 100644 --- a/src/app/my/index.module.css +++ b/src/app/my/index.module.css @@ -10,5 +10,5 @@ width: 60px; height: 3px; margin: 12px auto 0; - background-color: rgba(0, 0, 0, 0.95); + background-color: #c43737; } diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx index 15ccb7a..7625ef8 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, ButtonCollect } from '@/components'; +import { SongCardList, JournalRecommendList, Comment, ButtonCollect, VolDetailCoverCard } from '@/components'; import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services'; export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) { @@ -28,7 +28,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
{/* 封面 */} - + {/* 期刊号 & 标签 */}

{`VOL·${journalInfo?.journalNo}`}

diff --git a/src/components/Journal/JournalCard.tsx b/src/components/Journal/JournalCard.tsx index 488628f..9c47a59 100644 --- a/src/components/Journal/JournalCard.tsx +++ b/src/components/Journal/JournalCard.tsx @@ -1,6 +1,7 @@ import Image from 'next/image'; import styles from './index.module.css'; +import { Children } from 'react'; function VolNo({ text }: { text: string }) { return ( @@ -14,27 +15,37 @@ function VolNo({ text }: { text: string }) { ); } -export default function JournalCard({ image, title, journalNo }: { image: string; title?: string; journalNo: string }) { +export default function JournalCard({ + image, + title, + journalNo, + showPlay = false, + children, + className, +}: { + image: string; + title?: string; + journalNo: string; + showPlay?: boolean; + children?: React.ReactNode; + className?: string; +}) { return ( /* banner container */ -
+
{/* 左上方 角标 */} {/* banner */} - {`Vol${journalNo}`} + {`Vol${journalNo}`} {/* 标题 */}

{title}

- {/* 遮罩层 */} -
+ {/* 播放按钮 */} + {showPlay && ( +
+ )} + {children}
); } diff --git a/src/components/Journal/JournalDetail/VolDetailCoverCard.tsx b/src/components/Journal/JournalDetail/VolDetailCoverCard.tsx new file mode 100644 index 0000000..6fdcd59 --- /dev/null +++ b/src/components/Journal/JournalDetail/VolDetailCoverCard.tsx @@ -0,0 +1,16 @@ +import VolPlayButton from '../VolPlayButton'; + +import { JournalCard } from '@/components'; + +export default function CoverCard({ journalInfo }: { journalInfo: JournalInfo }) { + const { image, journalNo } = journalInfo; + + return ( +
+ + {/* 播放/暂停 */} + + +
+ ); +} diff --git a/src/components/Journal/JournalItem.tsx b/src/components/Journal/JournalItem.tsx index cdede23..767a1fa 100644 --- a/src/components/Journal/JournalItem.tsx +++ b/src/components/Journal/JournalItem.tsx @@ -16,7 +16,7 @@ export default function JournalItem({ return (
- + {/* 摘要 */}

diff --git a/src/components/Journal/JournalList/VolListCoverCard.tsx b/src/components/Journal/JournalList/VolListCoverCard.tsx new file mode 100644 index 0000000..baff651 --- /dev/null +++ b/src/components/Journal/JournalList/VolListCoverCard.tsx @@ -0,0 +1,28 @@ +import { JournalCard, PlayerButton } from '@/components'; + +export default function CoverCard({ + img, + no, + playStatus, + onPlay, +}: { + img: string; + no: string; + playStatus: boolean; + onPlay: () => void; +}) { + return ( + + + {/* 播放/暂停 */} + + + + ); +} diff --git a/src/components/Journal/VolPlayButton.tsx b/src/components/Journal/VolPlayButton.tsx new file mode 100644 index 0000000..95993ed --- /dev/null +++ b/src/components/Journal/VolPlayButton.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { useShallow } from 'zustand/react/shallow'; + +import { PlayerButton } from '@/components'; +import useAudioStore from '@/store/audio'; + +export default function VolPlayButton({ no, className }: { no: string; className: string }) { + const { playState, setPlayState } = useAudioStore( + useShallow((state) => { + return { + playState: state.playState, + setPlayState: state.setPlayState, + }; + }), + ); + + const handlePlay = () => { + setPlayState(!playState); + }; + + return ( + + ); +} diff --git a/src/components/SongCard/SongCard.tsx b/src/components/SongCard/SongCard.tsx index 2278fed..845e656 100644 --- a/src/components/SongCard/SongCard.tsx +++ b/src/components/SongCard/SongCard.tsx @@ -26,7 +26,7 @@ export default function JournalItem({ }: Props) { return (

onPlay(id)} > {/* left */} diff --git a/src/components/index.ts b/src/components/index.ts index 59db7ff..1b867ea 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -21,6 +21,8 @@ export { default as JournalCard } from './Journal/JournalCard'; export { default as JournalList } from './Journal/JournalList'; export { default as JournalRecommendCard } from './Journal/JournalRecommendCard'; export { default as JournalRecommendList } from './Journal/JournalRecommendList'; +export { default as VolDetailCoverCard } from './Journal/JournalDetail/VolDetailCoverCard'; +export { default as VolListCoverCard } from './Journal/JournalList/VolListCoverCard'; // Common export { default as Input } from './common/Input';