/* global React, ReactDOM */ // ============================================================ // PandaKit · Main app shell // ============================================================ const { useState: aUseState, useEffect: aUseEffect, useMemo: aUseMemo, useRef: aUseRef } = React; function TopNav({ section, setSection, onOpenShowcase }) { const { t, lang, setLang } = useI18n(); const items = [ { value: "quick", label: t("nav.quick") }, { value: "col", label: t("nav.collection") }, { value: "story", label: t("nav.story") }, ]; // 在 PandaKit 文字上 triple-click 进 showcase（之前在齿轮上，现在齿轮已删） const clickRef = aUseRef({ count: 0, timer: null }); const onLogoClick = (e) => { e.preventDefault(); setSection("quick"); clickRef.current.count += 1; clearTimeout(clickRef.current.timer); clickRef.current.timer = setTimeout(() => { if (clickRef.current.count >= 3) onOpenShowcase(); clickRef.current.count = 0; }, 600); }; return (

{/* lang 切换：单 button "中/EN"，desktop / mobile 都用同一个，CSS 缩 mobile 尺寸 */}

); } function Footer() { const { lang } = useI18n(); return ( ); } // URL ↔ section 映射（支持 /collection /story 路径） const PATH_TO_SECTION = { '/': 'quick', '/quick': 'quick', '/collection': 'col', '/story': 'story' }; const SECTION_TO_PATH = { quick: '/', col: '/collection', story: '/story' }; function readSectionFromURL() { if (typeof window === 'undefined') return 'quick'; // normalize trailing slash（CF Pages 偶尔 add 或 remove trailing /） let path = window.location.pathname || '/'; if (path.length > 1 && path.endsWith('/')) path = path.slice(0, -1); // 兼容 hash routing：#/collection let hash = (window.location.hash || '').replace(/^#/, ''); if (hash.length > 1 && hash.endsWith('/')) hash = hash.slice(0, -1); return PATH_TO_SECTION[hash] || PATH_TO_SECTION[path] || 'quick'; } function App() { const [section, setSectionInternal] = aUseState(() => readSectionFromURL()); const [prevSection, setPrev] = aUseState(() => readSectionFromURL()); const [showcase, setShowcase] = aUseState(false); // popstate 同步（浏览器前进后退按钮） aUseEffect(() => { const onPop = () => setSectionInternal(readSectionFromURL()); window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); // Persisted favorites — keyed by trait JSON // Schema check：旧 fav key 是 trait JSON（含 face/pose），新 key 是 shellId|faceId|... 形式 const [favs, setFavs] = aUseState(() => { try { const m = JSON.parse(localStorage.getItem("pk-favs") || "{}"); // 旧 schema 检测：value.traits 不含 shellId → 整体清掉 const hasOldSchema = Object.values(m).some((v) => v?.traits && !v.traits.shellId); if (hasOldSchema) { localStorage.removeItem("pk-favs"); return {}; } return m; } catch { return {}; } }); aUseEffect(() => { try { localStorage.setItem("pk-favs", JSON.stringify(favs)); } catch {} }, [favs]); // Collection — 默认空（用户：合集应该让用户自己加载，不预填模板） const [collection, setCollection] = aUseState(() => { try { const stored = localStorage.getItem("pk-collection"); if (stored) { const parsed = JSON.parse(stored); if (Array.isArray(parsed) && parsed.every((it) => it?.traits?.shellId)) { return parsed; } localStorage.removeItem("pk-collection"); } } catch {} return []; }); aUseEffect(() => { try { localStorage.setItem("pk-collection", JSON.stringify(collection)); } catch {} }, [collection]); const order = ["quick", "col", "story"]; const setSection = (next) => { setPrev(section); setSectionInternal(next); // 同步 URL（pushState 不重载） const path = SECTION_TO_PATH[next] || '/'; if (typeof window !== 'undefined' && window.location.pathname !== path) { try { window.history.pushState({}, '', path); } catch {} } }; const direction = order.indexOf(section) >= order.indexOf(prevSection) ? "right" : "left"; const pushToCollection = (item) => { setCollection((c) => { if (c.some((x) => x.id === item.id)) return c; const next = [ { id: item.id, traits: item.traits, caption: item.traits?.text || (new Date()).toLocaleDateString("zh-CN"), tilt: ((Math.random() * 8) - 4), }, ...c, ]; return next; }); }; const sectionEl = aUseMemo(() => { if (section === "quick") return ; if (section === "col") return ; if (section === "story") return ; return null; }, [section, favs, collection]); return ( ); } // Inner — needs to live inside providers to use hooks function Inner({ section, setSection, showcase, setShowcase, direction, sectionEl }) { const { t } = useI18n(); const kbd = section === "quick" ? [ { k: "R", label: t("kbd.r") }, { k: "C", label: t("kbd.c") }, { k: "D", label: t("kbd.d") }, // F 收藏已删（用户要求） ] : []; return (

setShowcase(true)} />

{sectionEl}

); } // 板块底部跳转：上一节 / 下一节，方便顺序浏览 function SectionFooterNav({ current, setSection }) { const { lang } = useI18n(); const order = ["quick", "col", "story"]; const labels = { quick: lang === "zh" ? "快速生图" : "Quick", col: lang === "zh" ? "我的合集" : "Collection", story: lang === "zh" ? "故事" : "Story", }; const idx = order.indexOf(current); if (idx === -1) return null; const prev = idx > 0 ? order[idx - 1] : null; const next = idx < order.length - 1 ? order[idx + 1] : null; return (

{prev ? ( ) :

} {next ? ( ) :

}

); } // ----- Mount ----- ReactDOM.createRoot(document.getElementById("root")).render();