From 395be1a19b2e27e90bb17ab0324e0ba40aff301e Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 15 Oct 2026 13:39:27 +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=E4=BB=A3=E7=A0=81=E6=8A=98=E8=A1=8C=E7=9C=8B=E7=9D=80?=
 =?UTF-8?q?=E5=83=8F=E5=8F=A6=E8=B5=B7=E4=BA=86=E4=B8=80=E8=A1=8C=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B9=E5=9B=9E=E6=95=B4=E8=A1=8C=E6=A8=AA=E7=9D=80=E6=BB=91?=
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>
---
 .../src/oj/learn/components/CodeRunBlock.vue  | 10 +--
 .../src/oj/learn/components/ExerciseDebug.vue | 21 +++--
 .../src/oj/learn/components/ExerciseFill.vue  | 22 ++---
 .../src/oj/learn/components/ExerciseSort.vue  | 87 ++++++++++---------
 apps/web/src/shared/extensions/hangIndent.ts  | 21 +----
 5 files changed, 65 insertions(+), 96 deletions(-)

diff --git a/apps/web/src/oj/learn/components/CodeRunBlock.vue b/apps/web/src/oj/learn/components/CodeRunBlock.vue
index 295adde..85fcd9c 100644
--- a/apps/web/src/oj/learn/components/CodeRunBlock.vue
+++ b/apps/web/src/oj/learn/components/CodeRunBlock.vue
@@ -10,8 +10,6 @@ import { explainRuntimeError } from "oj/problem/utils/runtimeError"
 import { useAuthModalStore } from "shared/store/authModal"
 import { useUserStore } from "shared/store/user"
 import { mainWrapExtensions, wrapMain } from "../wrapMain"
-import { hangWrapExtensions } from "shared/extensions/hangIndent"
-import { useBreakpoints } from "shared/composables/breakpoints"
 
 const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
 
@@ -37,12 +35,8 @@ const message = useMessage()
 const { copy } = useClipboard({ legacy: true })
 
 const original = computed(() => (props.wrapMain ? wrapMain(props.code) : props.code))
-const { isDesktop } = useBreakpoints()
-// 手机上折行（见 hangIndent.ts）；桌面正文 720 宽，长行少，照旧横着滚
-const extensions = computed(() => [
-  ...(props.wrapMain ? mainWrapExtensions : []),
-  ...(isDesktop.value ? [] : hangWrapExtensions),
-])
+// 手机上也不折行，长行横着滚：折下来的那截看着像另起了一行代码
+const extensions = computed(() => (props.wrapMain ? mainWrapExtensions : []))
 const value = ref(original.value)
 const input = ref("")
 const running = ref(false)
diff --git a/apps/web/src/oj/learn/components/ExerciseDebug.vue b/apps/web/src/oj/learn/components/ExerciseDebug.vue
index ae9936d..7bbcf0a 100644
--- a/apps/web/src/oj/learn/components/ExerciseDebug.vue
+++ b/apps/web/src/oj/learn/components/ExerciseDebug.vue
@@ -2,7 +2,6 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseDebugData } from "utils/types"
 import { highlightLines } from "shared/highlight"
-import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -92,19 +91,19 @@ function reset() {
       点击你认为有错误的代码行（可多选）。
     </p>
 
-    <n-space vertical :size="6">
+    <!-- 不折行：长行整组一起横着滚，每行一样宽（= 最长那行），和正文的代码块一样 -->
+    <div style="overflow-x: auto">
       <div
-        v-for="(line, idx) in data.lines"
-        :key="idx"
-        :style="lineStyle(idx)"
-        @click="toggle(idx)"
+        style="display: flex; flex-direction: column; gap: 6px; width: max-content; min-width: 100%"
       >
-        <span style="color: #bbb; width: 22px; text-align: right; flex-shrink: 0">
-          {{ idx + 1 }}
-        </span>
-        <span v-html="lineHtml[idx]" :style="{ minWidth: 0, ...hangStyle(line) }" />
+        <div v-for="(_, idx) in data.lines" :key="idx" :style="lineStyle(idx)" @click="toggle(idx)">
+          <span style="color: #bbb; width: 22px; text-align: right; flex-shrink: 0">
+            {{ idx + 1 }}
+          </span>
+          <span v-html="lineHtml[idx]" style="white-space: pre" />
+        </div>
       </div>
-    </n-space>
+    </div>
 
     <ExerciseResult
       v-if="submitted"
diff --git a/apps/web/src/oj/learn/components/ExerciseFill.vue b/apps/web/src/oj/learn/components/ExerciseFill.vue
index bc717ff..029b120 100644
--- a/apps/web/src/oj/learn/components/ExerciseFill.vue
+++ b/apps/web/src/oj/learn/components/ExerciseFill.vue
@@ -2,7 +2,6 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseFillData } from "utils/types"
 import { highlightWithHoles } from "shared/highlight"
