fix

add state for submitting button
Plan submit formatting button state
2026-06-14 09:53:04 -06:00 · 2026-06-14 08:52:47 -06:00 · 2026-06-14 08:46:35 -06:00 · 2026-06-14 08:43:19 -06:00 · 2026-06-14 08:36:32 -06:00 · 2026-06-14 08:12:31 -06:00
45 changed files with 1902 additions and 518 deletions
--- a/docs/superpowers/plans/2026-06-14-submit-formatting-button-state.md
+++ b/docs/superpowers/plans/2026-06-14-submit-formatting-button-state.md
@@ -0,0 +1,259 @@
+# Submit Formatting Button State Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Show `格式化中` on the submit button during automatic formatting, then show `正在提交` continuously while the submission request is pending.
+
+**Architecture:** Extract the button presentation rules into a small pure TypeScript function so the state priority can be tested without adding a frontend test framework. Keep formatter and submission-request flags local to `SubmitCode.vue`, with `finally` blocks ensuring both flags clear on every outcome.
+
+**Tech Stack:** Vue 3 Composition API, TypeScript, Node.js built-in test runner, Rsbuild
+
+---
+
+### Task 1: Define and test submit button presentation rules
+
+**Files:**
+- Create: `tests/submitButtonState.test.ts`
+- Create: `src/oj/problem/components/submitButtonState.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `tests/submitButtonState.test.ts`:
+
+```ts
+import assert from "node:assert/strict"
+import test from "node:test"
+import { getSubmitButtonState } from "../src/oj/problem/components/submitButtonState.ts"
+
+const idleInput = {
+  isAuthed: true,
+  hasCode: true,
+  isFormatting: false,
+  isSubmitting: false,
+  isJudging: false,
+  isCooldown: false,
+}
+
+test("shows a disabled loading state while formatting", () => {
+  assert.deepEqual(
+    getSubmitButtonState({ ...idleInput, isFormatting: true }),
+    {
+      disabled: true,
+      label: "格式化中",
+      icon: "eos-icons:loading",
+    },
+  )
+})
+
+test("shows submitting immediately after formatting", () => {
+  assert.deepEqual(
+    getSubmitButtonState({ ...idleInput, isSubmitting: true }),
+    {
+      disabled: true,
+      label: "正在提交",
+      icon: "eos-icons:loading",
+    },
+  )
+})
+
+test("preserves existing login, judging, cooldown, and idle states", () => {
+  assert.deepEqual(
+    getSubmitButtonState({ ...idleInput, isAuthed: false }),
+    {
+      disabled: true,
+      label: "请先登录",
+      icon: "ph:play-fill",
+    },
+  )
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isJudging: true }), {
+    disabled: true,
+    label: "正在评分",
+    icon: "eos-icons:loading",
+  })
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isCooldown: true }), {
+    disabled: true,
+    label: "正在冷却",
+    icon: "ph:lightbulb-fill",
+  })
+  assert.deepEqual(getSubmitButtonState(idleInput), {
+    disabled: false,
+    label: "提交代码",
+    icon: "ph:play-fill",
+  })
+})
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run:
+
+```bash
+node --test tests/submitButtonState.test.ts
+```
+
+Expected: FAIL with `ERR_MODULE_NOT_FOUND` for `submitButtonState.ts`.
+
+- [ ] **Step 3: Implement the pure state function**
+
+Create `src/oj/problem/components/submitButtonState.ts`:
+
+```ts
+export interface SubmitButtonStateInput {
+  isAuthed: boolean
+  hasCode: boolean
+  isFormatting: boolean
+  isSubmitting: boolean
+  isJudging: boolean
+  isCooldown: boolean
+}
+
+export interface SubmitButtonState {
+  disabled: boolean
+  label: string
+  icon: string
+}
+
+export function getSubmitButtonState({
+  isAuthed,
+  hasCode,
+  isFormatting,
+  isSubmitting,
+  isJudging,
+  isCooldown,
+}: SubmitButtonStateInput): SubmitButtonState {
+  const disabled =
+    !isAuthed ||
+    !hasCode ||
+    isFormatting ||
+    isSubmitting ||
+    isJudging ||
+    isCooldown
+
+  let label = "提交代码"
+  if (!isAuthed) {
+    label = "请先登录"
+  } else if (isFormatting) {
+    label = "格式化中"
+  } else if (isSubmitting) {
+    label = "正在提交"
+  } else if (isJudging) {
+    label = "正在评分"
+  } else if (isCooldown) {
+    label = "正在冷却"
+  }
+
+  const icon =
+    isFormatting || isSubmitting || isJudging
+      ? "eos-icons:loading"
+      : isCooldown
+        ? "ph:lightbulb-fill"
+        : "ph:play-fill"
+
+  return { disabled, label, icon }
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run:
+
+```bash
+node --test tests/submitButtonState.test.ts
+```
+
+Expected: 3 tests pass.
+
+### Task 2: Connect formatting and submission request lifecycle to the button
+
+**Files:**
+- Modify: `src/oj/problem/components/SubmitCode.vue`
+
+- [ ] **Step 1: Add local request states and computed presentation**
+
+Import `getSubmitButtonState`, add `isFormatting` and `isSubmittingRequest` refs, and replace the three existing button computed properties with:
+
+```ts
+const buttonState = computed(() =>
+  getSubmitButtonState({
+    isAuthed: userStore.isAuthed,
+    hasCode: codeStore.code.value.trim() !== "",
+    isFormatting: isFormatting.value,
+    isSubmitting: isSubmittingRequest.value || submitting.value,
+    isJudging: judging.value || pending.value,
+    isCooldown: isCooldown.value,
+  }),
+)
+```
+
+Use `buttonState.disabled`, `buttonState.icon`, and `buttonState.label` in the template.
+
+- [ ] **Step 2: Guard and track the formatting request**
+
+At the start of `submit`, return when `buttonState.value.disabled` is true. Around `formatCode`, set `isFormatting.value = true` before the request and clear it in `finally`:
+
+```ts
+isFormatting.value = true
+try {
+  const res = await formatCode({
+    code: codeStore.code.value,
+    language: formatLang,
+  })
+  codeStore.setCode(res.data.code)
+} catch (e: any) {
+  if (e?.error === "format-error") {
+    message.warning(`代码格式化失败：${e.data}，请检查代码后重试`)
+    return
+  }
+} finally {
+  isFormatting.value = false
+}
+```
+
+- [ ] **Step 3: Track the submission API request**
+
+Set `isSubmittingRequest.value = true` immediately before `submitCode`, keep the existing success flow inside the `try`, and clear the request state in `finally`:
+
+```ts
+isSubmittingRequest.value = true
+try {
+  const res = await submitCode(data)
+  console.log(`[Submit] 代码已提交: ID=${res.data.submission_id}`)
+
+  startCooldown()
+  startMonitoring(res.data.submission_id)
+  showResult.value = true
+} finally {
+  isSubmittingRequest.value = false
+}
+```
+
+- [ ] **Step 4: Run focused tests**
+
+Run:
+
+```bash
+node --test tests/submitButtonState.test.ts
+```
+
+Expected: 3 tests pass.
+
+- [ ] **Step 5: Run the production build**
+
+Run:
+
+```bash
+npm run build
+```
+
+Expected: Rsbuild exits with status 0.
+
+- [ ] **Step 6: Check the final diff**
+
+Run:
+
+```bash
+git diff --check
+git diff -- src/oj/problem/components/SubmitCode.vue src/oj/problem/components/submitButtonState.ts tests/submitButtonState.test.ts
+```
+
+Expected: no whitespace errors; diff is limited to the button state feature and its test.
--- a/docs/superpowers/specs/2026-06-14-submit-formatting-button-state-design.md
+++ b/docs/superpowers/specs/2026-06-14-submit-formatting-button-state-design.md
@@ -0,0 +1,34 @@
+# Submit Formatting Button State
+
+## Goal
+
+Make the code submission button reflect the automatic formatting request that runs before submission.
+
+## Behavior
+
+- For Python3, C, and C++, the button displays `格式化中` while the formatting API request is pending.
+- During formatting, the button uses the existing loading icon and is disabled to prevent duplicate submissions.
+- After formatting succeeds, the existing submission flow continues and the button can display `正在提交`.
+- A formatting error stops submission and clears the formatting state before showing the existing warning.
+- A formatter server or network failure keeps the existing fallback behavior: clear the formatting state and submit the original code.
+- Languages without automatic formatting skip this state and submit directly.
+- Existing button labels and judging/cooldown behavior remain unchanged.
+
+## Implementation
+
+Add a component-local `isFormatting` ref in `SubmitCode.vue`.
+
+- Include it in `submitDisabled`.
+- Give it priority in `submitLabel`, using `格式化中`.
+- Include it in the loading-icon condition.
+- Set it immediately before `formatCode`.
+- Clear it in a `finally` block so every formatter outcome restores the button state.
+
+The state remains local because it is transient UI state owned only by the submission button.
+
+## Verification
+
+The frontend currently has no automated test suite. Verify with:
+
+- TypeScript production build.
+- Manual inspection of the state transitions for successful formatting, formatting errors, formatter infrastructure failures, and languages that do not format.
--- a/src/admin/ai/list.vue
+++ b/src/admin/ai/list.vue
@@ -0,0 +1,206 @@
+<template>
+  <n-flex justify="space-between" class="titleWrapper">
+    <h2 class="title">AI 学习分析报告</h2>
+    <n-input
+      v-model:value="query.username"
+      clearable
+      placeholder="输入用户名筛选"
+      style="width: 200px"
+    />
+  </n-flex>
+  <n-alert
+    v-if="pinnedReports.length > 0"
+    type="warning"
+    :show-icon="true"
+    style="margin-bottom: 12px"
+  >
+    以下 <strong>{{ pinnedReports.length }}</strong> 位用户的 AI
+    分析报告已被锁定，前台将固定显示该报告：
+    <n-flex style="margin-top: 8px" :wrap="true" :size="[8, 6]">
+      <n-tag
+        v-for="r in pinnedReports"
+        :key="r.id"
+        type="warning"
+        size="small"
+        closable
+        @close="togglePin(r)"
+      >
+        {{ r.username }}
+      </n-tag>
+    </n-flex>
+  </n-alert>
+  <n-data-table striped :columns="columns" :data="reports" />
+  <Pagination
+    :total="total"
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+  />
+
+  <n-modal
+    v-model:show="showModal"
+    preset="card"
+    title="分析报告详情"
+    style="width: 800px; max-width: 95vw"
+  >
+    <n-spin :show="loadingDetail">
+      <div v-if="detail" class="detail">
+        <n-descriptions :column="2" bordered size="small" class="meta">
+          <n-descriptions-item label="用户">{{
+            detail.username
+          }}</n-descriptions-item>
+          <n-descriptions-item label="班级">{{
+            detail.class_name || "-"
+          }}</n-descriptions-item>
+          <n-descriptions-item label="时间" :span="2">{{
+            parseTime(detail.create_time, "YYYY-MM-DD HH:mm:ss")
+          }}</n-descriptions-item>
+        </n-descriptions>
+        <n-scrollbar style="max-height: 60vh; margin-top: 12px">
+          <MdPreview :model-value="detail.analysis" />
+        </n-scrollbar>
+      </div>
+    </n-spin>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { MdPreview } from "md-editor-v3"
+import "md-editor-v3/lib/preview.css"
+import Pagination from "shared/components/Pagination.vue"
+import { parseTime } from "utils/functions"
+import {
+  getAIReportList,
+  getAIReportDetail,
+  pinAIReport,
+  getPinnedAIReports,
+} from "../api"
+import { NButton, NTag } from "naive-ui"
+
+interface ReportItem {
+  id: number
+  create_time: string
+  username: string
+  analysis_excerpt: string
+  is_pinned: boolean
+}
+
+interface ReportDetail extends ReportItem {
+  analysis: string
+  class_name: string | null
+}
+
+const reports = ref<ReportItem[]>([])
+const total = ref(0)
+const query = reactive({ limit: 10, page: 1, username: "" })
+const pinnedReports = ref<ReportItem[]>([])
+
+const showModal = ref(false)
+const loadingDetail = ref(false)
+const detail = ref<ReportDetail | null>(null)
+
+const columns: DataTableColumn<ReportItem>[] = [
+  { title: "ID", key: "id", width: 80 },
+  {
+    title: "用户名",
+    key: "username",
+    width: 150,
+    render: (row) =>
+      h(
+        "span",
+        { style: row.is_pinned ? "font-weight:600" : "" },
+        row.username,
+      ),
+  },
+  {
+    title: "AI 分析内容",
+    key: "analysis_excerpt",
+    render: (row) => row.analysis_excerpt || "-",
+  },
+  {
+    title: "生成时间",
+    key: "create_time",
+    width: 200,
+    render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "PIN 状态",
+    key: "is_pinned",
+    width: 100,
+    render: (row) =>
+      row.is_pinned
+        ? h(NTag, { type: "warning", size: "small" }, () => "已锁定")
+        : null,
+  },
+  {
+    title: "操作",
+    key: "action",
+    width: 160,
+    render: (row) =>
+      h("span", { style: "display:flex;gap:8px" }, [
+        h(
+          NButton,
+          { size: "small", type: "primary", onClick: () => openDetail(row.id) },
+          () => "查看",
+        ),
+        h(
+          NButton,
+          {
+            size: "small",
+            type: row.is_pinned ? "error" : "default",
+            onClick: () => togglePin(row),
+          },
+          () => (row.is_pinned ? "取消 PIN" : "PIN"),
+        ),
+      ]),
+  },
+]
+
+async function loadPinnedReports() {
+  const res = await getPinnedAIReports()
+  pinnedReports.value = res.data
+}
+
+async function togglePin(row: ReportItem) {
+  await pinAIReport(row.id)
+  await Promise.all([listReports(), loadPinnedReports()])
+}
+
+async function listReports() {
+  const offset = (query.page - 1) * query.limit
+  const res = await getAIReportList(offset, query.limit, query.username)
+  reports.value = res.data.results
+  total.value = res.data.total
+}
+
+async function openDetail(id: number) {
+  showModal.value = true
+  loadingDetail.value = true
+  detail.value = null
+  try {
+    const res = await getAIReportDetail(id)
+    detail.value = res.data
+  } finally {
+    loadingDetail.value = false
+  }
+}
+
+onMounted(() => Promise.all([listReports(), loadPinnedReports()]))
+watch(() => [query.page, query.limit], listReports)
+watchDebounced(() => query.username, listReports, {
+  debounce: 500,
+  maxWait: 1000,
+})
+</script>
+
+<style scoped>
+.titleWrapper {
+  margin-bottom: 16px;
+  align-items: center;
+}
+.title {
+  margin: 0;
+}
+.detail .meta {
+  margin-bottom: 0;
+}
+</style>
--- a/src/admin/api.ts
+++ b/src/admin/api.ts
@@ -1,4 +1,5 @@
 import http from "utils/http"
+import { toProblemListItem } from "admin/transforms"
 import type {
  AdminProblem,
  Announcement,
@@ -30,30 +31,21 @@ export async function getProblemList(
  contestID?: string,
 ) {
  const endpoint = !!contestID ? "admin/contest/problem" : "admin/problem"
-  const res = await http.get(endpoint, {
-    params: {
-      paging: true,
-      offset,
-      limit,
-      keyword,
-      author,
-      contest_id: contestID,
+  const res = await http.get<{ results: AdminProblem[]; total: number }>(
+    endpoint,
+    {
+      params: {
+        paging: true,
+        offset,
+        limit,
+        keyword,
+        author,
+        contest_id: contestID,
+      },
    },
-  })
+  )
  return {
-    results: res.data.results.map((result: AdminProblem) => ({
-      id: result.id,
-      _id: result._id,
-      title: result.title,
-      username: result.created_by.username,
-      create_time: result.create_time,
-      visible: result.visible,
-      difficulty: result.difficulty,
-      tags: result.tags,
-      has_ast_rules: result.has_ast_rules,
-      allow_flowchart: result.allow_flowchart,
-      show_flowchart: result.show_flowchart,
-    })),
+    results: res.data.results.map(toProblemListItem),
    total: res.data.total,
  }
 }
@@ -133,10 +125,10 @@ export function getContestList(offset = 0, limit = 10, keyword: string) {
 export async function uploadImage(file: File): Promise<string> {
  const form = new window.FormData()
  form.append("image", file)
-  const res: { success: boolean; file_path: string; msg: "Success" } =
-    await http.post("admin/upload_image", form, {
-      headers: { "content-type": "multipart/form-data" },
-    })
+  // 该端点不走 { error, data } 信封，直接返回上传结果
+  const res = (await http.post("admin/upload_image", form, {
+    headers: { "content-type": "multipart/form-data" },
+  })) as unknown as { success: boolean; file_path: string; msg: "Success" }
  return res.success ? res.file_path : ""
 }

@@ -244,17 +236,17 @@ export function deleteComment(id: number) {
 }

 export async function getTutorialList() {
-  const res = await http.get("admin/tutorial")
+  const res = await http.get<Tutorial[]>("admin/tutorial")
  return res.data
 }

 export async function getTutorial(id: number) {
-  const res = await http.get("admin/tutorial", { params: { id } })
+  const res = await http.get<Tutorial>("admin/tutorial", { params: { id } })
  return res.data
 }

 export async function createTutorial(data: Partial<Tutorial>) {
-  const res = await http.post("admin/tutorial", data)
+  const res = await http.post<Tutorial>("admin/tutorial", data)
  return res.data
 }

@@ -272,10 +264,10 @@ export function setTutorialVisibility(id: number, is_public: boolean) {
 }

 export async function getAdminExercises(tutorialId: number) {
-  const res = await http.get("admin/exercise", {
+  const res = await http.get<Exercise[]>("admin/exercise", {
    params: { tutorial_id: tutorialId },
  })
-  return res.data as Exercise[]
+  return res.data
 }

 export async function createExercise(data: {
@@ -284,8 +276,8 @@ export async function createExercise(data: {
  data: object
  order: number
 }) {
-  const res = await http.post("admin/exercise", data)
-  return res.data as Exercise
+  const res = await http.post<Exercise>("admin/exercise", data)
+  return res.data
 }

 export async function updateExercise(data: {
@@ -490,3 +482,22 @@ export function getTopACTrend(params: {
 }) {
  return http.get("admin/problem/top_ac_trend", { params })
 }
+
+// AI 学习分析报告
+export function getAIReportList(offset = 0, limit = 10, username = "") {
+  return http.get("admin/ai/reports", {
+    params: { paging: true, offset, limit, username: username || undefined },
+  })
+}
+
+export function getAIReportDetail(id: number) {
+  return http.get("admin/ai/reports", { params: { id } })
+}
+
+export function pinAIReport(id: number) {
+  return http.post("admin/ai/reports", { id })
+}
+
+export function getPinnedAIReports() {
+  return http.get("admin/ai/reports", { params: { pinned_only: "true" } })
+}
--- a/src/admin/contest/detail.vue
+++ b/src/admin/contest/detail.vue
@@ -2,7 +2,7 @@
 import { formatISO } from "date-fns"
 import TextEditor from "shared/components/TextEditor.vue"
 import { parseTime } from "utils/functions"
-import { BlankContest } from "utils/types"
+import type { BlankContest } from "utils/types"
 import { createContest, editContest, getContest } from "../api"

 interface Props {
--- a/src/admin/problem/list.vue
+++ b/src/admin/problem/list.vue
@@ -37,7 +37,8 @@ const total = ref(0)
 const problems = ref<AdminProblemFiltered[]>([])

 const nextDisplayID = computed(() => {
-  if (!isContestProblemList.value || problems.value.length === 0) return ""
+  if (!isContestProblemList.value) return ""
+  if (problems.value.length === 0) return "1"
  const ids = problems.value.map((p) => p._id)
  if (ids.every((id) => /^\d+$/.test(id))) {
    return String(Math.max(...ids.map((id) => parseInt(id))) + 1)
@@ -130,7 +131,7 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
  {
    title: "选项",
    key: "actions",
-    width: 300,
+    width: 320,
    render: (row) =>
      h(Actions, {
        problemID: row.id,
--- a/src/admin/transforms.ts
+++ b/src/admin/transforms.ts
@@ -0,0 +1,18 @@
+import type { AdminProblem } from "utils/types"
+
+// 把后端的 AdminProblem 塑形成管理端列表项，与请求逻辑解耦。
+export function toProblemListItem(result: AdminProblem) {
+  return {
+    id: result.id,
+    _id: result._id,
+    title: result.title,
+    username: result.created_by.username,
+    create_time: result.create_time,
+    visible: result.visible,
+    difficulty: result.difficulty,
+    tags: result.tags,
+    has_ast_rules: result.has_ast_rules,
+    allow_flowchart: result.allow_flowchart,
+    show_flowchart: result.show_flowchart,
+  }
+}
--- a/src/admin/user/components/Name.vue
+++ b/src/admin/user/components/Name.vue
@@ -24,7 +24,13 @@ const isNotRegularUser = computed(
    >
      {{ getUserRole(props.user.admin_type).label }}
    </n-tag>
-    <n-tag size="small" v-if="props.user.admin_type === USER_TYPE.STUDENT_ADMIN || props.user.admin_type === USER_TYPE.TEACHER_ADMIN">
+    <n-tag
+      size="small"
+      v-if="
+        props.user.admin_type === USER_TYPE.STUDENT_ADMIN ||
+        props.user.admin_type === USER_TYPE.TEACHER_ADMIN
+      "
+    >
      {{
        props.user.problem_permission === PROBLEM_PERMISSION.ALL
          ? "全部"
--- a/src/admin/user/list.vue
+++ b/src/admin/user/list.vue
@@ -314,7 +314,11 @@ watch(() => [query.page, query.limit, query.type, query.orderBy], listUsers)
          <n-input v-model:value="password" />
        </n-form-item-gi>
        <n-form-item-gi
-          v-if="!create && (userEditing.admin_type === USER_TYPE.STUDENT_ADMIN || userEditing.admin_type === USER_TYPE.TEACHER_ADMIN)"
+          v-if="
+            !create &&
+            (userEditing.admin_type === USER_TYPE.STUDENT_ADMIN ||
+              userEditing.admin_type === USER_TYPE.TEACHER_ADMIN)
+          "
          :span="1"
          label="出题权限"
        >
--- a/src/main.ts
+++ b/src/main.ts
@@ -65,9 +65,7 @@ router.beforeEach(async (to, from, next) => {
        next("/")
        return
      }
-    } else if (
-      to.matched.some((record) => record.meta.requiresTeacherAdmin)
-    ) {
+    } else if (to.matched.some((record) => record.meta.requiresTeacherAdmin)) {
      if (!userStore.isTeacherOrAbove) {
        next("/")
        return
--- a/src/oj/ai/components/AI.vue
+++ b/src/oj/ai/components/AI.vue
@@ -36,8 +36,18 @@ async function handleAnalyze() {
  if (aiStore.loading.fetching || aiStore.loading.ai) {
    return
  }
-  await aiStore.fetchAIAnalysis()
+  if (aiStore.pinnedReport) {
+    await aiStore.simulatePinnedStream()
+  } else {
+    await aiStore.fetchAIAnalysis()
+  }
 }
+
+onMounted(async () => {
+  if (!aiStore.targetUsername) {
+    await aiStore.fetchPinnedReport()
+  }
+})
 </script>
 <style scoped>
 .cool-title {
--- a/src/oj/ai/components/Heatmap.vue
+++ b/src/oj/ai/components/Heatmap.vue
@@ -60,7 +60,7 @@ import { useAIStore } from "oj/store/ai"
 import { parseTime } from "utils/functions"

 const aiStore = useAIStore()
-const containerRef = ref<HTMLElement>()
+const containerRef = useTemplateRef<HTMLElement>("containerRef")

 const CELL_SIZE = 12
 const CELL_GAP = 3
--- a/src/oj/api.ts
+++ b/src/oj/api.ts
@@ -1,7 +1,6 @@
-import { DIFFICULTY } from "utils/constants"
-import { getACRate } from "utils/functions"
 import http from "utils/http"
-import {
+import { filterResult } from "oj/transforms"
+import type {
  Exercise,
  Problem,
  Submission,
@@ -9,31 +8,6 @@ import {
  SubmitCodePayload,
 } from "utils/types"

-function filterResult(result: Problem) {
-  const newResult = {
-    id: result.id,
-    _id: result._id,
-    title: result.title,
-    difficulty: DIFFICULTY[result.difficulty],
-    tags: result.tags,
-    submission: result.submission_number,
-    rate: getACRate(result.accepted_number, result.submission_number),
-    status: "",
-    author: result.created_by.username,
-    allow_flowchart: result.allow_flowchart,
-    show_flowchart: result.show_flowchart,
-    has_ast_rules: result.has_ast_rules,
-  }
-  if (result.my_status === null || result.my_status === undefined) {
-    newResult.status = "not_test"
-  } else if (result.my_status === 0) {
-    newResult.status = "passed"
-  } else {
-    newResult.status = "failed"
-  }
-  return newResult
-}
-
 export function getWebsiteConfig() {
  return http.get("website")
 }
@@ -43,17 +17,9 @@ export async function getProblemList(
  limit = 10,
  searchParams: any = {},
 ) {
-  let params: any = {
-    paging: true,
-    offset,
-    limit,
-  }
-  Object.keys(searchParams).forEach((element) => {
-    if (searchParams[element]) {
-      params[element] = searchParams[element]
-    }
+  const res = await http.get<{ results: Problem[]; total: number }>("problem", {
+    params: { paging: true, offset, limit, ...searchParams },
  })
-  const res = await http.get("problem", { params })
  return {
    results: res.data.results.map(filterResult),
    total: res.data.total,
@@ -96,6 +62,10 @@ export function submitCode(data: SubmitCodePayload) {
  return http.post("submission", data)
 }

+export function formatCode(data: { code: string; language: string }) {
+  return http.post<{ code: string }>("format_code", data)
+}
+
 export function getSubmissions(params: Partial<SubmissionListPayload>) {
  const endpoint = !!params.contest_id ? "contest_submissions" : "submissions"
  return http.get(endpoint, { params })
@@ -105,8 +75,8 @@ export function getRankOfProblem(problem_id: string) {
  return http.get("user_problem_rank", { params: { problem_id: problem_id } })
 }

-export function getTodaySubmissionCount() {
-  return http.get("submissions/today_count")
+export function getTodaySubmissionCount(language?: string) {
+  return http.get("submissions/today_count", { params: { language } })
 }

 export function adminRejudge(id: string) {
@@ -203,7 +173,7 @@ export function checkContestPassword(contestID: string, password: string) {
 }

 export async function getContestProblems(contestID: string) {
-  const res = await http.get("contest/problem", {
+  const res = await http.get<Problem[]>("contest/problem", {
    params: { contest_id: contestID },
  })
  return res.data.map(filterResult)
@@ -308,6 +278,10 @@ export function getAILoginSummary() {
  return http.get("ai/login_summary")
 }

+export function getAIPinnedReport() {
+  return http.get("ai/pinned")
+}
+
 // ==================== 相似题目推荐 ====================

 export function getSimilarProblems(problemId: string) {
@@ -349,6 +323,8 @@ export function getFlowchartSubmissions(params: {
  myself?: string
  offset?: number
  limit?: number
+  today?: string
+  grade?: string
 }) {
  return http.get("flowchart/submissions", { params })
 }
@@ -455,7 +431,7 @@ export function getProblemSetUserProgress(
 }

 export async function getExercises(tutorialId: number): Promise<Exercise[]> {
-  const res = await http.get("exercises", {
+  const res = await http.get<Exercise[]>("exercises", {
    params: { tutorial_id: tutorialId },
  })
  return res.data
--- a/src/oj/class/pk.vue
+++ b/src/oj/class/pk.vue
@@ -164,7 +164,8 @@ async function analyzeWithAI() {
  aiController = controller

  const timeRangeLabel =
-    timeRangeOptions.find((o) => o.value === duration.value)?.label ?? "全部时间"
+    timeRangeOptions.find((o) => o.value === duration.value)?.label ??
+    "全部时间"

  showAIModal.value = true
  aiContent.value = ""
@@ -195,7 +196,11 @@ async function analyzeWithAI() {
        if (event === "end" && !hasStarted) aiLoading.value = false
      },
      onMessage(payload) {
-        const parsed = payload as { type?: string; content?: string; message?: string }
+        const parsed = payload as {
+          type?: string
+          content?: string
+          message?: string
+        }
        if (parsed.type === "delta" && parsed.content) {
          if (!hasStarted) {
            hasStarted = true
@@ -1176,7 +1181,6 @@ const radarChartOptions = {
            </n-gi>
          </n-grid>
        </n-card>
-
      </template>

      <!-- 对比表格 -->
@@ -1185,10 +1189,7 @@ const radarChartOptions = {
        title="对比表格"
        style="margin-top: 20px"
      >
-        <n-data-table
-          :data="comparisons"
-          :columns="tableColumns"
-        />
+        <n-data-table :data="comparisons" :columns="tableColumns" />
      </n-card>
    </n-flex>
  </n-card>
--- a/src/oj/contest/components/LineChart.vue
+++ b/src/oj/contest/components/LineChart.vue
@@ -34,188 +34,188 @@ interface Props {

 const props = defineProps<Props>()

+const PENALTY_SECONDS = 20 * 60
+
 const showChart = computed(() => {
  const hasRanks = props.ranks.length > 0
  const hasProblems = props.problems.length >= 3
  return hasProblems && hasRanks
 })

-// 预定义的颜色方案 - 更现代和可访问的颜色
 const colorPalette = [
-  "#3B82F6", // 蓝色
-  "#EF4444", // 红色
-  "#10B981", // 绿色
-  "#F59E0B", // 黄色
-  "#8B5CF6", // 紫色
-  "#EC4899", // 粉色
-  "#06B6D4", // 青色
-  "#84CC16", // 青绿色
-  "#F97316", // 橙色
-  "#6366F1", // 靛蓝色
+  "#3B82F6",
+  "#EF4444",
+  "#10B981",
+  "#F59E0B",
+  "#8B5CF6",
+  "#EC4899",
+  "#06B6D4",
+  "#84CC16",
+  "#F97316",
+  "#6366F1",
 ]

-// 数据处理函数
-const processChartData = () => {
-  if (!props.ranks || props.ranks.length === 0) {
-    return {
-      labels: [],
-      datasets: [],
-    }
-  }
-
-  // 获取前10名用户的数据
-  const topUsers = props.ranks.slice(0, 10)
-
-  // 获取所有题目ID（从所有用户的submission_info中收集）
-  const allProblemIds = new Set<string>()
-  topUsers.forEach((rank) => {
-    Object.keys(rank.submission_info).forEach((problemId) => {
-      allProblemIds.add(problemId)
-    })
-  })
-
-  // 按题目ID排序
-  const problemIds = Array.from(allProblemIds).sort()
-
-  // 创建题目标签
-  const labels = problemIds.map((id) => {
-    if (props.problems) {
-      const problem = props.problems.find((p) => p.id.toString() === id)
-      return problem ? problem.title : `题目${id}`
-    }
-    return `题目${id}`
-  })
-
-  // 找到所有用户中最早的提交时间
-  let earliestTime = Infinity
-  topUsers.forEach((rank) => {
-    Object.values(rank.submission_info).forEach((submissionInfo) => {
-      if (submissionInfo.is_ac && submissionInfo.ac_time < earliestTime) {
-        earliestTime = submissionInfo.ac_time
-      }
-    })
-  })
-
-  // 如果没有找到任何通过记录，使用0作为基准
-  if (earliestTime === Infinity) {
-    earliestTime = 0
-  }
-
-  // 为每个用户创建数据集
-  const datasets = topUsers.map((rank, userIndex) => {
-    const userData = problemIds.map((problemId) => {
-      const submissionInfo = rank.submission_info[problemId]
-      if (!submissionInfo || !submissionInfo.is_ac) {
-        return null
-      }
-      return submissionInfo.ac_time - earliestTime
-    })
-
-    const actualRank = userIndex + 1
-    const colorIndex = userIndex % colorPalette.length
-    const color = colorPalette[colorIndex]
-
-    return {
-      label: `第${actualRank}名: ${rank.user.username}`,
-      data: userData,
-      borderColor: color,
-      backgroundColor: color + "20",
-      tension: 0.3,
-      fill: false,
-      pointRadius: 6,
-      pointHoverRadius: 8,
-      pointBackgroundColor: color,
-      pointBorderColor: "#fff",
-      pointBorderWidth: 2,
-      spanGaps: false,
-    }
-  })
-
-  return {
-    labels,
-    datasets,
-  }
+function formatTime(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0) return `${h}h${m}m`
+  return `${m}m`
 }

-// 监听数据变化，重新处理
-watch(
-  () => [props.ranks, props.problems],
-  () => {
-    if (props.ranks && props.ranks.length > 0) {
-      // 数据变化时重新处理
-    }
-  },
-  { deep: true, immediate: true },
-)
+interface AcEvent {
+  time: number
+  userIndex: number
+  problemId: string
+}

 const chartData = computed(() => {
-  return processChartData()
+  if (!props.ranks || props.ranks.length === 0) {
+    return { labels: [], datasets: [] }
+  }
+
+  const topUsers = props.ranks.slice(0, 10)
+
+  // 收集所有AC事件并按时间排序
+  const events: AcEvent[] = []
+  topUsers.forEach((rank, userIndex) => {
+    Object.entries(rank.submission_info).forEach(([problemId, info]) => {
+      if (info.is_ac) {
+        events.push({ time: info.ac_time, userIndex, problemId })
+      }
+    })
+  })
+  events.sort((a, b) => a.time - b.time)
+
+  if (events.length === 0) {
+    return { labels: [], datasets: [] }
+  }
+
+  // 在每个时间点计算所有人的排名
+  // 状态: 每个用户当前已AC题数和罚时
+  const userState = topUsers.map(() => ({
+    solved: 0,
+    penalty: 0,
+  }))
+
+  // 用于记录每个用户每道题的错误次数
+  const userErrors: Map<string, number>[] = topUsers.map(() => new Map())
+  topUsers.forEach((rank, i) => {
+    Object.entries(rank.submission_info).forEach(([problemId, info]) => {
+      if (info.error_number > 0) {
+        userErrors[i].set(problemId, info.error_number)
+      }
+    })
+  })
+
+  function calcRanks(): number[] {
+    const indexed = userState.map((s, i) => ({ ...s, i }))
+    indexed.sort((a, b) => {
+      if (b.solved !== a.solved) return b.solved - a.solved
+      return a.penalty - b.penalty
+    })
+    const ranks = new Array(topUsers.length).fill(0)
+    indexed.forEach((item, pos) => {
+      ranks[item.i] = pos + 1
+    })
+    return ranks
+  }
+
+  // 时间轴上的数据点: [时间标签, 各用户排名]
+  const timePoints: number[] = [0]
+  const rankSnapshots: number[][] = [calcRanks()]
+
+  // 按时间处理事件（合并同一时刻的事件）
+  let i = 0
+  while (i < events.length) {
+    const currentTime = events[i].time
+    // 处理同一时刻的所有事件
+    while (i < events.length && events[i].time === currentTime) {
+      const ev = events[i]
+      userState[ev.userIndex].solved++
+      const errors = userErrors[ev.userIndex].get(ev.problemId) || 0
+      userState[ev.userIndex].penalty =
+        userState[ev.userIndex].penalty + ev.time + errors * PENALTY_SECONDS
+      i++
+    }
+    timePoints.push(currentTime)
+    rankSnapshots.push(calcRanks())
+  }
+
+  const labels = timePoints.map((t) => formatTime(t))
+
+  const datasets = topUsers.map((rank, userIndex) => {
+    const color = colorPalette[userIndex % colorPalette.length]
+    const finalRank = rankSnapshots[rankSnapshots.length - 1][userIndex]
+    return {
+      label: `#${finalRank} ${rank.user.username}`,
+      data: rankSnapshots.map((snapshot) => snapshot[userIndex]),
+      borderColor: color,
+      backgroundColor: color,
+      tension: 0.3,
+      fill: false,
+      pointRadius: 3,
+      pointHoverRadius: 6,
+      pointBackgroundColor: color,
+      pointBorderColor: "#fff",
+      pointBorderWidth: 1,
+      borderWidth: 2.5,
+    }
+  })
+
+  return { labels, datasets }
 })

 const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
