From 7e68e1137152ff95c2a0e5f60f7a23ef4b77338a Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 22:56:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A2=98=E7=9B=AE=E9=A1=B5):=20=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E4=B8=8A=E5=86=99=E4=BB=A3=E7=A0=81=E9=A1=BA=E6=89=8B?=
 =?UTF-8?q?=E5=A4=9A=E4=BA=86=EF=BC=9A=E9=94=AE=E7=9B=98=E4=B8=8A=E9=9D=A2?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=80=E6=8E=92=E5=B8=B8=E7=94=A8=E7=AC=A6=E5=8F=B7?=
 =?UTF-8?q?=EF=BC=88=E6=8B=AC=E5=8F=B7=E3=80=81=E5=BC=95=E5=8F=B7=E3=80=81?=
 =?UTF-8?q?=E5=86=92=E5=8F=B7=E3=80=81=E7=BC=A9=E8=BF=9B=E2=80=A6=E7=82=B9?=
 =?UTF-8?q?=E4=B8=80=E4=B8=8B=E5=B0=B1=E8=BF=9B=E5=8E=BB=EF=BC=8C=E6=8B=AC?=
 =?UTF-8?q?=E5=8F=B7=E8=87=AA=E5=8A=A8=E9=85=8D=E5=AF=B9=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=AD=97=E5=8F=B7=E6=94=B9=E5=B0=8F=E3=80=81?=
 =?UTF-8?q?=E9=95=BF=E8=A1=8C=E6=8A=98=E8=A1=8C=E4=B8=8D=E5=86=8D=E7=9C=8B?=
 =?UTF-8?q?=E4=B8=8D=E8=A7=81=E5=8F=B3=E5=8D=8A=E6=88=AA=EF=BC=9B=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E8=BE=93=E5=87=BA=E8=AF=B4=E6=98=8E=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=8E=92=E3=80=81=E4=BE=8B=E5=AD=90=E4=B8=8D=E5=86=8D=E8=A2=AB?=
 =?UTF-8?q?=E5=B7=A6=E8=BE=B9=E4=B8=A4=E5=88=97=E6=A0=87=E7=AD=BE=E6=8C=A4?=
 =?UTF-8?q?=E7=AA=84=EF=BC=9B=E9=A2=98=E5=8D=95=E9=87=8C=E9=82=A3=E6=9D=A1?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E8=B6=85=E5=87=BA=E5=B1=8F=E5=B9=95?=
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  |   2 +-
 .../src/oj/learn/components/ExerciseDebug.vue |   2 +-
 .../src/oj/learn/components/ExerciseFill.vue  |   2 +-
 .../src/oj/learn/components/ExerciseSort.vue  |   2 +-
 .../src/oj/problem/components/ContextBar.vue  |   7 +-
 .../oj/problem/components/MobileActionBar.vue |   4 +-
 .../oj/problem/components/ProblemContent.vue  |  45 +++++++-
 .../oj/problem/components/ProblemEditor.vue   |  10 +-
 .../src/oj/problem/components/SymbolKeys.vue  | 108 ++++++++++++++++++
 apps/web/src/oj/problem/detail.vue            |   2 +
 apps/web/src/oj/problem/utils/errorMark.ts    |   5 +
 apps/web/src/oj/problem/utils/symbolKeys.ts   |  75 ++++++++++++
 .../learn => shared/extensions}/hangIndent.ts |  14 ++-
 13 files changed, 262 insertions(+), 16 deletions(-)
 create mode 100644 apps/web/src/oj/problem/components/SymbolKeys.vue
 create mode 100644 apps/web/src/oj/problem/utils/symbolKeys.ts
 rename apps/web/src/{oj/learn => shared/extensions}/hangIndent.ts (72%)

diff --git a/apps/web/src/oj/learn/components/CodeRunBlock.vue b/apps/web/src/oj/learn/components/CodeRunBlock.vue
index 3aa3bee..295adde 100644
--- a/apps/web/src/oj/learn/components/CodeRunBlock.vue
+++ b/apps/web/src/oj/learn/components/CodeRunBlock.vue
@@ -10,7 +10,7 @@ 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 "../hangIndent"
+import { hangWrapExtensions } from "shared/extensions/hangIndent"
 import { useBreakpoints } from "shared/composables/breakpoints"
 
 const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
