fix: header bug

Author: 521xueweihan

public/locales/en/periodical.json

@@ -15,6 +15,8 @@
   "order_t7": "Projects",
   "order_t8": "Items",
   "order_t9": "Welcome to recommend",
+  "vol_prev": "Previous",
+  "vol_next": "Next",
   "page_prev": "Previous",
   "page_next": "Next",
   "category": {

public/locales/zh/periodical.json

@@ -15,6 +15,8 @@
   "order_t7": "项目数",
   "order_t8": "个",
   "order_t9": "欢迎推荐和自荐项目",
+  "vol_prev": "上一期",
+  "vol_next": "下一期",
   "page_prev": "上一页",
   "page_next": "下一页",
   "category": {

src/components/ImageWithPreview.tsx

@@ -1,4 +1,4 @@
-import RcImage, { ImageProps } from 'rc-image';
+import RcImage from 'rc-image';
 import { useEffect, useState } from 'react';
 import { AiOutlineClose } from 'react-icons/ai';
 
@@ -8,11 +8,13 @@ import GifPlayButton from './loading/GifPlayButton';
 
 const gifCoverImage = '!gif';
 
-const ImageWithPreview = (props: ImageProps) => {
+const ImageWithPreview = (props: {
+  src: string;
+  alt: string;
+  [key: string]: any;
+}) => {
   const [imgSrc, setImgSrc] = useState(
-    props.src?.endsWith('gif')
-      ? `${props.src}${gifCoverImage}`
-      : (props.src as string)
+    props.src?.endsWith('gif') ? `${props.src}${gifCoverImage}` : props.src
   );
   const isGifThumb = imgSrc.endsWith(gifCoverImage);
   const isGif = imgSrc?.endsWith('gif') && !isGifThumb;
@@ -22,11 +24,11 @@ const ImageWithPreview = (props: ImageProps) => {
     if (props.src?.endsWith('gif')) {
       setImgSrc(`${props.src}${gifCoverImage}`);
     } else {
-      setImgSrc(props.src as string);
+      setImgSrc(props.src);
     }
   }, [props.src]);
 
-  const handleLoadGif = (e: any) => {
+  const handleLoadGif = (e: React.MouseEvent) => {
     e.stopPropagation();
     setTimeout(() => {
       if (sourceIsGif) {

src/components/buttons/HeaderBtn.tsx

@@ -15,7 +15,7 @@ const HeaderBtn = (props: HeaderBtnProps) => {
 
   return (
     <Button
-      className='font-normal text-current hover:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700'
+      className='font-normal text-current hover:bg-transparent dark:hover:bg-transparent'
       variant='ghost'
       onClick={debounce(() => {
         router.push(pathname);

src/components/layout/Header.tsx

@@ -28,10 +28,11 @@ const Header = () => {
 
   const liClassName = (path: string) =>
     classNames(
-      'hidden md:block hover:font-bold hover:text-gray-800 hover:border-blue-500 hover:border-b-2 h-12',
+      'hidden md:block hover:font-bold hover:text-gray-700 dark:hover:text-gray-100 hover:border-blue-500 hover:border-b-2 h-12',
       {
-        'text-blue-500': curPath === path,
-        'text-gray-500': curPath !== path,
+        'text-blue-500':
+          curPath === path || (path !== '/' && curPath.startsWith(path)),
+        'text-gray-500 dark:text-gray-300': curPath !== path,
       }
     );
 

src/components/pagination/Pagination.tsx

@@ -12,8 +12,8 @@ type PaginationProps = {
 
 export default function Pagination({
   className,
-  PreviousText = '上一期',
-  NextText = '下一期',
+  PreviousText,
+  NextText,
   total,
   current = 1,
   onPageChange,
@@ -56,13 +56,13 @@ export default function Pagination({
   return (
     <div className={clsxm('', className)} {...rest}>
       <nav className='flex items-center justify-center space-x-2'>
-        <a
+        <div
           onClick={() => handlePageChange(page - 1)}
           className={JumpBtnClass(-1)}
         >
           <span aria-hidden='true'>«</span>
           <span>{PreviousText}</span>
-        </a>
+        </div>
 
         <input
           type='number'
@@ -91,13 +91,13 @@ export default function Pagination({
         <span className='mx-0 inline-flex h-10 w-10 items-center rounded-full p-4 font-medium text-gray-500 dark:text-gray-400'>
           {total}
         </span>
-        <a
+        <div
           onClick={() => handlePageChange(page + 1)}
           className={JumpBtnClass(1)}
         >
           <span>{NextText}</span>
           <span aria-hidden='true'>»</span>
-        </a>
+        </div>
       </nav>
     </div>
   );

src/pages/article/[aid].tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import ItemBottom from '@/components/home/ItemBottom';
-import ImageWithPreview from '@/components/ImageWithPreview';
 import { MDRender } from '@/components/mdRender/MDRender';
 import Navbar from '@/components/navbar/Navbar';
 import Seo from '@/components/Seo';
@@ -29,8 +28,8 @@ const ArticlePage: NextPage<ArticleProps> = ({ article }) => {
         </article>
         {i18n.language === 'zh' ? (
           <div className='my-2 flex justify-center'>
-            <ImageWithPreview
-              className='hidden cursor-zoom-in rounded-lg md:block'
+            <img
+              className='hidden rounded-lg md:block'
               src='https://img.hellogithub.com/ad/footer.png'
               alt='weixin_footer'
             />

src/pages/periodical/category/[name].tsx

@@ -88,7 +88,13 @@ const PeriodicalCategoryPage: NextPage<CategoryPageProps> = ({ category }) => {
           </div>
 
           {allItems?.map((item: PeriodicalItem, index: number) => {
-            return <PeriodItem key={index} item={item} index={index} />;
+            return (
+              <PeriodItem
+                key={index}
+                item={item}
+                index={(category?.current_page - 1) * 10 + index}
+              />
+            );
           })}
         </div>
 

src/pages/periodical/volume/[id].tsx

@@ -233,8 +233,8 @@ const PeriodicalVolumePage: NextPage<VolumePageProps> = ({ volume }) => {
                     total={volume?.total}
                     current={volume?.current_num}
                     onPageChange={onPageChange}
-                    PreviousText={t('page_prev')}
-                    NextText={t('page_next')}
+                    PreviousText={t('vol_prev')}
+                    NextText={t('vol_next')}
                   />
                 </div>
 
@@ -296,8 +296,8 @@ const PeriodicalVolumePage: NextPage<VolumePageProps> = ({ volume }) => {
               total={volume?.total}
               current={volume?.current_num}
               onPageChange={onPageChange}
-              PreviousText={t('page_prev')}
-              NextText={t('page_next')}
+              PreviousText={t('vol_prev')}
+              NextText={t('vol_next')}
             />
 
             <div className='hidden md:block'>
@@ -311,9 +311,9 @@ const PeriodicalVolumePage: NextPage<VolumePageProps> = ({ volume }) => {
           <div>
             <div className='top-15 fixed w-full max-w-[244px]'>
               <div className='mt-2 ml-3  bg-white p-4 dark:bg-gray-800 md:rounded-lg'>
-                <h4 className='mb-2 border-b border-gray-200 pb-2 dark:border-gray-700'>
+                <h3 className='mb-2 border-b border-gray-200 pb-2 text-lg dark:border-gray-700'>
                   {t('volume.catalog')}
-                </h4>
+                </h3>
                 <ul
                   className='custom-scrollbar overflow-scroll'
                   style={{ maxHeight: 560 }}