add journal-date

miniprogram/components/calendar/index.json

@@ -0,0 +1,6 @@
+{
+	"component": true,
+	"usingComponents": {
+		"t-icon": "tdesign-miniprogram/icon/icon"
+	}
+}

miniprogram/components/calendar/index.less

@@ -0,0 +1,114 @@
+/* components/calendar/index.less */
+.calendar {
+	flex: 1;
+	height: 100%;
+	display: flex;
+	padding: 32rpx;
+	overflow: hidden;
+	flex-direction: column;
+
+	.year {
+		display: flex;
+		padding: 16rpx 0;
+		align-items: center;
+		margin-bottom: 24rpx;
+		justify-content: space-between;
+
+		.btn {
+			width: 64rpx;
+			height: 64rpx;
+			display: flex;
+			background: var(--theme-bg-card);
+			align-items: center;
+			border-radius: 12rpx;
+			justify-content: center;
+
+			&:active {
+				opacity: .7;
+			}
+		}
+
+		.text {
+			color: var(--theme-text);
+			font-size: 32rpx;
+			font-weight: 600;
+		}
+	}
+
+	.weekdays {
+		display: grid;
+		margin-bottom: 16rpx;
+		grid-template-columns: repeat(7, 1fr);
+
+		.weekday {
+			color: var(--theme-text-secondary);
+			padding: 16rpx 0;
+			font-size: 24rpx;
+			text-align: center;
+		}
+	}
+
+	.months {
+		flex: 1;
+		height: 0;
+		padding-bottom: 256rpx;
+
+		.month {
+			margin-bottom: 48rpx;
+
+			.title {
+				color: var(--theme-text);
+				padding: 16rpx 0;
+				font-size: 28rpx;
+				font-weight: 600;
+				margin-bottom: 16rpx;
+			}
+
+			.days {
+				display: grid;
+				grid-gap: 8rpx;
+				grid-template-columns: repeat(7, 1fr);
+
+				.day {
+					display: flex;
+					position: relative;
+					align-items: center;
+					aspect-ratio: 1;
+					border-radius: 12rpx;
+					flex-direction: column;
+					justify-content: center;
+					background: var(--theme-bg-card);
+
+					.number {
+						color: var(--theme-text);
+						font-size: 28rpx;
+					}
+
+					.dot {
+						width: 8rpx;
+						height: 8rpx;
+						border-radius: 50%;
+						background: var(--theme-primary);
+					}
+
+					&.other-month {
+						opacity: .4;
+					}
+
+					&.has-journal {
+						background: var(--theme-bg-journal);
+
+						.day-number {
+							color: var(--theme-wx);
+							font-weight: bold;
+						}
+
+						&:active {
+							opacity: .7;
+						}
+					}
+				}
+			}
+		}
+	}
+}

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
+			});
+		}
+	}
+});

miniprogram/components/calendar/index.wxml

@@ -0,0 +1,46 @@
+<!-- components/calendar/index.wxml -->
+<view class="calendar">
+	<!-- 年份切换器 -->
+	<view class="year">
+		<t-icon class="btn" name="chevron-left" size="40rpx" catchtap="prevYear" />
+		<text class="text">{{currentYear}} 年</text>
+		<t-icon class="btn" name="chevron-right" size="40rpx" catchtap="nextYear" />
+	</view>
+
+	<!-- 星期标题 -->
+	<view class="weekdays">
+		<view class="weekday">日</view>
+		<view class="weekday">一</view>
+		<view class="weekday">二</view>
+		<view class="weekday">三</view>
+		<view class="weekday">四</view>
+		<view class="weekday">五</view>
+		<view class="weekday">六</view>
+	</view>
+
+	<!-- 月份列表 -->
+	<scroll-view class="months" scroll-y enhanced show-scrollbar="{{false}}" scroll-into-view="{{scrollIntoView}}" scroll-with-animation>
+		<block wx:for="{{months}}" wx:key="month">
+			<view class="month" id="month-{{item.month}}">
+				<!-- 月份标题 -->
+				<view class="title">{{item.month}} 月</view>
+				<!-- 日期网格 -->
+				<view class="days">
+					<block wx:for="{{item.days}}" wx:key="date" wx:for-item="day">
+						<view
+							class="day {{day.isCurrentMonth ? '' : 'other-month'}} {{day.hasJournal ? 'has-journal' : ''}} {{day.isToday ? 'today' : ''}}"
+							catchtap="onDayTap"
+							data-date="{{day.date}}"
+							data-year="{{day.year}}"
+							data-month="{{day.month}}"
+							data-day="{{day.day}}"
+						>
+							<view class="number">{{day.day}}</view>
+							<view wx:if="{{day.hasJournal}}" class="dot"></view>
+						</view>
+					</block>
+				</view>
+			</view>
+		</block>
+	</scroll-view>
+</view>