fix(自学): 手机上代码折行看着像另起了一行，改回整行横着滑

正文的代码块、填空、排序、找错四处都不折行了，和桌面一样。排序和找错是整组一起滑，
每行卡片一样宽（= 最长那行）。题目页编辑器的折行不动。

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

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)

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%"
       >
+        <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="{ minWidth: 0, ...hangStyle(line) }" />
+          <span v-html="lineHtml[idx]" style="white-space: pre" />
+        </div>
+      </div>
     </div>
-    </n-space>
 
     <ExerciseResult
       v-if="submitted"

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

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,7 +99,11 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
       先点一行，再点它该去的位置。
     </p>
 
-    <n-space vertical :size="6">
+    <!-- 不折行：长行整组一起横着滚，每行一样宽（= 最长那行），和正文的代码块一样 -->
+    <div style="overflow-x: auto">
+      <div
+        style="display: flex; flex-direction: column; gap: 6px; width: max-content; min-width: 100%"
+      >
         <div
           v-for="(line, idx) in lines"
           :key="line.originalIdx"
@@ -139,12 +142,10 @@ const lineHtml = computed<string[]>(() => highlightLines(data.value.lines, props
           @click="onLineClick(idx)"
         >
           <span style="color: #bbb; cursor: grab">⠿</span>
-        <span
-          v-html="lineHtml[line.originalIdx]"
-          :style="{ minWidth: 0, ...hangStyle(line.text) }"
-        />
+          <span v-html="lineHtml[line.originalIdx]" style="white-space: pre" />
+        </div>
+      </div>
     </div>
-    </n-space>
 
     <ExerciseResult
       v-if="submitted"

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]