fix

2026-04-23 02:31:57 -06:00
parent 6331391792
commit 67a23c51c8
6 changed files with 115 additions and 52 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,8 +58,10 @@ provide("hljs", hljsInstance)
    :date-locale="dateZhCN"
    :hljs="hljsInstance"
  >
-    <n-message-provider>
-      <router-view></router-view>
-    </n-message-provider>
+    <n-dialog-provider>
+      <n-message-provider>
+        <router-view></router-view>
+      </n-message-provider>
+    </n-dialog-provider>
  </n-config-provider>
 </template>
--- a/src/admin/tutorial/components/ExerciseManager.vue
+++ b/src/admin/tutorial/components/ExerciseManager.vue
@@ -21,8 +21,7 @@ const mcqQuestion = ref("")
 const mcqOptions = ref(["", ""])
 const mcqAnswer = ref(0)

-const sortQuestion = ref("")
-const sortLines = ref(["", ""])
+const sortCode = ref("")

 async function load() {
  exercises.value = await getAdminExercises(props.tutorialId)
@@ -37,8 +36,7 @@ function openCreate() {
  mcqQuestion.value = ""
  mcqOptions.value = ["", ""]
  mcqAnswer.value = 0
-  sortQuestion.value = ""
-  sortLines.value = ["", ""]
+  sortCode.value = ""
  showForm.value = true
 }

@@ -53,8 +51,7 @@ function openEdit(ex: Exercise) {
    mcqAnswer.value = d.answer
  } else {
    const d = ex.data as ExerciseSortData
-    sortQuestion.value = d.question
-    sortLines.value = [...d.lines]
+    sortCode.value = d.lines.join("\n")
  }
  showForm.value = true
 }
