feat(Player): 添加 vol 标签

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

@@ -43,7 +43,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
 
               <span
                 key={tag}
-                className="block w-auto py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
+                className="block w-fit py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
               >
                 {tag}
               </span>

src/components/AudioPlayer/PlayerCard.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import clientHttp from '@/utils/request/client';
@@ -17,13 +18,15 @@ interface Prop {
 }
 
 export default function PlayerCard({ show, className }: Prop) {
-  const { audioId, playList, playQueue, playState, setPlayList, setPlayQueue } = useAudioStore(
+  const router = useRouter();
+  const { audioId, playList, playQueue, playState, setShowCard, setPlayList, setPlayQueue } = useAudioStore(
     useShallow((state) => {
       return {
         playState: state.playState,
         audioId: state.audioId,
         playList: state.playList,
         playQueue: state.playQueue,
+        setShowCard: state.setShowCard,
         setPlayList: state.setPlayList,
         setPlayQueue: state.setPlayQueue,
       };
@@ -57,6 +60,11 @@ export default function PlayerCard({ show, className }: Prop) {
     }
   };
 
+  const handleGoVol = (no: string) => {
+    router.push(`/vol/${no}`);
+    setShowCard(false);
+  };
+
   useEffect(() => {
     getLrc(audioInfo?.lrc ?? '');
   }, [audioInfo]);
@@ -70,8 +78,9 @@ export default function PlayerCard({ show, className }: Prop) {
       <div className="flex justify-between w-[1200px] mx-auto ">
         {/* 单曲信息 */}
         <div className="mt-68px">
-          {/* 阴影 */}
+          {/* 专辑封面区域 */}
           <div className="relative w-[340px] h-[246px]">
+            {/* 阴影 */}
             <div
               className={`absolute left-0 bottom-0 w-[230px] h-[230px] rounded-[3px] bg-[rgba(0, 0, 0, 0.08)] ${styles.album_shoadow}`}
               style={{
@@ -97,16 +106,28 @@ export default function PlayerCard({ show, className }: Prop) {
               className={`absolute right-0 top-[13px] w-[220px] h-[220px] bg-[url(/img/audio-player/CD.png)] bg-cover bg-no-repeat z-2 ${styles.CD_animation} ${!playState && styles.CD_animation_pause}`}
             />
           </div>
-          {/* 歌曲名 */}
-          <p className="w-[340px] mt-[44px] text-[20px] leading-[28px] text-base text-overflow">
-            {audioInfo?.title ?? ''}
-          </p>
-          {/* 歌手/专辑 */}
-          {audioInfo?.artist && audioInfo?.album && (
-            <p className="w-[340px] text-[13px] leading-[18px] mt-[2px] text-[rgba(0,0,0,0.7)] text-overflow">{`${audioInfo.artist}/${audioInfo.album}`}</p>
-          )}
+
+          {/* 歌曲信息 */}
+          <div>
+            {/* 期刊号 */}
+            {audioInfo?.journalNo && (
+              <span
+                className="block w-fit mt-32px py-[3px] px-[8px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px] cursor-pointer"
+                onClick={() => handleGoVol(audioInfo?.journalNo)}
+              >{`VOL ${audioInfo.journalNo.toString().padStart(4, '0')}`}</span>
+            )}
+            {/* 歌曲名 */}
+            <p className="w-[340px] mt-[19px] text-[20px] leading-[28px] text-base text-overflow">
+              {audioInfo?.title ?? ''}
+            </p>
+            {/* 歌手/专辑 */}
+            {audioInfo?.artist && audioInfo?.album && (
+              <p className="w-[340px] text-[13px] leading-[18px] mt-[2px] text-[rgba(0,0,0,0.7)] text-overflow">{`${audioInfo.artist}/${audioInfo.album}`}</p>
+            )}
+          </div>
+
           {/* 歌词 */}
-          <div className={`mt-[30px] w-[340px]`} style={{ height: 'calc(100vh - 516px - 209px)' }}>
+          <div className={`mt-[30px] w-[340px]`} style={{ height: 'calc(100vh - 80px - 460px - 185px)' }}>
             {lrc ? (
               <Lrc lrc={lrc} className="h-full" />
             ) : (