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>
39 lines
1.8 KiB
React
39 lines
1.8 KiB
React
const css = `
|
|
.m-ev{font-family:var(--mono);padding:7px 0 7px 12px;border-bottom:1px solid var(--line-soft);position:relative;font-size:11.5px;color:var(--ink);animation:maestro-rise .25s ease both;list-style:none}
|
|
.m-ev::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--m-ev-c,var(--muted));border-radius:1.5px}
|
|
.m-ev-head{display:flex;gap:8px;align-items:baseline}
|
|
.m-ev-type{font-weight:600;color:var(--m-ev-c,var(--ink));letter-spacing:.04em}
|
|
.m-ev-time{color:var(--faint);font-size:10.5px;margin-left:auto;flex:none}
|
|
.m-ev-detail{color:var(--muted);margin-top:1px;word-break:break-word}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-ev-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-ev-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
const TYPE_META = {
|
|
'task.created': ['任务创建', 'var(--green)'],
|
|
'task.updated': ['任务更新', 'var(--muted)'],
|
|
'status.changed': ['状态变更', 'var(--cyan)'],
|
|
'approval.requested': ['请求审批', 'var(--violet)'],
|
|
'approval.granted': ['审批通过', 'var(--green)'],
|
|
'approval.rejected': ['审批驳回', 'var(--red)'],
|
|
'run.started': ['运行开始', 'var(--cyan)'],
|
|
'run.finished': ['运行结束', 'var(--cyan)'],
|
|
'project.synced': ['todo 同步', 'var(--green)'],
|
|
};
|
|
|
|
export function EventItem({ type = 'task.updated', time, detail, label }) {
|
|
ensureCss();
|
|
const [lab, color] = TYPE_META[type] || [type, 'var(--muted)'];
|
|
return (
|
|
<li className="m-ev" style={{ '--m-ev-c': color }}>
|
|
<div className="m-ev-head">
|
|
<span className="m-ev-type">{label || lab}</span>
|
|
{time ? <span className="m-ev-time">{time}</span> : null}
|
|
</div>
|
|
{detail ? <div className="m-ev-detail">{detail}</div> : null}
|
|
</li>
|
|
);
|
|
}
|