From a5d5c39411d6f204a3e145639ebae5769818944a Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 15 Oct 2026 12:36:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=89=8B=E6=9C=BA):=20=E6=94=B6=E8=B5=B7?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E5=90=8E=E3=80=8C=E6=8F=90=E4=BA=A4=E3=80=8D?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=B8=8D=E5=9B=9E=E6=9D=A5=EF=BC=9B=E6=AF=94?=
 =?UTF-8?q?=E8=B5=9B=E9=A2=86=E5=A5=96=E5=8F=B0=E7=AC=AC=E4=B8=80=E5=90=8D?=
 =?UTF-8?q?=E8=A2=AB=E6=8C=A4=E5=87=BA=E5=B1=8F=E5=B9=95=EF=BC=9BiPhone=20?=
 =?UTF-8?q?=E7=82=B9=E8=BE=93=E5=85=A5=E6=A1=86=E6=95=B4=E9=A1=B5=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 题目页：安卓按返回键收键盘时编辑器不失焦，符号键一直贴底、「运行例子 / 提交」不回来。
  改成看键盘真弹着没有（可视视口变矮），不只看焦点
- 比赛排名：结束后的领奖台三块共 646px，手机上第一名被切掉、第三名看不见；改成平分一行
- iPhone：点 14/15px 的输入框和代码编辑器，Safari 会整页放大且不缩回；只给 iOS 加 maximum-scale=1
- 登录：手机上选完班不再自动聚焦搜索框（键盘弹出来盖住半张名单）
- 题单：窄屏上题目拆成两张没标题的卡片，像分了两组；放不下两栏时合成一张
- 「中等」在题目页是蓝色、在题目列表是橙色，统一成橙色
- 零碎：自学四列表格在 360 宽上收窄格子；统计「错得最多的题」表头不再挤成竖排；
  「第 N 名」「14 道」不再把最后一个字甩到下一行

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/main.ts                          | 14 +++++
 apps/web/src/oj/ai/components/StatStrip.vue   |  7 ++-
 apps/web/src/oj/contest/pages/rank.vue        | 53 +++++++++++++++++--
 .../src/oj/learn/components/LessonBody.vue    |  8 +++
 .../oj/problem/components/MobileActionBar.vue |  7 +--
 .../src/oj/problem/components/SymbolKeys.vue  | 24 +++++++--
 apps/web/src/oj/problem/utils/symbolKeys.ts   | 33 +++++++++++-
 apps/web/src/oj/problemset/detail.vue         | 17 +++---
 apps/web/src/oj/rank/components/RankMe.vue    |  5 +-
 .../src/oj/statistics/components/Lessons.vue  | 11 ++++
 apps/web/src/shared/components/Login.vue      | 19 +++++--
 apps/web/src/utils/functions.ts               |  7 +--
 12 files changed, 177 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
index dc193b9..e1b1cbf 100644
--- a/apps/web/src/main.ts
+++ b/apps/web/src/main.ts
@@ -8,6 +8,20 @@ import storage from "utils/storage"
 import App from "./App.vue"
 import { admins, ojs } from "./routes"
 
