refactor: 前端视觉重构 — Layout/HeadMenu 骨架、SummaryCards 合并、Card 分组、Drawer 概览重设计

src/web/styles.css

@@ -12,17 +12,44 @@
 }
 
 .dashboard {
+  min-height: 100vh;
+  background: var(--td-bg-color-page);
+  width: 100%;
+}
+
+.dashboard-content {
+  box-sizing: border-box;
+  max-width: 1400px;
+  margin: 0 auto;
   padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
   width: 100%;
 }
 
-.dashboard-header {
-  margin-bottom: var(--td-comp-margin-l);
+.dashboard-brand {
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: var(--td-comp-margin-s);
+  line-height: 1.2;
 }
 
-.dashboard-header .t-typography {
+.dashboard-logo {
   margin: 0;
-  line-height: 1.3;
+  color: var(--td-text-color-primary);
+  font-size: calc(var(--td-font-size-title-large) + 6px);
+  font-weight: 700;
+}
+
+.dashboard-subtitle {
+  color: var(--td-text-color-secondary);
+  font-size: var(--td-font-size-body-medium);
+  font-weight: 400;
+}
+
+.dashboard-refresh-status {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--td-comp-margin-xxl);
 }
 
 .status-dot {
@@ -69,24 +96,6 @@
   background: var(--td-bg-color-component-disabled);
 }
 
-.status-donut {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  margin: 0 auto;
-}
-
-.donut-center-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -60%);
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
 .trend-chart {
   width: 100%;
 }
@@ -104,6 +113,7 @@
 }
 
 .t-table tr.row-down {
+  border-left: 3px solid var(--td-error-color);
   background: color-mix(in srgb, var(--td-error-color) 6%, transparent);
 }
 
@@ -131,6 +141,58 @@
   color: var(--td-error-color);
 }
 
+.latency-value {
+  display: inline-block;
+  min-width: 7ch;
+  white-space: nowrap;
+}
+
+.drawer-time-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--td-comp-margin-m);
+  width: 100%;
+}
+
+.drawer-date-range {
+  flex: 1;
+  min-width: 360px;
+}
+
+.overview-stat-card {
+  background: var(--td-bg-color-container-hover);
+}
+
+.overview-stat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--td-comp-margin-m);
+}
+
+.overview-stat-value {
+  font-size: var(--td-font-size-body-medium);
+  text-align: right;
+}
+
+.overview-stat-value .t-statistic-content {
+  font-size: var(--td-font-size-body-medium);
+}
+
+.summary-stat-col {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .drawer-time-controls {
+    flex-wrap: wrap;
+  }
+
+  .drawer-date-range {
+    min-width: 100%;
+  }
+}
+
 .full-width {
   width: 100%;
 }
@@ -139,33 +201,10 @@
   cursor: pointer;
 }
 
-.group-header {
-  margin-bottom: var(--td-comp-margin-m);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.group-header .t-typography {
-  margin: 0;
-  font-size: var(--td-font-size-title-medium);
-  font-weight: 600;
-  line-height: 1.5;
-}
-
 .summary-cards-row {
   margin-bottom: var(--td-comp-margin-xl);
 }
 
-.summary-freshness {
-  display: block;
-  margin-top: var(--td-comp-margin-s);
-}
-
-.summary-freshness--warning {
-  color: var(--td-warning-color);
-}
-
 .error-boundary-fallback {
   padding-top: 20vh;
   width: 100%;