// ── React components ──────────────────────────────────────────
// All visual building blocks. Exported to window.* so app.jsx
// and any future prototype can reference them without a bundler.
// ─────────────────────────────────────────────────────────────
// ── PhoneFrame ───────────────────────────────────────────────
function PhoneFrame({ children, width = 402, height = 874 }) {
return (
{/* dynamic island */}
{/* status bar */}
9:41
{/* scroll surface */}
{children}
{/* home indicator */}
);
}
// ── collectSlots ──────────────────────────────────────────────
// Flattens a media tree into a sequential list of image/upload slots.
function collectSlots(media, caseId) {
const slots = [];
// Flat array: [{ src, alt, caption }, ...] or ["slot-id", ...]
if (Array.isArray(media) && media.length > 0 && !("before" in media[0]) && !("after" in media[0]) && !("label" in media[0])) {
media.forEach((item, i) => {
if (typeof item === "string") {
slots.push({ id: item, src: null, alt: "", caption: "", phaseLabel: null, side: null });
} else {
slots.push({
id: item.id || `${caseId}-${i}`,
src: item.src || null,
alt: item.alt || "",
caption: item.caption || "",
phaseLabel: null,
side: null,
});
}
});
return slots;
}
const phases = Array.isArray(media)
? media
: [{ label: null, before: media && media.before, after: media && media.after }];
phases.forEach((phase, pi) => {
const push = (item, baseId, side) => {
if (item === null || item === undefined) return;
if (Array.isArray(item)) {
item.forEach((m, k) => push(m, `${baseId}-${k}`, side));
return;
}
if (typeof item === "string") {
slots.push({ id: item, src: null, alt: "", caption: "", phaseLabel: phase.label || null, side });
return;
}
slots.push({
id: item.id || baseId,
src: item.src || null,
alt: item.alt || "",
caption: item.caption || "",
phaseLabel: phase.label || null,
side,
});
};
if (phase.before !== undefined) push(phase.before, `${caseId}-p${pi}-before`, "Before");
if (phase.after !== undefined) push(phase.after, `${caseId}-p${pi}-after`, "After");
});
return slots;
}
// ── Lightbox ──────────────────────────────────────────────────
function Lightbox({ slots, startIdx, onClose }) {
const [idx, setIdx] = React.useState(startIdx);
const total = slots.length;
const slot = slots[idx];
// Pre-populate uploaded images from localStorage for all DropZone slots
const [dzCache, setDzCache] = React.useState(() => {
const cache = {};
slots.forEach(s => {
if (!s.src) {
try { const v = localStorage.getItem("dz-v1:" + s.id); if (v) cache[s.id] = v; } catch {}
}
});
return cache;
});
React.useEffect(() => {
const onDzUpdate = (e) => setDzCache(prev => ({ ...prev, [e.detail.id]: e.detail.src }));
window.addEventListener("dz-update", onDzUpdate);
return () => window.removeEventListener("dz-update", onDzUpdate);
}, []);
// Lock body scroll while open
React.useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = prev; };
}, []);
const prev = React.useCallback(() => setIdx(i => (i - 1 + total) % total), [total]);
const next = React.useCallback(() => setIdx(i => (i + 1) % total), [total]);
React.useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") onClose();
if (e.key === "ArrowLeft") prev();
if (e.key === "ArrowRight") next();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose, prev, next]);
const touchStart = React.useRef(null);
const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
const onTouchEnd = (e) => {
if (touchStart.current === null) return;
const dx = e.changedTouches[0].clientX - touchStart.current;
if (Math.abs(dx) > 40) dx < 0 ? next() : prev();
touchStart.current = null;
};
const effectiveSrc = slot.src || dzCache[slot.id] || null;
const label = [slot.phaseLabel, slot.side, slot.caption].filter(Boolean).join(" · ");
return ReactDOM.createPortal(
{/* Counter */}
{total > 1 && (
{idx + 1} / {total}
)}
{/* Close */}
×
{/* Image / DropZone */}
e.stopPropagation()}
style={{
maxWidth: "88vw", maxHeight: "74vh",
display: "flex", alignItems: "center", justifyContent: "center",
}}
>
{effectiveSrc ? (
) : (
)}
{/* Caption / label */}
{label && (
{label}
)}
{/* Prev / Next arrows */}
{total > 1 && (
<>
{ e.stopPropagation(); prev(); }}
aria-label="上一張"
style={{
all: "unset", cursor: "pointer",
position: "absolute", top: "50%", left: 14,
transform: "translateY(-50%)",
display: "flex", alignItems: "center", justifyContent: "center",
width: 44, height: 44, borderRadius: "50%",
background: "rgba(255,255,255,0.1)",
color: "#fff", fontSize: 18,
}}
>←
{ e.stopPropagation(); next(); }}
aria-label="下一張"
style={{
all: "unset", cursor: "pointer",
position: "absolute", top: "50%", right: 14,
transform: "translateY(-50%)",
display: "flex", alignItems: "center", justifyContent: "center",
width: 44, height: 44, borderRadius: "50%",
background: "rgba(255,255,255,0.1)",
color: "#fff", fontSize: 18,
}}
>→
)}
{/* Left date gutter */}
{/* Right content column */}
{item.title}
{item.brief}
{item.sections.map((sec, i) => (
{sec.heading}
{sec.bullets.map((b, j) => (
{b.label}： {" "}{b.body}
))}
))}
);
}
// ── DropZone ──────────────────────────────────────────────────
// Accepts PNG / JPEG / WebP / AVIF / SVG / PDF (first page).
// Persists upload in localStorage by id.
const DZ_NS = "dz-v1";
async function loadPdfJs() {
if (window.__pdfjs) return window.__pdfjs;
const lib = await import("https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.min.mjs");
lib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs";
window.__pdfjs = lib;
return lib;
}
function DropZone({ id, placeholder, imageStyle, placeholderStyle }) {
const key = DZ_NS + ":" + id;
const [src, setSrc] = React.useState(() => {
try { return localStorage.getItem(key); } catch { return null; }
});
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState(null);
const [over, setOver] = React.useState(false);
const fileRef = React.useRef(null);
const save = (dataUrl) => {
setSrc(dataUrl);
try {
localStorage.setItem(key, dataUrl);
window.dispatchEvent(new CustomEvent("dz-update", { detail: { id, src: dataUrl } }));
} catch { setError("儲存失敗（檔案過大）"); }
};
const clear = (e) => {
e && e.stopPropagation();
setSrc(null); setError(null);
try {
localStorage.removeItem(key);
window.dispatchEvent(new CustomEvent("dz-update", { detail: { id, src: null } }));
} catch {}
};
const ingest = async (file) => {
if (!file) return;
setError(null); setBusy(true);
try {
const name = (file.name || "").toLowerCase();
const type = file.type || "";
if (type === "application/pdf" || name.endsWith(".pdf")) {
const pdfjs = await loadPdfJs();
const buf = await file.arrayBuffer();
const pdf = await pdfjs.getDocument({ data: new Uint8Array(buf) }).promise;
const page = await pdf.getPage(1);
let viewport = page.getViewport({ scale: 1.5 });
const MAX_W = 1400;
if (viewport.width > MAX_W) {
viewport = page.getViewport({ scale: 1.5 * (MAX_W / viewport.width) });
}
const canvas = document.createElement("canvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
save(canvas.toDataURL("image/png"));
} else if (type === "image/svg+xml" || name.endsWith(".svg")) {
const text = await file.text();
save("data:image/svg+xml," + encodeURIComponent(text));
} else if (type.startsWith("image/")) {
const reader = new FileReader();
await new Promise((resolve, reject) => {
reader.onload = () => { save(reader.result); resolve(); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
} else {
setError("不支援的格式");
}
} catch (e) {
setError("處理失敗：" + (e.message || String(e)));
} finally { setBusy(false); }
};
const onDrop = async (e) => {
e.preventDefault();
setOver(false);
const f = e.dataTransfer.files && e.dataTransfer.files[0];
await ingest(f);
};
if (src) {
return (
Remove
);
}
return (
fileRef.current && fileRef.current.click()}
onDragOver={(e) => { e.preventDefault(); setOver(true); }}
onDragLeave={() => setOver(false)}
onDrop={onDrop}
style={{
...placeholderStyle,
cursor: "pointer",
border: over ? "1.5px dashed var(--ink)" : "1px dashed var(--rule-soft)",
background: over ? "var(--slot-2)" : placeholderStyle.background,
display: "flex", flexDirection: "column",
alignItems: "center", justifyContent: "center",
gap: 4, padding: 12, textAlign: "center",
color: "var(--ink-3)",
transition: "background 120ms, border-color 120ms",
}}
>
{busy ? "處理中…" : placeholder}
PNG · JPEG · WebP · SVG · PDF
{error && (
{error}
)}
);
}
// ── MediaThumbnail ────────────────────────────────────────────
function MediaThumbnail({ slot, dzCache, onClick }) {
const src = slot.src || (dzCache && dzCache[slot.id]) || null;
const parts = [slot.phaseLabel, slot.side, slot.caption].filter(Boolean);
const label = parts.join(" · ") || (src ? "圖片" : "—");
return (
{ e.currentTarget.style.background = "var(--slot)"; }}
onMouseLeave={e => { e.currentTarget.style.background = "var(--paper-2)"; }}
>
{/* Micro-thumbnail */}
{src
?
}
{label}
);
}
// ── MediaPair ─────────────────────────────────────────────────
function MediaPair({ media, caseId }) {
const [lightboxIdx, setLightboxIdx] = React.useState(null);
const slots = React.useMemo(() => collectSlots(media, caseId), [caseId]);
const [dzCache, setDzCache] = React.useState(() => {
const cache = {};
slots.forEach(s => {
if (!s.src) {
try { const v = localStorage.getItem("dz-v1:" + s.id); if (v) cache[s.id] = v; } catch {}
}
});
return cache;
});
React.useEffect(() => {
const onDzUpdate = (e) => setDzCache(prev => ({ ...prev, [e.detail.id]: e.detail.src }));
window.addEventListener("dz-update", onDzUpdate);
return () => window.removeEventListener("dz-update", onDzUpdate);
}, []);
if (!slots.length) return null;
return (
{slots.map((slot, i) => (
setLightboxIdx(i)}
/>
))}
{lightboxIdx !== null && (
setLightboxIdx(null)}
/>
)}
);
}
// ── WebShell ──────────────────────────────────────────────────
function WebShell({ children, maxWidth = 720 }) {
return (
);
}
// ── HeroSection ───────────────────────────────────────────────
function HeroSection({ isWeb }) {
return (
顏楷杰
Digital Banking Product Manager
專注開戶旅程優化，在法遵、風控與用戶體驗之間找到成長的平衡點。
);
}
// ── PageBody ──────────────────────────────────────────────────
// items prop: array of case study objects (from data.js)
function PageBody({ items, openId, setOpenId, isWeb }) {
const headerLabelStyle = {
fontFamily: "Hanken Grotesk, sans-serif",
fontSize: 11, letterSpacing: 1.4, textTransform: "uppercase",
color: "var(--ink-3)", fontWeight: 500,
};
return (
{items.map((it, i) => (
setOpenId(openId === it.id ? null : it.id)}
/>
))}
);
}
Object.assign(window, {
PhoneFrame, ToggleIcon, AccordionItem,
DropZone, MediaPair, WebShell, HeroSection, PageBody,
});