fix(手机): 点开提交、班级详情、自学目录这类整屏的东西，按返回直接退出了整页，现在是先关掉它

- 提交列表：手机上点开一条，地址带上 ?id=，返回键就是关详情回到列表；刷新、转发链接也还停在这一条；上一条 / 下一条、翻页、滚动位置都在；详情里点「只看他」先关详情再筛选 - 看板讲错误、排名班级详情、自学目录、题目页底部抽屉：手机上按返回只关它（useBackClose）；在自学目录里选一课，返回是回到上一课，不多一站 - 分页列表（提交、题目、比赛、后台几个列表）用浏览器后退翻回前一页时会多压一条历史，前进的记录被冲掉、返回要多按一次 —— 电脑上也是，一起修了 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-15 11:55:30 +08:00
1 parent c149b0a194
commit 90ce1ab0f5
@@ -14,6 +14,7 @@ import { onKeyStroke } from "@vueuse/core"
 import { useThemeVars } from "naive-ui"
 import SubmissionView from "oj/submission/components/SubmissionView.vue"
 import UserName from "shared/components/UserName.vue"
+import { useBackClose } from "shared/composables/backClose"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import type { ClassBoardProblem } from "utils/types"
 import ProblemBrief from "./ProblemBrief.vue"
@@ -38,6 +39,8 @@ const index = defineModel<number>("index", { required: true })

 const theme = useThemeVars()
 const { isMobile } = useBreakpoints()
+// 手机上是整屏的：按返回键关掉它回到看板，不是退出看板
+useBackClose(show, isMobile)
 /**
 * 颜色走内联的 CSS 变量，不用 <style> 里的 v-bind()：n-modal 把内容挂到 body 下面，
 * v-bind 的变量挂在组件根上，传不过去（弹层底色整个透明）
@@ -6,6 +6,7 @@ import type { Exercise } from "utils/types"
 import { getExercises, getLearnProgress, getTutorial, getTutorials } from "../api"
 import { parseLesson } from "./composables/useLessonParse"
 import { useLearnTrace } from "./composables/useLearnTrace"
+import { useBackClose } from "shared/composables/backClose"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
 import {
@@ -52,6 +53,8 @@ const solvedIds = ref(new Set<number>())
 const loading = ref(true)
 const isEmpty = ref(false)
 const menuOpen = ref(false)
+// 手机上的目录是大半屏的底部抽屉：按返回键收起它，不是退出这一课
+useBackClose(menuOpen, () => !isDesktop.value)

 const groups = computed(() => groupByProject(titles.value))
 const parsed = computed(() =>
@@ -2,6 +2,7 @@
 import { useThemeVars } from "naive-ui"
 import { storeToRefs } from "pinia"
 import { useProblemStore } from "oj/store/problem"
+import { useBackClose } from "shared/composables/backClose"
 import { useUserStore } from "shared/store/user"
 import {
  DRAWER_TITLE,
@@ -52,6 +53,8 @@ const show = computed({
    if (!value) open.value = null
  },
 })
+// 手机上是大半屏的底部抽屉（没有 to）：按返回键收起它，不是退出题目
+useBackClose(show, () => !props.to)

 // 内容和标题都按最后一次打开的来：关的时候有一段滑出去的动画，那时 open 已经是 null 了。
 // 关完 n-drawer 自己把内容卸掉
@@ -6,6 +6,7 @@ import { getClassDetail } from "oj/api"
 import { classLabel } from "oj/submission/utils"
 import UserName from "shared/components/UserName.vue"
 import { useAIStream } from "shared/composables/aiStream"
+import { useBackClose } from "shared/composables/backClose"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { parseTime } from "utils/functions"
 import { useRankPalette } from "../palette"
@@ -24,6 +25,8 @@ const message = useMessage()
 const theme = useThemeVars()
 const palette = useRankPalette()
 const { isDesktop } = useBreakpoints()
+// 手机上占满一屏：按返回键关掉它回到排名
+useBackClose(show, () => !isDesktop.value)

 const detail = ref<ClassDetail | null>(null)
 const loading = ref(false)
@@ -14,6 +14,7 @@ import {
 import { DEFAULT_PERIOD } from "oj/statistics/period"
 import { useContestStore } from "oj/store/contest"
 import Pagination from "shared/components/Pagination.vue"
+import { useBackClose } from "shared/composables/backClose"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { usePagination } from "shared/composables/pagination"
 import { useConfigStore } from "shared/store/config"
@@ -71,6 +72,17 @@ const tone = useTone()
 const { isMobile, isDesktop } = useBreakpoints()

 const inContest = computed(() => route.name === "contest submissions")
+
+/**
+ * 手机上点开的那一条，记在地址的 `?id=` 上：详情是从右边滑出的整屏，学生下意识按返回 ——
+ * 返回键归路由管，退一步就是关掉详情、回到列表；刷新、转发链接也还停在这一条。
+ * 列表在底下不卸载，滚到哪、上一条 / 下一条都还在
+ */
+const paneId = computed(() =>
+  isMobile.value && typeof route.query.id === "string" ? route.query.id : "",
+)
+/** 从详情里点了「只看他」这类筛选：这一下要连 ?id= 一起换掉，见 leavePane() */
+let leavingPane = false
 const teacher = computed(() => userStore.isTeacherOrAbove)

 // 一节课一个班要交一百来条，每页 10 条得翻十几页；30 条配上右栏的方向键正好
