feat: update home

Author: 521xueweihan

public/locales/en/home.json

@@ -5,6 +5,9 @@
   "bottom_text_nologin": "End of the page! Sign in to read more",
   "nav": {
     "all": "All",
+    "newest": "Newest",
+    "monthly": "Monthly",
+    "yearly": "Yearly",
     "featured": "Featured",
     "tag": "Tags",
     "submit": "Submit"

public/locales/zh/home.json

@@ -4,6 +4,9 @@
   "bottom_text_login": "你不经意间触碰到了底线",
   "bottom_text_nologin": "到底啦！登录可查看更多内容",
   "nav": {
+    "newest": "最新",
+    "monthly": "月度",
+    "yearly": "年度",
     "all": "全部",
     "featured": "精选",
     "tag": "标签",

src/components/dialog/TagModal.tsx

@@ -107,8 +107,8 @@ export function TagModal({
     if (effectedTidList.length <= maxTotal) {
       const defaultTag =
         i18n_lang === 'en'
-          ? { name: 'All', tid: '', icon_name: 'find', name_en: 'All' }
-          : { name: '综合', tid: '', icon_name: 'find', name_en: 'All' };
+          ? { name: 'All', tid: 'all', icon_name: 'find', name_en: 'All' }
+          : { name: '综合', tid: 'all', icon_name: 'find', name_en: 'All' };
       const selectTags = [defaultTag];
       for (let i = 0; i < effectedTidList.length; i++) {
         const item = portalTagGroups

src/components/home/Item.tsx

@@ -193,7 +193,7 @@ const RepositoryItem = ({
                           aria-label='Verified item'
                         />
                       )}
-                      <div className='truncate'>{name}</div>
+                      <div className='truncate'>{author}</div>
                     </div>
                     <span className='px-1'>·</span>
                     <span>

src/components/layout/ErrorPage.tsx

@@ -39,21 +39,13 @@ const ErrorPage = ({ t, httpCode }: Props) => {
           </NoPrefetchLink>
           <div className='mt-4 block text-xs text-gray-400'>
             <NoPrefetchLink href='mailto:595666367@qq.com'>
-              <a
-                target='_blank'
-                className='cursor-pointer hover:underline'
-                rel='noreferrer'
-              >
+              <a target='_blank' className='cursor-pointer hover:underline'>
                 <span>{t('footer.feedback')}</span>
               </a>
             </NoPrefetchLink>
             <span className='px-1'>·</span>
             <NoPrefetchLink href='https://github.com/HelloGitHub-Team/geese'>
-              <a
-                target='_blank'
-                className='cursor-pointer hover:underline'
-                rel='noreferrer'
-              >
+              <a target='_blank' className='cursor-pointer hover:underline'>
                 <span>{t('footer.source')}</span>
               </a>
             </NoPrefetchLink>

src/components/links/CustomLink.tsx

@@ -27,7 +27,6 @@ export const CustomLink = ({ href, className, children, onClick }: Props) => {
         onClick={onClick}
         target={isMobile ? '_self' : '_blank'}
         className={clsxm('block', className)}
-        rel='noopener noreferrer'
       >
         {children}
       </a>

src/components/links/TagItem.tsx

@@ -3,7 +3,7 @@ import { NoPrefetchLink } from '@/components/links/CustomLink';
 import { TagType } from '@/types/tag';
 
 interface Props {
-  tid: string;
+  tid?: string;
   sort_by: string;
   items: TagType[];
 }

src/components/links/TagLink.tsx

@@ -0,0 +1,79 @@
+import { NoPrefetchLink } from '@/components/links/CustomLink';
+
+import { constructURL } from '@/utils/util';
+
+import { RankItem } from '@/types/home';
+
+interface Props {
+  year?: number;
+  month?: number;
+  tid?: string;
+  sort_by: string;
+  rank_by: string;
+  items: RankItem[];
+}
+
+export default function RankLink(props: Props) {
+  const currentDate = new Date();
+  const defaultYear = currentDate.getFullYear();
+  const defaultMonth = currentDate.getMonth(); // 上个月，如果是1月则为0
+
+  // 设置默认值并处理边界条件
+  const yearNum = props.year ?? defaultYear - 1;
+  const monthlyYearNum =
+    props.year ?? (defaultMonth === 0 ? defaultYear - 1 : defaultYear);
+  const monthNum = props.month ?? (defaultMonth === 0 ? 12 : defaultMonth);
+
+  return (
+    <div className='custom-scrollbar overflow-y-auto'>
+      <ul className='flex text-xs font-semibold'>
+        {props.items.map((item: RankItem) => {
+          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>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

src/components/links/rankLink.tsx

@@ -1,46 +1,123 @@
 import classNames from 'classnames';
 import { NextPage } from 'next';
 
-import useTagHandling from '@/hooks/useTagHandling';
+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';
+
 type Props = {
   t: (key: string) => string;
   i18n_lang: string;
-  tid: string;
-  sort_by: string;
+  tid?: string;
+  sortBy: string;
+  rankBy: string;
+  year?: number;
+  month?: number;
 };
 
-const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
-  const { labelStatus, tagItems, featuredURL, allURL, handleTagButton } =
-    useTagHandling(tid, sort_by, i18n_lang);
+const IndexBar: NextPage<Props> = ({
+  t,
+  i18n_lang,
+  tid,
+  sortBy,
+  rankBy,
+  year,
+  month,
+}) => {
+  const defaultURL = '/?sort_by=featured';
+
+  const {
+    tagLabelStatus,
+    tagItems,
+    featuredURL,
+    allURL,
+    handleTagButton,
+    monthlyURL,
+    yearlyURL,
+    rankItems,
+  } = useFilterHandling(tid, sortBy, rankBy, i18n_lang, year, month);
+
+  const getSortLinkClassName = (sortName: string, isMobile = false) => {
+    const isActive = sortBy === sortName;
 
-  const linkClassName = (sortName: string) =>
+    if (isMobile) {
+      return classNames(
+        'flex h-8 items-center rounded-lg pl-3 pr-3 text-sm font-bold',
+        'hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
+        {
+          'text-gray-500 dark:text-gray-200': !isActive,
+          'bg-gray-100 dark:bg-gray-700 text-blue-500': isActive,
+          'lg:hidden': sortName === 'label',
+        }
+      );
+    } else {
+      return isActive ? 'text-blue-500' : 'text-gray-500 dark:text-gray-300';
+    }
+  };
+
+  const rankLinkClassName = (rankName: string) =>
     classNames(
-      'flex h-8 items-center whitespace-nowrap rounded-lg pl-3 pr-3 text-sm font-bold hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
+      'flex h-8 items-center rounded-lg pl-3 pr-3 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
       {
-        'text-gray-500 dark:text-gray-200': sort_by !== sortName,
-        'bg-gray-100 dark:bg-gray-700 text-blue-500': sort_by === sortName,
-        'lg:hidden': sortName === 'label',
+        'text-gray-500 dark:text-gray-200': rankBy !== rankName,
+        'bg-gray-100 dark:bg-gray-700 text-blue-500': rankBy === rankName,
       }
     );
 
   return (
-    <div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800 md:rounded-lg'>
-      <div className='flex h-12 shrink grow items-center justify-start space-x-1 py-2 px-4 md:space-x-2'>
-        <NoPrefetchLink href={featuredURL}>
-          <a className={linkClassName('featured')}>{t('nav.featured')}</a>
-        </NoPrefetchLink>
-        <NoPrefetchLink href={allURL}>
-          <a className={linkClassName('all')}>{t('nav.all')}</a>
-        </NoPrefetchLink>
-        <span onClick={handleTagButton} className={linkClassName('label')}>
-          {t('nav.tag')}
-        </span>
-        <div className='shrink grow' />
+    <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'>
+          {indexRankBy.map((rank) => (
+            <NoPrefetchLink
+              key={rank}
+              href={
+                rank === 'newest'
+                  ? defaultURL
+                  : rank === 'monthly'
+                  ? monthlyURL
+                  : yearlyURL
+              }
+            >
+              <a className={rankLinkClassName(rank)}>{t(`nav.${rank}`)}</a>
+            </NoPrefetchLink>
+          ))}
+        </div>
+        <div className='hidden shrink grow md:block' />
+        <div className='hidden gap-2.5 text-[13px] font-medium md:flex'>
+          <NoPrefetchLink href={featuredURL}>
+            <a className={getSortLinkClassName('featured')}>
+              {t('nav.featured')}
+            </a>
+          </NoPrefetchLink>
+          <span className='border-r border-gray-100 dark:border-gray-700'></span>
+          <NoPrefetchLink href={allURL}>
+            <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'>
@@ -49,9 +126,26 @@ const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
           </RepoModal>
         </div>
       </div>
-      <div className={labelStatus ? 'flex px-4 pb-2.5 lg:hidden' : 'hidden'}>
-        <TagLink items={tagItems} tid={tid} sort_by={sort_by} />
-      </div>
+
+      {/* 移动端标签 */}
+      {tagLabelStatus && (
+        <div className='flex px-4 pb-2.5 lg:hidden'>
+          <TagLink items={tagItems} tid={tid} sort_by={sortBy} />
+        </div>
+      )}
+      {/* 排行榜 */}
+      {rankItems.length > 0 && (
+        <div className='hidden px-4 pb-2 md:flex'>
+          <RankLink
+            items={rankItems}
+            tid={tid}
+            sort_by={sortBy}
+            rank_by={rankBy}
+            year={year}
+            month={month}
+          />
+        </div>
+      )}
     </div>
   );
 };