From dd4d538a4765f90e68ce458a258c01f8d563dce6 Mon Sep 17 00:00:00 2001
From: xueweihan <595666367@qq.com>
Date: Sun, 29 Sep 2024 16:42:16 +0800
Subject: [PATCH] perf: rank in mobile

---
 public/locales/en/home.json                   |   4 +-
 public/locales/zh/home.json                   |   4 +-
 src/components/ImageWithPreview.tsx           |   6 +-
 .../dropdown/AvatarWithDropdown.tsx           |   7 +-
 src/components/links/TagLink.tsx              |  47 +++++---
 src/components/links/rankLink.tsx             | 104 +++++++++---------
 src/components/loading/skeleton.tsx           |  22 +++-
 src/components/navbar/IndexBar.tsx            |  68 ++++--------
 src/components/rankTable/RankTable.tsx        |   4 +-
 src/components/respository/CommentItem.tsx    |   4 +-
 src/hooks/useFilterHandling.tsx               |  12 --
 11 files changed, 146 insertions(+), 136 deletions(-)

diff --git a/public/locales/en/home.json b/public/locales/en/home.json
index aa1e697..a44695d 100644
--- a/public/locales/en/home.json
+++ b/public/locales/en/home.json
@@ -8,9 +8,7 @@
     "newest": "Newest",
     "monthly": "Monthly",
     "yearly": "Yearly",
