fix(admin-spa): 修复使用趋势图表按小时粒度不显示数据的问题

web/admin-spa/src/components/dashboard/UsageTrend.vue

@@ -55,8 +55,12 @@ const createChart = () => {
   
   const labels = dashboardStore.trendData.map(item => {
     if (granularity.value === 'hour') {
-      const date = new Date(item.date)
-      return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:00`
+      // 小时粒度使用hour字段
+      const date = new Date(item.hour)
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hour = String(date.getHours()).padStart(2, '0')
+      return `${month}/${day} ${hour}:00`
     }
     return item.date
   })

web/admin-spa/src/stores/dashboard.js

@@ -141,12 +141,15 @@ export const useDashboardStore = defineStore('dashboard', () => {
       let url = '/admin/usage-trend?'
       
       if (granularity === 'hour') {
-        // 小时粒度，传递开始和结束时间
+        // 小时粒度，计算时间范围
         url += `granularity=hour`
-        if (dateFilter.value.customRange && dateFilter.value.customRange.length === 2) {
-          url += `&startDate=${encodeURIComponent(dateFilter.value.customRange[0])}`
-          url += `&endDate=${encodeURIComponent(dateFilter.value.customRange[1])}`
-        }
+        
+        // 根据days参数计算时间范围
+        const endTime = new Date()
+        const startTime = new Date(endTime.getTime() - days * 24 * 60 * 60 * 1000)
+        
+        url += `&startDate=${encodeURIComponent(startTime.toISOString())}`
+        url += `&endDate=${encodeURIComponent(endTime.toISOString())}`
       } else {
         // 天粒度，传递天数
         url += `granularity=day&days=${days}`

web/admin-spa/src/views/DashboardView.vue

@@ -441,8 +441,22 @@ function createUsageTrendChart() {
   const requestsData = data.map(d => d.requests || 0)
   const costData = data.map(d => d.cost || 0)
   
+  // 根据数据类型确定标签字段和格式
+  const labelField = data[0]?.date ? 'date' : 'hour'
+  const labels = data.map(d => {
+    if (labelField === 'hour') {
+      // 格式化小时显示
+      const date = new Date(d.hour)
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hour = String(date.getHours()).padStart(2, '0')
+      return `${month}/${day} ${hour}:00`
+    }
+    return d.date
+  })
+  
   const chartData = {
-    labels: data.map(d => d.date),
+    labels: labels,
     datasets: [
       {
         label: '输入Token',
@@ -628,8 +642,21 @@ function createApiKeysUsageTrendChart() {
     }
   }) || []
   
+  // 根据数据类型确定标签字段
+  const labelField = data[0]?.date ? 'date' : 'hour'
+  
   const chartData = {
-    labels: data.map(d => d.date),
+    labels: data.map(d => {
+      if (labelField === 'hour') {
+        // 格式化小时显示
+        const date = new Date(d.hour)
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hour = String(date.getHours()).padStart(2, '0')
+        return `${month}/${day} ${hour}:00`
+      }
+      return d.date
+    }),
     datasets: datasets
   }