wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
25 lines
1.4 KiB
React
25 lines
1.4 KiB
React
// 额度计量条：LED 分段 + 用量分级变色（≤80% 青 / >80% 琥珀 / >95% 红，与产品 .agent-usage 阈值对齐）
|
|
export function QuotaMeter({ label, pct = 0, detail, cells = 16, style }) {
|
|
const p = Math.max(0, Math.min(100, pct));
|
|
const filled = Math.round((p / 100) * cells);
|
|
const color = p > 95 ? 'var(--red)' : p > 80 ? 'var(--amber)' : 'var(--cyan)';
|
|
const glow = p > 95 ? 'rgba(255,93,93,.4)' : p > 80 ? 'rgba(240,180,41,.35)' : 'rgba(89,200,216,.4)';
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', ...style }}
|
|
title={(label ? label + ' · ' : '') + p + '%' + (detail ? ' · ' + detail : '')}>
|
|
{label ? <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em', flex: 'none' }}>{label}</span> : null}
|
|
<span style={{ display: 'inline-flex', gap: 2, padding: 3, background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderRadius: 3 }}>
|
|
{Array.from({ length: cells }, (_, i) => (
|
|
<span key={i} style={{
|
|
width: 4, height: 9, borderRadius: 1,
|
|
background: i < filled ? color : 'var(--panel-2)',
|
|
boxShadow: i < filled ? '0 0 5px ' + glow : 'none',
|
|
}}></span>
|
|
))}
|
|
</span>
|
|
<b style={{ fontSize: 12, color }}>{p}%</b>
|
|
{detail ? <span style={{ fontSize: 10.5, color: 'var(--faint)' }}>{detail}</span> : null}
|
|
</span>
|
|
);
|
|
}
|