Codepen和tailwindcss 进行UI布局展示
html
<html lang="zh">
<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>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
.hidden {
display: none;
}
.chart {
width: 100%;
height: 300px;
}
</style>
</head>
<body class="flex h-screen bg-gray-100">
<!-- 登录页面 -->
<div id="loginPage" class="hidden flex items-center justify-center w-full bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-md w-96">
<div class="text-center mb-6">
<h1 class="text-3xl font-bold text-gray-800">CM Box</h1>
<p class="text-gray-500 mt-2">请输入您的登录凭证</p>
</div>
<form id="loginForm" class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">用户名</label>
<input type="text" id="username" class="w-full p-2 border rounded" placeholder="请输入用户名" />
</div>
<div>
<label class="block text-gray-700 mb-2">密码</label>
<input type="password" id="password" class="w-full p-2 border rounded" placeholder="请输入密码" />
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700">
登录
</button>
</form>
</div>
</div>
<!-- 主界面容器 -->
<div id="mainContainer" class="w-full flex">
<!-- 侧边栏 -->
<div class="w-64 bg-white shadow-md flex flex-col">
<div class="flex-grow">
<div class="p-6 border-b">
<h1 class="text-2xl font-bold text-gray-800">仪表盘</h1>
</div>
<nav class="p-4">
<!-- 设备概览 -->
<div id="overviewTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded bg-blue-100 text-blue-600">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="7" height="9" rx="1" stroke="currentColor" stroke-width="2" />
<rect x="3" y="15" width="7" height="6" rx="1" stroke="currentColor" stroke-width="2" />
<rect x="14" y="3" width="7" height="6" rx="1" stroke="currentColor" stroke-width="2" />
<rect x="14" y="12" width="7" height="9" rx="1" stroke="currentColor" stroke-width="2" />
</svg>
设备概览
</div>
<!-- 固件升级 -->
<div id="firmwareTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="8" width="16" height="10" rx="1" stroke="currentColor" stroke-width="2" />
<path d="M8 12H10V14H8V12Z" fill="currentColor" />
<path d="M12 12H14V14H12V12Z" fill="currentColor" />
<path d="M16 12H18V14H16V12Z" fill="currentColor" />
<path d="M12 4L12 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M9 6L12 3L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
固件升级
</div>
<!-- 日志管理 -->
<div id="logTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5C15 6.10457 14.1046 7 13 7H11C9.89543 7 9 6.10457 9 5Z" stroke="currentColor" stroke-width="2" />
<path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M8 16H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
日志管理
</div>
<!-- 网络配置 -->
<div id="networkTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="4" width="8" height="6" rx="1" stroke="currentColor" stroke-width="2" />
<rect x="4" y="14" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" />
<rect x="14" y="14" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" />
<path d="M12 10V12" stroke="currentColor" stroke-width="2" />
<path d="M7 14V12H17V14" stroke="currentColor" stroke-width="2" />
<circle cx="17" cy="8" r="1.5" fill="currentColor" />
</svg>
网络配置
</div>
<!-- 配置文件 -->
<div id="configFileTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6H6C4.89543 6 4 6.89543 4 8V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M11 13L20.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M15 4L20 4L20 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
配置文件
</div>
<!-- 安全设置 -->
<!-- 安全设置 - 新图标 -->
<div id="securityTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3L4 7V11C4 15.4183 7.58172 19 12 19C16.4183 19 20 15.4183 20 11V7L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
<path d="M10 12.5C10 11.6716 10.6716 11 11.5 11H12.5C13.3284 11 14 11.6716 14 12.5C14 13.3284 13.3284 14 12.5 14H11.5C10.6716 14 10 13.3284 10 12.5Z" stroke="currentColor" stroke-width="2" />
<path d="M12 14V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M12 9V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
安全设置
</div>
<!-- 设备维护 -->
<div id="maintenanceTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 6H13.5V14H10.5V6Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
<path d="M13.5 18C13.5 19.1046 12.6046 20 11.5 20C10.3954 20 9.5 19.1046 9.5 18C9.5 16.8954 10.3954 16 11.5 16C12.6046 16 13.5 16.8954 13.5 18Z" stroke="currentColor" stroke-width="2" />
<path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M17 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
设备维护
</div>
</nav>
</div>
<!-- 登出按钮 -->
<div class="p-4 border-t">
<div id="logoutTab" class="tab flex items-center p-3 cursor-pointer rounded hover:bg-gray-100">
<svg class="mr-3" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L14.586 9H7a1 1 0 110-2h7.586l-1.293-1.293a1 1 0 010-1.414z" />
</svg>
退出登录
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-1 p-6 overflow-y-auto">
<div id="content" style="height: 100%">
<!-- 设备概览 -->
<div class="space-y-6" id="overview">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-semibold text-gray-800">设备概览</h2>
</div>
<!-- 设备基本信息卡片 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">设备信息</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
<!-- 设备名称 -->
<div class="flex flex-col">
<span class="text-sm font-medium text-gray-500 mb-1">设备名称</span>
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
</path>
</svg>
<span class="text-xl font-bold text-gray-800">Computer Module Box</span>
</div>
</div>
<!-- 固件版本 -->
<div class="flex flex-col">
<span class="text-sm font-medium text-gray-500 mb-1">固件版本</span>
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
<span class="text-xl font-bold text-gray-800">v2.5.3</span>
</div>
</div>
<!-- 工作模式 - 重新设计与SN码对称 -->
<div class="flex flex-col">
<span class="text-sm font-medium text-gray-500 mb-1">工作模式</span>
<div class="relative">
<div class="flex items-center bg-gray-50 p-3 rounded-lg border border-gray-200">
<div class="flex-shrink-0 mr-3">
<!-- 性能模式图标 -->
<div class="w-10 h-10 flex items-center justify-center">
<svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
</div>
<div>
<span class="text-lg font-bold text-gray-800">性能模式</span>
<div class="text-xs text-gray-500 mt-0.5">高性能 · 标准功耗</div>
</div>
<!-- 模式切换按钮 -->
<button class="absolute right-3 top-3 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors" title="切换模式">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- 设备序列号 (SN) - 特别设计 -->
<div class="flex flex-col">
<span class="text-sm font-medium text-gray-500 mb-1">设备序列号 (SN)</span>
<div class="relative">
<div class="flex items-center bg-gray-50 p-3 rounded-lg border border-gray-200">
<div class="flex-shrink-0 mr-3">
<!-- 条形码风格图形 -->
<div class="w-10 h-10 flex flex-col justify-between">
<div class="flex space-x-0.5">
<div class="w-0.5 h-10 bg-gray-800"></div>
<div class="w-1 h-10 bg-gray-800"></div>
<div class="w-0.5 h-10 bg-gray-800"></div>
<div class="w-2 h-10 bg-gray-800"></div>
<div class="w-0.5 h-10 bg-gray-800"></div>
<div class="w-1.5 h-10 bg-gray-800"></div>
</div>
</div>
</div>
<div>
<span class="text-lg font-mono font-bold text-gray-800 tracking-wider">CM2023120500389</span>
<div class="text-xs text-gray-500 mt-0.5">© Seyond制造</div>
</div>
<!-- 复制按钮 -->
<button class="absolute right-3 top-3 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors" title="复制SN码">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 运行状态部分 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">运行状态</h3>
<div class="ml-auto flex space-x-2">
<button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">30分钟</button>
<button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">1天</button>
<button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">全部</button>
</div>
</div>
<!-- 快速状态卡片 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<!-- CPU状态卡片 -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-100">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
</path>
</svg>
<h4 class="text-sm font-medium text-gray-800">CPU</h4>
</div>
<span class="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full">6核12线程</span>
</div>
<div class="mt-2 text-3xl font-bold text-gray-800">32<span class="text-lg">%</span></div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-500">温度: 45°C</span>
<span class="text-xs text-gray-500">主频: 3.8GHz</span>
</div>
</div>
<!-- 内存状态卡片 -->
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-4 rounded-lg border border-purple-100">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2">
</path>
</svg>
<h4 class="text-sm font-medium text-gray-800">内存</h4>
</div>
<span class="text-xs font-medium px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full">16GB</span>
</div>
<div class="mt-2 text-3xl font-bold text-gray-800">54<span class="text-lg">%</span></div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-500">已用: 8.64GB</span>
<span class="text-xs text-gray-500">可用: 7.36GB</span>
</div>
</div>
<!-- GPU状态卡片 - 新增 -->
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-4 rounded-lg border border-green-100">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
</path>
</svg>
<h4 class="text-sm font-medium text-gray-800">GPU</h4>
</div>
<span class="text-xs font-medium px-2 py-0.5 bg-green-100 text-green-700 rounded-full">RTX 4080</span>
</div>
<div class="mt-2 text-3xl font-bold text-gray-800">47<span class="text-lg">%</span></div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-500">温度: 65°C</span>
<span class="text-xs text-gray-500">功耗: 180W</span>
</div>
</div>
<!-- 显存状态卡片 - 新增 -->
<div class="bg-gradient-to-br from-amber-50 to-orange-50 p-4 rounded-lg border border-amber-100">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
</path>
</svg>
<h4 class="text-sm font-medium text-gray-800">显存</h4>
</div>
<span class="text-xs font-medium px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full">16GB</span>
</div>
<div class="mt-2 text-3xl font-bold text-gray-800">68<span class="text-lg">%</span></div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-500">已用: 10.88GB</span>
<span class="text-xs text-gray-500">可用: 5.12GB</span>
</div>
</div>
</div>
<!-- ECharts图表网格布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="p-5 bg-gray-50 rounded-lg border border-gray-200">
<h4 class="text-md font-medium mb-3 text-gray-700">CPU 使用率</h4>
<div id="cpuChart" class="h-64 chart"></div>
</div>
<div class="p-5 bg-gray-50 rounded-lg border border-gray-200">
<h4 class="text-md font-medium mb-3 text-gray-700">内存使用率</h4>
<div id="memoryChart" class="h-64 chart"></div>
</div>
<!-- GPU使用率图表 - 新增 -->
<div class="p-5 bg-gray-50 rounded-lg border border-gray-200">
<h4 class="text-md font-medium mb-3 text-gray-700">GPU 使用率</h4>
<div id="gpuChart" class="h-64 chart"></div>
</div>
<!-- 显存使用率图表 - 新增 -->
<div class="p-5 bg-gray-50 rounded-lg border border-gray-200">
<h4 class="text-md font-medium mb-3 text-gray-700">显存使用率</h4>
<div id="vramChart" class="h-64 chart"></div>
</div>
</div>
<!-- 设备异常状态 -->
<div class="bg-white border border-gray-200 rounded-lg">
<div class="p-4 border-b border-gray-200 flex items-center">
<svg class="w-5 h-5 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">设备异常</h3>
</div>
<div class="p-4 space-y-3">
<div class="flex justify-between items-center bg-red-50 px-4 py-3 rounded-lg border border-red-100">
<div class="flex items-center">
<span class="w-2 h-2 bg-red-500 rounded-full mr-3 animate-pulse"></span>
<span class="text-red-700 font-medium">温度过高</span>
<span class="ml-2 text-xs text-red-600">GPU温度已超过安全阈值</span>
</div>
<div class="flex items-center space-x-3">
<span class="text-xs font-medium text-red-600 bg-red-100 px-2 py-1 rounded-full">高风险</span>
</div>
</div>
<div class="flex justify-between items-center bg-orange-50 px-4 py-3 rounded-lg border border-orange-100">
<div class="flex items-center">
<span class="w-2 h-2 bg-orange-500 rounded-full mr-3"></span>
<span class="text-orange-700 font-medium">内存不足</span>
<span class="ml-2 text-xs text-orange-600">系统内存使用率超过80%</span>
</div>
<div class="flex items-center space-x-3">
<span class="text-xs font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full">中风险</span>
</div>
</div>
<div class="flex justify-between items-center bg-yellow-50 px-4 py-3 rounded-lg border border-yellow-100">
<div class="flex items-center">
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></span>
<span class="text-yellow-700 font-medium">网络连接不稳定</span>
<span class="ml-2 text-xs text-yellow-600">过去10分钟出现3次连接中断</span>
</div>
<div class="flex items-center space-x-3">
<span class="text-xs font-medium text-yellow-600 bg-yellow-100 px-2 py-1 rounded-full">低风险</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 固件升级 -->
<div class="space-y-6 hidden" id="firmware">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-semibold text-gray-800">固件升级</h2>
</div>
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
<!-- 当前系统信息 -->
<div class="mb-6 pb-6 border-b border-gray-200">
<div class="flex items-center mb-4">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">当前系统信息</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="flex items-center">
<span class="text-gray-500 w-24">当前版本:</span>
<span class="font-medium">V2.5.3-build220617</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">发布日期:</span>
<span class="font-medium">2022-06-17</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">运行状态:</span>
<span class="font-medium text-green-600">Running</span>
</div>
</div>
</div>
<!-- 固件选择和上传部分 -->
<div class="mb-6">
<div class="flex items-center mb-4">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">上传固件</h3>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-5 rounded-md">
<div class="flex">
<svg class="w-5 h-5 text-yellow-600 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
</path>
</svg>
<div>
<p class="text-yellow-700 font-medium">固件升级提示</p>
<p class="text-yellow-600 text-sm mt-1">请确保选择的固件包适用于当前设备，升级过程中请勿断电或重启设备，否则可能导致系统无法启动。</p>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">选择固件包</label>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
<svg class="w-12 h-12 text-gray-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
<p class="text-sm text-gray-500 mb-3">拖放固件文件到此处或点击选择文件</p>
<input type="file" id="firmwareFile" accept=".bin,.zip,.img" class="hidden" />
<button onclick="document.getElementById('firmwareFile').click()" class="px-4 py-2 bg-gray-200 rounded-md text-gray-700 hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
选择文件
</button>
<div class="text-orange-500 text-sm mt-3">支持的格式: .bin, .img (最大文件大小: 10GB)</div>
</div>
</div>
<!-- 整体进度条 -->
<div id="overallProgressContainer" class="mb-5 hidden">
<div class="flex justify-between mb-2">
<div class="text-gray-700 font-medium">总体进度</div>
<div class="text-gray-700 font-medium" id="percentageLabel">0%</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div id="overallProgress" class="bg-blue-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<!-- 升级阶段状态 -->
<div id="upgradeStages" class="mt-6 space-y-4 hidden bg-gray-50 p-5 rounded-lg border border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">升级进度</h4>
<div id="stage1" class="flex items-center">
<svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">1. U盘拷贝</span>
<span class="text-gray-500 text-sm">等待中</span>
</div>
</div>
</div>
<div id="stage2" class="flex items-center">
<svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">2. 文件校验</span>
<span class="text-gray-500 text-sm">等待中</span>
</div>
</div>
</div>
<div id="stage3" class="flex items-center">
<svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">3. 下载固件</span>
<span class="text-gray-500 text-sm">等待中</span>
</div>
</div>
</div>
<div id="stage4" class="flex items-center">
<svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">4. 固件烧录</span>
<span class="text-gray-500 text-sm">等待中</span>
</div>
</div>
</div>
<div id="stage5" class="flex items-center">
<svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">5. 系统重启</span>
<span class="text-gray-500 text-sm">等待中</span>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-6">
<button id="uploadBtn" class="flex items-center bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
开始上传
</button>
</div>
</div>
</div>
</div>
<!-- 日志管理 -->
<div class="space-y-6 flex flex-col h-full hidden" id="log">
<!-- 顶部标题和操作栏 -->
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<h2 class="text-3xl font-semibold text-gray-800">日志管理</h2>
<button id="toggleLogList" class="bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg hover:bg-gray-200 transition flex items-center border border-gray-200 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span id="toggleLogListText" class="font-medium">隐藏列表</span>
</button>
</div>
<div class="flex space-x-3">
<button id="exportAllLogs" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1.5 rounded-lg hover:from-blue-600 hover:to-blue-700 transition flex items-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span class="font-medium">技术支持</span>
</button>
</div>
</div>
<!-- 主要内容区域 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex-1">
<div class="flex h-full">
<!-- 日志列表区域 -->
<div id="logListContainer" class="w-64 bg-gray-50 border-r min-w-64">
<div id="log-item" class="divide-y">
<div class="p-4 border-b border-gray-200 bg-gray-50">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
</svg>
<h3 class="text-lg font-semibold text-gray-700">日志文件列表</h3>
</div>
</div>
<div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="cm-app">
<div>
<div class="font-semibold text-gray-700">cm_app.log</div>
<div class="text-xs text-gray-500">/opt/cm/cm_app.log</div>
</div>
</div>
<div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="cm-app-1">
<div>
<div class="font-semibold text-gray-700">cm_app.1.log</div>
<div class="text-xs text-gray-500">/opt/cm/cm_app.1.log</div>
</div>
</div>
<div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="messages">
<div>
<div class="font-semibold text-gray-700">messages</div>
<div class="text-xs text-gray-500">/var/log/messages</div>
</div>
</div>
</div>
</div>
<!-- 日志内容预览区域 -->
<div class="flex flex-col flex-grow p-6 overflow-hidden">
<div id="logContentHeader" class="flex justify-between items-center mb-4 pb-3 border-b border-gray-200">
<div class="flex items-center space-x-3">
<div class="bg-blue-100 p-2 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">日志内容</h3>
</div>
</div>
<div class="flex items-center space-x-2">
<button class="text-gray-600 hover:bg-gray-100 p-2 rounded-lg transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
<button id="downloadLogBtn" class="flex items-center px-3 py-1.5 text-green-700 bg-green-50 hover:bg-green-100 rounded-lg transition border border-green-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span class="font-medium">下载日志</span>
</button>
</div>
</div>
<div id="logContent" class="whitespace-pre-wrap flex-1 bg-gray-50 p-4 rounded-lg min-h-[24rem] max-h-[calc(100vh-150px)] overflow-y-auto font-mono text-sm leading-relaxed">
<p class="text-gray-500 text-center py-10">请选择一个日志文件查看内容</p>
</div>
</div>
</div>
</div>
</div>
<!-- 配置文件管理 -->
<div class="space-y-6 flex flex-col h-full hidden" id="configFile">
<!-- 顶部标题和操作栏 -->
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<h2 class="text-3xl font-semibold text-gray-800">配置文件管理</h2>
</div>
</div>
<!-- 主要内容区域 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex-1">
<div class="flex h-full">
<!-- 配置列表区域 -->
<div id="configListContainer" class="w-64 bg-gray-50 border-r min-w-64">
<div id="config-items" class="divide-y">
<div class="flex flex-col p-4 border-b border-gray-200 bg-gray-50">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<h3 class="text-lg font-semibold text-gray-700">配置文件列表</h3>
</div>
</div>
<div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_base">
<div>
<div class="font-semibold text-gray-700">cm_internal_file_base</div>
<div class="text-xs text-gray-500">基础配置文件</div>
</div>
</div>
<div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_NTP">
<div>
<div class="font-semibold text-gray-700">cm_internal_file_NTP</div>
<div class="text-xs text-gray-500">NTP服务配置文件</div>
</div>
</div>
<div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_gPTP">
<div>
<div class="font-semibold text-gray-700">cm_internal_file_gPTP</div>
<div class="text-xs text-gray-500">gPTP服务配置文件</div>
</div>
</div>
<div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_faults">
<div>
<div class="font-semibold text-gray-700">cm_internal_file_faults</div>
<div class="text-xs text-gray-500">faults配置文件</div>
</div>
</div>
</div>
</div>
<!-- 配置内容预览区域 -->
<div class="flex flex-col flex-grow p-6 overflow-hidden">
<div id="configContentHeader" class="flex justify-between items-center mb-4 pb-3 border-b border-gray-200">
<div class="flex items-center space-x-3">
<div class="bg-blue-100 p-2 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">配置文件内容</h3>
</div>
</div>
<div class="flex space-x-2">
<button id="recovConfigBtn" class="px-3 py-1.5 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
恢复默认
</button>
<button id="editConfigBtn" class="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
</path>
</svg>
编辑
</button>
<button id="saveConfigBtn" class="px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors flex items-center hidden">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
保存
</button>
<button id="cancelEditBtn" class="px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center hidden">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
取消
</button>
</div>
</div>
<div id="configContent" class="whitespace-pre-wrap flex-1 bg-gray-50 p-4 rounded-lg min-h-[24rem] max-h-[calc(100vh-150px)] overflow-y-auto font-mono text-sm leading-relaxed">
<p id="configContentpra" class="text-gray-500 text-center py-10">请选择一个配置文件查看内容</p>
<textarea id="configEditTextarea" class="hidden w-full h-full min-h-[24rem] bg-white border border-gray-200 p-4 rounded-md text-gray-800 font-mono text-sm leading-relaxed shadow-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out placeholder-gray-400">
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- 安全设置 -->
<div class="space-y-6 hidden" id="security">
<div class="flex justify-between items-center mb-4">
<h2 class="text-3xl font-semibold text-gray-800">安全设置</h2>
</div>
<div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
</path>
</svg>
<h3 class="text-xl font-medium text-gray-800">修改管理密码</h3>
</div>
<!-- 密码修改提示 -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded-md">
<div class="flex">
<svg class="w-5 h-5 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<p class="text-blue-700 font-medium">密码安全建议</p>
<ul class="text-blue-600 text-sm mt-1 list-disc pl-5">
<li>使用至少12个字符，并包含大小写字母、数字和特殊符号</li>
<li>避免使用容易猜测的个人信息，如生日或姓名</li>
<li>定期更换密码以提高安全性</li>
</ul>
</div>
</div>
</div>
<div class="space-y-5 max-w-lg">
<!-- 当前密码 -->
<div>
<label class="block text-gray-700 font-medium mb-2">当前密码</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
</path>
</svg>
</div>
<input type="password" class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="输入当前密码" />
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="w-5 h-5 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
</path>
</svg>
</button>
</div>
</div>
<!-- 新密码 -->
<div>
<label class="block text-gray-700 font-medium mb-2">新密码</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
</path>
</svg>
</div>
<input type="password" id="newPassword" class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="输入新密码" />
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="w-5 h-5 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
</path>
</svg>
</button>
</div>
<!-- 密码强度指示器 -->
<div class="mt-2">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-gray-400 h-1.5 rounded-full w-0" id="passwordStrength"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
</div>
</div>
<!-- 确认新密码 -->
<div>
<label class="block text-gray-700 font-medium mb-2">确认新密码</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
</div>
<input type="password" class="w-full pl-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="再次输入新密码" />
</div>
<p class="text-xs text-gray-500 mt-1 hidden" id="passwordMismatch">两次输入的密码不一致</p>
</div>
<div class="pt-2">
<button class="bg-green-600 text-white px-6 py-2.5 rounded-lg hover:bg-green-700 transition focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
修改密码
</button>
</div>
</div>
</div>
<!-- 其他安全选项 -->
<div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4">
</path>
</svg>
<h3 class="text-xl font-medium text-gray-800">高级安全设置（暂不实现）</h3>
</div>
<div class="space-y-5">
<!-- 登录保护 -->
<div class="flex items-center justify-between pb-4 border-b border-gray-100">
<div>
<h4 class="font-medium text-gray-800">登录尝试限制</h4>
<p class="text-sm text-gray-500 mt-1">限制登录失败次数，防止暴力破解攻击</p>
</div>
<div class="relative inline-block w-12 h-6">
<input type="checkbox" id="loginProtection" class="opacity-0 w-0 h-0" checked>
<label for="loginProtection" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-green-500 transition duration-300 rounded-full">
<span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full transform translate-x-6"></span>
</label>
</div>
</div>
<!-- 自动锁定 -->
<div class="flex items-center justify-between pb-4 border-b border-gray-100">
<div>
<h4 class="font-medium text-gray-800">自动锁定</h4>
<p class="text-sm text-gray-500 mt-1">无操作10分钟后自动锁定系统</p>
</div>
<div class="relative inline-block w-12 h-6">
<input type="checkbox" id="autoLock" class="opacity-0 w-0 h-0">
<label for="autoLock" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 transition duration-300 rounded-full">
<span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full"></span>
</label>
</div>
</div>
<!-- 登录通知 -->
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium text-gray-800">异常登录通知</h4>
<p class="text-sm text-gray-500 mt-1">检测到异常登录时发送通知</p>
</div>
<div class="relative inline-block w-12 h-6">
<input type="checkbox" id="loginNotification" class="opacity-0 w-0 h-0" checked>
<label for="loginNotification" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-green-500 transition duration-300 rounded-full">
<span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full transform translate-x-6"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- 网络配置 -->
<div class="space-y-6 hidden" id="network">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-semibold text-gray-800">网络配置</h2>
</div>
<!-- 网络状态概览卡片 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">网络状态</h3>
<div class="ml-auto">
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
</path>
</svg>
刷新状态
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
<!-- 当前连接信息 -->
<div class="bg-gradient-to-br from-gray-50 to-slate-100 p-5 rounded-lg border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<h4 class="text-md font-medium text-gray-700">当前连接(eth0)</h4>
</div>
<span class="px-2.5 py-1 bg-green-100 text-green-800 text-xs rounded-full flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-1.5 animate-pulse"></span>
Active
</span>
</div>
<!-- 连接信息卡片 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
<div class="flex items-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="text-sm font-medium text-gray-700">设备标识</span>
</div>
<div class="pl-6 space-y-2">
<div class="flex items-center justify-between pb-2">
<span class="text-sm text-gray-500">MAC地址</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">00:1B:44:11:3A:B7</span>
</div>
</div>
</div>
<!-- IP信息卡片 -->
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex items-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span class="text-sm font-medium text-gray-700">网络配置</span>
</div>
<div class="pl-6 space-y-2">
<div class="flex items-center justify-between pb-2">
<span class="text-sm text-gray-500">IP地址</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">192.168.1.105</span>
</div>
<div class="flex items-center justify-between pb-2">
<span class="text-sm text-gray-500">子网掩码</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">255.255.255.0</span>
</div>
<div class="flex items-center justify-between pb-2">
<span class="text-sm text-gray-500">默认网关</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">192.168.1.1</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-500">DNS服务器</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">8.8.8.8</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-500">DHCP</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">Disable</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-500">MTU</span>
<span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">1500</span>
</div>
</div>
</div>
</div>
<!-- 网络性能区域 -->
<div class="bg-gradient-to-br from-gray-50 to-slate-100 p-5 rounded-lg border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<h4 class="text-md font-medium text-gray-700">网络性能监测</h4>
</div>
</div>
<!-- 网卡选择 -->
<div class="mb-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span class="text-sm text-gray-600">选择网卡</span>
</div>
<div class="flex justify-between items-center">
<button class="text-xs text-indigo-600 hover:text-indigo-800 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
刷新数据
</button>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-2 bg-white p-2 rounded-lg border border-gray-200">
<button class="px-2.5 py-1.5 bg-indigo-100 text-indigo-700 text-xs font-medium rounded-md flex items-center border border-indigo-200 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
eth0
</button>
<button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
switchport1
</button>
<button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
switchport2
</button>
<button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
switchport3
</button>
<button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
switchport4
</button>
</div>
</div>
<!-- 上行网络数据 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
<span class="text-sm font-medium text-gray-700">上行数据</span>
<span class="ml-auto text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded">发送</span>
</div>
<div class="space-y-3">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">带宽使用</span>
<span class="text-xs font-medium text-blue-700">28.3 Mbps</span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-gradient-to-r from-blue-400 to-blue-600 h-2.5 rounded-full" style="width: 65%">
</div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">丢包率</span>
<span class="text-xs font-medium text-blue-700">0.5%</span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-gradient-to-r from-blue-300 to-blue-500 h-2.5 rounded-full" style="width: 5%">
</div>
</div>
</div>
</div>
</div>
<!-- 下行网络数据 -->
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
<span class="text-sm font-medium text-gray-700">下行数据</span>
<span class="ml-auto text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded">接收</span>
</div>
<div class="space-y-3">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">带宽使用</span>
<span class="text-xs font-medium text-green-700">12.2 Mbps</span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-gradient-to-r from-green-400 to-green-600 h-2.5 rounded-full" style="width: 25%">
</div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">丢包率</span>
<span class="text-xs font-medium text-green-700">1.2%</span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-gradient-to-r from-green-300 to-green-500 h-2.5 rounded-full" style="width: 12%">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 网络设置卡片 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">网络设置</h3>
</div>
<div class="mb-6">
<!-- 以太网配置表单 -->
<div class="space-y-6 bg-gray-50 p-6 rounded-lg border border-gray-200">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01">
</path>
</svg>
<h4 class="font-medium text-gray-800">以太网配置 (eth0)</h4>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-500 mr-2">使用DHCP</span>
<label class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" id="dhcp-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
</div>
</label>
</div>
</div>
<div id="static-ip-form" class="space-y-4 hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">IP地址</label>
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="192.168.1.100">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">子网掩码</label>
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="255.255.255.0">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">默认网关</label>
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="192.168.1.1">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">首选DNS服务器</label>
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="8.8.8.8">
</div>
</div>
</div>
<div id="dhcp-info" class="space-y-4">
<div class="bg-blue-50 border border-blue-100 rounded-md p-4">
<div class="flex">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<p class="text-blue-700 font-medium">已启用DHCP</p>
<p class="text-sm text-blue-600 mt-1">设备将自动从DHCP服务器获取网络配置</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">获取的IP地址</label>
<div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">
192.168.1.105</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">子网掩码</label>
<div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">
255.255.255.0</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">默认网关</label>
<div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">192.168.1.1
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">DNS服务器</label>
<div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">192.168.1.1
</div>
</div>
</div>
</div>
<div class="pt-4 border-t border-gray-200 flex justify-end space-x-3">
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition">取消</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">应用设置</button>
</div>
</div>
</div>
</div>
<!-- 网络诊断工具卡片 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">网络诊断工具</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 flex flex-col">
<h4 class="text-md font-medium text-gray-700 mb-2">Ping测试</h4>
<div class="space-y-3 flex-grow">
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" placeholder="输入主机名或IP (例如: www.baidu.com)">
</div>
<button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">开始测试</button>
</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 flex flex-col">
<h4 class="text-md font-medium text-gray-700 mb-2">路由追踪</h4>
<div class="space-y-3 flex-grow">
<input type="text" class="w-full p-2 border border-gray-300 rounded-md" placeholder="输入目标主机名或IP">
</div>
<button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">开始追踪</button>
</div>
</div>
<div class="bg-gray-800 text-green-400 p-4 rounded-lg font-mono text-sm h-58 overflow-y-auto">
<div>$ ping www.baidu.com -c 4</div>
<div class="mt-1">PING www.a.shifen.com (110.242.68.3): 56 data bytes</div>
<div class="mt-1">64 bytes from 110.242.68.3: icmp_seq=0 ttl=52 time=28.853 ms</div>
<div>64 bytes from 110.242.68.3: icmp_seq=1 ttl=52 time=28.264 ms</div>
<div>64 bytes from 110.242.68.3: icmp_seq=2 ttl=52 time=28.652 ms</div>
<div>64 bytes from 110.242.68.3: icmp_seq=3 ttl=52 time=28.526 ms</div>
<div class="mt-1">--- www.a.shifen.com ping statistics ---</div>
<div>4 packets transmitted, 4 packets received, 0.0% packet loss</div>
<div>round-trip min/avg/max/stddev = 28.264/28.574/28.853/0.211 ms</div>
</div>
</div>
</div>
<!-- 设备维护页面 -->
<div class="space-y-6 hidden" id="maintenance">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-semibold text-gray-800">设备维护</h2>
</div>
<!-- 温度阈值配置区块 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">低功耗模式温度阈值配置</h3>
</div>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6 rounded">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
设置温度阈值后，当设备温度超过阈值时，系统将自动切换到低功耗模式以保护硬件。 </br>
配置两个阈值可以创建温度滞后区间：温度超过进入阈值时系统将切换到低功耗模式，只有当温度降至退出阈值以下时才会恢复正常功耗。这可避免温度在临界点频繁波动导致的模式切换。
</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- CPU温度阈值配置 -->
<div class="p-4 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
</path>
</svg>
<h4 class="font-medium text-gray-800">CPU温度阈值</h4>
</div>
<div class="relative inline-block w-12 align-middle select-none">
<input type="checkbox" name="cpuToggle" id="cpuToggle" class="absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-blue-600" checked />
<label for="cpuToggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer checked:bg-blue-600"></label>
</div>
</div>
<div class="space-y-4">
<!-- 进入低功耗模式阈值 -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">进入低功耗模式阈值</span>
<span class="text-sm font-medium text-blue-600" id="cpuTempEnterValue">85°C</span>
</div>
<input id="cpuTempEnterSlider" type="range" min="60" max="95" value="85" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
<div class="flex justify-between text-xs text-gray-500 px-1 mt-1">
<span>60°C</span>
<span>95°C</span>
</div>
</div>
<!-- 退出低功耗模式阈值 (新增) -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">退出低功耗模式阈值</span>
<span class="text-sm font-medium text-green-600" id="cpuTempExitValue">75°C</span>
</div>
<input id="cpuTempExitSlider" type="range" min="55" max="90" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-600">
<div class="flex justify-between text-xs text-gray-500 px-1 mt-1">
<span>55°C</span>
<span>90°C</span>
</div>
</div>
<!-- 阈值差值说明 -->
<div class="bg-gray-50 p-2 rounded-md text-xs text-gray-600">
<span>当前阈值差：<span id="cpuThresholdDiff" class="font-medium text-blue-600">10°C</span></span>
<div class="mt-1">推荐保持5-15°C的阈值差，以避免频繁切换模式</div>
</div>
</div>
</div>
<!-- GPU温度阈值配置 -->
<div class="p-4 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
</path>
</svg>
<h4 class="font-medium text-gray-800">GPU温度阈值</h4>
</div>
<div class="relative inline-block w-12 align-middle select-none">
<input type="checkbox" name="gpuToggle" id="gpuToggle" class="absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-blue-600" checked />
<label for="gpuToggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer checked:bg-blue-600"></label>
</div>
</div>
<div class="space-y-4">
<!-- 进入低功耗模式阈值 -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">进入低功耗模式阈值</span>
<span class="text-sm font-medium text-blue-600" id="gpuTempEnterValue">80°C</span>
</div>
<input id="gpuTempEnterSlider" type="range" min="55" max="90" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
<div class="flex justify-between text-xs text-gray-500 px-1 mt-1">
<span>55°C</span>
<span>90°C</span>
</div>
</div>
<!-- 退出低功耗模式阈值 (新增) -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">退出低功耗模式阈值</span>
<span class="text-sm font-medium text-green-600" id="gpuTempExitValue">70°C</span>
</div>
<input id="gpuTempExitSlider" type="range" min="50" max="85" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-600">
<div class="flex justify-between text-xs text-gray-500 px-1 mt-1">
<span>50°C</span>
<span>85°C</span>
</div>
</div>
<!-- 阈值差值说明 -->
<div class="bg-gray-50 p-2 rounded-md text-xs text-gray-600">
<span>当前阈值差：<span id="gpuThresholdDiff" class="font-medium text-blue-600">10°C</span></span>
<div class="mt-1">推荐保持5-15°C的阈值差，以避免频繁切换模式</div>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-end">
<button id="resetDefaults" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50">
重置为默认值
</button>
<button id="saveThresholds" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
保存设置
</button>
</div>
</div>
<!-- 设备自我诊断区块 -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center mb-6">
<svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
<h3 class="text-lg font-semibold text-gray-800">设备自我诊断</h3>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
启动诊断可能会临时影响系统性能，建议在非关键任务期间执行。完整诊断预计需要3-5分钟。
</p>
</div>
</div>
</div>
<!-- 诊断选项卡 -->
<div class="border border-gray-200 rounded-lg mb-6">
<div class="flex border-b border-gray-200">
<button class="px-4 py-3 text-blue-600 border-b-2 border-blue-600 font-medium text-sm flex-1">快速检查</button>
<button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">标准诊断</button>
<button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">深度诊断</button>
<button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">自定义</button>
</div>
<!-- 诊断项目选择 -->
<div class="p-4">
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<label class="flex items-center space-x-2">
<input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">系统状态检查</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">硬件基本测试</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">存储健康检查</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">网络连接测试</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">内存压力测试</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="text-sm text-gray-700">GPU性能测试</span>
</label>
</div>
</div>
</div>
<!-- 诊断结果 -->
<div id="diagnosticResults" class="hidden">
<h4 class="font-medium text-gray-800 mb-4">诊断结果</h4>
<div class="space-y-4">
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<h5 class="text-sm font-medium text-green-800">系统状态检查</h5>
<p class="text-sm text-green-700 mt-1">所有系统服务运行正常。</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<h5 class="text-sm font-medium text-green-800">硬件基本测试</h5>
<p class="text-sm text-green-700 mt-1">CPU和内存正常工作。</p>
</div>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<h5 class="text-sm font-medium text-yellow-800">存储健康检查</h5>
<p class="text-sm text-yellow-700 mt-1">SSD磁盘空间低于15%。建议清理不必要文件。</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<h5 class="text-sm font-medium text-green-800">网络连接测试</h5>
<p class="text-sm text-green-700 mt-1">网络连接正常，延迟: 28ms。</p>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-between">
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
导出诊断报告
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
发送报告至技术支持
</button>
</div>
</div>
<!-- 诊断进度（默认隐藏） -->
<div id="diagnosticProgress" class="hidden space-y-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium text-gray-800">诊断进行中</h4>
<span class="text-sm text-gray-500" id="progressPercentage">25%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full progress-animation" style="width: 25%"></div>
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>当前执行: 系统状态检查</span>
<span>预计剩余时间: 2分15秒</span>
</div>
<button id="cancelDiagnostic" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 inline-flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
取消诊断
</button>
</div>
<!-- 开始诊断按钮 -->
<div id="startDiagnosticContainer" class="mt-6 flex justify-end">
<button id="startDiagnostic" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
开始诊断
</button>
</div>
</div>
</div>
<!-- 退出登录 -->
<div class="space-y-6 hidden" id="logout">
</div>
</div>
</div>
</div>
</html>js
// 全局DOM元素
const DOM = {
loginPage: document.getElementById("loginPage"),
mainContainer: document.getElementById("mainContainer"),
loginForm: document.getElementById("loginForm"),
logoutTab: document.getElementById("logoutTab"),
tabs: document.querySelectorAll(".tab"),
contentSections: document.querySelectorAll("#content > div"),
uploadBtn: document.getElementById("uploadBtn"),
firmwareFile: document.getElementById("firmwareFile"),
overallProgressContainer: document.getElementById("overallProgressContainer"),
overallProgress: document.getElementById("overallProgress"),
upgradeStages: document.getElementById("upgradeStages")
};
// 标签ID与内容ID的映射
const TAB_TO_CONTENT_MAP = {
overviewTab: "overview",
firmwareTab: "firmware",
securityTab: "security",
logoutTab: "logout",
networkTab: "network",
maintenanceTab: "maintenance",
logTab: "log",
configFileTab: "configFile"
};
// =====================
// 登录和用户认证模块
// =====================
const AuthModule = (() => {
function handleLogin(e) {
e.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// 简单的登录验证（实际应用中应该使用后端验证）
if (username !== null && password !== null) {
DOM.loginPage.classList.add("hidden");
DOM.mainContainer.classList.remove("hidden");
TabModule.switchToTab("overviewTab");
} else {
alert("用户名或密码错误");
}
}
function handleLogout() {
DOM.mainContainer.classList.add("hidden");
DOM.loginPage.classList.remove("hidden");
// 重置登录表单
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
function init() {
DOM.loginForm.addEventListener("submit", handleLogin);
DOM.logoutTab.addEventListener("click", handleLogout);
}
return { init };
})();
// =====================
// 标签切换模块
// =====================
const TabModule = (() => {
function switchToTab(tabId) {
// 隐藏所有内容区域
DOM.contentSections.forEach(section => {
section.classList.add("hidden");
});
// 显示选定的内容区域
const contentId = TAB_TO_CONTENT_MAP[tabId];
if (contentId) {
document.getElementById(contentId).classList.remove("hidden");
}
// 更新标签样式
DOM.tabs.forEach(tab => {
tab.classList.remove("bg-blue-100", "text-blue-600");
tab.classList.add("hover:bg-gray-100");
if (tab.id === tabId) {
tab.classList.add("bg-blue-100", "text-blue-600");
}
});
}
function init() {
DOM.tabs.forEach(tab => {
tab.addEventListener("click", () => switchToTab(tab.id));
});
}
return { init, switchToTab };
})();
// =====================
// 图表和数据可视化模块
// =====================
const ChartModule = (() => {
let charts = {};
function createChart(elementId, option) {
const chart = echarts.init(document.getElementById(elementId));
chart.setOption(option);
return chart;
}
function initCpuChart() {
const cpuOption = {
tooltip: {
trigger: "axis",
axisPointer: { type: "line" }
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["11:10", "11:11", "11:12", "11:13", "11:14", "11:15"]
},
yAxis: {
type: "value",
min: 0,
max: 100,
axisLabel: { formatter: "{value}%" }
},
series: [{
name: "CPU使用率",
type: "line",
smooth: true,
data: [50, 45, 35, 42, 30, 35],
itemStyle: { color: "#8884d8" },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(136, 132, 216, 0.8)" },
{ offset: 1, color: "rgba(136, 132, 216, 0.2)" }
])
}
}]
};
return createChart("cpuChart", cpuOption);
}
function initMemoryChart() {
const memoryOption = {
tooltip: {
trigger: "axis",
axisPointer: { type: "line" }
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["11:10", "11:11", "11:12", "11:13", "11:14", "11:15"]
},
yAxis: {
type: "value",
min: 0,
max: 100,
axisLabel: { formatter: "{value}%" }
},
series: [{
name: "内存使用率",
type: "line",
smooth: true,
data: [40, 35, 20, 30, 25, 30],
itemStyle: { color: "#82ca9d" },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(130, 202, 157, 0.8)" },
{ offset: 1, color: "rgba(130, 202, 157, 0.2)" }
])
}
}]
};
return createChart("memoryChart", memoryOption);
}
function initGpuChart() {
const gpuOption = {
tooltip: {
trigger: "axis",
formatter: "{b}<br />{a}: {c}%"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30"],
axisLine: { lineStyle: { color: "#ddd" } },
axisLabel: { color: "#666" }
},
yAxis: {
type: "value",
min: 0,
max: 100,
axisLine: { show: false },
axisLabel: {
color: "#666",
formatter: "{value}%"
},
splitLine: { lineStyle: { color: "#eee" } }
},
series: [{
name: "GPU使用率",
type: "line",
smooth: true,
data: [35, 47, 89, 75, 42, 47, 47],
areaStyle: {
color: {
type: "linear",
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: "rgba(34, 197, 94, 0.5)" },
{ offset: 1, color: "rgba(34, 197, 94, 0.1)" }
]
}
},
itemStyle: { color: "#22c55e" },
lineStyle: { width: 3, color: "#22c55e" },
symbolSize: 6
}]
};
return createChart("gpuChart", gpuOption);
}
function initVramChart() {
const vramOption = {
tooltip: {
trigger: "axis",
formatter: "{b}<br />{a}: {c}%"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30"],
axisLine: { lineStyle: { color: "#ddd" } },
axisLabel: { color: "#666" }
},
yAxis: {
type: "value",
min: 0,
max: 100,
axisLine: { show: false },
axisLabel: {
color: "#666",
formatter: "{value}%"
},
splitLine: { lineStyle: { color: "#eee" } }
},
series: [{
name: "显存使用率",
type: "line",
smooth: true,
data: [58, 62, 72, 68, 71, 69, 68],
areaStyle: {
color: {
type: "linear",
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: "rgba(245, 158, 11, 0.5)" },
{ offset: 1, color: "rgba(245, 158, 11, 0.1)" }
]
}
},
itemStyle: { color: "#f59e0b" },
lineStyle: { width: 3, color: "#f59e0b" },
symbolSize: 6
}]
};
return createChart("vramChart", vramOption);
}
function handleResize() {
Object.values(charts).forEach(chart => {
if (chart && typeof chart.resize === 'function') {
chart.resize();
}
});
}
function init() {
charts = {
cpu: initCpuChart(),
memory: initMemoryChart(),
gpu: initGpuChart(),
vram: initVramChart()
};
// 窗口大小变化时重新渲染图表
window.addEventListener("resize", handleResize);
}
return { init };
})();
// =====================
// 固件升级模块
// =====================
const FirmwareModule = (() => {
const UPGRADE_STAGES = [
{ id: "stage1", duration: 2000, name: "U盘拷贝" },
{ id: "stage2", duration: 2000, name: "文件校验" },
{ id: "stage3", duration: 3000, name: "下载固件" },
{ id: "stage4", duration: 4000, name: "固件烧录" },
{ id: "stage5", duration: 2000, name: "系统重启" }
];
function simulateUpgrade() {
let currentStage = 0;
function updateStage() {
if (currentStage >= UPGRADE_STAGES.length) {
// 升级完成
DOM.overallProgress.style.width = "100%";
DOM.uploadBtn.disabled = false;
DOM.uploadBtn.textContent = "升级完成";
return;
}
const stage = UPGRADE_STAGES[currentStage];
const stageEl = document.getElementById(stage.id);
const svg = stageEl.querySelector("svg");
// 更新进度
DOM.overallProgress.style.width = `${((currentStage + 1) / UPGRADE_STAGES.length) * 100}%`;
// 模拟阶段执行
svg.classList.remove("text-gray-400");
svg.classList.add("text-green-500");
setTimeout(() => {
currentStage++;
updateStage();
}, stage.duration);
}
updateStage();
}
function handleUpgrade() {
if (!DOM.firmwareFile.files.length) {
alert("请先选择固件文件");
return;
}
// 重置状态
DOM.overallProgressContainer.classList.remove("hidden");
DOM.upgradeStages.classList.remove("hidden");
DOM.uploadBtn.disabled = true;
DOM.uploadBtn.textContent = "升级中...";
// 重置阶段状态
UPGRADE_STAGES.forEach(stage => {
const stageEl = document.getElementById(stage.id);
const svg = stageEl.querySelector("svg");
svg.classList.remove("text-green-500", "text-red-500");
svg.classList.add("text-gray-400");
});
// 模拟升级过程
simulateUpgrade();
}
function init() {
DOM.uploadBtn.addEventListener("click", handleUpgrade);
}
return { init };
})();
// =====================
// 日志管理模块
// =====================
const LogModule = (() => {
// 日志内容示例
const cm_app_log = `2024-12-16 07:06:51.414 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.421 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_sw_version. From 172.168.1.100
2024-12-16 07:06:51.421 [ INFO] 865 pcs.cpp:983 command get_sw_version ret=0 result= VERSION: 5.5.0-rw-nio-pcs-rc1-arm-public
BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
BUILD_TIME: 09:46:21 Dec 4 2024
API: 3.0.12.20241204094014
API_BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
API_BUILD_TIME: 09:41:21 Dec 4 2024
2024-12-16 07:06:51.423 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.428 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_sn. From 172.168.1.100
2024-12-16 07:06:51.428 [ INFO] 865 pcs.cpp:983 command get_sn ret=0 result= 531942453212
2024-12-16 07:06:51.429 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.432 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_DID_SUPPLIER_HW_VER. From 172.168.1.100
2024-12-16 07:06:51.432 [ INFO] 865 pcs.cpp:983 command get_DID_SUPPLIER_HW_VER ret=0 result= {"DID_SUPPLIER_HW_VER": "W7"}
2024-12-16 07:06:51.433 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.436 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_fw_version. From 172.168.1.100
2024-12-16 07:06:51.438 [ INFO] 865 pcs.cpp:983 command get_fw_version ret=0 result= App Version: release-5.5.0-rw-nio-lidarapp-rc5.robinw-696
build-time: 2024-12-05-17-47-42
FPGA Datecode: 0x241203b3
BOARD: W7
R5: 274.2024-12-05-09-58-14
Firmware Version: robinw-release-1943.2024-12-11-09-02-39
build-tag: robinw-release-1943
build-seq: 1943
build-time: 2024-12-11-09-02-39
build-git-tag: 1.0.13
board-type: robinw
customer: normal
2024-12-16 07:06:51.439 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.442 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_DID_SUPPLIER_HW_VER. From 172.168.1.100
2024-12-16 07:06:51.444 [ INFO] 865 pcs.cpp:983 command get_DID_SUPPLIER_HW_VER ret=0 result= {"DID_SUPPLIER_HW_VER": "W7"}
2024-12-16 07:06:51.445 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.448 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:51.950 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.953 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:52.455 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:52.459 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:52.962 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:52.967 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_security_state. From 172.168.1.100
2024-12-16 07:06:55.168 [ INFO] 878 [FROM_PTP4L]:7999 sync_rx : info_tx - time_tx (215220 : 215200 - 215157), offset 100ms(0) 10ms(0) 1ms(0) 100us(0) 50us(0) 10us(5); [2024-12-16 07:06:55.167746]
2024-12-16 07:06:58.987 [ INFO] 842 window_blockage.cpp:177 WindowBlockageCNN block count: 0 0 0 0 0
2024-12-16 07:06:59.775 [ INFO] 862 status_report.cpp:359 counters: point_data_packet_sent=50398552 point_sent=6548472317 message_packet_sent=1 raw_data_read=880976199680 total_frame=271208 total_polygon_rotation=600 total_polygon_facet= 4 power_up_time_in_second=27128 process_up_time_in_second=27125 lose_ptp_sync=42 bad_data[4]=0/0/0/0 data_drop[8]=0/0/0/0/0/0/0/0 latency_10us_average[6]=5/81/33/68/65/0 latency_10us_variation[6]=21/43/11/27/34/0 latency_10us_max[6]=449/489/127/521/1023/0 big_latency_frame=0 bad_frame=0 big_gap_frame=0 small_gap_frame=0 cpu_percentage=200 mem_percentage=28 netstat_rx speed/drop/err=1kBps/0/0 netstat_tx speed/drop/err=12528kBps/0/0 sys_cpu_percentage=49/41/55/53 motor(std/min/max1/max2/mean)=7400/39008/31748/34070/11425 in_faults=4 ex_faults=0; sensor_readings: t_fpga=470 t_laser=540 t_det=460 m_rpm_1000th=600000 motor_current_ma=36[LogStormControl: 854:window_blockage.cpp:427, count=1; 842:lidar_clock_ptp.cpp:128, count=1; 842:lidar_clock_ptp.cpp:105, count=1; 878:[FROM_FW]:7999, count=7; 878:[FROM_PTP4L]:7999, count=2; 842:lidar_clock_ptp.cpp:123, count=1; 865:pcs.cpp:1982, count=36]
2024-12-16 07:07:04.553 [ INFO] 842 lidar_clock_ptp.cpp:83 recv time msg [214800-214800] fpga_clock=5426214339610 ts=2024-12-16 07:07:04 diff_10us=0 bootup_utc=1734305692.928302
2024-12-16 07:07:04.678 [ INFO] 842 lidar_clock.cpp:197 update time=214800, config=1-PTP state=7-PTP_LOCKED, fpga_clock=5426214339610 ts=2024-12-16 07:07:04 utc=1734332824 bootup_utc=1734305692.928302, bootup_utc offset >100ms(0) >10ms(0) >1ms(0) >100us(1), ppm >1000(0) >500(0) >100(0) >40(0).
2024-12-16 07:07:04.777 [ INFO] 862 status_report.cpp:359 counters: point_data_packet_sent=50407971 point_sent=6549699932 message_packet_sent=1 raw_data_read=881138663424 total_frame=271258 total_polygon_rotation=600 total_polygon_facet= 4 power_up_time_in_second=27133 process_up_time_in_second=27130 lose_ptp_sync=42 bad_data[4]=0/0/0/0 data_drop[8]=0/0/0/0/0/0/0/0 latency_10us_average[6]=5/81/33/68/65/0 latency_10us_variation[6]=21/43/11/27/34/0 latency_10us_max[6]=449/489/127/521/1023/0 big_latency_frame=0 bad_frame=0 big_gap_frame=0 small_gap_frame=0 cpu_percentage=200 mem_percentage=28 netstat_rx speed/drop/err=1kBps/0/0 netstat_tx speed/drop/err=12526kBps/0/0 sys_cpu_percentage=48/41/51/54 motor(std/min/max1/max2/mean)=7400/39008/31748/34070/11425 in_faults=4 ex_faults=0; sensor_readings: t_fpga=470 t_laser=540 t_det=460 m_rpm_1000th=600000 motor_current_ma=39
2024-12-16 07:07:05.177 [ INFO] 878 [FROM_PTP4L]:7999 sync_rx : info_tx - time_tx (215300 : 215280 - 215237), offset 100ms(0) 10ms(0) 1ms(0) 100us(0) 50us(0) 10us(5); [2024-12-16 07:07:05.177430]
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 read queue#0 added=1 finished=0 dropped=0 blocked=0 wait=0us process=0us drop=0us pid=854
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 signal queue#0 added=13446238 finished=13446238 dropped=0 blocked=0 wait=48us process=795us drop=0us pid=842 elapsed_time=120001/27130259ms active_time=47322/10698895ms ratio=39.44%/39.44%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 noise queue#0 added=13446238 finished=13446238 dropped=0 blocked=0 wait=16us process=296us drop=0us pid=838 elapsed_time=120001/27130259ms active_time=17604/3988729ms ratio=14.67%/14.70%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 angle queue#0 added=11683158 finished=11683157 dropped=0 blocked=0 wait=12us process=702us drop=0us pid=836 elapsed_time=120001/27130259ms active_time=36727/8210877ms ratio=30.61%/30.26%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 deliver2 queue#0 added=9353541 finished=9353541 dropped=0 blocked=0 wait=75us process=582us drop=0us pid=831 elapsed_time=120001/27130259ms active_time=24393/5449471ms ratio=20.33%/20.09%
2024-12-16 07:07:07.054 [ INFO] 836 stage_read.cpp:168 StageRead: XXX TODO,raw_data_read_: 881212653568
2024-12-16 07:07:07.054 [ INFO] 836 stage_signal.cpp:2156 StageRobinSignal: dropped=0 0:0 1:0 2:0 3:0 4:0 5:0 6:0 7:0 8:0 9:0 10:0
2024-12-16 07:07:07.054 [ INFO] 836 stage_noise_filter.cpp:46 Stage_n0:jobs_dropped=0 jobs_skipped=0 revive=0 noise=(16170/0/0/0) (0/0/0/0) real=(72182/0/0/0) (0/0/0/0) mean/dev/min/max noise=0/0/0/0 real=0/0/0/0 noise_intensity=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) noise_distance=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) noise_elongation=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) frames=271281 lost-frames=0
2024-12-16 07:07:07.054 [ INFO] 836 stage_angle.cpp:1156 StageRobinAngle: dropped=0 delivered=11683158 read(wait=55.9/214.9/4498.2 run=0.0/0.0/0.0) signal(wait=815.9/439.6/4897.5 run=0.0/0.0/0.0) noise(wait=332.8/112.4/1277.6 run=0.0/0.0/0.0) angle(wait=686.9/271.5/5219.4 run=0.0/0.0/0.0) sum=1891.5/740.5/7046.0ms callback=0.00/0.00/0.00/0 frames=271281 points=18991141916
2024-12-16 07:07:07.054 [ INFO] 836 stage_deliver2.cpp:39 StageDeliver2: dropped=0delivered=9353541 callback=0.10/0.09/9.39/50412269
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 AsyncLogThread_Manager queue#0 added=64716 finished=64710 dropped=0 blocked=0 wait=180us process=244us drop=0us pid=554 elapsed_time=120001/27131663ms active_time=70/15851ms ratio=0.06%/0.06%
2024-12-16 07:07:08.201 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_fw_version. From 172.168.1.100
2024-12-16 07:07:08.202 [ INFO] 865 pcs.cpp:983 command get_fw_version ret=0 result= App Version: release-5.5.0-rw-nio-lidarapp-rc5.robinw-696
build-time: 2024-12-05-17-47-42
FPGA Datecode: 0x241203b3
BOARD: W7
R5: 274.2024-12-05-09-58-14
Firmware Version: robinw-release-1943.2024-12-11-09-02-39
build-tag: robinw-release-1943
build-seq: 1943
build-time: 2024-12-11-09-02-39
build-git-tag: 1.0.13
board-type: robinw
customer: normal
2024-12-16 07:07:08.203 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:07:08.205 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_sw_version. From 172.168.1.100
2024-12-16 07:07:08.205 [ INFO] 865 pcs.cpp:983 command get_sw_version ret=0 result= VERSION: 5.5.0-rw-nio-pcs-rc1-arm-public
BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
BUILD_TIME: 09:46:21 Dec 4 2024
API: 3.0.12.20241204094014
API_BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
API_BUILD_TIME: 09:41:21 Dec 4 2024`
const cm_app_1_log = `2021-12-19 19:46:53.050 [ INFO] ----------------------------------------------
2021-12-19 19:46:53.050 [ INFO] restart_counter = 498
2021-12-19 19:46:53.050 [ INFO] [ 463] utils.cc:978 set cpu1 online
2021-12-19 19:46:53.051 [ INFO] [ 463] utils.cc:978 set cpu2 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu3 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu4 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu5 online
2021-12-19 19:46:53.053 [ INFO] [ 463] utils.cc:978 set cpu6 online
2021-12-19 19:46:53.053 [ INFO] [ 463] utils.cc:978 set cpu7 online
2021-12-19 19:46:54.536 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:54.547 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:54.558 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:54.569 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:54.581 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:54.594 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:54.605 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:59.870 [ INFO] [ 478] sysmon.cc:93 FSI initialized
2021-12-19 19:46:59.890 [ INFO] [ 827] sysmon.cc:931 MonitorEthernetPHYTimer: ret=0 up=1, link=1
2021-12-19 19:47:05.022 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:14.991 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:25.133 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:46:52.832 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:52.846 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:52.855 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:52.865 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:52.880 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:52.890 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:52.899 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:53.115 [ INFO] ----------------------------------------------
2021-12-19 19:46:53.115 [ INFO] restart_counter = 499
2021-12-19 19:46:53.115 [ INFO] [ 463] utils.cc:978 set cpu1 online
2021-12-19 19:46:53.116 [ INFO] [ 463] utils.cc:978 set cpu2 online
2021-12-19 19:46:53.117 [ INFO] [ 463] utils.cc:978 set cpu3 online
2021-12-19 19:46:53.117 [ INFO] [ 463] utils.cc:978 set cpu4 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu5 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu6 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu7 online
2021-12-19 19:46:54.603 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:54.615 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:54.626 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:54.637 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:54.648 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:54.659 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:54.670 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:59.870 [ INFO] [ 478] sysmon.cc:93 FSI initialized
2021-12-19 19:46:59.963 [ INFO] [ 827] sysmon.cc:931 MonitorEthernetPHYTimer: ret=0 up=1, link=1
2021-12-19 19:47:05.076 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:14.760 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:25.252 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:46:52.771 [ INFO] [ 461] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:52.783 [ INFO] [ 461] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:52.793 [ INFO] [ 461] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:52.802 [ INFO] [ 461] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:52.812 [ INFO] [ 461] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:52.821 [ INFO] [ 461] utils.cc:1097 kill process ntpd
2021-12-19 19:46:52.830 [ INFO] [ 461] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:53.046 [ INFO] ----------------------------------------------`
const logContents = {
"cm-app": cm_app_log,
"cm-app-1": cm_app_1_log,
"messages": "Syslog content goes here..."
};
let currentlogName = null;
function toggleLogList() {
const logListContainer = document.getElementById("logListContainer");
const toggleLogListText = document.getElementById("toggleLogListText");
// 切换列表可见性
const isListVisible = !logListContainer.classList.contains("hidden");
if (isListVisible) {
// 隐藏列表
logListContainer.classList.add("hidden");
toggleLogListText.textContent = "显示列表";
} else {
// 显示列表
logListContainer.classList.remove("hidden");
toggleLogListText.textContent = "隐藏列表";
}
}
function showLogContent(logName) {
// 移除所有日志项的选中状态
document.querySelectorAll(".log-item").forEach(el => {
el.classList.remove("bg-blue-100");
});
// 为当前点击项添加选中状态
document.querySelector(`.log-item[data-log="${logName}"]`).classList.add("bg-blue-100");
// 获取日志内容
currentlogName = logName;
const logContent = document.getElementById("logContent");
logContent.innerHTML = `<pre class="text-gray-700 whitespace-pre-wrap">${logContents[logName]}</pre>`;
// 启用下载和复制按钮
document.getElementById("downloadLogBtn").disabled = false;
document.getElementById("copyLogBtn").disabled = false;
}
function downloadLog() {
if (!currentlogName) return;
const logContent = logContents[currentlogName];
const blob = new Blob([logContent], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${currentlogName}_log_${new Date().toISOString().split("T")[0]}.txt`;
a.click();
URL.revokeObjectURL(url);
}
function init() {
// 初始化日志列表切换
const toggleLogListBtn = document.getElementById("toggleLogList");
if (toggleLogListBtn) {
toggleLogListBtn.addEventListener("click", toggleLogList);
}
// 初始化日志项点击事件
document.querySelectorAll(".log-item").forEach(item => {
item.addEventListener("click", () => showLogContent(item.getAttribute("data-log")));
});
// 初始化下载按钮
const downloadLogBtn = document.getElementById("downloadLogBtn");
if (downloadLogBtn) {
downloadLogBtn.addEventListener("click", downloadLog);
}
}
return { init };
})();
// =====================
// 配置文件模块
// =====================
const ConfigModule = (() => {
// 配置文件示例
const baseConfigContentExample = `# CM base configuration file
[log]
log_level = 4
log_file = /var/log/cm.log
log_size = 30M
log_count = 3
udp_send = 1
udp_port = 514
udp_ip = 192.168.1.201
`
const gPTPConfigContentExample = `# Automotive Profile example configuration for slaves containing those
# attributes which differ from the defaults. See the file, default.cfg, for
# the complete list of available options.
#
[global]
#
# Options carried over from gPTP.
#
gmCapable 1
priority1 254
priority2 254
utc_offset 0
logSyncInterval -3
syncReceiptTimeout 3
neighborPropDelayThresh 800000
min_neighbor_prop_delay -20000000
assume_two_step 1
path_trace_enabled 1
follow_up_info 1
transportSpecific 0x1
ptp_dst_mac 01:80:C2:00:00:0E
network_transport L2
delay_mechanism P2P
tx_timestamp_timeout 1000
clock_servo linreg
step_threshold 1.0
first_step_threshold 0.0001
logging_level 4
#
# Automotive Profile specific options
#
BMCA noop
slaveOnly 1
inhibit_announce 1
asCapable true
ignore_source_id 1
# Required to quickly correct Time Jumps in master
#operLogSyncInterval 0
#operLogPdelayReqInterval 2
msg_interval_request 0
#servo_offset_threshold 20000
#servo_num_offset_values 3`
const NTPConfigContentExample = `# 允许从本地网络同步时间
restrict 192.168.1.0 mask 255.255.255.0 nomodify notrap
# 默认拒绝所有访问
restrict default kod nomodify notrap nopeer noquery
restrict -6 default kod nomodify notrap nopeer noquery
# 允许本地主机访问
restrict 127.0.0.1
restrict -6 ::1
# NTP服务器
server 0.cn.pool.ntp.org iburst
server 1.cn.pool.ntp.org iburst
server 2.cn.pool.ntp.org iburst
server 3.cn.pool.ntp.org iburst
# 使用本地时钟作为备用时间源
server 127.127.1.0
fudge 127.127.1.0 stratum 10
# 漂移文件记录时钟频率偏差
driftfile /var/lib/ntp/ntp.drift
# 日志文件
logfile /var/log/ntp.log
# 统计信息目录
statsdir /var/log/ntpstats/
statistics loopstats peerstats clockstats
filegen loopstats file loopstats type day enable
filegen peerstats file peerstats type day enable
filegen clockstats file clockstats type day enable`
const faultsConfigContentExample = `{
"SEYOND_CM_FAULT_CPU_OVERHEAT": {
"enable": true, // 开启、关闭该Fault的检测，默认开启
"set_threshold": 110, // 设置故障的阈值
"set_interval": 2, // 设置故障，超过阈值的持续周期
"heal_threshold": 100, // 清除故障的阈值
"heal_interval": 2, // 清除故障，小于阈值的持续周期
"interval": 15 // 判断周期，单位：秒
},
"SEYOND_CM_FAULT_CPU_OVERLOAD1": {
"enable": true,
"set_threshold": 85,
"set_interval": 2,
"heal_threshold": 80,
"heal_interval": 2,
"interval": 15
},
"SEYOND_CM_FAULT_PHY_DOWN": {
"enable": true,
"set_interval": 2,
"heal_interval": 2,
"interval": 3
},
"SEYOND_CM_FAULT_PHY_PACKET_LOSS": {
"enable": true,
"set_threshold": 3,
"set_interval": 2,
"heal_threshold": 3,
"heal_interval": 1,
"interval": 5
}
}`
const configContents = {
"cm_internal_file_base": baseConfigContentExample,
"cm_internal_file_NTP": NTPConfigContentExample,
"cm_internal_file_gPTP": gPTPConfigContentExample,
"cm_internal_file_faults": faultsConfigContentExample
};
let currentConfigName = null;
let inEditMode = false;
const editConfigBtn = document.getElementById("editConfigBtn");
const saveConfigBtn = document.getElementById("saveConfigBtn");
const cancelEditBtn = document.getElementById("cancelEditBtn");
function showConfigContent(configName) {
// 移除所有配置文件项的选中状态
document.querySelectorAll(".config-item").forEach(el => {
el.classList.remove("bg-blue-100");
});
if (inEditMode) {
// 退出编辑模式
exitEdit();
}
editConfigBtn.disabled = false;
// 为当前点击项添加选中状态
document.querySelector(`.config-item[data-config="${configName}"]`).classList.add("bg-blue-100");
// 获取配置文件内容
currentConfigName = configName;
const configContent = document.getElementById("configContent");
configContent.innerHTML = `<pre id="configContentpre" class="text-gray-700 whitespace-pre-wrap">${configContents[configName]}</pre>`;
}
function editConfig() {
inEditMode = true;
const configContent = document.getElementById("configContent");
configContent.innerHTML = `<textarea id="configEditTextarea" class="w-full h-[calc(100%-8px)] min-h-[24rem] bg-white border border-gray-200 p-4 rounded-md text-gray-800 font-mono text-sm leading-relaxed shadow-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out placeholder-gray-400 overflow-y-auto"></textarea>`;
const configEditTextarea = document.getElementById("configEditTextarea")
configEditTextarea.textContent = configContents[currentConfigName];
editConfigBtn.classList.add("hidden");
saveConfigBtn.classList.remove("hidden");
cancelEditBtn.classList.remove("hidden");
}
function saveConfig() {
const configEditTextarea = document.getElementById("configEditTextarea");
configContents[currentConfigName] = configEditTextarea.value;
exitEdit();
}
function exitEdit() {
const configContent = document.getElementById("configContent");
configContent.innerHTML = `<pre id="configContentpre" class="text-gray-700 whitespace-pre-wrap">${configContents[currentConfigName]}</pre>`;
editConfigBtn.classList.remove("hidden");
saveConfigBtn.classList.add("hidden");
cancelEditBtn.classList.add("hidden");
inEditMode = false;
}
function init() {
// 初始化配置文件项点击事件
document.querySelectorAll(".config-item").forEach(item => {
item.addEventListener("click", () => showConfigContent(item.getAttribute("data-config")));
});
// 初始化编辑按钮
editConfigBtn.addEventListener("click", editConfig);
editConfigBtn.disabled = true;
// 初始化保存按钮
saveConfigBtn.addEventListener("click", saveConfig);
// 初始化取消按钮
cancelEditBtn.addEventListener("click", exitEdit);
}
return { init };
})();
// =====================
// 网络配置模块
// =====================
const NetworkModule = (() => {
function handleDhcpToggle() {
const staticForm = document.getElementById("static-ip-form");
const dhcpInfo = document.getElementById("dhcp-info");
if (this.checked) {
staticForm.classList.add("hidden");
dhcpInfo.classList.remove("hidden");
} else {
staticForm.classList.remove("hidden");
dhcpInfo.classList.add("hidden");
}
}
function handleNetworkCardSelection() {
// 移除所有按钮的选中状态
document.querySelectorAll(".bg-white.p-2.rounded-lg button").forEach(btn => {
btn.classList.remove("bg-indigo-100", "text-indigo-700", "border-indigo-200");
btn.classList.add("bg-white", "text-gray-700", "border-gray-200");
});
// 设置当前按钮为选中状态
this.classList.remove("bg-white", "text-gray-700", "border-gray-200");
this.classList.add("bg-indigo-100", "text-indigo-700", "border-indigo-200");
// 更新当前显示文本
document.querySelector(".text-xs.text-gray-500").textContent = "当前显示：" + this.textContent.trim();
}
function init() {
// DHCP切换
const dhcpToggle = document.getElementById("dhcp-toggle");
if (dhcpToggle) {
dhcpToggle.addEventListener("change", handleDhcpToggle);
}
// 网卡选择
document.querySelectorAll(".bg-white.p-2.rounded-lg button").forEach(button => {
button.addEventListener("click", handleNetworkCardSelection);
});
// UDP配置面板
const toggleUdpSettingsBtn = document.getElementById("toggleUdpSettings");
if (toggleUdpSettingsBtn) {
toggleUdpSettingsBtn.addEventListener("click", toggleUdpSettings);
}
}
return { init };
})();
// =====================
// 安全设置模块
// =====================
const SecurityModule = (() => {
function updatePasswordStrength(e) {
const password = e.target.value;
const strength = document.getElementById("passwordStrength");
if (password.length === 0) {
strength.style.width = "0%";
strength.className = "bg-gray-400 h-1.5 rounded-full";
} else if (password.length < 6) {
strength.style.width = "33%";
strength.className = "bg-red-500 h-1.5 rounded-full";
} else if (password.length < 10) {
strength.style.width = "66%";
strength.className = "bg-yellow-500 h-1.5 rounded-full";
} else {
strength.style.width = "100%";
strength.className = "bg-green-500 h-1.5 rounded-full";
}
}
function init() {
const newPasswordInput = document.getElementById("newPassword");
if (newPasswordInput) {
newPasswordInput.addEventListener("input", updatePasswordStrength);
}
}
return { init };
})();
// =====================
// 诊断模块
// =====================
const DiagnosticModule = (() => {
const elements = {
startDiagnostic: document.getElementById("startDiagnostic"),
diagnosticProgress: document.getElementById("diagnosticProgress"),
diagnosticResults: document.getElementById("diagnosticResults"),
startDiagnosticContainer: document.getElementById("startDiagnosticContainer"),
cancelDiagnostic: document.getElementById("cancelDiagnostic")
};
function startDiagnostic() {
// 隐藏开始诊断按钮
elements.startDiagnosticContainer.classList.add("hidden");
// 显示诊断进度
elements.diagnosticProgress.classList.remove("hidden");
// 模拟诊断完成，5秒后显示结果
setTimeout(function () {
elements.diagnosticProgress.classList.add("hidden");
elements.diagnosticResults.classList.remove("hidden");
}, 5000);
}
function cancelDiagnostic() {
elements.diagnosticProgress.classList.add("hidden");
elements.startDiagnosticContainer.classList.remove("hidden");
}
function init() {
if (elements.startDiagnostic) {
elements.startDiagnostic.addEventListener("click", startDiagnostic);
}
if (elements.cancelDiagnostic) {
elements.cancelDiagnostic.addEventListener("click", cancelDiagnostic);
}
}
return { init };
})();
// =====================
// 主应用入口
// =====================
function initApplication() {
// 初始化所有模块
AuthModule.init();
TabModule.init();
FirmwareModule.init();
LogModule.init();
ConfigModule.init();
NetworkModule.init();
SecurityModule.init();
DiagnosticModule.init();
// 页面加载完成后初始化图表
ChartModule.init();
}
// 文档加载完成后初始化应用
document.addEventListener("DOMContentLoaded", initApplication);