// sections.jsx — 首屏之下的「报刊」版式与七个页面 // 版式参考 Dezeen 米兰设计周报:标题上压一道红线、粗黑体红字标题、正文窄栏、 // 大字引言配靛蓝署名、「日期 · 地点。」粗体起句接正文。 // 页面:home / festival / exhibitions / collection / gallery / about / visit,由 app.jsx 按 装配。 const PAGE_ORDER = ['home', 'festival', 'exhibitions', 'collection', 'gallery', 'about', 'visit']; // 倒计时按北京时间算日历天数:把「现在」拨到东八区再取年月日 function daysUntilBeijing(iso) { const bj = new Date(Date.now() + 8 * 3600e3); const today = Date.UTC(bj.getUTCFullYear(), bj.getUTCMonth(), bj.getUTCDate()); const [y, m, d] = iso.split('-').map(Number); return Math.round((Date.UTC(y, m - 1, d) - today) / 86400e3); } const FEST_DATE = '2026-09-20'; // ── 版式零件 ────────────────────────────────────────────── function Folio({ lang, page, right }) { const p = T.pages[lang]; const n = String(PAGE_ORDER.indexOf(page) + 1).padStart(2, '0'); return (
{n} / {p[page]} {right || location.host}
); } function EdHead({ label, title, lede }) { return (
{label &&
{label}
}

{rich(title)}

{lede &&

{lede}

}
); } function Pull({ q, by }) { return (

{q}

{by && {by}}
); } function Fig({ src, alt, cap, ratio, className }) { return (
{alt {cap &&
{cap}
}
); } function RunIn({ lead, children }) { return

{lead} {children}

; } function Countdown({ days, t, big }) { if (days > 0) return <>{days}{t.days}; return {days === 0 ? t.today : t.past}; } // ── 首页第二格:920 倒计时 ────────────────────────────── // 红底通栏。左:365 刻度的年轮表盘,9·20 在正上方,从「今天」到 9·20 之间的刻度点亮; // 右:届次、日期、历届、入口。天数按北京时间的日历天算(9/6 → 14 天),与 920 页、头版同一口径; // 不放时分秒——「13 天 23:59」和「14 天」并排会打架。分享走 Web Share,不支持就复制链接。 const FEST_TS = Date.UTC(2026, 8, 20) - 8 * 3600e3; // 2026-09-20 00:00 北京时间 function useCountdown() { const calc = () => { const ms = FEST_TS - Date.now(); const d = Math.floor(ms / 86400e3), r = ms - d * 86400e3; return { ms, d, h: Math.floor(r / 3600e3), m: Math.floor(r % 3600e3 / 60e3), s: Math.floor(r % 60e3 / 1e3) }; }; const [c, setC] = React.useState(calc); React.useEffect(() => { const id = setInterval(() => setC(calc()), 30e3); return () => clearInterval(id); }, []); return c; } function Countdown920({ lang }) { const t = T.count[lang]; const c = useCountdown(); const [msg, setMsg] = React.useState(''); const left = Math.max(0, Math.min(365, Math.ceil(c.ms / 86400e3))); // 表盘按日历天 const step = 360 / 365, R = 250; const ticks = []; for (let k = 0; k < 365; k++) { const lit = k <= left && c.ms > 0; const a = (-90 - k * step) * Math.PI / 180, r2 = lit ? 222 : 238; ticks.push(); } const ta = (-90 - left * step) * Math.PI / 180; const share = async () => { const url = location.origin + '/festival'; if (navigator.share) { try { await navigator.share({ title: t.label, text: t.label + ' · ' + t.date, url }); } catch (e) {} return; } try { await navigator.clipboard.writeText(url); setMsg(t.copied); setTimeout(() => setMsg(''), 1600); } catch (e) {} }; return (
{c.ms > 0 ? <>{left}{t.days} : {c.ms > -86400e3 ? t.today : t.past}}
{t.label}
{t.date}
{t.editions}

{t.line}

{t.more} →
); } // ── 首页:第四格「头版」(920 已由倒计时版承担,这里只留在展与目录) ── function FrontPage({ lang }) { const t = T.front[lang]; const e = T.exh[lang]; return (

{T.about[lang].p1}

{T.about[lang].label} →
{t.onLabel}
{e.items.filter(it => it.status === 'current').map((it, i) => (
{it.img && }

{it.h}

{it.body}
))}
{t.onMore} →
); } // 首页顺序:外观轮播 → 920 倒计时 → 纸本三维舞台 → 头版 function HomePage({ lang, heroMode }) { return ( <> ); } // ── 920 中国帽子节 ─────────────────────────────────────── function FestivalPage({ lang }) { const t = T.fest[lang]; const [days, setDays] = React.useState(() => daysUntilBeijing(FEST_DATE)); React.useEffect(() => { const id = setInterval(() => setDays(daysUntilBeijing(FEST_DATE)), 60e3); return () => clearInterval(id); }, []); return ( <>
{t.kicker}
{t.name}
{t.date}
{t.p1}

{t.p2}