+/**
+ * iPhone 上点进字号小于 16px 的输入框（Naive 的输入框是 14px、代码编辑器 15px），
+ * Safari 会自动把整页放大，而且退出输入也不缩回去，得学生自己双指缩。
+ * maximum-scale=1 能关掉这个自动放大；iOS 10 起照样允许双指缩放，所以只给 iOS 加 ——
+ * 安卓上这么写会真的禁掉双指放大，看题面图片、代码就没法放大了。
+ */
+const isIOS =
+  /iPhone|iPad|iPod/.test(navigator.userAgent) ||
+  (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+if (isIOS) {
+  const viewport = document.querySelector('meta[name="viewport"]')
+  viewport?.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1")
+}
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [ojs, admins],
diff --git a/apps/web/src/oj/ai/components/StatStrip.vue b/apps/web/src/oj/ai/components/StatStrip.vue
index 11513d8..5f07e40 100644
--- a/apps/web/src/oj/ai/components/StatStrip.vue
+++ b/apps/web/src/oj/ai/components/StatStrip.vue
@@ -20,7 +20,12 @@ const cells = computed(() => {
   const percent = r.solved ? Math.round((r.firstTry / r.solved) * 100) : 0
   const firstSub = `一次就对 · 占 ${percent}%`
   const list: Cell[] = [
-    { big: r.solved, unit: "道", sub: c ? `做对 · 班上中间那位 ${c.medianSolved} 道` : "做对" },
+    // 数和「道」之间用不换行空格：手机上两列挤，单个「道」会被甩到下一行
+    {
+      big: r.solved,
+      unit: "道",
+      sub: c ? `做对 · 班上中间那位 ${c.medianSolved}\u00a0道` : "做对",
+    },
     {
       big: r.firstTry,
       unit: "道",
diff --git a/apps/web/src/oj/contest/pages/rank.vue b/apps/web/src/oj/contest/pages/rank.vue
index 48b04ce..c1a16aa 100644
--- a/apps/web/src/oj/contest/pages/rank.vue
+++ b/apps/web/src/oj/contest/pages/rank.vue
@@ -137,9 +137,13 @@ const columns = computed(
           </svg>
           <template v-if="podium[place - 1]">
             <UserName class="podium-name" :username="podium[place - 1]!.username" />
-            <span class="muted small">
-              {{ classLabel(podium[place - 1]!.className) }} · {{ podium[place - 1]!.solved }} 道 ·
-              {{ secondsToDuration(podium[place - 1]!.totalTime) }}
+            <span class="muted small podium-meta">
+              <span>{{ classLabel(podium[place - 1]!.className) }}</span
+              ><span class="sep"> · </span
+              ><span
+                >{{ podium[place - 1]!.solved }} 道 ·
+                {{ secondsToDuration(podium[place - 1]!.totalTime) }}</span
+              >
             </span>
           </template>
           <div class="block">{{ place }}</div>
@@ -534,4 +538,47 @@ const columns = computed(
 .empty {
   padding: 32px var(--oj-pad-x);
 }
+
+/* 手机：三级台阶一共 646px 宽，原样摆第一名就被挤到屏幕外了。三块平分一行，
+   名字截断、班级和用时折成两行 */
+@media (max-width: 640px) {
+  .podium-row {
+    gap: 16px;
+  }
+
+  .podium {
+    width: 100%;
+    gap: 6px;
+  }
+
+  .step {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+
+  .podium-name,
+  .p1 .podium-name {
+    font-size: 15px;
+    max-width: 100%;
+  }
+
+  .podium-meta {
+    font-size: var(--oj-fs-meta);
+    text-align: center;
+  }
+
+  .podium-meta > span {
+    display: block;
+    white-space: nowrap;
+  }
+
+  .podium-meta > .sep {
+    display: none;
+  }
+
+  .mine {
+    width: 100%;
+  }
+}
 </style>
diff --git a/apps/web/src/oj/learn/components/LessonBody.vue b/apps/web/src/oj/learn/components/LessonBody.vue
index 93b79d6..cee0894 100644
--- a/apps/web/src/oj/learn/components/LessonBody.vue
+++ b/apps/web/src/oj/learn/components/LessonBody.vue
@@ -75,6 +75,14 @@ function inline(text: string) {
 .body :deep(.oj-markdown th) {
   white-space: nowrap;
 }
+/* 360 宽的安卓机上四列表差三十来像素，最后一列被切掉、得横着滑才看得到：格子收窄一点 */
+@media (max-width: 480px) {
+  .body :deep(.oj-markdown th),
+  .body :deep(.oj-markdown td) {
+    min-width: 3.5em;
+    padding: 6px 8px;
+  }
+}
 .goals {
   margin: 4px 0 8px;
   padding: 12px 16px;
diff --git a/apps/web/src/oj/problem/components/MobileActionBar.vue b/apps/web/src/oj/problem/components/MobileActionBar.vue
index eecba1b..293f10b 100644
--- a/apps/web/src/oj/problem/components/MobileActionBar.vue
+++ b/apps/web/src/oj/problem/components/MobileActionBar.vue
@@ -5,7 +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"
+import { typing } from "../utils/symbolKeys"
 
 const SubmitFlowchart = defineAsyncComponent(() => import("./SubmitFlowchart.vue"))
 
@@ -30,8 +30,9 @@ const canRunSamples = computed(
 </script>
 
 <template>
-  <!-- 写代码时（键盘弹着）让位给符号键：两条都贴底会叠在一起，安卓上还会被键盘顶上来 -->
-  <div v-show="!editorFocused" class="mobile-actions">
+  <!-- 写代码时（键盘弹着）让位给符号键：两条都贴底会叠在一起，安卓上还会被键盘顶上来。
+       按返回键收了键盘、编辑器还有焦点时要回来，所以看 typing 不看焦点 -->
+  <div v-show="!typing" class="mobile-actions">
     <n-button
       v-if="canRunSamples"
       size="large"
diff --git a/apps/web/src/oj/problem/components/SymbolKeys.vue b/apps/web/src/oj/problem/components/SymbolKeys.vue
index 79d8082..289c451 100644
--- a/apps/web/src/oj/problem/components/SymbolKeys.vue
+++ b/apps/web/src/oj/problem/components/SymbolKeys.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { useThemeVars } from "naive-ui"
 import { useCodeStore } from "oj/store/code"
-import { editorFocused, SYMBOL_KEYS, typeSymbol } from "../utils/symbolKeys"
+import {
+  editorFocused,
+  measureKeyboard,
+  SYMBOL_KEYS,
+  typeSymbol,
+  typing,
+} from "../utils/symbolKeys"
 
 /**
  * 手机上贴着键盘顶的一排符号键，编辑器有焦点（键盘弹着）时才出来。
@@ -29,9 +35,19 @@ function place() {
   top.value = viewport ? viewport.offsetTop + viewport.height - BAR_HEIGHT : null
 }
 
-useEventListener(() => window.visualViewport, "resize", place)
+// 键盘弹起之前就得量出「没键盘时多高」，所以挂上就量
+onMounted(measureKeyboard)
+useEventListener("resize", measureKeyboard)
+useEventListener(
+  () => window.visualViewport,
+  "resize",
+  () => {
+    measureKeyboard()
+    place()
+  },
+)
 useEventListener(() => window.visualViewport, "scroll", place)
-watch(editorFocused, (focused) => focused && place(), { immediate: true })
+watch(typing, (on) => on && place(), { immediate: true })
 // 键盘弹着时点了别处换题、离开页面，编辑器直接卸载，不一定等得到失焦
 onBeforeUnmount(() => {
   editorFocused.value = false
@@ -40,7 +56,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    v-if="editorFocused && keys.length"
+    v-if="typing && keys.length"
     class="symbol-keys"
     :style="top === null ? { bottom: '0px' } : { top: `${top}px` }"
     role="toolbar"
diff --git a/apps/web/src/oj/problem/utils/symbolKeys.ts b/apps/web/src/oj/problem/utils/symbolKeys.ts
index 2c18bcd..da67d61 100644
--- a/apps/web/src/oj/problem/utils/symbolKeys.ts
+++ b/apps/web/src/oj/problem/utils/symbolKeys.ts
@@ -1,6 +1,6 @@
 import { insertBracket } from "@codemirror/autocomplete"
 import { EditorView } from "@codemirror/view"
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { currentEditorView } from "./errorMark"
 
 /**
@@ -8,7 +8,7 @@ import { currentEditorView } from "./errorMark"
  * 一行 print(int(input())) 来回切七八次。
  */
 
-/** 题目页主编辑器有没有焦点 —— 有焦点就是键盘弹着，这时才摆符号键 */
+/** 题目页主编辑器有没有焦点 */
 export const editorFocused = ref(false)
 
 export const editorFocusTracker = EditorView.focusChangeEffect.of((_state, focusing) => {
@@ -16,6 +16,35 @@ export const editorFocusTracker = EditorView.focusChangeEffect.of((_state, focus
   return null
 })
 
+/**
+ * 软键盘是不是弹着。光看焦点不够：安卓按返回键收键盘，编辑器**不失焦**，
+ * 符号键就一直贴在屏幕底下，「运行例子 / 提交」也不回来，学生找不到地方交。
+ *
+ * 键盘弹起时可视视口变矮（iOS 和 Chrome 108+ 布局视口不变；更老的安卓连
+ * innerHeight 一起变矮），所以和这个宽度下见过的最高值比。宽度变了（转屏）重新量。
+ * 乘 scale 是为了双指放大时别误判成键盘弹着。
+ */
+const keyboardUp = ref(false)
+let baseline = 0
+let baselineWidth = 0
+
+export function measureKeyboard() {
+  const viewport = window.visualViewport
+  if (!viewport) return
+  if (window.innerWidth !== baselineWidth) {
+    baselineWidth = window.innerWidth
+    baseline = 0
+  }
+  const visible = viewport.height * viewport.scale
+  baseline = Math.max(baseline, window.innerHeight, visible)
+  keyboardUp.value = visible < baseline - 120
+}
+
+/** 正在打字：编辑器有焦点、键盘也弹着。这时才摆符号键，底栏让位 */
+export const typing = computed(
+  () => editorFocused.value && (!window.visualViewport || keyboardUp.value),
+)
+
 export interface SymbolKey {
   label: string
   /** 插进去的字；不写就是 label */
diff --git a/apps/web/src/oj/problemset/detail.vue b/apps/web/src/oj/problemset/detail.vue
index 5830be9..4871918 100644
--- a/apps/web/src/oj/problemset/detail.vue
+++ b/apps/web/src/oj/problemset/detail.vue
@@ -83,7 +83,12 @@ const spent = computed(() => {
   return `${Math.round(minutes / 1440)} 天`
 })
 
+// 两栏放得下（每栏 420 起）才拆；拆完在窄屏上叠起来，就成了两张没有标题的卡片，
+// 看着像题单分了两组
+const twoColumns = useMediaQuery("(min-width: 960px)")
+
 const columns = computed(() => {
+  if (!twoColumns.value) return [problems.value]
   const half = Math.ceil(problems.value.length / 2)
   return [problems.value.slice(0, half), problems.value.slice(half)].filter((col) => col.length)
 })
@@ -232,7 +237,7 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
     <ClassView v-if="userStore.isTeacherOrAbove && tab === 'class'" :problem-set-id="set.id" />
 
     <template v-else>
-      <div v-if="problems.length" class="cols">
+      <div v-if="problems.length" class="cols" :class="{ two: twoColumns }">
         <section v-for="(col, ci) in columns" :key="ci" class="card list">
           <component
             :is="canOpen ? 'router-link' : 'div'"
@@ -461,11 +466,15 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
 
 .cols {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   align-items: start;
 }
 
+.cols.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .card {
   border: 1px solid v-bind("theme.borderColor");
   border-radius: var(--oj-radius);
@@ -622,10 +631,6 @@ a.prow:hover {
 }
 
 @media (max-width: 640px) {
-  .cols {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .band {
     padding: 16px;
   }
diff --git a/apps/web/src/oj/rank/components/RankMe.vue b/apps/web/src/oj/rank/components/RankMe.vue
index fa385f6..2d7e602 100644
--- a/apps/web/src/oj/rank/components/RankMe.vue
+++ b/apps/web/src/oj/rank/components/RankMe.vue
@@ -53,13 +53,14 @@ const headline = computed(() => {
     return props.lastListed ? `再做对 ${toPass(me, props.lastListed)} 道就进前 ${props.cap}` : ""
   if (me.rank === 1) return "你是第一名"
   if (me.rank <= 3 && ahead)
-    return `你在领奖台上 · 再做对 ${toPass(me, ahead)} 道就是第 ${ahead.rank} 名`
+    // 「第 N 名」用不换行空格连住：手机上这一句正好折行，单个「名」会掉到下一行
+    return `你在领奖台上 · 再做对 ${toPass(me, ahead)} 道就是第\u00a0${ahead.rank}\u00a0名`
   if (third) {
     const need = toPass(me, third)
     if (need <= 3) return `再做对 ${need} 道，你就上领奖台`
   }
   if ((me.change ?? 0) >= 3) return `比周一升了 ${me.change} 名`
-  if (ahead) return `再做对 ${toPass(me, ahead)} 道就是第 ${ahead.rank} 名`
+  if (ahead) return `再做对 ${toPass(me, ahead)} 道就是第\u00a0${ahead.rank}\u00a0名`
   return ""
 })
 
diff --git a/apps/web/src/oj/statistics/components/Lessons.vue b/apps/web/src/oj/statistics/components/Lessons.vue
index 6112b17..e584709 100644
--- a/apps/web/src/oj/statistics/components/Lessons.vue
+++ b/apps/web/src/oj/statistics/components/Lessons.vue
@@ -572,5 +572,16 @@ function percent(value: number, total: number) {
     display: block;
     overflow-x: auto;
   }
+  /* 表横着滑，表头别被挤成竖排（「提 / 交」） */
+  .hard th {
+    white-space: nowrap;
+  }
+  .section-title {
+    flex-wrap: wrap;
+    row-gap: 2px;
+  }
+  .section-title b {
+    flex: none;
+  }
 }
 </style>
diff --git a/apps/web/src/shared/components/Login.vue b/apps/web/src/shared/components/Login.vue
index 03f5df5..1d75cd2 100644
--- a/apps/web/src/shared/components/Login.vue
+++ b/apps/web/src/shared/components/Login.vue
@@ -123,7 +123,7 @@ watch(klass, (value) => {
   clearError()
   if (value) {
     loadNames(value)
-    focusLater(() => searchRef.value)
+    focusSearch()
   } else names.value = []
 })
 
@@ -137,6 +137,15 @@ function focusLater(target: () => { focus: () => void } | null | undefined) {
   nextTick(() => target()?.focus())
 }
 
+/**
+ * 手机上不替学生点搜索框：一聚焦键盘就弹出来，把下面的名单盖掉一半，
+ * 而手机上本来就是直接点名字更快。电脑上照旧聚焦，进来就能打拼音缩写。
+ */
+const touchScreen = useMediaQuery("(pointer: coarse)")
+function focusSearch() {
+  if (!touchScreen.value) focusLater(() => searchRef.value)
+}
+
 function pick(name: string) {
   picked.value = name
   password.value = ""
@@ -148,7 +157,7 @@ function unpick() {
   picked.value = null
   password.value = ""
   clearError()
-  focusLater(() => searchRef.value)
+  focusSearch()
 }
 
 /** 搜到只剩一个人，回车就是点他 */
@@ -163,7 +172,8 @@ function switchMode(next: Mode) {
   password.value = ""
   query.value = ""
   clearError()
-  focusLater(() => (next === "user" ? usernameRef.value : searchRef.value))
+  if (next === "user") focusLater(() => usernameRef.value)
+  else focusSearch()
 }
 
 function goSignup() {
@@ -249,7 +259,8 @@ watch(
     query.value = ""
     clearError()
     restoreLast()
-    focusLater(() => (mode.value === "user" ? usernameRef.value : searchRef.value))
+    if (mode.value === "user") focusLater(() => usernameRef.value)
+    else focusSearch()
   },
   { immediate: true },
 )
diff --git a/apps/web/src/utils/functions.ts b/apps/web/src/utils/functions.ts
index afa9f26..8280554 100644
--- a/apps/web/src/utils/functions.ts
+++ b/apps/web/src/utils/functions.ts
@@ -68,12 +68,13 @@ export function filterEmptyValue<T extends Record<string, any>>(object: T): Part
 }
 
 export function getTagColor(tag: "Low" | "Mid" | "High" | "简单" | "中等" | "困难") {
-  return <"success" | "info" | "error">{
+  // 中等是橙色，和题目列表、相似题推荐一个颜色（原来这里是蓝，同一道题进了详情页就变色）
+  return <"success" | "warning" | "error">{
     Low: "success",
-    Mid: "info",
+    Mid: "warning",
     High: "error",
     简单: "success",
-    中等: "info",
+    中等: "warning",
     困难: "error",
   }[tag]
 }