增加右上角告警铃铛

src/layouts/MainLayout.vue

@@ -77,6 +77,28 @@
           <template #title>计划管理</template>
         </el-menu-item>
 
+        <!-- 告警中心二级菜单 -->
+        <el-sub-menu index="/alarm">
+          <template #title>
+            <el-icon>
+              <Bell/>
+            </el-icon>
+            <span>告警中心</span>
+          </template>
+          <el-menu-item index="/alarms">
+            <el-icon>
+              <Warning />
+            </el-icon>
+            <template #title>告警管理</template>
+          </el-menu-item>
+          <el-menu-item index="/alarms/thresholds">
+            <el-icon>
+              <Setting />
+            </el-icon>
+            <template #title>阈值告警配置</template>
+          </el-menu-item>
+        </el-sub-menu>
+
         <!-- 数据中心二级菜单 -->
         <el-sub-menu index="/monitor">
           <template #title>
@@ -195,28 +217,6 @@
           </el-menu-item>
         </el-sub-menu>
 
-        <!-- 告警中心二级菜单 -->
-        <el-sub-menu index="/alarm">
-          <template #title>
-            <el-icon>
-              <Bell/>
-            </el-icon>
-            <span>告警中心</span>
-          </template>
-          <el-menu-item index="/alarms">
-            <el-icon>
-              <Warning />
-            </el-icon>
-            <template #title>告警管理</template>
-          </el-menu-item>
-          <el-menu-item index="/alarms/thresholds">
-            <el-icon>
-              <Setting />
-            </el-icon>
-            <template #title>阈值告警配置</template>
-          </el-menu-item>
-        </el-sub-menu>
-
       </el-menu>
     </el-aside>
 
@@ -235,6 +235,12 @@
             <h3 class="page-title">{{ currentPageTitle }}</h3>
           </div>
           <div class="user-info">
+            <!-- 告警铃铛图标和角标 -->
+            <el-badge :value="unresolvedAlarmCount" :max="99" class="alarm-badge" @click="goToAlarmList" v-if="unresolvedAlarmCount > 0">
+              <el-icon :size="20"><Bell /></el-icon>
+            </el-badge>
+            <el-icon :size="20" class="alarm-icon" @click="goToAlarmList" v-else><Bell /></el-icon>
+
             <el-dropdown>
               <span class="el-dropdown-link">
                 {{ username }} <el-icon><ArrowDown/></el-icon>
@@ -297,6 +303,7 @@ import {
   Management,
   Bell
 } from '@element-plus/icons-vue';
+import { getActiveAlarms } from '../api/alarm'; // 导入告警API
 
 export default {
   name: 'MainLayout',
@@ -336,17 +343,64 @@ export default {
     const router = useRouter();
     const isCollapse = ref(false);
     const username = ref(localStorage.getItem('username') || '管理员');
+    /**
+     * 未解决告警数量
+     * @type {import('vue').Ref<number>}
+     */
+    const unresolvedAlarmCount = ref(0);
+    /**
+     * 告警刷新定时器
+     * @type {number | null}
+     */
+    let alarmFetchInterval = null;
 
     const handleStorageChange = () => {
       username.value = localStorage.getItem('username') || '管理员';
     };
 
+    /**
+     * 获取未解决告警数量
+     * @returns {Promise<void>}
+     */
+    const fetchUnresolvedAlarmCount = async () => {
+      try {
+        // 调用API获取活跃且未忽略的告警数量
+        const response = await getActiveAlarms({
+          is_ignored: false,
+          page_size: 1 // 只需获取总数，所以page_size设为1
+        });
+        if (response && response.pagination) {
+          unresolvedAlarmCount.value = response.pagination.total || 0;
+        }
+      } catch (error) {
+        console.error('获取未解决告警数量失败:', error);
+        unresolvedAlarmCount.value = 0; // 发生错误时重置为0
+      }
+    };
+
+    /**
+     * 跳转到告警列表页面
+     * @returns {void}
+     */
+    const goToAlarmList = () => {
+      router.push('/alarms');
+    };
+
     onMounted(() => {
       window.addEventListener('storage', handleStorageChange);
+      // 首次加载时获取告警数量
+      fetchUnresolvedAlarmCount();
+      // 每30秒刷新一次告警数量
+      alarmFetchInterval = setInterval(fetchUnresolvedAlarmCount, 30000);
     });
 
     onUnmounted(() => {
       window.removeEventListener('storage', handleStorageChange);
+      // 清除定时器
+      if (alarmFetchInterval) {
+        clearInterval(alarmFetchInterval);
+        alarmFetchInterval = null;
+      }
     });
 
     const toggleCollapse = () => {
@@ -378,7 +432,9 @@ export default {
       currentPageTitle,
       toggleCollapse,
       logout,
-      username
+      username,
+      unresolvedAlarmCount, // 暴露给模板
+      goToAlarmList // 暴露给模板
     };
   }
 };
@@ -454,6 +510,18 @@ export default {
 
 .user-info {
   margin-right: 10px;
+  display: flex; /* 使内部元素水平排列 */
+  align-items: center; /* 垂直居中 */
+  gap: 20px; /* 元素间距 */
+}
+
+.alarm-badge {
+  cursor: pointer;
+}
+
+.alarm-icon {
+  cursor: pointer;
+  color: #606266; /* 默认图标颜色 */
 }
 
 .main-content {