feat: add interactive MCQ and code-sort exercise widgets to tutorial lessons

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

src/admin/api.ts

@@ -6,6 +6,7 @@ import {
   BlankContest,
   BlankProblem,
   Contest,
+  Exercise,
   Server,
   TestcaseUploadedReturns,
   Tutorial,
@@ -261,6 +262,35 @@ 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"
+  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"
+  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/tutorial/components/ExerciseManager.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { Exercise, ExerciseMcqData, ExerciseSortData } 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">("mcq")
+const formOrder = ref(0)
+
+const mcqQuestion = ref("")
+const mcqOptions = ref(["", ""])
+const mcqAnswer = ref(0)
+
+const sortQuestion = ref("")
+const sortLines = 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 = 0
+  sortQuestion.value = ""
+  sortLines.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 {
+    const d = ex.data as ExerciseSortData
+    sortQuestion.value = d.question
+    sortLines.value = [...d.lines]
+  }
+  showForm.value = true
+}
+
+async function save() {
+  const data =
+    formType.value === "mcq"
+      ? { question: mcqQuestion.value, options: mcqOptions.value, answer: mcqAnswer.value }
+      : { question: sortQuestion.value, lines: sortLines.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) {
+  return type === "mcq" ? "选择题" : "代码排序"
+}
+</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="ex.type === 'mcq' ? 'success' : 'info'"
+              :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-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" />
+          </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-radio
+                  :value="i"
+                  :checked="mcqAnswer === i"
+                  @update:checked="if ($event) mcqAnswer = 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)"
+                >
+                  ✕
+                </n-button>
+              </n-flex>
+              <n-button size="small" @click="mcqOptions.push('')">+ 添加选项</n-button>
+            </n-space>
+          </n-form-item>
+        </template>
+
+        <template v-else>
+          <n-form-item label="题目">
+            <n-input v-model:value="sortQuestion" type="textarea" :rows="2" />
+          </n-form-item>
+          <n-form-item label="代码行（按正确顺序输入）">
+            <n-space vertical style="width: 100%">
+              <n-flex v-for="(line, i) in sortLines" :key="i" align="center" :size="8">
+                <n-input
+                  v-model:value="sortLines[i]"
+                  :placeholder="`第 ${i + 1} 行`"
+                  style="flex: 1; font-family: monospace"
+                />
+                <n-button
+                  size="small"
+                  :disabled="sortLines.length <= 2"
+                  @click="sortLines.splice(i, 1)"
+                >
+                  ✕
+                </n-button>
+              </n-flex>
+              <n-button size="small" @click="sortLines.push('')">+ 添加行</n-button>
+            </n-space>
+          </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
@@ -112,6 +113,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/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,
@@ -420,3 +421,8 @@ 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/ExerciseMcq.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Exercise, ExerciseMcqData } from "utils/types"
+
+const props = defineProps<{ exercise: Exercise }>()
+const data = computed(() => props.exercise.data as ExerciseMcqData)
+
+const selected = ref<number | null>(null)
+const submitted = ref(false)
+
+function select(idx: number) {
+  if (!submitted.value) selected.value = idx
+}
+
+function submit() {
+  if (selected.value === null) return
+  submitted.value = true
+}
+
+function reset() {
+  selected.value = null
+  submitted.value = false
+}
+
+function optionType(idx: number): "default" | "success" | "error" {
+  if (!submitted.value) return "default"
+  if (idx === data.value.answer) return "success"
+  if (idx === selected.value) return "error"
+  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">练一练 · 选择题</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'"
+        :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="submitted"
+      :type="selected === data.answer ? 'success' : 'error'"
+      :title="selected === data.answer ? '正确！' : '不对，请看正确答案（绿色）'"
+      style="margin-top: 12px"
+    />
+
+    <n-space style="margin-top: 12px" :size="8">
+      <n-button
+        type="primary"
+        size="small"
+        :disabled="selected === null || submitted"
+        @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,121 @@
+<script setup lang="ts">
+import { Exercise, ExerciseSortData } from "utils/types"
+
+const props = defineProps<{ exercise: Exercise }>()
+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)
+  return isCorrect && a.length > 1 ? shuffle(arr) : 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
+}
+
+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()
+}
+</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',
+          fontSize: '13px',
+          userSelect: 'none',
+        }"
+        @dragstart="onDragStart(idx)"
+        @dragover.prevent
+        @drop="onDrop(idx)"
+      >
+        <span style="color: #bbb; cursor: grab">⠿</span>
+        <span>{{ line.text }}</span>
+      </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" @click="submit">
+        提交
+      </n-button>
+      <n-button size="small" @click="reset">重置</n-button>
+    </n-space>
+  </n-card>
+</template>

