feat: integrate NotificationBell into MainLayout header

apps/admin/src/layouts/MainLayout.tsx

@@ -26,6 +26,7 @@ import {
   LaptopOutlined,
 } from '@ant-design/icons';
 import { usePermission } from '../hooks/usePermission';
+import NotificationBell from '../components/NotificationBell';
 
 const { Header, Sider, Content } = Layout;
 
@@ -264,24 +265,26 @@ const MainLayout: React.FC = () => {
               )
             }
             onClick={() => (isMobile || isTablet ? setDrawerOpen(true) : setCollapsed(!collapsed))}
-          />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          <Dropdown
+            <NotificationBell />
-            menu={{
+            <Dropdown
-              items: [
+              menu={{
-                {
+                items: [
-                  key: 'logout',
+                  {
-                  icon: <LogoutOutlined />,
+                    key: 'logout',
-                  label: '退出登录',
+                    icon: <LogoutOutlined />,
-                  onClick: handleLogout,
+                    label: '退出登录',
-                },
+                    onClick: handleLogout,
-              ],
+                  },
-            }}
+                ],
-          >
+              }}
-            <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
+            >
-              <Avatar icon={<UserOutlined />} />
+              <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
-              {isDesktop && <span>{user.name || user.username || '用户'}</span>}
+                <Avatar icon={<UserOutlined />} />
-            </div>
+                {isDesktop && <span>{user.name || user.username || '用户'}</span>}
-          </Dropdown>
+              </div>
+            </Dropdown>
+          </div>
         </Header>
         <Content
           style={{