chore: initial baseline with P0-safety .gitignore
This commit is contained in:
Simon
@@ -0,0 +1,168 @@
|
||||
<!-- =============================================================================
|
||||
// 企微IT智能服务台 — 风险提示组件
|
||||
// =============================================================================
|
||||
// 说明：显示系统当前已知故障/风险信息
|
||||
// 第一步：显示"当前无已知故障"占位
|
||||
// 预留接口，后续从后端获取故障列表
|
||||
// 红色警告样式预留
|
||||
// ============================================================================= -->
|
||||
|
||||
<template>
|
||||
<div class="risk-alert-wrapper">
|
||||
<!-- 正常状态（无故障） -->
|
||||
<div class="risk-alert-ok">
|
||||
<div class="risk-alert-ok__icon">✅</div>
|
||||
<div class="risk-alert-ok__title">当前无已知故障</div>
|
||||
<div class="risk-alert-ok__desc">
|
||||
所有系统正常运行
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预留的故障列表区域 -->
|
||||
<!--
|
||||
后续步骤会从后端获取故障数据，结构如下：
|
||||
<div v-for="alert in alerts" class="risk-alert-card">
|
||||
<div class="risk-alert-level">{{ alert.level }}</div>
|
||||
<div class="risk-alert-title">{{ alert.title }}</div>
|
||||
<div class="risk-alert-desc">{{ alert.description }}</div>
|
||||
<div class="risk-alert-time">{{ alert.time }}</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- 风险监控说明 -->
|
||||
<div class="risk-alert-scope">
|
||||
<div class="risk-alert-scope__title">
|
||||
📋 风险监控范围
|
||||
</div>
|
||||
<ul class="risk-alert-scope__list">
|
||||
<li>VPN 网关连通性</li>
|
||||
<li>邮件系统服务状态</li>
|
||||
<li>AD 域控制器状态</li>
|
||||
<li>网络核心设备告警</li>
|
||||
<li>业务系统可用性</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 红色警告样式预留（注释形式，后续启用） -->
|
||||
<!--
|
||||
<div class="risk-alert-danger">
|
||||
<div class="risk-alert-danger__header">
|
||||
<span class="risk-alert-danger__icon">🔴</span>
|
||||
<span class="risk-alert-danger__title">VPN 网关异常</span>
|
||||
</div>
|
||||
<div class="risk-alert-danger__desc">
|
||||
VPN 网关 B 节点响应超时，影响华南地区员工连接。
|
||||
网络组正在排查，预计 30 分钟内修复。
|
||||
</div>
|
||||
<div class="risk-alert-danger__time">
|
||||
🕐 发现时间：2025-01-15 10:30
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// ============================================================================
|
||||
// 风险提示组件 — 第一步为静态占位
|
||||
// ============================================================================
|
||||
// 后续步骤需要：
|
||||
// 1. 从后端 GET /api/system-alerts 获取故障列表
|
||||
// 2. 定期轮询（每30秒）
|
||||
// 3. 有故障时显示红色警告卡片
|
||||
// 4. 按严重程度排序（P0 > P1 > P2）
|
||||
// ============================================================================
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.risk-alert-wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 正常状态（无故障） */
|
||||
.risk-alert-ok {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
background-color: var(--success-soft);
|
||||
border: 1px solid var(--success-soft);
|
||||
}
|
||||
|
||||
.risk-alert-ok__icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.risk-alert-ok__title {
|
||||
font-weight: 500;
|
||||
color: var(--color-success);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.risk-alert-ok__desc {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 风险监控说明 */
|
||||
.risk-alert-scope {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.risk-alert-scope__title {
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.risk-alert-scope__list {
|
||||
padding-left: 20px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* 红色警告样式预留 */
|
||||
/*
|
||||
.risk-alert-danger {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--danger-soft);
|
||||
border: 1px solid var(--danger-soft);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.risk-alert-danger__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.risk-alert-danger__icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.risk-alert-danger__title {
|
||||
font-weight: 600;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.risk-alert-danger__desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.risk-alert-danger__time {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
Reference in New Issue
Block a user