wecom_it_smart_desk/frontend-agent/src/components/assistant/RiskAlert.vue

<!-- =============================================================================
// 企微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>