From 9dbbe7665a476a7546861e166485ef395dff8162 Mon Sep 17 00:00:00 2001
From: 6512345 <shionxi65@gmail.com>
Date: Sun, 8 Feb 2026 23:52:14 -0500
Subject: [PATCH 1/4] feat: Bell rings when toast

---
 frontend/app/globals.css                | 19 +++++++
 frontend/app/layout.tsx                 |  7 ++-
 frontend/components/layout/header.tsx   |  6 ++-
 frontend/components/ui/sonner.tsx       | 68 +++++++++++++++++--------
 frontend/contexts/bell-ring-context.tsx | 54 ++++++++++++++++++++
 5 files changed, 129 insertions(+), 25 deletions(-)
 create mode 100644 frontend/contexts/bell-ring-context.tsx

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 5b192e7d..33d51423 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -174,4 +174,23 @@
     0% { transform: translateY(0) scale(1); opacity: 1; }
     100% { transform: translateY(-100px) scale(0); opacity: 0; }
   }
+
+  /*
+   * 铃铛响铃动画配置
+   * 使用微妙的摆动效果，优雅且不过度
+   */
+  --animate-bell-ring: bell-ring 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+
+  @keyframes bell-ring {
+    0% { transform: rotate(0deg); }
+    10% { transform: rotate(14deg); }
+    20% { transform: rotate(-12deg); }
+    30% { transform: rotate(10deg); }
+    40% { transform: rotate(-8deg); }
+    50% { transform: rotate(6deg); }
+    60% { transform: rotate(-4deg); }
+    70% { transform: rotate(2deg); }
+    80% { transform: rotate(-1deg); }
+    100% { transform: rotate(0deg); }
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 88a5e337..4a244e00 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter, Noto_Sans_SC, Geist_Mono } from 'next/font/google';
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/layout/theme-provider";
 import { CustomThemeProvider } from "@/lib/theme";
+import { BellRingProvider } from "@/contexts/bell-ring-context";
 import "./globals.css";
 
 const inter = Inter({
@@ -49,8 +50,10 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <CustomThemeProvider>
-            {children}
-            <Toaster position="top-center" />
+            <BellRingProvider>
+              {children}
+              <Toaster position="top-center" />
+            </BellRingProvider>
           </CustomThemeProvider>
         </ThemeProvider>
       </body>
diff --git a/frontend/components/layout/header.tsx b/frontend/components/layout/header.tsx
index 859f3ab3..ee71f8f6 100644
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "motion/react"
 import { Button } from "@/components/ui/button"
 import { Bell, Plus, Settings, Search, Moon, Sun, Maximize2, Minimize2 } from "lucide-react"
 import { useUser } from "@/contexts/user-context"
+import { useBellRing } from "@/contexts/bell-ring-context"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { useTheme } from "next-themes"
 import { useRouter } from "next/navigation"
@@ -22,6 +23,7 @@ import { SearchDialog } from "@/components/layout/search-dialog"
  */
 export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullWidth?: boolean, onToggleFullWidth?: (value: boolean) => void }) {
   const { user } = useUser()
+  const { isRinging } = useBellRing()
   const { setTheme, resolvedTheme } = useTheme()
   const router = useRouter()
   const [mounted, setMounted] = useState(false)
@@ -53,7 +55,7 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
               <span className="sr-only">搜索</span>
             </Button>
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-              <Bell className="size-[18px]" />
+              <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
               <span className="sr-only">通知</span>
             </Button>
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
@@ -76,7 +78,7 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
 
           <div className="ml-auto flex items-center gap-1">
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-              <Bell className="size-[18px]" />
+              <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
               <span className="sr-only">通知</span>
             </Button>
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
diff --git a/frontend/components/ui/sonner.tsx b/frontend/components/ui/sonner.tsx
index 9b20afe2..9828c527 100644
--- a/frontend/components/ui/sonner.tsx
+++ b/frontend/components/ui/sonner.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useRef } from "react"
 import {
   CircleCheckIcon,
   InfoIcon,
@@ -8,33 +9,58 @@ import {
   TriangleAlertIcon,
 } from "lucide-react"
 import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { Toaster as Sonner, useSonner, type ToasterProps } from "sonner"
+import { useBellRing } from "@/contexts/bell-ring-context"
+
+/**
+ * Toast 观察器组件
+ * 监听 toast 事件并触发铃铛响铃动画
+ */
+function ToastObserver() {
+  const { toasts } = useSonner()
+  const { triggerRing } = useBellRing()
+  const prevToastCountRef = useRef(0)
+
+  useEffect(() => {
+    // 当 toast 数量增加时触发响铃
+    if (toasts.length > prevToastCountRef.current) {
+      triggerRing()
+    }
+    prevToastCountRef.current = toasts.length
+  }, [toasts.length, triggerRing])
+
+  return null
+}
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
   return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
+    <>
+      <ToastObserver />
+      <Sonner
+        theme={theme as ToasterProps["theme"]}
+        className="toaster group"
+        icons={{
+          success: <CircleCheckIcon className="size-4" />,
+          info: <InfoIcon className="size-4" />,
+          warning: <TriangleAlertIcon className="size-4" />,
+          error: <OctagonXIcon className="size-4" />,
+          loading: <Loader2Icon className="size-4 animate-spin" />,
+        }}
+        style={
+          {
+            "--normal-bg": "var(--popover)",
+            "--normal-text": "var(--popover-foreground)",
+            "--normal-border": "var(--border)",
+            "--border-radius": "var(--radius)",
+          } as React.CSSProperties
+        }
+        {...props}
+      />
+    </>
   )
 }
 
 export { Toaster }