diff --git a/apps/web/src/oj/learn/components/ExerciseDebug.vue b/apps/web/src/oj/learn/components/ExerciseDebug.vue
index bc96d16..ae9936d 100644
--- a/apps/web/src/oj/learn/components/ExerciseDebug.vue
+++ b/apps/web/src/oj/learn/components/ExerciseDebug.vue
@@ -2,7 +2,7 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseDebugData } from "utils/types"
 import { highlightLines } from "shared/highlight"
-import { hangStyle } from "../hangIndent"
+import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
diff --git a/apps/web/src/oj/learn/components/ExerciseFill.vue b/apps/web/src/oj/learn/components/ExerciseFill.vue
index 776c34b..bc717ff 100644
--- a/apps/web/src/oj/learn/components/ExerciseFill.vue
+++ b/apps/web/src/oj/learn/components/ExerciseFill.vue
@@ -2,7 +2,7 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseFillData } from "utils/types"
 import { highlightWithHoles } from "shared/highlight"
-import { hangStyle } from "../hangIndent"
+import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
diff --git a/apps/web/src/oj/learn/components/ExerciseSort.vue b/apps/web/src/oj/learn/components/ExerciseSort.vue
index 1620e07..758b225 100644
--- a/apps/web/src/oj/learn/components/ExerciseSort.vue
+++ b/apps/web/src/oj/learn/components/ExerciseSort.vue
@@ -4,7 +4,7 @@ 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 "../hangIndent"
+import { hangStyle } from "shared/extensions/hangIndent"
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
diff --git a/apps/web/src/oj/problem/components/ContextBar.vue b/apps/web/src/oj/problem/components/ContextBar.vue
index c47257f..6359980 100644
--- a/apps/web/src/oj/problem/components/ContextBar.vue
+++ b/apps/web/src/oj/problem/components/ContextBar.vue
@@ -311,7 +311,8 @@ onSolvedHere(() => {
     <router-link :to="setBar.home" class="back set-back" :title="`回到题单：${setBar.title}`">
       ‹ {{ setBar.title }}
     </router-link>
-    <div v-if="setBar.joined" class="set-progress" aria-hidden="true">
+    <!-- 手机上一排放不下题单名 + 进度条 + 做完几道 + 两个大箭头，进度条让掉，「做完 x/y」还在 -->
+    <div v-if="setBar.joined && !isMobile" class="set-progress" aria-hidden="true">
       <div class="set-progress-fill" :style="{ width: `${setBar.percentage}%` }" />
     </div>
     <span v-if="setBar.joined" class="meta">
@@ -319,7 +320,9 @@ onSolvedHere(() => {
       <template v-if="setBar.position"> · 第 {{ setBar.position }} 题</template>
     </span>
     <template v-else>
-      <span class="meta">还没加入，在这里做对了不算进度</span>
+      <span class="meta">{{
+        isMobile ? "没加入，不算进度" : "还没加入，在这里做对了不算进度"
+      }}</span>
       <n-button size="tiny" type="primary" :loading="joiningSet" @click="joinHere"
         >加入题单</n-button
       >
diff --git a/apps/web/src/oj/problem/components/MobileActionBar.vue b/apps/web/src/oj/problem/components/MobileActionBar.vue
index 66c08ce..eecba1b 100644
--- a/apps/web/src/oj/problem/components/MobileActionBar.vue
+++ b/apps/web/src/oj/problem/components/MobileActionBar.vue
@@ -5,6 +5,7 @@ import { useCodeStore } from "oj/store/code"
 import { useProblemStore } from "oj/store/problem"
 import { useSubmissionStore } from "oj/store/submission"
 import SubmitCode from "./SubmitCode.vue"
+import { editorFocused } from "../utils/symbolKeys"
 
 const SubmitFlowchart = defineAsyncComponent(() => import("./SubmitFlowchart.vue"))
 
@@ -29,7 +30,8 @@ const canRunSamples = computed(
 </script>
 
 <template>
-  <div class="mobile-actions">
+  <!-- 写代码时（键盘弹着）让位给符号键：两条都贴底会叠在一起，安卓上还会被键盘顶上来 -->
+  <div v-show="!editorFocused" class="mobile-actions">
     <n-button
       v-if="canRunSamples"
       size="large"
diff --git a/apps/web/src/oj/problem/components/ProblemContent.vue b/apps/web/src/oj/problem/components/ProblemContent.vue
index 8b969de..caf27af 100644
--- a/apps/web/src/oj/problem/components/ProblemContent.vue
+++ b/apps/web/src/oj/problem/components/ProblemContent.vue
@@ -154,10 +154,16 @@ const sampleTextWidth = computed(() => {
 
 const sampleTable = useTemplateRef<HTMLElement>("sampleTable")
 const { width: sampleTableWidth } = useElementSize(sampleTable)
+/**
+ * 窄（手机，或桌面左栏拖到最窄）：「例子 N」不占一列，改成每个例子头上一行小字。
+ * 390 宽的手机上那一列连同间距要吃掉 64px，框只剩一半多
+ */
+const sampleNarrow = computed(() => sampleTableWidth.value > 0 && sampleTableWidth.value < 480)
 /** 摆成表时，半格里留给文字的宽度 */
 const sampleHalfWidth = computed(
   () =>
-    (sampleTableWidth.value - SAMPLE_NO_W - SAMPLE_GAP * 2) / 2 -
+    (sampleTableWidth.value - (sampleNarrow.value ? 0 : SAMPLE_NO_W + SAMPLE_GAP) - SAMPLE_GAP) /
+      2 -
     SAMPLE_PAD_L -
     SAMPLE_PAD_R -
     SAMPLE_COPY_W,
@@ -179,7 +185,7 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
 </script>
 
 <template>
-  <div v-if="problem">
+  <div v-if="problem" class="problem-content">
     <header class="problem-head">
       <div class="title-row">
         <span class="pid">{{ problem._id }}</span>
@@ -329,12 +335,12 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
         <div
           ref="sampleTable"
           class="sample-table"
-          :class="{ stacked: samplesStacked }"
+          :class="{ stacked: samplesStacked, narrow: sampleNarrow }"
           role="table"
           aria-label="例子"
         >
           <div v-if="!samplesStacked" class="sample-row" role="row">
-            <span role="columnheader"></span>
+            <span v-if="!sampleNarrow" role="columnheader"></span>
             <span role="columnheader" class="sample-label">输入</span>
             <span role="columnheader" class="sample-label">输出</span>
           </div>
@@ -437,6 +443,10 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   margin: 0;
 }
 
+.problem-content {
+  container: problem-content / inline-size;
+}
+
 .block-link {
   margin-left: auto;
 }
@@ -460,6 +470,13 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   gap: 16px;
 }
 
+/* 窄的时候输入、输出上下排：并排的话长一点的说明挤成一字两行的窄条，旁边一栏空着 */
+@container problem-content (max-width: 480px) {
+  .io {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 /* 语法要求：一行的浅绿框，硬性的判定条件，放在最前面 */
 .requirements {
   padding: 8px 12px;
@@ -584,6 +601,26 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   line-height: 1.5;
 }
 
+/* 窄：「例子 N」占满一行当小标题，下面输入、输出（并排或上下排） */
+.narrow .sample-row {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.narrow.stacked .sample-row {
+  grid-template-columns: 32px minmax(0, 1fr);
+}
+
+.narrow .sample-no,
+.narrow.stacked .sample-no {
+  grid-column: 1 / -1;
+  grid-row: auto;
+  padding-top: 4px;
+}
+
+.sample-table.narrow {
+  gap: 10px;
+}
+
 .sample-cell {
   min-width: 0;
   display: flex;
diff --git a/apps/web/src/oj/problem/components/ProblemEditor.vue b/apps/web/src/oj/problem/components/ProblemEditor.vue
index 1616096..c3b890b 100644
--- a/apps/web/src/oj/problem/components/ProblemEditor.vue
+++ b/apps/web/src/oj/problem/components/ProblemEditor.vue
@@ -10,6 +10,8 @@ import storage from "utils/storage"
 import type { LANGUAGE } from "utils/types"
 import { beginEditTrace, editTraceExtensions } from "oj/problem/utils/editTrace"
 import { errorMarkExtensions } from "oj/problem/utils/errorMark"
+import { editorFocusTracker } from "oj/problem/utils/symbolKeys"
+import { hangWrapExtensions } from "shared/extensions/hangIndent"
 import EditorToolbar from "./EditorToolbar.vue"
 import { useDraftKey } from "../composables/draftKey"
 import { useCollabHere, useTeacherCollab } from "../composables/teacherCollab"
@@ -85,8 +87,11 @@ watch(
 
 const { isDesktop } = useBreakpoints()
 
-// 拼一次、留同一个数组：每次渲染新建会让编辑器反复重配扩展
-const editorExtensions = [...editTraceExtensions, ...errorMarkExtensions]
+// 拼一次、留同一个数组：每次渲染新建会让编辑器反复重配扩展。
+// 手机上另加折行（20px 一行只放得下二十来个字，长行看不见右半截）
+const desktopExtensions = [...editTraceExtensions, ...errorMarkExtensions, editorFocusTracker]
+const mobileExtensions = [...desktopExtensions, ...hangWrapExtensions]
+const editorExtensions = computed(() => (isDesktop.value ? desktopExtensions : mobileExtensions))
 
 const contestID = route.params.contestID || null
 // 草稿存在哪个键下（题单入口单独一份），和「重置代码」共用一份算法
@@ -223,6 +228,7 @@ onBeforeUnmount(() => flowchartStore.attachEditor(null))
       :collab="ctx.collab"
       :height="editorHeight"
       :extra-extensions="editorExtensions"
+      :font-size="isDesktop ? 20 : 15"
       @update:model-value="changeCode"
     />
   </div>
diff --git a/apps/web/src/oj/problem/components/SymbolKeys.vue b/apps/web/src/oj/problem/components/SymbolKeys.vue
new file mode 100644
index 0000000..79d8082
--- /dev/null
+++ b/apps/web/src/oj/problem/components/SymbolKeys.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { useCodeStore } from "oj/store/code"
+import { editorFocused, SYMBOL_KEYS, typeSymbol } from "../utils/symbolKeys"
+
+/**
+ * 手机上贴着键盘顶的一排符号键，编辑器有焦点（键盘弹着）时才出来。
+ *
+ * 位置按 visualViewport 算：iOS 弹键盘时布局视口不变，position: fixed; bottom: 0 的东西
+ * 会被键盘盖住，只有可视视口的底边才是键盘的上沿。
+ * 按下时 preventDefault：不抢编辑器的焦点，键盘不收起来。
+ */
+const theme = useThemeVars()
+const codeStore = useCodeStore()
+
+const keys = computed(() => {
+  const language = codeStore.code.language
+  if (language === "SQL") return SYMBOL_KEYS.sql
+  if (language === "Python") return SYMBOL_KEYS.python
+  if (language === "C" || language === "C++") return SYMBOL_KEYS.c
+  return []
+})
+
+const BAR_HEIGHT = 44
+const top = ref<number | null>(null)
+
+function place() {
+  const viewport = window.visualViewport
+  top.value = viewport ? viewport.offsetTop + viewport.height - BAR_HEIGHT : null
+}
+
+useEventListener(() => window.visualViewport, "resize", place)
+useEventListener(() => window.visualViewport, "scroll", place)
+watch(editorFocused, (focused) => focused && place(), { immediate: true })
+// 键盘弹着时点了别处换题、离开页面，编辑器直接卸载，不一定等得到失焦
+onBeforeUnmount(() => {
+  editorFocused.value = false
+})
+</script>
+
+<template>
+  <div
+    v-if="editorFocused && keys.length"
+    class="symbol-keys"
+    :style="top === null ? { bottom: '0px' } : { top: `${top}px` }"
+    role="toolbar"
+    aria-label="常用符号"
+  >
+    <button
+      v-for="key in keys"
+      :key="key.label"
+      type="button"
+      class="key"
+      :class="{ wide: key.label.length > 1 }"
+      @pointerdown.prevent
+      @mousedown.prevent
+      @click="typeSymbol(key)"
+    >
+      {{ key.label }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.symbol-keys {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  height: 44px;
+  box-sizing: border-box;
+  padding: 5px 8px;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  background-color: v-bind("theme.bodyColor");
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.symbol-keys::-webkit-scrollbar {
+  display: none;
+}
+
+.key {
+  flex: none;
+  min-width: 36px;
+  height: 34px;
+  padding: 0 6px;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  border-radius: 6px;
+  background-color: rgba(128, 128, 128, 0.06);
+  font-family: Consolas, Monaco, monospace;
+  font-size: 17px;
+  color: inherit;
+  touch-action: manipulation;
+}
+
+.key.wide {
+  font-family: inherit;
+  font-size: 14px;
+  padding: 0 10px;
+}
+
+.key:active {
+  background-color: rgba(24, 160, 88, 0.15);
+}
+</style>
diff --git a/apps/web/src/oj/problem/detail.vue b/apps/web/src/oj/problem/detail.vue
index 2d250c6..1cabfc1 100644
--- a/apps/web/src/oj/problem/detail.vue
+++ b/apps/web/src/oj/problem/detail.vue
@@ -34,6 +34,7 @@ const ProblemContent = defineAsyncComponent(() => import("./components/ProblemCo
 const ProblemDrawer = defineAsyncComponent(() => import("./components/ProblemDrawer.vue"))
 const ResultPane = defineAsyncComponent(() => import("./components/ResultPane.vue"))
 const MobileActionBar = defineAsyncComponent(() => import("./components/MobileActionBar.vue"))
+const SymbolKeys = defineAsyncComponent(() => import("./components/SymbolKeys.vue"))
 
 interface Props {
   problemID: string
@@ -386,6 +387,7 @@ onBeforeUnmount(() => {
       </n-tabs>
       <ProblemDrawer v-model="drawer" />
       <MobileActionBar />
+      <SymbolKeys />
     </div>
   </template>
   <NotFound
diff --git a/apps/web/src/oj/problem/utils/errorMark.ts b/apps/web/src/oj/problem/utils/errorMark.ts
index c489c3a..2948e36 100644
--- a/apps/web/src/oj/problem/utils/errorMark.ts
+++ b/apps/web/src/oj/problem/utils/errorMark.ts
@@ -107,6 +107,11 @@ const theme = EditorView.baseTheme({
 
 export const errorMarkExtensions = [markField, punctuationField, tracker, theme]
 
+/** 题目页主编辑器（没挂着就是 null）。手机上的符号键往它里面插字 */
+export function currentEditorView(): EditorView | null {
+  return current
+}
+
 /** 标出这些中文标点（位置是整篇代码里的偏移，来自 findChinesePunctuation） */
 export function showPunctuationMarks(fixes: PunctuationFix[]) {
   current?.dispatch({ effects: setPunctuation.of(fixes) })
diff --git a/apps/web/src/oj/problem/utils/symbolKeys.ts b/apps/web/src/oj/problem/utils/symbolKeys.ts
new file mode 100644
index 0000000..2c18bcd
--- /dev/null
+++ b/apps/web/src/oj/problem/utils/symbolKeys.ts
@@ -0,0 +1,75 @@
+import { insertBracket } from "@codemirror/autocomplete"
+import { EditorView } from "@codemirror/view"
+import { ref } from "vue"
+import { currentEditorView } from "./errorMark"
+
+/**
+ * 手机上写代码的符号键（SymbolKeys.vue）。括号、引号、冒号在手机键盘上都要切到符号页，
+ * 一行 print(int(input())) 来回切七八次。
+ */
+
+/** 题目页主编辑器有没有焦点 —— 有焦点就是键盘弹着，这时才摆符号键 */
+export const editorFocused = ref(false)
+
+export const editorFocusTracker = EditorView.focusChangeEffect.of((_state, focusing) => {
+  editorFocused.value = focusing
+  return null
+})
+
+export interface SymbolKey {
+  label: string
+  /** 插进去的字；不写就是 label */
+  text?: string
+}
+
+const INDENT: SymbolKey = { label: "缩进", text: "    " }
+
+/** 按语言给一排：最常用的在前，放不下的往右滑 */
+export const SYMBOL_KEYS: Record<"python" | "c" | "sql", SymbolKey[]> = {
+  python: [
+    INDENT,
+    ...["(", ")", '"', ":", "=", "[", "]", ",", "'", "+", "-", "*", "/", "%", "<", ">", "#"].map(
+      (label) => ({ label }),
+    ),
+  ],
+  c: [
+    INDENT,
+    ...[
+      "(",
+      ")",
+      ";",
+      '"',
+      "{",
+      "}",
+      "=",
+      "%",
+      "&",
+      "[",
+      "]",
+      ",",
+      "+",
+      "-",
+      "*",
+      "/",
+      "<",
+      ">",
+    ].map((label) => ({ label })),
+  ],
+  sql: ["(", ")", "'", ",", "*", "=", ";", "<", ">", "%"].map((label) => ({ label })),
+}
+
+/**
+ * 在光标处插一个键。括号、引号走 CodeMirror 自己的配对规则（和键盘上敲是一样的：
+ * 敲「(」补上「)」、光标前正好是「)」时敲「)」是跳过去），别的原样插。
+ */
+export function typeSymbol(key: SymbolKey) {
+  const view = currentEditorView()
+  if (!view) return
+  const text = key.text ?? key.label
+  const bracket = text.length === 1 ? insertBracket(view.state, text) : null
+  view.dispatch(
+    bracket ?? view.state.update(view.state.replaceSelection(text), { userEvent: "input.type" }),
+  )
+  view.dispatch({ effects: EditorView.scrollIntoView(view.state.selection.main.head) })
+  view.focus()
+}
diff --git a/apps/web/src/oj/learn/hangIndent.ts b/apps/web/src/shared/extensions/hangIndent.ts
similarity index 72%
rename from apps/web/src/oj/learn/hangIndent.ts
rename to apps/web/src/shared/extensions/hangIndent.ts
index 7e7ee60..faa18b5 100644
--- a/apps/web/src/oj/learn/hangIndent.ts
+++ b/apps/web/src/shared/extensions/hangIndent.ts
@@ -8,9 +8,9 @@ import {
 } from "@codemirror/view"
 
 /**
- * 手机上代码折行。原来是横着滚，可没有滚动条也看不出右边还有，
- * 综合练习那种长 print 整整半行看不见。折下来的那截缩到这一行的代码下面再进两格，
- * 一眼看得出还是同一行。
+ * 手机上代码折行（自学的代码块和练一练、题目页的编辑器）。原来是横着滚，可没有滚动条
+ * 也看不出右边还有，自学综合练习那种长 print 整整半行看不见。折下来的那截缩到这一行的
+ * 代码下面再进两格，一眼看得出还是同一行。
  */
 
 /** 行首空白占几格，tab 按 4 */
@@ -37,6 +37,8 @@ export function hangStyle(text: string): Record<string, string> {
   }
 }
 
+const glue = Decoration.mark({ attributes: { style: "white-space: nowrap" } })
+
 function hangDecorations(view: EditorView): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>()
   for (const { from, to } of view.visibleRanges) {
@@ -53,6 +55,12 @@ function hangDecorations(view: EditorView): DecorationSet {
           },
         }),
       )
+      // 行首缩进后面紧跟一长串没空格的（printf("%d",a*100+b*10+c);），浏览器会在缩进后面折，
+      // 第一行只剩一截空白。把缩进和第一个字粘成不折的一段，长串就接在缩进后面再折
+      const indent = line.text.match(/^[ \t]+/)?.[0].length ?? 0
+      if (indent > 0 && indent < line.length) {
+        builder.add(line.from, line.from + indent + 1, glue)
+      }
       pos = line.to + 1
     }
   }