diff --git a/src/oj/ai/components/DifficultyGradeChart.vue b/src/oj/ai/components/DifficultyGradeChart.vue
index 51b9170..6add8be 100644
--- a/src/oj/ai/components/DifficultyGradeChart.vue
+++ b/src/oj/ai/components/DifficultyGradeChart.vue
@@ -1,145 +1,144 @@
-<template>
-  <n-card title="难度掌握情况" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        了解不同难度题目的完成等级分布
-      </n-text>
-    </template>
-    <div style="height: 300px">
-      <Bar :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { Bar } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import type { Grade } from "utils/types"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
-
-const aiStore = useAIStore()
-
-// 难度和等级的顺序（后端返回的是中文）
-const difficultyOrder = ["简单", "中等", "困难"]
-const gradeOrder: Grade[] = ["S", "A", "B", "C"]
-
-// 统计每个难度-等级组合的题目数量
-const matrix = computed(() => {
-  const result: { [difficulty: string]: { [grade: string]: number } } = {}
-
-  // 初始化矩阵
-  difficultyOrder.forEach((diff) => {
-    result[diff] = {}
-    gradeOrder.forEach((grade) => {
-      result[diff][grade] = 0
-    })
-  })
-
-  // 统计数据
-  aiStore.detailsData.solved.forEach((item) => {
-    const diff = item.difficulty
-    const grade = item.grade
-    if (diff && grade && result[diff]) {
-      result[diff][grade]++
-    }
-  })
-
-  return result
-})
-
-const show = computed(() => {
-  return aiStore.detailsData.solved.length > 0
-})
-
-// 为每个等级准备数据集
-const data = computed(() => {
-  // 为每个等级生成一个 dataset
-  const datasets = gradeOrder.map((grade) => {
-    return {
-      label: `等级 ${grade}`,
-      data: difficultyOrder.map((diff) => matrix.value[diff][grade]),
-      backgroundColor: getGradeColor(grade),
-      borderColor: getGradeColor(grade),
-      borderWidth: 1,
-    }
-  })
-
-  return {
-    labels: difficultyOrder,
-    datasets,
-  }
-})
-
-// 根据等级返回对应的颜色
-function getGradeColor(grade: Grade): string {
-  const colors: { [key in Grade]: string } = {
-    S: "#FF6384",
-    A: "#FFCE56",
-    B: "#36A2EB",
-    C: "#95F204",
-  }
-  return colors[grade]
-}
-
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  interaction: {
-    intersect: false,
-    mode: "index" as const,
-  },
-  scales: {
-    x: {
-      stacked: true,
-      grid: {
-        display: false,
-      },
-    },
-    y: {
-      stacked: true,
-      ticks: {
-        stepSize: 1,
-      },
-      title: {
-        display: true,
-        text: "题目数量",
-      },
-    },
-  },
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom" as const,
-      labels: {
-        boxWidth: 12,
-        padding: 8,
-        font: {
-          size: 11,
-        },
-      },
-    },
-    title: {
-      display: false,
-    },
-    tooltip: {
-      callbacks: {
-        footer: (items: any[]) => {
-          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
-          return `该难度总计: ${total} 题`
-        },
-      },
-    },
-  },
-}
-</script>
-
+<template>
+  <n-card title="难度掌握情况" size="small" v-if="show">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">
+        了解不同难度题目的完成等级分布
+      </n-text>
+    </template>
+    <div style="height: 300px">
+      <Bar :data="data" :options="options" />
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { Bar } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js"
+import { useAIStore } from "oj/store/ai"
+import type { Grade } from "utils/types"
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const aiStore = useAIStore()
+
+// 难度和等级的顺序（后端返回的是中文）
+const difficultyOrder = ["简单", "中等", "困难"]
+const gradeOrder: Grade[] = ["S", "A", "B", "C"]
+
+// 统计每个难度-等级组合的题目数量
+const matrix = computed(() => {
+  const result: { [difficulty: string]: { [grade: string]: number } } = {}
+
+  // 初始化矩阵
+  difficultyOrder.forEach((diff) => {
+    result[diff] = {}
+    gradeOrder.forEach((grade) => {
+      result[diff][grade] = 0
+    })
+  })
+
+  // 统计数据
+  aiStore.detailsData.solved.forEach((item) => {
+    const diff = item.difficulty
+    const grade = item.grade
+    if (diff && grade && result[diff]) {
+      result[diff][grade]++
+    }
+  })
+
+  return result
+})
+
+const show = computed(() => {
+  return aiStore.detailsData.solved.length > 0
+})
+
+// 为每个等级准备数据集
+const data = computed(() => {
+  // 为每个等级生成一个 dataset
+  const datasets = gradeOrder.map((grade) => {
+    return {
+      label: `等级 ${grade}`,
+      data: difficultyOrder.map((diff) => matrix.value[diff][grade]),
+      backgroundColor: getGradeColor(grade),
+      borderColor: getGradeColor(grade),
+      borderWidth: 1,
+    }
+  })
+
+  return {
+    labels: difficultyOrder,
+    datasets,
+  }
+})
+
+// 根据等级返回对应的颜色
+function getGradeColor(grade: Grade): string {
+  const colors: { [key in Grade]: string } = {
+    S: "#FF6384",
+    A: "#FFCE56",
+    B: "#36A2EB",
+    C: "#95F204",
+  }
+  return colors[grade]
+}
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    intersect: false,
+    mode: "index" as const,
+  },
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        display: false,
+      },
+    },
+    y: {
+      stacked: true,
+      ticks: {
+        stepSize: 1,
+      },
+      title: {
+        display: true,
+        text: "题目数量",
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: "bottom" as const,
+      labels: {
+        boxWidth: 12,
+        padding: 8,
+        font: {
+          size: 11,
+        },
+      },
+    },
+    title: {
+      display: false,
+    },
+    tooltip: {
+      callbacks: {
+        footer: (items: any[]) => {
+          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
+          return `该难度总计: ${total} 题`
+        },
+      },
+    },
+  },
+}
+</script>
diff --git a/src/oj/ai/components/DurationChart.vue b/src/oj/ai/components/DurationChart.vue
index e1912d4..ddc5aff 100644
--- a/src/oj/ai/components/DurationChart.vue
+++ b/src/oj/ai/components/DurationChart.vue
@@ -1,9 +1,7 @@
 <template>
   <n-card :title="title" size="small">
     <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        全面评估学习情况
