/* ============================================================
SVG 圖標庫 (Lucide 風格, 1.8 stroke)
============================================================ */
const Icon = ({ name, size = 18, color = "currentColor", sw = 1.8, style }) => {
const P = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
stroke: color, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", style };
const paths = {
grid: <>,
box: <>,
inbound: <>,
outbound: <>,
alert: <>,
clipboard: <>,
map: <>,
cpu: <>,
shield: <>,
chart: <>,
gear: <>,
search: <>,
bell: <>,
mic: <>,
zap: <>,
link: <>,
activity: <>,
chevron: ,
chevronDown: ,
plus: <>,
scan: <>,
check: ,
checkCircle: <>,
x: <>,
trend: <>,
swap: <>,
clock: <>,
user: <>,
pkg: <>,
layers: <>,
filter: ,
map2: <>,
arrow: <>,
sparkle: <>,
flame: <>,
dots: <>,
edit: <>,
forward: <>,
refresh: <>,
eye: <>,
eyeOff: <>,
logo: <>,
};
return ;
};
const PasswordInput = ({
value,
onChange,
autoComplete,
placeholder,
className = "input",
disabled = false,
inputStyle = {},
buttonStyle = {},
}) => {
const [visible, setVisible] = React.useState(false);
const label = visible ? "隱藏密碼" : "顯示密碼";
return (
);
};
/* —— 環形進度 —— */
const Ring = ({ value, size = 132, stroke = 12, color = "var(--blue)", track = "#EAF0F8", label, sub }) => {
const v = Number.isFinite(value) ? value : 0;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - v / 100);
const gid = "rg" + Math.round(value) + size;
return (
{label ?? value + "%"}
{sub &&
{sub}
}
);
};
/* —— 環形甜甜圈（多段）—— */
const Donut = ({ data, size = 132, stroke = 16 }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const total = data.reduce((s, d) => s + d.value, 0);
let acc = 0;
return (
);
};
/* —— 迷你折線圖 —— */
const Spark = ({ points, w = 120, h = 36, color = "var(--blue)", fill = true }) => {
const max = Math.max(...points), min = Math.min(...points);
const rng = max - min || 1;
const step = w / (points.length - 1);
const pts = points.map((p, i) => [i * step, h - ((p - min) / rng) * (h - 6) - 3]);
const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
const gid = "sp" + Math.round(points[0]) + points.length;
return (
);
};
/* —— 統計卡 —— */
const StatCard = ({ icon, label, value, unit, delta, deltaUp, accent = "var(--blue)", spark, sparkColor, danger, idx = 0 }) => (
{label}
{value}
{unit && {unit}}
{delta != null ? (
{delta}
) : }
{spark && }
);
/* —— 狀態徽章 —— */
const STATUS_MAP = {
ok: ["badge-ok", "正常"], warn: ["badge-warn", "低庫存"],
danger: ["badge-danger", "缺貨"], yellow: ["badge-yellow", "超期未檢"],
};
const StatusBadge = ({ s, text }) => {
const [cls, label] = STATUS_MAP[s] || ["badge-gray", text || s];
return {text || label};
};
/* —— 區塊頭 —— */
const SecHead = ({ title, sub, right }) => (
);
/* —— 頁面標題 —— */
const PageHead = ({ title, sub, actions }) => (
);
Object.assign(window, { Icon, Ring, Donut, Spark, StatCard, StatusBadge, SecHead, PageHead });