update: vol list page

src/app/discover/journal/[category]/page.tsx

@@ -1,36 +0,0 @@
-import { Category, JournalList, HotJournalList } from '@/components';
-import { apiTagName } from '@/services/server';
-
-export async function generateStaticParams() {
-  const tagNameList = await apiTagName({ level: 1, state: 1 });
-
-  return tagNameList.map((item: TagName) => {
-    return {
-      category: item.nameEn,
-    };
-  });
-}
-
-export default async function Journal({ params }: { params: { category: string } }) {
-  const tagNameList = await apiTagName({ level: 1, state: 1 });
-  const currentTag: TagName = tagNameList.find((item: TagName) => item.nameEn === params.category);
-  const page = 1;
-
-  return (
-    <main className="flex flex-row justify-between w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
-      {/* 左侧 */}
-      <div className="w-[712px] mt-[50px]">
-        {/* category */}
-        <Category current={currentTag.nameEn} />
-        {/* 期刊列表 */}
-        <JournalList categoryId={currentTag.id} pageNum={page} />
-      </div>
-
-      {/* 右侧 */}
-      <div className="w-[346px] mt-[217px]">
-        {/* 热门推荐 */}
-        <HotJournalList />
-      </div>
-    </main>
-  );
-}

src/app/vol/list/[category]/page.tsx

@@ -0,0 +1,40 @@
+import { Category, JournalList, HotJournalList } from '@/components';
+import { apiSearchCategory } from '@/services/server';
+
+export async function generateStaticParams() {
+  const tagNameList: Category[] = await apiSearchCategory();
+  tagNameList.push({
+    id: '0',
+    nameCh: '全部',
+    nameEn: 'all',
+    image: '',
+    thumbnail: '',
+    description: '',
+  });
+
+  return tagNameList.map((item: Category) => ({ category: item.nameEn }));
+}
+
+export default async function Journal({ params }: { params: { category: string } }) {
+  const tagNameList: Category[] = await apiSearchCategory();
+  const currentTag: Category | undefined = tagNameList.find((item: Category) => item.nameEn === params.category);
+  const page = 1;
+
+  return (
+    <main className="flex flex-row justify-between w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
+      {/* 左侧 */}
+      <div className="w-[712px] mt-[50px]">
+        {/* category */}
+        <Category current={currentTag?.nameEn ?? 'all'} />
+        {/* 期刊列表 */}
+        <JournalList categoryId={currentTag?.id ?? '0'} nameCh={currentTag?.nameCh ?? '全部'} pageNum={page} />
+      </div>
+
+      {/* 右侧 */}
+      <div className="w-[346px] mt-[217px]">
+        {/* 热门推荐 */}
+        <HotJournalList categoryId="1" />
+      </div>
+    </main>
+  );
+}

src/components/Category.tsx

@@ -1,16 +1,23 @@
 import Link from 'next/link';
 
-import { apiTagName } from '@/services/server/journal';
+import { apiSearchCategory } from '@/services/server/journal';
 
 const Category = async ({ current = '' }: { current?: string }) => {
-  const tagNameList = await apiTagName({ level: 1, state: 1 });
-  tagNameList.unshift({ id: '0', nameCh: '全部', nameEn: '', level: 1, parentId: '', state: 1 });
+  const categoryList = await apiSearchCategory();
+  categoryList.unshift({
+    id: 0,
+    nameCh: '全部',
+    nameEn: 'all',
+    image: '',
+    thumbnail: '',
+    description: '',
+  });
 
   return (
     <div className={`grid grid-cols-8`}>
-      {tagNameList.map((item: TagName) => (
+      {categoryList.map((item: Category) => (
         <Link
-          href={`/discover/journal/${item.nameEn}`}
+          href={`/vol/list/${item.nameEn}`}
           key={item.id}
           className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.nameEn ? 'bg-[#B44343] text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'}`}
         >

src/components/Header.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import React, { useState } from 'react';
 
 import Link from 'next/link';
@@ -22,6 +23,10 @@ export default function Header() {
       name: '关于我们',
       path: '/about',
     },
+    {
+      name: 'test',
+      path: '/vol/list/interview',
+    },
   ];
 
   const [showLoginModal, setShowLoginModal] = useState(false);
@@ -31,7 +36,7 @@ export default function Header() {
   };
 
   return (
-    <header className="absolute top-0 w-full h-[80px]">
+    <header className="absolute top-0 w-full h-[80px] z-2">
       <div className="w-[1200px] h-full mx-auto flex items-center justify-between">
         <Logo />
 

src/components/Journal/JournalList.tsx

@@ -6,11 +6,13 @@ import { apiJournalList } from '@/services/server/journal';
 
 const JournalList = async ({
   categoryId,
+  nameCh,
   journalNoRange,
   pageNum,
   pageSize,
 }: {
   categoryId?: string;
+  nameCh: string;
   journalNoRange?: string;
   pageNum?: number;
   pageSize?: number;
@@ -26,7 +28,7 @@ const JournalList = async ({
     <div className="flex flex-col mt-[33px]">
       {/* 分类 & 电台 */}
       <div className="flex flex-row items-center justify-between">
-        <div className="text-[17px] leading-[23.8px]">{'摇滚'}</div>
+        <div className="text-[17px] leading-[23.8px]">{nameCh}</div>
         <div className="flex flex-row items-center cursor-pointer">
           <Image className="mr-[6px]" width={24} height={24} src={'/img/icon/fm.svg'} alt="FM" />
           <p className="text-[15px] leading-[21px]">电台</p>

src/services/server/journal.ts

@@ -35,18 +35,9 @@ export const apiJournalFilter = async () => {
  * @parentId 父标签id
  * @state 状态
  */
-export const apiTagName = async ({
-  level = 1,
-  parentId = '',
-  state = 1,
-}: {
-  level?: number;
-  parentId?: string;
-  state?: number;
-}) => {
-  const result: FetchResponse<TagName[]> = await request(
-    `/luoo-tag/tag/name?level=${level}&parentId=${parentId}&state=${state}`,
-  );
+export const apiSearchCategory = async () => {
+  const result: FetchResponse<Category[]> = await request(`/luoo-music/search/category`);
+
   return verifyResponse(result);
 };
 
@@ -55,6 +46,5 @@ export const apiTagName = async ({
  */
 export const apiJournalRecommend = async ({ id }: { id: string }) => {
   const result: FetchResponse<JournalInfo[]> = await request(`/luoo-music/journal/recommend/${id}`);
-  console.log({ result });
   return verifyResponse(result);
 };

src/types/reqeust.d.ts

@@ -21,6 +21,21 @@ declare interface TagName {
   state: number;
 }
 
+declare interface Category {
+  /** ID */
+  id: string;
+  /** 中文名称 */
+  nameCh: string;
+  /** 英文名称 */
+  nameEn: string;
+  /** 图片路径 */
+  image: string;
+  /** 缩略图路径   */
+  thumbnail: string;
+  /** 说明文案 */
+  description: string;
+}
+
 declare interface JournalList {
   total: number;
   rows: JournalInfo[];