wangjia
43fa1f7dbb
输入/下拉文字此前用 --ink(近白)太刺眼且与正文耦合。新增 --field-ink token (深 #a7b3a1 / 浅 #3c4838)，Input/Select 组件引用之；改一个值即全改。 因项目无 DS 编译器，同步改 _ds_bundle.js(运行加载源)+ ambience.css 兜底，确保即时生效。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
29 lines
1.4 KiB
React
29 lines
1.4 KiB
React
const css = `
|
|
.m-label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
|
|
.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--field-ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)}
|
|
.m-input:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)}
|
|
.m-input::placeholder{color:var(--faint)}
|
|
.m-req{color:var(--red)}
|
|
`;
|
|
export function ensureFieldCss() {
|
|
if (typeof document === 'undefined' || document.getElementById('m-field-css')) return;
|
|
const s = document.createElement('style'); s.id = 'm-field-css'; s.textContent = css;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
export function Input({ label, required, type = 'text', placeholder, value, defaultValue, onChange, width, style }) {
|
|
ensureFieldCss();
|
|
const ctrl = (
|
|
<input className="m-input" type={type} placeholder={placeholder} value={value}
|
|
defaultValue={defaultValue} style={{ width, ...style }} autoComplete="off"
|
|
onChange={onChange ? (e) => onChange(e.target.value) : undefined} readOnly={value !== undefined && !onChange} />
|
|
);
|
|
if (!label) return ctrl;
|
|
return (
|
|
<label className="m-label">
|
|
<span>{label}{required ? <span className="m-req"> *</span> : null}</span>
|
|
{ctrl}
|
|
</label>
|
|
);
|
|
}
|