From 0e1784ba26ed6e212566eb5b2a6b150e0eba051b Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Mon, 12 Oct 2026 14:07:04 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E8=87=AA=E5=AD=A6):=20=E7=BB=83=E4=B8=80?= =?UTF-8?q?=E7=BB=83=E7=9A=84=E5=A1=AB=E7=A9=BA=E6=A1=86=E3=80=81=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E5=8D=A1=E7=89=87=E3=80=81=E8=BF=9E=E7=BA=BF=E9=A1=B9?= =?UTF-8?q?=E9=83=BD=E6=B2=A1=E6=9C=89=E8=BE=B9=E6=A1=86=EF=BC=8C=E5=A1=AB?= =?UTF-8?q?=E7=A9=BA=E9=A2=98=E7=9C=8B=E4=B8=8D=E5=87=BA=E7=A9=BA=E5=9C=A8?= =?UTF-8?q?=E5=93=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 填空、排序、找错、连线、分组、输出预测六种题的边框和底色写的是 --n-border-color、 --n-color、--n-text-color-3。这几个变量只在 Naive 组件内部才有，自学重设计把外层换成 自己的卡片之后就全没了：边框整个消失，填空题只剩一个看不见的输入框。 换成 learn.css 里自学自己的变量，补了一个可操作控件用的深一档边框和次要文字色， 亮暗两套都有。代码字体原来只写了 Monaco，机房 Windows 没有，换成 --learn-code-font。 顺手把填空框的上下内边距去掉，几行之间不再贴在一起。 Co-Authored-By: Claude Opus 5.5 --- apps/web/src/oj/learn/components/ExerciseDebug.vue | 8 ++++---- apps/web/src/oj/learn/components/ExerciseFill.vue | 12 ++++++------ apps/web/src/oj/learn/components/ExerciseGroup.vue | 14 +++++++------- apps/web/src/oj/learn/components/ExerciseMatch.vue | 10 +++++----- .../src/oj/learn/components/ExercisePredict.vue | 10 +++++----- apps/web/src/oj/learn/components/ExerciseSort.vue | 4 ++-- apps/web/src/oj/learn/learn.css | 4 ++++ 7 files changed, 33 insertions(+), 29 deletions(-) diff --git a/apps/web/src/oj/learn/components/ExerciseDebug.vue b/apps/web/src/oj/learn/components/ExerciseDebug.vue index e41efd0..a1bac3f 100644 --- a/apps/web/src/oj/learn/components/ExerciseDebug.vue +++ b/apps/web/src/oj/learn/components/ExerciseDebug.vue @@ -52,8 +52,8 @@ function lineStyle(i: number): Record { ? "#d03050" : status === "selected" ? "#2080f0" - : "var(--n-border-color)" - const plain = color === "var(--n-border-color)" + : "var(--learn-control-line)" + const plain = color === "var(--learn-control-line)" return { display: "flex", alignItems: "center", @@ -63,7 +63,7 @@ function lineStyle(i: number): Record { 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() {

{{ data.question }}

-

+

点击你认为有错误的代码行（可多选）。

diff --git a/apps/web/src/oj/learn/components/ExerciseFill.vue b/apps/web/src/oj/learn/components/ExerciseFill.vue index c616f51..18f39db 100644 --- a/apps/web/src/oj/learn/components/ExerciseFill.vue +++ b/apps/web/src/oj/learn/components/ExerciseFill.vue @@ -80,11 +80,11 @@ function inputWidth(idx: number): string { 
 {
   const status = itemStatus(i)
   const color =
-    status === "correct" ? "#18a058" : status === "wrong" ? "#d03050" : "var(--n-border-color)"
-  const plain = color === "var(--n-border-color)"
+    status === "correct" ? "#18a058" : status === "wrong" ? "#d03050" : "var(--learn-control-line)"
+  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() {
     

       {{ data.question }}
     

-    

+    

       把下面的项目拖到对应的分组里，可在分组间拖动调整。
     

 
@@ -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)"
     >
-      
+      
         （已全部归类）
       
       
 {
-  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 {
     

       {{ data.question }}
     

-    

+    

       先点左边一项，再点右边一项即可连线；点击已连线的项可取消。
     

 
diff --git a/apps/web/src/oj/learn/components/ExercisePredict.vue b/apps/web/src/oj/learn/components/ExercisePredict.vue
index cdb305a..a29d1a0 100644
--- a/apps/web/src/oj/learn/components/ExercisePredict.vue
+++ b/apps/web/src/oj/learn/components/ExercisePredict.vue
@@ -63,17 +63,17 @@ function reset() {
 
     

+    >

这段代码会输出什么？

(() => 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(() => 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)" diff --git a/apps/web/src/oj/learn/learn.css b/apps/web/src/oj/learn/learn.css index 8025afa..b8b756e 100644 --- a/apps/web/src/oj/learn/learn.css +++ b/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); }