书架更新通知

src/components/MangaCard.tsx

@@ -12,9 +12,10 @@ interface MangaCardProps {
   href: string;
   subtitle?: string;
   badge?: string;
+  updateCount?: number;
 }
 
-export default function MangaCard({ item, href, subtitle, badge }: MangaCardProps) {
+export default function MangaCard({ item, href, subtitle, badge, updateCount }: MangaCardProps) {
   const sourceName = useMemo(() => {
     if ('sourceName' in item) return item.sourceName;
     return '';
@@ -40,6 +41,58 @@ export default function MangaCard({ item, href, subtitle, badge }: MangaCardProp
             {badge}
           </span>
         )}
+        {updateCount && updateCount > 0 && (
+          <div
+            style={{
+              position: 'absolute',
+              top: '10px',
+              right: '10px',
+              zIndex: 20,
+              pointerEvents: 'none',
+              width: '28px',
+              height: '28px',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                inset: '0',
+                borderRadius: '9999px',
+                backgroundColor: 'rgb(14 165 233)',
+                animation: 'ping-scale 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
+              }}
+            />
+            <div
+              style={{
+                position: 'absolute',
+                inset: '0',
+                borderRadius: '9999px',
+                backgroundColor: 'rgb(14 165 233)',
+                animation: 'pulse-scale 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+              }}
+            />
+            <div
+              style={{
+                position: 'absolute',
+                inset: '0',
+                borderRadius: '9999px',
+                background:
+                  'linear-gradient(to bottom right, rgb(14 165 233), rgb(2 132 199))',
+                color: 'white',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxShadow:
+                  '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+                animation: 'badge-scale 2s ease-in-out infinite',
+              }}
+            >
+              +{updateCount}
+            </div>
+          </div>
+        )}
       </div>
       <div className='space-y-1 p-3'>
         <div className='line-clamp-2 min-h-[2.75rem] text-sm font-semibold text-gray-900 dark:text-gray-100'>

src/components/NotificationPanel.tsx

@@ -122,6 +122,17 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
       const { source, id, title } = notification.metadata;
       router.push(`/play?source=${source}&id=${id}&title=${encodeURIComponent(title)}`);
       onClose();
+    } else if (notification.type === 'manga_update' && notification.metadata) {
+      const { sourceId, mangaId, title, cover, sourceName } = notification.metadata;
+      const params = new URLSearchParams({
+        sourceId,
+        mangaId,
+        title: title || '',
+        cover: cover || '',
+        sourceName: sourceName || '',
+      });
+      router.push(`/manga/detail?${params.toString()}`);
+      onClose();
     } else if (notification.type === 'movie_request') {
       // 获取用户角色
       const authInfo = getAuthInfoFromBrowserCookie();