-import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -39,28 +38,21 @@ const segments = computed<Segment[]>(() => {
 })
 
 /**
- * 按行切开，每行自己折行、悬挂缩进（见 hangIndent.ts）。原来整段 pre-wrap，
- * 手机上行尾的注释折下来顶格，看着像另起了一行代码。
+ * 按行切开，一行一个块；不折行，长行整块横着滚（和正文的代码块一样）。
  * 高亮的 HTML 在换行处是断开的（见 shared/highlight.ts 的 walk），按 "\n" 切不会切坏标签。
  */
 const lines = computed(() => {
-  const rows: { indent: string; parts: Segment[] }[] = [{ indent: "", parts: [] }]
+  const rows: { parts: Segment[] }[] = [{ parts: [] }]
   for (const seg of segments.value) {
     if (seg.type === "blank") {
       rows[rows.length - 1].parts.push(seg)
       continue
     }
     seg.html.split("\n").forEach((html, i) => {
-      if (i > 0) rows.push({ indent: "", parts: [] })
+      if (i > 0) rows.push({ parts: [] })
       if (html) rows[rows.length - 1].parts.push({ type: "code", html })
     })
   }
-  for (const row of rows) {
-    const first = row.parts[0]
-    if (first?.type === "code") {
-      row.indent = first.html.replace(/<[^>]*>/g, "").match(/^[ \t]*/)![0]
-    }
-  }
   return rows
 })
 
@@ -114,13 +106,10 @@ function inputWidth(idx: number): string {
         border: '1px solid var(--learn-line)',
         borderRadius: '6px',
         padding: '10px 12px',
+        overflowX: 'auto',
       }"
     >
-      <div
-        v-for="(row, r) in lines"
-        :key="r"
-        :style="{ minHeight: '1.9em', ...hangStyle(row.indent) }"
-      >
+      <div v-for="(row, r) in lines" :key="r" style="min-height: 1.9em; white-space: pre">
         <template v-for="(seg, i) in row.parts" :key="i"
           ><span v-if="seg.type === 'code'" v-html="seg.html" /><input
             v-else
