From b4b96b0da3422bec5043d3528a9dfdc4a91a7255 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 4 Aug 2026 21:25:21 -0600
Subject: [PATCH] =?UTF-8?q?fix(learn):=20=E4=BF=AE=E5=A4=8D=E5=A1=AB?=
 =?UTF-8?q?=E7=A9=BA=E9=A2=98=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=EF=BC=8C=E5=8E=BB=E9=87=8D=E9=AB=98=E4=BA=AE=E4=B8=8E?=
 =?UTF-8?q?=E6=B4=97=E7=89=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ExerciseFill.vue 之前未导入 exercise-highlight.css，若某课只含
  fill 类型练习（不加载 ExerciseSort），高亮代码会渲染成无色纯文本
- ExerciseFill/ExerciseSort 改为复用 useCodeHighlight 的
  highlight()/highlightLines()，删除各自重复的 hljs 注册与
  escapeHtml 实现
- 新增 useShuffle.ts，供 ExerciseSort/ExerciseMatch/ExerciseGroup
  共用洗牌逻辑，替代三处几乎逐字相同的实现

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/oj/learn/components/ExerciseFill.vue  |  25 +----
 src/oj/learn/components/ExerciseGroup.vue |  10 +-
 src/oj/learn/components/ExerciseMatch.vue |  10 +-
 src/oj/learn/components/ExerciseSort.vue  | 114 +++-------------------
 src/oj/learn/composables/useShuffle.ts    |   9 ++
 5 files changed, 28 insertions(+), 140 deletions(-)
 create mode 100644 src/oj/learn/composables/useShuffle.ts

diff --git a/src/oj/learn/components/ExerciseFill.vue b/src/oj/learn/components/ExerciseFill.vue
index 34aba3f..9979ec3 100644
--- a/src/oj/learn/components/ExerciseFill.vue
+++ b/src/oj/learn/components/ExerciseFill.vue
@@ -1,11 +1,7 @@
 <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 type { Exercise, ExerciseFillData } from "utils/types"
-
-hljs.registerLanguage("python", python)
-hljs.registerLanguage("c", c)
+import { highlight } from "../composables/useCodeHighlight"
+import "./exercise-highlight.css"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const data = computed(() => props.exercise.data as ExerciseFillData)
@@ -14,10 +10,6 @@ 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) => {
@@ -25,18 +17,7 @@ const segments = computed<Segment[]>(() => {
     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 highlighted = highlight(markedCode, props.lang)
 
   const parts = highlighted.split(/____(\d+)____/)
   const result: Segment[] = []
diff --git a/src/oj/learn/components/ExerciseGroup.vue b/src/oj/learn/components/ExerciseGroup.vue
index cf64de4..70c4cc0 100644
--- a/src/oj/learn/components/ExerciseGroup.vue
+++ b/src/oj/learn/components/ExerciseGroup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Exercise, ExerciseGroupData } from "utils/types"
+import { shuffle } from "../composables/useShuffle"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const data = computed(() => props.exercise.data as ExerciseGroupData)
@@ -9,15 +10,6 @@ const placement = ref<number[]>([]) // placement[itemIdx] = 桶下标，-1 表
 const dragIdx = ref<number | null>(null)
 const submitted = ref(false)
 
-function shuffle<T>(arr: T[]): T[] {
-  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]]
-  }
-  return a
-}
-
 function init() {
   order.value = shuffle(data.value.items.map((_, i) => i))
   placement.value = Array(data.value.items.length).fill(-1)
diff --git a/src/oj/learn/components/ExerciseMatch.vue b/src/oj/learn/components/ExerciseMatch.vue
index e632e31..6dbc673 100644
--- a/src/oj/learn/components/ExerciseMatch.vue
+++ b/src/oj/learn/components/ExerciseMatch.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Exercise, ExerciseMatchData } from "utils/types"
+import { shuffle } from "../composables/useShuffle"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const data = computed(() => props.exercise.data as ExerciseMatchData)
@@ -20,15 +21,6 @@ const pairs = ref<(number | null)[]>([]) // pairs[leftIdx] = 配对的 right 原
 const selectedLeft = ref<number | null>(null)
 const submitted = ref(false)
 
-function shuffle<T>(arr: T[]): T[] {
-  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]]
-  }
-  return a
-}
-
 function init() {
   const n = data.value.right.length
   rightOrder.value = shuffle(Array.from({ length: n }, (_, i) => i))
diff --git a/src/oj/learn/components/ExerciseSort.vue b/src/oj/learn/components/ExerciseSort.vue
index a2322ea..cfa1d88 100644
--- a/src/oj/learn/components/ExerciseSort.vue
+++ b/src/oj/learn/components/ExerciseSort.vue
@@ -1,11 +1,8 @@
 <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 type { Exercise, ExerciseSortData } from "utils/types"
-
-hljs.registerLanguage("python", python)
-hljs.registerLanguage("c", c)
+import { shuffle } from "../composables/useShuffle"
+import { highlightLines } from "../composables/useCodeHighlight"
+import "./exercise-highlight.css"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const data = computed(() => props.exercise.data as ExerciseSortData)
@@ -15,21 +12,16 @@ 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(
+  const shuffled = shuffle(
     data.value.lines.map((text, idx) => ({ originalIdx: idx, text })),
   )
+  // 打乱后若恰好与原顺序一致，交换前两项，避免一进入就是已解出状态
+  const isCorrect = shuffled.every((item, i) => item.originalIdx === i)
+  if (isCorrect && shuffled.length > 1) {
+    ;[shuffled[0], shuffled[1]] = [shuffled[1], shuffled[0]]
+  }
+  lines.value = shuffled
   submitted.value = false
 }
 
@@ -69,35 +61,9 @@ 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
-})
+const lineHtml = computed<string[]>(() =>
+  highlightLines(data.value.lines, props.lang),
+)
 </script>
 
 <template>
@@ -143,7 +109,7 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
         @drop="onDrop(idx)"
       >
         <span style="color: #bbb; cursor: grab">⠿</span>
-        <span v-html="lineHtmlMap[line.originalIdx]" style="white-space: pre" />
+        <span v-html="lineHtml[line.originalIdx]" style="white-space: pre" />
       </div>
     </n-space>
 
@@ -162,55 +128,3 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
     </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>
diff --git a/src/oj/learn/composables/useShuffle.ts b/src/oj/learn/composables/useShuffle.ts
new file mode 100644
index 0000000..9b77a45
--- /dev/null
+++ b/src/oj/learn/composables/useShuffle.ts
@@ -0,0 +1,9 @@
+// Fisher–Yates 洗牌，返回新数组，不修改原数组
+export function shuffle<T>(arr: T[]): T[] {
+  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]]
+  }
+  return a
+}