perf: 拆分热力图为独立接口并添加 Redis 缓存

- 新增独立热力图 API 端点 (/api/admin/usage/heatmap, /api/users/me/usage/heatmap)
- 添加 Redis 缓存层 (5分钟 TTL)，减少数据库查询
- 用户角色变更时清除热力图缓存
- 前端并行加载统计数据和热力图，添加加载/错误状态显示
- 修复 cache_decorator 缺少 JSON 解析错误处理的问题
- 更新 docker-compose 启动命令提示

frontend/src/api/me.ts

@@ -286,5 +286,14 @@ export const meApi = {
   }> {
     const response = await apiClient.get('/api/users/me/usage/interval-timeline', { params })
     return response.data
+  },
+
+  /**
+   * 获取活跃度热力图数据（用户）
+   * 后端已缓存5分钟
+   */
+  async getActivityHeatmap(): Promise<ActivityHeatmap> {
+    const response = await apiClient.get<ActivityHeatmap>('/api/users/me/usage/heatmap')
+    return response.data
   }
 }

frontend/src/api/usage.ts

@@ -198,5 +198,14 @@ export const usageApi = {
     const params = ids?.length ? { ids: ids.join(',') } : {}
     const response = await apiClient.get('/api/admin/usage/active', { params })
     return response.data
+  },
+
+  /**
+   * 获取活跃度热力图数据（管理员）
+   * 后端已缓存5分钟
+   */
+  async getActivityHeatmap(): Promise<ActivityHeatmap> {
+    const response = await apiClient.get<ActivityHeatmap>('/api/admin/usage/heatmap')
+    return response.data
   }
 }

frontend/src/features/usage/components/ActivityHeatmapCard.vue

@@ -18,8 +18,22 @@
         <span class="flex-shrink-0">多</span>
       </div>
     </div>
+    <div
+      v-if="isLoading"
+      class="h-full min-h-[160px] flex items-center justify-center text-sm text-muted-foreground"
+    >
+      <Loader2 class="h-5 w-5 animate-spin mr-2" />
+      加载中...
+    </div>
+    <div
+      v-else-if="hasError"
+      class="h-full min-h-[160px] flex items-center justify-center text-sm text-destructive"
+    >
+      <AlertCircle class="h-4 w-4 mr-1.5" />
+      加载失败
+    </div>
     <ActivityHeatmap
-      v-if="hasData"
+      v-else-if="hasData"
       :data="data"
       :show-header="false"
     />
@@ -34,6 +48,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Loader2, AlertCircle } from 'lucide-vue-next'
 import Card from '@/components/ui/card.vue'
 import ActivityHeatmap from '@/components/stats/ActivityHeatmap.vue'
 import type { ActivityHeatmap as ActivityHeatmapData } from '@/types/activity'
@@ -41,6 +56,8 @@ import type { ActivityHeatmap as ActivityHeatmapData } from '@/types/activity'
 const props = defineProps<{
   data: ActivityHeatmapData | null
   title: string
+  isLoading?: boolean
+  hasError?: boolean
 }>()
 
 const legendLevels = [0.08, 0.25, 0.45, 0.65, 0.85]

frontend/src/features/usage/composables/useUsageData.ts

@@ -64,9 +64,6 @@ export function useUsageData(options: UseUsageDataOptions) {
     }))
   })
 
