admin/Nexus
1
0
Fork 0
Code Issues Pull Requests Actions 91 Packages Projects Releases Wiki Activity

fix(watch): 监测槽空槽选机与卡片点击进历史

Browse Source 
空槽弹出搜索选机对话框；已填槽整卡可点进监测历史；已在监测的 + 给出提示。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Nexus Agent
2026-06-12 03:07:00 +08:00
parent 6140d68875
commit 6b8965aaf6
7 changed files with 216 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/watch/WatchSlotCard.vue
+27 -5
View File
@@ -12,6 +12,7 @@ const emit = defineEmits<{
remove: [slotIndex: number]
processes: [slot: WatchSlot]
history: [slot: WatchSlot]
pick: [slotIndex: number]
}>()
const chartMetric = ref<'cpu_pct' | 'mem_pct' | 'disk_pct'>('cpu_pct')
@@ -27,10 +28,14 @@ function pct(v: number | null | undefined) {
elevation="0"
border
rounded="lg"
class="watch-slot-card pa-3"
class="watch-slot-card pa-3 watch-slot-card--filled"
:class="{ 'watch-slot-card--error': slot.metrics?.probe_status && slot.metrics.probe_status !== 'ok' }"
role="button"
tabindex="0"
@click="emit('history', slot)"
@keydown.enter.prevent="emit('history', slot)"
>
<div class="d-flex align-center mb-2">
<div class="d-flex align-center mb-2" @click.stop>
<div class="text-subtitle-2 text-truncate flex-grow-1" :title="slot.server_name">
{{ slot.server_name || `ID ${slot.server_id}` }}
</div>
@@ -40,6 +45,7 @@ function pct(v: number | null | undefined) {
<v-btn icon="mdi-close" size="x-small" variant="text" @click="emit('remove', slot.slot_index)" />
</div>
<div @click.stop>
<v-chip
v-if="slot.metrics?.probe_status"
size="x-small"
@@ -81,10 +87,11 @@ function pct(v: number | null | undefined) {
<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>
<v-btn size="x-small" variant="text" @click.stop="emit('processes', slot)">进程</v-btn>
<v-btn size="x-small" variant="text" @click.stop="emit('history', slot)">历史</v-btn>
</div>
</div>
</div>
</v-card>
<v-card
@@ -94,10 +101,14 @@ function pct(v: number | null | undefined) {
rounded="lg"
class="watch-slot-card watch-slot-card--empty d-flex align-center justify-center pa-4"
variant="outlined"
role="button"
tabindex="0"
@click="emit('pick', slot.slot_index)"
@keydown.enter.prevent="emit('pick', slot.slot_index)"
>
<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 class="text-caption">槽 {{ slot.slot_index + 1 }} · 添加监测</div>
</div>
</v-card>
</template>
@@ -109,6 +120,17 @@ function pct(v: number | null | undefined) {
.watch-slot-card--empty {
min-height: 220px;
border-style: dashed !important;
cursor: pointer;
transition: background-color 0.15s ease;
}
.watch-slot-card--empty:hover {
background: rgba(var(--v-theme-primary), 0.04);
}
.watch-slot-card--filled {
cursor: pointer;
}
.watch-slot-card--filled:hover {
background: rgba(var(--v-theme-surface-variant), 0.3);
}
.watch-slot-card--error {
border-color: rgb(var(--v-theme-error)) !important;