// ui.jsx — shared UI primitives for RT-Flow
const { useState, useEffect, useRef, useMemo } = React;
// ─────────── icons (tiny line-based SVG, 18×18 default) ───────────
const I = {
Search: (p) => ,
Bell: (p) => ,
Plus: (p) => ,
Chevron: (p) => ,
ChevronDown: (p) => ,
Check: (p) => ,
X: (p) => ,
Bolt: (p) => ,
Refresh: (p) => ,
Filter: (p) => ,
Clock: (p) => ,
Lock: (p) => ,
External: (p) => ,
Doc: (p) => ,
Folder: (p) => ,
Image: (p) => ,
Stack: (p) => ,
Chart: (p) => ,
Workspace: (p) => ,
Tasks: (p) => ,
Pipeline: (p) => ,
Alert: (p) => ,
};
// ─────────── status chip (small) ───────────
function Chip({ kind = 'pending', children, mono = false, dot = false }) {
const k = STATUS_STYLE[kind] || STATUS_STYLE.pending;
return (
{dot && }
{children}
);
}
const STATUS_STYLE = {
pending: { bg: 'var(--st-pending-bg)', ink: 'var(--st-pending-ink)' },
active: { bg: 'var(--st-active-bg)', ink: 'var(--st-active-ink)' },
mine: { bg: 'var(--st-mine-bg)', ink: 'var(--st-mine-ink)' },
done: { bg: 'var(--st-done-bg)', ink: 'var(--st-done-ink)' },
blocked: { bg: 'var(--st-block-bg)', ink: 'var(--st-block-ink)' },
urgent: { bg: '#FBE5E7', ink: '#9F1117' },
brand: { bg: 'var(--brand-soft)', ink: 'var(--brand)' },
};
// ─────────── Section header (uppercase tiny) ───────────
function SectionLabel({ children, right }) {
return (
{children}
{right && {right}}
);
}
// ─────────── Card surface ───────────
function Card({ children, style, onClick, pad = 16, accent }) {
return (
);
}
// ─────────── Avatar (initials, brand-tinted) ───────────
function Avatar({ name, size = 28, color }) {
const init = (name||'?').slice(-2);
return (
{init}
);
}
// ─────────── Patient sigil (square, mono code) ───────────
function PatientSigil({ tag, size = 32, color = 'var(--brand)' }) {
return (
{tag}
);
}
// ─────────── Mono wait timer ───────────
function WaitTimer({ value, label = '等待' }) {
return (
{label}
{value}
);
}
// ─────────── Node bead (single circle/line for timeline) ───────────
function NodeBead({ state, label, k, current, small = false }) {
const size = small ? 10 : 14;
const colorMap = {
done: { fill: 'var(--brand)', stroke: 'var(--brand)' },
active: { fill: '#fff', stroke: '#1F5AA8' },
mine: { fill: '#fff', stroke: '#C0252F' },
blocked: { fill: '#fff', stroke: '#B14B0E' },
pending: { fill: '#fff', stroke: '#C9D1D7' },
urgent: { fill: '#fff', stroke: '#9F1117' },
};
const c = colorMap[state] || colorMap.pending;
return (
{state === 'active' && (
)}
{state === 'mine' && (
)}
{state === 'blocked' && (
)}
{label && (
{label}
)}
);
}
// connecting line between beads
function BeadLine({ state }) {
const color = state === 'done' ? 'var(--brand)' : '#D8DDE2';
return (
);
}
// ─────────── 12-node compact strip ───────────
function NodeStrip({ progress, current, dense = false }) {
return (
{NODES.map((n, i) => {
const p = progress[n.id] || { state: 'pending' };
return (
{i < NODES.length - 1 && }
);
})}
);
}
// ─────────── Task card (the headline list item) ───────────
function TaskCard({ task, onClick }) {
const p = PATIENTS[task.patient];
const node = NODES.find(n => n.id === task.node);
const priInk = {
urgent: '#9F1117', mine: 'var(--st-mine-ink)',
active: 'var(--st-active-ink)', done: 'var(--st-done-ink)',
pending: 'var(--t3)', blocked: 'var(--st-block-ink)',
}[task.pri] || 'var(--t2)';
const priChipKind = task.pri === 'urgent' ? 'urgent'
: task.pri === 'mine' ? 'mine'
: task.pri === 'active' ? 'active'
: task.pri === 'blocked' ? 'blocked'
: task.pri === 'done' ? 'done'
: 'pending';
const priLabel = {
urgent: '紧急 · 等我',
mine: '等我',
active: '进行中',
pending: '待启动',
done: '已完成',
blocked: '已驳回',
}[task.pri] || '—';
return (
{/* row 1: patient + chip */}
{task.title}
{p.id} · {p.dx.split(' · ')[0]}
{priLabel}
{/* row 2: plan/sub */}
节点
{node?.k} · {node?.label}
{task.meta && (
上游
{task.meta.join(' · ')}
)}
{task.sla && (
)}
{/* row 3: wait timer + tags */}
{title && (
{title}
{subtitle &&
{subtitle}
}
)}
);
}
function IconBtn({ children, onClick, dot }) {
return (
);
}
// ─────────── Bottom tab bar ───────────
function BottomTabs({ current, onChange }) {
const tabs = [
{ id: 'workspace', label: '工作台', icon: I.Workspace },
{ id: 'tasks', label: '任务', icon: I.Tasks },
{ id: 'pipeline', label: '流水线', icon: I.Pipeline },
{ id: 'files', label: '档案', icon: I.Folder },
{ id: 'insights', label: '洞察', icon: I.Chart },
];
return (
{tabs.map(t => {
const active = current === t.id;
const Icon = t.icon;
return (
);
})}
);
}
// ─────────── Hero alert (top of workspace) ───────────
function HeroAlert({ alert, onAction }) {
if (!alert) return null;
const urgent = alert.level === 'urgent';
return (
{urgent ? '紧急 · 等我' : '需介入'}
{alert.sla && (
剩余 {alert.sla}
)}
{alert.title}
{alert.body}
);
}
// ─────────── Misc helpers ───────────
function KV({ label, value, mono }) {
return (
);
}
function MiniBar({ value, target, ok = true, width = 80 }) {
const w = Math.min(100, (value/target)*100);
const color = ok ? '#18713B' : '#B14B0E';
return (
);
}
// global anim keyframes
(function injectKf(){
if (document.getElementById('rt-kf')) return;
const s = document.createElement('style');
s.id = 'rt-kf';
s.textContent = `
@keyframes rt-pulse { 0% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.2); opacity: 0 } 100% { transform: scale(1); opacity: 0 } }
@keyframes rt-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
`;
document.head.appendChild(s);
})();
Object.assign(window, {
I, Chip, SectionLabel, Card, Avatar, PatientSigil, WaitTimer,
NodeBead, BeadLine, NodeStrip, TaskCard, RolePill, TopBar,
IconBtn, BottomTabs, HeroAlert, KV, MiniBar,
});