feat: vol page 标签跳转

src/app/(website)/music/[category]/[[...page]]/page.tsx

@@ -2,7 +2,7 @@
 import { notFound } from 'next/navigation';
 
 import { Category, JournalRecommendList, JournalItem, Pagination, RedirectCheck, ButtonFM } from '@/components';
-import { apiSearchCategoryList, apiGetJournalRecommendWithCollect, apiJournalList } from '@/services';
+import { apiSearchCategoryList, apiGetJournalRecommendWithCollect, apiJournalList, apiGetTags } from '@/services';
 
 export async function generateMetadata({ params: { category } }: { params: { category?: string } }) {
   if (category && category !== 'all') {
@@ -12,6 +12,16 @@ export async function generateMetadata({ params: { category } }: { params: { cat
   }
 }
 
+const apiGetTagList = async () => {
+  const result = await apiGetTags();
+  if (result.code !== 200) return notFound();
+  const list: TagInfo[] = result.data.map((item) => {
+    return { ...item, engName: item.engName.replace(/ /g, '') };
+  });
+
+  return list;
+};
+
 const getCategoryList = async () => {
   const result = await apiSearchCategoryList();
   if (result.code !== 200) return notFound();
@@ -52,8 +62,8 @@ export default async function Journal({ params }: { params: { category?: string;
 
   // 获取期刊分类
   const categoryList = await getCategoryList();
-  const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
-
+  const tagList = await apiGetTagList();
+  const categoryInfo: TagInfo | undefined = tagList.find((item: TagInfo) => item.engName === category);
   // 获取热门推荐、期刊列表
   const [recommendList, journalList] = await Promise.all([
     getRecommendList(),

src/app/(website)/vol/[journalId]/page.tsx

@@ -1,8 +1,9 @@
 /** 期刊详情 */
+import Link from 'next/link';
 import { notFound, redirect, RedirectType } from 'next/navigation';
 
 import { SongCardList, JournalRecommendList, Comment, CollectButton, VolDetailCoverCard } from '@/components';
-import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
+import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById, apiGetTags } from '@/services';
 
 export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
   const res = await apiGetJournalInfoById({ id: journalId });
@@ -11,13 +12,19 @@ export async function generateMetadata({ params: { journalId } }: { params: { jo
 }
 
 const getData = async (journalId: string) => {
-  const [journalInfoRes, songListRes, recommendList] = await Promise.all([
+  const [journalInfoRes, songListRes, recommendList, tagList] = await Promise.all([
     apiGetJournalInfoById({ id: journalId }),
     apiGetSongsByJournalNo({ id: journalId }),
     apiGetJournalRecommendById({ id: journalId, limit: 8 }),
+    apiGetTags(),
   ]);
   if (!(journalInfoRes.code === 200 && songListRes.code === 200)) return notFound();
-  return { journalInfo: journalInfoRes.data, songList: songListRes.data, recommendList: recommendList.data };
+  return {
+    journalInfo: journalInfoRes.data,
+    songList: songListRes.data,
+    recommendList: recommendList.data,
+    tagList: tagList.data,
+  };
 };
 
 export default async function JournalDetail({
@@ -27,7 +34,7 @@ export default async function JournalDetail({
   params: { journalId: string };
   searchParams: { mobile: string };
 }) {
-  const { journalInfo, songList, recommendList } = await getData(journalId);
+  const { journalInfo, songList, recommendList, tagList } = await getData(journalId);
 
   if (mobile) {
     redirect(`${process.env.NEXT_PUBLIC_MOBILE_HOST}/journal.html?id=${journalInfo.id}`, RedirectType.replace);
@@ -42,14 +49,15 @@ export default async function JournalDetail({
           {/* 期刊号 & 标签 */}
           <div className="flex flex-row items-center gap-[9px]">
             <div className="text-[rgba(0,0,0,0.7)] text-14px leading-20px">{`VOL.${journalInfo?.journalNo.toString().padStart(4, '0')}`}</div>
-            {journalInfo?.tags.length > 0 &&
-              journalInfo.tags.map((tag: string) => (
-                <span
-                  key={tag}
+            {journalInfo?.tagInfos.length > 0 &&
+              journalInfo.tagInfos.map((tag: TagInfo) => (
+                <Link
+                  href={`/music/${tagList.find((item) => item.name === tag.name)?.engName.replace(/ /g, '')}`}
+                  key={tag.id}
                   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>
+                  {tag.name}
+                </Link>
               ))}
           </div>
 

src/services/server/journal.ts

@@ -113,3 +113,14 @@ export const apiGetSongsByJournalNo: (params: { id: string }) => Promise<FetchRe
   const res = await serverHttp.get(request);
   return res;
 };
+
+export const apiGetTags: () => Promise<FetchResponse<TagInfo[]>> = async () => {
+  const request = new Request('http://localhost/', {
+    method: 'GET',
+    headers: {
+      requestUrl: '/music/search/tag',
+    },
+  });
+  const res = await serverHttp.get(request);
+  return res;
+};

src/types/reqeust.d.ts

@@ -89,6 +89,7 @@ declare interface JournalInfo {
   totalCommentReplyInt: number;
   /** 期刊总收藏数 int */
   userCollectCount: number;
+  tagInfos: TagInfo[];
 }
 
 /**
@@ -189,3 +190,9 @@ interface VersionCheck {
   forceUpdate: boolean;
   url: string;
 }
+
+interface TagInfo {
+  id: string;
+  name: string;
+  engName: string;
+}