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>
41 lines
2.0 KiB
React
41 lines
2.0 KiB
React
const css = `
|
|
.m-bdg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;line-height:1;letter-spacing:.08em;height:28px;padding:0 10px;cursor:default;white-space:nowrap;border-radius:var(--radius-sm,4px)}
|
|
.m-bdg .m-bdg-ico{margin-right:5px;font-size:12px;line-height:1;font-family:var(--mono)}
|
|
.m-bdg .m-bdg-n{font-weight:700}
|
|
.m-bdg .m-bdg-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
|
|
.m-bdg:hover .m-bdg-label{max-width:8em;opacity:1;margin-left:5px}
|
|
.m-bdg--gate{color:var(--violet);border:1px solid var(--violet-dim)}
|
|
.m-bdg--gate:not(.m-bdg--zero){animation:maestro-pulse 2.2s infinite}
|
|
.m-bdg--ready{color:var(--green);border:1px solid var(--green-dim)}
|
|
.m-bdg--run{color:var(--cyan);border:1px solid var(--cyan-dim)}
|
|
.m-bdg--run:not(.m-bdg--zero) .m-bdg-ico{animation:maestro-pulse .9s infinite}
|
|
.m-bdg--blocked{color:var(--amber);border:1px dashed var(--amber-dim)}
|
|
.m-bdg--total{color:var(--ink);border:1px solid var(--line)}
|
|
.m-bdg--zero{color:var(--faint);border-color:var(--line-soft);animation:none}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-bdg-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-bdg-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
const META = {
|
|
gate: { ico: '⚠', label: '项待审批' },
|
|
ready: { ico: '▸', label: '待执行' },
|
|
run: { ico: '◉', label: '执行中' },
|
|
blocked: { ico: '⛓', label: '被阻塞' },
|
|
total: { ico: 'Σ', label: '总量' },
|
|
};
|
|
|
|
export function CountBadge({ kind = 'ready', count = 0, label, title }) {
|
|
ensureCss();
|
|
const m = META[kind] || META.ready;
|
|
const cls = 'm-bdg m-bdg--' + kind + (count === 0 ? ' m-bdg--zero' : '');
|
|
return (
|
|
<span className={cls} title={title}>
|
|
<span className="m-bdg-ico">{m.ico}</span>
|
|
<span className="m-bdg-n">{count}</span>
|
|
<span className="m-bdg-label">{label || m.label}</span>
|
|
</span>
|
|
);
|
|
}
|