fix(自学): 练一练的填空框、拖拽卡片、连线项都没有边框，填空题看不出空在哪

填空、排序、找错、连线、分组、输出预测六种题的边框和底色写的是 --n-border-color、
--n-color、--n-text-color-3。这几个变量只在 Naive 组件内部才有，自学重设计把外层换成
自己的卡片之后就全没了：边框整个消失，填空题只剩一个看不见的输入框。

换成 learn.css 里自学自己的变量，补了一个可操作控件用的深一档边框和次要文字色，
亮暗两套都有。代码字体原来只写了 Monaco，机房 Windows 没有，换成 --learn-code-font。
顺手把填空框的上下内边距去掉，几行之间不再贴在一起。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/learn/components/ExerciseDebug.vue

@@ -52,8 +52,8 @@ function lineStyle(i: number): Record<string, string> {
         ? "#d03050"
         : status === "selected"
           ? "#2080f0"
-          : "var(--n-border-color)"
+          : "var(--learn-control-line)"
-  const plain = color === "var(--n-border-color)"
+  const plain = color === "var(--learn-control-line)"
   return {
     display: "flex",
     alignItems: "center",
@@ -63,7 +63,7 @@ function lineStyle(i: number): Record<string, string> {
     border: `1.5px solid ${color}`,
     background: plain ? "transparent" : color + "14",
     cursor: locked.value ? "default" : "pointer",
-    fontFamily: "Monaco",
+    fontFamily: "var(--learn-code-font)",
     userSelect: "none",
   }
 }
@@ -88,7 +88,7 @@ function reset() {
     <p style="font-weight: 500; font-size: 16px; margin-bottom: 8px">
       {{ data.question }}
     </p>
-    <p style="color: var(--n-text-color-3); font-size: 13px; margin: 0 0 12px">
+    <p style="color: var(--learn-muted); font-size: 13px; margin: 0 0 12px">
       点击你认为有错误的代码行（可多选）。
     </p>
 

apps/web/src/oj/learn/components/ExerciseFill.vue

@@ -80,11 +80,11 @@ function inputWidth(idx: number): string {
 
     <pre
       :style="{
-        fontFamily: 'Monaco',
+        fontFamily: 'var(--learn-code-font)',
         fontSize: '16px',
         lineHeight: '1.6',
-        background: 'var(--n-color)',
+        background: 'var(--learn-soft)',
-        border: '1px solid var(--n-border-color)',
+        border: '1px solid var(--learn-line)',
         borderRadius: '6px',
         padding: '12px',
         overflowX: 'auto',
@@ -98,16 +98,16 @@ function inputWidth(idx: number): string {
         :disabled="allCorrect"
         :style="{
           width: inputWidth(seg.index),
-          fontFamily: 'Monaco',
+          fontFamily: 'var(--learn-code-font)',
           fontSize: '16px',
-          padding: '2px 6px',
+          padding: '0 6px',
           borderRadius: '3px',
           border: `1.5px solid ${
             allCorrect
               ? '#18a058'
               : wrongBlanks.has(seg.index)
                 ? '#d03050'
-                : 'var(--n-border-color)'
+                : 'var(--learn-control-line)'
           }`,
           background: allCorrect
             ? 'rgba(24,160,88,0.08)'

apps/web/src/oj/learn/components/ExerciseGroup.vue

@@ -54,13 +54,13 @@ function itemStatus(i: number): "correct" | "wrong" | "default" {
 function chipStyle(i: number): Record<string, string> {
   const status = itemStatus(i)
   const color =
-    status === "correct" ? "#18a058" : status === "wrong" ? "#d03050" : "var(--n-border-color)"
+    status === "correct" ? "#18a058" : status === "wrong" ? "#d03050" : "var(--learn-control-line)"
-  const plain = color === "var(--n-border-color)"
+  const plain = color === "var(--learn-control-line)"
   return {
     padding: "6px 12px",
     borderRadius: "6px",
     border: `1.5px solid ${color}`,
-    background: plain ? "var(--n-color)" : color + "14",
+    background: plain ? "var(--learn-pane)" : color + "14",
     cursor: locked.value ? "default" : "grab",
     userSelect: "none",
     fontSize: "15px",
@@ -85,7 +85,7 @@ function reset() {
     <p style="font-weight: 500; font-size: 16px; margin-bottom: 8px">
       {{ data.question }}
     </p>
-    <p style="color: var(--n-text-color-3); font-size: 13px; margin: 0 0 12px">
+    <p style="color: var(--learn-muted); font-size: 13px; margin: 0 0 12px">
       把下面的项目拖到对应的分组里，可在分组间拖动调整。
     </p>
 
@@ -96,14 +96,14 @@ function reset() {
         gap: '8px',
         minHeight: '48px',
         padding: '10px',
-        border: '1.5px dashed var(--n-border-color)',
+        border: '1.5px dashed var(--learn-control-line)',
         borderRadius: '8px',
         marginBottom: '14px',
       }"
       @dragover.prevent
       @drop="dropTo(-1)"
     >
-      <span v-if="poolItems.length === 0" style="color: var(--n-text-color-3); font-size: 13px">
+      <span v-if="poolItems.length === 0" style="color: var(--learn-muted); font-size: 13px">
         （已全部归类）
       </span>
       <div
@@ -130,7 +130,7 @@ function reset() {
         :style="{
           minHeight: '88px',
           padding: '10px',
-          border: '1.5px solid var(--n-border-color)',
+          border: '1.5px solid var(--learn-control-line)',
           borderRadius: '8px',
         }"
         @dragover.prevent

apps/web/src/oj/learn/components/ExerciseMatch.vue

@@ -89,21 +89,21 @@ function leftColor(i: number): string {
   }
   if (selectedLeft.value === i) return "#2080f0"
   if (pairs.value[i] !== null) return PALETTE[i % PALETTE.length]
-  return "var(--n-border-color)"
+  return "var(--learn-control-line)"
 }
 
 function rightColor(rightIdx: number): string {
   const l = leftOf(rightIdx)
   if (submitted.value) {
-    if (l === -1) return "var(--n-border-color)"
+    if (l === -1) return "var(--learn-control-line)"
     return pairs.value[l] === data.value.answer[l] ? "#18a058" : "#d03050"
   }
-  if (l === -1) return "var(--n-border-color)"
+  if (l === -1) return "var(--learn-control-line)"
   return PALETTE[l % PALETTE.length]
 }
 
 function itemStyle(color: string, selected: boolean): Record<string, string> {
-  const plain = color === "var(--n-border-color)"
+  const plain = color === "var(--learn-control-line)"
   return {
     display: "flex",
     alignItems: "center",
@@ -134,7 +134,7 @@ function dotStyle(color: string): Record<string, string> {
     <p style="font-weight: 500; font-size: 16px; margin-bottom: 8px">
       {{ data.question }}
     </p>
-    <p style="color: var(--n-text-color-3); font-size: 13px; margin: 0 0 12px">
+    <p style="color: var(--learn-muted); font-size: 13px; margin: 0 0 12px">
       先点左边一项，再点右边一项即可连线；点击已连线的项可取消。
     </p>
 

apps/web/src/oj/learn/components/ExercisePredict.vue

@@ -63,17 +63,17 @@ function reset() {
 
     <pre
       :style="{
-        fontFamily: 'Monaco',
+        fontFamily: 'var(--learn-code-font)',
         fontSize: '16px',
         lineHeight: '1.6',
-        background: 'var(--n-color)',
+        background: 'var(--learn-soft)',
-        border: '1px solid var(--n-border-color)',
+        border: '1px solid var(--learn-line)',
         borderRadius: '6px',
         padding: '12px',
         overflowX: 'auto',
         margin: 0,
       }"
-    ><code v-html="codeHtml" /></pre>
+    ><code style="font-family: inherit" v-html="codeHtml" /></pre>
 
     <p style="font-weight: 500; margin: 14px 0 8px">这段代码会输出什么？</p>
     <n-input
@@ -82,7 +82,7 @@ function reset() {
       :rows="3"
       :disabled="submitted && allCorrect"
       placeholder="在这里输入程序会打印的内容"
-      style="font-family: Monaco"
+      style="font-family: var(--learn-code-font)"
     />
 
     <ExerciseResult

apps/web/src/oj/learn/components/ExerciseSort.vue

@@ -92,7 +92,7 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
               ? '#18a058'
               : lineStatus(idx) === 'wrong'
                 ? '#d03050'
-                : 'var(--n-border-color)'
+                : 'var(--learn-control-line)'
           }`,
           background:
             lineStatus(idx) === 'correct'
@@ -101,7 +101,7 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
                 ? 'rgba(208,48,80,0.07)'
                 : 'transparent',
           cursor: 'grab',
-          fontFamily: 'Monaco',
+          fontFamily: 'var(--learn-code-font)',
           userSelect: 'none',
         }"
         @dragstart="onDragStart(idx)"

apps/web/src/oj/learn/learn.css

@@ -10,6 +10,9 @@
   --learn-orange-bg: rgba(240, 160, 32, 0.14);
   --learn-red-text: #b0263c;
   --learn-line: rgba(128, 128, 128, 0.22);
+  /* 填空框、能拖能点的卡片：比 --learn-line 深一档，一眼看得出是能操作的 */
+  --learn-control-line: rgba(128, 128, 128, 0.45);
+  --learn-muted: #767c82;
   --learn-soft: rgba(128, 128, 128, 0.07);
   --learn-pane: #ffffff;
   --learn-todo: rgba(128, 128, 128, 0.22);
@@ -21,4 +24,5 @@ html.dark {
   --learn-orange-text: #f2c97d;
   --learn-red-text: #f08a9b;
   --learn-pane: rgba(255, 255, 255, 0.03);
+  --learn-muted: rgba(255, 255, 255, 0.45);
 }