mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-16 23:41:21 +08:00
feat: 重构日历组件
This commit is contained in:
@ -1,266 +0,0 @@
|
||||
---
|
||||
import { getFormattedDate } from '@/utils'
|
||||
import type { CollectionEntry } from 'astro:content'
|
||||
|
||||
interface Props {
|
||||
posts: CollectionEntry<'post'>[]
|
||||
currentDate?: Date
|
||||
}
|
||||
|
||||
const { posts, currentDate = new Date() } = Astro.props
|
||||
|
||||
// 将日记按日期分组
|
||||
const postsByDate = new Map()
|
||||
posts.forEach((post) => {
|
||||
const date = getFormattedDate(post.data.date, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
if (!postsByDate.has(date)) {
|
||||
postsByDate.set(date, [])
|
||||
}
|
||||
postsByDate.get(date).push(post)
|
||||
})
|
||||
|
||||
// 获取所有有日记的月份
|
||||
const months = Array.from(postsByDate.keys()).map((date) => {
|
||||
const [year, month] = date.split('-')
|
||||
return `${year}-${month}`
|
||||
})
|
||||
const uniqueMonths = Array.from(new Set(months)).sort().reverse()
|
||||
|
||||
const weekDays = ['一', '二', '三', '四', '五', '六', '日']
|
||||
---
|
||||
|
||||
<div class='mx-auto w-full max-w-4xl'>
|
||||
<div class='mb-4 flex items-center justify-between'>
|
||||
<button
|
||||
id='prevMonth'
|
||||
class='rounded-lg border border-border px-4 py-2 hover:border-green-400/50'
|
||||
>
|
||||
上个月
|
||||
</button>
|
||||
<h2 class='text-xl font-bold' id='currentMonthDisplay'>
|
||||
{currentDate.getFullYear()}年{currentDate.getMonth() + 1}月
|
||||
</h2>
|
||||
<button
|
||||
id='nextMonth'
|
||||
class='rounded-lg border border-border px-4 py-2 hover:border-green-400/50'
|
||||
>
|
||||
下个月
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class='grid grid-cols-7 gap-1' id='calendarGrid'>
|
||||
{weekDays.map((day) => <div class='py-2 text-center font-medium'>{day}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
interface Post {
|
||||
slug: string
|
||||
data: {
|
||||
title: string
|
||||
date: string
|
||||
}
|
||||
}
|
||||
|
||||
interface DateTimeFormatOptions {
|
||||
year?: 'numeric' | '2-digit'
|
||||
month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
|
||||
day?: 'numeric' | '2-digit'
|
||||
}
|
||||
|
||||
function initCalendar() {
|
||||
const allPosts = JSON.parse(
|
||||
document.getElementById('posts-data')?.textContent || '[]'
|
||||
) as Post[]
|
||||
const currentMonthDisplay = document.getElementById('currentMonthDisplay')
|
||||
const prevMonthBtn = document.getElementById('prevMonth')
|
||||
const nextMonthBtn = document.getElementById('nextMonth')
|
||||
const calendarGrid = document.getElementById('calendarGrid')
|
||||
|
||||
// 使用传入的 currentDate 作为初始日期
|
||||
let currentDate = new Date(
|
||||
document.querySelector('[data-current-date]')?.getAttribute('data-current-date') || new Date()
|
||||
)
|
||||
|
||||
// 获取所有有日记的月份
|
||||
const months = allPosts.map((post) => {
|
||||
const date = new Date(post.data.date)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
|
||||
})
|
||||
const uniqueMonths = Array.from(new Set(months)).sort()
|
||||
|
||||
function getFormattedDate(date: Date, options: DateTimeFormatOptions): string {
|
||||
return new Intl.DateTimeFormat('zh-CN', options).format(date)
|
||||
}
|
||||
|
||||
function getCurrentMonthStr(): string {
|
||||
return `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function canNavigateToMonth(direction: 'prev' | 'next'): boolean {
|
||||
const currentMonthStr = getCurrentMonthStr()
|
||||
if (direction === 'prev') {
|
||||
return uniqueMonths.some((m) => m < currentMonthStr)
|
||||
} else {
|
||||
const now = new Date()
|
||||
const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth())
|
||||
const thisMonth = new Date(now.getFullYear(), now.getMonth())
|
||||
return currentMonth < thisMonth
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavigationButtons() {
|
||||
if (prevMonthBtn && nextMonthBtn) {
|
||||
const canGoPrev = canNavigateToMonth('prev')
|
||||
const canGoNext = canNavigateToMonth('next')
|
||||
|
||||
prevMonthBtn.classList.toggle('cursor-not-allowed', !canGoPrev)
|
||||
prevMonthBtn.classList.toggle('opacity-50', !canGoPrev)
|
||||
;(prevMonthBtn as HTMLButtonElement).disabled = !canGoPrev
|
||||
|
||||
nextMonthBtn.classList.toggle('cursor-not-allowed', !canGoNext)
|
||||
nextMonthBtn.classList.toggle('opacity-50', !canGoNext)
|
||||
;(nextMonthBtn as HTMLButtonElement).disabled = !canGoNext
|
||||
}
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
// 获取当月的第一天和最后一天
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
||||
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
||||
|
||||
// 获取当月第一天是星期几(0是周日,1是周一,以此类推)
|
||||
const firstDayWeekday = firstDayOfMonth.getDay()
|
||||
const adjustedFirstDayWeekday = firstDayWeekday === 0 ? 7 : firstDayWeekday
|
||||
|
||||
// 计算日历表格需要显示的天数
|
||||
const daysInPrevMonth = adjustedFirstDayWeekday - 1
|
||||
const daysInCurrentMonth = lastDayOfMonth.getDate()
|
||||
const totalDays = Math.ceil((daysInPrevMonth + daysInCurrentMonth) / 7) * 7
|
||||
|
||||
// 获取上个月的最后几天
|
||||
const lastDayOfPrevMonth = new Date(
|
||||
currentDate.getFullYear(),
|
||||
currentDate.getMonth(),
|
||||
0
|
||||
).getDate()
|
||||
|
||||
// 更新月份显示
|
||||
if (currentMonthDisplay) {
|
||||
currentMonthDisplay.textContent = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`
|
||||
}
|
||||
|
||||
// 更新导航按钮状态
|
||||
updateNavigationButtons()
|
||||
|
||||
// 清除现有的日历内容(保留星期标题)
|
||||
const existingDays = calendarGrid?.querySelectorAll('.calendar-day')
|
||||
existingDays?.forEach((day) => day.remove())
|
||||
|
||||
// 生成日历内容
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
const dayNumber = i - daysInPrevMonth + 1
|
||||
const isCurrentMonth = dayNumber > 0 && dayNumber <= daysInCurrentMonth
|
||||
const displayDay = isCurrentMonth
|
||||
? dayNumber
|
||||
: dayNumber <= 0
|
||||
? lastDayOfPrevMonth + dayNumber
|
||||
: dayNumber - daysInCurrentMonth
|
||||
|
||||
const date = new Date(
|
||||
currentDate.getFullYear(),
|
||||
isCurrentMonth
|
||||
? currentDate.getMonth()
|
||||
: dayNumber <= 0
|
||||
? currentDate.getMonth() - 1
|
||||
: currentDate.getMonth() + 1,
|
||||
displayDay
|
||||
)
|
||||
|
||||
const formattedDate = getFormattedDate(date, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
|
||||
// 查找当天的文章
|
||||
const postsForDay = allPosts.filter((post) => {
|
||||
const postDate = new Date(post.data.date)
|
||||
return (
|
||||
getFormattedDate(postDate, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}) === formattedDate
|
||||
)
|
||||
})
|
||||
|
||||
const hasPost = postsForDay.length > 0
|
||||
|
||||
// 创建日历单元格
|
||||
const dayElement = document.createElement('div')
|
||||
dayElement.className = `calendar-day min-h-[100px] rounded-lg border p-2 ${
|
||||
isCurrentMonth ? 'bg-primary-foreground' : 'bg-muted/50'
|
||||
} ${hasPost ? 'border-green-400/50' : 'border-border'}`
|
||||
|
||||
// 添加日期显示
|
||||
const dateDisplay = document.createElement('div')
|
||||
dateDisplay.className = 'mb-1 text-right'
|
||||
const dateSpan = document.createElement('span')
|
||||
dateSpan.className = `inline-block h-7 w-7 rounded-full text-center leading-7 ${
|
||||
!isCurrentMonth ? 'text-muted-foreground' : ''
|
||||
} ${hasPost ? 'bg-green-400/20' : ''}`
|
||||
dateSpan.textContent = displayDay.toString()
|
||||
dateDisplay.appendChild(dateSpan)
|
||||
dayElement.appendChild(dateDisplay)
|
||||
|
||||
// 如果有文章,添加文章链接
|
||||
if (hasPost) {
|
||||
const postsContainer = document.createElement('div')
|
||||
postsContainer.className = 'space-y-1 text-xs'
|
||||
postsForDay.forEach((post) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = `/diary/${post.slug}/`
|
||||
link.className = 'block line-clamp-2 transition-colors hover:text-green-400'
|
||||
link.title = post.data.title
|
||||
link.textContent = post.data.title
|
||||
postsContainer.appendChild(link)
|
||||
})
|
||||
dayElement.appendChild(postsContainer)
|
||||
}
|
||||
|
||||
calendarGrid?.appendChild(dayElement)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始渲染
|
||||
renderCalendar()
|
||||
|
||||
// 添加事件监听器
|
||||
prevMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('prev')) {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1)
|
||||
renderCalendar()
|
||||
}
|
||||
})
|
||||
|
||||
nextMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('next')) {
|
||||
currentDate.setMonth(currentDate.getMonth() + 1)
|
||||
renderCalendar()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 页面加载时初始化
|
||||
initCalendar()
|
||||
|
||||
// 在视图转换后重新初始化
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
initCalendar()
|
||||
})
|
||||
</script>
|
197
src/components/blog/Calendar.tsx
Normal file
197
src/components/blog/Calendar.tsx
Normal file
@ -0,0 +1,197 @@
|
||||
import type { CollectionEntry } from 'astro:content'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
type Post = CollectionEntry<'post'>
|
||||
interface Props {
|
||||
posts: Post[]
|
||||
currentDate?: Date
|
||||
}
|
||||
|
||||
interface DateTimeFormatOptions {
|
||||
year?: 'numeric' | '2-digit'
|
||||
month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
|
||||
day?: 'numeric' | '2-digit'
|
||||
}
|
||||
|
||||
const weekDays = ['一', '二', '三', '四', '五', '六', '日']
|
||||
|
||||
const getFormattedDate = (date: Date, options: DateTimeFormatOptions): string => {
|
||||
return new Intl.DateTimeFormat('zh-CN', options).format(date)
|
||||
}
|
||||
|
||||
export const Calendar: React.FC<Props> = ({ posts, currentDate: initialDate = new Date() }) => {
|
||||
const [currentDate, setCurrentDate] = useState(new Date(initialDate))
|
||||
|
||||
// 将日记按日期分组
|
||||
const postsByDate = new Map<string, Post[]>()
|
||||
posts.forEach((post) => {
|
||||
const date = getFormattedDate(new Date(post.data.date), {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
if (!postsByDate.has(date)) {
|
||||
postsByDate.set(date, [])
|
||||
}
|
||||
postsByDate.get(date)?.push(post)
|
||||
})
|
||||
|
||||
// 获取所有有日记的月份
|
||||
const months = posts.map((post) => {
|
||||
const date = new Date(post.data.date)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
|
||||
})
|
||||
const uniqueMonths = Array.from(new Set(months)).sort()
|
||||
|
||||
const getCurrentMonthStr = (): string => {
|
||||
return `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const canNavigateToMonth = (direction: 'prev' | 'next'): boolean => {
|
||||
const currentMonthStr = getCurrentMonthStr()
|
||||
if (direction === 'prev') {
|
||||
return uniqueMonths.some((m) => m < currentMonthStr)
|
||||
} else {
|
||||
const now = new Date()
|
||||
const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth())
|
||||
const thisMonth = new Date(now.getFullYear(), now.getMonth())
|
||||
return currentMonth < thisMonth
|
||||
}
|
||||
}
|
||||
|
||||
const renderCalendarDays = () => {
|
||||
// 获取当月的第一天和最后一天
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
||||
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
||||
|
||||
// 获取当月第一天是星期几
|
||||
const firstDayWeekday = firstDayOfMonth.getDay()
|
||||
const adjustedFirstDayWeekday = firstDayWeekday === 0 ? 7 : firstDayWeekday
|
||||
|
||||
// 计算日历表格需要显示的天数
|
||||
const daysInPrevMonth = adjustedFirstDayWeekday - 1
|
||||
const daysInCurrentMonth = lastDayOfMonth.getDate()
|
||||
const totalDays = Math.ceil((daysInPrevMonth + daysInCurrentMonth) / 7) * 7
|
||||
|
||||
// 获取上个月的最后几天
|
||||
const lastDayOfPrevMonth = new Date(
|
||||
currentDate.getFullYear(),
|
||||
currentDate.getMonth(),
|
||||
0
|
||||
).getDate()
|
||||
|
||||
const days = []
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
const dayNumber = i - daysInPrevMonth + 1
|
||||
const isCurrentMonth = dayNumber > 0 && dayNumber <= daysInCurrentMonth
|
||||
const displayDay = isCurrentMonth
|
||||
? dayNumber
|
||||
: dayNumber <= 0
|
||||
? lastDayOfPrevMonth + dayNumber
|
||||
: dayNumber - daysInCurrentMonth
|
||||
|
||||
const date = new Date(
|
||||
currentDate.getFullYear(),
|
||||
isCurrentMonth
|
||||
? currentDate.getMonth()
|
||||
: dayNumber <= 0
|
||||
? currentDate.getMonth() - 1
|
||||
: currentDate.getMonth() + 1,
|
||||
displayDay
|
||||
)
|
||||
|
||||
const formattedDate = getFormattedDate(date, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
|
||||
const postsForDay = Array.from(postsByDate.get(formattedDate) || [])
|
||||
const hasPost = postsForDay.length > 0
|
||||
|
||||
days.push(
|
||||
<div
|
||||
key={i}
|
||||
className={`calendar-day min-h-[100px] rounded-lg border p-2 ${
|
||||
isCurrentMonth ? 'bg-primary-foreground' : 'bg-muted/50'
|
||||
} ${hasPost ? 'border-green-400/50' : 'border-border'}`}
|
||||
>
|
||||
<div className='mb-1 text-right'>
|
||||
<span
|
||||
className={`inline-block h-7 w-7 rounded-full text-center leading-7 ${
|
||||
!isCurrentMonth ? 'text-muted-foreground' : ''
|
||||
} ${hasPost ? 'bg-green-400/20' : ''}`}
|
||||
>
|
||||
{displayDay}
|
||||
</span>
|
||||
</div>
|
||||
{hasPost && (
|
||||
<div className='space-y-1 text-xs'>
|
||||
{postsForDay.map((post: Post) => (
|
||||
<a
|
||||
key={post.slug}
|
||||
href={`/diary/${post.slug}/`}
|
||||
className='line-clamp-2 block transition-colors hover:text-green-400'
|
||||
title={post.data.title}
|
||||
>
|
||||
{post.data.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return days
|
||||
}
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
if (canNavigateToMonth('prev')) {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1))
|
||||
}
|
||||
}
|
||||
|
||||
const handleNextMonth = () => {
|
||||
if (canNavigateToMonth('next')) {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mx-auto w-full max-w-4xl'>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<button
|
||||
onClick={handlePrevMonth}
|
||||
disabled={!canNavigateToMonth('prev')}
|
||||
className={`rounded-lg border border-border px-4 py-2 hover:border-green-400/50 ${
|
||||
!canNavigateToMonth('prev') ? 'cursor-not-allowed opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
上个月
|
||||
</button>
|
||||
<h2 className='text-xl font-bold'>
|
||||
{currentDate.getFullYear()}年{currentDate.getMonth() + 1}月
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleNextMonth}
|
||||
disabled={!canNavigateToMonth('next')}
|
||||
className={`rounded-lg border border-border px-4 py-2 hover:border-green-400/50 ${
|
||||
!canNavigateToMonth('next') ? 'cursor-not-allowed opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
下个月
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-7 gap-1'>
|
||||
{weekDays.map((day) => (
|
||||
<div key={day} className='py-2 text-center font-medium'>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
{renderCalendarDays()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -5,10 +5,10 @@ import type { GetStaticPaths, Page } from 'astro'
|
||||
import type { CollectionEntry } from 'astro:content'
|
||||
|
||||
import Button from '@/components/Button.astro'
|
||||
import Calendar from '@/components/blog/Calendar.astro'
|
||||
import PostPreview from '@/components/blog/PostPreview.astro'
|
||||
import PageLayout from '@/layouts/BaseLayout.astro'
|
||||
import { getallDiaries, getUniqueCategories, getUniqueTags, sortMDByDate } from '@/utils'
|
||||
import { Calendar } from '@/components/blog/Calendar'
|
||||
|
||||
export const getStaticPaths = (async ({ paginate }) => {
|
||||
const allPosts = await getallDiaries()
|
||||
@ -82,7 +82,7 @@ const serializedPosts = allPosts.map((post) => ({
|
||||
set:html={JSON.stringify(serializedPosts)}
|
||||
/>
|
||||
<div id='calendar-container' data-current-date={currentDate.toISOString()}>
|
||||
<Calendar posts={allPosts} currentDate={currentDate} />
|
||||
<Calendar posts={allPosts} currentDate={currentDate} client:load />
|
||||
</div>
|
||||
|
||||
<div class='mt-8'>
|
||||
|
Reference in New Issue
Block a user