<template>
    <!-- monitor.vue -->
    <div class="monitor-container">
        <!-- 告警信息显示 -->
        <div class="alert-notifications">
            <transition-group name="el-fade-in">
                <el-alert v-for="alert in triggeredAlerts" :key="alert.name" type="error" effect="dark" :closable="true"
                    @close="handleCloseAlert(alert)" class="alert-item">
                    <div class="alert-content">
                        <div class="alert-metric">
                            <el-icon style="height: 100%;">
                                <warning />
                            </el-icon>
                            触发告警:{{ alert.name }}
                        </div>
                        <div class="alert-metric">
                            {{ metricMap[alert.metric] }}超出阈值
                        </div>
                        <div class="alert-details">
                            <span class="alert-threshold">
                                阈值：{{ alert.threshold }}{{ alert.metric === 'cpu' ? '%' : 'MB' }}
                            </span>
                            <span class="alert-handle">
                                方案：{{ handleMap[alert.handle] }}
                            </span>
                        </div>
                    </div>
                </el-alert>
            </transition-group>
        </div>

        <!-- 系统状态概览 -->
        <div class="system-monitor">
            <el-row :gutter="16" class="chart-grid">
                <!-- CPU使用率 -->
                <el-col :xs="24" :sm="12" :lg="6">
                    <el-card class="chart-card" shadow="never">
                        <template #header>
                            <div class="chart-header">
                                <div class="title">CPU使用率</div>
                                <div class="value">{{ `${systemStatus.cpu}%` }}</div>
                            </div>
                        </template>
                        <line-chart :data="cpuHistory" :colors="['#67c23a']" height="120px" />
                    </el-card>
                </el-col>

                <!-- 内存占用 -->
                <el-col :xs="24" :sm="12" :lg="6">
                    <el-card class="chart-card" shadow="never">
                        <template #header>
                            <div class="chart-header">
                                <div class="title">内存使用</div>
                                <div class="value">
                                    {{ `${(systemStatus.memory.used / systemStatus.memory.total * 100).toFixed(1)}%` }}
                                </div>
                            </div>
                        </template>
                        <line-chart :data="memoryHistory" :colors="['#409eff']" height="120px" />
                    </el-card>
                </el-col>

                <!-- 磁盘空间 -->
                <el-col :xs="24" :sm="12" :lg="6">
                    <el-card class="chart-card" shadow="never">
                        <template #header>
                            <div class="chart-header">
                                <div class="title">磁盘空间</div>
                                <div class="value">
                                    {{ `${(systemStatus.disk.used / systemStatus.disk.total * 100).toFixed(1)}%` }}
                                </div>
                            </div>
                        </template>
                        <pie-chart :used="systemStatus.disk.used" :total="systemStatus.disk.total" height="120px" />
                    </el-card>
                </el-col>

                <!-- 活跃进程 -->
                <el-col :xs="24" :sm="12" :lg="6">
                    <el-card class="chart-card" shadow="never">
                        <template #header>
                            <div class="chart-header">
                                <div class="title">活跃进程</div>
                                <div class="value">{{ activeProcessCount }}</div>
                            </div>
                        </template>
                        <line-chart :data="processHistory" :colors="['#e6a23c']" height="120px" />
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <div class="process-alert-container">
            <el-row :gutter="20">
                <!-- 左侧进程列表 -->
                <el-col :xs="24" :sm="24" :md="16" :lg="18">
                    <el-card class="process-list">

                        <el-card shadow="never">
                            <template #header>
                                <div class="table-header">
                                    <span>运行中进程（{{ processList.length }}）</span>
                                </div>
                            </template>

                            <el-table ref="treeTableRef" :data="groupedProcessList" row-key="missionId"
                                :tree-props="{ children: 'processes' }" @row-click="expandMissionRow">
                                <el-table-column label="" min-width="30">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="mission-info">
                                            任务进程：
                                        </span>
                                    </template>
                                </el-table-column>
                                <!-- 创建者信息 -->
                                <el-table-column label="创建者" width="160">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="mission-info">
                                            {{ row.creator }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <!-- 任务信息 -->
                                <el-table-column label="任务ID" width="160">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="mission-info">
                                            {{ row.missionId }}
                                        </span>
                                        <span v-else class="mission-info">
                                            下属子进程：
                                        </span>
                                    </template>
                                </el-table-column>
                                <!-- 规划信息 -->
                                <el-table-column label="规划ID" width="160">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="total-cpu" />
                                        <span v-else>{{ row.planId }}</span>
                                    </template>
                                </el-table-column>
                                <!-- CPU占用 -->
                                <el-table-column label="CPU占用" width="160">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="total-cpu">
                                            {{ row.totalCPU.toFixed(1) }}%
                                        </span>
                                        <span v-else>{{ row.cpu.toFixed(1) }}%</span>
                                    </template>
                                </el-table-column>

                                <!-- 内存占用 -->
                                <el-table-column label="内存占用" width="160">
                                    <template #default="{ row }">
                                        <span v-if="row.isGroup" class="total-mem">
                                            {{ (row.totalMemory / 1024).toFixed(1) }} GB
                                        </span>
                                        <span v-else>{{ (row.memory / 1024).toFixed(1) }} GB</span>
                                    </template>
                                </el-table-column>
                                <!-- 运行时间 -->
                                <el-table-column label="运行时间" width="160">
                                    <template #default="{ row }">
                                        {{ formatRuntime(row.startTime) }}
                                    </template>
                                </el-table-column>
                                <!-- 操作 -->
                                <el-table-column label="操作" width="300">
                                    <template #default="{ row }">
                                        <div v-if="row.processes" class="group-actions">
                                            <!-- <el-button size="small" @click.stop="pauseMission(row.missionId)"
                                                :disabled="row.status === 'paused'">
                                                {{ row.status === 'paused' ? '已暂停' : '暂停任务' }}
                                            </el-button> -->
                                            <el-button size="small" type="danger"
                                                @click.stop="stopMission(row.missionId)">
                                                终止任务
                                            </el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="6">
                    <el-card class="alert-config">
                        <template #header>
                            <div class="alert-header">
                                <span>告警规则</span>
                                <el-button type="primary" size="small" @click="showCreateAlert">
                                    新建告警
                                </el-button>
                            </div>
                        </template>

                        <!-- 告警规则列表 -->
                        <el-table :data="alerts" height="400" @row-click="showAlertDetail" style="cursor: pointer;">
                            <el-table-column prop="name" label="规则名称" />
                            <el-table-column label="级别">
                                <template #default="{ row }">{{ row.level === 'system' ? '系统级' : '进程级' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="80">
                                <template #default="{ row }">
                                    <el-button type="danger" size="small"
                                        @click.stop="deleteAlert(row.name)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!-- 告警创建模态框 -->
        <el-dialog v-model="alertDialogVisible" title="创建告警规则">
            <el-form :model="newAlert" :rules="alertRules" ref="createAlertForm">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="newAlert.name" />
                </el-form-item>

                <el-form-item label="告警级别" prop="level">
                    <el-select v-model="newAlert.level">
                        <el-option label="系统级" value="system" />
                        <el-option label="进程级" value="process" />
                    </el-select>
                </el-form-item>

                <el-form-item label="监控参数" prop="metric">
                    <el-select v-model="newAlert.metric">
                        <el-option label="CPU使用率" value="cpu" />
                        <el-option label="内存使用" value="memory" />
                        <el-option label="磁盘空间" value="disk" />
                    </el-select>
                </el-form-item>

                <el-form-item label="阈值" prop="threshold">
                    <el-input v-model.number="newAlert.threshold">
                        <template #append>
                            <span v-if="newAlert.metric === 'cpu'">%</span>
                            <span v-else>MB</span>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="处理方案" prop="handle">
                    <el-select v-model="newAlert.handle">
                        <el-option label="不做处理" value="noAction" />
                        <el-option label="关闭最新进程" value="closeLatest" />
                        <el-option label="关闭CPU占用最高进程" value="closeHighestCpu" />
                        <el-option label="关闭MEM占用最高进程" value="closeHighestMem" />
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button @click="alertDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="createAlert">创建</el-button>
            </template>
        </el-dialog>
        <!-- 告警规则详情 -->
        <el-dialog v-model="detailDialogVisible" title="告警规则详情">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="规则名称">{{ selectedAlert?.name }}</el-descriptions-item>
                <el-descriptions-item label="告警级别">
                    {{ selectedAlert?.level === 'system' ? '系统级' : '进程级' }}
                </el-descriptions-item>
                <el-descriptions-item label="监控参数">
                    {{ metricMap[selectedAlert?.metric] }}
                </el-descriptions-item>
                <el-descriptions-item label="阈值">
                    {{ selectedAlert?.threshold }}{{ selectedAlert?.metric === 'cpu' ? '%' : 'MB' }}
                </el-descriptions-item>
                <el-descriptions-item label="处理方案">
                    {{ handleMap[selectedAlert?.handle] }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="创建时间">
                    {{ new Date(selectedAlert?.createTime).toLocaleString() }}
                </el-descriptions-item> -->
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, reactive } from 'vue'
import { CaretRight, CaretBottom, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import LineChart from '@/views/components/monitor/LineChart.vue'
import PieChart from '@/views/components/monitor/PieChart.vue'
import { postData, getData } from '@/api/axios'

// 模拟系统状态数据
const systemStatus = ref({
    cpu: 0,
    memory: { used: 8.2, total: 32 },
    disk: { used: 287, total: 512 },
    processes: 0
})

let updateInterval = null
const cpuHistory = ref([])
const memoryHistory = ref([])
const processHistory = ref([])
const processList = ref([])
// 任务、进程表格的引用
const treeTableRef = ref(null)

// 为方便以任务分组显示，将process分组组织
const groups = new Map()
const groupedProcessList = computed(() => {
    // 初始化每个mission的CPU和MEM总和
    groups.forEach(group => {
        group.totalCPU = 0
        group.totalMemory = 0
        group.processes = []
    })
    // 暂存当前运行的mission
    const currentMissionIds = new Set()
    // 处理原始数据分组
    processList.value.forEach(process => {
        currentMissionIds.add(process.missionId)
        if (!groups.has(process.missionId)) {
            groups.set(process.missionId, {
                missionId: process.missionId,
                creator: process.user,
                totalCPU: 0,
                totalMemory: 0,
                processes: [],
                isGroup: true,
                status: 'running',
                startTime: process.startTime,
                expanded: false,
                remain: 5,
            })
        }
        const group = groups.get(process.missionId)
        group.totalCPU += process.cpu
        group.totalMemory += process.memory
        group.processes.push({
            ...process,
            isGroup: false
        })

        // 保留最早启动时间
        if (new Date(process.startTime) < new Date(group.startTime)) {
            group.startTime = process.startTime
        }
    })
    console.log(currentMissionIds)

    groups.forEach((mission, missionId) => {
        if (!currentMissionIds.has(missionId)) {
            mission.remain -= 1
            console.log(mission.remain)
            if (mission.remain <= 0) {
                groups.delete(missionId)
            }
        }
    })
    console.log(Array.from(groups))
    return Array.from(groups.values())
})

const toggleRowExpansion = (row) => {
    if (!treeTableRef.value) return

    // 通过 Element Plus 的实例方法操作
    treeTableRef.value.toggleRowExpansion(row)
}

const expandMissionRow = (row, column, event) => {
    if (row.isGroup) {
        // 阻止事件冒泡到父元素
        event.stopPropagation()
        row.expanded = !row.expanded
        toggleRowExpansion(row)
    }
}


const loading = ref(true)
const activeProcessCount = computed(() => systemStatus.value.processes)
const systemStats = computed(() => [
    { title: 'CPU', value: `${systemStatus.value.cpu}%` },
    { title: '内存', value: `${systemStatus.value.memory.used}GB` },
    { title: '磁盘', value: `${systemStatus.value.disk.used}GB` },
    { title: '进程', value: systemStatus.value.processes }
])

// 告警相关数据
const alerts = ref([])
const alertDialogVisible = ref(false)
const initAlert = {
    name: '',
    level: 'system',
    metric: 'cpu',
    threshold: null,
    handle: 'noAction'
}
// 当前触发的告警列表
const triggeredAlerts = ref([])
// 关闭告警提示框
const handleCloseAlert = (alert) => {
    triggeredAlerts.value = triggeredAlerts.value.filter(a => a.name !== alert.name)
}
const newAlert = ref({ ...initAlert })
//创建告警的模态框
const createAlertForm = ref(null)

const detailDialogVisible = ref(false)
const selectedAlert = ref(null)
const metricMap = {
    cpu: 'CPU使用率',
    memory: '内存使用',
    disk: '磁盘空间'
}

const handleMap = {
    'noAction': '不做处理',
    'closeLatest': '关闭最新进程',
    'closeHighestCpu': '关闭CPU占用最高进程',
    'closeHighestMem': '关闭MEM占用最高进程',
}


// 告警规则合法性检测
const alertRules = {
    name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
    level: [{ required: true, message: '请选择告警级别', trigger: 'change' }],
    metric: [{ required: true, message: '请选择监控参数', trigger: 'change' }],
    threshold: [
        { required: true, message: '请输入阈值', trigger: 'blur' },
        {
            validator: (_, value, callback) => {
                if (newAlert.value.metric === 'cpu') {
                    console.log(value)
                    return value >= 0 && value <= 100 ? callback() : callback('CPU阈值需在0-100之间')
                }
                return value > 0 ? callback() : callback('阈值必须大于0')
            },
            trigger: 'blur'
        }
    ],
    handle: [{ required: true, message: '请选择处理方案', trigger: 'change' }]
}

// 显示创建告警规则modal
const showCreateAlert = () => {
    newAlert.value = { ...initAlert }
    alertDialogVisible.value = true
}

// 显示告警规则详情
const showAlertDetail = (row) => {
    selectedAlert.value = row
    detailDialogVisible.value = true
}

// 创建告警
const createAlert = async () => {
    try {
        await createAlertForm.value.validate()
    } catch (error) {
        ElMessage.error("新建告警表单验证失败,请核对输入")
        return
    }
    for (let i = 0; i < alerts.value.length; i++) {
        if (alerts.value[i].name == newAlert.value.name) {
            ElMessage.error("新建告警表单验证失败,禁止创建重名告警")
            return
        }
    }
    // post告警规则到后端
    const response = postData('/alert/', {
        ...newAlert.value,
        operation: 'create',
    })
    console.log((response))
    //保存告警规则到前端
    console.log(newAlert)
    alerts.value.push({
        ...newAlert.value,
        id: Date.now()
    })
    alertDialogVisible.value = false
}

// 删除告警
const deleteAlert = async (name) => {
    const response = await postData("/alert/", { operation: 'delete', name: name })
    // 成功删除
    if (response.status == 'success') {
        alerts.value = alerts.value.filter(a => a.name !== name)
    } else {
        ElMessage.error("删除告警失败: " + name)
    }


    // event.stopPropagation()
}

const formatRuntime = (timestamp) => {
    // const isoFormat = timestamp.replace(' ', 'T') + 'Z'
    const targetTime = new Date(timestamp)
    const seconds = Math.floor((Date.now() - targetTime.getTime()) / 1000)
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = Math.floor((seconds % 60))
    return `${h}h ${m}m ${s}s`
}

const fetchSystemStatus = async () => {
    try {
        // 实际应调用API接口
        // 获取system的详细性能信息
        const response = await getData("/systemPerformance")
        loading.value = false
        console.log(response)
        systemStatus.value = {
            cpu: response.data.cpu,
            memory: { used: response.data.mem_used, total: response.data.mem_total },
            disk: {
                // 换算成GB
                used: Math.round(response.data.disk_used / 10737418.24) / 100,
                total: Math.round(response.data.disk_total / 10737418.24) / 100,
            },
            processes: response.data.processes.length,
        }
        // 获取当前触发的告警
        triggeredAlerts.value = response.data.triggeredAlerts

        cpuHistory.value = [...cpuHistory.value.slice(-29), systemStatus.value.cpu]
        memoryHistory.value = [...memoryHistory.value.slice(-29), systemStatus.value.memory.used]
        processHistory.value = [...processHistory.value.slice(-29), systemStatus.value.processes]

        // 将processes放入进程列表
        processList.value = []
        response.data.processes.forEach(p => {
            processList.value.push({
                pid: p.pid,
                missionId: p.missionId,
                planId: p.planId,
                algorithm: p.algorithm,
                cpu: p.cpu,
                user: p.user,
                memory: p.mem_used,
                startTime: p.startTime,
            })
        })

    } catch (error) {
        console.log(error)
        ElMessage.error('获取系统状态失败')
    }
}

const fetchAlerts = async () => {
    try {
        const response = await getData('/alert/')
        response.data.forEach(alert => {
            alerts.value.push(alert)
        })
    } catch (error) {
        console.log(error)
        ElMessage.error('获取告警列表失败')
    }
}

const processAction = async (missionId, action) => {
    const response = await postData('/calculate/', {
        command: action,
        missionId: missionId,
    })
    if (response.status !== 'success') {
        ElMessage.error(`对任务:${missionId} 执行${action === 'pause' ? '暂停' : '停止'}操作失败`)
    }
    ElMessage.success(`${action === 'pause' ? '暂停' : '终止'}成功`)
}

const pauseMission = (missionId) => processAction(missionId, 'pause')
const stopMission = (missionId) => processAction(missionId, 'stop')

onMounted(() => {
    fetchSystemStatus()
    updateInterval = setInterval(fetchSystemStatus, 1000)
    // 仅获取一次alert，当多个管理员登陆时可能出现问题
    fetchAlerts()
})

onBeforeUnmount(() => {
    clearInterval(updateInterval)
})
</script>

<style lang="scss" scoped>
@media (max-width: 768px) {
    .system-monitor {
        height: auto;
        min-height: unset;
    }

    .process-list {
        max-height: none;
        min-height: unset;
    }

    .process-alert-container {
        .el-col {
            margin-bottom: 16px;
        }
    }

    :deep(.el-descriptions) {
        .el-descriptions__label {
            width: 90px;
            font-size: 13px;
        }

        .el-descriptions__content {
            font-size: 14px;
        }
    }
}

.monitor-container {
    display: flex;
    flex-direction: column;
    height: 90vh;
    padding: 16px;
    background: #f5f7fa;
    overflow: hidden;

    @media (max-width: 768px) {
        height: auto;
        min-height: 100vh;
    }
}

.system-monitor {
    flex: 0 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 16px;
    margin-bottom: 16px;
}

.compact-stats {
    margin-bottom: 20px;

    .compact-stat {
        background: white;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

        .stat-value {
            font-size: 18px;
            font-weight: 500;
            color: #303133;
        }

        .stat-title {
            font-size: 12px;
            color: #909399;
        }
    }
}

.chart-grid {
    .el-col {
        margin-bottom: 16px;
    }
}

.process-list {
    flex: 1;
    min-height: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;

    :deep(.el-card__header) {
        flex-shrink: 0;
        padding: 12px 16px;
        background: #fafafa;
    }

    :deep(.el-card__body) {
        flex: 1;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    :deep(.el-table) {
        flex: 1;
        overflow: hidden;

        .el-table__body-wrapper {
            overflow-y: auto !important;
            max-height: calc(100vh - 180px);

            @media (max-width: 768px) {
                max-height: none;
            }
        }
    }
}

.chart-card {
    margin-bottom: 16px;
    border-radius: 8px !important;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    :deep(.el-card__header) {
        padding: 12px 16px;
        border-bottom: none;
        background: linear-gradient(to right, #f8f9fa, #fff);
    }

    :deep(.el-card__body) {
        padding: 12px;
        height: calc(100% - 56px);
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 14px;
            color: #606266;
            font-weight: 500;
        }

        .value {
            font-size: 16px;
            color: #303133;
            font-weight: bold;
        }
    }
}

.process-alert-container {
    margin-top: 20px;
}

.alert-config {
    height: 100%;

    :deep(.el-card__body) {
        padding: 0;
    }

    .alert-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.el-table__row:hover {
    background-color: #f5f7fa !important;
}

:deep(.el-descriptions) {
    .el-descriptions__body {
        padding: 15px;
        background: #f8f9fa;
    }

    .el-descriptions__label {
        width: 120px;
        background: #f5f7fa !important;
        font-weight: 500;
        color: #606266;

        .is-bordered-label {
            border-right: 1px solid #ebeef5;
        }
    }

    .el-descriptions__content {
        color: #303133;
        padding-left: 20px !important;
    }

    .sub-processes {
        padding: 8px 0;

        .sub-process {
            display: flex;
            align-items: center;
            padding: 4px 0;

            >span {
                margin-right: 20px;

                &.pid {
                    width: 80px;
                    color: #666;
                }

                &.cpu {
                    width: 80px;
                    color: #67c23a;
                }

                &.memory {
                    width: 100px;
                    color: #409eff;
                }

                &.time {
                    color: #909399;
                }
            }
        }
    }
}

.mission-header {
    padding: 8px 0;
}

.process-detail {
    display: flex;
    align-items: center;

    .pid {
        width: 80px;
        color: #666;
    }

    .algorithm {
        flex: 1;
        color: #409eff;
    }
}

.mission-info {
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
}

.total-cpu {
    font-weight: 600;
    color: #67c23a;
}

.total-mem {
    font-weight: 600;
    color: #409eff;
}

.mission-actions {
    display: flex;
    gap: 8px;

    .el-button {
        flex: 1;
        padding: 8px 12px;
    }
}

:deep(.el-table__row--level-0) {
    background-color: #f8faff;

    td {
        background-color: inherit !important;
        border-bottom: 2px solid #ebeef5;
    }
}

// 自定义展开图标布局
.mission-header-wrapper {
    display: flex;
    align-items: center;
    width: 100%;

    .expand-icon {
        margin-right: 8px;
        transition: transform 0.2s;
        cursor: pointer;
        color: #909399;
        font-size: 14px;

        &.is-expanded {
            transform: rotate(90deg);
        }
    }

    .mission-header {
        flex: 1;
        min-width: 0; // 防止内容溢出
    }
}

// 覆盖默认表格样式
:deep(.el-table) {
    .el-table__expand-icon {
        // 隐藏默认展开箭头
        display: none;
    }

    // 调整行高适应新布局
    .el-table__row--level-0 {
        td {
            padding: 12px 0;
        }
    }
}

.alert-notifications {
    position: fixed;
    padding: 0px 4px;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    .alert-item {
        width: 320px;
        margin-bottom: 12px;
        border: 1px solid #f3d19e; // 调整为浅橙色边框
        border-radius: 8px;
        background-color: #fffbe6; // 浅黄色背景
        box-shadow: 0 2px 12px rgba(230, 162, 60, 0.2); // 橙色系阴影
        transition: all 0.3s;

        &:hover {
            transform: translateX(-4px);
            background-color: #fff8dc; // 悬停时稍深的背景
        }

        .alert-content {
            .alert-metric {
                color: #e6a23c; // 主警告色
                font-weight: 600;
                display: flex;
                align-items: center; // 确保flex容器垂直居中
                height: 32px; // 添加固定高度
                line-height: 32px; // 保持行高与高度一致

                .el-icon {
                    color: #e6a23c; // 图标颜色同步
                    margin-right: 8px;
                    font-size: 18px; // 调大图标尺寸
                    vertical-align: middle; // 添加垂直对齐
                    position: relative;
                    top: -0.5px; // 微调图标位置
                }

                &>span {
                    display: inline-flex;
                    align-items: center;
                    height: 100%;
                    line-height: normal; // 重置行高
                }
            }

            .alert-details {
                span {
                    &.alert-threshold {
                        color: #d48836; // 深橙色
                    }

                    &.alert-handle {
                        color: #b88230; // 棕橙色
                    }
                }
            }
        }

        // 覆盖element默认样式
        :deep(.el-alert__title) {
            color: #d48836; // 标题使用深橙色
            font-size: 14px;
        }

        // 关闭按钮颜色调整
        :deep(.el-alert__closebtn) {
            color: #d48836;

            &:hover {
                color: #e6a23c;
            }
        }
    }
}
</style>