-      </n-text>
+      <n-text depth="3" style="font-size: 12px"> 全面评估学习情况 </n-text>
     </template>
     <div class="chart">
       <Chart type="bar" :data="data" :options="options" />
@@ -173,11 +171,20 @@ const options = computed<ChartOptions<"bar" | "line">>(() => {
             return `${dsLabel}: ${ctx.formattedValue}`
           },
           footer: (items: TooltipItem<"bar">[]) => {
-            const barItems = items.filter(item => (item.dataset as any).yAxisID === "y")
+            const barItems = items.filter(
+              (item) => (item.dataset as any).yAxisID === "y",
+            )
             if (barItems.length >= 2) {
-              const problemCount = barItems.find(item => item.dataset.label === "完成题目数")?.parsed.y || 0
-              const submissionCount = barItems.find(item => item.dataset.label === "总提交次数")?.parsed.y || 0
-              const efficiency = submissionCount > 0 ? ((problemCount / submissionCount) * 100).toFixed(1) : "0"
+              const problemCount =
+                barItems.find((item) => item.dataset.label === "完成题目数")
+                  ?.parsed.y || 0
+              const submissionCount =
+                barItems.find((item) => item.dataset.label === "总提交次数")
+                  ?.parsed.y || 0
+              const efficiency =
+                submissionCount > 0
+                  ? ((problemCount / submissionCount) * 100).toFixed(1)
+                  : "0"
               return `AC率: ${efficiency}%`
             }
             return ""
diff --git a/src/oj/ai/components/EfficiencyChart.vue b/src/oj/ai/components/EfficiencyChart.vue
index 3bbb2c6..217b808 100644
--- a/src/oj/ai/components/EfficiencyChart.vue
+++ b/src/oj/ai/components/EfficiencyChart.vue
@@ -1,236 +1,234 @@
-<template>
-  <n-card :title="title" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        反映刷题质量提升
-      </n-text>
-    </template>
-    <div class="chart">
-      <Chart type="line" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartData, ChartOptions, TooltipItem } from "chart.js"
-import { Chart } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { parseTime } from "utils/functions"
-
-// 注册折线图所需的 Chart.js 组件
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-)
-
-const aiStore = useAIStore()
-
-const title = computed(() => {
-  if (aiStore.duration === "months:2") {
-    return "过去两个月的每周提交效率"
-  } else if (aiStore.duration === "months:6") {
-    return "过去半年的每月提交效率"
-  } else if (aiStore.duration === "years:1") {
-    return "过去一年的每月提交效率"
-  } else {
-    return "过去四周的提交效率"
-  }
-})
-
-// 判断是否有数据
-const show = computed(() => {
-  return aiStore.durationData.length > 0
-})
-
-// 计算提交效率数据
-const efficiencyData = computed(() => {
-  return aiStore.durationData.map((duration) => {
-    const problemCount = duration.problem_count || 0
-    const submissionCount = duration.submission_count || 0
-    
-    // 计算效率：提交次数/完成题目数
-    // 值越接近1，说明一次AC率越高
-    const efficiency = problemCount > 0 ? submissionCount / problemCount : 0
-    
-    // 计算一次AC率（百分比）
-    const onePassRate = problemCount > 0 ? (problemCount / submissionCount) * 100 : 0
-    
-    return {
-      label: [
-        parseTime(duration.start, "M月D日"),
-        parseTime(duration.end, "M月D日"),
-      ].join("～"),
-      efficiency: efficiency,
-      onePassRate: onePassRate,
-      problemCount: problemCount,
-      submissionCount: submissionCount,
-    }
-  })
-})
-
-// 图表数据
-const data = computed<ChartData<"line">>(() => {
-  const efficiency = efficiencyData.value
-
-  return {
-    labels: efficiency.map((e) => e.label),
-    datasets: [
-      {
-        label: "平均提交次数",
-        data: efficiency.map((e) => e.efficiency),
-        borderColor: "rgb(99, 102, 241)",
-        backgroundColor: "rgba(99, 102, 241, 0.1)",
-        tension: 0.4,
-        fill: true,
-        pointRadius: 5,
-        pointHoverRadius: 7,
-        borderWidth: 2.5,
-        pointBackgroundColor: "rgb(99, 102, 241)",
-        pointBorderColor: "#fff",
-        pointBorderWidth: 2,
-        yAxisID: "y",
-      },
-      {
-        label: "一次AC率",
-        data: efficiency.map((e) => e.onePassRate),
-        borderColor: "rgb(34, 197, 94)",
-        backgroundColor: "rgba(34, 197, 94, 0.1)",
-        tension: 0.4,
-        fill: true,
-        pointRadius: 5,
-        pointHoverRadius: 7,
-        borderWidth: 2.5,
-        pointBackgroundColor: "rgb(34, 197, 94)",
-        pointBorderColor: "#fff",
-        pointBorderWidth: 2,
-        yAxisID: "y1",
-      },
-    ],
-  }
-})
-
-// 图表配置
-const options = computed<ChartOptions<"line">>(() => {
-  return {
-    responsive: true,
-    maintainAspectRatio: false,
-    interaction: {
-      mode: "index",
-      intersect: false,
-    },
-    scales: {
-      x: {
-        ticks: {
-          maxRotation: 0,
-          minRotation: 0,
-          autoSkip: true,
-        },
-      },
-      y: {
-        type: "linear",
-        position: "left",
-        title: {
-          display: true,
-          text: "平均提交次数（次/题）",
-          font: {
-            size: 13,
-          },
-        },
-        beginAtZero: true,
-        ticks: {
-          callback: function (value: string | number) {
-            return Number(value).toFixed(1)
-          },
-        },
-      },
-      y1: {
-        type: "linear",
-        position: "right",
-        min: 0,
-        max: 100,
-        title: {
-          display: true,
-          text: "一次AC率（%）",
-          font: {
-            size: 13,
-          },
-        },
-        ticks: {
-          callback: function (value: string | number) {
-            return Number(value).toFixed(0) + "%"
-          },
-        },
-        grid: {
-          drawOnChartArea: false,
-        },
-      },
-    },
-    plugins: {
-      title: {
-        display: false,
-      },
-      tooltip: {
-        backgroundColor: "rgba(0, 0, 0, 0.8)",
-        padding: 12,
-        callbacks: {
-          label: function (ctx: TooltipItem<"line">) {
-            const index = ctx.dataIndex
-            const item = efficiencyData.value[index]
-            const dsLabel = ctx.dataset.label || ""
-
-            if (ctx.datasetIndex === 0) {
-              // 平均提交次数
-              return [
-                `${dsLabel}: ${item.efficiency.toFixed(2)} 次/题`,
-                `完成题目: ${item.problemCount} 题`,
-                `总提交: ${item.submissionCount} 次`,
-              ]
-            } else {
-              // 一次AC率
-              return [
-                `${dsLabel}: ${item.onePassRate.toFixed(1)}%`,
-                `提示: 值越高表示刷题质量越好`,
-              ]
-            }
-          },
-        },
-      },
-      legend: {
-        display: true,
-        position: "bottom" as const,
-        labels: {
-          boxWidth: 12,
-          boxHeight: 12,
-          padding: 8,
-          font: {
-            size: 12,
-          },
-        },
-      },
-    },
-  }
-})
-</script>
-<style scoped>
-.chart {
-  height: 300px;
-  width: 100%;
-}
-</style>
-
+<template>
+  <n-card :title="title" size="small" v-if="show">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">反映刷题质量提升</n-text>
+    </template>
+    <div class="chart">
+      <Chart type="line" :data="data" :options="options" />
+    </div>
+  </n-card>
+</template>
+<script setup lang="ts">
+import type { ChartData, ChartOptions, TooltipItem } from "chart.js"
+import { Chart } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+} from "chart.js"
+import { useAIStore } from "oj/store/ai"
+import { parseTime } from "utils/functions"
+
+// 注册折线图所需的 Chart.js 组件
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+)
+
+const aiStore = useAIStore()
+
+const title = computed(() => {
+  if (aiStore.duration === "months:2") {
+    return "过去两个月的每周提交效率"
+  } else if (aiStore.duration === "months:6") {
+    return "过去半年的每月提交效率"
+  } else if (aiStore.duration === "years:1") {
+    return "过去一年的每月提交效率"
+  } else {
+    return "过去四周的提交效率"
+  }
+})
+
+// 判断是否有数据
+const show = computed(() => {
+  return aiStore.durationData.length > 0
+})
+
+// 计算提交效率数据
+const efficiencyData = computed(() => {
+  return aiStore.durationData.map((duration) => {
+    const problemCount = duration.problem_count || 0
+    const submissionCount = duration.submission_count || 0
+
+    // 计算效率：提交次数/完成题目数
+    // 值越接近1，说明一次AC率越高
+    const efficiency = problemCount > 0 ? submissionCount / problemCount : 0
+
+    // 计算一次AC率（百分比）
+    const onePassRate =
+      problemCount > 0 ? (problemCount / submissionCount) * 100 : 0
+
+    return {
+      label: [
+        parseTime(duration.start, "M月D日"),
+        parseTime(duration.end, "M月D日"),
+      ].join("～"),
+      efficiency: efficiency,
+      onePassRate: onePassRate,
+      problemCount: problemCount,
+      submissionCount: submissionCount,
+    }
+  })
+})
+
+// 图表数据
+const data = computed<ChartData<"line">>(() => {
+  const efficiency = efficiencyData.value
+
+  return {
+    labels: efficiency.map((e) => e.label),
+    datasets: [
+      {
+        label: "平均提交次数",
+        data: efficiency.map((e) => e.efficiency),
+        borderColor: "rgb(99, 102, 241)",
+        backgroundColor: "rgba(99, 102, 241, 0.1)",
+        tension: 0.4,
+        fill: true,
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        borderWidth: 2.5,
+        pointBackgroundColor: "rgb(99, 102, 241)",
+        pointBorderColor: "#fff",
+        pointBorderWidth: 2,
+        yAxisID: "y",
+      },
+      {
+        label: "一次AC率",
+        data: efficiency.map((e) => e.onePassRate),
+        borderColor: "rgb(34, 197, 94)",
+        backgroundColor: "rgba(34, 197, 94, 0.1)",
+        tension: 0.4,
+        fill: true,
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        borderWidth: 2.5,
+        pointBackgroundColor: "rgb(34, 197, 94)",
+        pointBorderColor: "#fff",
+        pointBorderWidth: 2,
+        yAxisID: "y1",
+      },
+    ],
+  }
+})
+
+// 图表配置
+const options = computed<ChartOptions<"line">>(() => {
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: "index",
+      intersect: false,
+    },
+    scales: {
+      x: {
+        ticks: {
+          maxRotation: 0,
+          minRotation: 0,
+          autoSkip: true,
+        },
+      },
+      y: {
+        type: "linear",
+        position: "left",
+        title: {
+          display: true,
+          text: "平均提交次数（次/题）",
+          font: {
+            size: 13,
+          },
+        },
+        beginAtZero: true,
+        ticks: {
+          callback: function (value: string | number) {
+            return Number(value).toFixed(1)
+          },
+        },
+      },
+      y1: {
+        type: "linear",
+        position: "right",
+        min: 0,
+        max: 100,
+        title: {
+          display: true,
+          text: "一次AC率（%）",
+          font: {
+            size: 13,
+          },
+        },
+        ticks: {
+          callback: function (value: string | number) {
+            return Number(value).toFixed(0) + "%"
+          },
+        },
+        grid: {
+          drawOnChartArea: false,
+        },
+      },
+    },
+    plugins: {
+      title: {
+        display: false,
+      },
+      tooltip: {
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        padding: 12,
+        callbacks: {
+          label: function (ctx: TooltipItem<"line">) {
+            const index = ctx.dataIndex
+            const item = efficiencyData.value[index]
+            const dsLabel = ctx.dataset.label || ""
+
+            if (ctx.datasetIndex === 0) {
+              // 平均提交次数
+              return [
+                `${dsLabel}: ${item.efficiency.toFixed(2)} 次/题`,
+                `完成题目: ${item.problemCount} 题`,
+                `总提交: ${item.submissionCount} 次`,
+              ]
+            } else {
+              // 一次AC率
+              return [
+                `${dsLabel}: ${item.onePassRate.toFixed(1)}%`,
+                `提示: 值越高表示刷题质量越好`,
+              ]
+            }
+          },
+        },
+      },
+      legend: {
+        display: true,
+        position: "bottom" as const,
+        labels: {
+          boxWidth: 12,
+          boxHeight: 12,
+          padding: 8,
+          font: {
+            size: 12,
+          },
+        },
+      },
+    },
+  }
+})
+</script>
+<style scoped>
+.chart {
+  height: 300px;
+  width: 100%;
+}
+</style>
diff --git a/src/oj/ai/components/Heatmap.vue b/src/oj/ai/components/Heatmap.vue
index 8ab9cc3..57c50b0 100644
--- a/src/oj/ai/components/Heatmap.vue
+++ b/src/oj/ai/components/Heatmap.vue
@@ -1,9 +1,7 @@
 <template>
   <n-card title="过去一年的提交热力图" size="small">
     <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        激励持续学习
