From a9319e77b9dc3bde01275c2c8da75d88d8f4f249 Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Fri, 17 Jul 2026 11:35:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor(observable):=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=91=8A=E8=AD=A6=E4=B8=BA=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧边栏"监控/日志/告警"拆分为"监控"和"告警"两个导航项
- Monitor.vue 移除日志相关内容，保留 VictoriaMetrics 和 Zabbix 面板
- 新增 Alert.vue 告警页面，展示当前告警、告警通道、告警记录
- 路由新增 /alert 路径，meta.title 设为"告警"
---
 frontend/src/components/Layout/AppSidebar.vue |  5 +-
 frontend/src/router/index.ts                  |  8 +-
 frontend/src/views/monitor/Alert.vue          | 85 +++++++++++++++++++
 frontend/src/views/monitor/Monitor.vue        | 26 +-----
 4 files changed, 99 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/views/monitor/Alert.vue

diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue
index 8dc252a..5680ba2 100644
--- a/frontend/src/components/Layout/AppSidebar.vue
+++ b/frontend/src/components/Layout/AppSidebar.vue
@@ -30,7 +30,10 @@
     <div class="nav-group">
       <div class="nav-label">可观测性</div>
       <router-link to="/monitor" class="nav-item" active-class="active">
-        <span class="ic">◎</span>监控 / 日志 / 告警
+        <span class="ic">◎</span>监控
+      </router-link>
+      <router-link to="/alert" class="nav-item" active-class="active">
+        <span class="ic">⚡</span>告警
       </router-link>
     </div>
     <div class="nav-group">
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d340bc8..da4000f 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -110,7 +110,13 @@ const router = createRouter({
           path: 'monitor',
           name: 'Monitor',
           component: () => import('@/views/monitor/Monitor.vue'),
-          meta: { title: '监控 / 日志 / 告警' },
+          meta: { title: '监控' },
+        },
+        {
+          path: 'alert',
+          name: 'Alert',
+          component: () => import('@/views/monitor/Alert.vue'),
+          meta: { title: '告警' },
         },
       ],
     },
diff --git a/frontend/src/views/monitor/Alert.vue b/frontend/src/views/monitor/Alert.vue
new file mode 100644
index 0000000..49f8b55
--- /dev/null
+++ b/frontend/src/views/monitor/Alert.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="page-head">
+      <div>
+        <h1>告警</h1>
+        <p>夜莺（Nightingale）统一告警引擎 · qpass 推送</p>
+      </div>
+    </div>
+
+    <div class="cols-2-equal">
+      <div class="panel">
+        <div class="panel-head">
+          <h3>当前告警</h3>
+          <span class="meta">实时</span>
+        </div>
+        <div class="panel-body">
+          <table>
+            <tbody>
+              <tr class="tr-hover">
+                <td>硬件告警</td>
+                <td class="status-text warn">● 2 条</td>
+              </tr>
+              <tr class="tr-hover">
+                <td>业务告警</td>
+                <td class="status-text ok">● 0 条</td>
+              </tr>
+              <tr class="tr-hover">
+                <td>今日已推送</td>
+                <td class="mono strong">5</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="panel-head">
+          <h3>告警通道</h3>
+          <span class="meta">qpass</span>
+        </div>
+        <div class="panel-body">
+          <table>
+            <tbody>
+              <tr class="tr-hover">
+                <td>推送状态</td>
+                <td class="status-text ok">● 正常</td>
+              </tr>
+              <tr class="tr-hover">
+                <td>通道类型</td>
+                <td>企业微信 · 钉钉 · 短信</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head">
+        <h3>告警记录</h3>
+        <span class="meta">近 24h</span>
+      </div>
+      <div class="panel-body log-stream">
+        <div v-for="(alert, index) in alerts" :key="index" :class="['task-log-line', alert.class]">
+          <span class="t">{{ alert.time }}</span>{{ alert.message }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const alerts = ref([
+  { time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值（FAN_6: 1920 RPM）', class: '' },
+  { time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值（FAN_5: 1880 RPM）', class: '' },
+  { time: '07:30:00', message: '[qpass] 告警已合并推送：1 条硬件告警 + 0 条业务告警', class: '' },
+  { time: '06:15:22', message: '[Nightingale] sg-las-007 CPU 使用率恢复（当前 42%）', class: 'ok' },
+  { time: '05:48:10', message: '[Nightingale] sg-las-007 CPU 使用率超过 90% 持续 5 分钟', class: '' },
+])
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/views/monitor/Monitor.vue b/frontend/src/views/monitor/Monitor.vue
index 5fe24ab..38480ea 100644
--- a/frontend/src/views/monitor/Monitor.vue
+++ b/frontend/src/views/monitor/Monitor.vue
@@ -2,8 +2,8 @@
   <div>
     <div class="page-head">
       <div>
-        <h1>监控 / 日志 / 告警</h1>
-        <p>VictoriaMetrics 指标 · Zabbix 硬件状态 · ELK 日志中心 · 夜莺（Nightingale）统一告警引擎对接 qpass</p>
+        <h1>监控</h1>
+        <p>VictoriaMetrics 指标 · Zabbix 硬件状态</p>
       </div>
     </div>
 
@@ -67,32 +67,12 @@
       </div>
     </div>
 
-    <div class="panel">
-      <div class="panel-head">
-        <h3>日志 + 统一告警</h3>
-        <span class="meta">Filebeat → Kafka → ES → Kibana · VM + Zabbix → qpass</span>
-      </div>
-      <div class="panel-body log-stream">
-        <div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
-          <span class="t">{{ log.time }}</span>{{ log.message }}
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const logs = ref([
-  { time: '07:39:10', message: 'CMDB 采集器同步完成：xs291 · 华东-杭州下沙机房', class: '' },
-  { time: '07:38:55', message: '[Zabbix] 告警：yzh-las-014 风扇转速低于阈值（FAN_6: 1920 RPM）', class: '' },
-  { time: '07:38:02', message: '[VictoriaMetrics] 七机房抓取任务全部正常', class: 'ok' },
-  { time: '07:35:41', message: '[ELK] sg-las-007 应用日志接入 Kafka topic：las-sg-app', class: '' },
-  { time: '07:30:00', message: '[qpass] 告警已合并推送：1 条硬件告警 + 0 条业务告警', class: '' },
-])
 </script>
 
 <style scoped>
-/* .page-head, .cols-2-equal, .panel, table, .status-text, .log-stream, .task-log-line 已在 global.css 中定义 */
+/* .page-head, .cols-2-equal, .panel, table, .status-text 已在 global.css 中定义 */
 </style>