virtheart
5c41eb410b
- 新增HUD图标、面板和状态指示器资产 - 实现HUD图标组件和错误边界组件 - 重构顶部状态栏和底部导航栏 - 更新路线面板样式和交互 - 添加HUD资产清单和切片脚本 - 移除未使用的资产文件 - 调整API安全配置和生产环境设置
34 lines
815 B
TypeScript
34 lines
815 B
TypeScript
export function StatMeter({
|
|
iconSrc,
|
|
label,
|
|
value,
|
|
maxValue,
|
|
tone,
|
|
}: {
|
|
iconSrc?: string;
|
|
label: string;
|
|
value: number;
|
|
maxValue: number;
|
|
tone: 'health' | 'neutral' | 'danger';
|
|
}) {
|
|
const percentage = Math.max(0, Math.min(100, (value / maxValue) * 100));
|
|
|
|
return (
|
|
<article className={`stat-meter tone-${tone}`}>
|
|
<div className="stat-meter-copy">
|
|
{iconSrc ? <img className="stat-meter-icon" src={iconSrc} alt="" aria-hidden="true" /> : null}
|
|
<div>
|
|
<span>{label}</span>
|
|
<strong>
|
|
{Math.round(value)}
|
|
<small>/{Math.round(maxValue)}</small>
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
<div className="meter-track">
|
|
<div className="meter-fill" style={{ width: `${percentage}%` }} />
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|