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>
18 lines
922 B
React
18 lines
922 B
React
export function SectionHead({ mark = 'green', title, action, sticky, style }) {
|
|
const markColor = { green: 'var(--green)', amber: 'var(--amber)', cyan: 'var(--cyan)', violet: 'var(--violet)' }[mark] || 'var(--green)';
|
|
return (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 6,
|
|
fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em',
|
|
color: 'var(--muted)', textTransform: 'uppercase',
|
|
padding: '18px 0 10px',
|
|
...(sticky ? { position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg) 75%, transparent)' } : {}),
|
|
...style,
|
|
}}>
|
|
<span style={{ color: markColor, flex: 'none' }}>▍</span>
|
|
<span style={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', minWidth: 0 }}>{title}</span>
|
|
{action ? <span style={{ marginLeft: 'auto', flex: 'none' }}>{action}</span> : null}
|
|
</div>
|
|
);
|
|
}
|