@@ -136,7 +125,6 @@ function inputWidth(idx: number): string {
               fontSize: '16px',
               lineHeight: '1.4',
               padding: '2px 6px',
-              textIndent: 0,
               borderRadius: '4px',
               border: `1.5px solid ${
                 allCorrect
diff --git a/apps/web/src/oj/learn/components/ExerciseSort.vue b/apps/web/src/oj/learn/components/ExerciseSort.vue
index 758b225..aa149a2 100644
--- a/apps/web/src/oj/learn/components/ExerciseSort.vue
+++ b/apps/web/src/oj/learn/components/ExerciseSort.vue
@@ -4,7 +4,6 @@ import type { Exercise, ExerciseSortData } from "utils/types"
 import { shuffle } from "../composables/useShuffle"
 import { highlightLines } from "shared/highlight"
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -100,51 +99,53 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
       先点一行，再点它该去的位置。
     </p>
 
-    <n-space vertical :size="6">
+    <!-- 不折行：长行整组一起横着滚，每行一样宽（= 最长那行），和正文的代码块一样 -->
+    <div style="overflow-x: auto">
       <div
-        v-for="(line, idx) in lines"
-        :key="line.originalIdx"
-        draggable="true"
-        :style="{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px',
-          padding: '8px 12px',
-          borderRadius: '6px',
-          border:
-            pickedIdx === idx
-              ? '2px solid #2080f0'
-              : `1.5px ${submitted ? 'solid' : 'dashed'} ${
-                  lineStatus(idx) === 'correct'
-                    ? '#18a058'
-                    : lineStatus(idx) === 'wrong'
-                      ? '#d03050'
-                      : 'var(--learn-control-line)'
-                }`,
-          background:
-            pickedIdx === idx
-              ? 'rgba(32,128,240,0.08)'
-              : lineStatus(idx) === 'correct'
-                ? 'rgba(24,160,88,0.08)'
-                : lineStatus(idx) === 'wrong'
-                  ? 'rgba(208,48,80,0.07)'
-                  : 'transparent',
-          cursor: 'grab',
-          fontFamily: 'var(--learn-code-font)',
-          userSelect: 'none',
-        }"
-        @dragstart="onDragStart(idx)"
-        @dragover.prevent
-        @drop="onDrop(idx)"
-        @click="onLineClick(idx)"
+        style="display: flex; flex-direction: column; gap: 6px; width: max-content; min-width: 100%"
       >
-        <span style="color: #bbb; cursor: grab">⠿</span>
-        <span
-          v-html="lineHtml[line.originalIdx]"
-          :style="{ minWidth: 0, ...hangStyle(line.text) }"
-        />
+        <div
+          v-for="(line, idx) in lines"
+          :key="line.originalIdx"
+          draggable="true"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '8px 12px',
+            borderRadius: '6px',
+            border:
+              pickedIdx === idx
+                ? '2px solid #2080f0'
+                : `1.5px ${submitted ? 'solid' : 'dashed'} ${
+                    lineStatus(idx) === 'correct'
+                      ? '#18a058'
+                      : lineStatus(idx) === 'wrong'
+                        ? '#d03050'
+                        : 'var(--learn-control-line)'
+                  }`,
+            background:
+              pickedIdx === idx
+                ? 'rgba(32,128,240,0.08)'
+                : lineStatus(idx) === 'correct'
+                  ? 'rgba(24,160,88,0.08)'
+                  : lineStatus(idx) === 'wrong'
+                    ? 'rgba(208,48,80,0.07)'
+                    : 'transparent',
+            cursor: 'grab',
+            fontFamily: 'var(--learn-code-font)',
+            userSelect: 'none',
+          }"
+          @dragstart="onDragStart(idx)"
+          @dragover.prevent
+          @drop="onDrop(idx)"
+          @click="onLineClick(idx)"
+        >
+          <span style="color: #bbb; cursor: grab">⠿</span>
+          <span v-html="lineHtml[line.originalIdx]" style="white-space: pre" />
+        </div>
       </div>
-    </n-space>
+    </div>
 
     <ExerciseResult
       v-if="submitted"
diff --git a/apps/web/src/shared/extensions/hangIndent.ts b/apps/web/src/shared/extensions/hangIndent.ts
index faa18b5..0046e2f 100644
--- a/apps/web/src/shared/extensions/hangIndent.ts
+++ b/apps/web/src/shared/extensions/hangIndent.ts
@@ -8,9 +8,9 @@ import {
 } from "@codemirror/view"
 
 /**
- * 手机上代码折行（自学的代码块和练一练、题目页的编辑器）。原来是横着滚，可没有滚动条
- * 也看不出右边还有，自学综合练习那种长 print 整整半行看不见。折下来的那截缩到这一行的
- * 代码下面再进两格，一眼看得出还是同一行。
+ * 手机上代码折行（题目页的编辑器）。原来是横着滚，可没有滚动条也看不出右边还有。
+ * 折下来的那截缩到这一行的代码下面再进两格，一眼看得出还是同一行。
+ * 自学的代码块和练一练也这么折过，用户嫌不好看，又改回横着滚了。
  */
 
 /** 行首空白占几格，tab 按 4 */
@@ -24,19 +24,6 @@ function leadingWidth(text: string): number {
   return width
 }
 
-/** 静态的代码行（练一练的排序、找错、填空）：折行，接着的那截悬挂缩进 */
-export function hangStyle(text: string): Record<string, string> {
-  const width = leadingWidth(text) + 2
-  return {
-    whiteSpace: "pre-wrap",
-    // 中文连着的一串别从中间断（「类」「型」各在一行），实在放不下才随便断
-    wordBreak: "keep-all",
-    overflowWrap: "anywhere",
-    paddingLeft: `${width}ch`,
-    textIndent: `-${width}ch`,
-  }
-}
-
 const glue = Decoration.mark({ attributes: { style: "white-space: nowrap" } })
 
 function hangDecorations(view: EditorView): DecorationSet {
@@ -82,5 +69,5 @@ const hangPlugin = ViewPlugin.fromClass(
   { decorations: (plugin) => plugin.decorations },
 )
 
-/** 编辑器（正文里能运行的代码块）：折行 + 悬挂缩进 */
+/** 编辑器：折行 + 悬挂缩进 */
 export const hangWrapExtensions = [EditorView.lineWrapping, hangPlugin]