feat:(vol) 期刊封面播放按钮，添加播放行为

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>
   );

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>
   );
 }

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}

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}
+    />
+  );
+}