+
diff --git a/frontend/contexts/bell-ring-context.tsx b/frontend/contexts/bell-ring-context.tsx
new file mode 100644
index 00000000..69af9667
--- /dev/null
+++ b/frontend/contexts/bell-ring-context.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { createContext, useContext, useState, useCallback, useRef } from "react"
+
+interface BellRingContextType {
+  isRinging: boolean
+  triggerRing: () => void
+}
+
+const BellRingContext = createContext<BellRingContextType | undefined>(undefined)
+
+/**
+ * 铃铛响铃动画上下文提供者
+ * 用于在 toast 通知时触发顶栏铃铛的响铃动画
+ */
+export function BellRingProvider({ children }: { children: React.ReactNode }) {
+  const [isRinging, setIsRinging] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const triggerRing = useCallback(() => {
+    // 如果正在响铃，立即重新开始动画
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    setIsRinging(false)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setIsRinging(true)
+        timeoutRef.current = setTimeout(() => {
+          setIsRinging(false)
+          timeoutRef.current = null
+        }, 600)
+      })
+    })
+  }, [])
+
+  return (
+    <BellRingContext.Provider value={{ isRinging, triggerRing }}>
+      {children}
+    </BellRingContext.Provider>
+  )
+}
+
+/**
+ * 使用铃铛响铃动画的 Hook
+ * @returns {{ isRinging: boolean, triggerRing: () => void }}
+ */
+export function useBellRing() {
+  const context = useContext(BellRingContext)
+  if (context === undefined) {
+    throw new Error("useBellRing must be used within a BellRingProvider")
+  }
+  return context
+}

From 742546ad1163a40a872a0c607dc5704b1444e2ff Mon Sep 17 00:00:00 2001
From: 6512345 <shionxi65@gmail.com>
Date: Mon, 9 Feb 2026 00:40:42 -0500
Subject: [PATCH 2/4] feat: notification settings

---
 .../(main)/settings/notifications/page.tsx    |  5 ++
 frontend/app/layout.tsx                       | 11 ++--
 .../common/settings/notifications.tsx         | 60 ++++++++++++++++++
 frontend/components/layout/header.tsx         | 22 ++++---
 .../notification-settings-context.tsx         | 62 +++++++++++++++++++
 5 files changed, 148 insertions(+), 12 deletions(-)
 create mode 100644 frontend/app/(main)/settings/notifications/page.tsx
 create mode 100644 frontend/components/common/settings/notifications.tsx
 create mode 100644 frontend/contexts/notification-settings-context.tsx

