模型状态监控
+模型加载进度和运行日志监控
+推理模组监控
-NVIDIA 推理服务器系统状态
+推理模组监控
+NVIDIA 推理服务器系统状态
+推理模组监控
应用模组监控
-Intel X86 应用服务器系统状态
+应用模组监控
+Intel X86 应用服务器系统状态
+diff --git a/sdcard/web/index.htm b/sdcard/web/index.htm index 0635b10..f860e7a 100644 --- a/sdcard/web/index.htm +++ b/sdcard/web/index.htm @@ -141,7 +141,7 @@ background: rgba(255,255,255,0.1); backdrop-filter: blur(15px); border-radius: 20px; - padding: 30px; + padding: 20px; margin: 100px 0 20px 0; /* 调整上边距到100px,与Dashboard顶部对齐后保持相同间隙 */ border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1); @@ -166,7 +166,7 @@ } .card { - background: rgba(255,255,255,0.95); + background: rgba(255,255,255,0.85); border-radius: 15px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); @@ -540,7 +540,11 @@ } .system-section { - margin-bottom: 40px; + margin-bottom: 20px; + } + + .system-section:last-child { + margin-bottom: 0; } .system-header { @@ -652,11 +656,11 @@ /* 移动端减少间距 */ .main-panel { margin: 40px 0 20px 0; /* 移动端减少上边距从100px到40px */ - padding: 20px; /* 移动端减少内边距 */ + padding: 15px; /* 移动端减少内边距 */ } .system-section { - margin-bottom: 25px; /* 移动端减少系统区块间距从40px到25px */ + margin-bottom: 15px; /* 移动端减少系统区块间距,保持一致 */ } .lpmu-dashboard, @@ -692,6 +696,175 @@ margin-left: 0px !important; } + /* 折叠功能样式 */ + .collapsible-header { + cursor: pointer; + user-select: none; + position: relative; + padding-right: 40px !important; + } + + .collapse-icon { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + font-size: 1.2rem; + transition: transform 0.3s ease; + } + + .collapse-icon.collapsed { + transform: translateY(-50%) rotate(-90deg); + } + + .collapsible-content { + max-height: 5000px; + overflow: hidden; + transition: max-height 0.5s ease, opacity 0.3s ease; + opacity: 1; + } + + .collapsible-content.collapsed { + max-height: 0; + opacity: 0; + } + + /* 模型状态监控样式 */ + .model-status-progress { + position: relative; + width: 100%; + height: 20px; + background-color: #e0e0e0; + border-radius: 10px; + overflow: hidden; + margin: 10px 0; + } + + .model-status-progress-fill { + height: 100%; + background: linear-gradient(90deg, #4CAF50, #45a049); + border-radius: 10px; + transition: width 0.5s ease; + position: relative; + overflow: hidden; + } + + /* 进度条光线滚动动画 */ + @keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } + } + + .model-status-progress-fill.loading { + background: linear-gradient( + 90deg, + #4CAF50 0%, + #81C784 50%, + #4CAF50 100% + ); + background-size: 1000px 100%; + animation: shimmer 2s infinite linear; + } + + .model-status-text { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + color: white; + font-size: 0.85rem; + font-weight: 400; + white-space: nowrap; + z-index: 10; + min-width: 40px; + text-align: right; + } + + .model-log-window { + background: #f8f9fa; + color: #333; + font-family: 'Courier New', monospace; + font-size: 0.75rem; + padding: 15px; + border-radius: 8px; + max-height: 0; + overflow-y: auto; + transition: max-height 0.3s ease; + margin-top: 10px; + line-height: 1.4; + border: 1px solid #e9ecef; + } + + .model-log-window.expanded { + max-height: 400px; /* 温度监控高度的2倍 */ + } + + .model-log-window::-webkit-scrollbar { + width: 8px; + } + + .model-log-window::-webkit-scrollbar-track { + background: #e9ecef; + border-radius: 4px; + } + + .model-log-window::-webkit-scrollbar-thumb { + background: #bbb; + border-radius: 4px; + } + + .model-log-window::-webkit-scrollbar-thumb:hover { + background: #999; + } + + .model-log-line { + padding: 2px 0; + word-wrap: break-word; + } + + .model-log-timestamp { + color: #666; + } + + .model-section-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 10px 10px 0; + background: rgba(255,255,255,0.05); + border-radius: 8px; + margin: 10px 0; + cursor: pointer; + user-select: none; + position: relative; + } + + .model-section-header:hover { + background: rgba(255,255,255,0.1); + } + + .model-section-title { + font-weight: 500; + font-size: 1rem; + color: #555; + } + + /* 覆盖模型日志折叠图标的定位,使其在flex布局中正常工作 */ + .model-section-header .collapse-icon { + position: static; + transform: none; + transition: transform 0.3s ease; + color: #4CAF50; + } + + .model-section-header .collapse-icon.collapsed { + transform: rotate(-90deg); + } + /* 版权信息样式 */ .copyright { text-align: center; @@ -751,13 +924,107 @@
模型加载进度和运行日志监控
+NVIDIA 推理服务器系统状态
+NVIDIA 推理服务器系统状态
+Intel X86 应用服务器系统状态
+Intel X86 应用服务器系统状态
+© 2025 RobOS Team|RMinte|Panidea (Chengdu) Artificial Intelligence Technology Co., Ltd.
+© 2026 RobOS Team|RMinte (Chengdu) Artificial Intelligence Technology Co., Ltd.|www.RMinte.com