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>
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
const css = `
|
||||
.m-seg{display:inline-flex;border:1px solid var(--line);font-family:var(--mono);border-radius:var(--radius-sm,4px);overflow:hidden}
|
||||
.m-seg button{font-family:var(--mono);padding:7px 13px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--faint);background:transparent;border:none;border-radius:0}
|
||||
.m-seg button + button{border-left:1px solid var(--line)}
|
||||
.m-seg button.on-hard{background:var(--red-dim);color:var(--red)}
|
||||
.m-seg button.on-medium{background:var(--amber-dim);color:var(--amber)}
|
||||
.m-seg button.on-easy{background:var(--green-dim);color:var(--green)}
|
||||
.m-seg button.on-auto{background:var(--cyan-dim);color:var(--cyan)}
|
||||
`;
|
||||
function ensureCss() {
|
||||
if (typeof document === 'undefined' || document.getElementById('m-seg-css')) return;
|
||||
const s = document.createElement('style'); s.id = 'm-seg-css'; s.textContent = css;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
const BASE_OPTS = [['hard', 'HARD'], ['medium', 'MEDIUM'], ['easy', 'EASY']];
|
||||
|
||||
export function ComplexitySeg({ value, defaultValue = 'medium', onChange, includeAuto, autoLabel = 'AUTO', labels }) {
|
||||
ensureCss();
|
||||
const [inner, setInner] = React.useState(defaultValue);
|
||||
const cur = value !== undefined ? value : inner;
|
||||
const opts = includeAuto ? [...BASE_OPTS, ['auto', autoLabel]] : BASE_OPTS;
|
||||
return (
|
||||
<span className="m-seg">
|
||||
{opts.map(([v, lab]) => (
|
||||
<button key={v} type="button" className={cur === v ? 'on-' + v : ''}
|
||||
onClick={() => { setInner(v); if (onChange) onChange(v); }}>
|
||||
{(labels && labels[v]) || lab}
|
||||
</button>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user