chenlin
cb3fb47561
web-platform-ci / TypeScript, lint, unit, build (push) Has been cancelled
web-platform-ci / Playwright E2E (push) Has been cancelled
web-platform-ci / TypeScript, lint, unit, build (pull_request) Has been cancelled
web-platform-ci / Playwright E2E (pull_request) Has been cancelled
27 lines
967 B
TypeScript
27 lines
967 B
TypeScript
import { CirclePause, CirclePlay } from 'lucide-react';
|
|
import { useAppStore } from '../../stores/useAppStore';
|
|
import { Badge } from '../../components/ui';
|
|
import { StoreStatusBar } from './StatusBar';
|
|
|
|
export function ViewportHUD() {
|
|
const paused = useAppStore((state) => state.paused);
|
|
const ready = useAppStore((state) => Boolean(state.snapshot));
|
|
return (
|
|
<div
|
|
aria-label="视口状态"
|
|
className="engineering-glass flex flex-wrap items-center gap-2 rounded-lg border border-border px-2 py-1 text-xs"
|
|
>
|
|
<Badge tone={!ready || paused ? 'neutral' : 'success'}>
|
|
<span aria-hidden="true" className="hud-signal" data-running={ready && !paused} />
|
|
{!ready || paused ? (
|
|
<CirclePause className="h-3.5 w-3.5" />
|
|
) : (
|
|
<CirclePlay className="h-3.5 w-3.5" />
|
|
)}
|
|
{!ready ? '待导入' : paused ? '已暂停' : '仿真中'}
|
|
</Badge>
|
|
<StoreStatusBar />
|
|
</div>
|
|
);
|
|
}
|