From 89634479b50f0f7ae8048a50a8d55a961e072e7b Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Thu, 13 Jul 2023 22:13:47 +0800
Subject: [PATCH] theme-heo

---
 themes/heo/components/BlogPostCard.js     |  52 ++++----
 themes/heo/components/BlogPostListPage.js |   2 +-
 themes/heo/components/CategoryBar.js      |  18 +--
 themes/heo/components/Header.js           |   8 +-
 themes/heo/components/Hero.js             | 141 ++++++++++++++--------
 themes/heo/components/SideRight.js        |   2 +-
 themes/heo/index.js                       |   8 +-
 themes/heo/style.js                       |   8 ++
 8 files changed, 142 insertions(+), 97 deletions(-)

diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index 142a54fc..cc7598a9 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -12,11 +12,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
   return (
         <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div className={'group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden  rounded-xl bg-white '}>
+            <div className={'flex mb-4 flex-col h-[23rem] md:h-52 lg:flex-row 2xl:h-96 2xl:flex-col group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between overflow-hidden  rounded-xl bg-white '}>
 
                 {/* 图片封面 */}
                 {showPageCover && (
-                    <div className="flex-1 h-60 md:w-5/12 lg:w-full overflow-hidden">
+                    <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
                         <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                             <div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
                         </Link>
@@ -24,11 +24,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 )}
 
                 {/* 文字区块 */}
-                {/* <BlogPostCardInfo index={index} post={post} onHover={onHover} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} /> */}
-                <div className={'flex flex-col justify-between lg:p-6 p-4 w-full'}>
+                <div className={'flex p-6 flex-col justify-between h-40 md:h-full w-full md:w-7/12 2xl:w-full'}>
                     <div>
                         {/* 分类 */}
-                        {post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-600 `}>
+                        {post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
                             <Link passHref href={`/category/${post.category}`}
                                 className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
                                 {post.category}
@@ -42,32 +41,31 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                             className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight'}>
 
                             <span className='menu-link '>{post.title}</span>
-
                         </Link>
+                    </div>
 
-                        {/* 摘要 */}
-                        {(!showPreview || showSummary) && !post.results && (
-                            <p className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
-                                {post.summary}
-                            </p>
-                        )}
+                    {/* 摘要 */}
+                    {(!showPreview || showSummary) && !post.results && (
+                        <p className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
+                            {post.summary}
+                        </p>
+                    )}
 
-                        {/* 搜索结果 */}
-                        {post.results && (
-                            <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                                {post.results.map(r => (
-                                    <span key={r}>{r}</span>
-                                ))}
-                            </p>
-                        )}
+                    {/* 搜索结果 */}
+                    {post.results && (
+                        <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            {post.results.map(r => (
+                                <span key={r}>{r}</span>
+                            ))}
+                        </p>
+                    )}
 
-                        <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-                            <div>
-                                {' '}
-                                {post.tagItems?.map(tag => (
-                                    <TagItemMini key={tag.name} tag={tag} />
-                                ))}
-                            </div>
+                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                        <div>
+                            {' '}
+                            {post.tagItems?.map(tag => (
+                                <TagItemMini key={tag.name} tag={tag} />
+                            ))}
                         </div>
                     </div>
 
diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js
index c2ec5869..8c9e1fd6 100644
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div id="container" className='w-full'>
         {/* 文章列表 */}
-        <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
+        <div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
           {posts?.map(post => (
             <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
index cb8d9399..298c9128 100644
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -11,22 +11,16 @@ export default function CategoryBar(props) {
   const { categoryOptions } = props
   const { locale } = useGlobal()
 
-  return <div id='category-bar' className="flex justify-between items-center h-12 mb-4 space-x-2 w-full bg-white border
-         py-2 px-4 rounded-xl hover:border hover:border-indigo-600 transition-colors duration-200">
+  return <div id='category-bar' className="flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white lg:border
+         py-2 lg:px-2 rounded-xl lg:hover:border hover:border-indigo-600 transition-colors duration-200">
 
-        <div id='category-bar-items' className='flex justify-start space-x-2'>
+        <div id='category-bar-items' className='rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
             <MenuItem href='/' name={locale.NAV.INDEX} />
-            {categoryOptions?.map((c, index) => {
-              return (
-                    <div key={index}>
-                        <MenuItem href={`/category/${c.name}`} name={c.name} />
-                    </div>
-              )
-            })}
+            {categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
         </div>
 
         <div id='category-bar-next' className='flex'>
-            <Link href='/category' className='font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
+            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
                 {locale.COMMON.MORE}
             </Link>
         </div>
@@ -41,7 +35,7 @@ export default function CategoryBar(props) {
 const MenuItem = ({ href, name }) => {
   const router = useRouter()
   const selected = router.pathname === href
-  return <div className={`duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
+  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
         <Link href={href}>{name}</Link>
     </div>
 }
diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
index 81c3ee0e..10c1b335 100644
--- a/themes/heo/components/Header.js
+++ b/themes/heo/components/Header.js
@@ -28,8 +28,8 @@ const Header = props => {
   const throttleMs = 200
 
   /**
-         * 根据滚动条，切换导航栏样式
-         */
+  * 根据滚动条，切换导航栏样式
+  */
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
     const header = document.querySelector('#header')
@@ -44,8 +44,8 @@ const Header = props => {
 
   return (<>
         {/* 头条 */}
-        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
-            <div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-5'>
+        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center fixed top-0 duration-300 transition-all text-black w-full z-20 transform`}>
+            <div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-8'>
                 <div className='flex'>
                     <Logo {...props} />
                 </div>
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 8f8c24c8..095198c9 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -4,7 +4,7 @@ import BLOG from '@/blog.config'
 import { PlusSmall } from '@/components/HeroIcons'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useImperativeHandle, useRef, useState } from 'react'
 
 /**
  * 顶部英雄区
@@ -14,14 +14,17 @@ import { useState } from 'react'
  * @returns
  */
 const Hero = props => {
-  return (<hero id="hero" style={{ zIndex: 1 }} className="max-w-[86rem] w-full mx-auto flex relative space-x-6 px-5" >
-        {/* 左侧banner组 */}
-        <BannerGroup />
+  return (
+        <div id="hero-wrapper" className='w-full overflow-hidden select-none px-5 mb-4'>
+            <hero id="hero" style={{ zIndex: 1 }} className="rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3" >
+                {/* 左侧banner组 */}
+                <BannerGroup />
 
-        {/* 右侧置顶文章组 */}
-        <TopGroup {...props} />
-
-    </hero>)
+                {/* 右侧置顶文章组 */}
+                <TopGroup {...props} />
+            </hero>
+        </div>
+  )
 }
 
 /**
@@ -29,31 +32,53 @@ const Hero = props => {
  * @returns
  */
 function BannerGroup() {
-  return <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
-        <div className="h-60 bg-white rounded-xl border my-2"></div>
+  return (
+        // 左侧英雄区
+        <div id='hero-left-wrapper' className='flex flex-col flex-1 mr-2 max-w-[37rem]'>
+            {/* 动图 */}
+            <Banner />
+            {/* 导航分类 */}
+            <GroupMenu />
+        </div>
+  )
+}
 
-        <div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
-            <Link href="/tag/必看精选" className="bg-blue-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out ">
-                <div className="font-bold text-lg pl-4 relative">
+/**
+ * 英雄区左上角banner动图
+ * @returns
+ */
+function Banner() {
+  return <div className="h-full bg-white rounded-xl border mb-3 hidden xl:block"></div>
+}
+
+/**
+ * 英雄区左下角3个分类
+ * @returns
+ */
+function GroupMenu() {
+  return (
+        <div className="h-[165px] select-none  xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
+            <Link href="/tag/必看精选" className="bg-blue-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
+                <div className="font-bold text-lg pl-5 relative">
                     必看精选
-                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
+                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
             </Link>
-            <Link href="/tag/热门文章" className="bg-orange-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
-                <div className="font-bold text-lg pl-4 relative">
+            <Link href="/tag/热门文章" className="bg-orange-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
+                <div className="font-bold text-lg pl-5 relative">
                     热门文章
-                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
+                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
             </Link>
-            <Link href="/tag/实用教程" className="bg-emerald-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
-                <div className="font-bold text-lg pl-4 relative">
+            {/* 第三个标签在小屏上不显示 */}
+            <Link href="/tag/实用教程" className="bg-emerald-500 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
+                <div className="font-bold text-lg pl-5 relative">
                     实用教程
-                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
+                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
             </Link>
         </div>
-
-    </div>
+  )
 }
 
 /**
@@ -61,62 +86,80 @@ function BannerGroup() {
  */
 function TopGroup(props) {
   const { latestPosts, siteInfo } = props
-  return <div id='hero-right' className='bg-green-200 flex-1 relative'>
-        <div id='top-group' className='w-full h-full grid grid-cols-3 gap-3 py-2'>
-            {latestPosts?.map(p => {
-              return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
-                    <div className='cursor-pointer group relative flex flex-col w-52 overflow-hidden shadow bg-white rounded-xl'>
-                        {/* eslint-disable-next-line */}
-                        <img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
-                        <div className='h-16 line-clamp-2 overflow-hidden p-3 font-semibold'>{p?.title}</div>
-                        <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
-                    </div>
-                </Link>
-            })}
+  const todayCardRef = useRef()
+  function handleMouseLeave() {
+    todayCardRef.current.coverUp()
+  }
+  return (
+        <div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
+            {/* 制定最新文章 */}
+            <div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3'>
+                {latestPosts?.map(p => {
+                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
+                        <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white rounded-xl'>
+                            {/* eslint-disable-next-line */}
+                            <img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
+                            <div className='group-hover:text-indigo-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
+                            <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
+                        </div>
+                    </Link>
+                })}
+            </div>
+            <TodayCard cRef={todayCardRef} />
         </div>
-
-        <TodayCard />
-    </div>
+  )
 }
 
 /**
  * 英雄区右侧，今日卡牌
  * @returns
  */
-function TodayCard() {
+function TodayCard({ cRef }) {
+  const router = useRouter()
   // 卡牌是否盖住下层
   const [isCoverUp, setIsCoverUp] = useState(true)
-  const router = useRouter()
-  function handleMouseLeave() {
-    setIsCoverUp(true)
-  }
 
+  /**
+ * 外部可以调用此方法
+ */
+  useImperativeHandle(cRef, () => {
+    return {
+      coverUp: () => {
+        setIsCoverUp(true)
+      }
+    }
+  })
+
+  /**
+ * 点击更多
+ * @param {*} e
+ */
   function handleClickMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
 
   /**
-     * 点击卡片跳转的链接
-     * @param {*} e
-     */
+    * 点击卡片跳转的链接
+    * @param {*} e
+    */
   function handleCardClick(e) {
     router.push('https://tangly1024.com')
   }
 
-  return <div id='today-card' className={'overflow-hidden absolute flex flex-1 flex-col h-full top-0 w-full'}>
-        <div id='card-body' onMouseLeave={handleMouseLeave} onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110'} transition-all duration-150today-card my-2 h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
+  return <div id='today-card' className={`${isCoverUp ? ' ' : 'pointer-events-none'} overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
+        <div id='card-body' onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110 pointer-events-none'} shadow transition-all duration-150today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
             <div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
                 <div className='flex flex-col'>
                     <div className='text-sm font-light'>新版上线</div>
-                    <div className='text-3xl font-extrabold'>NotionNext4.0轻松定制主题</div>
+                    <div className='text-3xl font-extrabold'>NotionNext4.0 轻松定制主题</div>
                 </div>
                 <div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
                     <PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
                     <div id='more' className='select-none'>更多推荐</div>
                 </div>
             </div>
-            <div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`}style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
+            <div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`} style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
         </div>
     </div>
 }
diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js
index 2f5b3875..3c124071 100644
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -35,7 +35,7 @@ export default function SideRight(props) {
 
   console.log('props', props)
   return (
-        <div id='sideRight' className='w-72 space-y-4'>
+        <div id='sideRight' className='hidden xl:block w-72 space-y-4'>
 
             <InfoCard {...props} className='w-72' />
 
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 16260482..60fd077f 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -50,7 +50,7 @@ const LayoutBase = props => {
   }
 
   return (
-        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
+        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
             {/* 网页SEO */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
             <Style />
@@ -69,13 +69,15 @@ const LayoutBase = props => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-16"
                 unmount={false}
+                className='mt-20'
             >
                 {headerSlot}
             </Transition>
 
             {/* 主区块 */}
-            <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative p-5'}>
-                <div id="container-inner" className={' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
+            <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative px-5'}>
+
+                <div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
 
                     <Transition
                         show={!onLoading}
diff --git a/themes/heo/style.js b/themes/heo/style.js
index 0f223060..bf99f760 100644
--- a/themes/heo/style.js
+++ b/themes/heo/style.js
@@ -32,6 +32,14 @@ const Style = () => {
         mask-image: linear-gradient(to top, transparent 5%, black 70%);      
     }
 
+    .recent-top-post-group::-webkit-scrollbar {
+        display: none;
+    }
+    
+    .scroll-hidden::-webkit-scrollbar {
+        display: none;
+    }
+
   `}</style>
 }