e.stopPropagation()} style={{ position: 'absolute', top: 46, right: 0, width: 348, maxWidth: '90vw', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, boxShadow: 'var(--shadow-pop)', zIndex: 50, overflow: 'hidden', animation: 'popin .16s ease' }}>
通知
全部標為已讀
{ onClose(); window.__go('overview'); }} style={{ textAlign: 'center', padding: '11px', fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 600, cursor: 'pointer', background: 'var(--panel)' }} className="navi">查看全部動態
window.__go && window.__go('institutions')} style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 9, padding: '7px 12px', width: 240, color: 'var(--ink-3)', cursor: 'pointer' }}>
搜尋機構、教具…
{open && <>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
{ setCleared(true); window.__toast && window.__toast('已全部標為已讀'); }} onClose={() => setOpen(false)} />
}
);
}
function DeltaPill({ delta, kind }) {
const c = kind === 'down' ? 'var(--bad)' : 'var(--good)';
return
{delta};
}
function Badge({ label, kind }) {
const map = { good: ['var(--good)', 'rgba(46,158,107,.12)'], warn: ['var(--warn)', 'rgba(224,161,43,.14)'], bad: ['var(--bad)', 'rgba(210,80,60,.12)'], info: ['var(--c-blue)', 'rgba(59,111,224,.12)'] };
const [c, bg] = map[kind] || map.info;
return
{label};
}
function Trend({ t }) {
if (t === 'up') return
;
if (t === 'down') return
;
return
;
}
function Card({ title, action, pad = 18, children, style = {} }) {
return (
{title &&
{title}
{action}}
{children}
);
}
// ---- charts ----
function Sparkline({ data, color = 'var(--accent)', w = 110, h = 32 }) {
const mn = Math.min(...data), mx = Math.max(...data), rng = mx - mn || 1;
const pts = data.map((v, i) => [(i / (data.length - 1)) * w, h - 4 - ((v - mn) / rng) * (h - 8)]);
const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
return
;
}
function Kpi({ k, onClick }) {
const val = k.fmt === 'big' ? window.fmtK(k.value) : window.fmt(k.value);
return (
{val}
{k.unit && {k.unit}}
{k.sub || '近 8 期'}
);
}
function AreaLine({ data, labels, color = 'var(--accent)', h = 230 }) {
const W = 760, P = { l: 38, r: 12, t: 14, b: 26 };
const mx = Math.max(...data) * 1.08, mn = Math.min(...data) * 0.9;
const rng = mx - mn || 1;
const x = (i) => P.l + (i / (data.length - 1)) * (W - P.l - P.r);
const y = (v) => P.t + (1 - (v - mn) / rng) * (h - P.t - P.b);
const line = data.map((v, i) => (i ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(v).toFixed(1)).join(' ');
const area = line + ' L' + x(data.length - 1) + ' ' + (h - P.b) + ' L' + x(0) + ' ' + (h - P.b) + ' Z';
const ticks = 4;
return (
);
}
function Donut({ data, total, centerLabel = '總長者數' }) {
const sum = total || data.reduce((a, d) => a + d.value, 0);
const R = 52, C = 2 * Math.PI * R; let off = 0;
return (
{data.map((d, i) => (
{d.label}
{d.value}
{Math.round(d.value / sum * 100)}%
))}
);
}
function BarRows({ data, color = 'var(--accent)' }) {
const mx = Math.max(...data.map((d) => d.value));
return (
{data.map((d, i) => (
))}
);
}
// 六力 初評→近期 改善條
function ImproveBars({ rows }) {
return (
{rows.map((r, i) => (
{r.k}
{r.b} → {r.r} +{r.r - r.b}
))}
);
}
function MiniStat({ icon, label, value, sub, accent = 'var(--accent)' }) {
return (
{value}
{sub && {sub}}
{label}
);
}
function Drawer({ open, title, sub, onClose, width = 468, children }) {
React.useEffect(() => {
function esc(e) { if (e.key === 'Escape') onClose(); }
if (open) window.addEventListener('keydown', esc);
return () => window.removeEventListener('keydown', esc);
}, [open]);
if (!open) return null;
return (
e.stopPropagation()} style={{ width, maxWidth: '94vw', height: '100%', background: 'var(--surface)', boxShadow: '-12px 0 44px rgba(20,30,50,.20)', display: 'flex', flexDirection: 'column', animation: 'slidein .26s cubic-bezier(.2,.7,.3,1)' }}>
{children}
);
}
// 抽屜用：小標籤列、區塊標題
function DRow({ k, v }) { return
{k}{v}
; }
function DHead({ children }) { return
{children}
; }
// 垂直時間軸（成本/模型導入里程碑）
function Timeline({ items }) {
const col = { data: 'var(--c-green)', llm: 'var(--accent)', tool: 'var(--c-teal)', inst: 'var(--c-blue)', report: 'var(--c-violet)' };
return (
{items.map((it, i) => {
const c = col[it.kind] || 'var(--ink-3)';
const last = i === items.length - 1;
return (
{!last && }
{it.date}
{it.title}
{it.desc}
);
})}
);
}
Object.assign(window, { Icon, Sidebar, MobileNav, Topbar, Kpi, Card, MiniStat, DeltaPill, Badge, Trend, Sparkline, AreaLine, Donut, BarRows, ImproveBars, Drawer, DRow, DHead, Timeline });