fix(frontend): 修复跨时区日期范围筛选问题

当管理员在比服务器时区更早的时区(如芝加哥 UTC-6)访问使用记录页面时,
由于服务器时区(如中国 UTC+8)已经是"明天",导致最新的记录无法显示。

修复方案:
- DateRangePicker: 将日期选择器的 max 限制从"今天"改为"明天"
- UsageView: 默认和重置时的 endDate 使用"明天"而非"今天"

这样可以确保跨时区场景下用户能看到所有最新记录。

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yuhao Jiang
2026-01-03 21:04:34 -06:00
parent 631ba25e04
commit 600f9ce254
2 changed files with 19 additions and 5 deletions

View File

@@ -59,7 +59,7 @@
<input <input
type="date" type="date"
v-model="localStartDate" v-model="localStartDate"
:max="localEndDate || today" :max="localEndDate || tomorrow"
class="date-picker-input" class="date-picker-input"
@change="onDateChange" @change="onDateChange"
/> />
@@ -85,7 +85,7 @@
type="date" type="date"
v-model="localEndDate" v-model="localEndDate"
:min="localStartDate" :min="localStartDate"
:max="today" :max="tomorrow"
class="date-picker-input" class="date-picker-input"
@change="onDateChange" @change="onDateChange"
/> />
@@ -144,6 +144,14 @@ const today = computed(() => {
return `${year}-${month}-${day}` return `${year}-${month}-${day}`
}) })
// Tomorrow's date - used for max date to handle timezone differences
// When user is in a timezone behind the server, "today" on server might be "tomorrow" locally
const tomorrow = computed(() => {
const d = new Date()
d.setDate(d.getDate() + 1)
return formatDateToString(d)
})
// Helper function to format date to YYYY-MM-DD using local timezone // Helper function to format date to YYYY-MM-DD using local timezone
const formatDateToString = (date: Date): string => { const formatDateToString = (date: Date): string => {
const year = date.getFullYear() const year = date.getFullYear()

View File

@@ -888,13 +888,17 @@ const formatLocalDate = (date: Date): string => {
} }
// Initialize date range immediately // Initialize date range immediately
// Use tomorrow as end date to handle timezone differences between client and server
// e.g., when server is in Asia/Shanghai and client is in America/Chicago
const now = new Date() const now = new Date()
const tomorrow = new Date(now)
tomorrow.setDate(tomorrow.getDate() + 1)
const weekAgo = new Date(now) const weekAgo = new Date(now)
weekAgo.setDate(weekAgo.getDate() - 6) weekAgo.setDate(weekAgo.getDate() - 6)
// Date range state // Date range state
const startDate = ref(formatLocalDate(weekAgo)) const startDate = ref(formatLocalDate(weekAgo))
const endDate = ref(formatLocalDate(now)) const endDate = ref(formatLocalDate(tomorrow))
const filters = ref<AdminUsageQueryParams>({ const filters = ref<AdminUsageQueryParams>({
user_id: undefined, user_id: undefined,
@@ -1215,12 +1219,14 @@ const resetFilters = () => {
end_date: undefined end_date: undefined
} }
granularity.value = 'day' granularity.value = 'day'
// Reset date range to default (last 7 days) // Reset date range to default (last 7 days, with tomorrow as end to handle timezone differences)
const now = new Date() const now = new Date()
const tomorrowDate = new Date(now)
tomorrowDate.setDate(tomorrowDate.getDate() + 1)
const weekAgo = new Date(now) const weekAgo = new Date(now)
weekAgo.setDate(weekAgo.getDate() - 6) weekAgo.setDate(weekAgo.getDate() - 6)
startDate.value = formatLocalDate(weekAgo) startDate.value = formatLocalDate(weekAgo)
endDate.value = formatLocalDate(now) endDate.value = formatLocalDate(tomorrowDate)
filters.value.start_date = startDate.value filters.value.start_date = startDate.value
filters.value.end_date = endDate.value filters.value.end_date = endDate.value
pagination.value.page = 1 pagination.value.page = 1