From 4c47e9389b58e288b6dc4655dae443a1751138d1 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 22:27:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=87=AA=E5=AD=A6):=20=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E4=B8=8A=E3=80=8C=E4=BB=A3=E7=A0=81=E6=8E=92=E5=BA=8F=E3=80=8D?=
 =?UTF-8?q?=E3=80=8C=E5=88=86=E7=BB=84=E3=80=8D=E5=86=99=E6=98=8E=E5=85=88?=
 =?UTF-8?q?=E7=82=B9=E4=B8=80=E4=B8=8B=E3=80=81=E5=86=8D=E7=82=B9=E5=8E=BB?=
 =?UTF-8?q?=E5=A4=84=EF=BC=8C=E7=94=B5=E8=84=91=E4=B8=8A=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E4=BB=8D=E6=8F=90=E7=A4=BA=E6=8B=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/learn/components/ExerciseGroup.vue | 8 +++++++-
 apps/web/src/oj/learn/components/ExerciseSort.vue  | 7 ++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/oj/learn/components/ExerciseGroup.vue b/apps/web/src/oj/learn/components/ExerciseGroup.vue
index ebddaaf..b8b9403 100644
--- a/apps/web/src/oj/learn/components/ExerciseGroup.vue
+++ b/apps/web/src/oj/learn/components/ExerciseGroup.vue
@@ -2,6 +2,7 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseGroupData } from "utils/types"
 import { shuffle } from "../composables/useShuffle"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -9,6 +10,7 @@ const emit = defineEmits<{
 }>()
 
 const data = computed(() => props.exercise.data as ExerciseGroupData)
+const { isDesktop } = useBreakpoints()
 
 const order = ref<number[]>([]) // item 的稳定展示顺序（初始乱序）
 const placement = ref<number[]>([]) // placement[itemIdx] = 桶下标，-1 表示在池中
@@ -120,7 +122,11 @@ function reset() {
       {{ data.question }}
     </p>
     <p style="color: var(--learn-muted); font-size: 13px; margin: 0 0 12px">
-      把下面的项目拖到对应的分组里，也可以先点项目、再点分组。
+      {{
+        isDesktop
+          ? "把下面的项目拖到对应的分组里，可在分组间拖动调整。"
+          : "先点一个项目，再点它该去的分组。"
+      }}
     </p>
 
     <div
diff --git a/apps/web/src/oj/learn/components/ExerciseSort.vue b/apps/web/src/oj/learn/components/ExerciseSort.vue
index bd7a9a6..251e172 100644
--- a/apps/web/src/oj/learn/components/ExerciseSort.vue
+++ b/apps/web/src/oj/learn/components/ExerciseSort.vue
@@ -3,6 +3,7 @@ import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseSortData } from "utils/types"
 import { shuffle } from "../composables/useShuffle"
 import { highlightLines } from "shared/highlight"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -10,6 +11,7 @@ const emit = defineEmits<{
 }>()
 
 const data = computed(() => props.exercise.data as ExerciseSortData)
+const { isDesktop } = useBreakpoints()
 
 type LineItem = { originalIdx: number; text: string }
 
@@ -90,9 +92,12 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
 
 <template>
   <div>
-    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">
+    <p :style="{ fontWeight: 500, fontSize: '16px', marginBottom: isDesktop ? '12px' : '8px' }">
       {{ data.question }}
     </p>
+    <p v-if="!isDesktop" style="color: var(--learn-muted); font-size: 13px; margin: 0 0 12px">
+      先点一行，再点它该去的位置。
+    </p>
 
     <n-space vertical :size="6">
       <div