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>
33 lines
1.6 KiB
React
33 lines
1.6 KiB
React
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>
|
|
);
|
|
}
|