add journal-date

miniprogram/components/calendar/index.ts

@@ -0,0 +1,210 @@
+// components/calendar/index.ts
+
+interface DayInfo {
+	date: string; // YYYY-MM-DD
+	year: number;
+	month: number;
+	day: number;
+	isCurrentMonth: boolean;
+	hasJournal: boolean;
+	isToday: boolean;
+}
+
+interface MonthInfo {
+	year: number;
+	month: number;
+	days: DayInfo[];
+}
+
+interface CalendarData {
+	currentYear: number;
+	months: MonthInfo[];
+	scrollIntoView: string; // 滚动到的元素 id
+}
+
+Component({
+	properties: {
+		// 日记数据，key 为日期 YYYY-MM-DD，value 为日记 id 数组
+		journalMap: {
+			type: Object,
+			value: {}
+		}
+	},
+
+	data: <CalendarData>{
+		currentYear: 0,
+		months: [],
+		scrollIntoView: ''
+	},
+
+	lifetimes: {
+		attached() {
+			this.initCalendar();
+		}
+	},
+
+	observers: {
+		'journalMap.**'(journalMap: Record<string, number[]>) {
+			// 日记数据更新时重新生成所有月份的日期
+			if (this.data.months.length > 0) {
+				this.updateAllMonthsDays(journalMap);
+			}
+		}
+	},
+
+	methods: {
+		/** 初始化日历 */
+		initCalendar() {
+			const now = new Date();
+			const currentYear = now.getFullYear();
+			const currentMonth = now.getMonth() + 1;
+
+			this.setData({
+				currentYear,
+				months: this.generateYearMonths(currentYear)
+			});
+
+			// 滚动到当前月份
+			this.scrollToMonth(currentMonth);
+		},
+
+		/** 生成指定年份的 12 个月 */
+		generateYearMonths(year: number): MonthInfo[] {
+			const months: MonthInfo[] = [];
+			const today = new Date();
+			const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+			for (let month = 1; month <= 12; month++) {
+				months.push({
+					year,
+					month,
+					days: this.generateDaysForMonth(year, month, this.data.journalMap || {}, todayStr)
+				});
+			}
+
+			return months;
+		},
+
+		/** 更新所有月份的日期数据 */
+		updateAllMonthsDays(journalMap: Record<string, number[]>) {
+			const { months } = this.data;
+			const today = new Date();
+			const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+			const updatedMonths = months.map(monthInfo => ({
+				...monthInfo,
+				days: this.generateDaysForMonth(monthInfo.year, monthInfo.month, journalMap, todayStr)
+			}));
+
+			this.setData({ months: updatedMonths });
+		},
+
+		/** 生成指定月份的日期数据 */
+		generateDaysForMonth(year: number, month: number, journalMap: Record<string, number[]>, todayStr: string): DayInfo[] {
+			const days: DayInfo[] = [];
+			// 当前月第一天
+			const firstDay = new Date(year, month - 1, 1);
+			const firstDayWeek = firstDay.getDay();
+
+			// 当前月最后一天
+			const lastDay = new Date(year, month, 0);
+			const lastDate = lastDay.getDate();
+
+			// 上个月需要显示的日期
+			const prevMonthLastDay = new Date(year, month - 1, 0);
+			const prevMonthLastDate = prevMonthLastDay.getDate();
+			for (let i = firstDayWeek - 1; i >= 0; i--) {
+				const day = prevMonthLastDate - i;
+				const prevMonth = month === 1 ? 12 : month - 1;
+				const prevYear = month === 1 ? year - 1 : year;
+				const dateKey = `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+				days.push({
+					date: dateKey,
+					year: prevYear,
+					month: prevMonth,
+					day,
+					isCurrentMonth: false,
+					hasJournal: !!journalMap[dateKey],
+					isToday: dateKey === todayStr
+				});
+			}
+
+			// 当前月的日期
+			for (let day = 1; day <= lastDate; day++) {
+				const dateKey = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+				days.push({
+					date: dateKey,
+					year,
+					month,
+					day,
+					isCurrentMonth: true,
+					hasJournal: !!journalMap[dateKey],
+					isToday: dateKey === todayStr
+				});
+			}
+
+			// 下个月需要显示的日期（补齐到 42 个格子，6 行）
+			const remainingDays = 42 - days.length;
+			for (let day = 1; day <= remainingDays; day++) {
+				const nextMonth = month === 12 ? 1 : month + 1;
+				const nextYear = month === 12 ? year + 1 : year;
+				const dateKey = `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+				days.push({
+					date: dateKey,
+					year: nextYear,
+					month: nextMonth,
+					day,
+					isCurrentMonth: false,
+					hasJournal: !!journalMap[dateKey],
+					isToday: dateKey === todayStr
+				});
+			}
+
+			return days;
+		},
+
+		/** 切换年份 */
+		changeYear(delta: number) {
+			const newYear = this.data.currentYear + delta;
+			this.setData({
+				currentYear: newYear,
+				months: this.generateYearMonths(newYear)
+			});
+
+			// 滚动到第一个月
+			this.scrollToMonth(1);
+		},
+
+		/** 上一年 */
+		prevYear() {
+			this.changeYear(-1);
+		},
+
+		/** 下一年 */
+		nextYear() {
+			this.changeYear(1);
+		},
+
+		/** 滚动到指定月份 */
+		scrollToMonth(month: number) {
+			// 先清空，然后设置，触发滚动
+			this.setData({ scrollIntoView: '' });
+			wx.nextTick(() => {
+				this.setData({ scrollIntoView: `month-${month}` });
+			});
+		},
+
+		/** 点击日期 */
+		onDayTap(e: WechatMiniprogram.BaseEvent) {
+			const { date, year, month, day } = e.currentTarget.dataset;
+
+			// 触发自定义事件，传递选中的日期信息
+			this.triggerEvent('dateselect', {
+				date,
+				year,
+				month,
+				day
+			});
+		}
+	}
+});