-      </n-text>
+      <n-text depth="3" style="font-size: 12px">激励持续学习</n-text>
     </template>
     <n-spin :show="aiStore.loading.heatmap">
       <div class="heatmap-container" ref="containerRef">
diff --git a/src/oj/ai/components/ProgressChart.vue b/src/oj/ai/components/ProgressChart.vue
index 4ccefd1..3f55eed 100644
--- a/src/oj/ai/components/ProgressChart.vue
+++ b/src/oj/ai/components/ProgressChart.vue
@@ -1,9 +1,7 @@
 <template>
   <n-card :title="title" size="small" v-if="show">
     <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        追踪学习成长轨迹
-      </n-text>
+      <n-text depth="3" style="font-size: 12px">追踪学习成长轨迹</n-text>
     </template>
     <div class="chart">
       <Chart type="line" :data="data" :options="options" />
@@ -81,13 +79,14 @@ const progressData = computed(() => {
 
     // 计算本期等级的权重值
     const currentGradeValue = gradeOrder.indexOf(duration.grade || "C")
-    
+
     // 累加加权等级
     totalWeightedGrade += currentGradeValue * problemCount
     totalProblems += problemCount
 
     // 计算累计平均等级
-    const avgGradeValue = totalProblems > 0 ? totalWeightedGrade / totalProblems : 0
+    const avgGradeValue =
+      totalProblems > 0 ? totalWeightedGrade / totalProblems : 0
 
     return {
       label: [
diff --git a/src/oj/ai/components/RankDistributionChart.vue b/src/oj/ai/components/RankDistributionChart.vue
index bb00053..614f78f 100644
--- a/src/oj/ai/components/RankDistributionChart.vue
+++ b/src/oj/ai/components/RankDistributionChart.vue
@@ -1,134 +1,132 @@
-<template>
-  <n-card title="解题排名分布" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        了解解题速度和竞争力
-      </n-text>
-    </template>
-    <div style="height: 300px">
-      <Pie :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { Pie } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-
-ChartJS.register(ArcElement, Title, Tooltip, Legend)
-
-const aiStore = useAIStore()
-
-// 排名区间定义
-const RANK_RANGES = [
-  { label: "前10%", min: 0, max: 10, color: "#FF6384" },
-  { label: "10-30%", min: 10, max: 30, color: "#FFCE56" },
-  { label: "30-50%", min: 30, max: 50, color: "#36A2EB" },
-  { label: "50-70%", min: 50, max: 70, color: "#4BC0C0" },
-  { label: "70%以后", min: 70, max: 100, color: "#9966FF" },
-]
-
-// 计算每道题的排名百分位并分类
-const rankDistribution = computed(() => {
-  const distribution = RANK_RANGES.map((range) => ({
-    ...range,
-    count: 0,
-    problems: [] as string[],
-  }))
-
-  aiStore.detailsData.solved.forEach((item) => {
-    const rank = item.rank
-    const acCount = item.ac_count
-
-    if (rank && acCount && acCount > 0) {
-      // 计算百分位：(rank / acCount) * 100
-      // 例如：第5名/共100人 = 5%
-      const percentile = (rank / acCount) * 100
-
-      // 找到对应的区间
-      const rangeIndex = RANK_RANGES.findIndex(
-        (r) => percentile >= r.min && percentile < r.max,
-      )
-
-      if (rangeIndex !== -1) {
-        distribution[rangeIndex].count++
-        distribution[rangeIndex].problems.push(
-          `${item.problem.display_id}: ${item.problem.title}`,
-        )
-      }
-    }
-  })
-
-  return distribution
-})
-
-const show = computed(() => {
-  return aiStore.detailsData.solved.length > 0
-})
-
-const data = computed(() => {
-  return {
-    labels: RANK_RANGES.map((r) => r.label),
-    datasets: [
-      {
-        label: "题目数量",
-        data: rankDistribution.value.map((r) => r.count),
-        backgroundColor: RANK_RANGES.map((r) => r.color),
-        borderColor: RANK_RANGES.map((r) => r.color),
-        borderWidth: 1,
-      },
-    ],
-  }
-})
-
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom" as const,
-      labels: {
-        boxWidth: 12,
-        boxHeight: 12,
-        padding: 8,
-        font: {
-          size: 12,
-        },
-      },
-    },
-    title: {
-      display: false,
-    },
-    tooltip: {
-      callbacks: {
-        label: (context: any) => {
-          const count = context.parsed
-          const total = rankDistribution.value.reduce((sum, r) => sum + r.count, 0)
-          const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : "0.0"
-          const label = context.label || ""
-          return `${label}: ${count} 道题 (${percentage}%)`
-        },
-        afterLabel: (context: any) => {
-          const index = context.dataIndex
-          const problems = rankDistribution.value[index].problems
-          if (problems.length > 0 && problems.length <= 5) {
-            return problems
-          } else if (problems.length > 5) {
-            return [...problems.slice(0, 3), `... 还有 ${problems.length - 3} 道题`]
-          }
-          return ""
-        },
-      },
-    },
-  },
-}
-</script>
-
+<template>
+  <n-card title="解题排名分布" size="small" v-if="show">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">了解解题速度和竞争力</n-text>
+    </template>
+    <div style="height: 300px">
+      <Pie :data="data" :options="options" />
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { Pie } from "vue-chartjs"
+import { Chart as ChartJS, ArcElement, Title, Tooltip, Legend } from "chart.js"
+import { useAIStore } from "oj/store/ai"
+
+ChartJS.register(ArcElement, Title, Tooltip, Legend)
+
+const aiStore = useAIStore()
+
+// 排名区间定义
+const RANK_RANGES = [
+  { label: "前10%", min: 0, max: 10, color: "#FF6384" },
+  { label: "10-30%", min: 10, max: 30, color: "#FFCE56" },
+  { label: "30-50%", min: 30, max: 50, color: "#36A2EB" },
+  { label: "50-70%", min: 50, max: 70, color: "#4BC0C0" },
+  { label: "70%以后", min: 70, max: 100, color: "#9966FF" },
+]
+
+// 计算每道题的排名百分位并分类
+const rankDistribution = computed(() => {
+  const distribution = RANK_RANGES.map((range) => ({
+    ...range,
+    count: 0,
+    problems: [] as string[],
+  }))
+
+  aiStore.detailsData.solved.forEach((item) => {
+    const rank = item.rank
+    const acCount = item.ac_count
+
+    if (rank && acCount && acCount > 0) {
+      // 计算百分位：(rank / acCount) * 100
+      // 例如：第5名/共100人 = 5%
+      const percentile = (rank / acCount) * 100
+
+      // 找到对应的区间
+      const rangeIndex = RANK_RANGES.findIndex(
+        (r) => percentile >= r.min && percentile < r.max,
+      )
+
+      if (rangeIndex !== -1) {
+        distribution[rangeIndex].count++
+        distribution[rangeIndex].problems.push(
+          `${item.problem.display_id}: ${item.problem.title}`,
+        )
+      }
+    }
+  })
+
+  return distribution
+})
+
+const show = computed(() => {
+  return aiStore.detailsData.solved.length > 0
+})
+
+const data = computed(() => {
+  return {
+    labels: RANK_RANGES.map((r) => r.label),
+    datasets: [
+      {
+        label: "题目数量",
+        data: rankDistribution.value.map((r) => r.count),
+        backgroundColor: RANK_RANGES.map((r) => r.color),
+        borderColor: RANK_RANGES.map((r) => r.color),
+        borderWidth: 1,
+      },
+    ],
+  }
+})
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: "bottom" as const,
+      labels: {
+        boxWidth: 12,
+        boxHeight: 12,
+        padding: 8,
+        font: {
+          size: 12,
+        },
+      },
+    },
+    title: {
+      display: false,
+    },
+    tooltip: {
+      callbacks: {
+        label: (context: any) => {
+          const count = context.parsed
+          const total = rankDistribution.value.reduce(
+            (sum, r) => sum + r.count,
+            0,
+          )
+          const percentage =
+            total > 0 ? ((count / total) * 100).toFixed(1) : "0.0"
+          const label = context.label || ""
+          return `${label}: ${count} 道题 (${percentage}%)`
+        },
+        afterLabel: (context: any) => {
+          const index = context.dataIndex
+          const problems = rankDistribution.value[index].problems
+          if (problems.length > 0 && problems.length <= 5) {
+            return problems
+          } else if (problems.length > 5) {
+            return [
+              ...problems.slice(0, 3),
+              `... 还有 ${problems.length - 3} 道题`,
+            ]
+          }
+          return ""
+        },
+      },
+    },
+  },
+}
+</script>
diff --git a/src/oj/ai/components/StreakStats.vue b/src/oj/ai/components/StreakStats.vue
index 7e7541a..92587c0 100644
--- a/src/oj/ai/components/StreakStats.vue
+++ b/src/oj/ai/components/StreakStats.vue
@@ -1,178 +1,177 @@
-<template>
-  <n-card title="连续做题统计" size="small">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        激励持续学习
-      </n-text>
-    </template>
-    <n-spin :show="aiStore.loading.heatmap">
-      <n-grid :cols="2" :x-gap="12" :y-gap="12">
-        <n-gi>
-          <n-statistic label="当前连续" :value="currentStreak">
-            <template #suffix>
-              <span style="font-size: 14px">天</span>
-              <span v-if="currentStreak > 0" style="font-size: 20px; margin-left: 4px">
-                🔥
-              </span>
-            </template>
-          </n-statistic>
-        </n-gi>
-        <n-gi>
-          <n-statistic label="最长连续" :value="maxStreak">
-            <template #suffix>
-              <span style="font-size: 14px">天</span>
-              <span v-if="maxStreak >= 7" style="font-size: 20px; margin-left: 4px">
-                ⭐
-              </span>
-            </template>
-          </n-statistic>
-        </n-gi>
-        <n-gi>
-          <n-statistic label="本周做题" :value="weekCount">
-            <template #suffix>
-              <span style="font-size: 14px">天</span>
-            </template>
-          </n-statistic>
-        </n-gi>
-        <n-gi>
-          <n-statistic label="本月做题" :value="monthCount">
-            <template #suffix>
-              <span style="font-size: 14px">天</span>
-            </template>
-          </n-statistic>
-        </n-gi>
-      </n-grid>
-      <n-divider style="margin: 12px 0" />
-      <n-flex vertical size="small">
-        <n-text depth="2" style="font-size: 12px">
-          <span v-if="currentStreak === 0">
-            开始做题，建立学习连续记录！
-          </span>
-          <span v-else-if="currentStreak < 3">
-            继续保持，争取连续3天！
-          </span>
-          <span v-else-if="currentStreak < 7">
-            很棒！继续保持一周连续记录！
-          </span>
-          <span v-else-if="currentStreak < 30">
-            太棒了！坚持满30天将获得「持之以恒」成就！
-          </span>
-          <span v-else>
-            🎉 恭喜你！你已经连续学习 {{ currentStreak }} 天，真的非常厉害！
-          </span>
-        </n-text>
-      </n-flex>
-    </n-spin>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useAIStore } from "oj/store/ai"
-
-const aiStore = useAIStore()
-
-// 计算连续天数
-const streakData = computed(() => {
-  const heatmap = aiStore.heatmapData
-  if (!heatmap || heatmap.length === 0) {
-    return {
-      currentStreak: 0,
-      maxStreak: 0,
-      weekCount: 0,
-      monthCount: 0,
-    }
-  }
-
-  // 按时间戳排序
-  const sortedData = [...heatmap].sort((a, b) => a.timestamp - b.timestamp)
-
-  let currentStreak = 0
-  let maxStreak = 0
-  let tempStreak = 0
-  let lastDate: Date | null = null
-
-  const now = new Date()
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-  const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
-  const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
-
-  let weekCount = 0
-  let monthCount = 0
-
-  // 检查今天是否有做题
-  const todayData = sortedData.find((item) => {
-    const itemDate = new Date(item.timestamp)
-    return (
-      itemDate.getFullYear() === today.getFullYear() &&
-      itemDate.getMonth() === today.getMonth() &&
-      itemDate.getDate() === today.getDate()
-    )
-  })
-  const hasToday = todayData && todayData.value > 0
-
-  // 遍历数据计算连续天数
-  for (const item of sortedData) {
-    if (item.value > 0) {
-      const currentDate = new Date(item.timestamp)
-
-      // 统计本周和本月
-      if (currentDate >= weekAgo) {
-        weekCount++
-      }
-      if (currentDate >= monthAgo) {
-        monthCount++
-      }
-
-      if (lastDate === null) {
-        tempStreak = 1
-      } else {
-        const dayDiff = Math.floor(
-          (currentDate.getTime() - lastDate.getTime()) / (24 * 60 * 60 * 1000),
-        )
-        if (dayDiff === 1) {
-          tempStreak++
-        } else {
-          maxStreak = Math.max(maxStreak, tempStreak)
-          tempStreak = 1
-        }
-      }
-
-      lastDate = currentDate
-    }
-  }
-
-  maxStreak = Math.max(maxStreak, tempStreak)
-
-  // 计算当前连续天数（必须包含今天或昨天）
-  if (lastDate) {
-    const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
-    const lastDateOnly = new Date(
-      lastDate.getFullYear(),
-      lastDate.getMonth(),
-      lastDate.getDate(),
-    )
-
-    if (
-      lastDateOnly.getTime() === today.getTime() ||
-      lastDateOnly.getTime() === yesterday.getTime()
-    ) {
-      currentStreak = tempStreak
-    } else {
-      currentStreak = 0
-    }
-  }
-
-  return {
-    currentStreak,
-    maxStreak,
-    weekCount,
-    monthCount,
-  }
-})
-
-const currentStreak = computed(() => streakData.value.currentStreak)
-const maxStreak = computed(() => streakData.value.maxStreak)
-const weekCount = computed(() => streakData.value.weekCount)
-const monthCount = computed(() => streakData.value.monthCount)
-</script>
-
+<template>
+  <n-card title="连续做题统计" size="small">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">激励持续学习</n-text>
+    </template>
+    <n-spin :show="aiStore.loading.heatmap">
+      <n-grid :cols="2" :x-gap="12" :y-gap="12">
+        <n-gi>
+          <n-statistic label="当前连续" :value="currentStreak">
+            <template #suffix>
+              <span style="font-size: 14px">天</span>
+              <span
+                v-if="currentStreak > 0"
+                style="font-size: 20px; margin-left: 4px"
+              >
+                🔥
+              </span>
+            </template>
+          </n-statistic>
+        </n-gi>
+        <n-gi>
+          <n-statistic label="最长连续" :value="maxStreak">
+            <template #suffix>
+              <span style="font-size: 14px">天</span>
+              <span
+                v-if="maxStreak >= 7"
+                style="font-size: 20px; margin-left: 4px"
+              >
+                ⭐
+              </span>
+            </template>
+          </n-statistic>
+        </n-gi>
+        <n-gi>
+          <n-statistic label="本周做题" :value="weekCount">
+            <template #suffix>
+              <span style="font-size: 14px">天</span>
+            </template>
+          </n-statistic>
+        </n-gi>
+        <n-gi>
+          <n-statistic label="本月做题" :value="monthCount">
+            <template #suffix>
+              <span style="font-size: 14px">天</span>
+            </template>
+          </n-statistic>
+        </n-gi>
+      </n-grid>
+      <n-divider style="margin: 12px 0" />
+      <n-flex vertical size="small">
+        <n-text depth="2" style="font-size: 12px">
+          <span v-if="currentStreak === 0"> 开始做题，建立学习连续记录！ </span>
+          <span v-else-if="currentStreak < 3"> 继续保持，争取连续3天！ </span>
+          <span v-else-if="currentStreak < 7">
+            很棒！继续保持一周连续记录！
+          </span>
+          <span v-else-if="currentStreak < 30">
+            太棒了！坚持满30天将获得「持之以恒」成就！
+          </span>
+          <span v-else>
+            🎉 恭喜你！你已经连续学习 {{ currentStreak }} 天，真的非常厉害！
+          </span>
+        </n-text>
+      </n-flex>
+    </n-spin>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useAIStore } from "oj/store/ai"
+
+const aiStore = useAIStore()
+
+// 计算连续天数
+const streakData = computed(() => {
+  const heatmap = aiStore.heatmapData
+  if (!heatmap || heatmap.length === 0) {
+    return {
+      currentStreak: 0,
+      maxStreak: 0,
+      weekCount: 0,
+      monthCount: 0,
+    }
+  }
+
+  // 按时间戳排序
+  const sortedData = [...heatmap].sort((a, b) => a.timestamp - b.timestamp)
+
+  let currentStreak = 0
+  let maxStreak = 0
+  let tempStreak = 0
+  let lastDate: Date | null = null
+
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+  const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
+
+  let weekCount = 0
+  let monthCount = 0
+
+  // 检查今天是否有做题
+  const todayData = sortedData.find((item) => {
+    const itemDate = new Date(item.timestamp)
+    return (
+      itemDate.getFullYear() === today.getFullYear() &&
+      itemDate.getMonth() === today.getMonth() &&
+      itemDate.getDate() === today.getDate()
+    )
+  })
+  const hasToday = todayData && todayData.value > 0
+
+  // 遍历数据计算连续天数
+  for (const item of sortedData) {
+    if (item.value > 0) {
+      const currentDate = new Date(item.timestamp)
+
+      // 统计本周和本月
+      if (currentDate >= weekAgo) {
+        weekCount++
+      }
+      if (currentDate >= monthAgo) {
+        monthCount++
+      }
+
+      if (lastDate === null) {
+        tempStreak = 1
+      } else {
+        const dayDiff = Math.floor(
+          (currentDate.getTime() - lastDate.getTime()) / (24 * 60 * 60 * 1000),
+        )
+        if (dayDiff === 1) {
+          tempStreak++
+        } else {
+          maxStreak = Math.max(maxStreak, tempStreak)
+          tempStreak = 1
+        }
+      }
+
+      lastDate = currentDate
+    }
+  }
+
+  maxStreak = Math.max(maxStreak, tempStreak)
+
+  // 计算当前连续天数（必须包含今天或昨天）
+  if (lastDate) {
+    const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
+    const lastDateOnly = new Date(
+      lastDate.getFullYear(),
+      lastDate.getMonth(),
+      lastDate.getDate(),
+    )
+
+    if (
+      lastDateOnly.getTime() === today.getTime() ||
+      lastDateOnly.getTime() === yesterday.getTime()
+    ) {
+      currentStreak = tempStreak
+    } else {
+      currentStreak = 0
+    }
+  }
+
+  return {
+    currentStreak,
+    maxStreak,
+    weekCount,
+    monthCount,
+  }
+})
+
+const currentStreak = computed(() => streakData.value.currentStreak)
+const maxStreak = computed(() => streakData.value.maxStreak)
+const weekCount = computed(() => streakData.value.weekCount)
+const monthCount = computed(() => streakData.value.monthCount)
+</script>
diff --git a/src/oj/ai/components/TagsRadarChart.vue b/src/oj/ai/components/TagsRadarChart.vue
index d54550b..42b6e37 100644
--- a/src/oj/ai/components/TagsRadarChart.vue
+++ b/src/oj/ai/components/TagsRadarChart.vue
@@ -1,9 +1,7 @@
 <template>
   <n-card :title="title" size="small" v-if="show">
     <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        可视化知识点覆盖面
