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>
28 lines
1.9 KiB
HTML
28 lines
1.9 KiB
HTML
<!-- @dsCard group="Components" viewport="700x240" name="Forms · 表单控件" subtitle="Input · Select · Textarea(danger) · ComplexitySeg（含智能段）" -->
|
|
<!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 { Input, Select, Textarea, ComplexitySeg } = window.MaestroDesignSystem_a6a290;
|
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
<div style={{ display: 'grid', gap: 12 }}>
|
|
<div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
|
|
<Input label="名称" required placeholder="my-project" />
|
|
<Input label="仓库路径" required placeholder="/path/to/repo" width={180} />
|
|
<Select label="工作模式" options={[
|
|
{ value: 'manual', label: 'manual · 手动' },
|
|
{ value: 'auto-easy', label: 'auto-easy · 自动执行 Easy' },
|
|
{ value: 'auto-approved', label: 'auto-approved · 自动执行已批准' },
|
|
]} />
|
|
<ComplexitySeg defaultValue="auto" includeAuto autoLabel="智能" />
|
|
</div>
|
|
<Textarea danger placeholder="驳回理由（必填）" minHeight={56} />
|
|
</div>
|
|
);
|
|
</script></body></html>
|