100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<template>
|
||
<div class="system-monitor-page">
|
||
<div class="page-header">
|
||
<h2 class="page-title">系统监控</h2>
|
||
<p class="page-description">从这里进入各类运行监控能力，目前已接入磁盘监控配置入口。</p>
|
||
</div>
|
||
|
||
<div class="monitor-grid">
|
||
<section class="monitor-card">
|
||
<div class="card-content">
|
||
<h3 class="card-title">磁盘监控</h3>
|
||
<p class="card-description">
|
||
配置多盘符监控、预警与告警阈值、启动监控、定时监控以及通知目标。
|
||
</p>
|
||
</div>
|
||
<el-button type="primary" @click="openDiskMonitor">进入配置</el-button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
|
||
defineOptions({
|
||
name: 'SystemMonitorPage'
|
||
})
|
||
|
||
const router = useRouter()
|
||
|
||
const openDiskMonitor = async () => {
|
||
// 系统监控页作为模块入口，保持磁盘监控返回链路闭环。
|
||
await router.push('/systemMonitor/diskMonitor')
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.system-monitor-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
color: #111827;
|
||
}
|
||
|
||
.page-description {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.monitor-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.monitor-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
min-height: 180px;
|
||
padding: 20px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||
}
|
||
|
||
.card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.card-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: #111827;
|
||
}
|
||
|
||
.card-description {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: #4b5563;
|
||
}
|
||
</style>
|