update: 跳转

src/app/journal/page.tsx

@@ -4,6 +4,8 @@
 import Image from 'next/image';
 
 import ArticalWrap from '@/components/ArticalWrap';
+import JournalBanner from '@/components/JournalBanner';
+import JournalComment from '@/components/JournalComment';
 import SongList from '@/components/SongList';
 
 import type { Metadata } from 'next';
@@ -32,11 +34,7 @@ export default async function Journal({ searchParams: { id } }: any) {
   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">
-      <div className="flex items-center w-full bg-[#000000f2] text-[#ffffffb2] text-[14px] py-[12px] px-[18px]">
+      <JournalBanner />
-        <Image className="w-[28px] h-[28px]" width={28} height={28} src="/img/app_icon_white_bg.svg" alt="queyue" />
-        <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
-        <Image className="w-[24px] h-[24px]" width={24} height={24} src="/img/jourrnal_icon-5.svg" alt="right-arrow" />
-      </div>
 
       {/* 期刊封面图 */}
       <div className="relative w-[100vw] h-[264.84px]">
@@ -68,26 +66,7 @@ export default async function Journal({ searchParams: { id } }: any) {
         <SongList list={songList} />
       </section>
 
-      <section className="w-full flex items-center border-t-[1px] border-[#00000019] pt-[14px] pb-[35px] px-[18px]">
+      <JournalComment journalInfo={journalInfo} />
-        <div className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]">
-          说点想说的
-        </div>
-        <div className="relative ml-[14px]">
-          <Image
-            className="w-[24px] h-[24px]"
-            width={24}
-            height={24}
-            unoptimized
-            src="/img/icon_comment.png"
-            alt="icon_comment"
-          />
-          {journalInfo && journalInfo.totalCommentReplyInt > 0 && (
-            <div className="absolute top-0 left-[100%] text-[8px] text-[#00000066]">
-              {journalInfo?.totalCommentReply}
-            </div>
-          )}
-        </div>
-      </section>
     </main>
   );
 }

src/app/music/page.tsx

@@ -1,9 +1,9 @@
 /**
  * 歌曲播放页面
  */
-import Image from 'next/image';
 
 import EnterQueyueBtn from '@/components/EnterQueyueBtn';
+import MusicBanner from '@/components/MusicBanner';
 import MusicPanel from '@/components/MusicPanel';
 
 async function getMusic(songId: string) {
@@ -16,11 +16,7 @@ export default async function Music({ searchParams: { id } }: any) {
   const musicInfo = res?.data;
   return (
     <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center text-white font-normal bg-gradient-to-b from-[#030303] to-[#1f1f20] px-[18px]">
-      <div className="flex items-center w-full bg-[#1d1d1d] text-[#ffffffb2] text-[14px] py-[12px] px-[18px] rounded-[6px] mt-[4px]">
+      <MusicBanner />
-        <Image className="w-[28px] h-[28px]" width={28} height={28} src="/img/app_icon_white_bg.svg" alt="queyue" />
-        <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
-        <Image className="w-[24px] h-[24px]" width={24} height={24} src="/img/jourrnal_icon-5.svg" alt="right-arrow" />
-      </div>
 
       <MusicPanel musicInfo={musicInfo} />
 

src/app/page.tsx

@@ -4,20 +4,24 @@ import { useRef } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import AppLogo from '@/components/AppLogo';
 import WXShareBtn from '@/components/WXComponent/WXShareBtn';
 
-import { download } from '@/utils/download';
-
 import useUA from '@/hooks/useUA';
 
 export default function Home() {
+  const router = useRouter();
   const firstScreenRef = useRef<HTMLDivElement>(null);
   const { inWX } = useUA();
 
   const handleDownload = () => {
-    download();
+    if (!inWX) {
+      window.open('//cdn.indie.cn/release/queyue.apk', '__blank');
+    } else {
+      router.push('/download');
+    }
   };
 
   const handleSlideDown = () => {

src/components/JournalBanner/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+export default function JournalBanner() {
+  const router = useRouter();
+  const handleClick = () => {
+    router.push('/download');
+  };
+  return (
+    <div
+      className="flex items-center w-full bg-[#000000f2] text-[#ffffffb2] text-[14px] py-[12px] px-[18px]"
+      onClick={handleClick}
+    >
+      <Image className="w-[28px] h-[28px]" width={28} height={28} src="/img/app_icon_white_bg.svg" alt="queyue" />
+      <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
+      <Image
+        className="w-[24px] h-[24px] mr-[-6px]"
+        width={24}
+        height={24}
+        src="/img/jourrnal_icon-5.svg"
+        alt="right-arrow"
+      />
+    </div>
+  );
+}

src/components/JournalComment/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+export default function JournalComment({ journalInfo }: { journalInfo: any }) {
+  const router = useRouter();
+  const handleClick = () => {
+    router.push('/download');
+  };
+  return (
+    <section className="w-full flex items-center border-t-[1px] border-[#00000019] pt-[14px] pb-[35px] px-[18px]">
+      <div
+        className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
+        onClick={handleClick}
+      >
+        说点想说的
+      </div>
+      <div className="relative ml-[14px]" onClick={handleClick}>
+        <Image
+          className="w-[24px] h-[24px]"
+          width={24}
+          height={24}
+          unoptimized
+          src="/img/icon_comment.png"
+          alt="icon_comment"
+        />
+        {journalInfo && journalInfo.totalCommentReplyInt > 0 && (
+          <div className="absolute top-0 left-[100%] text-[8px] text-[#00000066]">{journalInfo?.totalCommentReply}</div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/MusicBanner/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+export default function MusicBanner() {
+  const router = useRouter();
+  const handleClick = () => {
+    router.push('/download');
+  };
+  return (
+    <div
+      className="flex items-center w-full bg-[#1d1d1d] text-[#ffffffb2] text-[14px] py-[12px] px-[18px] rounded-[6px] mt-[4px]"
+      onClick={handleClick}
+    >
+      <Image className="w-[28px] h-[28px]" width={28} height={28} src="/img/app_icon_white_bg.svg" alt="queyue" />
+      <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
+      <Image className="w-[24px] h-[24px]" width={24} height={24} src="/img/jourrnal_icon-5.svg" alt="right-arrow" />
+    </div>
+  );
+}