update: 期刊页面ssg

src/app/journal/page.tsx

@@ -1,72 +1,18 @@
 /**
  * 期刊页面
  */
-import Image from 'next/image';
-
-import ArticalWrap from '@/components/ArticalWrap';
 import JournalBanner from '@/components/JournalBanner';
-import JournalComment from '@/components/JournalComment';
+import JournalContent from '@/components/JournalContent';
-import SongList from '@/components/SongList';
 
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = { title: '雀乐期刊' };
 
-// 获取期刊信息
+export default function Journal() {
-async function getJournalInfo(journalId: string) {
-  const res = await fetch(`http://api.indie.cn:9012/luoo-music/journal/${journalId}`);
-  return res.json();
-}
-
-// 获取期刊歌曲列表
-async function getSongList(journalId: string) {
-  const res = await fetch(`http://api.indie.cn:9012/luoo-music/song/journalId/${journalId}`);
-  return res.json();
-}
-
-async function getInfo(journalId: string) {
-  return await Promise.all([getJournalInfo(journalId), getSongList(journalId)]);
-}
-
-export default async function Journal({ searchParams: { id } }: any) {
-  const [res0, res1] = await getInfo(id);
-  const journalInfo = res0?.data;
-  const songList = res1?.data;
   return (
-    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2] bg-white">
+    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2] bg-gradient-to-b from-[#030303] to-[#1f1f20]">
       <JournalBanner />
-
+      <JournalContent />
-      {/* 期刊封面图 */}
-      <div className="relative w-[100vw] h-[264.84px]">
-        <Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
-      </div>
-
-      <section className="relative w-full flex-1 bg-white mt-[-10px] rounded-tl-[12px] rounded-tr-[12px] z-1 py-[17px] px-[18px] mb-[79px]">
-        <div className="flex items-center flex-wrap text-[#000000b2] mb-[5px]">
-          <div className="text-[14px] font-medium leading-[19.6px]">VOL·{journalInfo?.journalNo}</div>
-          <div className="ml-[11px] flex items-center flex-wrap text-[12px] leading-[12px]">
-            {journalInfo?.tags?.map((tag: string, index: number) => (
-              <div
-                className={`h-[18px] py-[3px] px-[10px] rounded-[15px] bg-[#0000000c] flex items-center ${index !== 0 && 'ml-[6px]'}`}
-                key={tag}
-              >
-                {tag}
-              </div>
-            ))}
-          </div>
-        </div>
-        <h5 className="font-medium text-[20px] leading-[28px]">{journalInfo?.title}</h5>
-        <p className="flex item-center text-[#00000066] text-[12px] leading-[17px] mt-[3px]">
-          <span className="mr-[12px]">{journalInfo?.editor}</span>
-          <span>{journalInfo?.date}</span>
-        </p>
-
-        <ArticalWrap content={journalInfo?.content} />
-
-        <SongList list={songList} />
-      </section>
-
-      <JournalComment journalInfo={journalInfo} />
     </main>
   );
 }

src/components/JournalComment/index.tsx

@@ -9,7 +9,7 @@ export default function JournalComment({ journalInfo }: { journalInfo: any }) {
     router.push('/download');
   };
   return (
-    <section className="w-full flex items-center border-t-[1px] border-[#00000019] pt-[14px] pb-[35px] px-[18px]">
+    <section className="w-full flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white">
       <div
         className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
         onClick={handleClick}

src/components/JournalContent/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 期刊内容
+ */
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+
+import ArticalWrap from '@/components/ArticalWrap';
+import JournalComment from '@/components/JournalComment';
+import SongList from '@/components/SongList';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = { title: '雀乐期刊' };
+
+// 获取期刊信息
+async function getJournalInfo(journalId: string) {
+  const res = await fetch(`http://api.indie.cn:9012/luoo-music/journal/${journalId}`);
+  return res.json();
+}
+
+// 获取期刊歌曲列表
+async function getSongList(journalId: string) {
+  const res = await fetch(`http://api.indie.cn:9012/luoo-music/song/journalId/${journalId}`);
+  return res.json();
+}
+
+async function getInfo(journalId: string) {
+  return await Promise.all([getJournalInfo(journalId), getSongList(journalId)]);
+}
+
+export default function JournalContent() {
+  const [journalInfo, setJournalInfo] = useState<any>();
+  const [songList, setSongList] = useState<ISong[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const { searchParams } = new URL(window.location.href);
+    setLoading(true);
+    getInfo((searchParams as any)?.get('id'))
+      .then(([res0, res1]) => {
+        setJournalInfo(res0?.data);
+        setSongList(res1?.data);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <>
+      {loading && (
+        <div className="w-full relative flex-1 text-[#ffffff66] flex items-center justify-center">加载中 ...</div>
+      )}
+      <div className={`w-full flex-1 flex-col ${loading ? 'hidden' : 'flex'}`}>
+        {/* 期刊封面图 */}
+        <div className="relative w-[100vw] h-[264.84px]">
+          <Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
+        </div>
+
+        <section className="relative w-full flex-1 bg-white mt-[-10px] rounded-tl-[12px] rounded-tr-[12px] z-1 py-[17px] px-[18px] pb-[79px]">
+          <div className="flex items-center flex-wrap text-[#000000b2] mb-[5px]">
+            <div className="text-[14px] font-medium leading-[19.6px]">VOL·{journalInfo?.journalNo}</div>
+            <div className="ml-[11px] flex items-center flex-wrap text-[12px] leading-[12px]">
+              {journalInfo?.tags?.map((tag: string, index: number) => (
+                <div
+                  className={`h-[18px] py-[3px] px-[10px] rounded-[15px] bg-[#0000000c] flex items-center ${index !== 0 && 'ml-[6px]'}`}
+                  key={tag}
+                >
+                  {tag}
+                </div>
+              ))}
+            </div>
+          </div>
+          <h5 className="font-medium text-[20px] leading-[28px]">{journalInfo?.title}</h5>
+          <p className="flex item-center text-[#00000066] text-[12px] leading-[17px] mt-[3px]">
+            <span className="mr-[12px]">{journalInfo?.editor}</span>
+            <span>{journalInfo?.date}</span>
+          </p>
+
+          <ArticalWrap content={journalInfo?.content} />
+
+          <SongList list={songList} />
+        </section>
+
+        <JournalComment journalInfo={journalInfo} />
+      </div>
+    </>
+  );
+}