fix(frontend): 修复所有页面的UTC时区日期问题并优化初始化
**问题**: - 使用 toISOString() 格式化日期导致UTC时区问题 - 在UTC+8时区凌晨时,日期会显示为前一天 - 日期范围初始化在 onMounted 中导致重复渲染和请求 **修复**: - 统一使用本地时区格式化日期 - 在变量声明时就初始化日期范围,避免延迟初始化 - 移除 initializeDateRange() 函数,直接在声明时设置正确值 - 添加 formatLocalDate() 辅助函数统一日期格式化逻辑 **影响范围**: - 用户仪表盘 (DashboardView) - 管理员仪表盘 (admin/DashboardView) - 用户使用记录 (UsageView) - 管理员使用记录 (admin/UsageView) **效果**: - 日期范围正确包含当天数据 - 避免页面加载时的重复请求 - 改善用户体验,减少不必要的重新渲染
This commit is contained in:
@@ -488,9 +488,19 @@ const apiKeyOptions = computed(() => {
|
||||
]
|
||||
})
|
||||
|
||||
// Helper function to format date in local timezone
|
||||
const formatLocalDate = (date: Date): string => {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// Initialize date range immediately
|
||||
const now = new Date()
|
||||
const weekAgo = new Date(now)
|
||||
weekAgo.setDate(weekAgo.getDate() - 6)
|
||||
|
||||
// Date range state
|
||||
const startDate = ref('')
|
||||
const endDate = ref('')
|
||||
const startDate = ref(formatLocalDate(weekAgo))
|
||||
const endDate = ref(formatLocalDate(now))
|
||||
|
||||
const filters = ref<UsageQueryParams>({
|
||||
api_key_id: undefined,
|
||||
@@ -498,18 +508,9 @@ const filters = ref<UsageQueryParams>({
|
||||
end_date: undefined
|
||||
})
|
||||
|
||||
// Initialize default date range (last 7 days)
|
||||
const initializeDateRange = () => {
|
||||
const now = new Date()
|
||||
const today = now.toISOString().split('T')[0]
|
||||
const weekAgo = new Date(now)
|
||||
weekAgo.setDate(weekAgo.getDate() - 6)
|
||||
|
||||
startDate.value = weekAgo.toISOString().split('T')[0]
|
||||
endDate.value = today
|
||||
filters.value.start_date = startDate.value
|
||||
filters.value.end_date = endDate.value
|
||||
}
|
||||
// Initialize filters with date range
|
||||
filters.value.start_date = startDate.value
|
||||
filters.value.end_date = endDate.value
|
||||
|
||||
// Handle date range change from DateRangePicker
|
||||
const onDateRangeChange = (range: {
|
||||
@@ -629,7 +630,13 @@ const resetFilters = () => {
|
||||
end_date: undefined
|
||||
}
|
||||
// Reset date range to default (last 7 days)
|
||||
initializeDateRange()
|
||||
const now = new Date()
|
||||
const weekAgo = new Date(now)
|
||||
weekAgo.setDate(weekAgo.getDate() - 6)
|
||||
startDate.value = formatLocalDate(weekAgo)
|
||||
endDate.value = formatLocalDate(now)
|
||||
filters.value.start_date = startDate.value
|
||||
filters.value.end_date = endDate.value
|
||||
pagination.page = 1
|
||||
loadUsageLogs()
|
||||
loadUsageStats()
|
||||
@@ -772,7 +779,6 @@ const hideTooltip = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initializeDateRange()
|
||||
loadApiKeys()
|
||||
loadUsageLogs()
|
||||
loadUsageStats()
|
||||
|
||||
Reference in New Issue
Block a user