perf: rank in mobile

HelloGitHub-Team · Sep 29, 2024 · dd4d538 · dd4d538
1 parent 5e5ce3c
commit dd4d538
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>