feat: 图表绘制

src/assets/styles/main.scss

@@ -466,6 +466,10 @@ p {
   gap: 16px;
 }
 
+.dashboard-kpis {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .stat-card {
   display: flex;
   align-items: center;
@@ -533,12 +537,37 @@ p {
   gap: 18px;
 }
 
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.wide-chart {
+  grid-column: span 2;
+}
+
+.tall-chart {
+  .chart-canvas {
+    height: 380px;
+  }
+}
+
+.compact-kpis {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .content-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.55fr);
   gap: 18px;
 }
 
+.hospital-rank-grid,
+.content-warning-grid {
+  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
+}
+
 .chart-panel,
 .data-section {
   padding: 18px;
@@ -581,6 +610,115 @@ p {
   height: 300px;
 }
 
+.rank-list,
+.quality-list {
+  display: grid;
+  gap: 12px;
+}
+
+.rank-item {
+  display: grid;
+  grid-template-columns: 28px minmax(120px, 0.8fr) minmax(160px, 1fr) 58px;
+  align-items: center;
+  gap: 12px;
+  min-height: 36px;
+
+  > span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 700;
+    background: var(--primary);
+  }
+
+  strong {
+    min-width: 0;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    color: var(--green);
+    font-size: 12px;
+    font-style: normal;
+    text-align: right;
+  }
+}
+
+.pass-rate-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+
+  h3 {
+    margin: 0 0 12px;
+    font-size: 15px;
+  }
+}
+
+.pass-rate-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 38px;
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--panel-soft);
+
+  strong {
+    min-width: 0;
+    overflow: hidden;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    color: var(--green);
+    font-weight: 700;
+  }
+
+  &.danger span {
+    color: var(--danger);
+  }
+}
+
+.quality-item {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-soft);
+
+  strong,
+  span {
+    display: block;
+  }
+
+  strong {
+    font-size: 14px;
+  }
+
+  span {
+    margin-top: 4px;
+    color: var(--muted);
+    font-size: 12px;
+  }
+}
+
+.compact-search {
+  width: 220px;
+}
+
 .page-toolbar {
   display: flex;
   align-items: center;