{t.histLabel}
    {t.hist.map(([y, s], i) =>
  • {y}{s}
    • )}
); } // ── 展览:第 25 页那种「条目页」 ───────────────────────────── // 条目按列轮流分配(CSS 多栏会把不可拆的长条目挤成两栏、空出第三栏) function useCols() { const calc = () => window.innerWidth > 1024 ? 3 : window.innerWidth > 640 ? 2 : 1; const [cols, setCols] = React.useState(calc); React.useEffect(() => { const on = () => setCols(calc()); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, []); return cols; } function ExhibitionsPage({ lang }) { const t = T.exh[lang]; const cols = useCols(); return (
{Array.from({ length: cols }, (_, k) => (
{t.items.filter((_, i) => i % cols === k).map((it, i) => (
{it.img && }

{it.h}

{it.body}
))}
))}

{t.note}

); } // ── 典藏 ───────────────────────────────────────────────── function CollectionPage({ lang }) { const t = T.coll[lang]; return (
{t.kicker}

{rich(t.leadTitle)}

{t.leadP}

{t.dtEra}
{t.ddEra}
{t.dtOn}
{t.ddOn}

{t.a1}

{t.a1p}

{t.a2}

{t.a2p}

{t.side}

{/* 三维典藏库:21 件可转动藏品 */}
); } // ── 影像 ───────────────────────────────────────────────── function GalleryPage({ lang }) { const t = T.gallery[lang]; return (
); } // ── 关于 ───────────────────────────────────────────────── function AboutPage({ lang }) { const t = T.about[lang]; return (
{t.dtCity}
{t.metaCity}
{t.dtMember}
{t.metaMember}
{t.dtFounded}
{t.metaFounded}

{t.p1}

{t.p2}

{t.p3}

{t.p4}

); } // ── 参观 ───────────────────────────────────────────────── function VisitPage({ lang }) { const t = T.visit[lang]; return (
{t.dtHours}
{t.seasons.map(s => {s.label}
{s.hours}{s.last})}{t.ddClosed}
{t.phoneLabel}
{t.phone}
{t.bookingLabel}
{t.booking}
{t.dtAddr}
{t.ddAddr}{t.mapSearch}
{t.dtAdm}
{t.ddAdm}
{t.dtMuseum}
{t.ddMuseum}

{t.transportLabel}

{t.transport}

{t.parking}

{t.socialLabel}

{t.socialText}

{t.postcard}

{t.postcardText}

{t.postcardMore} →
); } // ── 方位罗盘 ────────────────────────────────────────────── // 不画任何地图边界(《地图管理条例》要求审图号),只画方向与距离: // 以南通(约 32.0°N 120.9°E)为圆心,按大圆方位角放射,半径取距离的对数。 // 数据由 haversine 算自各城市中心坐标,城市名之外不作任何评述。 const COMPASS_CITIES = [ { zh: '苏州', en: 'Suzhou', km: 81, deg: 201 }, { zh: '上海', en: 'Shanghai', km: 100, deg: 146 }, { zh: '南京', en: 'Nanjing', km: 198, deg: 273 }, { zh: '北京', en: 'Beijing', km: 969, deg: 337 }, { zh: '东京', en: 'Tokyo', km: 1778, deg: 72 }, { zh: '米兰', en: 'Milan', km: 9000, deg: 319 }, { zh: '伦敦', en: 'London', km: 9097, deg: 327 }, { zh: '巴黎', en: 'Paris', km: 9163, deg: 324 }, { zh: '纽约', en: 'New York', km: 11788, deg: 12 }, { zh: '蒙特克里斯蒂', en: 'Montecristi', km: 15900, deg: 38 } ]; const CX = 500, CY = 500, R0 = 92, R1 = 420, LOG0 = Math.log10(60), LOG1 = Math.log10(20000); const rOf = km => R0 + (Math.log10(km) - LOG0) / (LOG1 - LOG0) * (R1 - R0); const pt = (deg, r) => { const a = (deg - 90) * Math.PI / 180; return [CX + r * Math.cos(a), CY + r * Math.sin(a)]; }; const fmtKm = km => km.toLocaleString('en-US'); function Compass({ lang, t }) { // 相邻方位太近的编号往外错开一档,免得叠字 const sorted = COMPASS_CITIES.map((c, i) => ({ ...c, i })).sort((a, b) => a.deg - b.deg); const lab = {}; let prevDeg = -99, prevR = 0, step = 0; sorted.forEach(c => { const r = rOf(c.km); step = (c.deg - prevDeg < 9 && Math.abs(r - prevR) < 40) ? step + 1 : 0; lab[c.i] = r + 30 + step * 30; prevDeg = c.deg; prevR = r; }); const ticks = []; for (let d = 0; d < 360; d += 5) { const big = d % 90 === 0, mid = d % 30 === 0; const [x1, y1] = pt(d, R1 + 8), [x2, y2] = pt(d, R1 + (big ? 30 : mid ? 20 : 12)); ticks.push(); } const rings = [100, 1000, 10000]; return (
{t.compassHead}
    {COMPASS_CITIES.map((c, i) => (
  1. {String(i + 1).padStart(2, '0')} {lang === 'zh' ? c.zh : c.en}{lang === 'zh' ? c.en : c.zh} {fmtKm(c.km)} km {c.deg}°
    2. ))}
{t.compassNote} · 31.98° N 120.89° E
); } // ── 页脚 ───────────────────────────────────────────────── function Footer({ lang }) { const t = T.footer[lang]; return ( ); } Object.assign(window, { HomePage, FrontPage, Countdown920, FestivalPage, ExhibitionsPage, CollectionPage, GalleryPage, AboutPage, VisitPage, Footer, Compass, Folio, EdHead, Pull, Fig, RunIn, daysUntilBeijing });