feat: add top banner

Author: 521xueweihan

src/components/layout/Header.tsx

@@ -13,14 +13,52 @@ import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
 import { RepoModal } from '@/components/dialog/RepoModal';
 import AvatarWithDropdown from '@/components/dropdown/AvatarWithDropdown';
 
+import { getHeaderAd } from '@/services/home';
+
+import TopBanner from './TopBanner';
 import { LoginButton } from '../buttons/LoginButton';
 import SearchInput from '../search/SearchInput';
 
-const Header = () => {
+import { AdvertItem } from '@/types/home';
+
+interface Props {
+  hiddenAd: () => void;
+  showAd: () => void;
+}
+
+const Header = ({ hiddenAd, showAd }: Props) => {
   const router = useRouter();
   const { isLogin } = useLoginContext();
   const [curPath, setCurPath] = useState('');
-  const { t } = useTranslation('common');
+  const { t, i18n } = useTranslation('common');
+  const [adData, setAdData] = useState<AdvertItem | null>(null);
+  const [_, setHasHeaderAd] = useState(false);
+
+  const handleCloseAd = () => {
+    hiddenAd();
+    setHasHeaderAd(false);
+  };
+
+  const initHeaderAd = async () => {
+    const res = await getHeaderAd();
+    if (res.success) {
+      if (res.data.length > 0) {
+        if (localStorage.adClosed === res.data[0].aid) {
+          setHasHeaderAd(false);
+        } else {
+          showAd();
+          setHasHeaderAd(true);
+          setAdData(res.data[0]);
+        }
+      } else {
+        setHasHeaderAd(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    initHeaderAd();
+  }, []);
 
   useEffect(() => {
     setCurPath(router.pathname);
@@ -40,7 +78,14 @@ const Header = () => {
     );
 
   return (
-    <div className='fixed z-10 h-14 w-full bg-white shadow-sm backdrop-blur dark:border dark:border-gray-50/[0.06] dark:bg-transparent'>
+    <div className='fixed z-10 w-full bg-white shadow-sm backdrop-blur dark:border dark:border-gray-50/[0.06] dark:bg-transparent'>
+      {adData && (
+        <TopBanner
+          i18n_lang={i18n.language}
+          data={adData}
+          onClose={handleCloseAd}
+        />
+      )}
       <nav className='mx-auto flex max-w-5xl items-center justify-between px-2 py-2 md:py-0 lg:px-0 xl:max-w-5xl 2xl:max-w-7xl'>
         {/* pc 端显示的 logo */}
         <span className='hidden py-2 md:block'>

src/components/layout/Layout.tsx

@@ -1,10 +1,9 @@
 import { useRouter } from 'next/router';
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 
 import Header from '@/components/layout/Header';
 import { Side } from '@/components/side/Side';
-
-import TagList from '../side/TagList';
+import TagList from '@/components/side/TagList';
 
 interface LayoutProps {
   children: ReactNode;
@@ -13,6 +12,15 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const router = useRouter();
   const { pathname } = router;
+  const [showHeaderAd, setShowHeaderAd] = useState(false);
+
+  const handleShowAd = () => {
+    setShowHeaderAd(true);
+  };
+
+  const handleColseAd = () => {
+    setShowHeaderAd(false);
+  };
 
   const isSinglePage = useMemo(() => {
     const singlePageRoutes = [
@@ -23,15 +31,21 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     return singlePageRoutes.includes(pathname);
   }, [pathname]);
 
+  const ptValue = showHeaderAd ? '5.5rem' : '3.5rem';
+  const topValue = showHeaderAd ? '6rem' : '4rem';
+
   return (
     <>
-      <Header />
-      <main className='container mx-auto px-0 pt-14 xl:px-40 2xl:px-56'>
+      <Header hiddenAd={handleColseAd} showAd={handleShowAd} />
+      <main
+        className='container mx-auto px-0 xl:px-40 2xl:px-56'
+        style={{ paddingTop: ptValue }}
+      >
         {isSinglePage ? (
           <div>{children}</div>
         ) : (
           <div className='flex flex-row md:border-none'>
-            {pathname === '/' && <TagList />}
+            {pathname === '/' && <TagList topValue={topValue} />}
             <div
               className={`relative ${
                 pathname === '/'
@@ -42,7 +56,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               {children}
             </div>
             <div className='relative hidden w-3/12 shrink-0 md:block'>
-              <Side isHome={pathname === '/'} />
+              <Side isHome={pathname === '/'} topValue={topValue} />
             </div>
           </div>
         )}

src/components/layout/TopBanner.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { IoMdClose } from 'react-icons/io';
+
+import { redirectRecord } from '@/services/home';
+
+import { NoPrefetchLink } from '../links/CustomLink';
+
+import { AdvertItem } from '@/types/home';
+
+interface Props {
+  data: AdvertItem;
+  i18n_lang: string;
+  onClose: () => void;
+}
+
+const TopBanner = ({ data, i18n_lang, onClose }: Props) => {
+  const [isClosed, setIsClosed] = useState(false);
+  const adText = i18n_lang === 'en' ? data.text_en : data.text;
+  const clickText = i18n_lang === 'en' ? 'Click' : '查看';
+
+  const handleCloseAd = () => {
+    setIsClosed(true);
+    localStorage.adClosed = data.aid;
+    onClose();
+  };
+
+  useEffect(() => {
+    if (localStorage.adClosed === data.aid) {
+      setIsClosed(true);
+    }
+  }, []);
+
+  const onClickLink = (aid: string) => {
+    redirectRecord('', aid, 'ad');
+  };
+
+  if (isClosed) return null;
+  return (
+    <div className='relative'>
+      <NoPrefetchLink href={data.url}>
+        <a
+          target='_blank'
+          onClick={() => onClickLink(data.aid)}
+          className='block'
+        >
+          <div className='flex h-8 w-full items-center justify-center bg-gradient-to-r from-blue-600 to-blue-500 px-4 dark:from-blue-700/90 dark:to-blue-600/90'>
+            <span className='max-w-[60%] truncate text-sm text-white'>
+              {adText}
+            </span>
+            <span className='ml-2 shrink-0 text-xs text-white/90'>
+              {clickText} →
+            </span>
+          </div>
+        </a>
+      </NoPrefetchLink>
+
+      <button
+        className='absolute right-2 top-1/2 -translate-y-1/2 p-1 text-white opacity-80 transition-colors hover:opacity-100'
+        onClick={handleCloseAd}
+      >
+        <IoMdClose className='h-4 w-4' />
+      </button>
+    </div>
+  );
+};
+export default TopBanner;

src/components/side/Side.tsx

@@ -14,7 +14,12 @@ import UserStatus from './UserStatus';
 
 import { AdvertItems } from '@/types/home';
 
-export const Side = ({ isHome }: { isHome: boolean }) => {
+interface Props {
+  isHome: boolean;
+  topValue: string;
+}
+
+export const Side = ({ isHome, topValue }: Props) => {
   const { t, i18n } = useTranslation('common');
   const [displayAdOnly, setDisplayAdOnly] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -64,6 +69,7 @@ export const Side = ({ isHome }: { isHome: boolean }) => {
           displayAdOnly={displayAdOnly}
           t={t}
           i18n_lang={i18n.language}
+          topValue={topValue}
         />
       )}
     </>

src/components/side/SideAd.tsx

@@ -9,6 +9,7 @@ interface Props {
   displayAdOnly?: boolean;
   t: (key: string) => string;
   i18n_lang?: string;
+  topValue?: string;
 }
 
 export const SideAd: NextPage<Props> = ({ data, t, i18n_lang }) => {
@@ -26,10 +27,12 @@ export const SideFixAd: NextPage<Props> = ({
   displayAdOnly,
   t,
   i18n_lang,
+  topValue,
 }) => {
   return (
     <div
-      className='fixed top-16 ml-3 max-w-[244px] space-y-2'
+      className='fixed ml-3 max-w-[244px] space-y-2'
+      style={{ top: topValue }}
       hidden={!displayAdOnly}
     >
       {data.map((item: AdvertItem) => (

src/components/side/TagList.tsx

@@ -14,7 +14,11 @@ import { TagListSkeleton } from '../loading/skeleton';
 
 import { Tag } from '@/types/tag';
 
-export default function TagList() {
+interface TagListProps {
+  topValue: string;
+}
+
+export default function TagList({ topValue }: TagListProps) {
   const { t, i18n } = useTranslation('home');
   const defaultTag: Tag = {
     name: '综合',
@@ -76,7 +80,7 @@ export default function TagList() {
 
   return (
     <div className='hidden max-w-[162px] shrink-0 lg:block lg:w-2/12 lg:grow-0'>
-      <div className='fixed top-16 pl-2'>
+      <div className='fixed pl-2' style={{ top: topValue }}>
         <div className='w-[140px] rounded-lg bg-white px-3 py-2 dark:bg-gray-800'>
           <div className='px-1 pb-1'>
             <div className='border-b border-b-gray-200 pb-2 dark:border-b-gray-600 dark:text-gray-300'>

src/services/home.ts

@@ -5,6 +5,7 @@ import { makeUrl } from '@/utils/api';
 import { fetcher } from './base';
 
 import {
+  AdvertItems,
   HomeItem,
   HomeItems,
   RecommendItems,
@@ -98,3 +99,10 @@ export const getSitemap = async (): Promise<Sitemap> => {
   const data = await fetcher<Sitemap>(makeUrl(`/sitemap/`));
   return data;
 };
+
+export const getHeaderAd = async (): Promise<AdvertItems> => {
+  const data = await fetcher<AdvertItems>(
+    makeUrl(`/sponsor/`, { position: 'top' })
+  );
+  return data;
+};

src/types/home.tsx

@@ -68,6 +68,8 @@ export interface AdvertItem {
   is_reward: boolean;
   year?: number;
   day?: number;
+  text?: string;
+  text_en?: string;
   percent: number;
 }
 

src/utils/api.ts

@@ -2,8 +2,8 @@ import stringify from './qs-stringify';
 
 export const ITEMS_PER_PAGE = 10;
 
-const LOCAL_API_HOST = 'https://frp.hellogithub.com';
-// const LOCAL_API_HOST = 'http://127.0.0.1:8001';
+// const LOCAL_API_HOST = 'https://frp.hellogithub.com';
+const LOCAL_API_HOST = 'http://127.0.0.1:8001';
 const PRODUCTION_API_HOST = 'https://api.hellogithub.com';
 const ABROAD_API_HOST = 'https://abroad.hellogithub.com';