update(PlayerCard): VolTag decoupling.

src/components/AudioPlayer/PlayerCard/components/PlayerCardMeta.tsx

@@ -2,11 +2,13 @@ import Image from 'next/image';
 
 import styles from './index.module.css';
 
+import { VolTag } from '@/components';
+
 interface IProps {
   playState: boolean;
   audioInfo: SongInfo;
   className?: string;
-  onRouterPush: (id: string) => void;
+  onRouterPush: (no: string) => void;
 }
 
 export default function PlayerCardMeta({ playState, audioInfo, className, onRouterPush }: IProps) {
@@ -44,12 +46,7 @@ export default function PlayerCardMeta({ playState, audioInfo, className, onRout
       {/* 歌曲信息 */}
       <div>
         {/* 期刊号 */}
-        {audioInfo?.journalNo && (
-          <span
-            className="block w-fit mt-24px py-[7px] px-[15px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] hover:text-brand text-[13px] leading-[17px] font-bold cursor-pointer transition-color-200"
-            onClick={() => onRouterPush(audioInfo?.journalNo)}
-          >{`VOL.${audioInfo.journalNo.toString().padStart(4, '0')}`}</span>
-        )}
+        {audioInfo?.journalNo && <VolTag no={audioInfo.journalNo} onClick={() => onRouterPush(audioInfo.journalNo)} />}
 
         {/* 歌曲名 */}
         <p className="w-[340px] mt-[12px] text-[20px] leading-[28px] text-base text-overflow">

src/components/common/VolTag.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import Link from 'next/link';
+
+interface IProps {
+  no: string;
+  onClick: () => void;
+}
+
+export default function VolTag({ no, onClick }: IProps) {
+  return (
+    <div>
+      <Link
+        className="block w-fit mt-24px py-[7px] px-[15px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] hover:text-brand text-[13px] leading-[17px] font-bold cursor-pointer transition-color-200"
+        href={`/vol/${no}`}
+      >
+        <div onClick={onClick}>{`VOL.${no.toString().padStart(4, '0')}`}</div>
+      </Link>
+    </div>
+  );
+}

src/components/index.ts

@@ -67,3 +67,4 @@ export { default as Search } from './Search/Search';
 export { default as HighlightText } from './common/HighlightText';
 export { default as Dialog } from './common/Dialog';
 export { default as VirtualSongList } from './common/VirtualSongList';
+export { default as VolTag } from './common/VolTag';