diff --git a/web/default/src/pages/Dashboard/index.js b/web/default/src/pages/Dashboard/index.js index 0d90a1a5..c87ac76c 100644 --- a/web/default/src/pages/Dashboard/index.js +++ b/web/default/src/pages/Dashboard/index.js @@ -118,11 +118,17 @@ const Dashboard = () => { // 获取日期范围 const dates = data.map((item) => item.Day); - const minDate = - dates.length > 0 - ? new Date(Math.min(...dates.map((d) => new Date(d)))) - : new Date(); const maxDate = new Date(); // 总是使用今天作为最后一天 + let minDate = dates.length > 0 + ? new Date(Math.min(...dates.map((d) => new Date(d)))) + : new Date(); + + // 确保至少显示5天的数据 + const fiveDaysAgo = new Date(); + fiveDaysAgo.setDate(fiveDaysAgo.getDate() - 4); // -4是因为包含今天 + if (minDate > fiveDaysAgo) { + minDate = fiveDaysAgo; + } // 生成所有日期 for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) { @@ -153,11 +159,17 @@ const Dashboard = () => { // 获取日期范围 const dates = data.map((item) => item.Day); - const minDate = - dates.length > 0 - ? new Date(Math.min(...dates.map((d) => new Date(d)))) - : new Date(); const maxDate = new Date(); // 总是使用今天作为最后一天 + let minDate = dates.length > 0 + ? new Date(Math.min(...dates.map((d) => new Date(d)))) + : new Date(); + + // 确保至少显示5天的数据 + const fiveDaysAgo = new Date(); + fiveDaysAgo.setDate(fiveDaysAgo.getDate() - 4); // -4是因为包含今天 + if (minDate > fiveDaysAgo) { + minDate = fiveDaysAgo; + } // 生成所有日期 for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) { @@ -196,6 +208,28 @@ const Dashboard = () => { return chartConfig.barColors[index % chartConfig.barColors.length]; }; + // 添加一个日期格式化函数 + const formatDate = (dateStr) => { + const date = new Date(dateStr); + return date.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }); + }; + + // 修改所有 XAxis 配置 + const xAxisConfig = { + dataKey: 'date', + axisLine: false, + tickLine: false, + tick: { + fontSize: 12, + fill: '#A3AED0', + dx: 15 // 向右偏移文本 + }, + tickFormatter: formatDate, + interval: 0, + minTickGap: 5, + padding: { left: 20, right: 20 } // 增加两侧的内边距 + }; + return (
{/* 三个并排的折线图 */} @@ -208,7 +242,7 @@ const Dashboard = () => { {summaryData.todayRequests}
- + { horizontal={chartConfig.lineChart.grid.horizontal} opacity={chartConfig.lineChart.grid.opacity} /> - + { t('dashboard.charts.requests.tooltip'), ]} labelFormatter={(label) => - `${t('dashboard.tooltip.date')}: ${label}` + `${t('dashboard.tooltip.date')}: ${formatDate(label)}` } /> {
- + { horizontal={chartConfig.lineChart.grid.horizontal} opacity={chartConfig.lineChart.grid.opacity} /> - + { t('dashboard.charts.quota.tooltip'), ]} labelFormatter={(label) => - `${t('dashboard.tooltip.date')}: ${label}` + `${t('dashboard.tooltip.date')}: ${formatDate(label)}` } /> { {summaryData.todayTokens}
- + { horizontal={chartConfig.lineChart.grid.horizontal} opacity={chartConfig.lineChart.grid.opacity} /> - + { t('dashboard.charts.tokens.tooltip'), ]} labelFormatter={(label) => - `${t('dashboard.tooltip.date')}: ${label}` + `${t('dashboard.tooltip.date')}: ${formatDate(label)}` } /> { vertical={false} opacity={0.1} /> - + { boxShadow: '0 2px 8px rgba(0,0,0,0.1)', }} labelFormatter={(label) => - `${t('dashboard.tooltip.date')}: ${label}` + `${t('dashboard.tooltip.date')}: ${formatDate(label)}` } />