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>
62 lines
3.6 KiB
React
62 lines
3.6 KiB
React
const css = `
|
|
.m-gate{background:var(--panel);border:1px solid var(--violet-dim);font-family:var(--mono);color:var(--ink);animation:maestro-rise .25s ease both;border-radius:var(--radius-md,6px);overflow:hidden}
|
|
.m-gate-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
|
|
.m-gate--collapsed .m-gate-head{border-bottom:none}
|
|
.m-gate-hx{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
|
|
.m-gate-fold{font-family:var(--mono);font-size:12px;line-height:1;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:3px 7px;transition:color .12s,border-color .12s}
|
|
.m-gate-fold:hover{color:var(--violet);border-color:var(--violet-dim)}
|
|
.m-gate-kind{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--bg);background:var(--violet);padding:2px 8px;border-radius:var(--radius-xs,3px)}
|
|
.m-gate-title{font-weight:600;font-size:13px}
|
|
.m-gate-body{padding:12px 14px;font-size:12.5px}
|
|
.m-gate-actions{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-soft)}
|
|
.m-gate-doclabel{font-size:10.5px;color:var(--muted);letter-spacing:.18em;margin:8px 0 4px}
|
|
.m-gate-doclabel:first-child{margin-top:0}
|
|
.m-gate-doc{background:var(--bg-deep);border:1px solid var(--line-soft);border-left:2px solid var(--green-dim);padding:10px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;color:var(--ink);margin:0;border-radius:var(--radius-sm,4px)}
|
|
.m-gate-stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8;border-radius:3px}
|
|
`;
|
|
function ensureCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-gate-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-gate-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
const GATE_LABEL = { plan: '拆解评审', spec: '方案评审', exec: '结果评审' };
|
|
|
|
export function GateCard({ gate = 'spec', kindLabel, title, meta, docLabel, doc, actions, children, style, collapsed, foldable, onToggleFold, foldTitle, headerExtra, onHeaderDoubleClick, headerTitle }) {
|
|
ensureCss();
|
|
return (
|
|
<div className={'m-gate' + (collapsed ? ' m-gate--collapsed' : '')} style={style} onDoubleClick={onHeaderDoubleClick}>
|
|
<div className="m-gate-head" title={headerTitle}>
|
|
<span className="m-gate-kind">{kindLabel || GATE_LABEL[gate] || gate}</span>
|
|
<span className="m-gate-title">{title}</span>
|
|
{meta ? <span style={{ fontSize: 11, color: 'var(--muted)' }}>{meta}</span> : null}
|
|
{(headerExtra || foldable) ? (
|
|
<span className="m-gate-hx">
|
|
{headerExtra}
|
|
{foldable ? (
|
|
<button type="button" className="m-gate-fold" title={foldTitle}
|
|
onClick={(e) => { e.stopPropagation(); onToggleFold && onToggleFold(); }}>
|
|
{collapsed ? '▸' : '▾'}
|
|
</button>
|
|
) : null}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{!collapsed ? (
|
|
<React.Fragment>
|
|
<div className="m-gate-body">
|
|
{docLabel ? <div className="m-gate-doclabel">{docLabel}</div> : null}
|
|
{doc ? <pre className="m-gate-doc">{doc}</pre> : null}
|
|
{children}
|
|
</div>
|
|
{actions ? <div className="m-gate-actions">{actions}</div> : null}
|
|
</React.Fragment>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function GateStripe() {
|
|
ensureCss();
|
|
return <div className="m-gate-stripe"></div>;
|
|
}
|