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>
29 lines
1.2 KiB
React
29 lines
1.2 KiB
React
const css = `
|
|
.m-tl{display:grid;font-family:var(--mono)}
|
|
.m-tl-item{display:flex;gap:12px;align-items:baseline;padding:5px 0 5px 14px;font-size:12px;border-left:2px solid var(--line);position:relative;color:var(--ink)}
|
|
.m-tl-item::before{content:'';position:absolute;left:-4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--m-tl-c,var(--muted))}
|
|
.m-tl-time{flex:none;color:var(--faint);font-size:11px;min-width:130px}
|
|
.m-tl-text{color:var(--ink)}
|
|
.m-tl-who{color:var(--muted);font-size:11px}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-tl-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-tl-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function Timeline({ items = [], style }) {
|
|
ensureCss();
|
|
return (
|
|
<div className="m-tl" style={style}>
|
|
{items.map((it, i) => (
|
|
<div key={i} className="m-tl-item" style={it.color ? { '--m-tl-c': it.color } : null}>
|
|
<span className="m-tl-time">{it.time}</span>
|
|
<span className="m-tl-text">{it.text}</span>
|
|
{it.who ? <span className="m-tl-who">{it.who}</span> : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|