diff --git a/frontend/app/(main)/settings/notifications/page.tsx b/frontend/app/(main)/settings/notifications/page.tsx
new file mode 100644
index 00000000..f074147d
--- /dev/null
+++ b/frontend/app/(main)/settings/notifications/page.tsx
@@ -0,0 +1,5 @@
+import { NotificationsMain } from "@/components/common/settings/notifications"
+
+export default function NotificationsPage() {
+  return <NotificationsMain />
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 4a244e00..f2f2f369 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -4,6 +4,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/layout/theme-provider";
 import { CustomThemeProvider } from "@/lib/theme";
 import { BellRingProvider } from "@/contexts/bell-ring-context";
+import { NotificationSettingsProvider } from "@/contexts/notification-settings-context";
 import "./globals.css";
 
 const inter = Inter({
@@ -50,10 +51,12 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <CustomThemeProvider>
-            <BellRingProvider>
-              {children}
-              <Toaster position="top-center" />
-            </BellRingProvider>
+            <NotificationSettingsProvider>
+              <BellRingProvider>
+                {children}
+                <Toaster position="top-center" />
+              </BellRingProvider>
+            </NotificationSettingsProvider>
           </CustomThemeProvider>
         </ThemeProvider>
       </body>
diff --git a/frontend/components/common/settings/notifications.tsx b/frontend/components/common/settings/notifications.tsx
new file mode 100644
index 00000000..6dca9fc6
--- /dev/null
+++ b/frontend/components/common/settings/notifications.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link"
+import { Bell } from "lucide-react"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { useNotificationSettings } from "@/contexts/notification-settings-context"
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+
+export function NotificationsMain() {
+  const { showBell, setShowBell } = useNotificationSettings()
+
+  return (
+    <div className="py-6 space-y-6">
+      <div className="font-semibold">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/settings" className="text-base text-primary">设置</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage className="text-base font-semibold">通知设置</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <h2 className="font-medium text-sm text-foreground">通知显示</h2>
+          <p className="text-xs text-muted-foreground">
+            设置通知相关的显示选项
+          </p>
+        </div>
+
+        <div className="flex items-center justify-between rounded-lg border p-4">
+          <div className="flex items-center gap-3">
+            <Bell className="size-5 text-primary" />
+            <div className="space-y-0.5">
+              <Label htmlFor="show-bell" className="text-sm font-medium cursor-pointer">
+                显示通知铃铛
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                在顶部导航栏中显示通知铃铛图标
+              </p>
+            </div>
+          </div>
+          <Switch
+            id="show-bell"
+            checked={showBell}
+            onCheckedChange={setShowBell}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/layout/header.tsx b/frontend/components/layout/header.tsx
index ee71f8f6..ae3be57c 100644
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Bell, Plus, Settings, Search, Moon, Sun, Maximize2, Minimize2 } from "lucide-react"
 import { useUser } from "@/contexts/user-context"
 import { useBellRing } from "@/contexts/bell-ring-context"
+import { useNotificationSettings } from "@/contexts/notification-settings-context"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { useTheme } from "next-themes"
 import { useRouter } from "next/navigation"
@@ -24,6 +25,7 @@ import { SearchDialog } from "@/components/layout/search-dialog"
 export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullWidth?: boolean, onToggleFullWidth?: (value: boolean) => void }) {
   const { user } = useUser()
   const { isRinging } = useBellRing()
+  const { showBell } = useNotificationSettings()
   const { setTheme, resolvedTheme } = useTheme()
   const router = useRouter()
   const [mounted, setMounted] = useState(false)
@@ -54,10 +56,12 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
               <Search className="size-[18px]" />
               <span className="sr-only">搜索</span>
             </Button>
-            <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-              <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
-              <span className="sr-only">通知</span>
-            </Button>
+            {showBell && (
+              <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
+                <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
+                <span className="sr-only">通知</span>
+              </Button>
+            )}
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
               <Settings className="size-[18px]" />
               <span className="sr-only">设置</span>
@@ -77,10 +81,12 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
           </div>
 
           <div className="ml-auto flex items-center gap-1">
-            <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-              <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
-              <span className="sr-only">通知</span>
-            </Button>
+            {showBell && (
+              <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
+                <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
+                <span className="sr-only">通知</span>
+              </Button>
+            )}
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
               <Settings className="size-[18px]" />
               <span className="sr-only">设置</span>
diff --git a/frontend/contexts/notification-settings-context.tsx b/frontend/contexts/notification-settings-context.tsx
new file mode 100644
index 00000000..b0819ae1
--- /dev/null
+++ b/frontend/contexts/notification-settings-context.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react"
+
+interface NotificationSettingsContextType {
+  showBell: boolean
+  setShowBell: (value: boolean) => void
+}
+
+const NotificationSettingsContext = createContext<NotificationSettingsContextType | undefined>(undefined)
+
+const STORAGE_KEY = "notification-settings"
+
+interface StoredSettings {
+  showBell: boolean
+}
+
+export function NotificationSettingsProvider({ children }: { children: ReactNode }) {
+  const [showBell, setShowBellState] = useState(true)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      try {
+        const settings: StoredSettings = JSON.parse(stored)
+        if (typeof settings.showBell === "boolean") {
+          setShowBellState(settings.showBell)
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    }
+    setMounted(true)
+  }, [])
+
+  const setShowBell = (value: boolean) => {
+    setShowBellState(value)
+    const settings: StoredSettings = { showBell: value }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  }
+
+  // Prevent hydration mismatch by returning default value until mounted
+  const contextValue: NotificationSettingsContextType = {
+    showBell: mounted ? showBell : true,
+    setShowBell,
+  }
+
+  return (
+    <NotificationSettingsContext.Provider value={contextValue}>
+      {children}
+    </NotificationSettingsContext.Provider>
+  )
+}
+
+export function useNotificationSettings() {
+  const context = useContext(NotificationSettingsContext)
+  if (context === undefined) {
+    throw new Error("useNotificationSettings must be used within a NotificationSettingsProvider")
+  }
+  return context
+}

From f286ac9f99ebd5709532fc7ca73b098bfe9db86d Mon Sep 17 00:00:00 2001
From: 6512345 <shionxi65@gmail.com>
Date: Mon, 9 Feb 2026 01:20:27 -0500
Subject: [PATCH 3/4] fix: efficiency fix

---
 frontend/components/layout/header.tsx         | 40 ++++++++++++-------
 .../notification-settings-context.tsx         | 12 +++---
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/frontend/components/layout/header.tsx b/frontend/components/layout/header.tsx
index ae3be57c..06025cf0 100644
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, memo } from "react"
 import { AnimatePresence, motion } from "motion/react"
 import { Button } from "@/components/ui/button"
 import { Bell, Plus, Settings, Search, Moon, Sun, Maximize2, Minimize2 } from "lucide-react"
@@ -13,6 +13,28 @@ import { useRouter } from "next/navigation"
 import { SearchDialog } from "@/components/layout/search-dialog"
 
 
+/**
+ * 铃铛按钮组件
+ */
+const BellButton = memo(function BellButton() {
+  const { isRinging } = useBellRing()
+  const { showBell, isMounted } = useNotificationSettings()
+
+  if (!isMounted) return null
+  if (!showBell) return null
+
+  return (
+    <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
+      <Bell 
+        className="size-[18px]" 
+        style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} 
+      />
+      <span className="sr-only">通知</span>
+    </Button>
+  )
+})
+
+
 /**
  * 站点头部组件
  * 用于显示站点头部
@@ -24,8 +46,6 @@ import { SearchDialog } from "@/components/layout/search-dialog"
  */
 export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullWidth?: boolean, onToggleFullWidth?: (value: boolean) => void }) {
   const { user } = useUser()
-  const { isRinging } = useBellRing()
-  const { showBell } = useNotificationSettings()
   const { setTheme, resolvedTheme } = useTheme()
   const router = useRouter()
   const [mounted, setMounted] = useState(false)
@@ -56,12 +76,7 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
               <Search className="size-[18px]" />
               <span className="sr-only">搜索</span>
             </Button>
-            {showBell && (
-              <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-                <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
-                <span className="sr-only">通知</span>
-              </Button>
-            )}
+            <BellButton />
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
               <Settings className="size-[18px]" />
               <span className="sr-only">设置</span>
@@ -81,12 +96,7 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
           </div>
 
           <div className="ml-auto flex items-center gap-1">
-            {showBell && (
-              <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
-                <Bell className="size-[18px]" style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} />
-                <span className="sr-only">通知</span>
-              </Button>
-            )}
+            <BellButton />
             <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground" onClick={() => router.push('/settings')}>
               <Settings className="size-[18px]" />
               <span className="sr-only">设置</span>
