fix: 期刊页面内容展示优化

src/app/journal/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = { title: '雀乐期刊' };
 
 export default function Journal() {
   return (
-    <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]">
+    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center font-normal text-[#000000f2]">
       <InviteBanner />
       <JournalContent />
     </main>

src/components/ArticalWrap/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import ImageWithBasePath from '@/components/ImageWithBasePath';
 
@@ -18,15 +18,21 @@ const Icon = ({ name }: { name: string }) => (
 export default function ArticalWrap(props: { content?: any }) {
   const { content } = props;
   const [isFold, setIsFold] = useState(true);
+
+  const showFold = useMemo(() => content?.length > 84, [content]);
+
   const handleToggle = () => {
     setIsFold(!isFold);
   };
-  return (
-    <div className="relative text-[#000000b2] text-[15px] mt-[15px] mb-[36px]">
+
+  return content ? (
+    <div className="relative text-[#000000b2] text-[15px] mt-[15px]">
       <article
-        className={`leading-[25px] overflow-hidden ${isFold && 'h-[96px]'}`}
+        className={`leading-[25px] overflow-hidden ${showFold && isFold && 'h-[96px]'}`}
         dangerouslySetInnerHTML={{ __html: content }}
       />
+      {showFold && (
+        <>
           {isFold && (
             <div className="absolute w-full h-[96px] top-0 left-0 bg-gradient-to-b from-[#ffffff00] to-[#fffffff2]" />
           )}
@@ -43,6 +49,8 @@ export default function ArticalWrap(props: { content?: any }) {
               </>
             )}
           </div>
+        </>
+      )}
     </div>
-  );
+  ) : null;
 }

src/components/JournalContent/index.tsx

@@ -88,7 +88,9 @@ export default function JournalContent() {
 
           <ArticalWrap content={journalInfo?.content} />
 
+          <div className="mt-[36px]">
             <SongList list={songList} />
+          </div>
         </section>
 
         <JournalComment journalInfo={journalInfo} />