docs(design): 解压 Maestro Design System 到 design/（重构参照材料）

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>
2026-06-13 14:29:07 +08:00
parent 0b3ebbd569
commit 5a1e185b1a
102 changed files with 10323 additions and 0 deletions
@@ -0,0 +1,45 @@
+// 右栏：事件流 · 可折叠（折叠后仅图标）
+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;