/* ===== ui.jsx — primitives ===== */
(function () {
const { cls, fmtDate, fmtRel, ALARM_META, smartDate } = window;
/* ---------- Icons (lucide-ish, stroke 1.6) ---------- */
const I = (path, opts = {}) => (props) => (
);
const Icon = {
search: I(<>),
plus: I(<>),
chevDown: I(<>),
chevRight: I(<>),
chevLeft: I(<>),
x: I(<>),
check: I(<>),
edit: I(<>),
trash: I(<>),
filter: I(<>),
home: I(<>),
bell: I(<>),
box: I(<>),
flask: I(<>),
cpu: I(<>),
users: I(<>),
truck: I(<>),
building: I(<>),
settings: I(<>),
arrowR: I(<>),
arrowL: I(<>),
download: I(<>),
cal: I(<>),
pkg: I(<>),
user: I(<>),
history: I(<>),
eye: I(<>),
archive: I(<>),
moreH: I(<>, {sw:0}),
moreV: I(<>, {sw:0}),
sort: I(<>),
alert: I(<>),
tag: I(<>),
pin: I(<>),
refresh: I(<>),
tool: I(<>),
inbox: I(<>),
layers: I(<>),
sparkle: I(<>),
keyboard: I(<>),
arrowDownR:I(<>),
cornerR: I(<>),
paperclip: I(<>),
grid: I(<>),
list: I(<>),
menu: I(<>),
ext: I(<>),
};
/* ---------- Button ---------- */
function Button({ variant = 'default', size = 'md', icon: IconC, iconRight: IconR, children, className, ...rest }) {
const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-all whitespace-nowrap select-none focus-ring disabled:opacity-40 disabled:pointer-events-none';
const variants = {
default: 'bg-ink-900 text-white hover:bg-ink-800 active:bg-ink-950 shadow-sm',
primary: 'bg-ink-900 text-white hover:bg-ink-800 active:bg-ink-950 shadow-sm',
secondary:'bg-white text-ink-900 ring-1 ring-ink-200 hover:bg-ink-50 hover:ring-ink-300 active:bg-ink-100',
ghost: 'text-ink-700 hover:bg-ink-100 hover:text-ink-900',
danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-sm',
link: 'text-ink-900 hover:underline underline-offset-4',
};
const sizes = {
xs: 'text-xs h-7 px-2.5 gap-1',
sm: 'text-sm h-8 px-3 gap-1.5',
md: 'text-sm h-9 px-3.5 gap-1.5',
lg: 'text-[15px] h-10 px-4 gap-2',
};
return (
);
}
function IconBtn({ icon: IconC, label, size = 'md', variant = 'ghost', className, ...rest }) {
const sizes = { sm: 'h-7 w-7', md: 'h-8 w-8', lg: 'h-9 w-9' };
const variants = {
ghost: 'text-ink-600 hover:bg-ink-100 hover:text-ink-900',
solid: 'bg-ink-900 text-white hover:bg-ink-800',
outline: 'ring-1 ring-ink-200 hover:bg-ink-50 text-ink-700',
};
return (
);
}
/* ---------- Inputs ---------- */
function Field({ label, required, hint, error, children, className }) {
return (
);
}
function Input({ invalid, required, className, leadingIcon: LI, ...rest }) {
return (
{LI &&
}
);
}
function Textarea({ invalid, className, rows = 3, ...rest }) {
return (
);
}
function DateField({ value, onChange, required, ...rest }) {
const [v, setV] = React.useState(value || '');
React.useEffect(() => setV(value || ''), [value]);
const handle = (raw) => {
setV(raw);
onChange?.(raw);
};
const handleBlur = () => {
const sd = smartDate(v);
if (sd !== v) { setV(sd); onChange?.(sd); }
};
return (
handle(e.target.value)}
onBlur={handleBlur}
placeholder="YYYY-MM-DD（可输入 0901）"
required={required}
{...rest}
/>
);
}
/* ---------- SearchableSelect ---------- */
// options: [{id, label, sub, group, recent: boolean}]
function SearchableSelect({
options = [], value, onChange, placeholder = '搜索或选择',
required, allowCreate, onCreate, recentIds = [], renderOption, className, dropdownClass,
}) {
const [open, setOpen] = React.useState(false);
const [q, setQ] = React.useState('');
const [hi, setHi] = React.useState(0);
const ref = React.useRef(null);
React.useEffect(() => {
const on = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', on);
return () => document.removeEventListener('mousedown', on);
}, []);
const sel = options.find((o) => o.id === value);
const ql = q.toLowerCase();
const filtered = options.filter((o) =>
!q || o.label.toLowerCase().includes(ql) || (o.sub || '').toLowerCase().includes(ql)
);
const recents = filtered.filter((o) => recentIds.includes(o.id));
const others = filtered.filter((o) => !recentIds.includes(o.id));
const showCreate = allowCreate && q && !options.some((o) => o.label.toLowerCase() === ql);
return (
{open && (
{ setQ(e.target.value); setHi(0); }}
placeholder="搜索..." />
{recents.length > 0 && (
<>
最近使用
{recents.map((o) => (
{ onChange?.(o.id); setOpen(false); setQ(''); }}
renderOption={renderOption} />
))}
{others.length > 0 && }
)}
{others.map((o) => (
{ onChange?.(o.id); setOpen(false); setQ(''); }}
renderOption={renderOption} />
))}
{filtered.length === 0 && !showCreate && (
无匹配结果
)}
{showCreate && (
)}
)}
);
}
function OptionRow({ o, selected, onClick, renderOption }) {
return (
);
}
/* ---------- Card / Section ---------- */
function Card({ className, children, ...rest }) {
return {children}
;
}
function SectionH({ title, hint, right, className }) {
return (
);
}
/* ---------- Badge / Alarm chips ---------- */
function Badge({ children, tone = 'neutral', className, dot }) {
const tones = {
neutral: 'bg-ink-100 text-ink-700 ring-ink-200',
red: 'bg-red-50 text-red-700 ring-red-200',
orange: 'bg-orange-50 text-orange-700 ring-orange-200',
amber: 'bg-amber-50 text-amber-800 ring-amber-200',
sky: 'bg-sky-50 text-sky-700 ring-sky-200',
zinc: 'bg-zinc-100 text-zinc-700 ring-zinc-300',
rose: 'bg-rose-50 text-rose-700 ring-rose-200',
violet: 'bg-violet-50 text-violet-700 ring-violet-200',
green: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
blue: 'bg-blue-50 text-blue-700 ring-blue-200',
};
return (
{dot && }
{children}
);
}
function AlarmChip({ type, detail, size = 'sm' }) {
const m = ALARM_META[type];
if (!m) return null;
return (
{m.label}
{detail && · {detail}}
);
}
/* ---------- Modal ---------- */
function Modal({ open, onClose, title, children, size = 'md', footer }) {
React.useEffect(() => {
if (!open) return;
const onEsc = (e) => e.key === 'Escape' && onClose?.();
window.addEventListener('keydown', onEsc);
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { window.removeEventListener('keydown', onEsc); document.body.style.overflow = prevOverflow; };
}, [open]);
if (!open) return null;
const widths = { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-2xl', xl: 'max-w-4xl' };
return (
e.stopPropagation()}
className={cls('relative bg-white rounded-2xl shadow-pop ring-1 ring-ink-200 w-full animate-pop', widths[size])}>
{title && (
{title}
)}
{children}
{footer &&
{footer}
}
);
}
/* ---------- Drawer (mobile-friendly) ---------- */
function Drawer({ open, onClose, title, children, side = 'right', width = 420 }) {
if (!open) return null;
return (
e.stopPropagation()}
className={cls(
'absolute top-0 bottom-0 bg-white shadow-pop ring-1 ring-ink-200 animate-slidein flex flex-col',
side === 'right' ? 'right-0' : 'left-0'
)}
style={{ width }}>
{title && (
{title}
)}
{children}
);
}
/* ---------- Tabs ---------- */
function Tabs({ tabs, active, onChange, className }) {
return (
{tabs.map((t) => (
))}
);
}
/* ---------- Table ---------- */
function Table({ columns, rows, onRow, empty, dense, rowKey = 'id' }) {
if (!rows || rows.length === 0) {
return empty || ;
}
return (
{columns.map((c, i) => (
|
{c.header}
|
))}
{rows.map((r, ri) => (
onRow?.(r)}
className={cls(
'border-b border-ink-100 group',
onRow && 'cursor-pointer hover:bg-ink-50'
)}>
{columns.map((c, i) => (
|
{c.cell ? c.cell(r) : r[c.key]}
|
))}
))}
);
}
/* ---------- EmptyState ---------- */
function EmptyState({ icon: IconC = Icon.inbox, title = '空空如也', hint, action, compact }) {
return (
{title}
{hint &&
{hint}
}
{action &&
{action}
}
);
}
/* ---------- Skeleton ---------- */
function Skeleton({ className }) {
return ;
}
/* ---------- Avatar ---------- */
function Avatar({ name, size = 28, tone }) {
const tones = ['bg-ink-200 text-ink-700', 'bg-amber-100 text-amber-800', 'bg-sky-100 text-sky-700', 'bg-emerald-100 text-emerald-700', 'bg-violet-100 text-violet-700', 'bg-rose-100 text-rose-700'];
const idx = (name || '').charCodeAt(0) % tones.length;
return (
{name?.slice(0, 2)}
);
}
/* ---------- Kbd ---------- */
function Kbd({ children, className }) {
return (
{children}
);
}
/* ---------- Toasts ---------- */
function ToastHost() {
const { toasts } = window.useStore();
return (
{toasts.map((t) => (
{t.kind === 'error'
?
: }
{t.text}
))}