gypsy-crm-frontend-vu/stores/time.js

import {
	defineStore
} from 'pinia'
import {
	ref,
	computed
} from 'vue'

export const useTimeStore = defineStore('time', () => {
	// 状态
	const greeting = ref('')
	const currentTime = ref('')
	const iconClass = ref('')
	const themeColor = ref('')
	const backgroundClass = ref('')
	const timerId = ref(null)

	// 计算属性 - 组合完整问候语
	const fullGreeting = computed(() => {
		return `${greeting.value} 当前时间是 ${currentTime.value}`
	})

	// 方法 - 更新问候语和时间状态
	const updateGreeting = () => {
		const now = new Date()
		const hour = now.getHours()

		// 更新当前时间显示
		currentTime.value = now.toLocaleTimeString('zh-CN', {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		})

		// 根据小时设置不同的问候语和样式
		if (hour >= 5 && hour < 12) {
			// 早上 (5:00 - 11:59)
			greeting.value = "早上好，"
			iconClass.value = "fa fa-sun-o"
			themeColor.value = "#FBBF24"
			backgroundClass.value =
				"bg-gradient-to-br from-yellow-50 to-orange-50 transition-colors duration-1000"
		} else if (hour >= 12 && hour < 18) {
			// 下午 (12:00 - 17:59)
			greeting.value = "下午好，"
			iconClass.value = "fa fa-cloud"
			themeColor.value = "#F97316"
			backgroundClass.value =
				"bg-gradient-to-br from-orange-50 to-red-50 transition-colors duration-1000"
		} else if (hour >= 18 && hour < 22) {
			// 晚上 (18:00 - 21:59)
			greeting.value = "晚上好，"
			iconClass.value = "fa fa-moon-o"
			themeColor.value = "#7C3AED"
			backgroundClass.value =
				"bg-gradient-to-br from-purple-50 to-indigo-50 transition-colors duration-1000"
		} else {
			// 深夜 (22:00 - 4:59)
			greeting.value = "夜深了，早点休息哦，"
			iconClass.value = "fa fa-star-o"
			themeColor.value = "#1E293B"
			backgroundClass.value =
				"bg-gradient-to-br from-gray-900/5 to-gray-800/10 transition-colors duration-1000"
		}
	}

	// 方法 - 启动定时器
	const startTimer = () => {
		// 先更新一次
		updateGreeting()

		// 每秒更新一次
		timerId.value = setInterval(updateGreeting, 1000)
	}

	// 方法 - 停止定时器
	const stopTimer = () => {
		if (timerId.value) {
			clearInterval(timerId.value)
			timerId.value = null
		}
	}
	updateGreeting()

	// 暴露状态和方法
	return {
		greeting,
		currentTime,
		iconClass,
		themeColor,
		backgroundClass,
		fullGreeting,
		startTimer,
		stopTimer
	}
})