@@ -85,7 +97,13 @@ const { query, clearQuery } = usePagination<SubmissionQuery>(
    // 原来写死成 "0"，从别处带着 today=1 进来也不认
    today: useRouteQuery("today", "0").value,
  },
-  { defaultLimit: 30 },
+  {
+    defaultLimit: 30,
+    // 手机上开着详情：翻页、换条件时地址里的 ?id= 带着走，也不多压历史（返回键是关详情）
+    extraQuery: (): Record<string, string> =>
+      paneId.value && !leavingPane ? { id: paneId.value } : {},
+    replace: () => !!paneId.value && !leavingPane,
+  },
 )

 const flowMode = computed(() => !inContest.value && query.language === "Flowchart")
@@ -294,6 +312,14 @@ function settleSelection() {
    }
    message.info("这一页没有可以查看的代码")
  }
+  // 地址里带着 ?id= 的（手机上开着详情时刷新、别人发来的链接）就停在那一条
+  const wanted = typeof route.query.id === "string" ? route.query.id : ""
+  if (wanted && rows.value.some((row) => row.id === wanted)) {
+    selectedId.value = wanted
+    return
+  }
+  // 这一页上没有那一条：详情开不出来，把 ?id= 摘掉
+  if (paneId.value) router.replace({ query: queryWithoutId() })
  if (rows.value.some((row) => row.id === selectedId.value)) return
  // 手机上没有右栏，不用预先选一条
  if (isMobile.value) {
@@ -334,6 +360,7 @@ function move(step: 1 | -1) {
 }

 const [todayPanel, toggleTodayPanel] = useToggle(false)
+useBackClose(todayPanel, isMobile)
 const statsPanel = ref(false)

 // 只用 ↑ ↓（用户定的，← → 不要）
@@ -360,13 +387,63 @@ onKeyStroke(["ArrowUp", "ArrowDown"], (e: KeyboardEvent) => {
  move(e.key === "ArrowUp" ? -1 : 1)
 })

-// 手机上没有右栏：点一行从右边滑出整屏的详情
-const mobilePane = ref(false)
+// 手机上没有右栏：点一行从右边滑出整屏的详情，地址带上 ?id=（见 paneId）
+const mobilePane = computed({
+  get: () => !!paneId.value,
+  set: (open) => {
+    if (!open) closePane()
+  },
+})
+
+function queryWithoutId() {
+  const { id: _, ...rest } = route.query
+  return rest
+}
+
 function rowClicked(row: Row) {
  select(row.id)
-  if (isMobile.value) mobilePane.value = true
+  if (isMobile.value) router.push({ query: { ...route.query, id: row.id } })
 }

+/**
+ * 点 × 关：从列表点开的就退一步（和按返回键一样，不留一条多余的历史）；
+ * 直接带着 ?id= 进来的（刷新过、别人发的链接）后面没有列表可退，把地址换掉
+ */
+function closePane() {
+  const back = history.state?.back
+  if (typeof back === "string" && router.resolve(back).name === route.name) router.back()
+  else router.replace({ query: queryWithoutId() })
+}
+
+/**
+ * 详情里点「只看他」「只看这道题」：先关详情（退回列表那一条），再改筛选。
+ * 反过来的话筛选压的那条历史在详情后面，按返回又回到详情。
+ * 等路由落地、再等分页把地址同步回 query 之后才改，不然改的值会被同步盖掉
+ */
+function leavePane(next: () => void) {
+  if (!paneId.value) return next()
+  leavingPane = true
+  const off = router.afterEach(() => {
+    off()
+    nextTick(() => {
+      leavingPane = false
+      next()
+    })
+  })
+  closePane()
+}
+
+// 上一条 / 下一条换了人：地址里的 ?id= 跟着换（replace，返回键照样是关详情）
+watch(selectedId, (id) => {
+  if (paneId.value && id && id !== paneId.value) {
+    router.replace({ query: { ...route.query, id } })
+  }
+})
+// 前进后退到另一条（或者刷新后列表回来之前地址就有了）：选中跟着地址走
+watch(paneId, (id) => {
+  if (id && rows.value.some((row) => row.id === id)) selectedId.value = id
+})
+
 // ==================== 实时更新 ====================

 /**
@@ -1167,8 +1244,8 @@ function dayBreak(index: number) {
          :teacher="teacher"
          :position="null"
          narrow
-          @filter-user="(name: string) => ((mobilePane = false), filterUser(name))"
-          @filter-problem="(id: string) => ((mobilePane = false), filterProblem(id))"
+          @filter-user="(name: string) => leavePane(() => filterUser(name))"
+          @filter-problem="(id: string) => leavePane(() => filterProblem(id))"
          @open-problem="openProblem"
          @retry="retryFlowchart"
        />
@@ -1180,10 +1257,10 @@ function dayBreak(index: number) {
          :contest="inContest"
          :position="null"
          narrow
-          @filter-user="(name: string) => ((mobilePane = false), filterUser(name))"
-          @filter-class="(name: string) => ((mobilePane = false), filterClass(name))"
-          @clear-class="() => ((mobilePane = false), (query.className = ''))"
-          @filter-problem="(id: string) => ((mobilePane = false), filterProblem(id))"
+          @filter-user="(name: string) => leavePane(() => filterUser(name))"
+          @filter-class="(name: string) => leavePane(() => filterClass(name))"
+          @clear-class="() => leavePane(() => (query.className = ''))"
+          @filter-problem="(id: string) => leavePane(() => filterProblem(id))"
          @open-problem="openProblem"
          @rejudge="rejudge"
        />
@@ -0,0 +1,65 @@
+import type { MaybeRefOrGetter, Ref } from "vue"
+
+/**
+ * 手机上整屏（或大半屏）的弹框、抽屉：按返回键先关它，而不是退出整页。
+ *
+ * 学生在手机上看到一整屏的东西，下意识就按返回 —— 原来这一下直接退到了前一页（提交列表点开
+ * 一条、再按返回，回到的是首页）。所以打开时往历史里压一条同地址的记录：
+ * - 按返回：浏览器弹掉这一条，这里收到 popstate，把弹框关掉，页面原地不动；
+ * - 点 × / 点遮罩关掉：自己 history.back() 把那条弹掉，不然要多按一次返回才退得出去。
+ *
+ * 压的是 history.state 的原样拷贝（vue-router 要的 position 等字段都在）。弹掉它时
+ * **不能让 vue-router 看见**：它会当成一次同地址的跳转，route 对象换新，页面上盯着
+ * route.query 的同步逻辑（usePagination）跟着跑一遍，又压一条历史，返回键就要多按一次。
+ * 抢在它前面拦不住 —— window 上的 popstate 按注册顺序派发（捕获监听也不优先，实测过），
+ * 路由的监听最早注册。所以记录压着的这段时间把 router.listening 整个关掉，弹掉以后再开：
+ * 关着的只是「响应浏览器前进后退」这一项，弹框里点链接 router.push 照常走。
+ *
+ * 弹框开着时点了站内链接，路由守卫先把它拦下，等那条记录弹完再跳（back() 是异步的，
+ * 先跳的话会把刚跳过去的那一条弹掉）。
+ */
+export function useBackClose(show: Ref<boolean>, enabled: MaybeRefOrGetter<boolean> = true) {
+  const router = useRouter()
+  /** 压了记录、还没弹掉（这段时间路由不听前进后退） */
+  let pushed = false
+  let afterPop: (() => void) | null = null
+
+  watch(show, (open) => {
+    if (open && !pushed && toValue(enabled)) {
+      history.pushState(history.state, "")
+      pushed = true
+      router.listening = false
+    } else if (!open && pushed) {
+      // 点 × 关的：自己弹掉那条，路由照旧关着，等下面收到 popstate 再开
+      history.back()
+    }
+  })
+
+  useEventListener(window, "popstate", () => {
+    if (!pushed) return
+    pushed = false
+    // 按了返回键的：只管关（watch 里看到 pushed 已经是 false，不会再 back）
+    show.value = false
+    router.listening = true
+    const next = afterPop
+    afterPop = null
+    next?.()
+  })
+
+  // 弹框里点了链接要跳走（自学目录里选一课）：先关弹框、把压的那条退掉，再跳。
+  // 直接跳的话新页面压在那条后面，回来时要多按一次返回，而且那一下路由不听（见上）
+  const removeGuard = router.beforeEach((to) => {
+    if (!pushed) return
+    afterPop = () => void router.push(to.fullPath)
+    show.value = false
+    return false
+  })
+
+  // 弹框开着组件就没了：路由一定要开回来，不然整站的返回键都失灵
+  onBeforeUnmount(() => {
+    removeGuard()
+    if (!pushed) return
+    pushed = false
+    router.listening = true
+  })
+}
@@ -1,4 +1,4 @@
-import { reactive, watch } from "vue"
+import { nextTick, reactive, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { filterEmptyValue } from "utils/functions"

@@ -15,6 +15,13 @@ export interface UsePaginationOptions {
  defaultPage?: number
  /** 当其他查询条件变化时是否重置页码 */
  resetPageOnChange?: boolean
+  /**
+   * 不归分页管、但同步地址时要带上的键。不给的话地址整个按 query 重写，别的键会被丢掉
+   * （提交列表手机上点开一条是 `?id=`，翻一页详情就关了）
+   */
+  extraQuery?: () => Record<string, string>
+  /** 返回 true 时同步地址一律 replace，不压历史（提交列表手机上开着详情时翻页） */
+  replace?: () => boolean
 }

 /**
@@ -27,7 +34,13 @@ export function usePagination<T extends Record<string, any>>(
  initialQuery: Omit<T, "page" | "limit"> = {} as Omit<T, "page" | "limit">,
  options: UsePaginationOptions = {},
 ) {
-  const { defaultLimit = 10, defaultPage = 1, resetPageOnChange = true } = options
+  const {
+    defaultLimit = 10,
+    defaultPage = 1,
+    resetPageOnChange = true,
+    extraQuery,
+    replace,
+  } = options

  const route = useRoute()
  const router = useRouter()
@@ -41,8 +54,18 @@ export function usePagination<T extends Record<string, any>>(
  // 键是运行时按 initialQuery 枚举出来的，静态类型写不出来；写入统一走这一个口子
  const writable = query as Record<string, unknown>

+  /**
+   * 正在从地址同步回来：这一拍里 query 的变化本来就是地址带来的，别再写回地址。
+   * 写回去的话（浏览器后退到第 1 页，地址没写默认的 today=0，比一下「不一样」）会压一条
+   * 新历史，把前进的那几条冲掉，返回键还得多按一次。
+   * 页面自己盯着 route.query 补默认值的（提交列表）也在同一拍里，一起算
+   */
+  let syncing = false
+
  // 同步 URL 查询参数到本地状态
  function syncFromRoute() {
+    syncing = true
+    nextTick(() => (syncing = false))
    writable.page = parseInt(<string>route.query.page) || defaultPage
    writable.limit = parseInt(<string>route.query.limit) || defaultLimit

@@ -71,7 +94,7 @@ export function usePagination<T extends Record<string, any>>(

  // 更新 URL
  function updateRoute() {
-    const newQuery = filterEmptyValue(query)
+    const newQuery = { ...filterEmptyValue(query), ...extraQuery?.() }
    // 和当前地址只差默认的 page / limit（后退到 /problem，同步完又补上 ?page=1&limit=30）：
    // 是同一个页面，用 replace，别多压一条历史、让人得多按一次后退
    const normalized = (q: Record<string, unknown>) =>
@@ -85,7 +108,8 @@ export function usePagination<T extends Record<string, any>>(
          .map(([key, value]) => [key, String(value)])
          .sort(),
      )
-    const navigate = normalized(route.query) === normalized(newQuery) ? router.replace : router.push
+    const navigate =
+      replace?.() || normalized(route.query) === normalized(newQuery) ? router.replace : router.push
    navigate({
      path: route.path,
      query: newQuery,
@@ -115,12 +139,18 @@ export function usePagination<T extends Record<string, any>>(
  }

  // 监听页码变化，同步到 URL
-  watch(() => query.page, updateRoute)
+  watch(
+    () => query.page,
+    () => {
+      if (!syncing) updateRoute()
+    },
+  )

  // 监听每页条数变化，重置页码并同步到 URL
  watch(
    () => query.limit,
    () => {
+      if (syncing) return
      if (resetPageOnChange) {
        resetPage()
      }
@@ -134,6 +164,7 @@ export function usePagination<T extends Record<string, any>>(
    watch(
      () => otherQueryKeys.map((key) => query[key]),
      () => {
+        if (syncing) return
        resetPage()
        updateRoute()
      },