fix flowchart

fix mermaid
revert
2026-05-07 06:09:05 -06:00 · 2026-05-07 03:42:38 -06:00 · 2026-05-07 02:39:29 -06:00 · 2026-05-07 02:27:09 -06:00 · 2026-05-07 02:16:02 -06:00 · 2026-05-07 01:56:10 -06:00
52 changed files with 2087 additions and 814 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1 @@
+chrome >= 90
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -29,7 +29,7 @@ jobs:
        with:
          node-version: 24
          cache: npm
-      - run: npm ci
+      - run: npm install
      - run: npm run ${{ matrix.build_command }}
        env:
          CI: false
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
    "fmt": "prettier --write src *.ts"
  },
  "dependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/autocomplete": "^6.20.2",
    "@codemirror/lang-cpp": "^6.0.3",
    "@codemirror/lang-python": "^6.2.1",
    "@vue-flow/background": "^1.3.2",
@@ -19,11 +19,11 @@
    "@vue-flow/minimap": "^1.5.4",
    "@vue-flow/node-resizer": "^1.5.1",
    "@vue-flow/node-toolbar": "^1.1.1",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/router": "^14.2.1",
-    "@wangeditor-next/editor": "^5.6.55",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
+    "@wangeditor-next/editor": "^5.7.0",
    "@wangeditor-next/editor-for-vue": "^5.1.14",
-    "axios": "^1.13.6",
+    "axios": "^1.16.0",
    "canvas-confetti": "^1.9.4",
    "chart.js": "^4.5.1",
    "codemirror": "^6.0.2",
@@ -31,29 +31,30 @@
    "date-fns": "^4.1.0",
    "fflate": "^0.8.2",
    "highlight.js": "^11.11.1",
-    "md-editor-v3": "^6.4.1",
-    "mermaid": "^11.13.0",
+    "md-editor-v3": "^6.5.0",
+    "mermaid": "^11.14.0",
    "naive-ui": "^2.44.1",
-    "nanoid": "^5.1.7",
+    "nanoid": "^5.1.11",
    "normalize.css": "^8.0.1",
    "pinia": "^3.0.4",
    "skulpt": "^1.2.0",
-    "vue": "^3.5.31",
+    "vue": "^3.5.34",
    "vue-chartjs": "^5.3.3",
    "vue-codemirror": "^6.1.1",
-    "vue-router": "^5.0.4",
+    "vue-router": "^5.0.6",
    "y-codemirror.next": "^0.3.5",
    "y-webrtc": "^10.3.0",
    "yjs": "^13.6.30"
  },
  "devDependencies": {
-    "@iconify/vue": "^5.0.0",
-    "@rsbuild/core": "^1.7.3",
+    "@iconify/vue": "^5.0.1",
+    "@rsbuild/core": "^1.7.5",
    "@rsbuild/plugin-vue": "^1.2.7",
    "@types/canvas-confetti": "^1.9.0",
-    "@types/node": "^25.5.0",
-    "prettier": "^3.8.1",
-    "typescript": "^6.0.2",
+    "@types/node": "^25.6.0",
+    "@vue/tsconfig": "^0.9.1",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3",
    "unplugin-auto-import": "^21.0.0",
    "unplugin-vue-components": "^32.0.0"
  }
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -4,7 +4,7 @@ import AutoImport from "unplugin-auto-import/rspack"
 import Components from "unplugin-vue-components/rspack"
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers"

