update: discover journal page

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

@@ -0,0 +1,36 @@
+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]">
+        <p className="text-[17px] leading-[23.8px]">热门推荐</p>
+        {/* <HotJournalList /> */}
+      </div>
+    </main>
+  );
+}

src/app/discover/journal/page.tsx

@@ -1,21 +0,0 @@
-import { TagCategory, JournalList } from '@/components';
-
-export default function Home() {
-  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 */}
-        <TagCategory />
-        {/* 期刊列表 */}
-        <JournalList />
-      </div>
-
-      {/* 右侧 */}
-      <div className="w-[346px] mt-[217px]">
-        <p className="text-[17px] leading-[23.8px]">热门推荐</p>
-        <div></div>
-      </div>
-    </main>
-  );
-}

src/app/page.tsx

@@ -10,7 +10,7 @@ export default function Home() {
       {/* 左侧 */}
       <div className="w-[712px] mt-[50px]">
         {/* category */}
-        <TagCategory />
+        <TagCategory category={'all'} />
         {/* 期刊列表 */}
       </div>
 

src/components/Category.tsx

@@ -1,21 +1,24 @@
+import Link from 'next/link';
+
 import { apiTagName } from '@/services/server/journal';
 
-const Avatar = async () => {
+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 });
 
   return (
     <div className={`grid grid-cols-8`}>
       {tagNameList.map((item: TagName) => (
-        <div
+        <Link
+          href={`/discover/journal/${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.id ? 'bg-[#B44343] text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'}`}
+          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]'}`}
-          className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer bg-[#F2F3F7] text-[#000]`}
         >
           {item.nameCh}
-        </div>
+        </Link>
       ))}
     </div>
   );
 };
 
-export default Avatar;
+export default Category;

src/components/Journal/HotJournalCard.tsx

@@ -0,0 +1,13 @@
+import Image from 'next/image';
+
+export default function JournalCard({ title, image, totalCommentReply }: JournalInfo) {
+  return (
+    <div>
+      <Image src={image} alt={title} width={80} height={56} className="w-[80px] h-[56px] rounded-[3px]" />
+      <div>
+        <p className="text-[15px] leading-[21px]">{title}</p>
+        <p className="text-[13px] leading-[18.2px]">{totalCommentReply}</p>
+      </div>
+    </div>
+  );
+}

src/components/Journal/HotJournalList.tsx

@@ -1,6 +1,4 @@
-import Image from 'next/image';
+import HotJournalCard from './HotJournalCard';
-
-import JournalCard from './JournalCard';
 
 import { apiJournalList } from '@/services/server/journal';
 
@@ -25,18 +23,12 @@ const RecommondJournal = async ({
   return (
     <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]">{'摇滚'}</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>
-        </div>
-      </div>
 
       {/* 期刊 list */}
       <div className="flex flex-col gap-[60px] mt-[17px]">
         {journalList.rows.map((item: JournalInfo) => (
-          <JournalCard key={item.id} {...item} />
+          <HotJournalCard key={item.id} {...item} />
         ))}
       </div>
     </div>

src/components/index.ts

@@ -3,7 +3,7 @@ export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 
 // Home
-export { default as TagCategory } from './TagCategory';
+export { default as Category } from './Category';
 export { default as ContributorCard } from './ContributorCard';
 
 // Login
@@ -13,6 +13,8 @@ export { default as LoginForm } from './Login/LoginForm';
 // Journal
 export { default as JournalCard } from './Journal/JournalCard';
 export { default as JournalList } from './Journal/JournalList';
+export { default as HotJournalCard } from './Journal/HotJournalCard';
+export { default as HotJournalList } from './Journal/HotJournalList';
 
 // Common
 export { default as Input } from './common/Input';