1.先看效果

2.源代码

import React, { useState } from 'react'

import { format, startOfWeek, addDays, isSameDay } from 'date-fns'

type Mood = '😊' | '😐' | '😢' | '😡' | '🤔'

const moods: Mood[] = ['😊', '😐', '😢', '😡', '🤔']

const moodColors: Record = {

'😊': 'bg-green-200',

'😐': 'bg-yellow-200',

'😢': 'bg-blue-200',

'😡': 'bg-red-200',

'🤔': 'bg-purple-200',

}

export default function MoodTracker() {

const [selectedMood, setSelectedMood] = useState(null)

const [moodHistory, setMoodHistory] = useState>({})

const handleMoodSelect = (mood: Mood) => {

setSelectedMood(mood)

const today = format(new Date(), 'yyyy-MM-dd')

setMoodHistory(prev => ({ ...prev, [today]: mood }))

}

const renderWeek = () => {

const startDate = startOfWeek(new Date())

return Array.from({ length: 7 }).map((_, index) => {

const date = addDays(startDate, index)

const dateString = format(date, 'yyyy-MM-dd')

const mood = moodHistory[dateString]

return (

)

})

}

const renderMoodStats = () => {

const moodCounts = Object.values(moodHistory).reduce((acc, mood) => {

acc[mood] = (acc[mood] || 0) + 1

return acc

}, {} as Record)

return moods.map(mood => (

))

}

return (

)

}