书架更新通知

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'>