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>
47 lines
2.3 KiB
React
47 lines
2.3 KiB
React
const STATUS_LABEL = {
|
|
init: '新建', analyzing: '分析拆解中', plan_review: '待确认拆解',
|
|
decomposed: '已拆解', speccing: '写方案中', spec_review: '待确认方案',
|
|
ready: '可执行', blocked: '被依赖阻塞', queued: '排队中',
|
|
executing: '执行中', exec_review: '待审/合', failed: '失败',
|
|
needs_attention: '需人工', done: '完成', paused: '暂停', cancelled: '取消',
|
|
};
|
|
const STATUS_GROUP = {
|
|
init: 'idle', analyzing: 'work', speccing: 'work',
|
|
plan_review: 'gate', spec_review: 'gate', exec_review: 'gate',
|
|
decomposed: 'container', ready: 'go', queued: 'go', executing: 'run',
|
|
blocked: 'hold', paused: 'hold', failed: 'bad', needs_attention: 'bad',
|
|
done: 'done', cancelled: 'dead',
|
|
};
|
|
const css = `
|
|
.m-chip{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;padding:1px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:var(--radius-xs,3px)}
|
|
.m-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
|
|
.m-chip--work{color:var(--cyan);border-color:var(--cyan-dim)}
|
|
.m-chip--gate{color:var(--violet);border-color:var(--violet-dim)}
|
|
.m-chip--gate::before{animation:maestro-pulse 1.4s infinite}
|
|
.m-chip--container{color:#9bb4c8;border-color:#2c3c4a}
|
|
.m-chip--go{color:var(--green);border-color:var(--green-dim)}
|
|
.m-chip--run{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(89,200,216,.25)}
|
|
.m-chip--run::before{animation:maestro-pulse .8s infinite}
|
|
.m-chip--hold{color:var(--faint)}
|
|
.m-chip--bad{color:var(--red);border-color:var(--red-dim)}
|
|
.m-chip--bad::before{animation:maestro-pulse 1s infinite}
|
|
.m-chip--done{color:var(--bg-deep);background:var(--green);border-color:var(--green);font-weight:700}
|
|
.m-chip--dead{color:var(--faint);text-decoration:line-through}
|
|
.m-chip--dead::before{background:var(--faint)}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-chip-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-chip-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function StatusChip({ status = 'init', label }) {
|
|
ensureCss();
|
|
const group = STATUS_GROUP[status] || 'idle';
|
|
return (
|
|
<span className={'m-chip m-chip--' + group}>
|
|
{label || STATUS_LABEL[status] || status}
|
|
</span>
|
|
);
|
|
}
|