update

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

.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

@@ -9,6 +9,14 @@
     "build:test": "rsbuild build --env-mode=test",
     "fmt": "prettier --write src *.ts"
   },
+  "overrides": {
+    "dompurify": "3.4.2",
+    "lodash": "4.18.1",
+    "lodash-es": "4.18.1",
+    "picomatch": "4.0.4",
+    "uuid": "14.0.0",
+    "yaml": "2.8.4"
+  },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/lang-cpp": "^6.0.3",
@@ -19,11 +27,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.7.0",
     "@wangeditor-next/editor-for-vue": "^5.1.14",
-    "axios": "^1.15.0",
+    "axios": "^1.16.0",
     "canvas-confetti": "^1.9.4",
     "chart.js": "^4.5.1",
     "codemirror": "^6.0.2",
@@ -31,29 +39,29 @@
     "date-fns": "^4.1.0",
     "fflate": "^0.8.2",
     "highlight.js": "^11.11.1",
-    "md-editor-v3": "^6.4.2",
+    "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.32",
+    "vue": "^3.5.33",
     "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.5",
+    "@rsbuild/core": "^2.0.3",
     "@rsbuild/plugin-vue": "^1.2.7",
     "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^25.6.0",
-    "prettier": "^3.8.2",
+    "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,9 +20,20 @@ export default defineConfig(({ envMode }) => {
     ws: true,
     changeOrigin: true,
   }
