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>
46 lines
2.3 KiB
React
46 lines
2.3 KiB
React
// 右栏：事件流 · 可折叠（折叠后仅图标）
|
|
function MaestroEventIcon({ size = 16 }) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
|
|
<polyline points="2 12 7 12 10 5 14 19 17 12 22 12" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function maestroPanelToggleProps(onClick, title) {
|
|
return {
|
|
onClick, title,
|
|
style: {
|
|
cursor: 'pointer', flex: 'none', fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1,
|
|
background: 'transparent', color: 'var(--muted)',
|
|
border: '1px solid var(--line)', borderRadius: 'var(--radius-sm, 4px)', padding: '4px 7px',
|
|
},
|
|
onMouseEnter: (e) => { e.currentTarget.style.color = 'var(--green)'; e.currentTarget.style.borderColor = 'var(--green-dim)'; },
|
|
onMouseLeave: (e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--line)'; },
|
|
};
|
|
}
|
|
|
|
function EventPanel({ events, collapsed, onToggleCollapse, t }) {
|
|
const { EventItem, SectionHead } = window.MaestroDesignSystem_a6a290;
|
|
if (collapsed) {
|
|
return (
|
|
<aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '16px 0', gap: 14 }}>
|
|
<button {...maestroPanelToggleProps(onToggleCollapse, t.expandEvents)}>«</button>
|
|
<span style={{ color: 'var(--muted)' }} title={t.events + ' · ' + events.length}><MaestroEventIcon size={18} /></span>
|
|
<span style={{ fontSize: 10.5, color: 'var(--faint)', letterSpacing: '.04em' }}>{events.length}</span>
|
|
</aside>
|
|
);
|
|
}
|
|
return (
|
|
<aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', overflowY: 'auto', paddingBottom: 30 }}>
|
|
<SectionHead title={t.events} action={<button {...maestroPanelToggleProps(onToggleCollapse, t.collapseEvents)}>»</button>}
|
|
style={{ padding: '14px 14px 10px', position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg-deep) 75%, transparent)' }} />
|
|
<ul style={{ listStyle: 'none', padding: '0 14px', margin: 0 }}>
|
|
{events.map((e, i) => <EventItem key={i} type={e.type} label={t.eventTypes[e.type]} time={e.time} detail={e.detail} />)}
|
|
</ul>
|
|
</aside>
|
|
);
|
|
}
|
|
window.MaestroKitEventPanel = EventPanel;
|