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,31 +18,39 @@ 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 }}
       />
-      {isFold && (
+      {showFold && (
-        <div className="absolute w-full h-[96px] top-0 left-0 bg-gradient-to-b from-[#ffffff00] to-[#fffffff2]" />
+        <>
+          {isFold && (
+            <div className="absolute w-full h-[96px] top-0 left-0 bg-gradient-to-b from-[#ffffff00] to-[#fffffff2]" />
+          )}
+          <div className="relative flex items-center text-[15px] pt-[17px]" onClick={handleToggle}>
+            {isFold ? (
+              <>
+                展开
+                <Icon name="icon_arrow_down" />
+              </>
+            ) : (
+              <>
+                收起
+                <Icon name="icon_arrow_up" />
+              </>
+            )}
+          </div>
+        </>
       )}
-      <div className="relative flex items-center text-[15px] pt-[17px]" onClick={handleToggle}>
-        {isFold ? (
-          <>
-            展开
-            <Icon name="icon_arrow_down" />
-          </>
-        ) : (
-          <>
-            收起
-            <Icon name="icon_arrow_up" />
-          </>
-        )}
-      </div>
     </div>
-  );
+  ) : null;
 }

src/components/JournalContent/index.tsx

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