fix(watch): align four metric rings in one row

Move load ring beside CPU/mem/disk so the slot card matches Baota layout.

docs/changelog/2026-06-14-watch-metric-ring-baota-style.md

@@ -2,7 +2,7 @@
 
 ## 摘要
 
-CPU / 内存 / 硬盘改为并排圆环（环内百分比、下方标签）；负载单独小圆环，环内显示 1 分钟负载值，环长为负载÷核数。
+CPU / 内存 / 硬盘 / 负载四个圆环同一行并排（环内百分比或负载值，下方标签）；悬停可看规格。
 
 ## 动机
 

frontend/src/components/watch/WatchMetricRing.vue

@@ -24,6 +24,7 @@ const ringValue = computed(() => {
   if (props.value == null || Number.isNaN(props.value)) return 0
   return Math.max(0, Math.min(100, props.value))
 })
+const centerFontPx = computed(() => `${Math.max(11, Math.round(props.size * 0.2))}px`)
 </script>
 
 <template>
@@ -57,7 +58,7 @@ const ringValue = computed(() => {
 }
 
 .watch-metric-ring__value {
-  font-size: 13px;
+  font-size: v-bind(centerFontPx);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;

frontend/src/components/watch/WatchSlotCard.vue

@@ -166,24 +166,35 @@ const showSwap = computed(() => (props.slot.metrics?.swap_total_gb ?? 0) > 0)
       {{ systemBanner.short }}
     </div>
 
-    <div class="watch-metric-rings d-flex justify-space-around mb-2">
+    <div class="watch-metric-rings d-flex justify-space-between mb-2">
       <WatchMetricRing
         label="CPU"
         accent="cpu"
         :value="slot.metrics?.cpu_pct"
         :hint="formatCpuSpec(slot.metrics)"
+        :size="56"
       />
       <WatchMetricRing
         label="内存"
         accent="mem"
         :value="slot.metrics?.mem_pct"
         :hint="[formatMemSpec(slot.metrics), formatMemSub(slot.metrics)].filter(Boolean).join(' · ')"
+        :size="56"
       />
       <WatchMetricRing
         label="硬盘"
         accent="disk"
         :value="slot.metrics?.disk_pct"
         :hint="[formatDiskSpec(slot.metrics), formatDiskSub(slot.metrics)].filter(Boolean).join(' · ')"
+        :size="56"
+      />
+      <WatchMetricRing
+        label="负载"
+        accent="load"
+        :value="loadBarPct"
+        :center="loadRingCenter"
+        :hint="loadRingHint"
+        :size="56"
       />
     </div>
 
@@ -195,17 +206,6 @@ const showSwap = computed(() => (props.slot.metrics?.swap_total_gb ?? 0) > 0)
       <span v-if="slot.metrics?.swap_pct != null"> · {{ slot.metrics.swap_pct }}%</span>
     </div>
 
-    <div class="d-flex justify-center mb-2">
-      <WatchMetricRing
-        label="负载"
-        accent="load"
-        :value="loadBarPct"
-        :center="loadRingCenter"
-        :hint="loadRingHint"
-        :size="56"
-      />
-    </div>
-
     <v-divider class="my-2" />
 
     <v-btn-toggle v-model="chartMetric" density="compact" variant="outlined" divided class="mb-1">
@@ -366,4 +366,11 @@ const showSwap = computed(() => (props.slot.metrics?.swap_total_gb ?? 0) > 0)
 .watch-slot-waiting {
   min-height: 160px;
 }
+.watch-metric-rings {
+  gap: 2px;
+}
+.watch-metric-rings :deep(.watch-metric-ring__label) {
+  font-size: 11px;
+  white-space: nowrap;
+}
 </style>