revert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.browserslistrc

@@ -0,0 +1 @@
+chrome >= 90

.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

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/core": "^14.3.0",
-    "@vueuse/router": "^14.2.1",
+    "@vueuse/router": "^14.3.0",
-    "@wangeditor-next/editor": "^5.6.55",
+    "@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,29 @@
     "date-fns": "^4.1.0",
     "fflate": "^0.8.2",
     "highlight.js": "^11.11.1",
-    "md-editor-v3": "^6.4.1",
+    "md-editor-v3": "^6.5.0",
-    "mermaid": "^11.13.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",
+    "@iconify/vue": "^5.0.1",
-    "@rsbuild/core": "^1.7.3",
+    "@rsbuild/core": "^1.7.5",
     "@rsbuild/plugin-vue": "^1.2.7",
     "@types/canvas-confetti": "^1.9.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.0.0"
   }

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

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>

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") {

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", {

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") {

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,

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"

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",

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>

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>

src/index.css

@@ -10,6 +10,26 @@ body {
   --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;
+  background:
+    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef6ff 100%);
+  background-size:
+    24px 24px,
+    24px 24px,
+    auto;
+}
+
+.oj-mermaid-surface > svg {
+  max-width: 100%;
+}
+
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;

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
+}

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>

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>

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>

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>

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
+}

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 { Tutorial, Exercise } from "utils/types"
-import { getTutorial, getTutorials } from "../api"
+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/" + lessonNumber.toString().padStart(2, "0"))
-  router.push("/learn/" + dest)
 }
