CN_Tool_client/frontend/src/views/systemMonitor/index.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>