+  interaction: {
+    mode: "index" as const,
+    intersect: false,
+  },
  plugins: {
    legend: {
      display: true,
      position: "top" as const,
      maxHeight: 80,
      labels: {
-        boxWidth: 12,
-        boxHeight: 12,
-        padding: 8,
-        usePointStyle: true,
-        font: {
-          size: 11,
-        },
+        boxWidth: 14,
+        boxHeight: 3,
+        padding: 10,
+        font: { size: 12 },
      },
    },
    tooltip: {
      mode: "index" as const,
      intersect: false,
+      itemSort: (a: any, b: any) => a.parsed.y - b.parsed.y,
      callbacks: {
-        title: function (context: any) {
-          return `题目: ${context[0].label}`
-        },
-        label: function (context: any) {
-          const value = context.parsed.y
-          const label = context.dataset.label
-
-          if (value === null) {
-            return `${label}: 未通过`
-          }
-
-          const hours = Math.floor(value / 3600)
-          const minutes = Math.floor((value % 3600) / 60)
-          const seconds = Math.floor(value % 60)
-
-          let timeStr = ""
-          if (hours > 0) timeStr += `${hours}小时`
-          if (minutes > 0) timeStr += `${minutes}分钟`
-          if (seconds > 0 || timeStr === "") timeStr += `${seconds}秒`
-
-          return `${label}: +${timeStr}`
+        title: (context: any) => `比赛进行: ${context[0].label}`,
+        label: (context: any) => {
+          const rank = context.parsed.y
+          const name = context.dataset.label
+          return `  第${rank}名 — ${name}`
        },
      },
    },
  },
  scales: {
+    x: {
+      title: {
+        display: true,
+        text: "比赛时间",
+      },
+    },
    y: {
      title: {
        display: true,
-        text: "相对通过时间",
+        text: "排名",
      },
-      min: 0,
+      reverse: true,
+      min: 1,
+      max: 10,
      ticks: {
-        callback: function (value: any) {
-          const hours = Math.floor(value / 3600)
-          const minutes = Math.floor((value % 3600) / 60)
-          const seconds = Math.floor(value % 60)
-
-          if (hours > 0) return `+${hours}h${minutes}m`
-          if (minutes > 0) return `+${minutes}m${seconds}s`
-          return `+${seconds}s`
-        },
+        stepSize: 1,
+        callback: (value: any) => `第${value}名`,
      },
    },
  },
@@ -224,7 +224,7 @@ const chartOptions = computed(() => ({

 <style scoped>
 .chart {
-  height: 500px;
+  height: 420px;
  width: 100%;
  margin-bottom: 24px;
 }
--- a/src/oj/learn/components/ExerciseFill.vue
+++ b/src/oj/learn/components/ExerciseFill.vue
@@ -85,21 +85,19 @@ function inputWidth(idx: number): string {
 </script>

 <template>
-  <n-card
-    size="small"
-    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
-  >
+  <n-card style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
    <template #header>
-      <n-tag type="warning" size="small" :bordered="false"
-        >练一练 · 代码填空</n-tag
-      >
+      <n-tag type="warning" :bordered="false">练一练 · 代码填空</n-tag>
    </template>

-    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">
+      {{ data.question }}
+    </p>

    <pre
      :style="{
        fontFamily: 'Monaco',
+        fontSize: '16px',
        lineHeight: '1.6',
        background: 'var(--n-color)',
        border: '1px solid var(--n-border-color)',
@@ -117,7 +115,8 @@ function inputWidth(idx: number): string {
        :style="{
          width: inputWidth(seg.index),
          fontFamily: 'Monaco',
-          padding: '1px 4px',
+          fontSize: '16px',
+          padding: '2px 6px',
          borderRadius: '3px',
          border: `1.5px solid ${
            allCorrect
@@ -146,15 +145,10 @@ function inputWidth(idx: number): string {
    />

    <n-space style="margin-top: 12px" :size="8">
-      <n-button
-        type="warning"
-        size="small"
-        :disabled="allCorrect"
-        @click="submit"
-      >
+      <n-button type="warning" :disabled="allCorrect" @click="submit">
        提交
      </n-button>
-      <n-button size="small" @click="reset">重置</n-button>
+      <n-button @click="reset">重置</n-button>
    </n-space>
  </n-card>
 </template>
--- a/src/oj/learn/components/ExerciseMcq.vue
+++ b/src/oj/learn/components/ExerciseMcq.vue
@@ -63,19 +63,18 @@ function optionType(idx: number): "default" | "primary" | "success" {
 </script>

 <template>
-  <n-card
-    size="small"
-    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
-  >
+  <n-card style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
    <template #header>
      <n-space align="center" :size="8">
-        <n-tag type="success" size="small" :bordered="false">
+        <n-tag type="success" :bordered="false">
          练一练 · {{ isSingle ? "单选题" : "多选题" }}
        </n-tag>
      </n-space>
    </template>

-    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">
+      {{ data.question }}
+    </p>

    <n-space vertical :size="8">
      <n-button
@@ -113,13 +112,12 @@ function optionType(idx: number): "default" | "primary" | "success" {
    <n-space style="margin-top: 12px" :size="8">
      <n-button
        type="primary"
-        size="small"
        :disabled="selected.size === 0 || correct"
        @click="submit"
      >
        提交
      </n-button>
-      <n-button size="small" @click="reset">重置</n-button>
+      <n-button @click="reset">重置</n-button>
    </n-space>
  </n-card>
 </template>
--- a/src/oj/learn/components/ExerciseSort.vue
+++ b/src/oj/learn/components/ExerciseSort.vue
@@ -101,17 +101,14 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
 </script>

 <template>
-  <n-card
-    size="small"
-    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
-  >
+  <n-card style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
    <template #header>
-      <n-tag type="info" size="small" :bordered="false"
-        >练一练 · 代码排序</n-tag
-      >
+      <n-tag type="info" :bordered="false">练一练 · 代码排序</n-tag>
    </template>

-    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">
+      {{ data.question }}
+    </p>

    <n-space vertical :size="6">
      <div
@@ -158,15 +155,10 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
    />

    <n-space style="margin-top: 12px" :size="8">
-      <n-button
-        type="info"
-        size="small"
-        :disabled="submitted && allCorrect"
-        @click="submit"
-      >
+      <n-button type="info" :disabled="submitted && allCorrect" @click="submit">
        提交
      </n-button>
-      <n-button size="small" @click="reset">重置</n-button>
+      <n-button @click="reset">重置</n-button>
    </n-space>
  </n-card>
 </template>
--- a/src/oj/learn/index.vue
+++ b/src/oj/learn/index.vue
@@ -1,7 +1,12 @@
 <template>
  <div class="learn-container">
    <!-- 桌面端布局 -->
-    <n-grid :cols="5" :x-gap="16" v-if="tutorial.id && isDesktop" class="learn-grid">
+    <n-grid
+      :cols="5"
+      :x-gap="16"
+      v-if="tutorial.id && isDesktop"
+      class="learn-grid"
+    >
      <n-gi :span="1" class="learn-col">
        <n-card title="教程目录" :bordered="false" size="small">
          <n-list hoverable clickable>
@@ -51,7 +56,11 @@
          class="code-card"
          content-style="height: calc(100% - 44px); padding: 0;"
        >
-          <CodeEditor language="Python3" v-model="tutorial.code" height="100%" />
+          <CodeEditor
+            language="Python3"
+            v-model="tutorial.code"
+            height="100%"
+          />
        </n-card>
      </n-gi>
    </n-grid>
--- a/src/oj/problem/components/Form.vue
+++ b/src/oj/problem/components/Form.vue
@@ -31,9 +31,7 @@ interface Props {
  isConnected?: boolean // WebSocket 实际的连接状态（已建立/未建立）
 }

-const props = withDefaults(defineProps<Props>(), {
-  isConnected: false,
-})
+const { storageKey, isConnected = false } = defineProps<Props>()

 // 注入同步状态
 const syncStatus = injectSyncStatus()
@@ -102,7 +100,7 @@ const reset = () => {
    problem.value!.template[codeStore.code.language] ||
      SOURCES[codeStore.code.language],
  )
-  storage.remove(props.storageKey)
+  storage.remove(storageKey)
  message.success("代码重置成功")
 }

@@ -228,7 +226,7 @@ onMounted(() => {
      />

      <!-- 同步状态标签 -->
-      <template v-if="props.isConnected">
+      <template v-if="isConnected">
        <n-tag v-if="syncStatus.otherUser.value" type="info">
          {{ SYNC_MESSAGES.SYNCING_WITH(syncStatus.otherUser.value.name) }}
        </n-tag>
--- a/src/oj/problem/components/ProblemComment.vue
+++ b/src/oj/problem/components/ProblemComment.vue
@@ -67,7 +67,7 @@
          {{ content }}
        </n-form-item>
        <n-button
-          v-if="hasCommented && props.showStatistics"
+          v-if="hasCommented && showStatistics"
          type="primary"
          @click="getComments"
        >
@@ -77,7 +77,7 @@
          提交
        </n-button>
      </n-form>
-      <div v-if="props.showStatistics">
+      <div v-if="showStatistics">
        <n-descriptions
          class="list"
          v-if="count"
@@ -117,9 +117,7 @@ interface Props {
  showStatistics?: boolean
 }

-const props = withDefaults(defineProps<Props>(), {
-  showStatistics: true,
-})
+const { showStatistics = true } = defineProps<Props>()

 const userStore = useUserStore()
 const problemStore = useProblemStore()
--- a/src/oj/problem/components/ProblemEditor.vue
+++ b/src/oj/problem/components/ProblemEditor.vue
@@ -7,7 +7,7 @@ import { SOURCES } from "utils/constants"
 import SyncCodeEditor from "shared/components/SyncCodeEditor.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import storage from "utils/storage"
-import { LANGUAGE } from "utils/types"
+import type { LANGUAGE } from "utils/types"
 import Form from "./Form.vue"

 const FlowchartEditor = defineAsyncComponent(
@@ -51,6 +51,13 @@ onMounted(loadCode)

 watch(() => problem.value?._id, loadCode)

+watch(
+  () => codeStore.code.value,
+  (v) => {
+    storage.set(storageKey.value, v)
+  },
+)
+
 const changeCode = (v: string) => {
  storage.set(storageKey.value, v)
 }
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/src/oj/problem/components/SubmitCode.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { storeToRefs } from "pinia"
-import { getComment, submitCode, updateProblemSetProgress } from "oj/api"
+import {
+  formatCode,
+  getComment,
+  submitCode,
+  updateProblemSetProgress,
+} from "oj/api"
 import { useCodeStore } from "oj/store/code"
 import { useProblemStore } from "oj/store/problem"
 import { useFireworks } from "oj/problem/composables/useFireworks"
 import { useSubmissionMonitor } from "oj/problem/composables/useSubmissionMonitor"
-import { SubmissionStatus } from "utils/constants"
+import { LANGUAGE_FORMAT_VALUE, SubmissionStatus } from "utils/constants"
 import type { SubmitCodePayload } from "utils/types"
 import SubmissionResult from "./SubmissionResult.vue"
+import { getSubmitButtonState } from "./submitButtonState"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
 import { checkPythonSyntax } from "oj/problem/utils/pythonSyntaxCheck"
@@ -37,16 +43,12 @@ const { isDesktop } = useBreakpoints()
 const { celebrate } = useFireworks()

 // ==================== 判题监控 ====================
-const {
-  submission,
-  judging,
-  pending,
-  submitting,
-  isProcessing,
-  startMonitoring,
-} = useSubmissionMonitor()
+const { submission, judging, pending, submitting, startMonitoring } =
+  useSubmissionMonitor()

 const showResult = ref(false)
+const isFormatting = ref(false)
+const isSubmittingRequest = ref(false)

 // ==================== 提交冷却 ====================
 const { start: startCooldown, isPending: isCooldown } = useTimeout(5000, {
@@ -80,35 +82,20 @@ const { start: goToProblemSetDelayed } = useTimeoutFn(
 )

 // ==================== 计算属性 ====================
-// 按钮禁用逻辑
-const submitDisabled = computed(() => {
-  return (
-    !userStore.isAuthed ||
-    codeStore.code.value.trim() === "" ||
-    isProcessing.value ||
-    isCooldown.value
-  )
-})
-
-// 按钮文案
-const submitLabel = computed(() => {
-  if (!userStore.isAuthed) return "请先登录"
-  if (submitting.value) return "正在提交"
-  if (judging.value || pending.value) return "正在评分"
-  if (isCooldown.value) return "正在冷却"
-  return "提交代码"
-})
-
-// 按钮图标
-const submitIcon = computed(() => {
-  if (isProcessing.value) return "eos-icons:loading"
-  if (isCooldown.value) return "ph:lightbulb-fill"
-  return "ph:play-fill"
-})
+const buttonState = computed(() =>
+  getSubmitButtonState({
+    isAuthed: userStore.isAuthed,
+    hasCode: codeStore.code.value.trim() !== "",
+    isFormatting: isFormatting.value,
+    isSubmitting: isSubmittingRequest.value || submitting.value,
+    isJudging: judging.value || pending.value,
+    isCooldown: isCooldown.value,
+  }),
+)

 // ==================== 提交函数 ====================
 async function submit() {
-  if (!userStore.isAuthed) return
+  if (buttonState.value.disabled) return

  // 0. Python3 语法检测
  if (codeStore.code.language === "Python3") {
@@ -119,6 +106,28 @@ async function submit() {
    }
  }

+  // 0.5 提交前自动格式化（Python3 用 ruff，C/C++ 用 clang-format）
+  const formatLang = LANGUAGE_FORMAT_VALUE[codeStore.code.language]
+  if (["python", "c", "cpp"].includes(formatLang)) {
+    isFormatting.value = true
+    try {
+      const res = await formatCode({
+        code: codeStore.code.value,
+        language: formatLang,
+      })
+      codeStore.setCode(res.data.code)
+    } catch (e: any) {
+      if (e?.error === "format-error") {
+        // 仅 Python3 会出现：代码本身存在语法错误
+        message.warning(`代码格式化失败：${e.data}，请检查代码后重试`)
+        return
+      }
+      // server-error / 网络异常：格式化工具问题，静默降级，提交原代码
+    } finally {
+      isFormatting.value = false
+    }
+  }
+
  // 1. 构建提交数据
  const data: SubmitCodePayload = {
    problem_id: problem.value!.id,
@@ -129,13 +138,18 @@ async function submit() {
    data.contest_id = parseInt(contestID)
  }
  // 2. 提交代码到后端
-  const res = await submitCode(data)
-  console.log(`[Submit] 代码已提交: ID=${res.data.submission_id}`)
+  isSubmittingRequest.value = true
+  try {
+    const res = await submitCode(data)
+    console.log(`[Submit] 代码已提交: ID=${res.data.submission_id}`)

-  // 3. 启动冷却 + 监控
-  startCooldown()
-  startMonitoring(res.data.submission_id)
-  showResult.value = true
+    // 3. 启动冷却 + 监控
+    startCooldown()
+    startMonitoring(res.data.submission_id)
+    showResult.value = true
+  } finally {
+    isSubmittingRequest.value = false
+  }
 }

 // ==================== 失败计数 ====================
@@ -213,15 +227,15 @@ watch(
      <n-button
        :size="isDesktop ? 'medium' : 'small'"
        type="primary"
-        :disabled="submitDisabled"
+        :disabled="buttonState.disabled"
        @click="submit"
      >
        <template #icon>
          <n-icon>
-            <Icon :icon="submitIcon" />
+            <Icon :icon="buttonState.icon" />
          </n-icon>
        </template>
-        {{ submitLabel }}
+        {{ buttonState.label }}
      </n-button>
    </template>

--- a/src/oj/problem/components/submitButtonState.ts
+++ b/src/oj/problem/components/submitButtonState.ts
@@ -0,0 +1,53 @@
+export interface SubmitButtonStateInput {
+  isAuthed: boolean
+  hasCode: boolean
+  isFormatting: boolean
+  isSubmitting: boolean
+  isJudging: boolean
+  isCooldown: boolean
+}
+
+export interface SubmitButtonState {
+  disabled: boolean
+  label: string
+  icon: string
+}
+
+export function getSubmitButtonState({
+  isAuthed,
+  hasCode,
+  isFormatting,
+  isSubmitting,
+  isJudging,
+  isCooldown,
+}: SubmitButtonStateInput): SubmitButtonState {
+  const disabled =
+    !isAuthed ||
+    !hasCode ||
+    isFormatting ||
+    isSubmitting ||
+    isJudging ||
+    isCooldown
+
+  let label = "提交代码"
+  if (!isAuthed) {
+    label = "请先登录"
+  } else if (isFormatting) {
+    label = "格式化中"
+  } else if (isSubmitting) {
+    label = "正在提交"
+  } else if (isJudging) {
+    label = "正在评分"
+  } else if (isCooldown) {
+    label = "正在冷却"
+  }
+
+  const icon =
+    isFormatting || isSubmitting || isJudging
+      ? "eos-icons:loading"
+      : isCooldown
+        ? "ph:lightbulb-fill"
+        : "ph:play-fill"
+
+  return { disabled, label, icon }
+}
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -40,10 +40,7 @@ interface Props {
  problemSetId?: string
 }

-const props = withDefaults(defineProps<Props>(), {
-  contestID: "",
-  problemSetId: "",
-})
+const { problemID, contestID = "", problemSetId = "" } = defineProps<Props>()

 const errMsg = ref("无数据")
 const route = useRoute()
@@ -67,7 +64,7 @@ const tabOptions = computed(() => {
    options.push("editor")
  }
  options.push("info")
-  if (!props.contestID) {
+  if (!contestID) {
    options.push("comment")
  }
  if (myFlowchartStore.showing) {
@@ -110,7 +107,7 @@ watch(
 async function init() {
  screenModeStore.resetScreenMode()
  try {
-    const res = await getProblem(props.problemID, props.contestID)
+    const res = await getProblem(problemID, contestID)
    problem.value = res.data
  } catch (err: any) {
    problem.value = null
@@ -120,7 +117,7 @@ async function init() {
  }
 }
 onMounted(init)
-watch(() => props.problemID, init)
+watch(() => problemID, init)
 onBeforeUnmount(() => {
  problem.value = null
  errMsg.value = "无数据"
@@ -159,15 +156,15 @@ watch(isMobile, (value) => {
            <n-tab-pane
              name="info"
              tab="题目统计"
-              :disabled="!!props.problemSetId"
+              :disabled="!!problemSetId"
            >
              <ProblemInfo />
            </n-tab-pane>
            <n-tab-pane
-              v-if="!props.contestID"
+              v-if="!contestID"
              name="comment"
              tab="题目点评"
-              :disabled="!!props.problemSetId"
+              :disabled="!!problemSetId"
            >
              <ProblemComment />
            </n-tab-pane>
@@ -181,7 +178,7 @@ watch(isMobile, (value) => {
            <n-tab-pane
              name="submission"
              tab="我的提交"
-              :disabled="!!props.problemSetId"
+              :disabled="!!problemSetId"
            >
              <ProblemSubmission />
            </n-tab-pane>
@@ -215,15 +212,15 @@ watch(isMobile, (value) => {
          <n-tab-pane
            name="info"
            tab="题目统计"
-            :disabled="!!props.problemSetId"
+            :disabled="!!problemSetId"
          >
            <ProblemInfo />
          </n-tab-pane>
          <n-tab-pane
-            v-if="!props.contestID"
+            v-if="!contestID"
            name="comment"
            tab="题目点评"
-            :disabled="!!props.problemSetId"
+            :disabled="!!problemSetId"
          >
            <ProblemComment />
          </n-tab-pane>
@@ -237,7 +234,7 @@ watch(isMobile, (value) => {
          <n-tab-pane
            name="submission"
            tab="我的提交"
-            :disabled="!!props.problemSetId"
+            :disabled="!!problemSetId"
          >
            <ProblemSubmission />
          </n-tab-pane>
@@ -256,14 +253,14 @@ watch(isMobile, (value) => {
      <n-tab-pane name="editor" tab="代码">
        <component :is="inProblem ? ProblemEditor : ContestEditor" />
      </n-tab-pane>
-      <n-tab-pane name="info" tab="统计" :disabled="!!props.problemSetId">
+      <n-tab-pane name="info" tab="统计" :disabled="!!problemSetId">
        <ProblemInfo />
      </n-tab-pane>
      <n-tab-pane
-        v-if="!props.contestID"
+        v-if="!contestID"
        name="comment"
        tab="点评"
-        :disabled="!!props.problemSetId"
+        :disabled="!!problemSetId"
      >
        <ProblemComment />
      </n-tab-pane>
@@ -274,7 +271,7 @@ watch(isMobile, (value) => {
      >
        <MyFlowchartTab />
      </n-tab-pane>
-      <n-tab-pane name="submission" tab="提交" :disabled="!!props.problemSetId">
+      <n-tab-pane name="submission" tab="提交" :disabled="!!problemSetId">
        <ProblemSubmission />
      </n-tab-pane>
    </n-tabs>
--- a/src/oj/rank/list.vue
+++ b/src/oj/rank/list.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { formatISO, sub, type Duration } from "date-fns"
-import { NButton, NFlex, useThemeVars } from "naive-ui"
+import { NButton, NFlex } from "naive-ui"
 import {
  getActivityRank,
  getClassRank,
  getRank,
  getUserClassRank,
+  getClassPK,
 } from "oj/api"
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { getACRate } from "utils/functions"
-import { Rank } from "utils/types"
+import { getACRate, getCSRFToken } from "utils/functions"
+import type { Rank } from "utils/types"
 import Pagination from "shared/components/Pagination.vue"
 import { ChartType } from "utils/constants"
 import { renderTableTitle } from "utils/renders"
@@ -17,6 +18,9 @@ import Chart from "./components/Chart.vue"
 import Index from "./components/Index.vue"
 import { useUserStore } from "shared/store/user"
 import { Icon } from "@iconify/vue"
+import { MdPreview } from "md-editor-v3"
+import "md-editor-v3/lib/preview.css"
+import { consumeJSONEventStream } from "utils/stream"

 const gradeOptions = [
  { label: "24年级", value: 24 },
@@ -52,6 +56,83 @@ const myClassQuery = reactive({
  limit: 10,
 })

+const showClassDetailModal = ref(false)
+const classDetailData = ref<ClassComparison | null>(null)
+const classDetailLoading = ref(false)
+
+const classDetailAiLoading = ref(false)
+const classDetailAiContent = ref("")
+const showClassDetailAiModal = ref(false)
+let classDetailAiController: AbortController | null = null
+
+async function loadClassDetail(className: string) {
+  showClassDetailModal.value = true
+  classDetailLoading.value = true
+  classDetailData.value = null
+  try {
+    const res = await getClassPK([className])
+    classDetailData.value = res.data.comparisons[0] ?? null
+  } catch {
+    // ignore
+  } finally {
+    classDetailLoading.value = false
+  }
+}
+
+async function analyzeSingleClassWithAI() {
+  if (!classDetailData.value) return
+  if (classDetailAiController) classDetailAiController.abort()
+  const controller = new AbortController()
+  classDetailAiController = controller
+
+  showClassDetailModal.value = false
+  showClassDetailAiModal.value = true
+  classDetailAiContent.value = ""
+  classDetailAiLoading.value = true
+
+  const headers: Record<string, string> = { "Content-Type": "application/json" }
+  const csrfToken = getCSRFToken()
+  if (csrfToken) headers["X-CSRFToken"] = csrfToken
+
+  try {
+    const response = await fetch("/api/ai/class_single", {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ comparison: classDetailData.value }),
+      signal: controller.signal,
+    })
+    if (!response.ok) throw new Error("AI 分析生成失败")
+
+    let hasStarted = false
+    await consumeJSONEventStream(response, {
+      signal: controller.signal,
+      onEvent(event) {
+        if (event === "end" && !hasStarted) classDetailAiLoading.value = false
+      },
+      onMessage(payload) {
+        const parsed = payload as { type?: string; content?: string; message?: string }
+        if (parsed.type === "delta" && parsed.content) {
+          if (!hasStarted) {
+            hasStarted = true
+            classDetailAiLoading.value = false
+          }
+          classDetailAiContent.value += parsed.content
+        } else if (parsed.type === "error") {
+          throw new Error(parsed.message || "AI 服务异常")
+        } else if (parsed.type === "done" && !hasStarted) {
+          classDetailAiLoading.value = false
+        }
+      },
+    })
+  } catch (error: any) {
+    if (controller.signal.aborted) return
+    message.error(error?.message || "AI 分析失败，请稍后再试")
+    classDetailAiLoading.value = false
+  } finally {
+    if (classDetailAiController === controller) classDetailAiController = null
+  }
+}
+
 interface ClassRank {
  rank: number
  class_name: string
@@ -62,6 +143,27 @@ interface ClassRank {
  ac_rate: number
 }

+interface ClassComparison {
+  class_name: string
+  user_count: number
+  total_ac: number
+  total_submission: number
+  avg_ac: number
+  median_ac: number
+  q1_ac: number
+  q3_ac: number
+  iqr: number
+  std_dev: number
+  top_10_avg: number
+  middle_80_avg: number
+  bottom_10_avg: number
+  excellent_rate: number
+  pass_rate: number
+  active_rate: number
+  ac_rate: number
+  composite_score: number
+}
+
 interface UserRank {
  rank: number
  username: string
@@ -191,7 +293,7 @@ const classColumns: DataTableColumn<ClassRank>[] = [
  {
    title: "排名",
    key: "rank",
-    width: 100,
+    width: 60,
    titleAlign: "center",
    align: "center",
  },
@@ -200,46 +302,63 @@ const classColumns: DataTableColumn<ClassRank>[] = [
    key: "class_name",
    render: (row) =>
      `${row.class_name.slice(0, 2)}计算机${row.class_name.slice(2)}班`,
-    width: 200,
+    minWidth: 120,
    titleAlign: "center",
    align: "center",
  },
  {
    title: "人数",
    key: "user_count",
-    width: 100,
+    width: 80,
    titleAlign: "center",
    align: "center",
  },
  {
    title: "总AC数",
    key: "total_ac",
-    width: 120,
+    width: 90,
    titleAlign: "center",
    align: "center",
  },
  {
-    title: "总提交数",
+    title: "提交数",
    key: "total_submission",
-    width: 120,
+    width: 90,
    titleAlign: "center",
    align: "center",
  },
  {
    title: "平均AC数",
    key: "avg_ac",
-    width: 120,
+    width: 100,
    titleAlign: "center",
    align: "center",
  },
  {
    title: "正确率",
    key: "ac_rate",
-    width: 100,
+    width: 90,
    titleAlign: "center",
    align: "center",
    render: (row) => `${row.ac_rate}%`,
  },
+  {
+    title: "详情",
+    key: "action",
+    width: 70,
+    titleAlign: "center",
+    align: "center",
+    render: (row) =>
+      h(
+        NButton,
+        {
+          text: true,
+          type: "info",
+          onClick: () => loadClassDetail(row.class_name),
+        },
+        () => "查看",
+      ),
+  },
 ]

 const myClassColumns: DataTableColumn<UserRank>[] = [
@@ -453,6 +572,260 @@ watch(
      </n-gi>
    </n-grid>
  </n-flex>
+
+  <n-modal
+    v-model:show="showClassDetailModal"
+    preset="card"
+    :title="
+      classDetailData
+        ? `${classDetailData.class_name.slice(0, 2)}计算机${classDetailData.class_name.slice(2)}班`
+        : '班级详情'
+    "
+    :style="{ width: '700px', maxWidth: '95vw' }"
+  >
+    <n-spin :show="classDetailLoading" style="min-height: 200px">
+      <n-flex v-if="classDetailData" vertical :size="12">
+        <n-grid :cols="5" :x-gap="8" responsive="screen">
+          <n-gi>
+            <n-statistic
+              label="总AC数"
+              :value="classDetailData.total_ac"
+              size="large"
+              class="stat-total-ac"
+            >
+              <template #suffix>
+                <Icon icon="streamline-emojis:raised-fist-1" width="20" />
+              </template>
+            </n-statistic>
+          </n-gi>
+          <n-gi>
+            <n-statistic
+              label="平均AC数"
+              :value="classDetailData.avg_ac.toFixed(2)"
+              size="large"
+              class="stat-avg-ac"
+            >
+              <template #suffix>
+                <Icon icon="streamline-emojis:chart" width="20" />
+              </template>
+            </n-statistic>
+          </n-gi>
+          <n-gi>
+            <n-statistic
+              label="中位数AC数"
+              :value="classDetailData.median_ac.toFixed(2)"
+              size="large"
+              class="stat-median-ac"
+            >
+              <template #suffix>
+                <Icon icon="streamline-emojis:target" width="20" />
+              </template>
+            </n-statistic>
+          </n-gi>
+          <n-gi>
+            <n-statistic
+              label="总提交数"
+              :value="classDetailData.total_submission"
+              size="large"
+              class="stat-total-submission"
+            >
+              <template #suffix>
+                <Icon icon="streamline-emojis:paper" width="20" />
+              </template>
+            </n-statistic>
+          </n-gi>
+          <n-gi>
+            <n-statistic
+              label="AC率"
+              :value="classDetailData.ac_rate.toFixed(1) + '%'"
+              size="large"
+              class="stat-ac-rate"
+            >
+              <template #suffix>
+                <Icon icon="streamline-emojis:check-mark" width="20" />
+              </template>
+            </n-statistic>
+          </n-gi>
+        </n-grid>
+
+        <n-divider style="margin: 12px 0" />
+
+        <n-descriptions
+          bordered
+          :column="2"
+          size="small"
+          label-placement="left"
+        >
+          <n-descriptions-item label="第一四分位数(Q1)">
+            <span style="color: #9254de; font-weight: 500">{{
+              classDetailData.q1_ac.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="第三四分位数(Q3)">
+            <span style="color: #f759ab; font-weight: 500">{{
+              classDetailData.q3_ac.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="四分位距(IQR)">
+            <span style="color: #13c2c2; font-weight: 500">{{
+              classDetailData.iqr.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="标准差">
+            <span style="color: #fa8c16; font-weight: 500">{{
+              classDetailData.std_dev.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="前10%均值">
+            <span style="color: #cf1322; font-weight: 600">{{
+              classDetailData.top_10_avg.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="中间80%均值">
+            <span style="color: #389e0d; font-weight: 600">{{
+              classDetailData.middle_80_avg.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="后10%均值">
+            <span style="color: #096dd9; font-weight: 500">{{
+              classDetailData.bottom_10_avg.toFixed(2)
+            }}</span>
+          </n-descriptions-item>
+          <n-descriptions-item label="人数">
+            <span style="color: #1890ff; font-weight: 600">{{
+              classDetailData.user_count
+            }}</span>
+          </n-descriptions-item>
+        </n-descriptions>
+
+        <n-card size="small" title="比率统计" embedded style="margin-top: 12px">
+          <n-space vertical :size="10">
+            <n-progress
+              type="line"
+              :percentage="classDetailData.excellent_rate"
+              :show-indicator="true"
+              :border-radius="4"
+            >
+              <template #default
+                >优秀率:
+                {{ classDetailData.excellent_rate.toFixed(1) }}%</template
+              >
+            </n-progress>
+            <n-progress
+              type="line"
+              :percentage="classDetailData.pass_rate"
+              :show-indicator="true"
+              :border-radius="4"
+              status="success"
+            >
+              <template #default
+                >及格率: {{ classDetailData.pass_rate.toFixed(1) }}%</template
+              >
+            </n-progress>
+            <n-progress
+              type="line"
+              :percentage="classDetailData.active_rate"
+              :show-indicator="true"
+              :border-radius="4"
+              status="info"
+            >
+              <template #default
+                >参与度: {{ classDetailData.active_rate.toFixed(1) }}%</template
+              >
+            </n-progress>
+          </n-space>
+        </n-card>
+
+        <n-flex justify="center" align="center" :size="12" style="margin-top: 12px">
+          <n-tag type="success" size="large">
+            综合分: {{ classDetailData.composite_score.toFixed(1) }}
+          </n-tag>
+          <n-button
+            type="info"
+            size="small"
+            :loading="classDetailAiLoading"
+            @click="analyzeSingleClassWithAI"
+          >
+            <template #icon>
+              <Icon icon="mingcute:ai-line" />
+            </template>
+            AI分析
+          </n-button>
+        </n-flex>
+      </n-flex>
+      <n-empty
+        v-else-if="!classDetailLoading"
+        description="暂无数据"
+        style="padding: 40px 0"
+      />
+    </n-spin>
+  </n-modal>
+
+  <n-modal
+    v-model:show="showClassDetailAiModal"
+    preset="card"
+    title="AI 分析报告"
+    :style="{ width: '800px', maxWidth: '95vw' }"
+  >
+    <n-spin :show="classDetailAiLoading" :delay="50">
+      <div style="min-height: 200px">
+        <MdPreview v-if="classDetailAiContent" :model-value="classDetailAiContent" />
+        <n-flex
+          v-else-if="!classDetailAiLoading"
+          align="center"
+          justify="center"
+          style="min-height: 200px"
+        >
+          <n-empty description="暂无分析内容" />
+        </n-flex>
+      </div>
+    </n-spin>
+  </n-modal>
 </template>

-<style scoped></style>
+<style scoped>
+.stat-total-ac :deep(.n-statistic-value),
+.stat-total-ac :deep(.n-statistic-value__content),
+.stat-total-ac :deep(.n-number-animation),
+.stat-total-ac :deep(.n-statistic-value > *),
+.stat-total-ac :deep(.n-statistic-value span) {
+  color: #ff4d4f !important;
+  font-weight: 600;
+}
+
+.stat-avg-ac :deep(.n-statistic-value),
+.stat-avg-ac :deep(.n-statistic-value__content),
+.stat-avg-ac :deep(.n-number-animation),
+.stat-avg-ac :deep(.n-statistic-value > *),
+.stat-avg-ac :deep(.n-statistic-value span) {
+  color: #52c41a !important;
+  font-weight: 600;
+}
+
+.stat-median-ac :deep(.n-statistic-value),
+.stat-median-ac :deep(.n-statistic-value__content),
+.stat-median-ac :deep(.n-number-animation),
+.stat-median-ac :deep(.n-statistic-value > *),
+.stat-median-ac :deep(.n-statistic-value span) {
+  color: #fa8c16 !important;
+  font-weight: 600;
+}
+
+.stat-total-submission :deep(.n-statistic-value),
+.stat-total-submission :deep(.n-statistic-value__content),
+.stat-total-submission :deep(.n-number-animation),
+.stat-total-submission :deep(.n-statistic-value > *),
+.stat-total-submission :deep(.n-statistic-value span) {
+  color: #805ad5 !important;
+  font-weight: 600;
+}
+
+.stat-ac-rate :deep(.n-statistic-value),
+.stat-ac-rate :deep(.n-statistic-value__content),
+.stat-ac-rate :deep(.n-number-animation),
+.stat-ac-rate :deep(.n-statistic-value > *),
+.stat-ac-rate :deep(.n-statistic-value span) {
+  color: #00b894 !important;
+  font-weight: 600;
+}
+</style>
--- a/src/oj/store/ai.ts
+++ b/src/oj/store/ai.ts
@@ -1,6 +1,11 @@
 import { DetailsData, DurationData } from "utils/types"
 import { consumeJSONEventStream } from "utils/stream"
-import { getAIDetailData, getAIDurationData, getAIHeatmapData } from "../api"
+import {
+  getAIDetailData,
+  getAIDurationData,
+  getAIHeatmapData,
+  getAIPinnedReport,
+} from "../api"
 import { getCSRFToken } from "utils/functions"

 export const useAIStore = defineStore("ai", () => {
@@ -27,6 +32,7 @@ export const useAIStore = defineStore("ai", () => {
  })

  const mdContent = ref("")
+  const pinnedReport = ref<{ analysis: string } | null>(null)

  async function fetchDetailsData(start: string, end: string) {
    const res = await getAIDetailData(
@@ -156,10 +162,38 @@ export const useAIStore = defineStore("ai", () => {
    }
  }

+  async function fetchPinnedReport() {
+    const res = await getAIPinnedReport()
+    pinnedReport.value = res.data
+  }
+
+  async function simulatePinnedStream() {
+    if (!pinnedReport.value) return
+    const text = pinnedReport.value.analysis
+    mdContent.value = ""
+    const CHUNK = 6
+    const DELAY = 18
+    await new Promise<void>((resolve) => {
+      let i = 0
+      function step() {
+        if (i >= text.length) {
+          resolve()
+          return
+        }
+        mdContent.value += text.slice(i, i + CHUNK)
+        i += CHUNK
+        setTimeout(step, DELAY)
+      }
+      step()
+    })
+  }
+
  return {
    fetchAnalysisData,
    fetchHeatmapData,
    fetchAIAnalysis,
+    fetchPinnedReport,
+    simulatePinnedStream,
    durationData,
    detailsData,
    heatmapData,
@@ -167,5 +201,6 @@ export const useAIStore = defineStore("ai", () => {
    targetUsername,
    loading,
    mdContent,
+    pinnedReport,
  }
 })
--- a/src/oj/submission/components/FlowchartScoreDetail.vue
+++ b/src/oj/submission/components/FlowchartScoreDetail.vue
@@ -1,36 +1,45 @@
 <template>
  <n-grid v-if="submission" :cols="5" :x-gap="16">
    <!-- 左侧：流程图预览区域 -->
-    <n-gi :span="showLargeImage ? 5 : 3">
+    <n-gi :span="3">
      <n-card title="流程图预览">
        <template #header-extra>
          <n-button
            v-if="!renderError && submission?.mermaid_code"
            quaternary
            size="small"
-            @click="showLargeImage = !showLargeImage"
+            @click="showLargeImage = true"
          >
            <template #icon>
-              <Icon
-                :icon="
-                  showLargeImage ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'
-                "
-              />
+              <Icon icon="mdi:fullscreen" />
            </template>
-            {{ showLargeImage ? "退出大图" : "查看大图" }}
+            查看大图
          </n-button>
        </template>
        <div class="flowchart">
          <n-alert v-if="renderError" type="error" title="流程图渲染失败">
            {{ renderError }}
          </n-alert>
-          <div class="flowchart" v-else ref="mermaidContainer"></div>
+          <Teleport v-else to="body" :disabled="!showLargeImage">
+            <div
+              :class="['flowchart', { 'flowchart-fullscreen': showLargeImage }]"
+              ref="mermaidContainer"
+            ></div>
+            <div v-if="showLargeImage" class="fullscreen-toolbar">
+              <n-button secondary round @click="showLargeImage = false">
+                <template #icon>
+                  <Icon icon="mdi:fullscreen-exit" />
+                </template>
+                退出大图
+              </n-button>
+            </div>
+          </Teleport>
        </div>
      </n-card>
    </n-gi>

    <!-- 右侧：评分详情区域 -->
-    <n-gi v-if="!showLargeImage" :span="2">
+    <n-gi :span="2">
      <!-- AI反馈 -->
      <n-card
        v-if="submission.ai_feedback"
@@ -137,6 +146,7 @@ function getPercentType(percent: number) {

 async function loadSubmission() {
  if (!props.submissionId) return
+  showLargeImage.value = false
  loading.value = true
  try {
    const { getFlowchartSubmission } = await import("oj/api")
@@ -171,11 +181,42 @@ watch(() => props.submissionId, loadSubmission, { immediate: true })
  align-items: center;
 }

+/* 全屏大图：覆盖整个视口，脱离弹框宽度限制 */
+.flowchart-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+  width: 100vw;
+  height: 100vh;
+  padding: 32px;
+  box-sizing: border-box;
+  background: #ffffff;
+  /* 改为可滚动块布局，超出视口的大图可以滚动查看 */
+  display: block;
+  overflow: auto;
+}
+
+.fullscreen-toolbar {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 4001;
+}
+
 /* 确保 SVG 图表占满容器 */
 :deep(.flowchart > svg) {
  height: 100%;
 }

+/* 全屏时按自然尺寸显示并水平居中，配合容器滚动 */
+:deep(.flowchart-fullscreen > svg) {
+  display: block;
+  margin: 0 auto;
+  width: auto;
+  height: auto;
+  max-width: none;
+}
+
 .loading-container {
  min-height: 600px;
  display: flex;
--- a/src/oj/submission/list.vue
+++ b/src/oj/submission/list.vue
@@ -6,6 +6,7 @@ import {
  getFlowchartSubmissions,
  getSubmissions,
  getTodaySubmissionCount,
+  retryFlowchartSubmission,
 } from "oj/api"
 import { parseTime } from "utils/functions"
 import type {
@@ -79,6 +80,14 @@ const resultOptions: SelectOption[] = [
  { label: "运行时错误", value: "4" },
 ]

+const gradeOptions: SelectOption[] = [
+  { label: "全部", value: "" },
+  { label: "S级", value: "S" },
+  { label: "A级", value: "A" },
+  { label: "B级", value: "B" },
+  { label: "C级", value: "C" },
+]
+
 const languageOptions: SelectOption[] = [
  { label: "流程图", value: "Flowchart" },
  { label: "全部语言", value: "" },
@@ -96,6 +105,8 @@ async function listSubmissions() {
      myself: query.myself,
      offset,
      limit: query.limit,
+      today: query.today,
+      grade: query.result,
    })
    total.value = res.data.total
    flowcharts.value = res.data.results
@@ -114,7 +125,7 @@ async function listSubmissions() {
 }

 async function getTodayCount() {
-  const res = await getTodaySubmissionCount()
+  const res = await getTodaySubmissionCount(query.language)
  todayCount.value = res.data
 }

@@ -140,6 +151,12 @@ async function rejudge(submissionID: string) {
  listSubmissions()
 }

+async function retryFlowchart(submissionId: string) {
+  await retryFlowchartSubmission(submissionId)
+  message.success("重新评分已提交")
+  listSubmissions()
+}
+
 function problemClicked(row: SubmissionListItem | FlowchartSubmissionListItem) {
  if (route.name === "contest submissions") {
    const path = router.resolve({
@@ -192,6 +209,24 @@ watch(
  listSubmissions,
 )

+// 切换语言时重置过滤条件，刷新今日提交数
+watch(
+  () => query.language,
+  () => {
+    query.result = ""
+    if (route.name === "submissions") getTodayCount()
+  },
+)
+
+// 登录状态变化后刷新提交列表，更新提交编号列的可点击状态
+watch(
+  () => userStore.isAuthed,
+  () => {
+    listSubmissions()
+    if (route.name === "submissions") getTodayCount()
+  },
+)
+
 const columns = computed(() => {
  const res: DataTableColumn<SubmissionListItem>[] = [
    {
@@ -281,61 +316,81 @@ const columns = computed(() => {
  return res
 })

-const flowchartColumns: DataTableColumn<FlowchartSubmissionListItem>[] = [
-  {
-    title: renderTableTitle("提交时间", "noto:seven-oclock"),
-    key: "create_time",
-    render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
-  },
-  {
-    title: renderTableTitle("提交编号", "fluent-emoji-flat:input-numbers"),
-    key: "id",
-    render: (row) =>
-      h(FlowchartLink, {
-        flowchart: row,
-        onShowDetail: (id: string) => showScoreDetail(id),
-      }),
-  },
-  {
-    title: renderTableTitle("题目", "streamline-emojis:blossom"),
-    key: "problem_title",
-    render: (row) =>
-      h(
-        ButtonWithSearch,
-        {
-          type: "题目",
-          onClick: () => problemClicked(row),
-          onSearch: () => (query.problem = row.problem),
-        },
-        () => `${row.problem} ${row.problem_title}`,
+const flowchartColumns = computed(() => {
+  const res: DataTableColumn<FlowchartSubmissionListItem>[] = [
+    {
+      title: renderTableTitle("提交时间", "noto:seven-oclock"),
+      key: "create_time",
+      render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
+    },
+    {
+      title: renderTableTitle("提交编号", "fluent-emoji-flat:input-numbers"),
+      key: "id",
+      render: (row) =>
+        h(FlowchartLink, {
+          flowchart: row,
+          onShowDetail: (id: string) => showScoreDetail(id),
+        }),
+    },
+    {
+      title: renderTableTitle("题目", "streamline-emojis:blossom"),
+      key: "problem_title",
+      render: (row) =>
+        h(
+          ButtonWithSearch,
+          {
+            type: "题目",
+            onClick: () => problemClicked(row),
+            onSearch: () => (query.problem = row.problem),
+          },
+          () => `${row.problem} ${row.problem_title}`,
+        ),
+    },
+    {
+      title: renderTableTitle("评分", "streamline-emojis:bar-chart"),
+      key: "ai_score",
+      render: (row) => h(Grade, { score: row.ai_score, grade: row.ai_grade }),
+    },
+    {
+      title: renderTableTitle(
+        "用户",
+        "streamline-emojis:smiling-face-with-sunglasses",
      ),
-  },
-  {
-    title: renderTableTitle("评分", "streamline-emojis:bar-chart"),
-    key: "ai_score",
-    render: (row) => h(Grade, { score: row.ai_score, grade: row.ai_grade }),
-  },
-  {
-    title: renderTableTitle(
-      "用户",
-      "streamline-emojis:smiling-face-with-sunglasses",
-    ),
-    key: "username",
-    minWidth: 200,
-    render: (row) =>
-      h(
-        ButtonWithSearch,
-        {
-          type: "用户",
-          username: row.username,
-          onClick: () => window.open("/user?name=" + row.username, "_blank"),
-          onSearch: () => (query.username = row.username),
-          onFilterClass: (classname: string) => (query.username = classname),
-        },
-        () => row.username,
-      ),
-  },
-]
+      key: "username",
+      minWidth: 200,
+      render: (row) =>
+        h(
+          ButtonWithSearch,
+          {
+            type: "用户",
+            username: row.username,
+            onClick: () => window.open("/user?name=" + row.username, "_blank"),
+            onSearch: () => (query.username = row.username),
+            onFilterClass: (classname: string) => (query.username = classname),
+          },
+          () => row.username,
+        ),
+    },
+  ]
+  if (!route.params.contestID && userStore.isTeacherOrAbove) {
+    res.push({
+      title: renderTableTitle("选项", "streamline-emojis:wrench"),
+      key: "retry",
+      render: (row) =>
+        h(
+          NButton,
+          {
+            quaternary: true,
+            size: "small",
+            type: "primary",
+            onClick: () => retryFlowchart(row.id),
+          },
+          () => "重新判题",
+        ),
+    })
+  }
+  return res
+})
 </script>
 <template>
  <n-flex vertical size="large">
@@ -355,12 +410,13 @@ const flowchartColumns: DataTableColumn<FlowchartSubmissionListItem>[] = [
            :options="languageOptions"
          />
        </n-form-item>
-        <n-form-item label="状态">
+        <n-form-item :label="query.language === 'Flowchart' ? '等级' : '状态'">
          <n-select
-            :disabled="query.language === 'Flowchart'"
            class="select"
            v-model:value="query.result"
-            :options="resultOptions"
+            :options="
+              query.language === 'Flowchart' ? gradeOptions : resultOptions
+            "
          />
        </n-form-item>
      </n-form>
@@ -449,14 +505,20 @@ const flowchartColumns: DataTableColumn<FlowchartSubmissionListItem>[] = [
    preset="card"
    :style="{ maxWidth: isDesktop && '800px', maxHeight: '80vh' }"
    :content-style="{ overflow: 'auto' }"
-    :title="query.language === 'Flowchart' ? '流程图提交的统计' : '提交记录的统计'"
+    :title="
+      query.language === 'Flowchart' ? '流程图提交的统计' : '提交记录的统计'
+    "
  >
    <FlowchartStatisticsPanel
      v-if="query.language === 'Flowchart'"
      :problem="query.problem"
      :username="query.username"
    />
-    <StatisticsPanel v-else :problem="query.problem" :username="query.username" />
+    <StatisticsPanel
+      v-else
+      :problem="query.problem"
+      :username="query.username"
+    />
  </n-modal>
  <n-modal
    v-model:show="codePanel"
--- a/src/oj/transforms.ts
+++ b/src/oj/transforms.ts
@@ -0,0 +1,29 @@
+import { DIFFICULTY } from "utils/constants"
+import { getACRate } from "utils/functions"
+import type { Problem } from "utils/types"
+
+// 把后端的 Problem 塑形成列表项需要的形状，与请求逻辑解耦。
+export function filterResult(result: Problem) {
+  const newResult = {
+    id: result.id,
+    _id: result._id,
+    title: result.title,
+    difficulty: DIFFICULTY[result.difficulty],
+    tags: result.tags,
+    submission: result.submission_number,
+    rate: getACRate(result.accepted_number, result.submission_number),
+    status: "",
+    author: result.created_by.username,
+    allow_flowchart: result.allow_flowchart,
+    show_flowchart: result.show_flowchart,
+    has_ast_rules: result.has_ast_rules,
+  }
+  if (result.my_status === null || result.my_status === undefined) {
+    newResult.status = "not_test"
+  } else if (result.my_status === 0) {
+    newResult.status = "passed"
+  } else {
+    newResult.status = "failed"
+  }
+  return newResult
+}
--- a/src/oj/user/index.vue
+++ b/src/oj/user/index.vue
@@ -28,7 +28,7 @@ const isDefaultAvatar = computed(
  () => profile.value?.avatar.endsWith("default.png") ?? true,
 )

-const problemsFlexRef = ref<HTMLElement | null>(null)
+const problemsFlexRef = useTemplateRef<HTMLElement>("problemsFlexRef")
 const itemsPerRow = ref(8)

 function updateItemsPerRow() {
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from "vue-router"
+import type { RouteRecordRaw } from "vue-router"

 export const ojs: RouteRecordRaw = {
  path: "/",
@@ -315,5 +315,11 @@ export const admins: RouteRecordRaw = {
      props: true,
      meta: { requiresTeacherAdmin: true },
    },
+    {
+      path: "ai/reports",
+      name: "admin ai reports",
+      component: () => import("admin/ai/list.vue"),
+      meta: { requiresTeacherAdmin: true },
+    },
  ],
 }
--- a/src/shared/components/CodeEditor.vue
+++ b/src/shared/components/CodeEditor.vue
@@ -22,21 +22,19 @@ interface Props {
  placeholder?: string
 }

-const props = withDefaults(defineProps<Props>(), {
-  language: "Python3",
-  fontSize: 20,
-  height: "100%",
-  readonly: false,
-  placeholder: "",
-})
-
-const { readonly, placeholder, height, fontSize } = toRefs(props)
+const {
+  language = "Python3",
+  fontSize = 20,
+  height = "100%",
+  readonly = false,
+  placeholder = "",
+} = defineProps<Props>()
 const code = defineModel<string>("value")

 const isDark = useDark()

 const langExtension = computed(() => {
-  return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
+  return ["Python2", "Python3"].includes(language) ? python() : cpp()
 })

 const extensions = computed(() => [
@@ -45,7 +43,7 @@ const extensions = computed(() => [
  bracketMatching(),
  closeBrackets(),
  autocompletion({
-    override: [enhanceCompletion(props.language), completeAnyWord],
+    override: [enhanceCompletion(language), completeAnyWord],
  }),
  isDark.value ? oneDark : smoothy,
 ])
--- a/src/shared/components/FlowchartEditor/CustomNode.vue
+++ b/src/shared/components/FlowchartEditor/CustomNode.vue
@@ -78,7 +78,7 @@ const emit = defineEmits<Emits>()
 const isHovered = ref(false)
 const isEditing = ref(false)
 const editText = ref("")
-const editInput = ref<HTMLInputElement>()
+const editInput = useTemplateRef<HTMLInputElement>("editInput")

 // 定时器和事件处理器
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
--- a/src/shared/components/FlowchartEditor/index.vue
+++ b/src/shared/components/FlowchartEditor/index.vue
@@ -26,9 +26,7 @@ interface Props {
  height?: string
 }

-withDefaults(defineProps<Props>(), {
-  height: "calc(100vh - 133px)",
-})
+const { height = "calc(100vh - 133px)" } = defineProps<Props>()

 // Vue Flow 实例
 const { addEdges, removeNodes, removeEdges } = useVueFlow()
--- a/src/shared/components/FlowchartStatisticsPanel.vue
+++ b/src/shared/components/FlowchartStatisticsPanel.vue
@@ -70,22 +70,36 @@
          <!-- 1. Grade pie chart -->
          <n-gi>
            <n-card title="等级分布">
-              <Doughnut :data="gradeChartData" :options="doughnutOptions" />
+              <div class="chart-container">
+                <Doughnut :data="gradeChartData" :options="doughnutOptions" />
+              </div>
            </n-card>
          </n-gi>
          <!-- 3. Completion doughnut -->
          <n-gi v-if="data.person_count > 0">
            <n-card title="班级完成度">
-              <Doughnut
-                :data="completionChartData"
-                :options="doughnutOptions"
-              />
+              <div class="chart-container">
+                <Doughnut
+                  :data="completionChartData"
+                  :options="doughnutOptions"
+                />
+              </div>
            </n-card>
          </n-gi>
          <!-- 2. Radar chart -->
          <n-gi v-if="hasRadarData">
            <n-card title="四维评分雷达图">
-              <Radar :data="radarChartData" :options="radarOptions" />
+              <div class="chart-container">
+                <Radar :data="radarChartData" :options="radarOptions" />
+              </div>
+            </n-card>
+          </n-gi>
+          <!-- 4. Criteria bar chart (only when class exists, pairs with radar) -->
+          <n-gi v-if="data.person_count > 0 && hasRadarData">
+            <n-card title="各维度平均得分">
+              <div class="chart-container">
+                <Bar :data="criteriaBarChartData" :options="barOptions" />
+              </div>
            </n-card>
          </n-gi>
          <!-- 4. Word cloud -->
@@ -102,16 +116,42 @@
      <n-tab-pane
        v-if="data.data_unaccepted.length > 0"
        name="unaccepted"
-        :tab="`未完成（${data.data_unaccepted.length}）`"
+        :tab="`未完成（${visibleUnaccepted.length}）`"
      >
-        <n-flex size="large" align="center" style="margin-top: 12px">
-          <span
-            v-for="item in data.data_unaccepted"
-            :key="item.username"
-            style="font-size: 24px"
+        <n-flex align="center" style="margin: 12px 0">
+          <n-switch v-model:value="hideMode" size="large">
+            <template #checked>请假隐藏中</template>
+            <template #unchecked>请假隐藏</template>
+          </n-switch>
+          <n-button
+            v-if="hiddenCount > 0"
+            size="small"
+            type="info"
+            @click="showAll"
          >
-            {{ item.real_name }}
-          </span>
+            恢复 {{ hiddenCount }} 位
+          </n-button>
+        </n-flex>
+        <n-flex size="large" align="center">
+          <n-gradient-text
+            v-if="visibleUnaccepted.length === 0"
+            font-size="24"
+            type="success"
+          >
+            全都完成了
+          </n-gradient-text>
+          <template v-for="item in visibleUnaccepted" :key="item.username">
+            <n-tag
+              v-if="hideMode"
+              closable
+              size="large"
+              style="font-size: 20px"
+              @close="hideStudent(item.username)"
+            >
+              {{ item.real_name }}
+            </n-tag>
+            <span v-else style="font-size: 24px">{{ item.real_name }}</span>
+          </template>
        </n-flex>
      </n-tab-pane>
    </n-tabs>
@@ -122,7 +162,7 @@
 import { formatISO, sub, type Duration } from "date-fns"
 import { getFlowchartStatistics } from "oj/api"
 import { DURATION_OPTIONS } from "utils/constants"
-import { Doughnut, Radar } from "vue-chartjs"
+import { Doughnut, Radar, Bar } from "vue-chartjs"
 import {
  Chart as ChartJS,
  ArcElement,
@@ -134,11 +174,10 @@ import {
  LineElement,
  Filler,
  LinearScale,
+  BarElement,
+  CategoryScale,
 } from "chart.js"
-import {
-  WordCloudController,
-  WordElement,
-} from "chartjs-chart-wordcloud"
+import { WordCloudController, WordElement } from "chartjs-chart-wordcloud"

 ChartJS.register(
  ArcElement,
@@ -150,6 +189,8 @@ ChartJS.register(
  LineElement,
  Filler,
  LinearScale,
+  BarElement,
+  CategoryScale,
  WordCloudController,
  WordElement,
 )
@@ -200,11 +241,71 @@ const data = reactive<StatisticsData>({
 const wordcloudCanvas = useTemplateRef<HTMLCanvasElement>("wordcloudCanvas")
 let wordcloudChart: ChartJS | null = null

+const HIDE_DURATION = 2 * 60 * 60 * 1000
+const STORAGE_KEY = "oj_hidden_students_flowchart"
+
+function loadHidden(): Record<string, number> {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "{}")
+  } catch {
+    return {}
+  }
+}
+
+const hiddenStudents = ref<Record<string, number>>(loadHidden())
+const hideMode = ref(false)
+
+function saveHidden(d: Record<string, number>) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(d))
+}
+
+function hideStudent(username: string) {
+  hiddenStudents.value = {
+    ...hiddenStudents.value,
+    [username]: Date.now() + HIDE_DURATION,
+  }
+  saveHidden(hiddenStudents.value)
+}
+
+function showAll() {
+  hiddenStudents.value = {}
+  saveHidden({})
+}
+
+const visibleUnaccepted = computed(() => {
+  const now = Date.now()
+  return data.data_unaccepted.filter((item) => {
+    const exp = hiddenStudents.value[item.username]
+    return !exp || exp <= now
+  })
+})
+
+const hiddenCount = computed(() => {
+  const now = Date.now()
+  return data.data_unaccepted.filter((item) => {
+    const exp = hiddenStudents.value[item.username]
+    return !!exp && exp > now
+  }).length
+})
+
+const adjustedPersonCount = computed(() =>
+  Math.max(0, data.person_count - hiddenCount.value),
+)
+
+onMounted(() => {
+  const now = Date.now()
+  const cleaned = Object.fromEntries(
+    Object.entries(hiddenStudents.value).filter(([, exp]) => exp > now),
+  )
+  hiddenStudents.value = cleaned
+  saveHidden(cleaned)
+})
+
 const completionRate = computed(() => {
-  if (data.person_count <= 0) return "0%"
+  if (adjustedPersonCount.value <= 0) return "0%"
  const rate = Math.min(
    100,
-    (data.completed_count / data.person_count) * 100,
+    (data.completed_count / adjustedPersonCount.value) * 100,
  )
  return `${Math.round(rate * 100) / 100}%`
 })
@@ -236,16 +337,16 @@ const gradeChartData = computed(() => {
 })

 const completionChartData = computed(() => {
-  const uncompleted = Math.max(0, data.person_count - data.completed_count)
+  const uncompleted = Math.max(
+    0,
+    adjustedPersonCount.value - data.completed_count,
+  )
  return {
    labels: ["已完成", "未完成"],
    datasets: [
      {
        data: [data.completed_count, uncompleted],
-        backgroundColor: [
-          "rgba(106, 176, 76, 0.6)",
-          "rgba(255, 159, 64, 0.6)",
-        ],
+        backgroundColor: ["rgba(106, 176, 76, 0.6)", "rgba(255, 159, 64, 0.6)"],
        borderColor: ["rgba(106, 176, 76, 1)", "rgba(255, 159, 64, 1)"],
        borderWidth: 2,
      },
@@ -328,6 +429,47 @@ const radarOptions = {
  },
 }

+const criteriaBarChartData = computed(() => {
+  const labels = CRITERIA_ORDER.filter((k) => k in data.criteria_averages)
+  return {
+    labels,
+    datasets: [
+      {
+        label: "平均得分",
+        data: labels.map((k) => data.criteria_averages[k]?.avg ?? 0),
+        backgroundColor: labels.map(
+          (_, i) => GRADE_COLORS[["S", "A", "B", "C"][i]].bg,
+        ),
+        borderColor: labels.map(
+          (_, i) => GRADE_COLORS[["S", "A", "B", "C"][i]].border,
+        ),
+        borderWidth: 2,
+      },
+    ],
+  }
+})
+
+const barOptions = {
+  responsive: true,
+  aspectRatio: 1,
+  scales: {
+    y: { beginAtZero: true },
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      callbacks: {
+        label(context: any) {
+          const key = context.label
+          const item = data.criteria_averages[key]
+          if (!item) return ""
+          return `${item.avg} / ${item.max}`
+        },
+      },
+    },
+  },
+}
+
 const WORD_COLORS = [
  "#2080f0",
  "#18a058",
@@ -360,9 +502,7 @@ function renderWordCloud() {
        {
          label: "",
          data: words.map((w) => 10 + (w.count / maxCount) * 50),
-          color: words.map(
-            (_, i) => WORD_COLORS[i % WORD_COLORS.length],
-          ),
+          color: words.map((_, i) => WORD_COLORS[i % WORD_COLORS.length]),
          rotate: 0,
        } as any,
      ],
@@ -425,6 +565,11 @@ onUnmounted(() => {
  gap: 4px;
 }

+.chart-container {
+  height: 280px;
+  position: relative;
+}
+
 .wordcloud-container {
  height: 300px;
  position: relative;
--- a/src/shared/components/Login.vue
+++ b/src/shared/components/Login.vue
@@ -17,7 +17,7 @@ const {
  loginLoading: isLoading,
  loginError: msg,
 } = storeToRefs(authStore)
-const loginRef = ref()
+const loginRef = useTemplateRef("loginRef")
 const classUserOptions = ref<SelectOption[]>([])
 const classUserLoading = ref(false)
 const isClassLogin = computed(() => Boolean(form.value.class))
--- a/src/shared/components/Pagination.vue
+++ b/src/shared/components/Pagination.vue
@@ -7,17 +7,14 @@ interface Props {
  page: number
 }

-const props = withDefaults(defineProps<Props>(), {
-  limit: 10,
-  page: 1,
-})
+const { total, limit: initialLimit = 10, page: initialPage = 1 } = defineProps<Props>()

 const emit = defineEmits(["update:limit", "update:page"])

 const { isDesktop } = useBreakpoints()

-const limit = ref(props.limit)
-const page = ref(props.page)
+const limit = ref(initialLimit)
+const page = ref(initialPage)
 const sizes = [10, 30, 50]

 watch(limit, () => emit("update:limit", limit))
@@ -26,9 +23,9 @@ watch(page, () => emit("update:page", page))

 <template>
  <n-pagination
-    v-if="props.total"
+    v-if="total"
    class="right margin"
-    :item-count="props.total"
+    :item-count="total"
    v-model:page="page"
    v-model:page-size="limit"
    :page-sizes="sizes"
--- a/src/shared/components/Signup.vue
+++ b/src/shared/components/Signup.vue
@@ -12,7 +12,7 @@ const {
  signupError: msg,
  captchaSrc,
 } = storeToRefs(authStore)
-const signupRef = ref()
+const signupRef = useTemplateRef("signupRef")

 const rules: FormRules = {
  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
--- a/src/shared/components/SyncCodeEditor.vue
+++ b/src/shared/components/SyncCodeEditor.vue
@@ -36,15 +36,15 @@ interface Props {
  placeholder?: string
 }

-const props = withDefaults(defineProps<Props>(), {
-  language: "Python3",
-  fontSize: 20,
-  height: "100%",
-  readonly: false,
-  placeholder: "",
-})
-
-const { readonly, placeholder, height, fontSize } = toRefs(props)
+const {
+  sync,
+  problem,
+  language = "Python3",
+  fontSize = 20,
+  height = "100%",
+  readonly = false,
+  placeholder = "",
+} = defineProps<Props>()
 const code = defineModel<string>("value")

 const emit = defineEmits<{
@@ -57,7 +57,7 @@ const emit = defineEmits<{
 const { isDesktop } = useBreakpoints()

 const langExtension = computed((): Extension => {
-  return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
+  return ["Python2", "Python3"].includes(language) ? python() : cpp()
 })

 const extensions = computed(() => [
@@ -67,7 +67,7 @@ const extensions = computed(() => [
  closeBrackets(),
  isDark.value ? oneDark : smoothy,
  autocompletion({
-    override: [enhanceCompletion(props.language), completeAnyWord],
+    override: [enhanceCompletion(language), completeAnyWord],
  }),
  getInitialExtension(),
 ])
@@ -85,12 +85,12 @@ const cleanupSyncResources = () => {
 }

 const initSync = async () => {
-  if (!editorView.value || !props.problem || !isDesktop.value) return
+  if (!editorView.value || !problem || !isDesktop.value) return

  cleanupSyncResources()

  cleanupSync = await startSync({
-    problemId: props.problem,
+    problemId: problem,
    editorView: editorView.value as EditorView,
    onStatusChange: (status) => {
      // 处理需要断开同步的情况
@@ -108,13 +108,13 @@ const initSync = async () => {

 const handleEditorReady = (payload: EditorReadyPayload) => {
  editorView.value = payload.view as EditorView
-  if (props.sync) {
+  if (sync) {
    initSync()
  }
 }

 watch(
-  () => props.sync,
+  () => sync,
  (shouldSync) => {
    if (shouldSync) {
      initSync()
@@ -125,9 +125,9 @@ watch(
 )

 watch(
-  () => props.problem,
+  () => problem,
  (newProblem, oldProblem) => {
-    if (newProblem !== oldProblem && props.sync) {
+    if (newProblem !== oldProblem && sync) {
      initSync()
    }
  },
--- a/src/shared/components/TextEditor.vue
+++ b/src/shared/components/TextEditor.vue
@@ -17,10 +17,7 @@ interface Props {
 const rawHtml = defineModel<string>("value")
 type InsertFnType = (url: string, alt: string, href: string) => void

-const props = withDefaults(defineProps<Props>(), {
-  minHeight: 0,
-  simple: false,
-})
+const { title, minHeight = 0, simple = false } = defineProps<Props>()

 const message = useMessage()

@@ -112,17 +109,17 @@ async function customUpload(file: File, insertFn: InsertFnType) {
 </script>

 <template>
-  <div class="title" v-if="props.title">{{ props.title }}</div>
+  <div class="title" v-if="title">{{ title }}</div>
  <div class="editorWrapper">
    <Toolbar
      class="toolbar"
      :editor="toolbarEditorRef"
-      :defaultConfig="props.simple ? toolbarConfigSimple : toolbarConfig"
+      :defaultConfig="simple ? toolbarConfigSimple : toolbarConfig"
      mode="simple"
    />
    <Editor
      @click="onClick"
-      :style="{ minHeight: props.minHeight + 'px' }"
+      :style="{ minHeight: minHeight + 'px' }"
      v-model="rawHtml"
      :defaultConfig="editorConfig"
      mode="simple"
--- a/src/shared/layout/admin.vue
+++ b/src/shared/layout/admin.vue
@@ -58,6 +58,15 @@ const options = computed<MenuOption[]>(() => {
          ),
        key: "admin problemset list",
      },
+      {
+        label: () =>
+          h(
+            RouterLink,
+            { to: "/admin/ai/reports" },
+            { default: () => "AI报告" },
+          ),
+        key: "admin ai reports",
+      },
    )
  }

@@ -132,6 +141,15 @@ const options = computed<MenuOption[]>(() => {
          ),
        key: "admin tutorial list",
      },
+      {
+        label: () =>
+          h(
+            RouterLink,
+            { to: "/admin/ai/reports" },
+            { default: () => "AI报告" },
+          ),
+        key: "admin ai reports",
+      },
    )
  }

@@ -152,6 +170,7 @@ const active = computed(() => {
  if (path.startsWith("/admin/comment")) return "admin comment list"
  if (path.startsWith("/admin/announcement")) return "admin announcement list"
  if (path.startsWith("/admin/tutorial")) return "admin tutorial list"
+  if (path.startsWith("/admin/ai")) return "admin ai reports"
  return route.name as string
 })

--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -1,4 +1,4 @@
-import axios from "axios"
+import axios, { type AxiosRequestConfig } from "axios"
 import { createDiscreteApi } from "naive-ui"
 import { useAuthModalStore } from "shared/store/authModal"
 import storage from "./storage"
@@ -6,13 +6,56 @@ import { STORAGE_KEY } from "./constants"

 const { message } = createDiscreteApi(["message"])

-const http = axios.create({
+// 后端统一返回 { error, data } 信封；拦截器剥掉 axios 外层后，
+// 调用方拿到的就是这个信封，data 才是真正的业务数据。
+export interface ApiResponse<T = any> {
+  error: string | null
+  data: T
+}
+
+// 让 http.get<T>() 的类型真实反映"解包后返回信封"这件事，
+// 调用方 res.data 直接拿到带类型的 T，不再依赖 axios 的 AxiosResponse 巧合对齐。
+interface Http {
+  get<T = any>(
+    url: string,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>
+  delete<T = any>(
+    url: string,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>
+  post<T = any>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>
+  put<T = any>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>
+}
+
+const instance = axios.create({
  baseURL: "/api",
  xsrfHeaderName: "X-CSRFToken",
  xsrfCookieName: "csrftoken",
 })

-http.interceptors.response.use(
+// 统一剥掉空字符串 / null / undefined 的 query 参数，
+// 各 api 函数不必再手写过滤逻辑（保留 0、false）。
+instance.interceptors.request.use((config) => {
+  if (config.params) {
+    config.params = Object.fromEntries(
+      Object.entries(config.params).filter(
+        ([, v]) => v !== "" && v !== null && v !== undefined,
+      ),
+    )
+  }
+  return config
+})
+
+instance.interceptors.response.use(
  (res) => {
    if (res.data.error) {
      if (res.data.error === "login-required") {
@@ -31,4 +74,6 @@ http.interceptors.response.use(
  },
 )

+const http = instance as unknown as Http
+
 export default http
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -33,7 +33,11 @@ export interface Profile {
  submission_number: number
 }

-export type UserAdminType = "Regular User" | "Student Admin" | "Teacher Admin" | "Super Admin"
+export type UserAdminType =
+  | "Regular User"
+  | "Student Admin"
+  | "Teacher Admin"
+  | "Super Admin"

 export interface User {
  id: number
--- a/tests/submitButtonState.test.ts
+++ b/tests/submitButtonState.test.ts
@@ -0,0 +1,51 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+import { getSubmitButtonState } from "../src/oj/problem/components/submitButtonState.ts"
+
+const idleInput = {
+  isAuthed: true,
+  hasCode: true,
+  isFormatting: false,
+  isSubmitting: false,
+  isJudging: false,
+  isCooldown: false,
+}
+
+test("shows a disabled loading state while formatting", () => {
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isFormatting: true }), {
+    disabled: true,
+    label: "格式化中",
+    icon: "eos-icons:loading",
+  })
+})
+
+test("shows submitting immediately after formatting", () => {
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isSubmitting: true }), {
+    disabled: true,
+    label: "正在提交",
+    icon: "eos-icons:loading",
+  })
+})
+
+test("preserves existing login, judging, cooldown, and idle states", () => {
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isAuthed: false }), {
+    disabled: true,
+    label: "请先登录",
+    icon: "ph:play-fill",
+  })
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isJudging: true }), {
+    disabled: true,
+    label: "正在评分",
+    icon: "eos-icons:loading",
+  })
+  assert.deepEqual(getSubmitButtonState({ ...idleInput, isCooldown: true }), {
+    disabled: true,
+    label: "正在冷却",
+    icon: "ph:lightbulb-fill",
+  })
+  assert.deepEqual(getSubmitButtonState(idleInput), {
+    disabled: false,
+    label: "提交代码",
+    icon: "ph:play-fill",
+  })
+})
Author	SHA1	Message	Date
yuetsh	df45b8f545	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-14 09:53:04 -06:00
yuetsh	be0bc87d47	add state for submitting button Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-14 08:52:47 -06:00
yuetsh	43a5c923b4	Plan submit formatting button state	2026-06-14 08:46:35 -06:00
yuetsh	62d75b6e06	Document submit formatting button state	2026-06-14 08:43:19 -06:00
yuetsh	bd4461d2bc	fix	2026-06-14 08:36:32 -06:00
yuetsh	12342f7f79	feat(problem): auto-format Python3/C/C++ code before submit	2026-06-14 08:12:31 -06:00
yuetsh	dad65c4bef	feat(api): add formatCode endpoint for pre-submit formatting Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-14 08:09:38 -06:00
yuetsh	d16ee709b2	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-09 05:04:40 -06:00
yuetsh	77db837af3	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-07 05:57:48 -06:00
yuetsh	4b05086ba1	use default props Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-06 05:49:02 -06:00
yuetsh	31d7f4d274	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 10:46:26 -06:00
yuetsh	45a0638b7e	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 10:39:35 -06:00
yuetsh	9920bc4aed	test Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 10:33:56 -06:00
yuetsh	6a97c7ee6e	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 10:06:46 -06:00
yuetsh	fe51ad94cc	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 09:59:08 -06:00
yuetsh	0a0d53124d	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 09:46:52 -06:00
yuetsh	f9d7c2ff92	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 09:03:38 -06:00
yuetsh	324e85d2c0	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 08:52:00 -06:00
yuetsh	4ef2738afd	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 00:59:56 -06:00
yuetsh	89a6e79489	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 00:58:55 -06:00
yuetsh	1dac639003	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 00:52:02 -06:00
yuetsh	9344a6e648	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-05 00:03:29 -06:00
yuetsh	d9a1ee28c6	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 23:59:23 -06:00
yuetsh	0b2383bb48	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 09:03:17 -06:00
yuetsh	cd5ab41981	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 09:00:53 -06:00
yuetsh	8549b6c177	revert Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 08:56:47 -06:00
yuetsh	4aa0072567	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 08:54:04 -06:00
yuetsh	41c4fdbc5c	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 08:44:54 -06:00
yuetsh	33b6e35d6b	add ai report Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 08:06:36 -06:00
yuetsh	b3edf5383a	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-04 07:11:47 -06:00
yuetsh	2e31040b79	update Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 09:39:30 -06:00
yuetsh	f6232da3ba	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 09:06:08 -06:00
yuetsh	e33ef710af	add a chart Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 08:54:10 -06:00
yuetsh	0c165d61ff	revert Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 08:16:08 -06:00
yuetsh	e9a416b6b4	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 08:05:43 -06:00
yuetsh	39dbe143cb	fix Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details	2026-06-03 07:41:14 -06:00
yuetsh	d8363b997a	fix	2026-06-03 07:38:05 -06:00