From 7f45a2a2c1beda0901d31fbc9b42ab02fa5455a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=8F=89=E6=A0=91=E6=A0=91?= <acofork@qq.com>
Date: Sun, 25 Jan 2026 21:25:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(widget):=20=E5=A2=9E=E5=BC=BA=E6=96=B0?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=80=9A=E7=9F=A5=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为通知铃铛添加入场动画和退出逻辑，提升用户体验
- 新增“清空通知”按钮，允许用户重置通知基准时间
- 优化无更新和有时更新的状态显示，合并时间信息
- 为通知点添加脉冲动画以增强视觉提示
- 调整面板响应式布局，在小屏幕上优化底部间距
---
 .../widget/NewPostNotification.astro          | 61 ++++++++++++++-----
 src/content/posts/pin.md                      |  3 -
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/components/widget/NewPostNotification.astro b/src/components/widget/NewPostNotification.astro
index 4af9770b8..9cbdc7bf6 100644
--- a/src/components/widget/NewPostNotification.astro
+++ b/src/components/widget/NewPostNotification.astro
@@ -23,21 +23,26 @@
 
 <div id="new-post-notification" class="fixed bottom-4 right-4 z-50 flex flex-col items-end pointer-events-none">
     <!-- Minimized State (Bell Icon) -->
-    <button id="notification-minimized" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] text-[var(--primary)] p-3 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 flex items-center justify-center relative group">
+    <button id="notification-minimized" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] text-[var(--primary)] p-3 rounded-full shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] hover:scale-110 active:scale-95 flex items-center justify-center relative group">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg>
-        <span id="notification-dot" class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-[var(--card-bg)] hidden"></span>
+        <span id="notification-dot" class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-[var(--card-bg)] hidden animate-pulse"></span>
     </button>
 
     <!-- Expanded State (Panel) -->
-    <div id="notification-panel" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] rounded-xl shadow-lg p-4 max-w-sm w-80 transform translate-y-4 opacity-0 scale-95 origin-bottom-right transition-all duration-300 hidden absolute bottom-14 right-0">
+    <div id="notification-panel" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] rounded-xl shadow-lg p-4 max-w-[90vw] w-80 transform translate-y-4 opacity-0 scale-95 origin-bottom-right transition-all duration-300 hidden absolute bottom-16 right-0 sm:bottom-14">
         <div class="flex items-center justify-between mb-3">
             <div class="flex items-center gap-2 text-[var(--primary)]">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
                 <h3 class="font-bold text-black dark:text-white">发现新文章</h3>
             </div>
-            <button id="minimize-notification" class="text-black/50 dark:text-white/50 hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--primary)]/10">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
+            <div class="flex items-center gap-1">
+                <button id="clear-notification" class="text-black/50 dark:text-white/50 hover:text-red-500 transition-colors p-1 rounded-md hover:bg-red-500/10" title="清空通知">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+                </button>
+                <button id="minimize-notification" class="text-black/50 dark:text-white/50 hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--primary)]/10" title="隐藏">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </button>
+            </div>
         </div>
         <div id="new-post-list" class="text-sm text-black/80 dark:text-white/80 transition-colors space-y-1 max-h-[60vh] overflow-y-auto overflow-x-hidden custom-scrollbar"></div>
     </div>
@@ -179,20 +184,28 @@
         const list = document.getElementById(LIST_ID);
         const dot = document.getElementById('notification-dot');
         const minimizeBtn = document.getElementById('minimize-notification');
+        const clearBtn = document.getElementById('clear-notification');
+        const NOTIFICATION_STATE_KEY = 'fuwari-notification-state';
+        const INIT_TIME_KEY = 'fuwari-notification-init-time';
         
         if (!minimizedBtn || !panel || !list) return;
         
-        // Always show the minimized bell
-        minimizedBtn.classList.remove('translate-y-20', 'opacity-0');
+        // Show the minimized bell with animation
+        // Add a small delay to make the entrance noticeable after page load
+        requestAnimationFrame(() => {
+            minimizedBtn.classList.remove('translate-y-20', 'opacity-0');
+        });
 
         const initTimeStr = new Date(initTime).toLocaleString();
+        const checkTimeStr = new Date(timestamp).toLocaleString();
 
         // Logic for "No updates"
         if (newPosts.length === 0) {
              list.innerHTML = `<div class="text-center text-gray-500 dark:text-gray-400 py-4">
-                <p class="text-sm">自上一次访问，暂无文章更新</p>
-                <p class="text-xs mt-1 opacity-70">检查于: ${new Date(timestamp).toLocaleString()}</p>
-                <p class="text-xs mt-1 opacity-50">初始化于: ${initTimeStr}</p>
+                <p class="text-sm font-medium mb-2">暂无文章更新</p>
+                <div class="text-xs opacity-70 bg-gray-100 dark:bg-gray-800 rounded px-2 py-1 inline-block">
+                    ${initTimeStr} - ${checkTimeStr}
+                </div>
              </div>`;
              dot?.classList.add('hidden');
              
@@ -202,11 +215,10 @@
         }
         
         // Show timestamp header
-        const timeStr = new Date(timestamp).toLocaleString();
         let html = `
             <div class="text-xs text-gray-500 dark:text-gray-400 mb-2 px-1 flex flex-col gap-0.5">
-                <div>发现更新于: ${timeStr}</div>
-                <div class="opacity-70">初始化于: ${initTimeStr}</div>
+                <div class="font-medium">发现更新</div>
+                <div class="opacity-70 text-[10px]">${initTimeStr} - ${checkTimeStr}</div>
             </div>`;
         
         newPosts.forEach(post => {
@@ -297,7 +309,28 @@
             minimizeBtn.onclick = (e) => {
                 e.stopPropagation();
                 closePanel();
+                // Completely hide the bell after closing the panel via the 'X' button
+                // Wait for panel closing animation to finish
+                setTimeout(() => {
+                    minimizedBtn.classList.add('translate-y-20', 'opacity-0');
+                    minimizedBtn.classList.add('pointer-events-none'); // Prevent clicks while hidden
+                }, 300);
             };
+
+            if (clearBtn) {
+                clearBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    // Clear state from localStorage
+                    localStorage.removeItem(NOTIFICATION_STATE_KEY);
+                    
+                    // Update init time to current time since we are "resetting" the baseline
+                    const now = Date.now();
+                    localStorage.setItem(INIT_TIME_KEY, now.toString());
+                    
+                    // Refresh view with new init time
+                    showNotification([], now, false, now);
+                };
+            }
     
             // Add event delegation for toggles
             // Ensure we don't add duplicate listeners to list
diff --git a/src/content/posts/pin.md b/src/content/posts/pin.md
index dcf2c6586..ea5c47d24 100644
--- a/src/content/posts/pin.md
+++ b/src/content/posts/pin.md
@@ -3,9 +3,6 @@ title: 加群向导
 image: /random/h
 published: 2025-05-24
 pinned: true
-category: 置顶
-tags:
-  - 联系
 description: 关于如何联系二叉树树~
 ---