/* pages-gallery.jsx — 活动相册 · 时间线版 结构：深色页头（总数）→ 吸顶年份索引（换行排布，手机上全部可见）→ 按年份分组的竖向时间线 每场：日期 / 标题 / 地点 / 人数 / 说明 + 照片拼贴，点开进入全屏灯箱 */ function galParseDate(s) { const m = /(\d{4})年(\d{1,2})月(\d{1,2})/.exec(s || ''); return m ? Number(m[1]) * 10000 + Number(m[2]) * 100 + Number(m[3]) : 0; } function galShortDate(s) { /* "2019年5月3~5日" → { md: "5.03—05", y: 2019 } */ const m = /(\d{4})年(\d{1,2})月(\d{1,2})(?:[~～-](\d{1,2}))?日?/.exec(s || ''); if (!m) return { md: s || '', y: '' }; const p = (n) => String(n).padStart(2, '0'); return { y: m[1], md: m[2] + '.' + p(m[3]) + (m[4] ? '—' + p(m[4]) : '') }; } function GalleryStyles() { return ; } function GalleryTimeline({ id }) { const events = React.useMemo( () => (QD.events || []).slice().sort((a, b) => galParseDate(b.date || b.dateText) - galParseDate(a.date || a.dateText)), [] ); const years = React.useMemo(() => { const m = new Map(); events.forEach((e) => { const y = String(e.year || galShortDate(e.date).y); if (!m.has(y)) m.set(y, []); m.get(y).push(e); }); return [...m.entries()]; }, [events]); const totals = React.useMemo(() => ({ n: events.length, people: events.reduce((a, e) => a + (e.people || 0), 0), shown: events.reduce((a, e) => a + photoList(e).length, 0), orig: events.reduce((a, e) => a + (e.total || e.photos || 0), 0), }), [events]); const [curYear, setCurYear] = React.useState(years[0] ? years[0][0] : ''); const [lb, setLb] = React.useState(null); // { ev, i } /* 滚动时高亮当前年份 */ React.useEffect(() => { const els = [...document.querySelectorAll('.gt-year')]; if (!els.length || !('IntersectionObserver' in window)) return; const io = new IntersectionObserver((es) => { const vis = es.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); if (vis[0]) setCurYear(vis[0].target.getAttribute('data-year')); }, { rootMargin: '-160px 0px -55% 0px', threshold: 0 }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, [years]); const scrollToEl = (el) => { if (!el) return; const rail = document.querySelector('.gt-rail'); const off = rail ? Math.max(rail.getBoundingClientRect().bottom, 0) + 14 : 140; const top = el.getBoundingClientRect().top + window.scrollY - off; window.scrollTo({ top, behavior: 'smooth' }); }; const jumpYear = (y) => { setCurYear(y); scrollToEl(document.querySelector('.gt-year[data-year="' + y + '"]')); }; /* 从活动详情「看相册」跳过来时，定位到那一场 */ React.useEffect(() => { if (!id) return; const t = setTimeout(() => scrollToEl(document.getElementById('gt-' + id)), 120); return () => clearTimeout(t); }, [id]); const step = React.useCallback((d) => { setLb((s) => { if (!s) return s; const n = photoList(s.ev).length; return { ev: s.ev, i: (s.i + d + n) % n }; }); }, []); const close = React.useCallback(() => setLb(null), []); const kindCls = (k) => (k === '二阶段' ? 'l2' : (k === '特别场' ? 'sp' : '')); const go = window.__go; return ( <>
活动相册 · {years.length ? years[years.length - 1][0] : ''}—{years.length ? years[0][0] : ''}

每一场课，都有人在现场。

按时间从近到远排列。每场保留了代表性的现场照片，点开任意一张可以全屏翻看。

{totals.n}场课程与活动
{totals.people}人次参与
{years.length}个年份
{totals.orig}+张原站现场照片
{years.map(([y, list]) => (
{y}{list.length} 场 · {list.reduce((a, e) => a + (e.people || 0), 0)} 人次
{list.map((ev) => { const photos = photoList(ev); const d = galShortDate(ev.date || ev.dateText); const maxShow = 7; const shown = photos.slice(0, maxShow); const rest = photos.length - shown.length; return (
= 70 ? ' big' : '')}>
{d.md} {ev.kind}

{ev.title}

{ev.city}{ev.place ? ' · ' + ev.place : ''} {ev.people ? {ev.people} 人 : null}
{ev.note ?

{ev.note}

: null} {shown.length > 0 && (
{shown.map((src, k) => ( ))}
)}
本站选取 {photos.length} 张{(ev.total || 0) > photos.length ? ` · 原站此场共 ${ev.total} 张` : ''} {photos.length > 0 && } {go && }
); })}
))}
{lb && } ); } Object.assign(window, { GalleryTimeline, GalleryStyles });