@@ -63,7 +60,10 @@ async function save() {
  const data =
    formType.value === "mcq"
      ? { question: mcqQuestion.value, options: mcqOptions.value, answer: mcqAnswer.value }
-      : { question: sortQuestion.value, lines: sortLines.value }
+      : {
+          question: "将下列代码行排列为正确顺序",
+          lines: sortCode.value.split("\n").filter((l) => l.trim() !== ""),
+        }

  try {
    if (editingId.value) {
@@ -169,7 +169,7 @@ function typeName(type: string) {
                <n-radio
                  :value="i"
                  :checked="mcqAnswer === i"
-                  @update:checked="if ($event) mcqAnswer = i"
+                  @update:checked="$event && (mcqAnswer = i)"
                />
                <n-input
                  v-model:value="mcqOptions[i]"
@@ -190,27 +190,14 @@ function typeName(type: string) {
        </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 label="正确代码（每行将自动成为一道排序项）">
+            <n-input
+              v-model:value="sortCode"
+              type="textarea"
+              :rows="10"
+              placeholder="在此粘贴正确的代码，保存后将自动按行拆分并乱序"
+              style="font-family: monospace"
+            />
          </n-form-item>
        </template>
      </n-form>
--- a/src/oj/learn/components/ExerciseMcq.vue
+++ b/src/oj/learn/components/ExerciseMcq.vue
@@ -5,26 +5,35 @@ const props = defineProps<{ exercise: Exercise }>()
 const data = computed(() => props.exercise.data as ExerciseMcqData)

 const selected = ref<number | null>(null)
-const submitted = ref(false)
+const correct = ref(false)
+const wrong = ref(false)

 function select(idx: number) {
-  if (!submitted.value) selected.value = idx
+  if (correct.value) return
+  selected.value = idx
+  wrong.value = false
 }

 function submit() {
-  if (selected.value === null) return
-  submitted.value = true
+  if (selected.value === null || correct.value) return
+  if (selected.value === data.value.answer) {
+    correct.value = true
+    wrong.value = false
+  } else {
+    wrong.value = true
+    selected.value = null
+  }
 }

 function reset() {
  selected.value = null
-  submitted.value = false
+  correct.value = false
+  wrong.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"
+function optionType(idx: number): "default" | "primary" | "success" {
+  if (correct.value && idx === data.value.answer) return "success"
+  if (idx === selected.value) return "primary"
  return "default"
 }
 </script>
@@ -46,6 +55,7 @@ function optionType(idx: number): "default" | "success" | "error" {
        :type="optionType(idx)"
        :secondary="optionType(idx) !== 'default'"
        :tertiary="optionType(idx) === 'default'"
+        :strong="idx === selected"
        :style="{ justifyContent: 'flex-start', width: '100%', textAlign: 'left' }"
        @click="select(idx)"
      >
@@ -57,9 +67,9 @@ function optionType(idx: number): "default" | "success" | "error" {
    </n-space>

    <n-alert
-      v-if="submitted"
-      :type="selected === data.answer ? 'success' : 'error'"
-      :title="selected === data.answer ? '正确！' : '不对，请看正确答案（绿色）'"
+      v-if="correct || wrong"
+      :type="correct ? 'success' : 'error'"
+      :title="correct ? '正确！' : '选择有误，请重试'"
      style="margin-top: 12px"
    />

@@ -67,7 +77,7 @@ function optionType(idx: number): "default" | "success" | "error" {
      <n-button
        type="primary"
        size="small"
-        :disabled="selected === null || submitted"
+        :disabled="selected === null || correct"
        @click="submit"
      >
        提交
--- a/src/oj/learn/components/ExerciseSort.vue
+++ b/src/oj/learn/components/ExerciseSort.vue
@@ -1,7 +1,13 @@
 <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"

-const props = defineProps<{ exercise: Exercise }>()
+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 }
@@ -40,6 +46,7 @@ function onDrop(targetIdx: number) {
  newLines.splice(targetIdx, 0, moved)
  lines.value = newLines
  dragIdx.value = null
+  submitted.value = false
 }

 function lineStatus(idx: number): "correct" | "wrong" | "default" {
@@ -56,6 +63,33 @@ function submit() {
 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>
@@ -100,7 +134,7 @@ function reset() {
        @drop="onDrop(idx)"
      >
        <span style="color: #bbb; cursor: grab">⠿</span>
-        <span>{{ line.text }}</span>
+        <span v-html="lineHtmlMap[line.originalIdx]" style="white-space: pre" />
      </div>
    </n-space>

@@ -112,10 +146,40 @@ function reset() {
    />

    <n-space style="margin-top: 12px" :size="8">
-      <n-button type="info" size="small" :disabled="submitted" @click="submit">
+      <n-button type="info" size="small" :disabled="submitted && allCorrect" @click="submit">
        提交
      </n-button>
      <n-button size="small" @click="reset">重置</n-button>
    </n-space>
  </n-card>
 </template>
+
+<style>
+.hljs-keyword,
+.hljs-operator,
+.hljs-selector-tag { color: #d73a49; }
+.hljs-string,
+.hljs-regexp,
+.hljs-template-literal { color: #032f62; }
+.hljs-comment,
+.hljs-quote { color: #6a737d; font-style: italic; }
+.hljs-number,
+.hljs-literal { color: #005cc5; }
+.hljs-built_in,
+.hljs-title.function_,
+.hljs-class .hljs-title { color: #6f42c1; }
+
+.dark .hljs-keyword,
+.dark .hljs-operator,
+.dark .hljs-selector-tag { color: #c678dd; }
+.dark .hljs-string,
+.dark .hljs-regexp,
+.dark .hljs-template-literal { color: #98c379; }
+.dark .hljs-comment,
+.dark .hljs-quote { color: #7f848e; font-style: italic; }
+.dark .hljs-number,
+.dark .hljs-literal { color: #e5c07b; }
+.dark .hljs-built_in,
+.dark .hljs-title.function_,
+.dark .hljs-class .hljs-title { color: #61afef; }
+</style>
--- a/src/oj/learn/components/ExerciseWidget.vue
+++ b/src/oj/learn/components/ExerciseWidget.vue
@@ -4,10 +4,10 @@ import { Exercise } from "utils/types"
 const ExerciseMcq = defineAsyncComponent(() => import("./ExerciseMcq.vue"))
 const ExerciseSort = defineAsyncComponent(() => import("./ExerciseSort.vue"))

-defineProps<{ exercise: Exercise }>()
+defineProps<{ exercise: Exercise; lang?: string }>()
 </script>

 <template>
  <ExerciseMcq v-if="exercise.type === 'mcq'" :exercise="exercise" />
-  <ExerciseSort v-else-if="exercise.type === 'sort'" :exercise="exercise" />
+  <ExerciseSort v-else-if="exercise.type === 'sort'" :exercise="exercise" :lang="lang" />
 </template>
--- a/src/oj/learn/index.vue
+++ b/src/oj/learn/index.vue
@@ -34,7 +34,7 @@
              :theme="isDark ? 'dark' : 'light'"
              :model-value="seg.content"
            />
-            <ExerciseWidget v-else :exercise="seg.exercise" />
+            <ExerciseWidget v-else :exercise="seg.exercise" :lang="tutorial.type" />
          </template>
        </n-card>
      </n-gi>
@@ -74,7 +74,7 @@
              :theme="isDark ? 'dark' : 'light'"
              :model-value="seg.content"
            />
-            <ExerciseWidget v-else :exercise="seg.exercise" />
+            <ExerciseWidget v-else :exercise="seg.exercise" :lang="tutorial.type" />
          </template>
        </n-tab-pane>