-
 function goToPrevLesson() {
-  if (step.value > 1) {
+  if (step.value > 1) goToLesson(step.value - 1)
-    goToLesson(step.value - 1)
 }
-}
-
 function goToNextLesson() {
-  if (step.value < titles.value.length) {
+  if (step.value < titles.value.length) goToLesson(step.value + 1)
-    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)
+  const [res2, exs] = await Promise.allSettled([
-  tutorial.value = res2.data
+    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
+    if (route.name === "learn") init()
-    init()
   },
   { immediate: true },
 )

src/oj/problem/components/EditorForTest.vue

@@ -74,14 +74,7 @@ const runCode = async () => {
 
 const languageOptions: DropdownOption[] = problem.value!.languages.map(
   (it) => ({
-    label: () =>
+    label: () => LANGUAGE_SHOW_VALUE[it],
-      h("div", { style: "display: flex; align-items: center;" }, [
-        h("img", {
-          src: `/${it}.svg`,
-          style: { width: "16px", height: "16px", marginRight: "8px" },
-        }),
-        LANGUAGE_SHOW_VALUE[it],
-      ]),
     value: it,
   }),
 )

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>

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 ?? "",
+    problem_id: (route.params.problemID as string) ?? "",
-    contest_id: <string>route.params.contestID ?? "",
+    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

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 contestID = (route.params.contestID as string) ?? ""
-const problemSetId = <string>route.params.problemSetId ?? ""
+const problemSetId = (route.params.problemSetId as string) ?? ""
 
 const router = useRouter()
 const [commentPanel] = useToggle()

src/oj/problem/components/SubmitFlowchart.vue

@@ -106,7 +106,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
   }

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 source = safeId(edge.source)
-      const target = edge.target
+      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`
       }

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" />
+      <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
-    </n-flex>
+    </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>

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({

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,
     })

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())
     }

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() {

src/shared/components/FlowchartEditor/index.vue

@@ -114,7 +114,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()

src/shared/components/Header.vue

@@ -30,9 +30,11 @@ function toggleDark(event: MouseEvent) {
     isDark.value = !isDark.value
     return
   }
-  document.startViewTransition(() => {
+  document
+    .startViewTransition(() => {
       isDark.value = !isDark.value
-  }).ready.then(() => {
+    })
+    .ready.then(() => {
       document.documentElement.animate(
         {
           clipPath: [
@@ -46,7 +48,8 @@ function toggleDark(event: MouseEvent) {
           pseudoElement: "::view-transition-new(root)",
         },
       )
-  }).catch(() => {})
+    })
+    .catch(() => {})
 }
 
 // 从 store 中获取屏幕模式状态

src/shared/components/Hitokoto.vue

@@ -26,27 +26,44 @@ onMounted(receive)
     @click="receive"
     v-if="hitokoto.sentence"
   >
-    <div class="sentence">{{ hitokoto.sentence }}</div>
+    <span class="from">{{ "来自 " + hitokoto.from }}</span>
-    <div class="from">{{ "来自 " + hitokoto.from }}</div>
+    <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-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: nowrap;
 }
 
 .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>

src/shared/components/MermaidEditor.vue

@@ -22,7 +22,7 @@ const loadMermaid = async () => {
     mermaid = mermaidModule.default
     mermaid.initialize({
       startOnLoad: false,
-      securityLevel: "loose",
+      securityLevel: "strict",
       theme: "default",
     })
   }
@@ -72,12 +72,18 @@ const renderMermaid = async () => {
     const errorMessage = error?.message || "请检查代码语法"
     renderSuccess.value = false
 
-    mermaidContainer.value.innerHTML = `
+    const errorDiv = document.createElement("div")
-      <div style="color: #ff4d4f; padding: 20px; text-align: center; border: 1px dashed #ff4d4f; border-radius: 4px;">
+    errorDiv.style.cssText =
-        <p>❌ Mermaid语法错误</p>
+      "color: #ff4d4f; padding: 20px; text-align: center; border: 1px dashed #ff4d4f; border-radius: 4px;"
-        <p style="font-size: 12px; color: #666;">${errorMessage}</p>
+    const titleP = document.createElement("p")
-      </div>
+    titleP.textContent = "Mermaid语法错误"
-    `
+    const detailP = document.createElement("p")
+    detailP.style.cssText = "font-size: 12px; color: #666;"
+    detailP.textContent = errorMessage
+    errorDiv.appendChild(titleP)
+    errorDiv.appendChild(detailP)
+    mermaidContainer.value.innerHTML = ""
+    mermaidContainer.value.appendChild(errorDiv)
   }
 }
 

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"
     />

src/shared/composables/useMermaid.ts

@@ -1,5 +1,236 @@
 import { getRandomId } from "utils/functions"
 
+const mermaidThemeVariables = {
+  primaryColor: "#e0f2fe",
+  primaryTextColor: "#0f172a",
+  primaryBorderColor: "#0284c7",
+  lineColor: "#64748b",
+  secondaryColor: "#f5f3ff",
+  tertiaryColor: "#ecfdf5",
+  background: "#ffffff",
+  mainBkg: "#f8fafc",
+  secondBkg: "#eef2ff",
+  tertiaryBkg: "#f0fdfa",
+  nodeBorder: "#2563eb",
+  clusterBkg: "#f8fafc",
+  clusterBorder: "#cbd5e1",
+  edgeLabelBackground: "#ffffff",
+  fontFamily:
+    'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}
+
+const semanticNodeClasses = [
+  "startNode",
+  "endNode",
+  "startEnd",
+  "input",
+  "output",
+  "process",
+  "decision",
+  "loop",
+]
+
+const displayStyleId = "oj-mermaid-display-style"
+
+const mermaidDisplayStyle = `
+.oj-mermaid-flowchart {
+  max-width: 100%;
+  height: auto;
+}
+
+.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 {
+  stroke-width: 2.5px !important;
+  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.12));
+}
+
+.oj-mermaid-flowchart g.node.startNode rect,
+.oj-mermaid-flowchart g.node.startNode polygon,
+.oj-mermaid-flowchart g.node.startNode ellipse,
+.oj-mermaid-flowchart g.node.startNode circle,
+.oj-mermaid-flowchart g.node.startNode path,
+.oj-mermaid-flowchart g.node.startEnd rect,
+.oj-mermaid-flowchart g.node.startEnd polygon,
+.oj-mermaid-flowchart g.node.startEnd ellipse,
+.oj-mermaid-flowchart g.node.startEnd circle,
+.oj-mermaid-flowchart g.node.startEnd path {
+  fill: #dcfce7 !important;
+  stroke: #16a34a !important;
+}
+
+.oj-mermaid-flowchart g.node.endNode rect,
+.oj-mermaid-flowchart g.node.endNode polygon,
+.oj-mermaid-flowchart g.node.endNode ellipse,
+.oj-mermaid-flowchart g.node.endNode circle,
+.oj-mermaid-flowchart g.node.endNode path {
+  fill: #fee2e2 !important;
+  stroke: #dc2626 !important;
+}
+
+.oj-mermaid-flowchart g.node.input rect,
+.oj-mermaid-flowchart g.node.input polygon,
+.oj-mermaid-flowchart g.node.input ellipse,
+.oj-mermaid-flowchart g.node.input circle,
+.oj-mermaid-flowchart g.node.input path {
+  fill: #dbeafe !important;
+  stroke: #2563eb !important;
+}
+
+.oj-mermaid-flowchart g.node.output rect,
+.oj-mermaid-flowchart g.node.output polygon,
+.oj-mermaid-flowchart g.node.output ellipse,
+.oj-mermaid-flowchart g.node.output circle,
+.oj-mermaid-flowchart g.node.output path {
+  fill: #ede9fe !important;
+  stroke: #7c3aed !important;
+}
+
+.oj-mermaid-flowchart g.node.process rect,
+.oj-mermaid-flowchart g.node.process polygon,
+.oj-mermaid-flowchart g.node.process ellipse,
+.oj-mermaid-flowchart g.node.process circle,
+.oj-mermaid-flowchart g.node.process path {
+  fill: #f0f9ff !important;
+  stroke: #0284c7 !important;
+}
+
+.oj-mermaid-flowchart g.node.decision rect,
+.oj-mermaid-flowchart g.node.decision polygon,
+.oj-mermaid-flowchart g.node.decision ellipse,
+.oj-mermaid-flowchart g.node.decision circle,
+.oj-mermaid-flowchart g.node.decision path {
+  fill: #fef3c7 !important;
+  stroke: #d97706 !important;
+}
+
+.oj-mermaid-flowchart g.node.loop rect,
+.oj-mermaid-flowchart g.node.loop polygon,
+.oj-mermaid-flowchart g.node.loop ellipse,
+.oj-mermaid-flowchart g.node.loop circle,
+.oj-mermaid-flowchart g.node.loop path {
+  fill: #fae8ff !important;
+  stroke: #c026d3 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-0 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 path {
+  fill: #dbeafe !important;
+  stroke: #2563eb !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-1 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 path {
+  fill: #ccfbf1 !important;
+  stroke: #0d9488 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-2 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 path {
+  fill: #ede9fe !important;
+  stroke: #7c3aed !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-3 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 path {
+  fill: #ffe4e6 !important;
+  stroke: #e11d48 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-4 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 path {
+  fill: #fef3c7 !important;
+  stroke: #d97706 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-5 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 path {
+  fill: #dcfce7 !important;
+  stroke: #16a34a !important;
+}
+
+.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: #0f172a !important;
+  fill: #0f172a !important;
+  font-weight: 650 !important;
+}
+
+.oj-mermaid-flowchart .edgePaths path.path,
+.oj-mermaid-flowchart .flowchart-link {
+  stroke: #64748b !important;
+  stroke-width: 2.4px !important;
+}
+
+.oj-mermaid-flowchart marker path,
+.oj-mermaid-flowchart .marker {
+  fill: #64748b !important;
+  stroke: #64748b !important;
+}
+
+.oj-mermaid-flowchart .edgeLabel rect,
+.oj-mermaid-flowchart .edgeLabel .labelBkg {
+  fill: rgba(255, 255, 255, 0.94) !important;
+  stroke: #cbd5e1 !important;
+}
+
+.oj-mermaid-flowchart .edgeLabel,
+.oj-mermaid-flowchart .edgeLabel span,
+.oj-mermaid-flowchart .edgeLabel p {
+  color: #334155 !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")
+
+  const nodes = Array.from(svg.querySelectorAll<SVGGElement>("g.node"))
+  nodes.forEach((node, index) => {
+    const hasSemanticClass = semanticNodeClasses.some((className) =>
+      node.classList.contains(className),
+    )
+    if (!hasSemanticClass) {
+      node.classList.add(`oj-node-palette-${index % 6}`)
+    }
+  })
+
+  svg.querySelector(`#${displayStyleId}`)?.remove()
+  const style = document.createElementNS(svgNamespace, "style")
+  style.setAttribute("id", displayStyleId)
+  style.textContent = mermaidDisplayStyle
+  svg.insertBefore(style, svg.firstChild)
+}
+
 export function useMermaid() {
   // 渲染状态
   const renderError = ref<string | null>(null)
@@ -14,8 +245,9 @@ export function useMermaid() {
       mermaid = mermaidModule.default
       mermaid.initialize({
         startOnLoad: false,
-        securityLevel: "loose",
+        securityLevel: "strict",
-        theme: "default",
+        theme: "base",
+        themeVariables: mermaidThemeVariables,
       })
     }
     return mermaid
@@ -37,6 +269,7 @@ export function useMermaid() {
         const id = `mermaid-${getRandomId()}`
         const { svg } = await mermaid.render(id, mermaidCode)
         container.innerHTML = svg
+        applyFlowchartDisplayStyle(container)
       }
     } catch (error) {
       renderError.value =

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",

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

tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

tsconfig.json

@@ -1,25 +1,7 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ESNext",
+  "references": [
-    "useDefineForClassFields": true,
+    { "path": "./tsconfig.app.json" },
-    "module": "ESNext",
+    { "path": "./tsconfig.node.json" }
-    "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" }]
 }

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",
+    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": 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"]
 }