diff --git a/frontend/contexts/notification-settings-context.tsx b/frontend/contexts/notification-settings-context.tsx
index b0819ae1..99e3686b 100644
--- a/frontend/contexts/notification-settings-context.tsx
+++ b/frontend/contexts/notification-settings-context.tsx
@@ -1,9 +1,10 @@
 "use client"
 
-import { createContext, useContext, useState, useEffect, ReactNode } from "react"
+import { createContext, useContext, useState, useEffect, ReactNode, useMemo } from "react"
 
 interface NotificationSettingsContextType {
   showBell: boolean
+  isMounted: boolean
   setShowBell: (value: boolean) => void
 }
 
@@ -40,11 +41,12 @@ export function NotificationSettingsProvider({ children }: { children: ReactNode
     localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
   }
 
-  // Prevent hydration mismatch by returning default value until mounted
-  const contextValue: NotificationSettingsContextType = {
-    showBell: mounted ? showBell : true,
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo<NotificationSettingsContextType>(() => ({
+    showBell,
+    isMounted: mounted,
     setShowBell,
-  }
+  }), [showBell, mounted])
 
   return (
     <NotificationSettingsContext.Provider value={contextValue}>

From 09fca17487739d332526dee181efe52be431e0a7 Mon Sep 17 00:00:00 2001
From: 6512345 <shionxi65@gmail.com>
Date: Mon, 9 Feb 2026 01:42:29 -0500
Subject: [PATCH 4/4] feat: bell click animation

---
 frontend/components/layout/header.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/components/layout/header.tsx b/frontend/components/layout/header.tsx
index 06025cf0..f6f3f797 100644
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -19,15 +19,26 @@ import { SearchDialog } from "@/components/layout/search-dialog"
 const BellButton = memo(function BellButton() {
   const { isRinging } = useBellRing()
   const { showBell, isMounted } = useNotificationSettings()
+  const [isClickAnimating, setIsClickAnimating] = useState(false)
 
   if (!isMounted) return null
   if (!showBell) return null
 
+  const handleClick = () => {
+    setIsClickAnimating(true)
+    setTimeout(() => setIsClickAnimating(false), 600)
+  }
+
   return (
-    <Button variant="ghost" size="icon" className="size-9 text-muted-foreground hover:text-foreground">
+    <Button 
+      variant="ghost" 
+      size="icon" 
+      className="size-9 text-muted-foreground hover:text-foreground"
+      onClick={handleClick}
+    >
       <Bell 
         className="size-[18px]" 
-        style={isRinging ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} 
+        style={(isRinging || isClickAnimating) ? { animation: 'var(--animate-bell-ring)', transformOrigin: 'top center' } : undefined} 
       />
       <span className="sr-only">通知</span>
     </Button>