-    "featured": "Featured",
-    "tag": "Tags",
-    "submit": "Submit"
+    "featured": "Featured"
   },
   "tag_side": {
     "title": "Topics",
diff --git a/public/locales/zh/home.json b/public/locales/zh/home.json
index 7636d2b..b41e755 100644
--- a/public/locales/zh/home.json
+++ b/public/locales/zh/home.json
@@ -8,9 +8,7 @@
     "monthly": "月度",
     "yearly": "年度",
     "all": "全部",
-    "featured": "精选",
-    "tag": "标签",
-    "submit": "提交"
+    "featured": "精选"
   },
   "tag_side": {
     "title": "热门标签",
diff --git a/src/components/ImageWithPreview.tsx b/src/components/ImageWithPreview.tsx
index 9cf9cfd..0535bc0 100644
--- a/src/components/ImageWithPreview.tsx
+++ b/src/components/ImageWithPreview.tsx
@@ -42,7 +42,11 @@ const ImageWithPreview = (props: {
       <RcImage
         {...props}
         src={imgSrc}
-        style={{ opacity: isGifThumb ? '0.9' : '1' }}
+        style={{
+          opacity: isGifThumb ? '0.9' : '1',
+          width: '100%',
+          height: 'auto',
+        }}
         preview={{
           icons: { close: <AiOutlineClose style={{ fontSize: 13 }} /> },
           toolbarRender: () => <></>,
diff --git a/src/components/dropdown/AvatarWithDropdown.tsx b/src/components/dropdown/AvatarWithDropdown.tsx
index f126e77..222576c 100644
--- a/src/components/dropdown/AvatarWithDropdown.tsx
+++ b/src/components/dropdown/AvatarWithDropdown.tsx
@@ -4,6 +4,7 @@ import { useLoginContext } from '@/hooks/useLoginContext';
 
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
 import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
+import { RepoModal } from '@/components/dialog/RepoModal';
 import { CustomLink } from '@/components/links/CustomLink';
 
 import { DEFAULT_AVATAR } from '@/utils/constants';
@@ -52,6 +53,11 @@ const AvatarWithDropdown = ({ t, className }: Props) => {
             {t('header.profile')}
           </div>
         </CustomLink>
+        <RepoModal>
+          <div className='px-4 leading-8 active:bg-gray-100 dark:active:bg-gray-700'>
+            {t('header.submit')}
+          </div>
+        </RepoModal>
         <CustomLink href='/notification'>
           <div className='block px-4 leading-8 active:bg-gray-100 dark:active:bg-gray-700'>
             {t('header.notification')}
@@ -62,7 +68,6 @@ const AvatarWithDropdown = ({ t, className }: Props) => {
             )}
           </div>
         </CustomLink>
-
         <div className='px-4 leading-8 active:bg-gray-100 dark:active:bg-gray-700'>
           <ThemeSwitcher type='text' t={t} />
         </div>
diff --git a/src/components/links/TagLink.tsx b/src/components/links/TagLink.tsx
index 819a39c..cbe6e7d 100644
--- a/src/components/links/TagLink.tsx
+++ b/src/components/links/TagLink.tsx
@@ -1,32 +1,53 @@
 import { NoPrefetchLink } from '@/components/links/CustomLink';
 
+import { constructURL } from '@/utils/util';
+
 import { TagType } from '@/types/tag';
 
 interface Props {
+  year?: number;
+  month?: number;
   tid?: string;
   sort_by: string;
   items: TagType[];
+  rank_by: string;
 }
 
-export default function TagLink(props: Props) {
+export default function TagLink({
+  tid,
+  sort_by,
+  items,
+  rank_by,
+  year,
+  month,
+}: Props) {
   return (
-    <div className='custom-scrollbar overflow-y-auto'>
+    <div className='custom-scrollbar mt-2 overflow-y-auto'>
       <ul className='flex text-xs font-bold'>
-        {props.items.map((item: TagType) => {
+        {items.map((item: TagType) => {
           return (
             <li className='shrink-0 grow-0 basis-auto' key={item.tid}>
               <NoPrefetchLink
-                href={`/?sort_by=${props.sort_by}&tid=${item.tid}`}
+                href={constructURL({
+                  sort_by,
+                  rank_by,
+                  tid: item.tid,
+                  year,
+                  month,
+                })}
               >
-                {props.tid == item.tid ? (
-                  <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
-                    {item.name}
-                  </a>
-                ) : (
-                  <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl px-0 pl-2 pr-2 text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'>
-                    {item.name}
-                  </a>
-                )}
+                <a
+                  className={`
+                  mr-1 inline-flex h-6 items-center justify-center rounded-xl px-2
+                  ${
+                    tid === item.tid
+                      ? 'bg-gray-100 text-blue-500 dark:bg-gray-700'
+                      : 'text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'
+                  }
+                `}
+                >
+                  {item.name}
+                </a>
               </NoPrefetchLink>
             </li>
           );
diff --git a/src/components/links/rankLink.tsx b/src/components/links/rankLink.tsx
index 4735864..c7ec6e8 100644
--- a/src/components/links/rankLink.tsx
+++ b/src/components/links/rankLink.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 import { constructURL } from '@/utils/util';
@@ -13,63 +15,65 @@ interface Props {
   items: RankItem[];
 }
 
-export default function RankLink(props: Props) {
-  const currentDate = new Date();
-  const defaultYear = currentDate.getFullYear();
-  const defaultMonth = currentDate.getMonth(); // 上个月，如果是1月则为0
+export default function RankLink({
+  year,
+  month,
+  tid,
+  sort_by,
+  rank_by,
+  items,
+}: Props) {
+  const { yearNum, monthlyYearNum, monthNum } = useMemo(() => {
+    const currentDate = new Date();
+    const defaultYear = currentDate.getFullYear();
+    const defaultMonth = currentDate.getMonth(); // 上个月，如果是1月则为0
+
+    return {
+      yearNum: year ?? defaultYear - 1,
+      monthlyYearNum:
+        year ?? (defaultMonth === 0 ? defaultYear - 1 : defaultYear),
+      monthNum: month ?? (defaultMonth === 0 ? 12 : defaultMonth),
+    };
+  }, [year, month]);
+
+  const renderLink = (item: RankItem) => {
+    const isActive = item.month
+      ? item.key === `${monthlyYearNum}.${monthNum}`
+      : item.key === `${yearNum}`;
+
+    const linkProps = {
+      href: constructURL({
+        sort_by,
+        rank_by,
+        tid,
+        year: item.year,
+        ...(item.month && { month: item.month }),
+      }),
+    };
+
+    const className = `
+      mr-1 inline-flex h-6 items-center justify-center rounded-xl px-2
+      ${
+        isActive
+          ? 'bg-gray-100 text-blue-500 dark:bg-gray-700'
+          : 'text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'
+      }
+    `;
 
-  // 设置默认值并处理边界条件
-  const yearNum = props.year ?? defaultYear - 1;
-  const monthlyYearNum =
-    props.year ?? (defaultMonth === 0 ? defaultYear - 1 : defaultYear);
-  const monthNum = props.month ?? (defaultMonth === 0 ? 12 : defaultMonth);
+    return (
+      <NoPrefetchLink {...linkProps}>
+        <a className={className}>{item.name}</a>
+      </NoPrefetchLink>
+    );
+  };
 
   return (
     <div className='custom-scrollbar overflow-y-auto'>
       <ul className='flex text-xs font-semibold'>
-        {props.items.map((item: RankItem) => {
+        {items.map((item) => {
           return (
             <li className='shrink-0 grow-0 basis-auto' key={item.key}>
-              {item.month ? (
-                <NoPrefetchLink
-                  href={constructURL({
-                    sort_by: props.sort_by,
-                    rank_by: props.rank_by,
-                    tid: props.tid,
-                    year: item.year,
-                    month: item.month,
-                  })}
-                >
-                  {item.key == `${monthlyYearNum}.${monthNum}` ? (
-                    <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
-                      {item.name}
-                    </a>
-                  ) : (
-                    <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl px-0 pl-2 pr-2 text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'>
-                      {item.name}
-                    </a>
-                  )}
-                </NoPrefetchLink>
-              ) : (
-                <NoPrefetchLink
-                  href={constructURL({
-                    sort_by: props.sort_by,
-                    rank_by: props.rank_by,
-                    tid: props.tid,
-                    year: item.year,
-                  })}
-                >
-                  {item.key == `${yearNum}` ? (
-                    <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
-                      {item.name}
-                    </a>
-                  ) : (
-                    <a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl px-0 pl-2 pr-2 text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'>
-                      {item.name}
-                    </a>
-                  )}
-                </NoPrefetchLink>
-              )}
+              {renderLink(item)}
             </li>
           );
         })}
diff --git a/src/components/loading/skeleton.tsx b/src/components/loading/skeleton.tsx
index 6039908..04d51ee 100644
--- a/src/components/loading/skeleton.tsx
+++ b/src/components/loading/skeleton.tsx
@@ -33,8 +33,8 @@ export const HomeSkeleton = ({ loop }: Props) => {
 
 export const TagListSkeleton = () => {
   return (
-    <div className='mt-1 mb-2 animate-pulse'>
-      <ul className='space-y-2'>
+    <div className='mt-1 mb-2'>
+      <ul className='animate-pulse space-y-2'>
         <li className='h-10 rounded bg-gray-100 dark:bg-gray-700' />
         <li className='h-10 rounded bg-gray-100 dark:bg-gray-700' />
         <li className='h-10 rounded bg-gray-100 dark:bg-gray-700' />
@@ -43,12 +43,28 @@ export const TagListSkeleton = () => {
   );
 };
 
+export const TagLinkListSkeleton = ({ loop = 6 }) => {
+  return (
+    <div className='custom-scrollbar mt-2 overflow-y-auto'>
+      <ul className='flex animate-pulse'>
+        {[...Array(loop)].map((_, index) => (
+          <li
+            key={index}
+            className='mr-1 h-6 w-10 rounded-xl bg-gray-100 dark:bg-gray-700'
+            aria-hidden='true'
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
 export const StatsSkeleton = () => {
   return (
     <div className='flex flex-wrap border-b border-b-gray-300 pb-3 dark:border-b-gray-700'>
       <div className='flex-1 pr-4'>
         <div className='text-sm text-gray-400 lg:text-base'>用户总数</div>
-        <div className='mt-1  h-6 w-14 animate-pulse bg-gray-100 dark:bg-gray-700 lg:h-8 lg:w-20' />
+        <div className='mt-1 h-6 w-14 animate-pulse bg-gray-100 dark:bg-gray-700 lg:h-8 lg:w-20' />
       </div>
       <div className='flex-1'>
         <div className='text-sm text-gray-400 lg:text-base'>开源项目</div>
diff --git a/src/components/navbar/IndexBar.tsx b/src/components/navbar/IndexBar.tsx
index 68b1018..1d4096d 100644
--- a/src/components/navbar/IndexBar.tsx
+++ b/src/components/navbar/IndexBar.tsx
@@ -3,13 +3,14 @@ import { NextPage } from 'next';
 
 import useFilterHandling from '@/hooks/useFilterHandling';
 
-import { RepoModal } from '@/components/dialog/RepoModal';
 import { NoPrefetchLink } from '@/components/links/CustomLink';
 import RankLink from '@/components/links/rankLink';
 import TagLink from '@/components/links/TagLink';
 
 import { indexRankBy } from '@/utils/constants';
 
+import { TagLinkListSkeleton } from '../loading/skeleton';
+
 type Props = {
   t: (key: string) => string;
   i18n_lang: string;
@@ -31,16 +32,8 @@ const IndexBar: NextPage<Props> = ({
 }) => {
   const defaultURL = '/?sort_by=featured';
 
-  const {
-    tagLabelStatus,
-    tagItems,
-    featuredURL,
-    allURL,
-    handleTagButton,
-    monthlyURL,
-    yearlyURL,
-    rankItems,
-  } = useFilterHandling(tid, sortBy, rankBy, i18n_lang, year, month);
+  const { tagItems, featuredURL, allURL, monthlyURL, yearlyURL, rankItems } =
+    useFilterHandling(tid, sortBy, rankBy, i18n_lang, year, month);
 
   const getSortLinkClassName = (sortName: string, isMobile = false) => {
     const isActive = sortBy === sortName;
@@ -52,7 +45,6 @@ const IndexBar: NextPage<Props> = ({
         {
           'text-gray-500 dark:text-gray-200': !isActive,
           'bg-gray-100 dark:bg-gray-700 text-blue-500': isActive,
-          'lg:hidden': sortName === 'label',
         }
       );
     } else {
@@ -72,7 +64,7 @@ const IndexBar: NextPage<Props> = ({
   return (
     <div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800'>
       <div className='flex h-12 items-center space-x-1 py-2 px-2 md:space-x-2 md:rounded-lg lg:px-4'>
-        <div className='hidden space-x-2 text-sm font-bold md:flex'>
+        <div className='flex space-x-1 text-sm font-bold'>
           {indexRankBy.map((rank) => (
             <NoPrefetchLink
               key={rank}
@@ -88,8 +80,8 @@ const IndexBar: NextPage<Props> = ({
             </NoPrefetchLink>
           ))}
         </div>
-        <div className='hidden shrink grow md:block' />
-        <div className='hidden gap-2.5 text-[13px] font-medium md:flex'>
+        <div className='shrink grow' />
+        <div className='flex gap-2.5 text-[13px] font-medium'>
           <NoPrefetchLink href={featuredURL}>
             <a className={getSortLinkClassName('featured')}>
               {t('nav.featured')}
@@ -100,42 +92,26 @@ const IndexBar: NextPage<Props> = ({
             <a className={getSortLinkClassName('all')}>{t('nav.all')}</a>
           </NoPrefetchLink>
         </div>
-        {/* 移动端 */}
-        <div className='flex md:hidden'>
-          <NoPrefetchLink href={featuredURL}>
-            <a className={getSortLinkClassName('featured', true)}>
-              {t('nav.featured')}
-            </a>
-          </NoPrefetchLink>
-          <NoPrefetchLink href={allURL}>
-            <a className={getSortLinkClassName('all', true)}>{t('nav.all')}</a>
-          </NoPrefetchLink>
-          <span
-            onClick={handleTagButton}
-            className={getSortLinkClassName('label', true)}
-          >
-            {t('nav.tag')}
-          </span>
-        </div>
-        <div className='shrink grow md:hidden' />
-        <div className='md:hidden'>
-          <RepoModal>
-            <div className='flex h-8 items-center rounded-lg bg-blue-500 px-3 text-xs text-white active:bg-blue-600 dark:bg-gray-700 dark:text-gray-300 dark:active:bg-gray-900 sm:px-4'>
-              {t('nav.submit')}
-            </div>
-          </RepoModal>
-        </div>
       </div>
 
       {/* 移动端标签 */}
-      {tagLabelStatus && (
-        <div className='flex px-4 pb-2.5 lg:hidden'>
-          <TagLink items={tagItems} tid={tid} sort_by={sortBy} />
-        </div>
-      )}
+      <div className='flex border-t border-gray-100 px-3 pb-2  dark:border-gray-700 lg:hidden'>
+        {tagItems.length > 0 ? (
+          <TagLink
+            items={tagItems}
+            tid={tid}
+            sort_by={sortBy}
+            rank_by={rankBy}
+            year={year}
+            month={month}
+          />
+        ) : (
+          <TagLinkListSkeleton />
+        )}
+      </div>
       {/* 排行榜 */}
       {rankItems.length > 0 && (
-        <div className='hidden px-4 pb-2 md:flex'>
+        <div className='flex px-3 pb-2 lg:px-4'>
           <RankLink
             items={rankItems}
             tid={tid}
diff --git a/src/components/rankTable/RankTable.tsx b/src/components/rankTable/RankTable.tsx
index 0e583b0..5c1c655 100644
--- a/src/components/rankTable/RankTable.tsx
+++ b/src/components/rankTable/RankTable.tsx
@@ -144,8 +144,8 @@ export const RankSearchBar = ({
       </div>
       <div className=' justify-items-center'>
         <div className='flex items-center'>
-          <div className='inline h-5 w-5'>
-            <img src={logo} alt='rank_logo' />
+          <div className='inline'>
+            <img className='h-5 w-5' src={logo} alt='rank_logo' />
           </div>
           <span className='ml-1 hidden dark:text-gray-300 md:block'>
             {title}
diff --git a/src/components/respository/CommentItem.tsx b/src/components/respository/CommentItem.tsx
index d160ba2..999c1ac 100644
--- a/src/components/respository/CommentItem.tsx
+++ b/src/components/respository/CommentItem.tsx
@@ -114,11 +114,11 @@ const CommentItem = (props: CommentItemProps) => {
   return (
     <div className={`flex ${className} truncate`}>
       <div className='mr-4 hidden md:block'>
-        <div className='relative h-10 w-10'>
+        <div className='relative'>
           <NoPrefetchLink href={`/user/${user.uid}`}>
             <a>
               <img
-                className='cursor-pointer rounded-full'
+                className='h-10 w-10 cursor-pointer rounded-full'
                 src={user?.avatar || DEFAULT_AVATAR}
                 alt='comment_avatar'
               />
diff --git a/src/hooks/useFilterHandling.tsx b/src/hooks/useFilterHandling.tsx
index 22f6778..7c075fa 100644
--- a/src/hooks/useFilterHandling.tsx
+++ b/src/hooks/useFilterHandling.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 
 import { getTags } from '@/services/home';
@@ -15,7 +14,6 @@ const useFilterHandling = (
   year?: number,
   month?: number
 ) => {
-  const router = useRouter();
   const [tagLabelStatus, setTagLabelStatus] = useState(false);
   const [tagItems, setTagItems] = useState<Tag[]>([]);
   const [featuredURL, setFeaturedURL] = useState<string>('/?sort_by=featured');
@@ -106,15 +104,6 @@ const useFilterHandling = (
     }
   }, [tagItems, setTagItems]);
 
-  const handleTagButton = () => {
-    setTagLabelStatus(!tagLabelStatus);
-    if (!tagLabelStatus && sort_by === 'all') {
-      router.push('/?sort_by=all');
-    } else if (!tagLabelStatus) {
-      router.push('/');
-    }
-  };
-
   useEffect(() => {
     if (isMobile()) {
       handleTags();
@@ -135,7 +124,6 @@ const useFilterHandling = (
     tagItems,
     featuredURL,
     allURL,
-    handleTagButton,
     monthlyURL,
     yearlyURL,
     rankItems,