-      </n-text>
+      <n-text depth="3" style="font-size: 12px">可视化知识点覆盖面</n-text>
     </template>
     <div class="chart">
       <Radar :data="data" :options="options" />
diff --git a/src/oj/ai/components/TimeActivityHeatmap.vue b/src/oj/ai/components/TimeActivityHeatmap.vue
index 4c1a308..c201bb7 100644
--- a/src/oj/ai/components/TimeActivityHeatmap.vue
+++ b/src/oj/ai/components/TimeActivityHeatmap.vue
@@ -1,153 +1,152 @@
-<template>
-  <n-card title="时间活跃度分析" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">
-        发现最佳学习时段
-      </n-text>
-    </template>
-    <div style="height: 300px">
-      <Bar :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { Bar } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
-
-const aiStore = useAIStore()
-
-const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
-const TIME_PERIODS = [
-  { label: "凌晨(0-6)", start: 0, end: 6 },
-  { label: "上午(6-12)", start: 6, end: 12 },
-  { label: "下午(12-18)", start: 12, end: 18 },
-  { label: "晚上(18-24)", start: 18, end: 24 },
-]
-
-// 统计每个星期几和时间段的做题数量
-const activityMatrix = computed(() => {
-  const matrix: { [weekday: number]: { [period: number]: number } } = {}
-
-  // 初始化矩阵
-  for (let i = 0; i < 7; i++) {
-    matrix[i] = {}
-    for (let j = 0; j < TIME_PERIODS.length; j++) {
-      matrix[i][j] = 0
-    }
-  }
-
-  // 统计数据
-  aiStore.detailsData.solved.forEach((item) => {
-    const date = new Date(item.ac_time)
-    const weekday = date.getDay() // 0-6，0是周日
-    const hour = date.getHours() // 0-23
-
-    // 找到对应的时间段
-    const periodIndex = TIME_PERIODS.findIndex(
-      (p) => hour >= p.start && hour < p.end,
-    )
-    if (periodIndex !== -1) {
-      matrix[weekday][periodIndex]++
-    }
-  })
-
-  return matrix
-})
-
-const show = computed(() => {
-  return aiStore.detailsData.solved.length > 0
-})
-
-// 为每个时间段准备数据集
-const data = computed(() => {
-  const datasets = TIME_PERIODS.map((period, periodIndex) => {
-    return {
-      label: period.label,
-      data: WEEKDAYS.map((_, weekday) => activityMatrix.value[weekday][periodIndex]),
-      backgroundColor: getTimePeriodColor(periodIndex),
-      borderColor: getTimePeriodColor(periodIndex),
-      borderWidth: 1,
-    }
-  })
-
-  return {
-    labels: WEEKDAYS,
-    datasets,
-  }
-})
-
-// 根据时间段返回对应的颜色
-function getTimePeriodColor(periodIndex: number): string {
-  const colors = [
-    "#9D9D9D", // 凌晨 - 灰色
-    "#FFD700", // 上午 - 金色
-    "#4ECDC4", // 下午 - 青色
-    "#5B5F97", // 晚上 - 深蓝紫
-  ]
-  return colors[periodIndex] || "#999"
-}
-
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  interaction: {
-    intersect: false,
-    mode: "index" as const,
-  },
-  scales: {
-    x: {
-      stacked: true,
-      grid: {
-        display: false,
-      },
-    },
-    y: {
-      stacked: true,
-      ticks: {
-        stepSize: 1,
-      },
-      title: {
-        display: true,
-        text: "完成题目数",
-      },
-    },
-  },
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom" as const,
-      labels: {
-        boxWidth: 12,
-        padding: 8,
-        font: {
-          size: 11,
-        },
-      },
-    },
-    title: {
-      display: false,
-    },
-    tooltip: {
-      callbacks: {
-        footer: (items: any[]) => {
-          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
-          return `当天总计: ${total} 题`
-        },
-      },
-    },
-  },
-}
-</script>
-
+<template>
+  <n-card title="时间活跃度分析" size="small" v-if="show">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">发现最佳学习时段</n-text>
+    </template>
+    <div style="height: 300px">
+      <Bar :data="data" :options="options" />
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { Bar } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js"
+import { useAIStore } from "oj/store/ai"
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const aiStore = useAIStore()
+
+const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
+const TIME_PERIODS = [
+  { label: "凌晨(0-6)", start: 0, end: 6 },
+  { label: "上午(6-12)", start: 6, end: 12 },
+  { label: "下午(12-18)", start: 12, end: 18 },
+  { label: "晚上(18-24)", start: 18, end: 24 },
+]
+
+// 统计每个星期几和时间段的做题数量
+const activityMatrix = computed(() => {
+  const matrix: { [weekday: number]: { [period: number]: number } } = {}
+
+  // 初始化矩阵
+  for (let i = 0; i < 7; i++) {
+    matrix[i] = {}
+    for (let j = 0; j < TIME_PERIODS.length; j++) {
+      matrix[i][j] = 0
+    }
+  }
+
+  // 统计数据
+  aiStore.detailsData.solved.forEach((item) => {
+    const date = new Date(item.ac_time)
+    const weekday = date.getDay() // 0-6，0是周日
+    const hour = date.getHours() // 0-23
+
+    // 找到对应的时间段
+    const periodIndex = TIME_PERIODS.findIndex(
+      (p) => hour >= p.start && hour < p.end,
+    )
+    if (periodIndex !== -1) {
+      matrix[weekday][periodIndex]++
+    }
+  })
+
+  return matrix
+})
+
+const show = computed(() => {
+  return aiStore.detailsData.solved.length > 0
+})
+
+// 为每个时间段准备数据集
+const data = computed(() => {
+  const datasets = TIME_PERIODS.map((period, periodIndex) => {
+    return {
+      label: period.label,
+      data: WEEKDAYS.map(
+        (_, weekday) => activityMatrix.value[weekday][periodIndex],
+      ),
+      backgroundColor: getTimePeriodColor(periodIndex),
+      borderColor: getTimePeriodColor(periodIndex),
+      borderWidth: 1,
+    }
+  })
+
+  return {
+    labels: WEEKDAYS,
+    datasets,
+  }
+})
+
+// 根据时间段返回对应的颜色
+function getTimePeriodColor(periodIndex: number): string {
+  const colors = [
+    "#9D9D9D", // 凌晨 - 灰色
+    "#FFD700", // 上午 - 金色
+    "#4ECDC4", // 下午 - 青色
+    "#5B5F97", // 晚上 - 深蓝紫
+  ]
+  return colors[periodIndex] || "#999"
+}
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    intersect: false,
+    mode: "index" as const,
+  },
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        display: false,
+      },
+    },
+    y: {
+      stacked: true,
+      ticks: {
+        stepSize: 1,
+      },
+      title: {
+        display: true,
+        text: "完成题目数",
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: "bottom" as const,
+      labels: {
+        boxWidth: 12,
+        padding: 8,
+        font: {
+          size: 11,
+        },
+      },
+    },
+    title: {
+      display: false,
+    },
+    tooltip: {
+      callbacks: {
+        footer: (items: any[]) => {
+          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
+          return `当天总计: ${total} 题`
+        },
+      },
+    },
+  },
+}
+</script>