diff --git a/apps/web/src/oj/learn/components/CodeRunBlock.vue b/apps/web/src/oj/learn/components/CodeRunBlock.vue index 4f32afa..3aa3bee 100644 --- a/apps/web/src/oj/learn/components/CodeRunBlock.vue +++ b/apps/web/src/oj/learn/components/CodeRunBlock.vue @@ -10,6 +10,8 @@ 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 { useBreakpoints } from "shared/composables/breakpoints" const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue")) @@ -35,7 +37,12 @@ const message = useMessage() const { copy } = useClipboard({ legacy: true }) const original = computed(() => (props.wrapMain ? wrapMain(props.code) : props.code)) -const extensions = computed(() => (props.wrapMain ? mainWrapExtensions : [])) +const { isDesktop } = useBreakpoints() +// 手机上折行（见 hangIndent.ts）；桌面正文 720 宽，长行少，照旧横着滚 +const extensions = computed(() => [ + ...(props.wrapMain ? mainWrapExtensions : []), + ...(isDesktop.value ? [] : hangWrapExtensions), +]) 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 8b5a7a1..bc96d16 100644 --- a/apps/web/src/oj/learn/components/ExerciseDebug.vue +++ b/apps/web/src/oj/learn/components/ExerciseDebug.vue @@ -2,6 +2,7 @@ import ExerciseResult from "./ExerciseResult.vue" import type { Exercise, ExerciseDebugData } from "utils/types" import { highlightLines } from "shared/highlight" +import { hangStyle } from "../hangIndent" const props = defineProps<{ exercise: Exercise; lang?: string }>() const emit = defineEmits<{ @@ -93,7 +94,7 @@ function reset() {
{{ idx + 1 }} - +
diff --git a/apps/web/src/oj/learn/components/ExerciseFill.vue b/apps/web/src/oj/learn/components/ExerciseFill.vue index 2e7432a..776c34b 100644 --- a/apps/web/src/oj/learn/components/ExerciseFill.vue +++ b/apps/web/src/oj/learn/components/ExerciseFill.vue @@ -2,6 +2,7 @@ import ExerciseResult from "./ExerciseResult.vue" import type { Exercise, ExerciseFillData } from "utils/types" import { highlightWithHoles } from "shared/highlight" +import { hangStyle } from "../hangIndent" const props = defineProps<{ exercise: Exercise; lang?: string }>() const emit = defineEmits<{ @@ -37,6 +38,32 @@ const segments = computed(() => { ) }) +/** + * 按行切开，每行自己折行、悬挂缩进（见 hangIndent.ts）。原来整段 pre-wrap， + * 手机上行尾的注释折下来顶格，看着像另起了一行代码。 + * 高亮的 HTML 在换行处是断开的（见 shared/highlight.ts 的 walk），按 "\n" 切不会切坏标签。 + */ +const lines = computed(() => { + const rows: { indent: string; parts: Segment[] }[] = [{ indent: "", 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 (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 +}) + const blankCount = computed(() => segments.value.filter((s) => s.type === "blank").length) const userInputs = ref([]) const wrongBlanks = ref>(new Set()) @@ -78,52 +105,59 @@ function inputWidth(idx: number): string { {{ data.question }}

-
+ > +
+ +
+ -

这段代码会输出什么？

+ +

+ 这段代码会输出什么？ +

+
() const emit = defineEmits<{ @@ -140,7 +141,7 @@ const lineHtml = computed(() => highlightLines(data.value.lines, props ⠿
diff --git a/apps/web/src/oj/learn/components/LessonBody.vue b/apps/web/src/oj/learn/components/LessonBody.vue index 17625d4..93b79d6 100644 --- a/apps/web/src/oj/learn/components/LessonBody.vue +++ b/apps/web/src/oj/learn/components/LessonBody.vue @@ -66,6 +66,15 @@ function inline(text: string) { margin: 28px 0 12px; scroll-margin-top: 16px; } +/* 手机上四列的表会把每格挤成一两个字一行（「浮」「点」「数」）：给格子留个最小宽度、表头不折， + 放不下就整张横着滚（Markdown.vue 已经让表格自己滚） */ +.body :deep(.oj-markdown th), +.body :deep(.oj-markdown td) { + min-width: 4em; +} +.body :deep(.oj-markdown th) { + white-space: nowrap; +} .goals { margin: 4px 0 8px; padding: 12px 16px; diff --git a/apps/web/src/oj/learn/hangIndent.ts b/apps/web/src/oj/learn/hangIndent.ts new file mode 100644 index 0000000..7e7ee60 --- /dev/null +++ b/apps/web/src/oj/learn/hangIndent.ts @@ -0,0 +1,78 @@ +import { RangeSetBuilder } from "@codemirror/state" +import { + Decoration, + type DecorationSet, + EditorView, + ViewPlugin, + type ViewUpdate, +} from "@codemirror/view" + +/** + * 手机上代码折行。原来是横着滚，可没有滚动条也看不出右边还有， + * 综合练习那种长 print 整整半行看不见。折下来的那截缩到这一行的代码下面再进两格， + * 一眼看得出还是同一行。 + */ + +/** 行首空白占几格，tab 按 4 */ +function leadingWidth(text: string): number { + let width = 0 + for (const ch of text) { + if (ch === " ") width++ + else if (ch === "\t") width += 4 + else break + } + return width +} + +/** 静态的代码行（练一练的排序、找错、填空）：折行，接着的那截悬挂缩进 */ +export function hangStyle(text: string): Record { + const width = leadingWidth(text) + 2 + return { + whiteSpace: "pre-wrap", + // 中文连着的一串别从中间断（「类」「型」各在一行），实在放不下才随便断 + wordBreak: "keep-all", + overflowWrap: "anywhere", + paddingLeft: `${width}ch`, + textIndent: `-${width}ch`, + } +} + +function hangDecorations(view: EditorView): DecorationSet { + const builder = new RangeSetBuilder() + for (const { from, to } of view.visibleRanges) { + for (let pos = from; pos <= to;) { + const line = view.state.doc.lineAt(pos) + const width = leadingWidth(line.text) + 2 + // 6px 是 CodeMirror 给 .cm-line 的左内边距，盖掉了要补回来 + builder.add( + line.from, + line.from, + Decoration.line({ + attributes: { + style: `padding-left: calc(${width}ch + 6px); text-indent: -${width}ch; word-break: keep-all; overflow-wrap: anywhere`, + }, + }), + ) + pos = line.to + 1 + } + } + return builder.finish() +} + +const hangPlugin = ViewPlugin.fromClass( + class { + decorations: DecorationSet + constructor(view: EditorView) { + this.decorations = hangDecorations(view) + } + update(update: ViewUpdate) { + if (update.docChanged || update.viewportChanged) { + this.decorations = hangDecorations(update.view) + } + } + }, + { decorations: (plugin) => plugin.decorations }, +) + +/** 编辑器（正文里能运行的代码块）：折行 + 悬挂缩进 */ +export const hangWrapExtensions = [EditorView.lineWrapping, hangPlugin] diff --git a/apps/web/src/oj/learn/index.vue b/apps/web/src/oj/learn/index.vue index b29c091..cd61b80 100644 --- a/apps/web/src/oj/learn/index.vue +++ b/apps/web/src/oj/learn/index.vue @@ -138,7 +138,11 @@ async function init() { activeId.value = "" await nextTick() reader.value?.scrollTo({ top: 0 }) - if (!isDesktop.value) window.scrollTo({ top: 0 }) + // 手机上滚的是外层 n-layout 的容器，不是 window —— 原来 window.scrollTo 什么都没滚， + // 点「下一课」落在下一课的末尾 + if (!isDesktop.value) scroller()?.scrollTo({ top: 0 }) + pagerHidden.value = false + atEnd.value = false } watch( @@ -178,6 +182,51 @@ function onSolved(exerciseId: number) { progress.value = { ...progress.value, [id]: { ...row, exerciseSolved: solvedCount.value } } } +// ------------------------------------------------------------------ 手机底栏 +// 往下读时收起上一课 / 目录 / 下一课，往回翻再出来；读到课末也收着 —— +// 课末卡片里就有「下一课」，两个摆在一起是重复的 +const mobileRoot = ref(null) +const endRef = ref(null) +const pagerHidden = ref(false) +const atEnd = ref(false) + +/** 往上找真正在滚的那层。n-layout-content 自己也带 .n-layout-scroll-container 类却不滚，按类名找会找错 */ +function scroller(): HTMLElement | null { + for (let el = mobileRoot.value?.parentElement; el; el = el.parentElement) { + const overflow = getComputedStyle(el).overflowY + if ((overflow === "auto" || overflow === "scroll") && el.scrollHeight > el.clientHeight) { + return el + } + } + return null +} + +let lastTop = 0 +function onMobileScroll(event: Event) { + const box = event.target as HTMLElement + const top = box.scrollTop + if (top < 60) pagerHidden.value = false + else if (top > lastTop + 6) pagerHidden.value = true + else if (top < lastTop - 6) pagerHidden.value = false + lastTop = top + const end = endRef.value?.getBoundingClientRect().top + atEnd.value = end !== undefined && end < box.getBoundingClientRect().bottom +} + +// 滚动事件不冒泡，在 document 上用捕获拿，不用先找到容器再挂 +useEventListener( + document, + "scroll", + (event: Event) => { + const box = event.target + if (isDesktop.value || !(box instanceof HTMLElement)) return + // 只认包着本页的那层（目录抽屉、代码块里横着滚的不算） + if (!mobileRoot.value || !box.contains(mobileRoot.value)) return + onMobileScroll(event) + }, + { capture: true, passive: true }, +) + // ------------------------------------------------------------------ 读到哪一节 const reader = ref(null) const activeId = ref("") @@ -234,7 +283,9 @@ function jumpExercise(id: number) {
-
+ +
{{ tutorial.project }} · @@ -302,7 +353,7 @@ function jumpExercise(id: number) {
-
+
@@ -322,7 +373,7 @@ function jumpExercise(id: number) {
-
+
{{ tutorial.project }}

{{ parts.kp }}

{{ parts.scene }}
@@ -334,24 +385,26 @@ function jumpExercise(id: number) { :solved-ids="solvedIds" @solved="onSolved" /> - +
+ +
-