feat(widget): 增强新文章通知组件的交互和视觉效果

- 为通知铃铛添加入场动画和退出逻辑，提升用户体验 - 新增“清空通知”按钮，允许用户重置通知基准时间 - 优化无更新和有时更新的状态显示，合并时间信息 - 为通知点添加脉冲动画以增强视觉提示 - 调整面板响应式布局，在小屏幕上优化底部间距
2026-01-31 00:53:19 +08:00 · 2026-01-25 21:25:57 +08:00
parent d89978d2a2
commit 7f45a2a2c1
2 changed files with 47 additions and 17 deletions
--- 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
--- 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: 关于如何联系二叉树树~
 ---