add fills

src/oj/learn/components/ExerciseSort.vue

@@ -27,7 +27,9 @@ function shuffle(arr: LineItem[]): LineItem[] {
 }
 
 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
 }
 
@@ -55,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
@@ -72,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
       })
@@ -94,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>
@@ -127,7 +139,6 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
                 : 'transparent',
           cursor: 'grab',
           fontFamily: 'monospace',
-          fontSize: '13px',
           userSelect: 'none',
         }"
         @dragstart="onDragStart(idx)"
@@ -147,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>
@@ -158,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>