From 7e79987795ca1c4ef7cbbe70fad36428e4e6408c Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Mon, 7 Jul 2025 00:42:03 +0800
Subject: [PATCH] feat(ArticleExpirationNotice): implement
 ArticleExpirationNotice component

- Add ArticleExpirationNotice component to the page layout in Heo theme

resolve #2738
---
 components/ArticleExpirationNotice.js | 73 +++++++++++++++++++++++++++
 themes/heo/index.js                   |  4 +-
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 components/ArticleExpirationNotice.js

diff --git a/components/ArticleExpirationNotice.js b/components/ArticleExpirationNotice.js
new file mode 100644
index 00000000..ce046313
--- /dev/null
+++ b/components/ArticleExpirationNotice.js
@@ -0,0 +1,73 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 文章过期提醒组件
+ * 当文章超过指定天数时显示提醒
+ * @param {Object} props - 组件属性
+ * @param {Object} props.post - 文章数据
+ * @param {number} [props.daysThreshold=90] - 过期阈值（天）
+ * @returns {JSX.Element|null}
+ */
+export default function ArticleExpirationNotice({
+  post,
+  daysThreshold = siteConfig('ARTICLE_EXPIRATION_DAYS', 90)
+}) {
+  const articleExpirationEnabled = siteConfig(
+    'ARTICLE_EXPIRATION_ENABLED',
+    false
+  )
+  if (!articleExpirationEnabled || !post?.lastEditedDay) {
+    return null
+  }
+
+  const postDate = new Date(post.lastEditedDay)
+  const today = new Date()
+  const diffTime = Math.abs(today - postDate)
+  const daysOld = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+  const isVisible = daysOld >= daysThreshold
+
+  if (!isVisible) {
+    return null
+  }
+
+  // 使用 %%DAYS%% 作为占位符
+  const articleExpirationMessage = siteConfig(
+    'ARTICLE_EXPIRATION_MESSAGE',
+    '这篇文章发布于 %%DAYS%% 天前，内容可能已过时，请谨慎参考。'
+  )
+  const articleExpirationMessageParts =
+    articleExpirationMessage.split('%%DAYS%%')
+
+  // 直接返回 JSX 内容
+  return (
+    <div
+      className={
+        'p-4 rounded-lg border border-blue-300 bg-blue-50 dark:bg-blue-900/20 text-gray-800 dark:text-gray-200 shadow-sm'
+      }>
+      <div className='flex items-start'>
+        <i className='fas fa-exclamation-triangle text-blue-500 dark:text-blue-400 mt-0.5 mr-2 flex-shrink-0' />
+        <div className='ml-1'>
+          <div className='text-blue-600 dark:text-blue-400 font-medium'>
+            {siteConfig('ARTICLE_EXPIRATION_TITLE', '温馨提醒')}
+          </div>
+          <div className='flex items-center mt-1 text-sm text-gray-700 dark:text-gray-300'>
+            <i className='far fa-clock text-red-500 dark:text-red-400 mr-1' />
+            <span>
+              {(() => {
+                return (
+                  <>
+                    {articleExpirationMessageParts[0]}
+                    <span className='text-red-500 dark:text-red-400 font-bold'>
+                      {daysOld}
+                    </span>
+                    {articleExpirationMessageParts[1]}
+                  </>
+                )
+              })()}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 6fa85552..ab779940 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -43,6 +43,7 @@ import SideRight from './components/SideRight'
 import CONFIG from './config'
 import { Style } from './style'
 import AISummary from '@/components/AISummary'
+import ArticleExpirationNotice from '@/components/ArticleExpirationNotice'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -307,7 +308,8 @@ const LayoutSlug = props => {
               <section
                 className='wow fadeInUp p-5 justify-center mx-auto'
                 data-wow-delay='.2s'>
-                <AISummary aiSummary={post.aiSummary}/>
+                <ArticleExpirationNotice post={post} />
+                <AISummary aiSummary={post.aiSummary} />
                 <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
                 <WWAds orientation='horizontal' className='w-full' />