src/oj/learn/components/ExerciseWidget.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Exercise } from "utils/types"
+
+const ExerciseMcq = defineAsyncComponent(() => import("./ExerciseMcq.vue"))
+const ExerciseSort = defineAsyncComponent(() => import("./ExerciseSort.vue"))
+
+defineProps<{ exercise: Exercise }>()
+</script>
+
+<template>
+  <ExerciseMcq v-if="exercise.type === 'mcq'" :exercise="exercise" />
+  <ExerciseSort v-else-if="exercise.type === 'sort'" :exercise="exercise" />
+</template>

src/oj/learn/composables/useExerciseParse.ts

@@ -0,0 +1,31 @@
+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,15 @@
           :bordered="false"
           size="small"
         >
-          <MdPreview
+          <template v-for="(seg, i) in segments" :key="i">
-            preview-theme="vuepress"
+            <MdPreview
-            :theme="isDark ? 'dark' : 'light'"
+              v-if="seg.type === 'md'"
-            :model-value="tutorial.content"
+              preview-theme="vuepress"
-          />
+              :theme="isDark ? 'dark' : 'light'"
+              :model-value="seg.content"
+            />
+            <ExerciseWidget v-else :exercise="seg.exercise" />
+          </template>
         </n-card>
       </n-gi>
 
@@ -63,11 +67,15 @@
         </n-tab-pane>
 
         <n-tab-pane name="content" :tab="`第 ${step} 课`">
-          <MdPreview
+          <template v-for="(seg, i) in segments" :key="i">
-            preview-theme="vuepress"
+            <MdPreview
-            :theme="isDark ? 'dark' : 'light'"
+              v-if="seg.type === 'md'"
-            :model-value="tutorial.content"
+              preview-theme="vuepress"
-          />
+              :theme="isDark ? 'dark' : 'light'"
+              :model-value="seg.content"
+            />
+            <ExerciseWidget v-else :exercise="seg.exercise" />
+          </template>
         </n-tab-pane>
 
         <n-tab-pane name="code" tab="示例代码" v-if="tutorial.code">
@@ -78,21 +86,11 @@
       <n-divider style="margin: 12px 0" />
 
       <n-flex align="center" justify="space-between">
-        <n-button
+        <n-button secondary type="primary" :disabled="isFirstLesson" @click="goToPrevLesson">
-          secondary
-          type="primary"
-          :disabled="isFirstLesson"
-          @click="goToPrevLesson"
-        >
           ← 上一课
         </n-button>
         <n-text>{{ step }} / {{ titles.length }}</n-text>
-        <n-button
+        <n-button secondary type="primary" :disabled="isLastLesson" @click="goToNextLesson">
-          secondary
-          type="primary"
-          :disabled="isLastLesson"
-          @click="goToNextLesson"
-        >
           下一课 →
         </n-button>
       </n-flex>
@@ -103,56 +101,45 @@
 <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 ExerciseWidget = defineAsyncComponent(() => import("./components/ExerciseWidget.vue"))
+const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
+
 const isDark = useDark()
-
-const CodeEditor = defineAsyncComponent(
-  () => import("shared/components/CodeEditor.vue"),
-)
-
 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])
-    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")
 
+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 +147,15 @@ 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.all([getTutorial(id), getExercises(id)])
   tutorial.value = res2.data
+  exercises.value = exs
 }
 
 watch(
   () => route.params.step,
   async () => {
-    if (route.name !== "learn") return
+    if (route.name === "learn") init()
-    init()
   },
   { immediate: true },
 )

src/utils/types.ts

@@ -579,6 +579,24 @@ export interface Tutorial {
   created_at?: Date
 }
 
+export interface ExerciseMcqData {
+  question: string
+  options: string[]
+  answer: number
+}
+
+export interface ExerciseSortData {
+  question: string
+  lines: string[]
+}
+
+export interface Exercise {
+  id: number
+  type: 'mcq' | 'sort'
+  data: ExerciseMcqData | ExerciseSortData
+  order: number
+}
+
 export interface DurationData {
   unit: string
   index: number