feat(h5): add device detail page with realtime data

h5/css/style.css

@@ -812,3 +812,159 @@ textarea.form-input {
   background-color: var(--color-border);
   margin: 0 16px;
 }
+
+/* ========================================
+   设备详情页
+   ======================================== */
+.device-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.device-info-left {
+  display: flex;
+  gap: 12px;
+}
+
+.device-info-icon {
+  font-size: 40px;
+}
+
+.device-info-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.device-info-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.device-info-model {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.device-info-location {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.device-info-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.device-status-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.device-status-badge.online {
+  background-color: rgba(34, 197, 94, 0.12);
+  color: var(--color-online);
+}
+
+.device-status-badge.offline {
+  background-color: rgba(156, 163, 175, 0.12);
+  color: var(--color-offline);
+}
+
+.device-last-seen {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+/* ========================================
+   数据网格
+   ======================================== */
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.data-item {
+  background-color: var(--color-bg);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.data-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.data-unit {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  margin-left: 2px;
+}
+
+/* ========================================
+   告警横幅
+   ======================================== */
+.alert-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.alert-banner.hidden {
+  display: none;
+}
+
+.alert-banner.alert-danger {
+  background-color: rgba(249, 115, 22, 0.12);
+  color: var(--color-danger);
+}
+
+.alert-banner.alert-warning {
+  background-color: rgba(234, 179, 8, 0.12);
+  color: var(--color-warning);
+}
+
+.alert-banner-icon {
+  font-size: 16px;
+}
+
+.alert-banner-msg {
+  flex: 1;
+}
+
+/* ========================================
+   刷新栏
+   ======================================== */
+.refresh-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.refresh-time {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}