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>
54 lines
2.8 KiB
HTML
54 lines
2.8 KiB
HTML
<!-- @dsCard group="Components" viewport="700x280" name="Core · 按钮与徽章" subtitle="Button 五变体 · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead" -->
|
|
<!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 { Button, StatusChip, ComplexityBadge, CountBadge, SectionHead, QuotaMeter } = window.MaestroDesignSystem_a6a290;
|
|
const row = { display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' };
|
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
<div style={{ display: 'grid', gap: 12 }}>
|
|
<div style={row}>
|
|
<Button>默认</Button>
|
|
<Button variant="solid">创建任务</Button>
|
|
<Button variant="accept">✓ 通过</Button>
|
|
<Button variant="reject">✕ 驳回</Button>
|
|
<Button variant="ghost">+ 新建</Button>
|
|
<Button size="xs">⟳ 同步 todo</Button>
|
|
<Button disabled>禁用</Button>
|
|
</div>
|
|
<div style={row}>
|
|
<StatusChip status="ready" />
|
|
<StatusChip status="executing" />
|
|
<StatusChip status="exec_review" />
|
|
<StatusChip status="blocked" />
|
|
<StatusChip status="failed" />
|
|
<StatusChip status="done" />
|
|
<StatusChip status="cancelled" />
|
|
</div>
|
|
<div style={row}>
|
|
<ComplexityBadge complexity="hard" />
|
|
<ComplexityBadge complexity="medium" />
|
|
<ComplexityBadge complexity="easy" />
|
|
<span style={{ width: 10 }}></span>
|
|
<CountBadge kind="gate" count={2} />
|
|
<CountBadge kind="ready" count={5} />
|
|
<CountBadge kind="run" count={1} />
|
|
<CountBadge kind="blocked" count={1} />
|
|
<CountBadge kind="total" count={5} />
|
|
<CountBadge kind="run" count={0} />
|
|
</div>
|
|
<div style={row}>
|
|
<QuotaMeter label="5h" pct={50} detail="3h 8m 后重置" />
|
|
<QuotaMeter label="周" pct={78} detail="16h 38m 后重置" />
|
|
<QuotaMeter pct={94} />
|
|
</div>
|
|
<SectionHead title="任务树" style={{ padding: '4px 0 0' }} action={<Button variant="ghost" size="xs">+ 新建任务</Button>} />
|
|
</div>
|
|
);
|
|
</script></body></html>
|