chore: Update meta title and add navigation event to UserCard.

src/app/about/page.tsx

@@ -5,6 +5,11 @@ import styles from './about.module.css';
 import { ContributorCard } from '@/components';
 import { apiThanks } from '@/services';
 
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '关于我们',
+};
 export interface ContributorCardType {
   id: string;
   nickName: string;

src/app/download/components/DownloadCard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 
 import Image from 'next/image';

src/app/download/page.tsx

@@ -1,9 +1,13 @@
-'use client';
-
 import Image from 'next/image';
 
 import DownloadCard from '@/app/download/components/DownloadCard';
 
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '下载',
+};
+
 const qrCodeList: Array<DownloadQrcodeCard> = [
   {
     platform: 'APP Store',

src/app/layout.tsx

@@ -1,10 +1,14 @@
+import { Metadata, Viewport } from 'next';
+
 import { Header, Footer, PlayerBar } from '@/components';
 
-import type { Metadata, Viewport } from 'next';
 import './globals.css';
 
 export const metadata: Metadata = {
-  title: '雀乐',
+  title: {
+    template: '%s - 雀乐',
+    default: '雀乐',
+  },
   description: '独立 不独于世',
   icons: {
     icon: '/favicon.ico',

src/app/mylist/page.tsx

@@ -4,6 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
+import Head from 'next/head';
 import { useShallow } from 'zustand/react/shallow';
 
 import styles from './index.module.css';
@@ -12,11 +13,10 @@ import { SongCardList } from '@/components';
 import { apiGetSongCollect } from '@/services';
 import useUserStore from '@/store/user';
 
-export default function Journal({ params }: { params: { category?: string; page?: number } }) {
+export default function Journal() {
-  const { userInfo, userLogout } = useUserStore(
+  const { userInfo } = useUserStore(
     useShallow((state) => ({
       userInfo: state.userInfo,
-      userLogout: state.userLogout,
     })),
   );
 
@@ -52,6 +52,7 @@ export default function Journal({ params }: { params: { category?: string; page?
   ];
 
   useEffect(() => {
+    document.title = '我的收藏 - 雀乐';
     getList();
   }, [type, pageNum]);
 

src/app/vol/[journalId]/page.tsx

@@ -6,6 +6,12 @@ import { notFound } from 'next/navigation';
 import { JournalCard, SongCardList, HotJournalList, Comment, Collect } from '@/components';
 import { apiGetJournalInfoById, apiGetSongsByJournalNo } from '@/services';
 
+export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
+  const res = await apiGetJournalInfoById({ id: journalId });
+  const title = res.code === 200 ? res.data.title : '期刊详情';
+  return { title };
+}
+
 const getData = async (journalId: string) => {
   const [journalInfoRes, songListRes] = await Promise.all([
     apiGetJournalInfoById({ id: journalId }),

src/app/vol/list/[category]/[[...page]]/page.tsx

@@ -3,6 +3,12 @@
 import { Category, JournalList, HotJournalList } from '@/components';
 import { apiSearchCategory } from '@/services';
 
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '期刊',
+};
+
 const getCategoryList = async () => {
   const result = await apiSearchCategory();
   return result.code === 200 ? result.data : [];

src/components/Header/UserCard.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from 'react';
 
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import { Avatar } from '@/components';
 import useUserStore from '@/store/user';
 
 interface Props {
+  onClose: () => void;
   className?: string;
 }
 
@@ -15,7 +17,8 @@ interface TDataList {
   value: number;
 }
 
-export default function UserCard({ className }: Props) {
+export default function UserCard({ onClose, className }: Props) {
+  const router = useRouter();
   const { userInfo, userLogout } = useUserStore(
     useShallow((state) => ({
       userInfo: state.userInfo,
@@ -30,6 +33,17 @@ export default function UserCard({ className }: Props) {
     { label: '获赞', value: userInfo.thumbUpCount },
   ]);
 
+  const handleGoMyList = () => {
+    router.push('/myList');
+    onClose();
+  };
+
+  const handleLogout = async () => {
+    await userLogout;
+    router.push('/');
+    onClose();
+  };
+
   useEffect(() => {
     setUserDataList([
       { label: '关注', value: userInfo.followCount },
@@ -64,13 +78,16 @@ export default function UserCard({ className }: Props) {
 
       {/* 按钮 */}
       <ul className="px-[15px] mt-[6px]">
-        <li className="flex flex-row justify-between items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer">
+        <li
+          className="flex flex-row justify-between items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer"
+          onClick={handleGoMyList}
+        >
           <span>我的收藏</span>
           <Image width={24} height={24} src="/img/icon/love.svg" alt="我的收藏" />
         </li>
         <li
           className="flex flex-row items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer"
-          onClick={userLogout}
+          onClick={handleLogout}
         >
           <span>退出登录</span>
         </li>

src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -80,7 +80,7 @@ export default function Header() {
             onMouseEnter={handleShowUserCard}
             onMouseLeave={handleHideUserCard}
           >
-            <UserCard />
+            <UserCard onClose={() => setShowUserCard(false)} />
           </div>
         )}
       </div>