223 lines
13 KiB
TypeScript
223 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { CSSProperties, useMemo, useState } from "react";
|
||
import calendarData from "../data/seasonal-calendar.json";
|
||
import styles from "./SeasonalCalendar.module.css";
|
||
|
||
type CategoryId = "fruit" | "seafood" | "activity";
|
||
type Category = { id: CategoryId; name: string; icon: string; color: string; soft: string };
|
||
type CalendarEvent = {
|
||
id: string;
|
||
title: string;
|
||
category: CategoryId;
|
||
start: string;
|
||
end: string;
|
||
region: string;
|
||
bestTime: string;
|
||
summary: string;
|
||
tips: string;
|
||
};
|
||
type CalendarDay = { date: Date; key: string; inMonth: boolean };
|
||
|
||
const categories = calendarData.categories as Category[];
|
||
const events = calendarData.events as CalendarEvent[];
|
||
const eventPalette: Record<string, { color: string; soft: string }> = {
|
||
"fruit-peach": { color: "#df6548", soft: "#fff0e9" },
|
||
"fruit-grape": { color: "#9a6a31", soft: "#fbf1df" },
|
||
"fruit-fig": { color: "#a75278", soft: "#faedf3" },
|
||
"fruit-pear": { color: "#799536", soft: "#f0f6df" },
|
||
"seafood-crab": { color: "#267aa5", soft: "#e8f5fb" },
|
||
"seafood-urchin": { color: "#4f68b8", soft: "#edf1ff" },
|
||
"seafood-bass": { color: "#278b83", soft: "#e8f7f4" },
|
||
"seafood-shrimp": { color: "#46799c", soft: "#eaf3f8" },
|
||
"activity-buy": { color: "#6c57c8", soft: "#f0edff" },
|
||
"activity-menu": { color: "#a151b5", soft: "#f8ecfb" },
|
||
};
|
||
const eventImages: Record<string, string> = {
|
||
"fruit-peach": "/seasonal/honey-peach-pixel.png",
|
||
};
|
||
|
||
export default function SeasonalCalendarPage() {
|
||
const initial = parseDate(calendarData.defaultDate);
|
||
const [month, setMonth] = useState(() => new Date(initial.getFullYear(), initial.getMonth(), 1));
|
||
const [selectedDate, setSelectedDate] = useState(calendarData.defaultDate);
|
||
const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
|
||
const [enabledCategories, setEnabledCategories] = useState<Set<CategoryId>>(() => new Set(categories.map((item) => item.id)));
|
||
|
||
const days = useMemo(() => makeCalendarDays(month), [month]);
|
||
const visibleEvents = useMemo(() => events.filter((event) => enabledCategories.has(event.category)), [enabledCategories]);
|
||
const selectedEvents = useMemo(() => visibleEvents.filter((event) => event.start <= selectedDate && event.end >= selectedDate), [selectedDate, visibleEvents]);
|
||
const selectedEvent = selectedEventId ? events.find((event) => event.id === selectedEventId) ?? null : null;
|
||
const monthEvents = useMemo(() => {
|
||
const first = formatDate(new Date(month.getFullYear(), month.getMonth(), 1));
|
||
const last = formatDate(new Date(month.getFullYear(), month.getMonth() + 1, 0));
|
||
return visibleEvents.filter((event) => event.start <= last && event.end >= first);
|
||
}, [month, visibleEvents]);
|
||
|
||
const changeMonth = (offset: number) => {
|
||
const next = new Date(month.getFullYear(), month.getMonth() + offset, 1);
|
||
setMonth(next);
|
||
setSelectedDate(formatDate(next));
|
||
};
|
||
|
||
const selectDay = (day: CalendarDay) => {
|
||
setSelectedDate(day.key);
|
||
if (!day.inMonth) setMonth(new Date(day.date.getFullYear(), day.date.getMonth(), 1));
|
||
};
|
||
|
||
const toggleCategory = (id: CategoryId) => setEnabledCategories((current) => {
|
||
const next = new Set(current);
|
||
if (next.has(id)) {
|
||
next.delete(id);
|
||
if (selectedEvent?.category === id) setSelectedEventId(null);
|
||
} else next.add(id);
|
||
return next;
|
||
});
|
||
|
||
const goToday = () => {
|
||
const today = new Date();
|
||
setMonth(new Date(today.getFullYear(), today.getMonth(), 1));
|
||
setSelectedDate(formatDate(today));
|
||
};
|
||
|
||
return (
|
||
<div className={styles.page}>
|
||
<header className={styles.topbar}>
|
||
<Link href="/" className={styles.brand}><span>历</span><div><strong>Seasonal Calendar</strong><small>WBBR STYLE TEMPLATE</small></div></Link>
|
||
<nav><Link href="/">模板主页</Link><a href="#calendar">日历视图</a><a href="#season-list">时令清单</a></nav>
|
||
<div className={styles.topStatus}><i />本地 JSON 演示</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section className={styles.hero}>
|
||
<div>
|
||
<p>SEASONAL SCHEDULE</p>
|
||
<h1>{calendarData.title}</h1>
|
||
<span>{calendarData.subtitle}。选择任意日期，即可查看当天正在进行的全部事项。</span>
|
||
</div>
|
||
<div className={styles.heroStats}>
|
||
<article><small>本月事项</small><strong>{monthEvents.length}</strong><span>跨日期事件</span></article>
|
||
<article><small>选中日期</small><strong>{selectedEvents.length}</strong><span>当天有效事项</span></article>
|
||
<article><small>数据分类</small><strong>{enabledCategories.size}</strong><span>当前显示分类</span></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section className={styles.workspace} id="calendar">
|
||
<div className={styles.calendarPanel}>
|
||
<div className={styles.calendarToolbar}>
|
||
<div className={styles.monthControl}>
|
||
<button onClick={() => changeMonth(-1)} aria-label="上个月">‹</button>
|
||
<div><strong>{month.getFullYear()}年 {month.getMonth() + 1}月</strong><small>{month.toLocaleDateString("zh-CN", { month: "long", year: "numeric" })}</small></div>
|
||
<button onClick={() => changeMonth(1)} aria-label="下个月">›</button>
|
||
<button className={styles.todayButton} onClick={goToday}>今天</button>
|
||
</div>
|
||
<div className={styles.categoryFilters}>
|
||
{categories.map((category) => <button key={category.id} className={enabledCategories.has(category.id) ? styles.filterActive : ""} onClick={() => toggleCategory(category.id)} style={{ "--category": category.color, "--category-soft": category.soft } as CSSProperties}><i />{category.name}<b>{events.filter((event) => event.category === category.id).length}</b></button>)}
|
||
</div>
|
||
</div>
|
||
|
||
{selectedEvent && <div className={styles.highlightNotice} style={eventStyle(selectedEvent)}>
|
||
<i />
|
||
<div><small>正在突出显示</small><strong>{selectedEvent.title}</strong><span>{shortDate(selectedEvent.start)} — {shortDate(selectedEvent.end)}，覆盖日期已统一着色</span></div>
|
||
<button onClick={() => setSelectedEventId(null)}>清除突出 ×</button>
|
||
</div>}
|
||
|
||
<div className={styles.weekHeader}>{["周一", "周二", "周三", "周四", "周五", "周六", "周日"].map((day) => <span key={day}>{day}</span>)}</div>
|
||
<div className={styles.calendarGrid}>
|
||
{days.map((day) => {
|
||
const dayEvents = visibleEvents.filter((event) => event.start <= day.key && event.end >= day.key);
|
||
const isToday = day.key === formatDate(new Date());
|
||
const isEventRange = Boolean(selectedEvent && selectedEvent.start <= day.key && selectedEvent.end >= day.key);
|
||
return <div key={day.key} className={`${styles.dayCell} ${day.inMonth ? "" : styles.outsideMonth} ${selectedDate === day.key ? styles.selectedDay : ""} ${isEventRange ? styles.eventRangeDay : ""} ${isEventRange && selectedDate === day.key ? styles.selectedRangeDay : ""}`} onClick={() => selectDay(day)} style={isEventRange && selectedEvent ? eventStyle(selectedEvent) : undefined}>
|
||
<button className={`${styles.dayNumber} ${isToday ? styles.today : ""}`} onClick={(clickEvent) => { clickEvent.stopPropagation(); selectDay(day); }} aria-label={`${day.key}，${dayEvents.length}项事件`}>{day.date.getDate()}</button>
|
||
<div className={styles.dayEvents}>
|
||
{dayEvents.slice(0, 3).map((event) => {
|
||
return <button type="button" key={event.id} className={`${event.start < day.key ? styles.continuesBefore : ""} ${event.end > day.key ? styles.continuesAfter : ""} ${selectedEventId === event.id ? styles.activeEventBar : ""}`} style={eventStyle(event)} onClick={(clickEvent) => { clickEvent.stopPropagation(); setSelectedDate(day.key); setSelectedEventId(event.id); }}>{event.title}</button>;
|
||
})}
|
||
{dayEvents.length > 3 && <b>还有 {dayEvents.length - 3} 项</b>}
|
||
</div>
|
||
</div>;
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<aside className={styles.detailPanel}>
|
||
<header><div><small>SELECTED DATE</small><h2>{formatChineseDate(selectedDate)}</h2><span>{weekdayName(selectedDate)} · {selectedEvents.length} 项正在进行</span></div><b>{selectedDate.slice(8)}</b></header>
|
||
<div className={styles.detailList}>
|
||
{selectedEvents.map((event) => {
|
||
const category = categories.find((item) => item.id === event.category)!;
|
||
return <article key={event.id} className={selectedEventId === event.id ? styles.activeEventCard : ""} style={eventStyle(event)} role="button" tabIndex={0} onClick={() => setSelectedEventId(event.id)} onKeyDown={(keyEvent) => { if (keyEvent.key === "Enter" || keyEvent.key === " ") setSelectedEventId(event.id); }}>
|
||
{eventImages[event.id] && <img className={styles.eventImage} src={eventImages[event.id]} alt={`${event.title}像素插图`} />}
|
||
<div className={styles.eventHead}><span>{category.icon}</span><div><small>{category.name} · {event.region}</small><h3>{event.title}</h3></div></div>
|
||
<p>{event.summary}</p>
|
||
<dl><div><dt>持续时间</dt><dd>{shortDate(event.start)} — {shortDate(event.end)}</dd></div><div><dt>推荐时间</dt><dd>{event.bestTime}</dd></div></dl>
|
||
<footer><span>提示</span>{event.tips}</footer>
|
||
</article>;
|
||
})}
|
||
{selectedEvents.length === 0 && <div className={styles.emptyDay}><span>○</span><h3>这一天暂无记录</h3><p>可切换分类，或选择带有彩色事项条的日期。</p></div>}
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section className={styles.seasonSection} id="season-list">
|
||
<div className={styles.sectionTitle}><div><p>SEASON OVERVIEW</p><h2>本月时令与事项清单</h2></div><span>共 {monthEvents.length} 项 · 当前筛选结果</span></div>
|
||
<div className={styles.seasonGrid}>
|
||
{monthEvents.map((event) => {
|
||
const category = categories.find((item) => item.id === event.category)!;
|
||
return <button key={event.id} className={selectedEventId === event.id ? styles.activeSeasonEvent : ""} onClick={() => {
|
||
const start = parseDate(event.start);
|
||
const target = start < new Date(month.getFullYear(), month.getMonth(), 1) ? formatDate(new Date(month.getFullYear(), month.getMonth(), 1)) : event.start;
|
||
setSelectedDate(target);
|
||
setSelectedEventId(event.id);
|
||
document.getElementById("calendar")?.scrollIntoView({ behavior: "smooth" });
|
||
}} style={eventStyle(event)}>
|
||
{eventImages[event.id] ? <img className={styles.seasonImage} src={eventImages[event.id]} alt={`${event.title}像素插图`} /> : <span>{category.icon}</span>}<div><small>{category.name} · {event.region}</small><strong>{event.title}</strong><p>{event.summary}</p><time>{shortDate(event.start)} — {shortDate(event.end)}</time></div><b>{selectedEventId === event.id ? "正在突出 ✓" : "突出日期 ↗"}</b>
|
||
</button>;
|
||
})}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function parseDate(value: string) {
|
||
const [year, month, day] = value.split("-").map(Number);
|
||
return new Date(year, month - 1, day);
|
||
}
|
||
|
||
function formatDate(date: Date) {
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
||
}
|
||
|
||
function makeCalendarDays(month: Date): CalendarDay[] {
|
||
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
||
const mondayOffset = (first.getDay() + 6) % 7;
|
||
const start = new Date(first.getFullYear(), first.getMonth(), 1 - mondayOffset);
|
||
return Array.from({ length: 42 }, (_, index) => {
|
||
const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);
|
||
return { date, key: formatDate(date), inMonth: date.getMonth() === month.getMonth() };
|
||
});
|
||
}
|
||
|
||
function formatChineseDate(value: string) {
|
||
const date = parseDate(value);
|
||
return `${date.getMonth() + 1}月${date.getDate()}日`;
|
||
}
|
||
|
||
function weekdayName(value: string) {
|
||
return ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][parseDate(value).getDay()];
|
||
}
|
||
|
||
function shortDate(value: string) {
|
||
const [, month, day] = value.split("-");
|
||
return `${Number(month)}月${Number(day)}日`;
|
||
}
|
||
|
||
function eventStyle(event: CalendarEvent) {
|
||
const fallback = categories.find((item) => item.id === event.category)!;
|
||
const palette = eventPalette[event.id] ?? fallback;
|
||
return { "--event-color": palette.color, "--event-soft": palette.soft } as CSSProperties;
|
||
}
|