feat(watch): 4 槽实时监测 — 5s 探针、WS、历史页与告警联动

宝塔式自选子机监测：Pin CRUD、全指标 SSH/Redis 探针、探针落库、 /ws/watch 推送、监测历史与进程抽屉；Agent 可选附带 net/disk IO。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-12 02:56:21 +08:00
parent f6e8b29640
commit b46922fe92
30 changed files with 3579 additions and 11 deletions
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { WatchSlot } from '@/composables/useWatchPins'
+import { formatBytesPerSec, formatRemaining, probeStatusColor } from '@/utils/watchFormat'
+import WatchSparkline from '@/components/watch/WatchSparkline.vue'
+
+const props = defineProps<{
+  slot: WatchSlot
+}>()
+
+const emit = defineEmits<{
+  remove: [slotIndex: number]
+  processes: [slot: WatchSlot]
+  history: [slot: WatchSlot]
+}>()
+
+const chartMetric = ref<'cpu_pct' | 'mem_pct' | 'disk_pct'>('cpu_pct')
+
+function pct(v: number | null | undefined) {
+  return v != null ? `${v}%` : '—'
+}
+</script>
+
+<template>
+  <v-card
+    v-if="!slot.empty"
+    elevation="0"
+    border
+    rounded="lg"
+    class="watch-slot-card pa-3"
+    :class="{ 'watch-slot-card--error': slot.metrics?.probe_status && slot.metrics.probe_status !== 'ok' }"
+  >
+    <div class="d-flex align-center mb-2">
+      <div class="text-subtitle-2 text-truncate flex-grow-1" :title="slot.server_name">
+        {{ slot.server_name || `ID ${slot.server_id}` }}
+      </div>
+      <v-chip size="x-small" variant="tonal" color="info" label>
+        槽 {{ slot.slot_index + 1 }}
+      </v-chip>
+      <v-btn icon="mdi-close" size="x-small" variant="text" @click="emit('remove', slot.slot_index)" />
+    </div>
+
+    <v-chip
+      v-if="slot.metrics?.probe_status"
+      size="x-small"
+      :color="probeStatusColor(slot.metrics.probe_status)"
+      variant="tonal"
+      class="mb-2"
+      label
+    >
+      {{ slot.metrics.probe_status === 'ok' ? '正常' : slot.metrics.probe_status }}
+    </v-chip>
+
+    <div class="d-flex justify-space-between text-caption mb-1">
+      <span>CPU {{ pct(slot.metrics?.cpu_pct) }}</span>
+      <span>MEM {{ pct(slot.metrics?.mem_pct) }}</span>
+      <span>DISK {{ pct(slot.metrics?.disk_pct) }}</span>
+    </div>
+
+    <div class="text-caption text-medium-emphasis mb-1">
+      ↑ {{ formatBytesPerSec(slot.metrics?.net_up_bps) }}
+      · ↓ {{ formatBytesPerSec(slot.metrics?.net_down_bps) }}
+    </div>
+    <div class="text-caption text-medium-emphasis mb-2">
+      读 {{ formatBytesPerSec(slot.metrics?.disk_read_bps) }}
+      · 写 {{ formatBytesPerSec(slot.metrics?.disk_write_bps) }}
+    </div>
+
+    <v-btn-toggle v-model="chartMetric" density="compact" variant="outlined" divided class="mb-1">
+      <v-btn value="cpu_pct" size="x-small">CPU</v-btn>
+      <v-btn value="mem_pct" size="x-small">MEM</v-btn>
+      <v-btn value="disk_pct" size="x-small">DISK</v-btn>
+    </v-btn-toggle>
+
+    <WatchSparkline :points="slot.sparkline || []" :metric="chartMetric" />
+
+    <div v-if="slot.metrics?.error" class="text-caption text-error mt-1 text-truncate">
+      {{ slot.metrics.error }}
+    </div>
+
+    <div class="d-flex align-center justify-space-between mt-2">
+      <span class="text-caption text-medium-emphasis">剩余 {{ formatRemaining(slot.remaining_sec) }}</span>
+      <div class="d-flex ga-1">
+        <v-btn size="x-small" variant="text" @click="emit('processes', slot)">进程</v-btn>
+        <v-btn size="x-small" variant="text" @click="emit('history', slot)">历史</v-btn>
+      </div>
+    </div>
+  </v-card>
+
+  <v-card
+    v-else
+    elevation="0"
+    border
+    rounded="lg"
+    class="watch-slot-card watch-slot-card--empty d-flex align-center justify-center pa-4"
+    variant="outlined"
+  >
+    <div class="text-center text-medium-emphasis">
+      <v-icon size="28" class="mb-1">mdi-plus-circle-outline</v-icon>
+      <div class="text-caption">槽 {{ slot.slot_index + 1 }} · 空</div>
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.watch-slot-card {
+  min-height: 220px;
+}
+.watch-slot-card--empty {
+  min-height: 220px;
+  border-style: dashed !important;
+}
+.watch-slot-card--error {
+  border-color: rgb(var(--v-theme-error)) !important;
+}
+</style>