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,46 @@
+<!-- @dsCard group="Components" viewport="700x400" name="Surfaces · 面板与反馈" subtitle="GateCard 审批闸 · Toast · EventItem 事件流 · Timeline 时间线 · Panel" -->
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:14px 16px}</style>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { GateCard, GateStripe, Toast, EventItem, Button, Timeline } = window.MaestroDesignSystem_a6a290;
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 14 }}>
+    <div>
+      <GateStripe />
+      <GateCard gate="spec" title="重构 sync 模块" meta="maestro · MED" style={{ marginTop: 10 }}
+        docLabel="改动方案（SPEC）"
+        doc={"把轮询改为 WS 推送：\n1. store 层加 events 订阅\n2. web 端断线重连 + 指数退避"}
+        actions={<>
+          <Button variant="accept">✓ 通过</Button>
+          <Button variant="reject">✕ 驳回</Button>
+        </>} />
+      <div style={{ display: 'grid', gap: 8, marginTop: 12, justifyItems: 'start' }}>
+        <Toast kind="ok">已通过 · 进入 ready</Toast>
+        <Toast kind="err">驳回必须填写改进意见</Toast>
+        <Toast kind="warn">daemon 重连中…</Toast>
+      </div>
+      <div style={{ marginTop: 14 }}>
+        <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '.18em', marginBottom: 6 }}>状态流转时间线</div>
+        <Timeline items={[
+          { time: '06-12 05:58', text: '审批驳回（方案评审）：缺少回滚方案', who: 'you', color: 'var(--red)' },
+          { time: '06-12 06:10', text: '写方案中 → 待确认方案', who: '编排器' },
+          { time: '06-12 06:31', text: '审批通过（方案评审）', who: 'you', color: 'var(--green)' },
+        ]} />
+      </div>
+    </div>
+    <ul style={{ padding: 0, margin: 0 }}>
+      <EventItem type="task.created" time="13:58" detail="重构 sync 模块" />
+      <EventItem type="approval.requested" time="14:00" detail="spec_review · 等待裁决" />
+      <EventItem type="approval.rejected" time="14:02" detail="↳ 缺少回滚方案" />
+      <EventItem type="run.started" time="14:05" detail="executor · worktree wt-127" />
+      <EventItem type="status.changed" time="14:09" detail="executing → exec_review" />
+    </ul>
+  </div>
+);
+</script></body></html>