70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import { Activity, ChevronUp, MemoryStick, TriangleAlert } from 'lucide-react';
|
|
import { Badge, Popover, PropertyRow, Separator } from '../../components/ui';
|
|
export function PerformancePopover({
|
|
fps,
|
|
stepMs,
|
|
memoryMb,
|
|
overBudget,
|
|
loaded,
|
|
}: {
|
|
fps: number;
|
|
stepMs: number;
|
|
memoryMb?: number;
|
|
overBudget: boolean;
|
|
loaded?: boolean;
|
|
}) {
|
|
return (
|
|
<Popover
|
|
label="性能详情"
|
|
placement="bottom-left"
|
|
trigger={({ open, toggle }) => (
|
|
<button
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
aria-expanded={open}
|
|
onClick={toggle}
|
|
className="flex h-7 items-center gap-3 rounded px-1.5 hover:bg-element-hover focus-visible:ring-2 focus-visible:ring-accent/30"
|
|
>
|
|
<span className="flex items-center gap-1.5">
|
|
<Activity className="h-3 w-3" />
|
|
FPS {fps.toFixed(0)}
|
|
</span>
|
|
<ChevronUp className={`h-3 w-3 transition-transform ${open ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
)}
|
|
>
|
|
{() => (
|
|
<div className="w-72 rounded-lg border border-border bg-surface-elevated p-3 text-xs text-text-secondary shadow-xl">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<h2 className="font-semibold text-text-primary">运行性能</h2>
|
|
<Badge tone={overBudget ? 'warning' : 'success'}>
|
|
{overBudget ? '预算超限' : '运行正常'}
|
|
</Badge>
|
|
</div>
|
|
{loaded !== undefined && (
|
|
<PropertyRow label="WASM" value={loaded ? '已加载' : '未加载'} />
|
|
)}
|
|
<PropertyRow label="渲染帧率" value={`${fps.toFixed(0)} FPS`} />
|
|
<PropertyRow label="物理步进" value={`${stepMs.toFixed(2)} ms`} />
|
|
<PropertyRow
|
|
label="浏览器内存"
|
|
value={memoryMb === undefined ? '不可用' : `${memoryMb.toFixed(1)} MiB`}
|
|
/>
|
|
<Separator className="my-2" />
|
|
{overBudget ? (
|
|
<p className="flex gap-2 text-warning">
|
|
<TriangleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
|
主线程超出步进预算，平台已限制追帧以保持交互响应。
|
|
</p>
|
|
) : (
|
|
<p className="flex gap-2 text-text-tertiary">
|
|
<MemoryStick className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
|
指标来自浏览器运行时，仅用于当前会话诊断。
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Popover>
|
|
);
|
|
}
|