+
   return {
     plugins: [pluginVue()],
     tools: {
+      swc: {
+        detectSyntax: false,
+        jsc: {
+          parser: {
+            decorators: true,
+            syntax: "typescript",
+            tsx: false,
+          },
+        },
+      },
       rspack: {
         plugins: [
           AutoImport({
@@ -96,3 +107,5 @@ export default defineConfig(({ envMode }) => {
     },
   }
 })
+
+export default config

src/admin/api.ts

@@ -263,13 +263,15 @@ export function setTutorialVisibility(id: number, is_public: boolean) {
 }
 
 export async function getAdminExercises(tutorialId: number) {
-  const res = await http.get("admin/exercise", { params: { tutorial_id: tutorialId } })
+  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"
+  type: "mcq" | "sort" | "fill"
   data: object
   order: number
 }) {
@@ -279,7 +281,7 @@ export async function createExercise(data: {
 
 export async function updateExercise(data: {
   id: number
-  type: "mcq" | "sort"
+  type: "mcq" | "sort" | "fill"
   data: object
   order: number
 }) {

src/admin/tutorial/components/ExerciseManager.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { Exercise, ExerciseMcqData, ExerciseSortData } from "utils/types"
+import {
+  Exercise,
+  ExerciseMcqData,
+  ExerciseSortData,
+  ExerciseFillData,
+} from "utils/types"
 import {
   getAdminExercises,
   createExercise,
@@ -14,15 +19,19 @@ const dialog = useDialog()
 const exercises = ref<Exercise[]>([])
 const showForm = ref(false)
 const editingId = ref<number | null>(null)
-const formType = ref<"mcq" | "sort">("mcq")
+const formType = ref<"mcq" | "sort" | "fill">("mcq")
 const formOrder = ref(0)
 
 const mcqQuestion = ref("")
 const mcqOptions = ref(["", ""])
-const mcqAnswer = ref(0)
+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)
 }
@@ -35,8 +44,11 @@ function openCreate() {
   formOrder.value = exercises.value.length
   mcqQuestion.value = ""
   mcqOptions.value = ["", ""]
-  mcqAnswer.value = 0
+  mcqAnswer.value = []
+  sortQuestion.value = ""
   sortCode.value = ""
+  fillQuestion.value = ""
+  fillCode.value = ""
   showForm.value = true
 }
 
@@ -48,29 +60,62 @@ function openEdit(ex: Exercise) {
     const d = ex.data as ExerciseMcqData
     mcqQuestion.value = d.question
     mcqOptions.value = [...d.options]
-    mcqAnswer.value = d.answer
+    mcqAnswer.value = [...d.answer]
-  } else {
+  } 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() {
-  const data =
+  if (formType.value === "mcq" && mcqAnswer.value.length === 0) {
-    formType.value === "mcq"
+    message.error("请至少勾选一个正确答案")
-      ? { question: mcqQuestion.value, options: mcqOptions.value, answer: mcqAnswer.value }
+    return
-      : {
+  }
-          question: "将下列代码行排列为正确顺序",
+  let data: Record<string, unknown>
-          lines: sortCode.value.split("\n").filter((l) => l.trim() !== ""),
+  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 })
+      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 })
+      await createExercise({
+        tutorial_id: props.tutorialId,
+        type: formType.value,
+        data,
+        order: formOrder.value,
+      })
       message.success("练习题已创建")
     }
     showForm.value = false
@@ -99,7 +144,15 @@ function copyPlaceholder(id: number) {
 }
 
 function typeName(type: string) {
-  return type === "mcq" ? "选择题" : "代码排序"
+  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>
 
@@ -107,7 +160,9 @@ function typeName(type: string) {
   <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-button type="primary" size="small" @click="openCreate"
+        >+ 添加练习题</n-button
+      >
     </n-flex>
 
     <n-empty v-if="exercises.length === 0" description="暂无练习题" />
@@ -116,11 +171,7 @@ function typeName(type: string) {
       <n-list-item v-for="ex in exercises" :key="ex.id">
         <n-flex justify="space-between" align="center">
           <div>
-            <n-tag
+            <n-tag size="small" :type="typeTagType(ex.type)" :bordered="false">
-              size="small"
-              :type="ex.type === 'mcq' ? 'success' : 'info'"
-              :bordered="false"
-            >
               {{ typeName(ex.type) }}
             </n-tag>
             <n-text style="margin-left: 10px">
@@ -130,12 +181,16 @@ function typeName(type: string) {
           <n-space :size="8">
             <n-tooltip trigger="hover">
               <template #trigger>
-                <n-button size="small" @click="copyPlaceholder(ex.id)">复制占位符</n-button>
+                <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-button size="small" type="error" @click="confirmDelete(ex.id)">
+              删除
+            </n-button>
           </n-space>
         </n-flex>
       </n-list-item>
@@ -152,24 +207,38 @@ function typeName(type: string) {
           <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-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" />
+            <n-input
+              v-model:value="mcqQuestion"
+              type="textarea"
+              :rows="2"
+              placeholder="下面选项中正确是哪个？"
+            />
           </n-form-item>
-          <n-form-item label="选项（正确答案前选择单选按钮）">
+          <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-flex
-                <n-radio
+                v-for="(opt, i) in mcqOptions"
-                  :value="i"
+                :key="i"
-                  :checked="mcqAnswer === i"
+                align="center"
-                  @update:checked="$event && (mcqAnswer = i)"
+                :size="8"
+              >
+                <n-checkbox
+                  :checked="mcqAnswer.includes(i)"
+                  @update:checked="toggleAnswer(i)"
                 />
                 <n-input
                   v-model:value="mcqOptions[i]"
@@ -179,17 +248,34 @@ function typeName(type: string) {
                 <n-button
                   size="small"
                   :disabled="mcqOptions.length <= 2"
-                  @click="mcqOptions.splice(i, 1)"
+                  @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-button size="small" @click="mcqOptions.push('')">
+                + 添加选项
+              </n-button>
             </n-space>
           </n-form-item>
         </template>
 
-        <template v-else>
+        <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"
@@ -200,6 +286,26 @@ function typeName(type: string) {
             />
           </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>

src/admin/tutorial/detail.vue

@@ -64,7 +64,6 @@ async function submit() {
       await updateTutorial(tutorial)
       message.success("修改已保存")
     }
-    router.push({ name: "admin tutorial list" })
   } catch (err: any) {
     message.error(err.data)
   }

src/oj/api.ts

@@ -423,6 +423,8 @@ export function getProblemSetUserProgress(
 }
 
 export async function getExercises(tutorialId: number): Promise<Exercise[]> {
-  const res = await http.get("exercises", { params: { tutorial_id: tutorialId } })
+  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

@@ -3,46 +3,75 @@ 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<number | null>(null)
+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
-  selected.value = idx
+  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 === null || correct.value) return
+  if (selected.value.size === 0 || correct.value) return
-  if (selected.value === data.value.answer) {
+  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 {
-    wrong.value = true
+    selected.value = new Set()
-    selected.value = null
+    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 = null
+  selected.value = new Set()
   correct.value = false
   wrong.value = false
+  partial.value = false
 }
 
 function optionType(idx: number): "default" | "primary" | "success" {
-  if (correct.value && idx === data.value.answer) return "success"
+  if (correct.value && data.value.answer.includes(idx)) return "success"
-  if (idx === selected.value) return "primary"
+  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)">
+  <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">练一练 · 选择题</n-tag>
+        <n-tag type="success" size="small" :bordered="false">
+          练一练 · {{ isSingle ? "单选题" : "多选题" }}
+        </n-tag>
       </n-space>
     </template>
 
@@ -55,21 +84,29 @@ function optionType(idx: number): "default" | "primary" | "success" {
         :type="optionType(idx)"
         :secondary="optionType(idx) !== 'default'"
         :tertiary="optionType(idx) === 'default'"
-        :strong="idx === selected"
+        :strong="selected.has(idx)"
-        :style="{ justifyContent: 'flex-start', width: '100%', textAlign: 'left' }"
+        :style="{
+          justifyContent: 'flex-start',
+          width: '100%',
+          textAlign: 'left',
+        }"
         @click="select(idx)"
       >
         <template #icon>
-          <span style="font-weight: 700">{{ String.fromCharCode(65 + idx) }}</span>
+          <span style="font-weight: 700">{{
+            String.fromCharCode(65 + idx)
+          }}</span>
         </template>
         {{ opt }}
       </n-button>
     </n-space>
 
     <n-alert
-      v-if="correct || wrong"
+      v-if="correct || wrong || partial"
-      :type="correct ? 'success' : 'error'"
+      :type="correct ? 'success' : partial ? 'warning' : 'error'"
-      :title="correct ? '正确！' : '选择有误，请重试'"
+      :title="
+        correct ? '正确！' : partial ? '部分正确，请重试' : '选择有误，请重试'
+      "
       style="margin-top: 12px"
     />
 
@@ -77,7 +114,7 @@ function optionType(idx: number): "default" | "primary" | "success" {
       <n-button
         type="primary"
         size="small"
-        :disabled="selected === null || correct"
+        :disabled="selected.size === 0 || correct"
         @click="submit"
       >
         提交

src/oj/learn/components/ExerciseSort.vue

@@ -22,11 +22,14 @@ function shuffle(arr: LineItem[]): LineItem[] {
     ;[a[i], a[j]] = [a[j], a[i]]
   }
   const isCorrect = a.every((item, i) => item.originalIdx === i)
-  return isCorrect && a.length > 1 ? shuffle(arr) : a
+  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 })))
+  lines.value = shuffle(
+    data.value.lines.map((text, idx) => ({ originalIdx: idx, text })),
+  )
   submitted.value = false
 }
 
@@ -54,7 +57,9 @@ function lineStatus(idx: number): "correct" | "wrong" | "default" {
   return lines.value[idx].originalIdx === idx ? "correct" : "wrong"
 }
 
-const allCorrect = computed(() => lines.value.every((item, i) => item.originalIdx === i))
+const allCorrect = computed(() =>
+  lines.value.every((item, i) => item.originalIdx === i),
+)
 
 function submit() {
   submitted.value = true
@@ -71,11 +76,14 @@ function escapeHtml(text: string): string {
 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
+  const lang =
+    props.lang === "python" ? "python" : props.lang === "c" ? "c" : null
 
   if (lang) {
     try {
-      const result = hljs.highlight(rawLines.join("\n"), { language: lang }).value
+      const result = hljs.highlight(rawLines.join("\n"), {
+        language: lang,
+      }).value
       result.split("\n").forEach((html, i) => {
         map[i] = html
       })
@@ -93,9 +101,14 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
 </script>
 
 <template>
-  <n-card size="small" style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
+  <n-card
+    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>
+      <n-tag type="info" size="small" :bordered="false"
+        >练一练 · 代码排序</n-tag
+      >
     </template>
 
     <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
@@ -126,7 +139,6 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
                 : 'transparent',
           cursor: 'grab',
           fontFamily: 'monospace',
-          fontSize: '13px',
           userSelect: 'none',
         }"
         @dragstart="onDragStart(idx)"
@@ -146,7 +158,12 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
     />
 
     <n-space style="margin-top: 12px" :size="8">
-      <n-button type="info" size="small" :disabled="submitted && allCorrect" @click="submit">
+      <n-button
+        type="info"
+        size="small"
+        :disabled="submitted && allCorrect"
+        @click="submit"
+      >
         提交
       </n-button>
       <n-button size="small" @click="reset">重置</n-button>
@@ -157,29 +174,51 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
 <style>
 .hljs-keyword,
 .hljs-operator,
-.hljs-selector-tag { color: #d73a49; }
+.hljs-selector-tag {
+  color: #d73a49;
+}
 .hljs-string,
 .hljs-regexp,
-.hljs-template-literal { color: #032f62; }
+.hljs-template-literal {
+  color: #032f62;
+}
 .hljs-comment,
-.hljs-quote { color: #6a737d; font-style: italic; }
+.hljs-quote {
+  color: #6a737d;
+  font-style: italic;
+}
 .hljs-number,
-.hljs-literal { color: #005cc5; }
+.hljs-literal {
+  color: #005cc5;
+}
 .hljs-built_in,
 .hljs-title.function_,
-.hljs-class .hljs-title { color: #6f42c1; }
+.hljs-class .hljs-title {
+  color: #6f42c1;
+}
 
 .dark .hljs-keyword,
 .dark .hljs-operator,
-.dark .hljs-selector-tag { color: #c678dd; }
+.dark .hljs-selector-tag {
+  color: #c678dd;
+}
 .dark .hljs-string,
 .dark .hljs-regexp,
-.dark .hljs-template-literal { color: #98c379; }
+.dark .hljs-template-literal {
+  color: #98c379;
+}
 .dark .hljs-comment,
-.dark .hljs-quote { color: #7f848e; font-style: italic; }
+.dark .hljs-quote {
+  color: #7f848e;
+  font-style: italic;
+}
 .dark .hljs-number,
-.dark .hljs-literal { color: #e5c07b; }
+.dark .hljs-literal {
+  color: #e5c07b;
+}
 .dark .hljs-built_in,
 .dark .hljs-title.function_,
-.dark .hljs-class .hljs-title { color: #61afef; }
+.dark .hljs-class .hljs-title {
+  color: #61afef;
+}
 </style>

src/oj/learn/components/ExerciseWidget.vue

@@ -3,11 +3,21 @@ 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" />
+  <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

@@ -4,7 +4,10 @@ type Segment =
   | { type: "md"; content: string }
   | { type: "exercise"; exercise: Exercise }
 
-export function parseExercises(content: string, exercises: Exercise[]): Segment[] {
+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
@@ -13,7 +16,10 @@ export function parseExercises(content: string, exercises: Exercise[]): Segment[
 
   while ((match = regex.exec(content)) !== null) {
     if (match.index > lastIndex) {
-      segments.push({ type: "md", content: content.slice(lastIndex, match.index) })
+      segments.push({
+        type: "md",
+        content: content.slice(lastIndex, match.index),
+      })
     }
     const id = parseInt(match[1])
     const exercise = exerciseMap.get(id)

src/oj/learn/index.vue

@@ -34,7 +34,11 @@
               :theme="isDark ? 'dark' : 'light'"
               :model-value="seg.content"
             />
-            <ExerciseWidget v-else :exercise="seg.exercise" :lang="tutorial.type" />
+            <ExerciseWidget
+              v-else
+              :exercise="seg.exercise"
+              :lang="tutorial.type"
+            />
           </template>
         </n-card>
       </n-gi>
@@ -74,7 +78,11 @@
               :theme="isDark ? 'dark' : 'light'"
               :model-value="seg.content"
             />
-            <ExerciseWidget v-else :exercise="seg.exercise" :lang="tutorial.type" />
+            <ExerciseWidget
+              v-else
+              :exercise="seg.exercise"
+              :lang="tutorial.type"
+            />
           </template>
         </n-tab-pane>
 
@@ -86,11 +94,21 @@
       <n-divider style="margin: 12px 0" />
 
       <n-flex align="center" justify="space-between">
-        <n-button secondary type="primary" :disabled="isFirstLesson" @click="goToPrevLesson">
+        <n-button
+          secondary
+          type="primary"
+          :disabled="isFirstLesson"
+          @click="goToPrevLesson"
+        >
           ← 上一课
         </n-button>
         <n-text>{{ step }} / {{ titles.length }}</n-text>
-        <n-button secondary type="primary" :disabled="isLastLesson" @click="goToNextLesson">
+        <n-button
+          secondary
+          type="primary"
+          :disabled="isLastLesson"
+          @click="goToNextLesson"
+        >
           下一课 →
         </n-button>
       </n-flex>
@@ -106,8 +124,12 @@ import { getTutorial, getTutorials, getExercises } from "../api"
 import { parseExercises } from "./composables/useExerciseParse"
 import { useBreakpoints } from "shared/composables/breakpoints"
 
-const ExerciseWidget = defineAsyncComponent(() => import("./components/ExerciseWidget.vue"))
+const ExerciseWidget = defineAsyncComponent(
-const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
+  () => import("./components/ExerciseWidget.vue"),
+)
+const CodeEditor = defineAsyncComponent(
+  () => import("shared/components/CodeEditor.vue"),
+)
 
 const isDark = useDark()
 const route = useRoute()
@@ -119,7 +141,12 @@ const step = computed(() => {
   return parseInt(route.params.step[0])
 })
 
-const tutorial = ref<Partial<Tutorial>>({ id: 0, title: "", content: "", code: "" })
+const tutorial = ref<Partial<Tutorial>>({
+  id: 0,
+  title: "",
+  content: "",
+  code: "",
+})
 const titles = ref<{ id: number; title: string }[]>([])
 const exercises = ref<Exercise[]>([])
 const activeTab = ref("content")
@@ -147,9 +174,12 @@ async function init() {
   titles.value = res1.data
   if (titles.value.length === 0) return
   const id = titles.value[step.value - 1].id
-  const [res2, exs] = await Promise.all([getTutorial(id), getExercises(id)])
+  const [res2, exs] = await Promise.allSettled([
-  tutorial.value = res2.data
+    getTutorial(id),
-  exercises.value = exs
+    getExercises(id),
+  ])
+  if (res2.status === "fulfilled") tutorial.value = res2.value.data
+  exercises.value = exs.status === "fulfilled" ? exs.value : []
 }
 
 watch(

src/oj/problem/list.vue

@@ -15,7 +15,6 @@ import { renderTableTitle } from "utils/renders"
 import ProblemStatus from "./components/ProblemStatus.vue"
 import AuthorSelect from "shared/components/AuthorSelect.vue"
 import ProblemListTitle from "./components/ProblemListTitle.vue"
-import { labelRect } from "mermaid/dist/rendering-util/rendering-elements/shapes/labelRect"
 
 interface Tag {
   id: number
@@ -221,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"
             />
@@ -238,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"
             />
@@ -274,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
@@ -304,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/shared/components/Header.vue

@@ -30,23 +30,26 @@ function toggleDark(event: MouseEvent) {
     isDark.value = !isDark.value
     return
   }
-  document.startViewTransition(() => {
+  document
-    isDark.value = !isDark.value
+    .startViewTransition(() => {
-  }).ready.then(() => {
+      isDark.value = !isDark.value
-    document.documentElement.animate(
+    })
-      {
+    .ready.then(() => {
-        clipPath: [
+      document.documentElement.animate(
-          `circle(0px at ${x}px ${y}px)`,
+        {
-          `circle(${radius}px at ${x}px ${y}px)`,
+          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)",
+          duration: 400,
-      },
+          easing: "ease-in-out",
-    )
+          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

@@ -73,7 +73,8 @@ const renderMermaid = async () => {
     renderSuccess.value = false
 
     const errorDiv = document.createElement("div")
-    errorDiv.style.cssText = "color: #ff4d4f; padding: 20px; text-align: center; border: 1px dashed #ff4d4f; border-radius: 4px;"
+    errorDiv.style.cssText =
+      "color: #ff4d4f; padding: 20px; text-align: center; border: 1px dashed #ff4d4f; border-radius: 4px;"
     const titleP = document.createElement("p")
     titleP.textContent = "Mermaid语法错误"
     const detailP = document.createElement("p")

src/utils/types.ts

@@ -582,7 +582,7 @@ export interface Tutorial {
 export interface ExerciseMcqData {
   question: string
   options: string[]
-  answer: number
+  answer: number[]
 }
 
 export interface ExerciseSortData {
@@ -590,10 +590,15 @@ export interface ExerciseSortData {
   lines: string[]
 }
 
+export interface ExerciseFillData {
+  question: string
+  code: string
+}
+
 export interface Exercise {
   id: number
-  type: 'mcq' | 'sort'
+  type: "mcq" | "sort" | "fill"
-  data: ExerciseMcqData | ExerciseSortData
+  data: ExerciseMcqData | ExerciseSortData | ExerciseFillData
   order: 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,24 +1,7 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ESNext",
+  "references": [
-    "useDefineForClassFields": true,
+    { "path": "./tsconfig.app.json" },
-    "module": "ESNext",
+    { "path": "./tsconfig.node.json" }
-    "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"]
 }