From 6a934462c901081993d12d469d046d97bc41e492 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 14 Jul 2023 16:15:41 +0800
Subject: [PATCH] heo-rowup-tags

---
 blog.config.js                        |  2 +-
 components/ThemeSwitch.js             |  2 +-
 themes/heo/components/BlogPostCard.js |  6 +--
 themes/heo/components/Header.js       |  2 +-
 themes/heo/components/Hero.js         | 74 ++++++++++++++++++++-------
 themes/heo/config.js                  | 60 ++++++++++++++++++++++
 themes/heo/style.js                   | 19 ++++++-
 7 files changed, 140 insertions(+), 25 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 2a2ce299..2a7c726d 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -48,12 +48,12 @@ const BLOG = {
     '-apple-system',
     'BlinkMacSystemFont',
     '"Hiragino Sans GB"',
+    '"Microsoft YaHei"',
     '"Segoe UI Emoji"',
     '"Segoe UI Symbol"',
     '"Segoe UI"',
     '"Noto Sans SC"',
     'HarmonyOS_Regular',
-    '"Microsoft YaHei"',
     '"Helvetica Neue"',
     'Helvetica',
     '"Source Han Sans SC"',
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 6816de4d..366af042 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -23,7 +23,7 @@ const ThemeSwitch = () => {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-lg shadow-card">
+            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-xl shadow-card">
                 <div className="py-2 flex items-center text-sm px-2">
                     <DarkModeButton className='mr-1'/>
                     <select value={theme} onChange={onSelectChange} name="cars" className=' outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index cc7598a9..da394068 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -12,7 +12,7 @@ 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={'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 '}>
+            <div className={'flex mb-4 flex-col h-[23rem] md:h-52 md: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 && (
@@ -24,7 +24,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 )}
 
                 {/* 文字区块 */}
-                <div className={'flex p-6 flex-col justify-between h-40 md:h-full w-full md:w-7/12 2xl:w-full'}>
+                <div className={'flex p-6 2xl:p-4 flex-col justify-between h-40 md:h-full 2xl:h-40 w-full md:w-7/12 2xl:w-full'}>
                     <div>
                         {/* 分类 */}
                         {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 `}>
@@ -46,7 +46,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
                     {/* 摘要 */}
                     {(!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">
+                        <p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
                             {post.summary}
                         </p>
                     )}
diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
index 10c1b335..411cf070 100644
--- a/themes/heo/components/Header.js
+++ b/themes/heo/components/Header.js
@@ -44,7 +44,7 @@ const Header = props => {
 
   return (<>
         {/* 头条 */}
-        <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`}>
+        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center fixed top-0 duration-150 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} />
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 095198c9..442f1c39 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -5,6 +5,7 @@ import { PlusSmall } from '@/components/HeroIcons'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+import CONFIG from '../config'
 
 /**
  * 顶部英雄区
@@ -15,8 +16,8 @@ import { useImperativeHandle, useRef, useState } from 'react'
  */
 const Hero = props => {
   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" >
+        <div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
+            <hero id="hero" style={{ zIndex: 1 }} className="recent-post-top 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 />
 
@@ -34,7 +35,7 @@ const Hero = props => {
 function BannerGroup() {
   return (
         // 左侧英雄区
-        <div id='hero-left-wrapper' className='flex flex-col flex-1 mr-2 max-w-[37rem]'>
+        <div id='bannerGroup' className='flex flex-col justify-between flex-1 mr-2 max-w-[42rem]'>
             {/* 动图 */}
             <Banner />
             {/* 导航分类 */}
@@ -48,7 +49,44 @@ function BannerGroup() {
  * @returns
  */
 function Banner() {
-  return <div className="h-full bg-white rounded-xl border mb-3 hidden xl:block"></div>
+  return <div id='banners' className="h-full bg-white rounded-xl border mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
+
+        <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
+            <div className='text-4xl font-bold mb-3'>分享写作<br />与商业思维</div>
+            <div className='text-xs text-gray-600'>TANGLY1024.COM</div>
+        </div>
+
+        {/* 斜向滚动的图标 */}
+        <TagsGroupBar />
+    </div>
+}
+
+/**
+ * 图标滚动标签组
+ * 英雄区左上角banner条中斜向滚动的图标
+ */
+function TagsGroupBar() {
+  const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
+  return (
+        <div className="tags-group-all flex -rotate-[30deg]">
+            <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
+                {groupIcons?.map(g => {
+                  return (<>
+                        <div className="tags-group-icon-pair ml-6 select-none">
+                            <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img src={g.img_1} title={g.title_1} className='w-2/3' />
+                            </div>
+                            <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img src={g.img_2} title={g.title_2} className='w-2/3' />
+                            </div>
+                        </div>
+                    </>)
+                })}
+            </div>
+        </div>
+  )
 }
 
 /**
@@ -58,20 +96,20 @@ function Banner() {
 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">
+            <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-500 ease-in">
                 <div className="font-bold text-lg pl-5 relative">
                     必看精选
                     <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 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">
+            <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-500 ease-in">
                 <div className="font-bold text-lg pl-5 relative">
                     热门文章
                     <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 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">
+            <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-500 ease-in">
                 <div className="font-bold text-lg pl-5 relative">
                     实用教程
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
@@ -120,8 +158,8 @@ function TodayCard({ cRef }) {
   const [isCoverUp, setIsCoverUp] = useState(true)
 
   /**
- * 外部可以调用此方法
- */
+         * 外部可以调用此方法
+         */
   useImperativeHandle(cRef, () => {
     return {
       coverUp: () => {
@@ -131,28 +169,28 @@ function TodayCard({ cRef }) {
   })
 
   /**
- * 点击更多
- * @param {*} e
- */
+         * 点击更多
+         * @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={`${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='card-body' onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110 pointer-events-none'} shadow transition-all duration-200 today-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-xs font-light'>新版上线</div>
+                    <div className='text-3xl font-bold'>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'} />
diff --git a/themes/heo/config.js b/themes/heo/config.js
index 6f0fe77f..16b03629 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -11,6 +11,66 @@ const CONFIG = {
     '🧱 团队小组发动机'
   ],
 
+  // 用户技能图标
+  GROUP_ICONS: [
+    {
+      title_1: 'AfterEffect',
+      img_1: 'https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover',
+      color_1: '#989bf8',
+      title_2: 'Sketch',
+      img_2: 'https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover',
+      color_2: '#ffffff'
+    },
+    {
+      title_1: 'Docker',
+      img_1: 'https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover',
+      color_1: '#57b6e6',
+      title_2: 'Photoshop',
+      img_2: 'https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover',
+      color_2: '#4082c3'
+    },
+    {
+      title_1: 'FinalCutPro',
+      img_1: 'https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover',
+      color_1: '#ffffff',
+      title_2: 'Python',
+      img_2: 'https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover',
+      color_2: '#ffffff'
+    },
+    {
+      title_1: 'Swift',
+      img_1: 'https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover',
+      color_1: '#eb6840',
+      title_2: 'Principle',
+      img_2: 'https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover',
+      color_2: '#8f55ba'
+    },
+    {
+      title_1: 'illustrator',
+      img_1: 'https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover',
+      color_1: '#f29e39',
+      title_2: 'CSS3',
+      img_2: 'https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover',
+      color_2: '#2c51db'
+    },
+    {
+      title_1: 'JS',
+      img_1: 'https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover',
+      color_1: '#f7cb4f',
+      title_2: 'HTML',
+      img_2: 'https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover',
+      color_2: '#e9572b'
+    },
+    {
+      title_1: 'Git',
+      img_1: 'https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover',
+      color_1: '#df5b40',
+      title_2: 'Rhino',
+      img_2: 'https://p.zhheo.com/20231ca53fa0b09a3ff1df89acd7515e9516173302.png!cover',
+      color_2: '#1f1f1f'
+    }
+  ],
+
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
   // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
   HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂动； false则随鼠标滚动 ;
diff --git a/themes/heo/style.js b/themes/heo/style.js
index bf99f760..5b462e3b 100644
--- a/themes/heo/style.js
+++ b/themes/heo/style.js
@@ -6,7 +6,6 @@
  */
 const Style = () => {
   return <style jsx global>{`
-    
     .test {
       text-color: red;
     }
@@ -40,6 +39,24 @@ const Style = () => {
         display: none;
     }
 
+    * {
+        box-sizing: border-box;
+    }
+
+    // 标签滚动动画
+    .tags-group-wrapper {
+        animation: rowup 60s linear infinite;
+    }
+    
+    @keyframes rowup {
+        0% {
+            transform: translateX(0%);
+        }
+        100% {
+            transform: translateX(-50%);
+        }
+    }
+
   `}</style>
 }