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>
47 lines
3.1 KiB
HTML
47 lines
3.1 KiB
HTML
<!-- @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>
|