refactor(智能分析): 重排版面，砍掉重复的三张周期图，补三个新维度

原来 8 张图挤在两列大网格里，左列还套了一层两列小网格 —— 四张小图各自只有半页的
一半宽，"难度掌握情况"的标题被挤断成两行、周期图的 x 轴标签斜着叠在一起、一年热力图
53 列塞进半宽几乎看不清。改成单列为主，宽的图给全宽，窄的图两两并排。

砍掉的重复：进步曲线 / 提交效率 / 周期综合读的是同一个 durationData，半年视图统共
6 个桶四个字段，摊成三张卡六条曲线还都是双轴。合并成一张：柱是完成题目数和总提交数，
线是 AC 率，等级进 tooltip（S/A/B/C 四档离散值连成折线读不出东西，逐题等级表格里有）。

同期解题排名分布也砍了：五片扇形对十几道题做统计本来就是噪声，而排名逐题列在
SolvedTable 里，饼图没有增加任何信息。

换形式：
- 标签雷达图 → 横向条形。雷达对比较大小是最差的形式之一，原来还把值归一化成"占最多
  标签的百分比"，第一名恒为 100%，等于只画了个排序。现在画真实题数。
- 难度掌握情况 → 难度分布。去掉叠在里面的 S/A/B/C 维度，3×4 十二个格子对一个两个月
  做十来道题的学生大部分恒为 0。

热力图改成一格一周（53 格，周一起算，最后一格是本周）。按天切的话一年 365 格里三百多
格是空的，中职学生一年也就二三十天有提交，整张图看着像没用过。颜色阈值跟着按周重定。

新增三个维度：
- 错在哪里：判完的失败提交按状态码分组。编译错误占大头说明语法不熟，答案错误占大头
  说明是逻辑问题，两种情况老师该给的建议完全不同。
- 几次做对：到首次通过为止提交了几次，分一次过 / 2-3 / 4-6 / 7次以上。原来只有一个
  "平均提交次数"，看不出分布。
- 流程图得分：detailsData.flowcharts 早就在下发，但全页一张图都没有，只在解题表格的
  第二个 tab 里列着。

顺带：
- 时间活跃度从"只统计 AC 时间"改成"统计全部提交"，星期和时段由后端按东八区聚合。
  只看 AC 的话十来个点撒进 7×4 的格子几乎全是空的，和热力图的时区口径也对不上。
- 两两并排用弹性容器而不是固定两列网格：知识点分布在没有标签时整张卡不渲染，
  固定两列会空掉一半。
- AI 卡片原来有三个条件挂载点（solved>10 在右列、≤10 在全宽行、=0 藏在 Overview
  里面），单列之后收成最后一张无条件的卡。
- DurationChart 右轴的 S/A/B/C 一个刻度都没显示过：轴范围 -0.5~3.5，生成的刻度值是
  -0.5/0.5/1.5/2.5/3.5，拿去索引 gradeOrder 全是 undefined。

契约新增 activity / errors / rankScope / solved[].attempts / durationData[].acceptedCount。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LZuPwqDmLEiK9zgQ9z9sVn

apps/web/src/oj/ai/components/AttemptsChart.vue

@@ -0,0 +1,100 @@
+<template>
+  <n-card title="几次做对" size="small" v-if="show">
+    <template #header-extra>
+      <n-text depth="3" style="font-size: 12px">
+        通过前提交了几次，看有没有在死磕
+      </n-text>
+    </template>
+    <div class="chart">
+      <Bar :key="chartKey" :data="data" :options="options" />
+    </div>
+  </n-card>
+</template>
+<script setup lang="ts">
+import type { ChartOptions } from "chart.js"
+import { Bar } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+} from "chart.js"
+import { useAIStore } from "oj/store/ai"
+import { useChartTheme } from "shared/composables/chartTheme"
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
+
+const aiStore = useAIStore()
+const { chartKey } = useChartTheme()
+
+// solved[].attempts 是后端算的「到首次通过为止的提交次数」，分档放在前端，
+// 想调档位不用改契约
+const BUCKETS = [
+  { label: "一次过", color: "#18A058", min: 1, max: 1 },
+  { label: "2-3 次", color: "#2080F0", min: 2, max: 3 },
+  { label: "4-6 次", color: "#F0A020", min: 4, max: 6 },
+  { label: "7 次以上", color: "#D03050", min: 7, max: Infinity },
+]
+
+const buckets = computed(() =>
+  BUCKETS.map((bucket) => ({
+    ...bucket,
+    problems: aiStore.detailsData.solved.filter(
+      (item) => item.attempts >= bucket.min && item.attempts <= bucket.max,
+    ),
+  })),
+)
+
+const show = computed(() => aiStore.detailsData.solved.length > 0)
+
+const data = computed(() => ({
+  labels: buckets.value.map((bucket) => bucket.label),
+  datasets: [
+    {
+      label: "题目数量",
+      data: buckets.value.map((bucket) => bucket.problems.length),
+      backgroundColor: buckets.value.map((bucket) => bucket.color),
+      borderColor: buckets.value.map((bucket) => bucket.color),
+      borderWidth: 1,
+      borderRadius: 4,
+      maxBarThickness: 64,
+    },
+  ],
+}))
+
+const options = computed<ChartOptions<"bar">>(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    x: { grid: { display: false } },
+    y: {
+      beginAtZero: true,
+      ticks: { stepSize: 1, precision: 0 },
+      title: { display: true, text: "题目数量" },
+    },
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      callbacks: {
+        label: (ctx) => `${ctx.parsed.y} 道题`,
+        afterLabel: (ctx) => {
+          const titles = buckets.value[ctx.dataIndex]!.problems.map(
+            (item) => `${item.problem.displayId} ${item.problem.title}`,
+          )
+          if (!titles.length) return ""
+          if (titles.length <= 5) return titles
+          return [...titles.slice(0, 4), `… 还有 ${titles.length - 4} 道`]
+        },
+      },
+    },
+  },
+}))
+</script>
+<style scoped>
+.chart {
+  height: 300px;
+  width: 100%;
+}
+</style>