Improve resource usage meter states and accessibility

platform_web/components/OperationControls.test.tsx

@@ -2,7 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
 import operationControlsSource from "./OperationControls.tsx?raw";
-import { ConfirmDialog, ManagementDialog } from "./OperationControls";
+import { ConfirmDialog, ManagementDialog, UsageMeter } from "./OperationControls";
 
 describe("shared operation dialogs", () => {
   it("renders labelled, busy-aware confirmation semantics", () => {
@@ -42,4 +42,27 @@ describe("shared operation dialogs", () => {
     expect(html).toContain("编辑资源");
     expect(html).toContain('aria-modal="true"');
   });
+
+  it("renders resource meters with meaningful known, pending, and missing states", () => {
+    const html = renderToStaticMarkup(
+      <>
+        <UsageMeter label="磁盘" percent={78} />
+        <UsageMeter label="CPU" pending />
+        <UsageMeter label="内存" />
+      </>
+    );
+
+    expect(html).toContain("磁盘");
+    expect(html).toContain("78%");
+    expect(html).toContain("偏高");
+    expect(html).toContain('role="meter"');
+    expect(html).toContain('aria-valuenow="78"');
+    expect(html).toContain("CPU");
+    expect(html).toContain("读取中");
+    expect(html).toContain("等待指标");
+    expect(html).toContain("内存");
+    expect(html).toContain("未上报");
+    expect(html).toContain("等待 Run");
+    expect(html).not.toContain("--");
+  });
 });