<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- 配置Tailwind自定义颜色和工具类 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#e0f2fe',
                        secondary: '#bae6fd',
                        accent: '#38bdf8',
                        dark: '#0f172a',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }

            .scrollbar-thin {
                scrollbar-width: thin;
            }

            .scrollbar-thin::-webkit-scrollbar {
                width: 6px;
            }

            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(148, 163, 184, 0.5);
                border-radius: 3px;
            }
        }
    </style>
</head>
<body class="bg-primary h-full overflow-hidden">
<div class="flex h-[calc(100vh-15px)] px-4 gap-4">
    <!-- 左侧系统信息卡片区域 -->
    <div class="w-1/3 bg-white rounded-lg p-4 card-shadow flex flex-col gap-4 overflow-y-auto scrollbar-thin">
        <!-- 主机运行时间 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-clock-o text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">运行时长</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getUptime()}"></p>
                </div>
            </div>
        </div>

        <!-- 系统信息 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-windows text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">操作系统</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getOs()}"></p>
                </div>
            </div>
        </div>

        <!-- 内核版本 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-cogs text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">内核版本</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getKernelVersion()}"></p>
                </div>
            </div>
        </div>

        <!-- 主机名 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-desktop text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">主机名称</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getHostname()}"></p>
                </div>
            </div>
        </div>

        <!-- IP地址 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-ip-address text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">IP地址</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getIpAddress()}"></p>
                </div>
            </div>
        </div>

        <!-- CPU型号 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-microchip text-accent text-lg"></i>
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">CPU型号</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getCpuModel()}"></p>
                </div>
            </div>
        </div>

        <!-- 内存总量 -->
        <div class="p-3 bg-white rounded-lg border border-gray-100 card-shadow">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
                    <i class="fa fa-database text-accent text-lg"></i> <!-- 内存总量使用数据库图标，代表存储容量 -->
                </div>
                <div>
                    <h3 class="text-sm text-gray-500">内存总量</h3>
                    <p class="text-lg font-semibold text-dark" th:text="${info.getMemoryTotal()}"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧区域 -->
    <div class="w-2/3 bg-white rounded-lg p-4 card-shadow flex flex-col gap-4">
        <!-- 上方CPU和内存卡片 -->
        <div class="flex gap-4">
            <!-- CPU使用率 -->
            <div class="flex-1 p-3 bg-white rounded-lg border border-gray-100 card-shadow flex flex-col items-center">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center mb-2">
                    <i class="fa fa-microchip text-accent text-lg"></i>
                </div>
                <h3 class="text-sm text-gray-500 mb-2">CPU使用率</h3>
                <div class="relative w-32 h-32">
                    <canvas id="cpuChart"></canvas>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-xl font-bold text-dark" data-cpu-usage
                              th:text="${info.getCpuUsage()}"></span>
                        <p>%</p>
                    </div>
                </div>
            </div>

            <!-- 内存使用率 -->
            <div class="flex-1 p-3 bg-white rounded-lg border border-gray-100 card-shadow flex flex-col items-center">
                <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center mb-2">
                    <i class="fa fa-area-chart text-accent text-lg"></i> <!-- 内存使用率使用面积图图标，代表资源监控 -->
                </div>
                <h3 class="text-sm text-gray-500 mb-2">内存使用率</h3>
                <div class="relative w-32 h-32">
                    <canvas id="memoryChart"></canvas>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-xl font-bold text-dark" data-memory-usage
                              th:text="${info.getMemoryUsage()}"></span>
                        <p>%</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 下方磁盘使用率表格 -->
        <div class="flex-1 overflow-hidden flex flex-col">
            <div class="flex items-center gap-2 mb-2">
                <i class="fa fa-hdd-o text-accent"></i> <!-- 磁盘使用率添加硬盘图标 -->
                <h3 class="text-sm text-gray-500">磁盘使用率</h3>
            </div>
            <div class="flex-1 overflow-y-auto scrollbar-thin">
                <table class="min-w-full bg-white">
                    <thead class="bg-gray-50 sticky top-0">
                    <tr>
                        <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            设备
                        </th>
                        <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            挂载点
                        </th>
                        <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            总容量
                        </th>
                        <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            已使用
                        </th>
                        <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            使用率
                        </th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                    <tr th:each=" disk : ${devices}">
                        <td class="py-2 px-3 text-sm text-gray-900" th:text="${disk.getDevice()}"></td>
                        <td class="py-2 px-3 text-sm text-gray-900" th:text="${disk.getMountPoint()}"></td>
                        <td class="py-2 px-3 text-sm text-gray-900" th:text="${disk.getTotalSize()}"></td>
                        <td class="py-2 px-3 text-sm text-gray-900" th:text="${disk.getUsedSize()}"></td>
                        <td class="py-2 px-3">
                            <div class="flex items-center">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-accent h-2.5 rounded-full"
                                         th:style="'width: ' + ${disk.getUsageRate()} + '%;'"></div>
                                </div>
                                <span class="ml-2 text-sm font-medium text-gray-700"
                                      th:text="${disk.getUsageRate()}"></span>
                                <p>%</p>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // 配置环形进度图的通用选项
    const getChartOptions = (value) => {
        let color;
        if (value < 60) {
            color = '#38bdf8'; // 蓝色 - 正常
        } else if (value < 80) {
            color = '#eab308'; // 黄色 - 警告
        } else {
            color = '#ef4444'; // 红色 - 危险
        }

        return {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [value, 100 - value],
                    backgroundColor: [color, '#f1f5f9'],
                    borderWidth: 0,
                    cutout: '80%'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {display: false},
                    tooltip: {enabled: false}
                },
                animation: {
                    animateRotate: true,
                    animateScale: true
                }
            }
        };
    };

    // 初始化CPU图表
    const cpuUsageElement = document.querySelector('.text-xl.font-bold.text-dark[data-cpu-usage]');
    const cpuUsageValue = parseFloat(cpuUsageElement.textContent.replace('%', ''));
    const cpuCtx = document.getElementById('cpuChart').getContext('2d');
    new Chart(cpuCtx, getChartOptions(cpuUsageValue));

    // 初始化内存图表
    const memoryUsageElement = document.querySelector('.text-xl.font-bold.text-dark[data-memory-usage]');
    const memoryUsageValue = parseFloat(memoryUsageElement.textContent.replace('%', ''));
    const memoryCtx = document.getElementById('memoryChart').getContext('2d');
    new Chart(memoryCtx, getChartOptions(memoryUsageValue));
</script>
</body>
</html>