-  // 活跃度热图数据
-  const activityHeatmapData = computed(() => stats.value.activity_heatmap)
-
   // 加载统计数据（不加载记录）
   async function loadStats(dateRange?: DateRangeParams) {
     isLoadingStats.value = true
@@ -93,7 +90,7 @@ export function useUsageData(options: UseUsageDataOptions) {
           cache_stats: (statsData as any).cache_stats,
           period_start: '',
           period_end: '',
-          activity_heatmap: statsData.activity_heatmap || null
+          activity_heatmap: null
         }
 
         modelStats.value = modelData.map(item => ({
@@ -143,7 +140,7 @@ export function useUsageData(options: UseUsageDataOptions) {
           avg_response_time: userData.avg_response_time || 0,
           period_start: '',
           period_end: '',
-          activity_heatmap: userData.activity_heatmap || null
+          activity_heatmap: null
         }
 
         modelStats.value = (userData.summary_by_model || []).map((item: any) => ({
@@ -305,7 +302,6 @@ export function useUsageData(options: UseUsageDataOptions) {
 
     // 计算属性
     enhancedModelStats,
-    activityHeatmapData,
 
     // 方法
     loadStats,

frontend/src/features/usage/types.ts

@@ -1,5 +1,3 @@
-import type { ActivityHeatmap } from '@/types/activity'
-
 // 统计数据状态
 export interface UsageStatsState {
   total_requests: number
@@ -17,7 +15,6 @@ export interface UsageStatsState {
   }
   period_start: string
   period_end: string
-  activity_heatmap: ActivityHeatmap | null
 }
 
 // 模型统计
@@ -115,7 +112,6 @@ export function createDefaultStats(): UsageStatsState {
     error_rate: undefined,
     cache_stats: undefined,
     period_start: '',
-    period_end: '',
-    activity_heatmap: null
+    period_end: ''
   }
 }

frontend/src/views/shared/Usage.vue

@@ -5,6 +5,8 @@
       <ActivityHeatmapCard
         :data="activityHeatmapData"
         :title="isAdminPage ? '总体活跃天数' : '我的活跃天数'"
+        :is-loading="isLoadingHeatmap"
+        :has-error="heatmapError"
       />
       <IntervalTimelineCard
         :title="isAdminPage ? '请求间隔时间线' : '我的请求间隔'"
@@ -112,8 +114,11 @@ import {
 import type { PeriodValue, FilterStatusValue } from '@/features/usage/types'
 import type { UserOption } from '@/features/usage/components/UsageRecordsTable.vue'
 import { log } from '@/utils/logger'
+import type { ActivityHeatmap } from '@/types/activity'
+import { useToast } from '@/composables/useToast'
 
 const route = useRoute()
+const { warning } = useToast()
 const authStore = useAuthStore()
 
 // 判断是否是管理员页面
@@ -144,13 +149,35 @@ const {
   currentRecords,
   totalRecords,
   enhancedModelStats,
-  activityHeatmapData,
   availableModels,
   availableProviders,
   loadStats,
   loadRecords
 } = useUsageData({ isAdminPage })
 
+// 热力图状态
+const activityHeatmapData = ref<ActivityHeatmap | null>(null)
+const isLoadingHeatmap = ref(false)
+const heatmapError = ref(false)
+
+// 加载热力图数据
+async function loadHeatmapData() {
+  isLoadingHeatmap.value = true
+  heatmapError.value = false
+  try {
+    if (isAdminPage.value) {
+      activityHeatmapData.value = await usageApi.getActivityHeatmap()
+    } else {
+      activityHeatmapData.value = await meApi.getActivityHeatmap()
+    }
+  } catch (error) {
+    log.error('加载热力图数据失败:', error)
+    heatmapError.value = true
+  } finally {
+    isLoadingHeatmap.value = false
+  }
+}
+
 // 用户页面需要前端筛选
 const filteredRecords = computed(() => {
   if (!isAdminPage.value) {
@@ -335,7 +362,22 @@ const selectedRequestId = ref<string | null>(null)
 // 初始化加载
 onMounted(async () => {
   const dateRange = getDateRangeFromPeriod(selectedPeriod.value)
-  await loadStats(dateRange)
+
+  // 并行加载统计数据和热力图（使用 allSettled 避免其中一个失败影响另一个）
+  const [statsResult, heatmapResult] = await Promise.allSettled([
+    loadStats(dateRange),
+    loadHeatmapData()
+  ])
+
+  // 检查加载结果并通知用户
+  if (statsResult.status === 'rejected') {
+    log.error('加载统计数据失败:', statsResult.reason)
+    warning('统计数据加载失败，请刷新重试')
+  }
+  if (heatmapResult.status === 'rejected') {
+    log.error('加载热力图数据失败:', heatmapResult.reason)
+    // 热力图加载失败不提示，因为 UI 已显示占位符
+  }
 
   // 管理员页面加载用户列表和第一页记录
   if (isAdminPage.value) {