Improve resource usage meter states and accessibility

platform_web/pages/ServerDetailPage.tsx

@@ -119,6 +119,7 @@ export function ServerDetailPage(props: PageComponentProps) {
   const detailFreshness = instance.status === "ready" ? runtimeObservationFreshness(instance.data, runEndpoint) : "unverified";
   const detailStateText = instance.status === "ready" && detailFreshness === "fresh" ? stateLabel(instance.data.state) : instance.status === "ready" ? `最后观测：${stateLabel(instance.data.state)}（Run 未验证）` : "未验证";
   const detailSections = useMemo(() => serverDetailSectionEntries(readyPlugin), [readyPlugin]);
+  const metricsWaiting = metrics?.source === "run-metrics-pending";
 
   useEffect(() => {
     if (!params.routeKey || !readyPlugin?.pages.some((page) => page.key === params.routeKey)) return;
@@ -249,9 +250,9 @@ export function ServerDetailPage(props: PageComponentProps) {
               <HeaderStat label="指标" value={metricFreshnessLabel(metrics)} />
             </div>
             <div className="server-detail-meter-strip">
-              <UsageMeter label="CPU" percent={metrics?.cpuPercent} />
-              <UsageMeter label="内存" percent={metrics?.memoryPercent} />
-              <UsageMeter label="磁盘" percent={metrics?.diskPercent} />
+              <UsageMeter label="CPU" percent={metrics?.cpuPercent} pending={metricsWaiting} />
+              <UsageMeter label="内存" percent={metrics?.memoryPercent} pending={metricsWaiting} />
+              <UsageMeter label="磁盘" percent={metrics?.diskPercent} pending={metricsWaiting} />
             </div>
           </header>