admin343/browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve resource usage meter states and accessibility

Browse Source
This commit is contained in:
npc0-hue
2026-08-21 16:53:46 +08:00
parent 8aeb488179
commit 2381b69d24
6 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform_web/components/OperationControls.tsx
+11 -6
View File
@@ -140,18 +140,23 @@ function useDialogLifecycle(open: boolean, onClose: () => void, canClose: boolea
interface UsageMeterProps {
label: string;
percent?: number;
pending?: boolean;
}
export function UsageMeter({ label, percent }: UsageMeterProps) {
export function UsageMeter({ label, percent, pending = false }: UsageMeterProps) {
const known = typeof percent === "number" && Number.isFinite(percent);
const clamped = known ? Math.max(0, Math.min(100, percent)) : 0;
const rounded = Math.round(clamped);
const state = known ? (clamped >= 85 ? "critical" : clamped >= 70 ? "watch" : "normal") : pending ? "pending" : "missing";
const stateLabel = known ? (clamped >= 85 ? "警戒" : clamped >= 70 ? "偏高" : "正常") : pending ? "读取中" : "未上报";
const trackText = pending ? "等待指标" : "等待 Run";
return (
<div className="usage-meter">
<span>{label}</span>
<span className="usage-meter-track" role="img" aria-label={known ? `${label} ${Math.round(clamped)}%` : `${label} 暂无数据`}>
{known && <span className={`usage-meter-fill${clamped >= 85 ? " usage-high" : ""}`} style={{ width: `${clamped}%` }} />}
<div className={`usage-meter usage-meter-${state}`} title={known ? `${label} ${rounded}% ${stateLabel}` : `${label} ${stateLabel}`}>
<span className="usage-meter-label"><span>{label}</span><small>{stateLabel}</small></span>
<span className="usage-meter-value">{known ? `${rounded}%` : stateLabel}</span>
<span className="usage-meter-track" role={known ? "meter" : "img"} aria-label={known ? `${label} ${rounded}% ${stateLabel}` : `${label} ${stateLabel}`} aria-valuemin={known ? 0 : undefined} aria-valuemax={known ? 100 : undefined} aria-valuenow={known ? rounded : undefined} aria-valuetext={known ? undefined : stateLabel}>
{known ? <span className="usage-meter-fill" style={{ width: `${clamped}%` }} /> : <span className="usage-meter-placeholder">{trackText}</span>}
</span>
<span className="usage-meter-value">{known ? `${Math.round(clamped)}%` : "--"}</span>
</div>
);
}