From 27305f62486ffdf6ab2f4ca2838402c492ba967b Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Wed, 8 May 2024 15:28:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:(vol)=20=E6=9C=9F=E5=88=8A=E5=B0=81?=
 =?UTF-8?q?=E9=9D=A2=E6=92=AD=E6=94=BE=E6=8C=89=E9=92=AE=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=92=AD=E6=94=BE=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Journal/JournalCard.tsx         |  6 ------
 .../Journal/JournalList/VolListCoverCard.tsx   |  7 ++++++-
 src/components/Journal/VolPlayButton.tsx       | 15 +++++++++++++++
 .../Journal/widget/CardPlayButton.tsx          | 18 ++++++++++++++++++
 4 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Journal/widget/CardPlayButton.tsx

diff --git a/src/components/Journal/JournalCard.tsx b/src/components/Journal/JournalCard.tsx
index 18c7c94..3a48659 100644
--- a/src/components/Journal/JournalCard.tsx
+++ b/src/components/Journal/JournalCard.tsx
@@ -18,7 +18,6 @@ export default function JournalCard({
   image,
   title,
   journalNo,
-  showPlay = false,
   scale = false,
   children,
   className,
@@ -26,7 +25,6 @@ export default function JournalCard({
   image: string;
   journalNo: string;
   title?: string;
-  showPlay?: boolean;
   scale?: boolean;
   children?: React.ReactNode;
   className?: string;
@@ -51,10 +49,6 @@ export default function JournalCard({
           <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-20px leading-[34px]">{title}</p>
         </div>
       )}
-      {/* 播放按钮 */}
-      {showPlay && (
-        <div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100  transition-opacity-300" />
-      )}
       {children}
     </div>
   );
diff --git a/src/components/Journal/JournalList/VolListCoverCard.tsx b/src/components/Journal/JournalList/VolListCoverCard.tsx
index 76559a0..eacd4ca 100644
--- a/src/components/Journal/JournalList/VolListCoverCard.tsx
+++ b/src/components/Journal/JournalList/VolListCoverCard.tsx
@@ -1,3 +1,5 @@
+import CardPlayButton from '@/components/Journal/widget/CardPlayButton';
+
 import styles from '../index.module.css';
 
 import { JournalCard } from '@/components';
@@ -8,7 +10,10 @@ export default function CoverCard({ title, img, no }: { title: string; img: stri
       <div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
         <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[20px] leading-[33.6px] font-500">{title}</p>
       </div>
-      <div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100  transition-opacity-500" />
+      <CardPlayButton
+        className="absolute bottom-[24px] right-[24px] opacity-0 hover:transform-scale-103 group-hover:opacity-100 hover:transition-transform-150 transition-opacity-500 "
+        no={no}
+      />
     </JournalCard>
   );
 }
diff --git a/src/components/Journal/VolPlayButton.tsx b/src/components/Journal/VolPlayButton.tsx
index 0a52e99..b770f82 100644
--- a/src/components/Journal/VolPlayButton.tsx
+++ b/src/components/Journal/VolPlayButton.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import { useEffect } from 'react';
+
+import { useSearchParams } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import { PlayButton } from '@/components';
@@ -14,6 +17,8 @@ export default function VolPlayButton({
   songList: SongInfo[];
   className?: string;
 }) {
+  const searchParams = useSearchParams();
+
   const { playListInfo, playState, setPlayState, setPlayListInfo, setPlayList, setAudioId } = useAudioStore(
     useShallow((state) => {
       return {
@@ -31,6 +36,7 @@ export default function VolPlayButton({
   const isCurrentVol = playListInfo.type === 'vol' && playListInfo.id === journalInfo.id;
 
   const handlePlay = (state: boolean) => {
+    // 未在播放当前歌单
     if (state && !isCurrentVol) {
       const res = setPlayListInfo({
         type: 'vol',
@@ -41,9 +47,18 @@ export default function VolPlayButton({
       setAudioId(songList[0].id);
     }
 
+    // 如果正在播放当前歌单，则直接改变播放状态
     setPlayState(!playState);
   };
 
+  useEffect(() => {
+    // 如果路径中有 autoPlay 参数，则播放
+    const autoPlay = searchParams.get('autoPlay');
+    if (autoPlay) {
+      handlePlay(true);
+    }
+  }, []);
+
   return (
     <PlayButton
       className={className}
diff --git a/src/components/Journal/widget/CardPlayButton.tsx b/src/components/Journal/widget/CardPlayButton.tsx
new file mode 100644
index 0000000..3f6b96e
--- /dev/null
+++ b/src/components/Journal/widget/CardPlayButton.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export default function PlayButton({ no, className }: { no: string; className?: string }) {
+  const router = useRouter();
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    router.push(`/vol/${no}?autoPlay=1`);
+  };
+
+  return (
+    <div
+      className={`w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 ${className}`}
+      onClick={handleClick}
+    />
+  );
+}