feat: API Keys页面恢复今日时间选项并设为默认

- 添加"今日"时间筛选选项,使用fa-calendar-day图标
- 将默认时间范围从"最近7天"改为"今日"
- 优化日期处理逻辑,确保今日选项从0点开始
- 调整UsageDetailModal宽度以适应内容显示
- 同步更新所有相关的初始化和重置逻辑

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Edric Li
2025-09-07 21:59:44 +08:00
parent 8c9d6381f3
commit 92ec3ffc72
3 changed files with 26 additions and 22 deletions

View File

@@ -143,10 +143,10 @@ router.get('/api-keys', authenticateAdmin, async (req, res) => {
return res.status(400).json({ error: 'Start date must be before or equal to end date' }) return res.status(400).json({ error: 'Start date must be before or equal to end date' })
} }
// 限制最大范围为31 // 限制最大范围为365
const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1 const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
if (daysDiff > 31) { if (daysDiff > 365) {
return res.status(400).json({ error: 'Date range cannot exceed 31 days' }) return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
} }
// 生成日期范围内每天的搜索模式 // 生成日期范围内每天的搜索模式
@@ -3916,10 +3916,10 @@ router.get('/model-stats', authenticateAdmin, async (req, res) => {
return res.status(400).json({ error: 'Start date must be before or equal to end date' }) return res.status(400).json({ error: 'Start date must be before or equal to end date' })
} }
// 限制最大范围为31 // 限制最大范围为365
const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1 const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
if (daysDiff > 31) { if (daysDiff > 365) {
return res.status(400).json({ error: 'Date range cannot exceed 31 days' }) return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
} }
// 生成日期范围内所有日期的搜索模式 // 生成日期范围内所有日期的搜索模式
@@ -4380,10 +4380,10 @@ router.get('/api-keys/:keyId/model-stats', authenticateAdmin, async (req, res) =
return res.status(400).json({ error: 'Start date must be before or equal to end date' }) return res.status(400).json({ error: 'Start date must be before or equal to end date' })
} }
// 限制最大范围为31 // 限制最大范围为365
const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1 const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
if (daysDiff > 31) { if (daysDiff > 365) {
return res.status(400).json({ error: 'Date range cannot exceed 31 days' }) return res.status(400).json({ error: 'Date range cannot exceed 365 days' })
} }
// 生成日期范围内所有日期的搜索模式 // 生成日期范围内所有日期的搜索模式

View File

@@ -6,7 +6,7 @@
<!-- 模态框 --> <!-- 模态框 -->
<div <div
class="modal-content relative mx-auto flex max-h-[90vh] w-[95%] max-w-2xl flex-col p-4 sm:w-full sm:max-w-3xl sm:p-6 md:p-8" class="modal-content relative mx-auto flex max-h-[90vh] w-[95%] max-w-5xl flex-col p-4 sm:w-full sm:p-6 md:p-8"
> >
<!-- 标题栏 --> <!-- 标题栏 -->
<div class="mb-4 flex items-center justify-between sm:mb-6"> <div class="mb-4 flex items-center justify-between sm:mb-6">

View File

@@ -1820,7 +1820,7 @@ const apiKeyStatsTimeRange = ref('today')
// 全局日期筛选器 // 全局日期筛选器
const globalDateFilter = reactive({ const globalDateFilter = reactive({
type: 'preset', type: 'preset',
preset: '7days', preset: 'today',
customStart: '', customStart: '',
customEnd: '', customEnd: '',
customRange: null customRange: null
@@ -1844,6 +1844,7 @@ const toggleSelectionMode = () => {
// 时间范围下拉选项 // 时间范围下拉选项
const timeRangeDropdownOptions = computed(() => [ const timeRangeDropdownOptions = computed(() => [
{ value: 'today', label: '今日', icon: 'fa-calendar-day' },
{ value: '7days', label: '最近7天', icon: 'fa-calendar-week' }, { value: '7days', label: '最近7天', icon: 'fa-calendar-week' },
{ value: '30days', label: '最近30天', icon: 'fa-calendar-alt' }, { value: '30days', label: '最近30天', icon: 'fa-calendar-alt' },
{ value: 'all', label: '全部时间', icon: 'fa-infinity' }, { value: 'all', label: '全部时间', icon: 'fa-infinity' },
@@ -2723,12 +2724,15 @@ const setGlobalDateFilterPreset = (preset) => {
globalDateFilter.customStart = null globalDateFilter.customStart = null
globalDateFilter.customEnd = null globalDateFilter.customEnd = null
} else { } else {
// 预设选项7天或30天 // 预设选项(今日、7天或30天
globalDateFilter.type = 'preset' globalDateFilter.type = 'preset'
const today = new Date() const today = new Date()
const startDate = new Date(today) const startDate = new Date(today)
if (preset === '7days') { if (preset === 'today') {
// 今日:从今天开始到今天结束
startDate.setHours(0, 0, 0, 0)
} else if (preset === '7days') {
startDate.setDate(today.getDate() - 6) startDate.setDate(today.getDate() - 6)
} else if (preset === '30days') { } else if (preset === '30days') {
startDate.setDate(today.getDate() - 29) startDate.setDate(today.getDate() - 29)
@@ -2751,8 +2755,8 @@ const onGlobalCustomDateRangeChange = (value) => {
globalDateFilter.customEnd = value[1].split(' ')[0] globalDateFilter.customEnd = value[1].split(' ')[0]
loadApiKeys() loadApiKeys()
} else if (value === null) { } else if (value === null) {
// 清空时恢复默认7天 // 清空时恢复默认今日
setGlobalDateFilterPreset('7days') setGlobalDateFilterPreset('today')
} }
} }
@@ -2760,12 +2764,12 @@ const onGlobalCustomDateRangeChange = (value) => {
const initApiKeyDateFilter = (keyId) => { const initApiKeyDateFilter = (keyId) => {
const today = new Date() const today = new Date()
const startDate = new Date(today) const startDate = new Date(today)
startDate.setDate(today.getDate() - 6) // 7天前 startDate.setHours(0, 0, 0, 0) // 今日从0点开始
apiKeyDateFilters.value[keyId] = { apiKeyDateFilters.value[keyId] = {
type: 'preset', type: 'preset',
preset: '7days', preset: 'today',
customStart: startDate.toISOString().split('T')[0], customStart: today.toISOString().split('T')[0],
customEnd: today.toISOString().split('T')[0], customEnd: today.toISOString().split('T')[0],
customRange: null, customRange: null,
presetOptions: [ presetOptions: [
@@ -2871,15 +2875,15 @@ const disabledDate = (date) => {
const resetApiKeyDateFilter = (keyId) => { const resetApiKeyDateFilter = (keyId) => {
const filter = getApiKeyDateFilter(keyId) const filter = getApiKeyDateFilter(keyId)
// 重置为默认的7天 // 重置为默认的今日
filter.type = 'preset' filter.type = 'preset'
filter.preset = '7days' filter.preset = 'today'
const today = new Date() const today = new Date()
const startDate = new Date(today) const startDate = new Date(today)
startDate.setDate(today.getDate() - 6) startDate.setHours(0, 0, 0, 0) // 今日从0点开始
filter.customStart = startDate.toISOString().split('T')[0] filter.customStart = today.toISOString().split('T')[0]
filter.customEnd = today.toISOString().split('T')[0] filter.customEnd = today.toISOString().split('T')[0]
filter.customRange = null filter.customRange = null