From 1c654a511862564b3632f5e52d60301d4b877845 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 13 Nov 2024 14:24:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=BE=AE?=
 =?UTF-8?q?=E8=B0=83=20Magzine=E5=92=8CNext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/magzine/components/Header.js           |  2 +-
 themes/magzine/components/MenuItemDrop.js     |  4 ++--
 themes/magzine/components/PostItemCardTop.js  | 22 +++++++++----------
 themes/magzine/components/PostItemCardWide.js | 22 +++++++++----------
 themes/magzine/components/PostNavAround.js    |  2 +-
 themes/magzine/components/Progress.js         |  4 ++--
 themes/next/components/MenuItemDrop.js        |  6 ++---
 themes/next/components/SideAreaLeft.js        |  2 +-
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/themes/magzine/components/Header.js b/themes/magzine/components/Header.js
index aa0463e4ea4..45b6547a746 100644
--- a/themes/magzine/components/Header.js
+++ b/themes/magzine/components/Header.js
@@ -148,7 +148,7 @@ export default function Header(props) {
             <div className='flex gap-x-8 h-full'>
               <LogoBar {...props} />
               {/* 桌面端顶部菜单 */}
-              <div className='hidden md:flex items-center gap-x-4'>
+              <div className='hidden md:flex items-center gap-x-4 py-1'>
                 {links &&
                   links?.map((link, index) => (
                     <MenuItemDrop key={index} link={link} />
diff --git a/themes/magzine/components/MenuItemDrop.js b/themes/magzine/components/MenuItemDrop.js
index 95a7cdb5f43..4fd096238e5 100644
--- a/themes/magzine/components/MenuItemDrop.js
+++ b/themes/magzine/components/MenuItemDrop.js
@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <div
           className={
-            'h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            'px-2 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
             (selected
               ? 'bg-gray-600 text-white hover:text-white'
               : 'hover:text-gray-600')
@@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-10'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
           {link?.subMenus?.map(sLink => {
             return (
               <li
diff --git a/themes/magzine/components/PostItemCardTop.js b/themes/magzine/components/PostItemCardTop.js
index 765f441d342..fa71f6c40fd 100644
--- a/themes/magzine/components/PostItemCardTop.js
+++ b/themes/magzine/components/PostItemCardTop.js
@@ -13,11 +13,11 @@ import TagItemMini from './TagItemMini'
  * @returns
  */
 const PostItemCardTop = ({ post, showSummary }) => {
-  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
   const { locale } = useGlobal()
   return (
     <div
-      key={post.id}
+      key={post?.id}
       // data-aos='fade-up'
       // data-aos-duration='300'
       // data-aos-once='false'
@@ -26,7 +26,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
       <div className='flex flex-col w-full'>
         {siteConfig('MAGZINE_POST_LIST_COVER') && post?.pageCoverThumbnail && (
           <Link
-            href={post?.href}
+            href={post?.href || ''}
             passHref
             className={
               'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
@@ -35,8 +35,8 @@ const PostItemCardTop = ({ post, showSummary }) => {
               <LazyImage
                 priority
                 alt={post?.title}
-                src={post.pageCoverThumbnail}
-                style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+                src={post?.pageCoverThumbnail}
+                style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
                 className='w-full max-h-80 object-cover hover:scale-125 duration-150'
               />
             </div>
@@ -45,7 +45,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
 
         <div className='flex py-2 mr-2 items-center'>
           {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
-            <CategoryItem category={post.category} />
+            <CategoryItem category={post?.category} />
           )}
           <div
             className={
@@ -59,16 +59,16 @@ const PostItemCardTop = ({ post, showSummary }) => {
         </div>
 
         <Link
-          href={post?.href}
+          href={post?.href || ''}
           passHref
           className={
             'cursor-pointer hover:underline leading-tight dark:text-gray-300  dark:hover:text-gray-400'
           }>
           <h2 className='text-4xl'>
             {siteConfig('POST_TITLE_ICON') && (
-              <NotionIcon icon={post.pageIcon} />
+              <NotionIcon icon={post?.pageIcon} />
             )}
-            {post.title}
+            {post?.title}
           </h2>
         </Link>
 
@@ -76,7 +76,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
 
         {(!showPreview || showSummary) && (
           <main className='my-4 text-gray-900 dark:text-gray-300 text-lg  leading-7'>
-            {post.summary}
+            {post?.summary}
           </main>
         )}
 
@@ -97,7 +97,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
           </div>
         )}
 
-        <div className='text-sm py-1'>{post.date?.start_date}</div>
+        <div className='text-sm py-1'>{post?.date?.start_date}</div>
       </div>
     </div>
   )
diff --git a/themes/magzine/components/PostItemCardWide.js b/themes/magzine/components/PostItemCardWide.js
index 49ab3bca085..2aec9a8e2d6 100644
--- a/themes/magzine/components/PostItemCardWide.js
+++ b/themes/magzine/components/PostItemCardWide.js
@@ -12,32 +12,32 @@ import CategoryItem from './CategoryItem'
  * @returns
  */
 const PostItemCardWide = ({ post, showSummary }) => {
-  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
   const { locale } = useGlobal()
   return (
-    <div key={post.id} className='flex justify-between gap-x-6'>
+    <div key={post?.id} className='flex justify-between gap-x-6'>
       {/* 卡牌左侧 */}
       <div className='h-40 w-96 gap-y-3 flex flex-col'>
         {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
-          <CategoryItem category={post.category} />
+          <CategoryItem category={post?.category} />
         )}
         <Link
-          href={post?.href}
+          href={post?.href || ''}
           passHref
           className={
             ' cursor-pointer font-semibold hover:underline text-xl leading-tight dark:text-gray-300  dark:hover:text-gray-400'
           }>
           <h3 className='max-w-80 break-words'>
             {siteConfig('POST_TITLE_ICON') && (
-              <NotionIcon icon={post.pageIcon} />
+              <NotionIcon icon={post?.pageIcon} />
             )}
-            {post.title}
+            {post?.title}
           </h3>
         </Link>
 
         {(!showPreview || showSummary) && (
           <main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
-            {post.summary}
+            {post?.summary}
           </main>
         )}
 
@@ -47,7 +47,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
             <div className='pointer-events-none border-t pt-8 border-dashed'>
               <div className='w-full justify-start flex'>
                 <Link
-                  href={post?.href}
+                  href={post?.href || ''}
                   passHref
                   className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
                   {locale.COMMON.ARTICLE_DETAIL}
@@ -66,7 +66,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
             post?.tagItems?.map(tag => (
               <TagItemMini key={tag.name} tag={tag} />
             ))} */}
-          <div className='text-sm py-1'>{post.date?.start_date}</div>
+          <div className='text-sm py-1'>{post?.date?.start_date}</div>
         </div>
       </div>
 
@@ -74,8 +74,8 @@ const PostItemCardWide = ({ post, showSummary }) => {
       <div className='w-40 h-40 object-cover overflow-hidden mb-2'>
         <LazyImage
           alt={post?.title}
-          src={post.pageCoverThumbnail}
-          style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+          src={post?.pageCoverThumbnail}
+          style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
           className='w-40 h-40 object-cover hover:scale-125 duration-150'
         />
       </div>
diff --git a/themes/magzine/components/PostNavAround.js b/themes/magzine/components/PostNavAround.js
index 3eb1222cd1c..754e1257ca4 100644
--- a/themes/magzine/components/PostNavAround.js
+++ b/themes/magzine/components/PostNavAround.js
@@ -90,7 +90,7 @@ export default function PostNavAround({ prev, next }) {
         className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
         <Link
           href={`/${next.slug}`}
-          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-800 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
           <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
           <hr className='mt-2 mb-3' />
           <div className='line-clamp-2'>{next?.title}</div>
diff --git a/themes/magzine/components/Progress.js b/themes/magzine/components/Progress.js
index 38ad79c4be9..31ef6a24d60 100644
--- a/themes/magzine/components/Progress.js
+++ b/themes/magzine/components/Progress.js
@@ -29,9 +29,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [])
 
   return (
-    <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
+    <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-gray-900'>
       <div
-        className='h-4 bg-black dark:bg-hexo-black-gray duration-200'
+        className='h-4 dark:bg-black bg-hexo-black-gray duration-200'
         style={{ width: `${percent}%` }}>
         {showPercent && (
           <div className='text-right text-white text-xs'>{percent}%</div>
diff --git a/themes/next/components/MenuItemDrop.js b/themes/next/components/MenuItemDrop.js
index aec9212e65e..b4078e4369c 100644
--- a/themes/next/components/MenuItemDrop.js
+++ b/themes/next/components/MenuItemDrop.js
@@ -42,18 +42,18 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} ml-3 whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
           {link?.subMenus?.map(sLink => {
             return (
               <li key={sLink.id}>
                 <Link
                   href={sLink.href}
                   target={link?.target}
-                  className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 '>
+                  className='my-auto h-9 pl-4 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 '>
                   {sLink.icon && (
                     <i className={`${sLink.icon} w-4 text-center`} />
                   )}
-                  <div className={'ml-4'}>{sLink.name}</div>
+                  {sLink.name}
                   {sLink.slot}
                 </Link>
               </li>
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index e2800a7cbad..cd52d935a1b 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -28,7 +28,7 @@ const SideAreaLeft = props => {
       id='left'
       className={
         (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') +
-        ' hidden lg:block flex-col w-60 z-20 relative'
+        ' hidden lg:block flex-col w-60 relative z-30'
       }>
       <section className='w-60'>
         {/* 菜单 */}