From eb3a0a0baea0da5df3312db3b06d9f89876fd1d3 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 15 Jul 2023 11:08:40 +0800
Subject: [PATCH] theme-heo-notice-bar

---
 themes/heo/components/AnalyticsCard.js | 27 +++++++---
 themes/heo/components/Hero.js          |  2 +-
 themes/heo/components/NoticeBar.js     | 35 +++++++++---
 themes/heo/components/SideRight.js     |  2 -
 themes/heo/components/Swipe.js         | 73 ++++++++++++++++++++++++++
 themes/heo/config.js                   | 11 +++-
 themes/heo/index.js                    |  4 +-
 7 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 themes/heo/components/Swipe.js

diff --git a/themes/heo/components/AnalyticsCard.js b/themes/heo/components/AnalyticsCard.js
index 9732fcd4..a9d30477 100644
--- a/themes/heo/components/AnalyticsCard.js
+++ b/themes/heo/components/AnalyticsCard.js
@@ -1,23 +1,38 @@
+import CONFIG from '../config'
+
+/**
+ * 博客统计卡牌
+ * @param {*} props
+ * @returns
+ */
 export function AnalyticsCard(props) {
+  const targetDate = new Date(CONFIG.SITE_CREATE_TIME)
+  const today = new Date()
+  const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
+
   const { postCount } = props
   return <>
-        <div className='ml-2 mb-3 '>
-            <i className='fas fa-chart-area' /> 统计
-        </div>
-        <div className='text-xs  font-light justify-center mx-7'>
+        <div className='text-md flex flex-col space-y-1 justify-center px-3'>
             <div className='inline'>
                 <div className='flex justify-between'>
                     <div>文章数:</div>
                     <div>{postCount}</div>
                 </div>
             </div>
-            <div className='hidden busuanzi_container_page_pv ml-2'>
+            <div className='inline'>
+                <div className='flex justify-between'>
+                    <div>建站天数:</div>
+                    <div>{diffDays} 天</div>
+                </div>
+            </div>
+            <div className='hidden busuanzi_container_page_pv'>
                 <div className='flex justify-between'>
                     <div>访问量:</div>
                     <div className='busuanzi_value_page_pv' />
                 </div>
             </div>
-            <div className='hidden busuanzi_container_site_uv ml-2'>
+            <div className='hidden busuanzi_container_site_uv'>
                 <div className='flex justify-between'>
                     <div>访客数:</div>
                     <div className='busuanzi_value_site_uv' />
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 250848e9..5ed6b333 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -16,7 +16,7 @@ import CONFIG from '../config'
  */
 const Hero = props => {
   return (
-        <div id="hero-wrapper" className='recent-top-post-group w-full mt-20 overflow-hidden select-none px-5 mb-4'>
+        <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 {...props} />
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
index 5d9e8843..822c292f 100644
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -1,18 +1,37 @@
 
 import { ArrowRightCircle } from '@/components/HeroIcons'
-import Link from 'next/link'
+import CONFIG from '../config'
+import Swipe from './Swipe'
 
 /**
  * 通知横幅
  */
 export function NoticeBar() {
+  const notices = CONFIG.NOTICE_BAR
+
+  if (!notices || notices?.length === 0) {
+    return <></>
+  }
+
   return (
-          <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-              <Link href='https://tangly1024.com' className="bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
-                  <span className='whitespace-nowrap'>此刻</span>
-                  <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">欢迎来到我的博客</div>
-                  <div><ArrowRightCircle className={'w-5 h-5'} /></div>
-              </Link>
-          </notice>
+        <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
+            <div className="group cursor-pointer bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
+                <span className='whitespace-nowrap'>此刻</span>
+                <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
+                    <Swipe items={notices} />
+                </div>
+                <div><ArrowRightCircle className={'w-5 h-5'} /></div>
+            </div>
+        </notice>
   )
 }
+
+/**
+ *  {notices?.map((n, index) => {
+              return <Link key={index} href={n.url} className="bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
+                    <span className='whitespace-nowrap'>{n.category}</span>
+                    <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">{n.title}</div>
+                    <div><ArrowRightCircle className={'w-5 h-5'} /></div>
+                </Link>
+            })}
+ */
diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js
index 3c124071..0ffe0deb 100644
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -4,7 +4,6 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import dynamic from 'next/dynamic'
 import Live2D from '@/components/Live2D'
-import MenuGroupCard from './MenuGroupCard'
 import FlipCard from '@/components/FlipCard'
 import Link from 'next/link'
 import { AnalyticsCard } from './AnalyticsCard'
@@ -63,7 +62,6 @@ export default function SideRight(props) {
             <Card className={'sticky top-20 bg-white'}>
                 <TagGroups tags={tagOptions} currentTag={currentTag} />
                 <hr className='mx-1 flex border-dashed relative my-2'/>
-                <MenuGroupCard {...props} />
                 <AnalyticsCard {...props} />
             </Card>
 
diff --git a/themes/heo/components/Swipe.js b/themes/heo/components/Swipe.js
new file mode 100644
index 00000000..17fa928d
--- /dev/null
+++ b/themes/heo/components/Swipe.js
@@ -0,0 +1,73 @@
+import { isBrowser } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+
+/**
+ * 一个swipe组件
+ * 垂直方向，定时滚动
+ * @param {*} param0
+ * @returns
+ */
+export function Swipe({ items }) {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const handleClick = (item) => {
+    if (isBrowser()) {
+      window.open(item?.url)
+    }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveIndex((activeIndex + 1) % items.length)
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [activeIndex, items.length])
+
+  return (
+        <div className="h-full relative w-full overflow-hidden">
+            {items.map((item, index) => (
+                <div
+                    onClick={() => handleClick(item)}
+                    key={index}
+                    className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${index === activeIndex ? 'translate-y-0 slide-in' : 'translate-y-full slide-out'
+                        }`}
+                >
+                    {item.title}
+                </div>
+            ))}
+            <style jsx>{`
+      .slide-in {
+        animation-name: slide-in;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      
+      .slide-out {
+        animation-name: slide-out;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      
+      @keyframes slide-in {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+      
+      @keyframes slide-out {
+        from {
+          transform: translateY(0);
+        }
+        to {
+          transform: translateY(-100%);
+        }
+      }
+      `}</style>
+        </div>
+  )
+};
+
+export default Swipe
diff --git a/themes/heo/config.js b/themes/heo/config.js
index 16b03629..ee494980 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -1,6 +1,15 @@
 const CONFIG = {
   HOME_BANNER_ENABLE: true,
-  // 欢迎语
+
+  SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天
+
+  // 首页顶部通知条滚动内容，如不需要可以留空 []
+  NOTICE_BAR: [
+    { url: 'https://blog.tangly1024.com', title: '欢迎来到我的博客' },
+    { url: 'https://docs.tangly1024.com', title: '访问文档中心获取更多帮助' }
+  ],
+
+  // 个人资料卡牌欢迎语
   INFOCARD_GREETINGS: [
     '你好！我是',
     '🔍 分享与热心帮助',
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 6a439616..af648427 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -134,11 +134,11 @@ const LayoutIndex = (props) => {
  */
 const LayoutPostList = (props) => {
   // 博客列表上方嵌入一个 通知横幅和英雄块
-  const headerSlot = <>
+  const headerSlot = <div className='mt-20'>
         {/* 通知横幅 */}
         <NoticeBar />
         <Hero {...props} />
-    </>
+    </div>
 
   // 右侧栏
   const slotRight = <SideRight {...props} />