fix(s8): align supply sidebar type card layout with production/delivery

- 移除 Supply 专用紧凑布局（--compact + bar-row），改为与 Production / Delivery 同款 2 格 metrics
- 卡片视觉、字号、间距、均时/关闭率 -- 占位 三页统一
- 7 类卡片在 sidebar 内自然滚动展示，与三页视觉一致

Web/src/views/aidop/s8/monitoring/S8MonitoringSupplyPage.vue

@@ -41,20 +41,24 @@
 						<article
 							v-for="item in anomalyTypes"
 							:key="item.key"
-							class="anomaly-type-card anomaly-type-card--compact"
+							class="anomaly-type-card"
 							:class="anomalyToneClass(item.closeRate)"
 						>
 							<div class="anomaly-type-card__head">
 								<span class="anomaly-type-card__name">{{ item.label }}</span>
 								<span class="anomaly-type-card__count">{{ formatInteger(item.total) }}</span>
 							</div>
-							<!-- S8-MONITORING-DEMO-SEMANTICS-CLOSURE-1：cell-data 近24h 窗口下，关闭率分母与待处理数量口径不一致，
-							     演示前先统一显示 `--`，进度条置 0；待 cell-data 接通真实近24h 指标后恢复。 -->
-							<div class="anomaly-type-card__bar-row">
-								<div class="anomaly-type-card__bar-track">
-									<div class="anomaly-type-card__bar-fill" :style="{ width: '0%' }" />
+							<div class="anomaly-type-card__metrics">
+								<!-- S8-SIDEBAR-TYPE-CARD-LAYOUT-UNIFY-1：与 Delivery / Production 同款 2 格 metrics；
+								     均时 / 关闭率 跨窗口分母不一致问题在 演示前 统一显示 `--`，待 cell-data 接通真实近24h 指标后恢复。 -->
+								<div class="anomaly-type-card__metric">
+									<div class="anomaly-type-card__metric-label">均时</div>
+									<div class="anomaly-type-card__metric-value">--</div>
+								</div>
+								<div class="anomaly-type-card__metric">
+									<div class="anomaly-type-card__metric-label">关闭率</div>
+									<div class="anomaly-type-card__metric-value anomaly-type-card__metric-value--accent">--</div>
 								</div>
-								<span class="anomaly-type-card__bar-label">关闭率 --</span>
 							</div>
 						</article>
 					</div>
@@ -497,7 +501,7 @@ onMounted(async () => {
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: 12px;
 }
 
 .anomaly-monitor__total {
@@ -517,53 +521,37 @@ onMounted(async () => {
 	color: var(--text-primary);
 }
 
+/* S8-SIDEBAR-TYPE-CARD-LAYOUT-UNIFY-1：与 Delivery / Production 同款 anomaly-type-card 样式（移除 --compact 与 bar-row 相关样式）。 */
 .anomaly-type-card {
-	padding: 10px 14px;
-	border-radius: 12px;
+	padding: 14px;
+	border-radius: 16px;
 	background: rgba(29, 32, 38, 0.8);
 	border: 1px solid rgba(144, 144, 151, 0.12);
 }
 
-.anomaly-type-card--compact { padding: 10px 12px; }
 .anomaly-type-card--danger { border-color: rgba(255, 180, 171, 0.2); }
 
 .anomaly-type-card__head {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
-	margin-bottom: 8px;
+	gap: 12px;
+	margin-bottom: 10px;
 }
 
-.anomaly-type-card__name { font-size: 13px; font-weight: 600; }
-.anomaly-type-card__count { font-size: 18px; font-weight: 700; }
+.anomaly-type-card__name { font-size: 15px; font-weight: 700; }
+.anomaly-type-card__count { font-size: 22px; font-weight: 700; }
 
-.anomaly-type-card__bar-row {
-	display: flex;
-	align-items: center;
+.anomaly-type-card__metrics {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: 8px;
 }
 
-.anomaly-type-card__bar-track {
-	flex: 1;
-	height: 6px;
-	border-radius: 999px;
-	background: rgba(50, 53, 60, 0.8);
-	overflow: hidden;
-}
-
-.anomaly-type-card__bar-fill {
-	height: 100%;
-	border-radius: inherit;
-	background: linear-gradient(90deg, #6de039 0%, #7bd0ff 100%);
-	transition: width 0.4s ease;
-}
-
-.anomaly-type-card__bar-label {
-	font-size: 11px;
-	color: var(--text-secondary);
-	white-space: nowrap;
-}
+.anomaly-type-card__metric { text-align: center; }
+.anomaly-type-card__metric-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
+.anomaly-type-card__metric-value { font-size: 16px; font-weight: 700; }
+.anomaly-type-card__metric-value--accent { color: #7bd0ff; }
 
 .anomaly-monitor__analysis-head { display: flex; align-items: center; gap: 16px; }