-export default defineConfig(({ envMode }) => {
+const config: ReturnType<typeof defineConfig> = defineConfig(({ envMode }) => {
  const { publicVars, rawPublicVars } = loadEnv({
    cwd: process.cwd(),
    mode: envMode,
@@ -20,6 +20,7 @@ export default defineConfig(({ envMode }) => {
    ws: true,
    changeOrigin: true,
  }
+
  return {
    plugins: [pluginVue()],
    tools: {
@@ -96,3 +97,5 @@ export default defineConfig(({ envMode }) => {
    },
  }
 })
+
+export default config
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,8 +58,10 @@ provide("hljs", hljsInstance)
    :date-locale="dateZhCN"
    :hljs="hljsInstance"
  >
+    <n-dialog-provider>
      <n-message-provider>
        <router-view></router-view>
      </n-message-provider>
+    </n-dialog-provider>
  </n-config-provider>
 </template>
--- a/src/admin/announcement/detail.vue
+++ b/src/admin/announcement/detail.vue
@@ -54,7 +54,7 @@ async function submit() {
  const api = {
    "admin announcement create": createAnnouncement,
    "admin announcement edit": editAnnouncement,
-  }[<string>route.name]
+  }[route.name as string]
  try {
    await api!(announcement)
    if (route.name === "admin announcement create") {
--- a/src/admin/api.ts
+++ b/src/admin/api.ts
@@ -6,6 +6,7 @@ import {
  BlankContest,
  BlankProblem,
  Contest,
+  Exercise,
  Server,
  TestcaseUploadedReturns,
  Tutorial,
@@ -261,6 +262,37 @@ export function setTutorialVisibility(id: number, is_public: boolean) {
  return http.put("admin/tutorial/visibility", { id, is_public })
 }

+export async function getAdminExercises(tutorialId: number) {
+  const res = await http.get("admin/exercise", {
+    params: { tutorial_id: tutorialId },
+  })
+  return res.data as Exercise[]
+}
+
+export async function createExercise(data: {
+  tutorial_id: number
+  type: "mcq" | "sort" | "fill"
+  data: object
+  order: number
+}) {
+  const res = await http.post("admin/exercise", data)
+  return res.data as Exercise
+}
+
+export async function updateExercise(data: {
+  id: number
+  type: "mcq" | "sort" | "fill"
+  data: object
+  order: number
+}) {
+  const res = await http.put("admin/exercise", data)
+  return res.data as Exercise
+}
+
+export function deleteExercise(id: number) {
+  return http.delete("admin/exercise", { params: { id } })
+}
+
 // 将竞赛题目转为公开题目
 export function makeProblemPublic(id: number, display_id: string) {
  return http.post("admin/contest_problem/make_public", {
--- a/src/admin/contest/detail.vue
+++ b/src/admin/contest/detail.vue
@@ -97,7 +97,7 @@ async function submit() {
  const api = {
    "admin contest create": createContest,
    "admin contest edit": editContest,
-  }[<string>route.name]
+  }[route.name as string]
  try {
    await api!(contest)
    if (route.name === "admin contest create") {
--- a/src/admin/problem/components/Modal.vue
+++ b/src/admin/problem/components/Modal.vue
@@ -33,7 +33,7 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
    render: (row) =>
      h(AddButton, {
        problemID: row.id,
-        contestID: <string>route.params.contestID,
+        contestID: route.params.contestID as string,
        onAdded: () => emit("change"),
      }),
    width: 60,
--- a/src/admin/problem/detail.vue
+++ b/src/admin/problem/detail.vue
@@ -44,7 +44,7 @@ const title = computed(
      "admin problem edit": "编辑题目",
      "admin contest problem create": "新建比赛题目",
      "admin contest problem edit": "编辑比赛题目",
-    })[<string>route.name],
+    })[route.name as string],
 )

 const isAIGenerating = ref(false)
@@ -136,7 +136,6 @@ async function getProblemDetail() {
  }
  try {
    const { data } = await getProblem(props.problemID)
-    toggleReady(true)
    problem.value.id = data.id
    problem.value._id = data._id
    problem.value.title = data.title
@@ -189,6 +188,7 @@ async function getProblemDetail() {
    })
    // 标签
    tags.value.select = data.tags
+    toggleReady(true)
  } catch (error) {
    message.error("获取题目失败")
    router.push({ name: "admin problem list" })
@@ -358,7 +358,7 @@ async function submit() {
    "admin problem edit": editProblem,
    "admin contest problem create": createContestProblem,
    "admin contest problem edit": editContestProblem,
-  }[<string>route.name]
+  }[route.name as string]
  if (
    route.name === "admin contest problem create" ||
    route.name === "admin contest problem edit"
--- a/src/admin/problem/list.vue
+++ b/src/admin/problem/list.vue
@@ -23,7 +23,7 @@ const title = computed(
    ({
      "admin problem list": "题目列表",
      "admin contest problem list": "比赛题目列表",
-    })[<string>route.name],
+    })[route.name as string],
 )
 const isContestProblemList = computed(
  () => route.name === "admin contest problem list",
--- a/src/admin/tutorial/components/ExerciseManager.vue
+++ b/src/admin/tutorial/components/ExerciseManager.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import {
+  Exercise,
+  ExerciseMcqData,
+  ExerciseSortData,
+  ExerciseFillData,
+} from "utils/types"
+import {
+  getAdminExercises,
+  createExercise,
+  updateExercise,
+  deleteExercise,
+} from "admin/api"
+
+const props = defineProps<{ tutorialId: number }>()
+const message = useMessage()
+const dialog = useDialog()
+
+const exercises = ref<Exercise[]>([])
+const showForm = ref(false)
+const editingId = ref<number | null>(null)
+const formType = ref<"mcq" | "sort" | "fill">("mcq")
+const formOrder = ref(0)
+
+const mcqQuestion = ref("")
+const mcqOptions = ref(["", ""])
+const mcqAnswer = ref<number[]>([])
+
+const sortQuestion = ref("")
+const sortCode = ref("")
+
+const fillQuestion = ref("")
+const fillCode = ref("")
+
+async function load() {
+  exercises.value = await getAdminExercises(props.tutorialId)
+}
+
+onMounted(load)
+
+function openCreate() {
+  editingId.value = null
+  formType.value = "mcq"
+  formOrder.value = exercises.value.length
+  mcqQuestion.value = ""
+  mcqOptions.value = ["", ""]
+  mcqAnswer.value = []
+  sortQuestion.value = ""
+  sortCode.value = ""
+  fillQuestion.value = ""
+  fillCode.value = ""
+  showForm.value = true
+}
+
+function openEdit(ex: Exercise) {
+  editingId.value = ex.id
+  formType.value = ex.type
+  formOrder.value = ex.order
+  if (ex.type === "mcq") {
+    const d = ex.data as ExerciseMcqData
+    mcqQuestion.value = d.question
+    mcqOptions.value = [...d.options]
+    mcqAnswer.value = [...d.answer]
+  } else if (ex.type === "sort") {
+    const d = ex.data as ExerciseSortData
+    sortQuestion.value = d.question
+    sortCode.value = d.lines.join("\n")
+  } else {
+    const d = ex.data as ExerciseFillData
+    fillQuestion.value = d.question
+    fillCode.value = d.code
+  }
+  showForm.value = true
+}
+
+function toggleAnswer(i: number) {
+  const idx = mcqAnswer.value.indexOf(i)
+  if (idx === -1) mcqAnswer.value.push(i)
+  else mcqAnswer.value.splice(idx, 1)
+}
+
+async function save() {
+  if (formType.value === "mcq" && mcqAnswer.value.length === 0) {
+    message.error("请至少勾选一个正确答案")
+    return
+  }
+  let data: Record<string, unknown>
+  if (formType.value === "mcq") {
+    data = {
+      question: mcqQuestion.value || "下面选项中正确是哪个？",
+      options: mcqOptions.value,
+      answer: mcqAnswer.value,
+    }
+  } else if (formType.value === "sort") {
+    data = {
+      question: sortQuestion.value || "将下列代码行排列为正确顺序",
+      lines: sortCode.value.split("\n").filter((l) => l.trim() !== ""),
+    }
+  } else {
+    data = { question: fillQuestion.value, code: fillCode.value }
+  }
+
+  try {
+    if (editingId.value) {
+      await updateExercise({
+        id: editingId.value,
+        type: formType.value,
+        data,
+        order: formOrder.value,
+      })
+      message.success("练习题已更新")
+    } else {
+      await createExercise({
+        tutorial_id: props.tutorialId,
+        type: formType.value,
+        data,
+        order: formOrder.value,
+      })
+      message.success("练习题已创建")
+    }
+    showForm.value = false
+    await load()
+  } catch (e: any) {
+    message.error(e.data ?? "保存失败")
+  }
+}
+
+function confirmDelete(id: number) {
+  dialog.warning({
+    title: "删除练习题",
+    content: "此操作不可撤销",
+    positiveText: "删除",
+    onPositiveClick: async () => {
+      await deleteExercise(id)
+      message.success("已删除")
+      await load()
+    },
+  })
+}
+
+function copyPlaceholder(id: number) {
+  navigator.clipboard.writeText(`[[exercise:${id}]]`)
+  message.success(`已复制 [[exercise:${id}]]`)
+}
+
+function typeName(type: string) {
+  if (type === "mcq") return "选择题"
+  if (type === "sort") return "代码排序"
+  return "代码填空"
+}
+
+function typeTagType(type: string): "success" | "info" | "warning" {
+  if (type === "mcq") return "success"
+  if (type === "sort") return "info"
+  return "warning"
+}
+</script>
+
+<template>
+  <div>
+    <n-flex justify="space-between" align="center" style="margin-bottom: 16px">
+      <n-text>共 {{ exercises.length }} 道练习题</n-text>
+      <n-button type="primary" size="small" @click="openCreate"
+        >+ 添加练习题</n-button
+      >
+    </n-flex>
+
+    <n-empty v-if="exercises.length === 0" description="暂无练习题" />
+
+    <n-list v-else bordered>
+      <n-list-item v-for="ex in exercises" :key="ex.id">
+        <n-flex justify="space-between" align="center">
+          <div>
+            <n-tag size="small" :type="typeTagType(ex.type)" :bordered="false">
+              {{ typeName(ex.type) }}
+            </n-tag>
+            <n-text style="margin-left: 10px">
+              {{ (ex.data as any).question }}
+            </n-text>
+          </div>
+          <n-space :size="8">
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-button size="small" @click="copyPlaceholder(ex.id)">
+                  复制占位符
+                </n-button>
+              </template>
+              将 [[exercise:{{ ex.id }}]] 粘贴到 Markdown 内容中
+            </n-tooltip>
+            <n-button size="small" @click="openEdit(ex)">编辑</n-button>
+            <n-button size="small" type="error" @click="confirmDelete(ex.id)">
+              删除
+            </n-button>
+          </n-space>
+        </n-flex>
+      </n-list-item>
+    </n-list>
+
+    <n-modal
+      v-model:show="showForm"
+      :title="editingId ? '编辑练习题' : '新建练习题'"
+      preset="card"
+      style="width: 560px"
+    >
+      <n-form label-placement="top">
+        <n-form-item label="题型">
+          <n-radio-group v-model:value="formType" :disabled="!!editingId">
+            <n-radio value="mcq">选择题</n-radio>
+            <n-radio value="sort">代码排序</n-radio>
+            <n-radio value="fill">代码填空</n-radio>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="顺序">
+          <n-input-number
+            v-model:value="formOrder"
+            :min="0"
+            style="width: 100px"
+          />
+        </n-form-item>
+
+        <template v-if="formType === 'mcq'">
+          <n-form-item label="题目">
+            <n-input
+              v-model:value="mcqQuestion"
+              type="textarea"
+              :rows="2"
+              placeholder="下面选项中正确是哪个？"
+            />
+          </n-form-item>
+          <n-form-item label="选项（勾选所有正确答案）">
+            <n-space vertical style="width: 100%">
+              <n-flex
+                v-for="(opt, i) in mcqOptions"
+                :key="i"
+                align="center"
+                :size="8"
+              >
+                <n-checkbox
+                  :checked="mcqAnswer.includes(i)"
+                  @update:checked="toggleAnswer(i)"
+                />
+                <n-input
+                  v-model:value="mcqOptions[i]"
+                  :placeholder="`选项 ${String.fromCharCode(65 + i)}`"
+                  style="flex: 1"
+                />
+                <n-button
+                  size="small"
+                  :disabled="mcqOptions.length <= 2"
+                  @click="
+                    () => {
+                      mcqOptions.splice(i, 1)
+                      mcqAnswer.value = mcqAnswer.value
+                        .filter((a) => a !== i)
+                        .map((a) => (a > i ? a - 1 : a))
+                    }
+                  "
+                >
+                  ✕
+                </n-button>
+              </n-flex>
+              <n-button size="small" @click="mcqOptions.push('')">
+                + 添加选项
+              </n-button>
+            </n-space>
+          </n-form-item>
+        </template>
+
+        <template v-else-if="formType === 'sort'">
+          <n-form-item label="题目">
+            <n-input
+              v-model:value="sortQuestion"
+              type="textarea"
+              :rows="2"
+              placeholder="将下列代码行排列为正确顺序"
+            />
+          </n-form-item>
+          <n-form-item label="正确代码（每行将自动成为一道排序项）">
+            <n-input
+              v-model:value="sortCode"
+              type="textarea"
+              :rows="10"
+              placeholder="在此粘贴正确的代码，保存后将自动按行拆分并乱序"
+              style="font-family: monospace"
+            />
+          </n-form-item>
+        </template>
+
+        <template v-else>
+          <n-form-item label="题目说明">
+            <n-input
+              v-model:value="fillQuestion"
+              type="textarea"
+              :rows="2"
+              placeholder="例：补全下面的循环语句"
+            />
+          </n-form-item>
+          <n-form-item label="含空位的代码">
+            <n-input
+              v-model:value="fillCode"
+              type="textarea"
+              :rows="10"
+              placeholder="用 {{答案}} 标记空位，多个合法答案用 | 分隔，例如：for {{i|idx}} in range(10):"
+              style="font-family: monospace"
+            />
+          </n-form-item>
+        </template>
+      </n-form>
+
+      <template #footer>
+        <n-flex justify="end" :size="8">
+          <n-button @click="showForm = false">取消</n-button>
+          <n-button type="primary" @click="save">保存</n-button>
+        </n-flex>
+      </template>
+    </n-modal>
+  </div>
+</template>
--- a/src/admin/tutorial/detail.vue
+++ b/src/admin/tutorial/detail.vue
@@ -3,6 +3,7 @@ import CodeEditor from "shared/components/CodeEditor.vue"
 import MarkdownEditor from "shared/components/MarkdownEditor.vue"
 import { Tutorial } from "utils/types"
 import { createTutorial, getTutorial, updateTutorial } from "../api"
+import ExerciseManager from "./components/ExerciseManager.vue"

 interface Props {
  tutorialID?: string
@@ -63,7 +64,6 @@ async function submit() {
      await updateTutorial(tutorial)
      message.success("修改已保存")
    }
-    router.push({ name: "admin tutorial list" })
  } catch (err: any) {
    message.error(err.data)
  }
@@ -112,6 +112,10 @@ onMounted(init)
        height="400px"
      />
    </n-tab-pane>
+    <n-tab-pane name="exercises" tab="练习题" :disabled="!tutorial.id">
+      <ExerciseManager v-if="tutorial.id" :tutorial-id="tutorial.id" />
+      <n-empty v-else description="请先保存教程后再添加练习题" />
+    </n-tab-pane>
  </n-tabs>
 </template>
 <style scoped>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -14,3 +14,11 @@ interface ImportMetaEnv {
 interface ImportMeta {
  readonly env: ImportMetaEnv
 }
+
+interface Document {
+  startViewTransition?: (callback: () => void | Promise<void>) => {
+    ready: Promise<void>
+    finished: Promise<void>
+    updateCallbackDone: Promise<void>
+  }
+}
--- a/src/index.css
+++ b/src/index.css
@@ -9,3 +9,21 @@ body {
 .md-editor-dark div.vuepress-theme {
  --md-theme-color: var(--n-text-color) !important;
 }
+
+.oj-mermaid-surface {
+  box-sizing: border-box;
+  padding: 18px;
+  overflow: auto;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 8px;
+}
+
+.oj-mermaid-surface > svg {
+  max-width: 100%;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
--- a/src/oj/api.ts
+++ b/src/oj/api.ts
@@ -2,6 +2,7 @@ import { DIFFICULTY } from "utils/constants"
 import { getACRate } from "utils/functions"
 import http from "utils/http"
 import {
+  Exercise,
  Problem,
  Submission,
  SubmissionListPayload,
@@ -20,6 +21,7 @@ function filterResult(result: Problem) {
    status: "",
    author: result.created_by.username,
    allow_flowchart: result.allow_flowchart,
+    show_flowchart: result.show_flowchart,
  }
  if (result.my_status === null || result.my_status === undefined) {
    newResult.status = "not_test"
@@ -419,3 +421,10 @@ export function getProblemSetUserProgress(
 ) {
  return http.get(`problemset/${problemSetId}/users_progress`, { params })
 }
+
+export async function getExercises(tutorialId: number): Promise<Exercise[]> {
+  const res = await http.get("exercises", {
+    params: { tutorial_id: tutorialId },
+  })
+  return res.data
+}
--- a/src/oj/learn/components/ExerciseFill.vue
+++ b/src/oj/learn/components/ExerciseFill.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import hljs from "highlight.js/lib/core"
+import python from "highlight.js/lib/languages/python"
+import c from "highlight.js/lib/languages/c"
+import { Exercise, ExerciseFillData } from "utils/types"
+
+hljs.registerLanguage("python", python)
+hljs.registerLanguage("c", c)
+
+const props = defineProps<{ exercise: Exercise; lang?: string }>()
+const data = computed(() => props.exercise.data as ExerciseFillData)
+
+type CodeSeg = { type: "code"; html: string }
+type BlankSeg = { type: "blank"; answers: string[]; index: number }
+type Segment = CodeSeg | BlankSeg
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+const segments = computed<Segment[]>(() => {
+  const blanks: string[][] = []
+  const markedCode = data.value.code.replace(/\{\{([^}]+)\}\}/g, (_, inner) => {
+    blanks.push(inner.split("|"))
+    return `____${blanks.length - 1}____`
+  })
+
+  const lang =
+    props.lang === "python" ? "python" : props.lang === "c" ? "c" : null
+  let highlighted: string
+  if (lang) {
+    try {
+      highlighted = hljs.highlight(markedCode, { language: lang }).value
+    } catch {
+      highlighted = escapeHtml(markedCode)
+    }
+  } else {
+    highlighted = escapeHtml(markedCode)
+  }
+
+  const parts = highlighted.split(/____(\d+)____/)
+  const result: Segment[] = []
+  for (let i = 0; i < parts.length; i++) {
+    if (i % 2 === 0) {
+      if (parts[i]) result.push({ type: "code", html: parts[i] })
+    } else {
+      const idx = parseInt(parts[i])
+      result.push({ type: "blank", answers: blanks[idx], index: idx })
+    }
+  }
+  return result
+})
+
+const blankCount = computed(
+  () => segments.value.filter((s) => s.type === "blank").length,
+)
+const userInputs = ref<string[]>([])
+const wrongBlanks = ref<Set<number>>(new Set())
+const allCorrect = ref(false)
+
+watch(() => props.exercise.id, reset, { immediate: true })
+
+function reset() {
+  userInputs.value = Array(blankCount.value).fill("")
+  wrongBlanks.value = new Set()
+  allCorrect.value = false
+}
+
+function submit() {
+  if (allCorrect.value) return
+  const wrong = new Set<number>()
+  for (const seg of segments.value) {
+    if (seg.type !== "blank") continue
+    if (!seg.answers.includes(userInputs.value[seg.index]?.trim() ?? "")) {
+      wrong.add(seg.index)
+    }
+  }
+  wrongBlanks.value = wrong
+  allCorrect.value = wrong.size === 0
+}
+
+function inputWidth(idx: number): string {
+  return Math.max(4, (userInputs.value[idx]?.length ?? 0) + 2) + "ch"
+}
+</script>
+
+<template>
+  <n-card
+    size="small"
+    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
+  >
+    <template #header>
+      <n-tag type="warning" size="small" :bordered="false"
+        >练一练 · 代码填空</n-tag
+      >
+    </template>
+
+    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+
+    <pre
+      :style="{
+        fontFamily: 'monospace',
+        lineHeight: '1.6',
+        background: 'var(--n-color)',
+        border: '1px solid var(--n-border-color)',
+        borderRadius: '6px',
+        padding: '12px',
+        overflowX: 'auto',
+        whiteSpace: 'pre-wrap',
+        margin: 0,
+      }"
+    ><template v-for="(seg, i) in segments" :key="i"
+      ><span v-if="seg.type === 'code'" v-html="seg.html" /><input
+        v-else
+        :value="userInputs[seg.index]"
+        :disabled="allCorrect"
+        :style="{
+          width: inputWidth(seg.index),
+          fontFamily: 'monospace',
+          padding: '1px 4px',
+          borderRadius: '3px',
+          border: `1.5px solid ${
+            allCorrect
+              ? '#18a058'
+              : wrongBlanks.has(seg.index)
+                ? '#d03050'
+                : 'var(--n-border-color)'
+          }`,
+          background: allCorrect
+            ? 'rgba(24,160,88,0.08)'
+            : wrongBlanks.has(seg.index)
+              ? 'rgba(208,48,80,0.07)'
+              : 'transparent',
+          outline: 'none',
+          color: 'inherit',
+          minWidth: '4ch',
+        }"
+        @input="userInputs[seg.index] = ($event.target as HTMLInputElement).value"
+      /></template></pre>
+
+    <n-alert
+      v-if="wrongBlanks.size > 0 || allCorrect"
+      :type="allCorrect ? 'success' : 'error'"
+      :title="allCorrect ? '全部正确！' : '有填写错误，请检查红色标注的空位'"
+      style="margin-top: 12px"
+    />
+
+    <n-space style="margin-top: 12px" :size="8">
+      <n-button
+        type="warning"
+        size="small"
+        :disabled="allCorrect"
+        @click="submit"
+      >
+        提交
+      </n-button>
+      <n-button size="small" @click="reset">重置</n-button>
+    </n-space>
+  </n-card>
+</template>
--- a/src/oj/learn/components/ExerciseMcq.vue
+++ b/src/oj/learn/components/ExerciseMcq.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { Exercise, ExerciseMcqData } from "utils/types"
+
+const props = defineProps<{ exercise: Exercise }>()
+const data = computed(() => props.exercise.data as ExerciseMcqData)
+const isSingle = computed(() => data.value.answer.length === 1)
+
+const selected = ref<Set<number>>(new Set())
+const correct = ref(false)
+const wrong = ref(false)
+const partial = ref(false)
+
+function select(idx: number) {
+  if (correct.value) return
+  const s = new Set(selected.value)
+  if (isSingle.value) {
+    s.clear()
+    if (!selected.value.has(idx)) s.add(idx)
+  } else {
+    if (s.has(idx)) s.delete(idx)
+    else s.add(idx)
+  }
+  selected.value = s
+  wrong.value = false
+  partial.value = false
+}
+
+function submit() {
+  if (selected.value.size === 0 || correct.value) return
+  const answer = new Set(data.value.answer)
+  const sel = selected.value
+  const isEqual =
+    sel.size === answer.size && [...sel].every((v) => answer.has(v))
+  if (isEqual) {
+    correct.value = true
+    wrong.value = false
+    partial.value = false
+  } else {
+    selected.value = new Set()
+    const hasIntersection = [...sel].some((v) => answer.has(v))
+    if (hasIntersection) {
+      partial.value = true
+      wrong.value = false
+    } else {
+      wrong.value = true
+      partial.value = false
+    }
+  }
+}
+
+function reset() {
+  selected.value = new Set()
+  correct.value = false
+  wrong.value = false
+  partial.value = false
+}
+
+function optionType(idx: number): "default" | "primary" | "success" {
+  if (correct.value && data.value.answer.includes(idx)) return "success"
+  if (selected.value.has(idx)) return "primary"
+  return "default"
+}
+</script>
+
+<template>
+  <n-card
+    size="small"
+    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">
+          练一练 · {{ isSingle ? "单选题" : "多选题" }}
+        </n-tag>
+      </n-space>
+    </template>
+
+    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+
+    <n-space vertical :size="8">
+      <n-button
+        v-for="(opt, idx) in data.options"
+        :key="idx"
+        :type="optionType(idx)"
+        :secondary="optionType(idx) !== 'default'"
+        :tertiary="optionType(idx) === 'default'"
+        :strong="selected.has(idx)"
+        :style="{
+          justifyContent: 'flex-start',
+          width: '100%',
+          textAlign: 'left',
+        }"
+        @click="select(idx)"
+      >
+        <template #icon>
+          <span style="font-weight: 700">{{
+            String.fromCharCode(65 + idx)
+          }}</span>
+        </template>
+        {{ opt }}
+      </n-button>
+    </n-space>
+
+    <n-alert
+      v-if="correct || wrong || partial"
+      :type="correct ? 'success' : partial ? 'warning' : 'error'"
+      :title="
+        correct ? '正确！' : partial ? '部分正确，请重试' : '选择有误，请重试'
+      "
+      style="margin-top: 12px"
+    />
+
+    <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-space>
+  </n-card>
+</template>
--- a/src/oj/learn/components/ExerciseSort.vue
+++ b/src/oj/learn/components/ExerciseSort.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import hljs from "highlight.js/lib/core"
+import python from "highlight.js/lib/languages/python"
+import c from "highlight.js/lib/languages/c"
+import { Exercise, ExerciseSortData } from "utils/types"
+
+hljs.registerLanguage("python", python)
+hljs.registerLanguage("c", c)
+
+const props = defineProps<{ exercise: Exercise; lang?: string }>()
+const data = computed(() => props.exercise.data as ExerciseSortData)
+
+type LineItem = { originalIdx: number; text: string }
+
+const lines = ref<LineItem[]>([])
+const submitted = ref(false)
+
+function shuffle(arr: LineItem[]): LineItem[] {
+  const a = [...arr]
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[a[i], a[j]] = [a[j], a[i]]
+  }
+  const isCorrect = a.every((item, i) => item.originalIdx === i)
+  if (isCorrect && a.length > 1) [a[0], a[1]] = [a[1], a[0]]
+  return a
+}
+
+function init() {
+  lines.value = shuffle(
+    data.value.lines.map((text, idx) => ({ originalIdx: idx, text })),
+  )
+  submitted.value = false
+}
+
+onMounted(init)
+watch(() => props.exercise.id, init)
+
+const dragIdx = ref<number | null>(null)
+
+function onDragStart(idx: number) {
+  dragIdx.value = idx
+}
+
+function onDrop(targetIdx: number) {
+  if (dragIdx.value === null || dragIdx.value === targetIdx) return
+  const newLines = [...lines.value]
+  const [moved] = newLines.splice(dragIdx.value, 1)
+  newLines.splice(targetIdx, 0, moved)
+  lines.value = newLines
+  dragIdx.value = null
+  submitted.value = false
+}
+
+function lineStatus(idx: number): "correct" | "wrong" | "default" {
+  if (!submitted.value) return "default"
+  return lines.value[idx].originalIdx === idx ? "correct" : "wrong"
+}
+
+const allCorrect = computed(() =>
+  lines.value.every((item, i) => item.originalIdx === i),
+)
+
+function submit() {
+  submitted.value = true
+}
+
+function reset() {
+  init()
+}
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+const lineHtmlMap = computed<Record<number, string>>(() => {
+  const rawLines = data.value.lines
+  const map: Record<number, string> = {}
+  const lang =
+    props.lang === "python" ? "python" : props.lang === "c" ? "c" : null
+
+  if (lang) {
+    try {
+      const result = hljs.highlight(rawLines.join("\n"), {
+        language: lang,
+      }).value
+      result.split("\n").forEach((html, i) => {
+        map[i] = html
+      })
+    } catch {
+      // fall through
+    }
+  }
+
+  rawLines.forEach((text, i) => {
+    if (map[i] === undefined) map[i] = escapeHtml(text)
+  })
+
+  return map
+})
+</script>
+
+<template>
+  <n-card
+    size="small"
+    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
+  >
+    <template #header>
+      <n-tag type="info" size="small" :bordered="false"
+        >练一练 · 代码排序</n-tag
+      >
+    </template>
+
+    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+
+    <n-space vertical :size="6">
+      <div
+        v-for="(line, idx) in lines"
+        :key="line.originalIdx"
+        draggable="true"
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          padding: '8px 12px',
+          borderRadius: '6px',
+          border: `1.5px ${submitted ? 'solid' : 'dashed'} ${
+            lineStatus(idx) === 'correct'
+              ? '#18a058'
+              : lineStatus(idx) === 'wrong'
+                ? '#d03050'
+                : 'var(--n-border-color)'
+          }`,
+          background:
+            lineStatus(idx) === 'correct'
+              ? 'rgba(24,160,88,0.08)'
+              : lineStatus(idx) === 'wrong'
+                ? 'rgba(208,48,80,0.07)'
+                : 'transparent',
+          cursor: 'grab',
+          fontFamily: 'monospace',
+          userSelect: 'none',
+        }"
+        @dragstart="onDragStart(idx)"
+        @dragover.prevent
+        @drop="onDrop(idx)"
+      >
+        <span style="color: #bbb; cursor: grab">⠿</span>
+        <span v-html="lineHtmlMap[line.originalIdx]" style="white-space: pre" />
+      </div>
+    </n-space>
+
+    <n-alert
+      v-if="submitted"
+      :type="allCorrect ? 'success' : 'error'"
+      :title="allCorrect ? '顺序正确！' : '顺序有误，红色行需要调整'"
+      style="margin-top: 12px"
+    />
+
+    <n-space style="margin-top: 12px" :size="8">
+      <n-button
+        type="info"
+        size="small"
+        :disabled="submitted && allCorrect"
+        @click="submit"
+      >
+        提交
+      </n-button>
+      <n-button size="small" @click="reset">重置</n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<style>
+.hljs-keyword,
+.hljs-operator,
+.hljs-selector-tag {
+  color: #d73a49;
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-template-literal {
+  color: #032f62;
+}
+.hljs-comment,
+.hljs-quote {
+  color: #6a737d;
+  font-style: italic;
+}
+.hljs-number,
+.hljs-literal {
+  color: #005cc5;
+}
+.hljs-built_in,
+.hljs-title.function_,
+.hljs-class .hljs-title {
+  color: #6f42c1;
+}
+
+.dark .hljs-keyword,
+.dark .hljs-operator,
+.dark .hljs-selector-tag {
+  color: #c678dd;
+}
+.dark .hljs-string,
+.dark .hljs-regexp,
+.dark .hljs-template-literal {
+  color: #98c379;
+}
+.dark .hljs-comment,
+.dark .hljs-quote {
+  color: #7f848e;
+  font-style: italic;
+}
+.dark .hljs-number,
+.dark .hljs-literal {
+  color: #e5c07b;
+}
+.dark .hljs-built_in,
+.dark .hljs-title.function_,
+.dark .hljs-class .hljs-title {
+  color: #61afef;
+}
+</style>
--- a/src/oj/learn/components/ExerciseWidget.vue
+++ b/src/oj/learn/components/ExerciseWidget.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Exercise } from "utils/types"
+
+const ExerciseMcq = defineAsyncComponent(() => import("./ExerciseMcq.vue"))
+const ExerciseSort = defineAsyncComponent(() => import("./ExerciseSort.vue"))
+const ExerciseFill = defineAsyncComponent(() => import("./ExerciseFill.vue"))
+
+defineProps<{ exercise: Exercise; lang?: string }>()
+</script>
+
+<template>
+  <ExerciseMcq v-if="exercise.type === 'mcq'" :exercise="exercise" />
+  <ExerciseSort
+    v-else-if="exercise.type === 'sort'"
+    :exercise="exercise"
+    :lang="lang"
+  />
+  <ExerciseFill
+    v-else-if="exercise.type === 'fill'"
+    :exercise="exercise"
+    :lang="lang"
+  />
+</template>
--- a/src/oj/learn/composables/useExerciseParse.ts
+++ b/src/oj/learn/composables/useExerciseParse.ts
@@ -0,0 +1,37 @@
+import { Exercise } from "utils/types"
+
+type Segment =
+  | { type: "md"; content: string }
+  | { type: "exercise"; exercise: Exercise }
+
+export function parseExercises(
+  content: string,
+  exercises: Exercise[],
+): Segment[] {
+  const exerciseMap = new Map(exercises.map((e) => [e.id, e]))
+  const segments: Segment[] = []
+  const regex = /\[\[exercise:(\d+)\]\]/g
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "md",
+        content: content.slice(lastIndex, match.index),
+      })
+    }
+    const id = parseInt(match[1])
+    const exercise = exerciseMap.get(id)
+    if (exercise) {
+      segments.push({ type: "exercise", exercise })
+    }
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < content.length) {
+    segments.push({ type: "md", content: content.slice(lastIndex) })
+  }
+
+  return segments
+}
--- a/src/oj/learn/index.vue
+++ b/src/oj/learn/index.vue
@@ -27,11 +27,19 @@
          :bordered="false"
          size="small"
        >
+          <template v-for="(seg, i) in segments" :key="i">
            <MdPreview
+              v-if="seg.type === 'md'"
              preview-theme="vuepress"
              :theme="isDark ? 'dark' : 'light'"
-            :model-value="tutorial.content"
+              :model-value="seg.content"
            />
+            <ExerciseWidget
+              v-else
+              :exercise="seg.exercise"
+              :lang="tutorial.type"
+            />
+          </template>
        </n-card>
      </n-gi>

@@ -63,11 +71,19 @@
        </n-tab-pane>

        <n-tab-pane name="content" :tab="`第 ${step} 课`">
+          <template v-for="(seg, i) in segments" :key="i">
            <MdPreview
+              v-if="seg.type === 'md'"
              preview-theme="vuepress"
              :theme="isDark ? 'dark' : 'light'"
-            :model-value="tutorial.content"
+              :model-value="seg.content"
            />
+            <ExerciseWidget
+              v-else
+              :exercise="seg.exercise"
+              :lang="tutorial.type"
+            />
+          </template>
        </n-tab-pane>

        <n-tab-pane name="code" tab="示例代码" v-if="tutorial.code">
@@ -103,25 +119,26 @@
 <script setup lang="ts">
 import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
-import { Tutorial } from "utils/types"
-import { getTutorial, getTutorials } from "../api"
+import { Tutorial, Exercise } from "utils/types"
+import { getTutorial, getTutorials, getExercises } from "../api"
+import { parseExercises } from "./composables/useExerciseParse"
 import { useBreakpoints } from "shared/composables/breakpoints"
-const isDark = useDark()

+const ExerciseWidget = defineAsyncComponent(
+  () => import("./components/ExerciseWidget.vue"),
+)
 const CodeEditor = defineAsyncComponent(
  () => import("shared/components/CodeEditor.vue"),
 )

+const isDark = useDark()
 const route = useRoute()
 const router = useRouter()
-
 const { isDesktop } = useBreakpoints()

 const step = computed(() => {
  if (!route.params.step || !route.params.step.length) return 1
-  else {
  return parseInt(route.params.step[0])
-  }
 })

 const tutorial = ref<Partial<Tutorial>>({
@@ -130,29 +147,26 @@ const tutorial = ref<Partial<Tutorial>>({
  content: "",
  code: "",
 })
-
 const titles = ref<{ id: number; title: string }[]>([])
+const exercises = ref<Exercise[]>([])
 const activeTab = ref("content")

+const segments = computed(() =>
+  parseExercises(tutorial.value.content ?? "", exercises.value),
+)
+
 const isFirstLesson = computed(() => step.value === 1)
 const isLastLesson = computed(() => step.value === titles.value.length)

 function goToLesson(lessonNumber: number) {
  activeTab.value = "content"
-  const dest = lessonNumber.toString().padStart(2, "0")
-  router.push("/learn/" + dest)
+  router.push("/learn/" + lessonNumber.toString().padStart(2, "0"))
 }
-
 function goToPrevLesson() {
-  if (step.value > 1) {
-    goToLesson(step.value - 1)
-  }
+  if (step.value > 1) goToLesson(step.value - 1)
 }
-
 function goToNextLesson() {
-  if (step.value < titles.value.length) {
-    goToLesson(step.value + 1)
-  }
+  if (step.value < titles.value.length) goToLesson(step.value + 1)
 }

 async function init() {
@@ -160,15 +174,18 @@ async function init() {
  titles.value = res1.data
  if (titles.value.length === 0) return
  const id = titles.value[step.value - 1].id
-  const res2 = await getTutorial(id)
-  tutorial.value = res2.data
+  const [res2, exs] = await Promise.allSettled([
+    getTutorial(id),
+    getExercises(id),
+  ])
+  if (res2.status === "fulfilled") tutorial.value = res2.value.data
+  exercises.value = exs.status === "fulfilled" ? exs.value : []
 }

 watch(
  () => route.params.step,
  async () => {
-    if (route.name !== "learn") return
-    init()
+    if (route.name === "learn") init()
  },
  { immediate: true },
 )
--- a/src/oj/problem/components/EditorForTest.vue
+++ b/src/oj/problem/components/EditorForTest.vue
@@ -74,14 +74,7 @@ const runCode = async () => {

 const languageOptions: DropdownOption[] = problem.value!.languages.map(
  (it) => ({
-    label: () =>
-      h("div", { style: "display: flex; align-items: center;" }, [
-        h("img", {
-          src: `/${it}.svg`,
-          style: { width: "16px", height: "16px", marginRight: "8px" },
-        }),
-        LANGUAGE_SHOW_VALUE[it],
-      ]),
+    label: () => LANGUAGE_SHOW_VALUE[it],
    value: it,
  }),
 )
--- a/src/oj/problem/components/ProblemFlowchart.vue
+++ b/src/oj/problem/components/ProblemFlowchart.vue
@@ -6,20 +6,18 @@ const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")

-// 使用 mermaid composable
 const { renderError, renderFlowchart } = useMermaid()

-// 渲染流程图的函数
 const renderProblemFlowchart = async () => {
-  if (problem.value?.mermaid_code) {
-    await renderFlowchart(mermaidContainer.value, problem.value.mermaid_code)
-  }
+  await renderFlowchart(
+    mermaidContainer.value,
+    problem.value?.mermaid_code ?? "",
+  )
 }

-// 初始化Mermaid并渲染
-onMounted(() => {
-  renderProblemFlowchart()
-})
+onMounted(renderProblemFlowchart)
+
+watch(() => problem.value?.mermaid_code, renderProblemFlowchart)
 </script>

 <template>
--- a/src/oj/problem/components/ProblemListTitle.vue
+++ b/src/oj/problem/components/ProblemListTitle.vue
@@ -14,5 +14,10 @@ defineProps<{
      width="18"
      icon="vscode-icons:file-type-drawio"
    />
+    <Icon
+      v-else-if="problem.show_flowchart"
+      width="18"
+      icon="vscode-icons:file-type-graphql"
+    />
  </n-flex>
 </template>
--- a/src/oj/problem/components/ProblemSubmission.vue
+++ b/src/oj/problem/components/ProblemSubmission.vue
@@ -50,7 +50,7 @@ const columns: DataTableColumn<Submission>[] = [
          text: true,
          type: "info",
          onClick: () => {
-            showCodePanel(row.id, <string>route.params.problemID ?? "")
+            showCodePanel(row.id, (route.params.problemID as string) ?? "")
          },
        },
        () => row.id.slice(0, 12),
@@ -116,8 +116,8 @@ async function listSubmissions() {
    ...query,
    myself: "1",
    offset,
-    problem_id: <string>route.params.problemID ?? "",
-    contest_id: <string>route.params.contestID ?? "",
+    problem_id: (route.params.problemID as string) ?? "",
+    contest_id: (route.params.contestID as string) ?? "",
  })
  submissions.value = res.data.results
  total.value = res.data.total
@@ -125,7 +125,7 @@ async function listSubmissions() {

 async function getRankOfThisProblem() {
  loading.value = true
-  const res = await getRankOfProblem(<string>route.params.problemID ?? "")
+  const res = await getRankOfProblem((route.params.problemID as string) ?? "")
  loading.value = false

  class_name.value = res.data.class_name
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/src/oj/problem/components/SubmitCode.vue
@@ -24,8 +24,8 @@ const codeStore = useCodeStore()
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const route = useRoute()
-const contestID = <string>route.params.contestID ?? ""
-const problemSetId = <string>route.params.problemSetId ?? ""
+const contestID = (route.params.contestID as string) ?? ""
+const problemSetId = (route.params.problemSetId as string) ?? ""

 const router = useRouter()
 const [commentPanel] = useToggle()
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -69,8 +69,6 @@ const page = ref(1)
 // ==================== WebSocket 相关函数 ====================
 // 处理 WebSocket 消息
 const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
-  console.log("收到流程图评分更新:", data)
-
  if (data.type === "flowchart_evaluation_completed") {
    loading.value = false
    latestRating.value = {
@@ -79,11 +77,8 @@ const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
    }
    message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
  } else if (data.type === "flowchart_evaluation_failed") {
-    console.log("处理评分失败消息")
    loading.value = false
    message.error(`流程图评分失败: ${data.error}`)
-  } else {
-    console.log("未知的消息类型:", data.type)
  }
 }

@@ -94,7 +89,6 @@ const { connect, disconnect, subscribe } = useFlowchartWebSocket(

 // 订阅提交更新
 function subscribeToSubmission(submissionId: string) {
-  console.log("开始订阅WebSocket更新")
  subscribe(submissionId)
 }

@@ -106,7 +100,7 @@ async function submitFlowchartData(flowchartEditorRef: any) {
  // 获取流程图的JSON数据
  const flowchartData = flowchartEditorRef.value.getFlowchartData()

-  if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
+  if (!flowchartData?.nodes?.length || !flowchartData?.edges?.length) {
    message.error("流程图节点或边不能为空")
    return
  }
@@ -287,7 +281,6 @@ onUnmounted(() => {
      <n-grid :cols="5" :x-gap="16">
        <!-- 左侧：流程图预览区域 -->
        <n-gi :span="3">
-          <n-card title="流程图预览">
          <div class="flowchart">
            <n-spin :show="rendering">
              <n-alert v-if="renderError" type="error" title="流程图渲染失败">
@@ -296,7 +289,6 @@ onUnmounted(() => {
              <div class="flowchart" v-else ref="mermaidContainer"></div>
            </n-spin>
          </div>
-          </n-card>
          <!-- 加载到编辑器按钮 -->
          <n-flex style="margin-top: 16px" justify="center">
            <n-button @click="loadToEditor" type="primary">
--- a/src/oj/problem/composables/useMermaidConverter.ts
+++ b/src/oj/problem/composables/useMermaidConverter.ts
@@ -11,9 +11,17 @@ export function useMermaidConverter() {

    let mermaid = "graph TD\n"

+    // Build safe ID mapping to prevent Mermaid syntax errors from special characters
+    const idMap = new Map<string, string>()
+    nodes.forEach((node: any, index: number) => {
+      idMap.set(node.id, `node_${index}`)
+    })
+    const safeId = (id: string) =>
+      idMap.get(id) || id.replace(/[^a-zA-Z0-9_]/g, "_")
+
    // 处理节点 - 根据原始类型和自定义标签
    nodes.forEach((node: any) => {
-      const nodeId = node.id
+      const nodeId = safeId(node.id)
      const label = node.data?.customLabel || node.data?.label || "节点"
      const originalType = node.data?.originalType || node.type

@@ -50,8 +58,8 @@ export function useMermaidConverter() {

    // 处理边
    edges.forEach((edge: any) => {
-      const source = edge.source
-      const target = edge.target
+      const source = safeId(edge.source)
+      const target = safeId(edge.target)
      const label = edge.label ?? ""

      if (label && label.trim() !== "") {
@@ -64,26 +72,32 @@ export function useMermaidConverter() {
    // 添加样式定义来区分不同类型的节点
    mermaid += "\n"
    mermaid +=
-      "    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px\n"
+      "    classDef startNode fill:#dcfce7,stroke:#16a34a,stroke-width:2.5px,color:#0f172a\n"
    mermaid +=
-      "    classDef input fill:#e3f2fd,stroke:#1976d2,stroke-width:2px\n"
+      "    classDef endNode fill:#fee2e2,stroke:#dc2626,stroke-width:2.5px,color:#0f172a\n"
    mermaid +=
-      "    classDef output fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px\n"
+      "    classDef input fill:#dbeafe,stroke:#2563eb,stroke-width:2.5px,color:#0f172a\n"
    mermaid +=
-      "    classDef process fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px\n"
+      "    classDef output fill:#ede9fe,stroke:#7c3aed,stroke-width:2.5px,color:#0f172a\n"
    mermaid +=
-      "    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px\n"
+      "    classDef process fill:#f0f9ff,stroke:#0284c7,stroke-width:2.5px,color:#0f172a\n"
+    mermaid +=
+      "    classDef decision fill:#fef3c7,stroke:#d97706,stroke-width:2.5px,color:#0f172a\n"
+    mermaid +=
+      "    classDef loop fill:#fae8ff,stroke:#c026d3,stroke-width:2.5px,color:#0f172a\n"
    mermaid += "\n"

    // 为节点应用样式
    nodes.forEach((node: any) => {
-      const nodeId = node.id
+      const nodeId = safeId(node.id)
      const originalType = node.data?.originalType || node.type

      switch (originalType) {
        case "start":
+          mermaid += `    class ${nodeId} startNode\n`
+          break
        case "end":
-          mermaid += `    class ${nodeId} startEnd\n`
+          mermaid += `    class ${nodeId} endNode\n`
          break
        case "input":
          mermaid += `    class ${nodeId} input\n`
@@ -92,9 +106,11 @@ export function useMermaidConverter() {
          mermaid += `    class ${nodeId} output\n`
          break
        case "decision":
-        case "loop":
          mermaid += `    class ${nodeId} decision\n`
          break
+        case "loop":
+          mermaid += `    class ${nodeId} loop\n`
+          break
        default:
          mermaid += `    class ${nodeId} process\n`
      }
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -44,6 +44,7 @@ const sortOptions = [
  { label: "最少提交", value: "submission_number" },
  { label: "最多通过", value: "-accepted_number" },
  { label: "最少通过", value: "accepted_number" },
+  { label: "画流程图", value: "flowchart" },
 ]

 const router = useRouter()
@@ -219,12 +220,12 @@ function rowProps(row: ProblemFiltered) {

 <template>
  <n-flex vertical size="large">
-    <n-flex justify="space-between">
+    <div class="problem-list-toolbar">
      <n-space>
        <n-form :show-feedback="false" inline label-placement="left">
          <n-form-item label="难度">
            <n-select
-              style="width: 120px"
+              style="width: 100px"
              v-model:value="query.difficulty"
              :options="difficultyOptions"
            />
@@ -236,7 +237,7 @@ function rowProps(row: ProblemFiltered) {
        <n-form :show-feedback="false" inline label-placement="left">
          <n-form-item label="排序">
            <n-select
-              style="width: 120px"
+              style="width: 100px"
              v-model:value="query.sort"
              :options="sortOptions"
            />
@@ -272,8 +273,8 @@ function rowProps(row: ProblemFiltered) {
          </n-form-item>
        </n-form>
      </n-space>
-      <Hitokoto v-if="isDesktop" />
-    </n-flex>
+      <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
+    </div>
    <n-collapse-transition :show="showTag">
      <n-flex>
        <n-tag
@@ -302,4 +303,32 @@ function rowProps(row: ProblemFiltered) {
  />
 </template>

-<style scoped></style>
+<style scoped>
+.problem-list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(250px, 1fr);
+  align-items: start;
+  gap: 12px 16px;
+}
+
+.problem-list-toolbar :deep(.n-space) {
+  min-width: 0;
+}
+
+.problem-list-hitokoto {
+  justify-self: end;
+  width: 100%;
+  max-width: 720px;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .problem-list-toolbar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .problem-list-toolbar :deep(.n-space) {
+    width: 100%;
+  }
+}
+</style>
--- a/src/oj/submission/components/FlowchartLink.vue
+++ b/src/oj/submission/components/FlowchartLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-button v-if="showLink" type="info" text @click="goto">
+  <n-button v-if="showLink" type="info" text @click="handleClick">
    {{ flowchart.id.slice(0, 12) }}
  </n-button>
  <n-text v-else class="flowchart-id" @click="handleClick">
@@ -7,8 +7,8 @@
  </n-text>
 </template>
 <script setup lang="ts">
+import type { FlowchartSubmissionListItem } from "utils/types"
 import { useUserStore } from "shared/store/user"
-import { FlowchartSubmissionListItem } from "utils/types"

 const userStore = useUserStore()

@@ -27,10 +27,6 @@ const showLink = computed(() => {
  return props.flowchart.username === userStore.user?.username
 })

-function goto() {
-  emit("showDetail", props.flowchart.id)
-}
-
 function handleClick() {
  emit("showDetail", props.flowchart.id)
 }
--- a/src/oj/submission/detail.vue
+++ b/src/oj/submission/detail.vue
@@ -81,7 +81,7 @@ async function copyToProblem() {
  }

  const contestID = submission.value!.contest
-  const problemSetId = <string>route.params.problemSetId ?? ""
+  const problemSetId = (route.params.problemSetId as string) ?? ""
  if (contestID) {
    // 竞赛题目
    router.push({
--- a/src/oj/submission/list.vue
+++ b/src/oj/submission/list.vue
@@ -103,7 +103,7 @@ async function listSubmissions() {
      ...query,
      offset,
      problem_id: query.problem,
-      contest_id: <string>route.params.contestID ?? "",
+      contest_id: (route.params.contestID as string) ?? "",
      language: query.language,
      today: query.today,
    })
--- a/src/oj/user/index.vue
+++ b/src/oj/user/index.vue
@@ -93,7 +93,7 @@ function groupBadgesByIcon(badges: UserBadgeType[]): GroupedBadge[] {
 async function init() {
  toggle(true)
  try {
-    const res = await getProfile(<string>route.query.name)
+    const res = await getProfile(route.query.name as string)
    profile.value = res.data
    const acm = res.data.acm_problems_status.problems || {}
    const oi = res.data.oi_problems_status.problems || {}
@@ -114,7 +114,7 @@ async function init() {
    }

    if (route.query.name) {
-      promises.push(getUserBadges(<string>route.query.name))
+      promises.push(getUserBadges(route.query.name as string))
    } else {
      promises.push(getUserBadges())
    }
--- a/src/shared/components/Beian.vue
+++ b/src/shared/components/Beian.vue
@@ -26,7 +26,7 @@ import { useBreakpoints } from "shared/composables/breakpoints"
 const route = useRoute()
 const { isMobile } = useBreakpoints()
 const hiddenICP = computed(() =>
-  ["problem", "contest problem"].includes(<string>route.name),
+  ["problem", "contest problem"].includes(route.name as string),
 )

 function goICP() {
--- a/src/shared/components/FlowchartEditor/CustomNode.vue
+++ b/src/shared/components/FlowchartEditor/CustomNode.vue
@@ -4,7 +4,7 @@
    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
    :data-node-type="nodeType"
    :draggable="!isEditing"
-    @mouseenter="isHovered = true"
+    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @dblclick="handleDoubleClick"
    @dragstart="handleDragStart"
@@ -53,11 +53,17 @@ import { getNodeTypeConfig } from "./useNodeStyles"
 import NodeHandles from "./NodeHandles.vue"
 import NodeActions from "./NodeActions.vue"

-// 类型定义
+interface NodeData {
+  label: string
+  color: string
+  originalType: string
+  customLabel?: string
+}
+
 interface Props {
  id: string
  type: string
-  data: any
+  data: NodeData
 }

 interface Emits {
@@ -147,6 +153,7 @@ const handleCancelEdit = () => {
 }

 const handleMouseEnter = () => {
+  isHovered.value = true
  if (hideTimeout) {
    clearTimeout(hideTimeout)
    hideTimeout = null
--- a/src/shared/components/FlowchartEditor/Toolbar.vue
+++ b/src/shared/components/FlowchartEditor/Toolbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { getNodeTypeConfig } from "./useNodeStyles"
+import { currentDragNodeType } from "./useDnD"

 // 拖拽开始处理
 const onDragStart = (event: DragEvent, type: string) => {
@@ -8,6 +9,17 @@ const onDragStart = (event: DragEvent, type: string) => {

  event.dataTransfer.setData("application/vueflow", type)
  event.dataTransfer.effectAllowed = "move"
+  currentDragNodeType.value = type
+
+  // 隐藏浏览器默认拖影，改用 canvas 跟随预览
+  const emptyImg = new Image(1, 1)
+  emptyImg.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+  event.dataTransfer.setDragImage(emptyImg, 0, 0)
+}
+
+const onDragEnd = () => {
+  currentDragNodeType.value = null
 }

 // Props
@@ -42,8 +54,7 @@ const nodeTypes = computed(() =>
  ),
 )

-// 获取保存状态标题
-const getSaveStatusTitle = () => {
+const saveStatusTitle = computed(() => {
  if (props.isSaving) {
    return "正在保存..."
  } else if (props.hasUnsavedChanges) {
@@ -53,7 +64,7 @@ const getSaveStatusTitle = () => {
  } else {
    return "已保存"
  }
-}
+})
 </script>
 <template>
  <div class="toolbar">
@@ -68,7 +79,7 @@ const getSaveStatusTitle = () => {
            unsaved: props.hasUnsavedChanges && !props.isSaving,
            saved: !props.hasUnsavedChanges && !props.isSaving,
          }"
-          :title="getSaveStatusTitle()"
+          :title="saveStatusTitle"
        >
          <span v-if="props.isSaving" class="spinner">⏳</span>
          <span v-else-if="props.hasUnsavedChanges">●</span>
@@ -86,6 +97,7 @@ const getSaveStatusTitle = () => {
        class="node-item"
        :draggable="true"
        @dragstart="onDragStart($event, nodeType.type)"
+        @dragend="onDragEnd"
        :style="{ borderColor: nodeType.color }"
        :title="`${nodeType.label} - ${nodeType.description}`"
      >
--- a/src/shared/components/FlowchartEditor/index.vue
+++ b/src/shared/components/FlowchartEditor/index.vue
@@ -14,7 +14,8 @@ import {
 import { Controls } from "@vue-flow/controls"
 import { Background } from "@vue-flow/background"

-import { useDnD } from "./useDnD"
+import { useDnD, currentDragNodeType } from "./useDnD"
+import { getNodeTypeConfig } from "./useNodeStyles"
 import { useHistory } from "./useHistory"
 import { useFlowOperations } from "./useFlowOperations"
 import { useCache } from "./useCache"
@@ -42,17 +43,35 @@ const { canUndo, canRedo, saveState, undo, redo } = useHistory()
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 // 缓存管理
-const { isSaving, lastSaved, hasUnsavedChanges, loadFromCache, clearCache } =
-  useCache(
+const {
+  isSaving,
+  lastSaved,
+  hasUnsavedChanges,
+  saveToCache,
+  loadFromCache,
+  clearCache,
+} = useCache(
  nodes,
  edges,
  problem.value?._id
    ? `flowchart-editor-data-problem-${problem.value!._id}`
    : "flowchart-editor-data",
-  )
+)

 // 拖拽处理
-const { onDragOver, onDragLeave, onDrop } = useDnD()
+const { onDragOver, onDragLeave, onDrop, isDragOver, screenDragPos } = useDnD()
+
+const dragPreviewStyle = computed(() => {
+  if (!screenDragPos.value || !currentDragNodeType.value) return null
+  const config = getNodeTypeConfig(currentDragNodeType.value)
+  const type = currentDragNodeType.value
+  return {
+    left: `${screenDragPos.value.x}px`,
+    top: `${screenDragPos.value.y}px`,
+    background: config.color,
+    borderRadius: type === "start" || type === "end" ? "20px" : "8px",
+  }
+})

 // 流程操作
 const {
@@ -93,16 +112,18 @@ const handleDrop = (event: DragEvent) => {
 const handleUndo = () => {
  const state = undo()
  if (state) {
-    nodes.value = [...state.nodes]
-    edges.value = [...state.edges]
+    nodes.value = state.nodes
+    edges.value = state.edges
+    saveToCache()
  }
 }

 const handleRedo = () => {
  const state = redo()
  if (state) {
-    nodes.value = [...state.nodes]
-    edges.value = [...state.edges]
+    nodes.value = state.nodes
+    edges.value = state.edges
+    saveToCache()
  }
 }

@@ -114,7 +135,11 @@ const handleClear = () => {

 // 键盘事件
 const handleKeyDown = (event: KeyboardEvent) => {
-  if (event.target instanceof HTMLInputElement) return
+  if (
+    event.target instanceof HTMLInputElement ||
+    event.target instanceof HTMLTextAreaElement
+  )
+    return

  if (event.key === "Delete" || event.key === "Backspace") {
    deleteSelected()
@@ -178,6 +203,19 @@ defineExpose({

 <template>
  <div class="container" :style="{ height }">
+    <!-- 拖拽时跟随鼠标的节点预览 -->
+    <Transition name="drag-preview">
+      <div
+        v-if="isDragOver && dragPreviewStyle && currentDragNodeType"
+        class="drag-node-preview"
+        :style="dragPreviewStyle"
+      >
+        <span class="preview-icon">{{
+          getNodeTypeConfig(currentDragNodeType).icon
+        }}</span>
+        <span>{{ getNodeTypeConfig(currentDragNodeType).label }}</span>
+      </div>
+    </Transition>
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
@@ -187,7 +225,7 @@ defineExpose({
      @connect="handleConnect"
      @edge-click="handleEdgeClick"
      :default-edge-options="{
-        type: 'step',
+        type: 'default',
        style: {
          stroke: '#6366f1',
          strokeWidth: 2.5,
@@ -265,4 +303,36 @@ defineExpose({
  height: 100%;
  position: relative;
 }
+
+.drag-node-preview {
+  position: fixed;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 9999;
+  padding: 8px 18px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0.55;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  border: 2px dashed rgba(255, 255, 255, 0.6);
+  user-select: none;
+}
+
+.preview-icon {
+  font-size: 16px;
+}
+
+.drag-preview-enter-active,
+.drag-preview-leave-active {
+  transition: opacity 0.1s ease;
+}
+.drag-preview-enter-from,
+.drag-preview-leave-to {
+  opacity: 0;
+}
 </style>
--- a/src/shared/components/FlowchartEditor/useDnD.ts
+++ b/src/shared/components/FlowchartEditor/useDnD.ts
@@ -7,28 +7,36 @@ import {
 } from "./useNodeStyles"
 import { getRandomId } from "utils/functions"

+// 模块级共享：当前拖拽的节点类型（Toolbar 写入，canvas 读取）
+export const currentDragNodeType = ref<string | null>(null)
+
 /**
 * 简化的拖拽处理
 */
 export function useDnD() {
  const { addNodes, screenToFlowCoordinate } = useVueFlow()
  const isDragOver = ref(false)
+  const screenDragPos = ref<{ x: number; y: number } | null>(null)

  // 拖拽悬停处理
  const onDragOver = (event: DragEvent) => {
    event.preventDefault()
    isDragOver.value = true
+    screenDragPos.value = { x: event.clientX, y: event.clientY }
  }

  // 拖拽离开处理
  const onDragLeave = () => {
    isDragOver.value = false
+    screenDragPos.value = null
  }

  // 拖拽放置处理
  const onDrop = (event: DragEvent) => {
    event.preventDefault()
    isDragOver.value = false
+    screenDragPos.value = null
+    currentDragNodeType.value = null

    const type = event.dataTransfer?.getData("application/vueflow")
    if (!type) return
@@ -68,6 +76,7 @@ export function useDnD() {

  return {
    isDragOver,
+    screenDragPos,
    onDragOver,
    onDragLeave,
    onDrop,
--- a/src/shared/components/FlowchartEditor/useFlowOperations.ts
+++ b/src/shared/components/FlowchartEditor/useFlowOperations.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue"
-import type { Node, Edge } from "@vue-flow/core"
+import type { Node, Edge, Connection } from "@vue-flow/core"
 import { getRandomId } from "utils/functions"

 export function useFlowOperations(
@@ -11,12 +11,11 @@ export function useFlowOperations(
  removeEdges: (edgeIds: string[]) => void,
  saveState: (nodes: Node[], edges: Edge[]) => void,
 ) {
-  // 根据节点类型和handle自动推断标签
  const getAutoLabel = (
-    sourceNode: any,
-    targetNode: any,
-    sourceHandle: string,
-    targetHandle: string,
+    sourceNode: Node | undefined,
+    targetNode: Node | undefined,
+    sourceHandle: string | null | undefined,
+    targetHandle: string | null | undefined,
  ) => {
    const sourceType = sourceNode?.data?.originalType || sourceNode?.type
    const targetType = targetNode?.data?.originalType || targetNode?.type
@@ -51,9 +50,7 @@ export function useFlowOperations(
    return ""
  }

-  // 连接处理
-  const handleConnect = (params: any) => {
-    // 获取源节点和目标节点
+  const handleConnect = (params: Connection) => {
    const sourceNode = nodes.value.find((node) => node.id === params.source)
    const targetNode = nodes.value.find((node) => node.id === params.target)

@@ -79,9 +76,8 @@ export function useFlowOperations(
    saveState(nodes.value, edges.value)
  }

-  // 边点击处理 - 单击删除
-  const handleEdgeClick = (event: any) => {
-    removeEdges([event.edge.id])
+  const handleEdgeClick = ({ edge }: { edge: Edge }) => {
+    removeEdges([edge.id])
    saveState(nodes.value, edges.value)
  }

@@ -115,12 +111,7 @@ export function useFlowOperations(
        },
      }

-      // 使用 Vue Flow 的更新方法
      nodes.value[nodeIndex] = updatedNode
-
-      // 强制触发响应式更新
-      nodes.value = [...nodes.value]
-
      saveState(nodes.value, edges.value)
    }
  }
--- a/src/shared/components/FlowchartEditor/useHistory.ts
+++ b/src/shared/components/FlowchartEditor/useHistory.ts
@@ -1,11 +1,11 @@
-import { ref, computed } from "vue"
+import { shallowRef, computed } from "vue"
 import type { Node, Edge } from "@vue-flow/core"

 /**
 * 简化的历史记录管理
 */
 export function useHistory() {
-  const history = ref<{ nodes: Node[]; edges: Edge[] }[]>([])
+  const history = shallowRef<{ nodes: Node[]; edges: Edge[] }[]>([])
  const historyIndex = ref(-1)

  // 是否可以撤销
@@ -14,21 +14,30 @@ export function useHistory() {
  // 是否可以重做
  const canRedo = computed(() => historyIndex.value < history.value.length - 1)

+  const deepCopyState = (
+    nodes: Node[],
+    edges: Edge[],
+  ): { nodes: Node[]; edges: Edge[] } =>
+    JSON.parse(JSON.stringify({ nodes, edges })) as {
+      nodes: Node[]
+      edges: Edge[]
+    }
+
  // 保存状态到历史记录
  const saveState = (nodes: Node[], edges: Edge[]) => {
-    const currentState = { nodes: [...nodes], edges: [...edges] }
+    const currentState = deepCopyState(nodes, edges)

    // 如果当前不在历史记录的末尾，删除后面的记录
    if (historyIndex.value < history.value.length - 1) {
      history.value = history.value.slice(0, historyIndex.value + 1)
    }

-    history.value.push(currentState)
+    history.value = [...history.value, currentState]
    historyIndex.value = history.value.length - 1

    // 限制历史记录数量
    if (history.value.length > 20) {
-      history.value.shift()
+      history.value = history.value.slice(1)
      historyIndex.value--
    }
  }
@@ -38,7 +47,7 @@ export function useHistory() {
    if (canUndo.value) {
      historyIndex.value--
      const state = history.value[historyIndex.value]
-      return state
+      return deepCopyState(state.nodes, state.edges)
    }
    return null
  }
@@ -48,7 +57,7 @@ export function useHistory() {
    if (canRedo.value) {
      historyIndex.value++
      const state = history.value[historyIndex.value]
-      return state
+      return deepCopyState(state.nodes, state.edges)
    }
    return null
  }
--- a/src/shared/components/Header.vue
+++ b/src/shared/components/Header.vue
@@ -20,6 +20,38 @@ const { isMobile, isDesktop } = useBreakpoints()

 const isDark = useDark()

+function toggleDark(event: MouseEvent) {
+  const { clientX: x, clientY: y } = event
+  const radius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  )
+  if (!document.startViewTransition) {
+    isDark.value = !isDark.value
+    return
+  }
+  document
+    .startViewTransition(() => {
+      isDark.value = !isDark.value
+    })
+    .ready.then(() => {
+      document.documentElement.animate(
+        {
+          clipPath: [
+            `circle(0px at ${x}px ${y}px)`,
+            `circle(${radius}px at ${x}px ${y}px)`,
+          ],
+        },
+        {
+          duration: 400,
+          easing: "ease-in-out",
+          pseudoElement: "::view-transition-new(root)",
+        },
+      )
+    })
+    .catch(() => {})
+}
+
 // 从 store 中获取屏幕模式状态
 const { screenMode } = storeToRefs(screenModeStore)

@@ -270,7 +302,7 @@ function handleMenuSelect(key: string) {
          </n-button>
        </n-flex>
      </div>
-      <n-button :bordered="false" circle @click="isDark = !isDark">
+      <n-button :bordered="false" circle @click="toggleDark">
        <template #icon>
          <Icon v-if="isDark" icon="twemoji:sun-behind-small-cloud"></Icon>
          <Icon v-else icon="twemoji:cloud-with-lightning-and-rain"></Icon>
--- a/src/shared/components/Hitokoto.vue
+++ b/src/shared/components/Hitokoto.vue
@@ -26,27 +26,44 @@ onMounted(receive)
    @click="receive"
    v-if="hitokoto.sentence"
  >
-    <div class="sentence">{{ hitokoto.sentence }}</div>
-    <div class="from">{{ "来自 " + hitokoto.from }}</div>
+    <span class="from">{{ "来自 " + hitokoto.from }}</span>
+    <span class="sentence">{{ hitokoto.sentence }}</span>
  </div>
 </template>
 <style scoped>
 .hitokoto {
  cursor: pointer;
-  height: 34px;
+  height: 36px;
+  min-width: 0;
+  display: flow-root;
+  overflow: hidden;
+  text-align: right;
+  line-height: 18px;
+  word-break: break-all;
+}
+
+.hitokoto::before {
+  content: "";
+  float: right;
+  width: 0;
+  height: 18px;
 }

 .hitokoto .sentence {
-  max-width: 400px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: nowrap;
+  text-align: right;
 }

 .hitokoto .from {
  float: right;
+  clear: right;
+  max-width: min(45%, 260px);
+  margin-left: 8px;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
  font-size: 12px;
+  line-height: 18px;
  color: grey;
 }
 </style>
--- a/src/shared/components/MermaidEditor.vue
+++ b/src/shared/components/MermaidEditor.vue
@@ -1,97 +1,35 @@
 <script setup lang="ts">
-import { copyToClipboard, getRandomId } from "utils/functions"
-
-// 动态导入 mermaid
-let mermaid: any = null
+import { copyToClipboard } from "utils/functions"
+import { useMermaid } from "shared/composables/useMermaid"

 const modelValue = defineModel<string>({ default: "" })
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")

-// 渲染状态
-const renderSuccess = ref(false)
+const { renderFlowchart, renderError, renderSuccess } = useMermaid()

-// 定义事件
 const emit = defineEmits<{
  renderSuccess: []
 }>()

-// 动态加载 Mermaid
-const loadMermaid = async () => {
-  if (!mermaid) {
-    const mermaidModule = await import("mermaid")
-    mermaid = mermaidModule.default
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: "loose",
-      theme: "default",
-    })
-  }
-  return mermaid
-}
-
-// 初始化
-onMounted(async () => {
-  await loadMermaid()
-  nextTick(() => {
-    renderMermaid()
-  })
-})
-
-// 监听代码变化
-watch(modelValue, () => {
-  renderMermaid()
-})
-
-// 渲染Mermaid图表
 const renderMermaid = async () => {
-  if (!mermaidContainer.value) {
-    renderSuccess.value = false
-    return
-  }
-
-  // 总是先清空容器
-  mermaidContainer.value.innerHTML = ""
-
-  // 如果没有内容，直接返回
-  if (!modelValue.value.trim()) {
-    renderSuccess.value = false
-    return
-  }
-
-  try {
-    // 确保 mermaid 已加载
-    const mermaidInstance = await loadMermaid()
-    const id = `mermaid-${getRandomId()}`
-    const { svg } = await mermaidInstance.render(id, modelValue.value)
-    mermaidContainer.value.innerHTML = svg
-
-    // 渲染成功
-    renderSuccess.value = true
-    emit("renderSuccess")
-  } catch (error: any) {
-    const errorMessage = error?.message || "请检查代码语法"
-    renderSuccess.value = false
-
-    mermaidContainer.value.innerHTML = `
-      <div style="color: #ff4d4f; padding: 20px; text-align: center; border: 1px dashed #ff4d4f; border-radius: 4px;">
-        <p>❌ Mermaid语法错误</p>
-        <p style="font-size: 12px; color: #666;">${errorMessage}</p>
-      </div>
-    `
-  }
+  await renderFlowchart(mermaidContainer.value, modelValue.value)
+  if (renderSuccess.value) emit("renderSuccess")
 }

-// 清空代码
+onMounted(() => {
+  nextTick(renderMermaid)
+})
+
+watch(modelValue, renderMermaid)
+
 const clearCode = () => {
  modelValue.value = ""
 }

-// 复制代码
-const copyCode = async () => {
+const copyCode = () => {
  copyToClipboard(modelValue.value)
 }

-// 组件卸载时清空容器
 onBeforeUnmount(() => {
  if (mermaidContainer.value) {
    mermaidContainer.value.innerHTML = ""
@@ -115,7 +53,6 @@ onBeforeUnmount(() => {
      </n-flex>
      <n-input
        class="code-editor"
-        ref="codeEditor"
        v-model:value="modelValue"
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 20 }"
@@ -128,6 +65,14 @@ onBeforeUnmount(() => {
          ✓ 渲染成功
        </n-tag>
      </n-flex>
+      <n-alert
+        v-if="renderError"
+        type="error"
+        title="Mermaid 语法错误"
+        style="margin-bottom: 8px"
+      >
+        <n-text style="font-size: 12px">{{ renderError }}</n-text>
+      </n-alert>
      <div ref="mermaidContainer" class="mermaid-container"></div>
    </n-flex>
  </n-flex>
--- a/src/shared/components/TextEditor.vue
+++ b/src/shared/components/TextEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {
+import type {
  IDomEditor,
  IEditorConfig,
  IToolbarConfig,
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 const message = useMessage()

 const editorRef = shallowRef<IDomEditor>()
+const toolbarEditorRef = shallowRef<IDomEditor>()

 const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
@@ -91,8 +92,10 @@ function onClick() {
  editorRef.value.focus()
 }

-function handleCreated(editor: IDomEditor) {
+async function handleCreated(editor: IDomEditor) {
  editorRef.value = editor
+  await nextTick()
+  toolbarEditorRef.value = editor
 }

 async function customUpload(file: File, insertFn: InsertFnType) {
@@ -113,7 +116,7 @@ async function customUpload(file: File, insertFn: InsertFnType) {
  <div class="editorWrapper">
    <Toolbar
      class="toolbar"
-      :editor="editorRef"
+      :editor="toolbarEditorRef"
      :defaultConfig="props.simple ? toolbarConfigSimple : toolbarConfig"
      mode="simple"
    />
--- a/src/shared/composables/useMermaid.ts
+++ b/src/shared/composables/useMermaid.ts
@@ -1,43 +1,177 @@
 import { getRandomId } from "utils/functions"

-export function useMermaid() {
-  // 渲染状态
-  const renderError = ref<string | null>(null)
+const mermaidThemeVariables = {
+  primaryColor: "#eff6ff",
+  primaryTextColor: "#1d4ed8",
+  primaryBorderColor: "#3b82f6",
+  lineColor: "#94a3b8",
+  background: "#ffffff",
+  mainBkg: "#eff6ff",
+  fontFamily:
+    'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}

-  // 动态导入 mermaid
-  let mermaid: any = null
+const displayStyleId = "oj-mermaid-display-style"

-  // 动态加载 Mermaid
-  const loadMermaid = async () => {
-    if (!mermaid) {
+const shapes = ["rect", "polygon", "ellipse", "circle", "path"]
+
+function nodeShapeRule(cls: string, fill: string, stroke: string) {
+  const sel = shapes
+    .map((s) => `.oj-mermaid-flowchart g.node.${cls} ${s}`)
+    .join(",\n")
+  return `${sel} { fill: ${fill} !important; stroke: ${stroke} !important; }`
+}
+
+function nodeLabelRule(cls: string, color: string) {
+  const bases = [".label", ".nodeLabel", ".nodeLabel p", ".label span"]
+  const sel = bases
+    .map((b) => `.oj-mermaid-flowchart g.node.${cls} ${b}`)
+    .join(",\n")
+  return `${sel} { color: ${color} !important; fill: ${color} !important; }`
+}
+
+const mermaidDisplayStyle = `
+.oj-mermaid-flowchart {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Default node */
+.oj-mermaid-flowchart g.node rect,
+.oj-mermaid-flowchart g.node polygon,
+.oj-mermaid-flowchart g.node ellipse,
+.oj-mermaid-flowchart g.node circle,
+.oj-mermaid-flowchart g.node path {
+  fill: #eff6ff !important;
+  stroke: #3b82f6 !important;
+  stroke-width: 1.8px !important;
+}
+
+/* Default node text */
+.oj-mermaid-flowchart g.node .label,
+.oj-mermaid-flowchart g.node .nodeLabel,
+.oj-mermaid-flowchart g.node .nodeLabel p,
+.oj-mermaid-flowchart g.node .label span {
+  color: #1d4ed8 !important;
+  fill: #1d4ed8 !important;
+  font-weight: 600 !important;
+}
+
+/* startNode / startEnd */
+${nodeShapeRule("startNode", "#dcfce7", "#16a34a")}
+${nodeShapeRule("startEnd", "#dcfce7", "#16a34a")}
+${nodeLabelRule("startNode", "#166534")}
+${nodeLabelRule("startEnd", "#166534")}
+
+/* endNode */
+${nodeShapeRule("endNode", "#fee2e2", "#dc2626")}
+${nodeLabelRule("endNode", "#991b1b")}
+
+/* input */
+${nodeShapeRule("input", "#dbeafe", "#2563eb")}
+${nodeLabelRule("input", "#1e40af")}
+
+/* output */
+${nodeShapeRule("output", "#ede9fe", "#7c3aed")}
+${nodeLabelRule("output", "#5b21b6")}
+
+/* process */
+${nodeShapeRule("process", "#f1f5f9", "#64748b")}
+${nodeLabelRule("process", "#334155")}
+
+/* decision */
+${nodeShapeRule("decision", "#fef9c3", "#ca8a04")}
+${nodeLabelRule("decision", "#92400e")}
+
+/* loop */
+${nodeShapeRule("loop", "#fae8ff", "#c026d3")}
+${nodeLabelRule("loop", "#7e22ce")}
+
+/* Edges */
+.oj-mermaid-flowchart .edgePaths path.path,
+.oj-mermaid-flowchart .flowchart-link {
+  stroke: #94a3b8 !important;
+  stroke-width: 1.8px !important;
+}
+
+/* Arrowheads */
+.oj-mermaid-flowchart marker path,
+.oj-mermaid-flowchart .marker {
+  fill: #94a3b8 !important;
+  stroke: #94a3b8 !important;
+}
+
+/* Edge label background */
+.oj-mermaid-flowchart .edgeLabel rect,
+.oj-mermaid-flowchart .edgeLabel .labelBkg {
+  fill: rgba(255, 255, 255, 0.9) !important;
+  stroke: #e2e8f0 !important;
+}
+
+/* Edge label text */
+.oj-mermaid-flowchart .edgeLabel,
+.oj-mermaid-flowchart .edgeLabel span,
+.oj-mermaid-flowchart .edgeLabel p {
+  color: #475569 !important;
+  font-weight: 600 !important;
+}
+`
+
+const svgNamespace = "http://www.w3.org/2000/svg"
+
+function applyFlowchartDisplayStyle(container: HTMLElement) {
+  container.classList.add("oj-mermaid-surface")
+
+  const svg = container.querySelector("svg")
+  if (!svg) return
+
+  svg.classList.add("oj-mermaid-flowchart")
+
+  svg.querySelector(`#${displayStyleId}`)?.remove()
+  const style = document.createElementNS(svgNamespace, "style")
+  style.setAttribute("id", displayStyleId)
+  style.textContent = mermaidDisplayStyle
+  svg.insertBefore(style, svg.firstChild)
+}
+
+let mermaidInstance: any = null
+
+async function loadMermaid() {
+  if (!mermaidInstance) {
    const mermaidModule = await import("mermaid")
-      mermaid = mermaidModule.default
-      mermaid.initialize({
+    mermaidInstance = mermaidModule.default
+    mermaidInstance.initialize({
      startOnLoad: false,
-        securityLevel: "loose",
-        theme: "default",
+      securityLevel: "strict",
+      theme: "base",
+      themeVariables: mermaidThemeVariables,
    })
  }
-    return mermaid
-  }
+  return mermaidInstance
+}
+
+export function useMermaid() {
+  const renderError = ref<string | null>(null)
+  const renderSuccess = ref(false)

-  // 渲染流程图的函数
  const renderFlowchart = async (
    container: HTMLElement | null,
    mermaidCode: string,
  ) => {
-    try {
    renderError.value = null
+    renderSuccess.value = false

-      // 确保 mermaid 已加载
-      await loadMermaid()
+    if (container) container.innerHTML = ""

-      // 渲染流程图
-      if (container && mermaidCode) {
+    if (!container || !mermaidCode?.trim()) return
+
+    try {
+      const m = await loadMermaid()
      const id = `mermaid-${getRandomId()}`
-        const { svg } = await mermaid.render(id, mermaidCode)
+      const { svg } = await m.render(id, mermaidCode)
      container.innerHTML = svg
-      }
+      applyFlowchartDisplayStyle(container)
+      renderSuccess.value = true
    } catch (error) {
      renderError.value =
        error instanceof Error
@@ -46,13 +180,13 @@ export function useMermaid() {
    }
  }

-  // 清除渲染错误
  const clearError = () => {
    renderError.value = null
  }

  return {
    renderError: readonly(renderError),
+    renderSuccess: readonly(renderSuccess),
    renderFlowchart,
    clearError,
  }
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -191,7 +191,7 @@ export const LANGUAGE_SHOW_VALUE = {
 } as const

 export const ICON_SET = {
-  Flowchart: "streamline-freehand-color:programming-flowchart",
+  Flowchart: "vscode-icons:file-type-drawio",
  Python2: "devicon:python",
  Python3: "devicon:python",
  C: "devicon:c",
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -173,6 +173,7 @@ export interface ProblemFiltered {
  status: "not_test" | "passed" | "failed"
  author: string
  allow_flowchart: boolean
+  show_flowchart: boolean
 }

 export interface AdminProblemFiltered {
@@ -578,6 +579,29 @@ export interface Tutorial {
  created_at?: Date
 }

+export interface ExerciseMcqData {
+  question: string
+  options: string[]
+  answer: number[]
+}
+
+export interface ExerciseSortData {
+  question: string
+  lines: string[]
+}
+
+export interface ExerciseFillData {
+  question: string
+  code: string
+}
+
+export interface Exercise {
+  id: number
+  type: "mcq" | "sort" | "fill"
+  data: ExerciseMcqData | ExerciseSortData | ExerciseFillData
+  order: number
+}
+
 export interface DurationData {
  unit: string
  index: number
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "utils/*": ["./src/utils/*"],
+      "oj/*": ["./src/oj/*"],
+      "admin/*": ["./src/admin/*"],
+      "shared/*": ["./src/shared/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true,
-    "paths": {
-      "shared/*": ["./src/shared/*"],
-      "utils/*": ["./src/utils/*"],
-      "oj/*": ["./src/oj/*"],
-      "admin/*": ["./src/admin/*"],
-    },
-    "types": ["naive-ui/volar"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +1,24 @@
 {
  "compilerOptions": {
-    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
  },
  "include": ["rsbuild.config.ts"]
 }
Author	SHA1	Message	Date
yuetsh	6a31a47c5d	fix flowchart Some checks are pending Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Waiting to run Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Waiting to run Details	2026-05-07 06:09:05 -06:00
yuetsh	c11c3cf226	fix mermaid 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-05-07 03:42:38 -06:00
yuetsh	c5a367622c	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-05-07 02:39:29 -06:00
yuetsh	4ecd7bb229	fix3 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-05-07 02:27:09 -06:00
yuetsh	73884a075b	fix again 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-05-07 02:16:02 -06:00
yuetsh	ecb91f5ca8	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-05-07 01:56:10 -06:00
yuetsh	7d8eff4ee8	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-05-07 01:46:43 -06:00
yuetsh	67a44d7637	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-05-07 00:48:16 -06:00
yuetsh	b05423bd89	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-05-07 00:34:52 -06:00
yuetsh	99603ce87e	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-05-07 00:21:21 -06:00
yuetsh	4c9d379d0c	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-05-07 00:12:31 -06:00
yuetsh	da75f50798	styling mermaid 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-05-06 21:36:20 -06:00
yuetsh	ed3e9322b2	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-05-06 20:39:08 -06:00
yuetsh	97917164ea	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-05-05 09:54:52 -06:00
yuetsh	59f3747496	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-05-05 07:27:06 -06:00
yuetsh	86cc5cc500	fix	2026-05-05 07:26:47 -06:00
yuetsh	e8b9a190ec	fix 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-05-05 07:23:40 -06:00
yuetsh	507d77a576	fix in mobile 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-05-05 05:53:59 -06:00
yuetsh	22b9405ed2	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-05-04 11:06:25 -06:00
yuetsh	711c446f74	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-05-04 11:00:07 -06:00
yuetsh	e6e4d71b1c	fix UI 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-05-03 10:22:03 -06:00
yuetsh	6ae879ba80	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-05-02 09:11:00 -06:00
yuetsh	9137a12dc9	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-04-27 04:07:09 -06:00
yuetsh	f4b9f34ec8	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-04-27 03:56:16 -06:00
yuetsh	0ca1a142a4	fix: use mcqAnswer.value in template delete handler 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-04-24 02:06:38 -06:00
yuetsh	5c9972315c	feat: update exercise manager to support multi-answer checkboxes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-24 02:04:07 -06:00
yuetsh	9afb57a9ed	feat: rewrite ExerciseMcq for multi-select with partial feedback	2026-04-24 02:01:35 -06:00
yuetsh	21a3ff322b	feat: update ExerciseMcqData.answer type to number[]	2026-04-24 02:00:38 -06:00
yuetsh	942ff0a739	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 Co-authored-by: Copilot <copilot@github.com>	2026-04-23 18:24:15 -06:00
yuetsh	30f71c5db2	add fills 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-04-23 13:48:36 -06:00
yuetsh	f00dab9c6d	fix: address code review issues in interactive exercises 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 - ExerciseSort: replace unbounded shuffle recursion with deterministic swap - ExerciseManager: add sortQuestion field so sort exercises have custom questions - index.vue: use Promise.allSettled so exercise fetch failure doesn't break lesson content - ExerciseManager: guard mcqAnswer index after option deletion Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-23 06:35:45 -06:00
yuetsh	67a23c51c8	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-04-23 02:31:57 -06:00
yuetsh	6331391792	feat: add interactive MCQ and code-sort exercise widgets to tutorial lessons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-23 01:52:20 -06:00
yuetsh	12cf247e20	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-04-13 05:03:16 -06:00
yuetsh	82210ac3e1	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-04-12 06:17:06 -06:00
yuetsh	f46b7efb86	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-04-12 06:06:15 -06:00
yuetsh	e26dd1ab30	add flowchart 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-04-12 06:00:32 -06:00
yuetsh	1f18f363eb	refactor flowchart 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-04-11 02:14:53 -06:00
yuetsh	8521c67e68	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-04-09 08:21:08 -06:00
yuetsh	31255bc11c	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-04-09 05:45:21 -06:00
yuetsh	9fc0a91f5e	style: disable default view-transition cross-fade	2026-04-09 05:39:57 -06:00