fix(提交列表): 筛选栏折成两行时「统计」单独掉下去会跑到最左边

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

apps/web/src/oj/submission/components/FlowchartPane.vue

@@ -192,15 +192,25 @@ const canRetry = computed(
         </button>
       </span>
       <div class="spacer"></div>
+      <!-- 右栏窄时这两个只剩图标（字在 title 里），把宽度让给题目名 -->
       <n-button
         v-if="shown && !renderError && shown.mermaidCode"
+        class="head-btn"
         size="small"
+        title="查看大图"
         @click="bigOpen = true"
       >
         <template #icon><Icon icon="ph:corners-out" /></template>
         查看大图
       </n-button>
-      <n-button v-if="teacher" size="small" :disabled="!canRetry" @click="emit('retry', row.id)">
+      <n-button
+        v-if="teacher"
+        class="head-btn"
+        size="small"
+        title="重新评分"
+        :disabled="!canRetry"
+        @click="emit('retry', row.id)"
+      >
         <template #icon><Icon icon="ph:arrow-clockwise" /></template>
         重新评分
       </n-button>
@@ -284,7 +294,7 @@ const canRetry = computed(
 
     <div v-if="!narrow" class="foot">
       <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
-      <span>换上一张 / 下一张</span>
+      <span class="hint">换上一张 / 下一张</span>
       <div class="spacer"></div>
       <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
     </div>
@@ -306,6 +316,7 @@ const canRetry = computed(
   flex-direction: column;
   gap: 12px;
   background: v-bind("theme.bodyColor");
+  container: pane / inline-size;
 }
 
 .head {
@@ -612,4 +623,59 @@ kbd {
   overflow: auto;
   max-height: 80vh;
 }
+
+/* 桌面右栏窄了（屏窄、浏览器放大、列表没收窄）：顶行一行排不下就固定拆成两行 ——
+   名字和按钮一行、题目一行。按宽度定、不按内容定，翻条时高度照样不变 */
+@container pane (max-width: 760px) {
+  .pane:not(.narrow) .head-btn {
+    padding: 0 7px;
+  }
+
+  .pane:not(.narrow) .head-btn :deep(.n-button__content) {
+    display: none;
+  }
+
+  .pane:not(.narrow) .head-btn :deep(.n-button__icon) {
+    margin: 0;
+  }
+}
+
+@container pane (max-width: 600px) {
+  .pane:not(.narrow) .head {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .pane:not(.narrow) .dot {
+    display: none;
+  }
+
+  /* 名字这块占掉按钮左边的全部宽度、从 0 起算：再窄也只是名字被截，按钮不会掉到下一行 */
+  .pane:not(.narrow) .head .who {
+    flex: 1 1 0;
+    overflow: hidden;
+  }
+
+  .pane:not(.narrow) .head .spacer {
+    display: none;
+  }
+
+  .pane:not(.narrow) .user-link {
+    flex-shrink: 0;
+  }
+
+  .pane:not(.narrow) .problem-group {
+    order: 3;
+    flex-basis: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pane:not(.narrow) .keys,
+  .pane:not(.narrow) .hint {
+    display: none;
+  }
+}
 </style>

apps/web/src/oj/submission/components/SubmissionPane.vue

@@ -342,7 +342,9 @@ function openStandalone() {
           复制到自测猫
         </n-button>
       </template>
-      <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
+      <span v-if="position" class="position"
+        >本页第 {{ position.index }} / {{ position.count }} 条</span
+      >
     </div>
   </section>
 </template>
@@ -358,6 +360,7 @@ function openStandalone() {
   flex-direction: column;
   gap: 12px;
   background: v-bind("theme.bodyColor");
+  container: pane / inline-size;
 }
 
 .head {
@@ -655,4 +658,60 @@ kbd {
   align-items: center;
   justify-content: center;
 }
+
+/* 桌面右栏窄了（屏窄、浏览器放大、列表没收窄）：顶行一行排不下就固定拆成两行 ——
+   名字和按钮一行、题目一行。按宽度定、不按内容定，翻条时高度照样不变 */
+@container pane (max-width: 600px) {
+  .pane:not(.narrow) .head {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .pane:not(.narrow) .dot {
+    display: none;
+  }
+
+  /* 名字这块占掉按钮左边的全部宽度、从 0 起算：再窄也只是名字被截，按钮不会掉到下一行 */
+  .pane:not(.narrow) .head .who {
+    flex: 1 1 0;
+    overflow: hidden;
+  }
+
+  .pane:not(.narrow) .head .spacer {
+    display: none;
+  }
+
+  /* 先截班级，名字留全 */
+  .pane:not(.narrow) .user-link {
+    flex-shrink: 0;
+  }
+
+  .pane:not(.narrow) .filter-pill.wide {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    justify-content: flex-start;
+  }
+
+  .pane:not(.narrow) .problem-group {
+    order: 3;
+    flex-basis: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pane:not(.narrow) .keys,
+  .pane:not(.narrow) .hint {
+    display: none;
+  }
+}
+
+/* 再窄连「本页第几条」也让给两个复制按钮 */
+@container pane (max-width: 440px) {
+  .pane:not(.narrow) .position {
+    display: none;
+  }
+}
 </style>

apps/web/src/oj/submission/list.vue

@@ -60,6 +60,13 @@ const theme = useThemeVars()
 const tone = useTone()
 const { isMobile, isDesktop } = useBreakpoints()
 
+/**
+ * 左栏收窄（底栏最左那个按钮）：屏窄、或者浏览器放大了一档时右边的代码看不全，
+ * 收窄后每条排成手机上那样的两行，什么都不丢。记在本机，下次打开还是收着的
+ */
+const narrowList = useStorage("oj2:submission-list-narrow", false)
+const twoLine = computed(() => isMobile.value || narrowList.value)
+
 const inContest = computed(() => route.name === "contest submissions")
 
 /**
@@ -578,7 +585,11 @@ function dayBreak(index: number) {
 </script>
 
 <template>
-  <div ref="pageRoot" class="page" :class="{ contest: inContest, mobile: isMobile }">
+  <div
+    ref="pageRoot"
+    class="page"
+    :class="{ contest: inContest, mobile: isMobile, 'narrow-list': isDesktop && narrowList }"
+  >
     <!-- 筛选栏 -->
     <div v-if="isDesktop" class="filters">
       <!-- 流程图列表要登录才能看（GET /flowcharts 是 requireAuth），没登录就不给这个切换 -->
@@ -697,6 +708,7 @@ function dayBreak(index: number) {
       <!-- 老师只有「统计」（今日统计并进去了）；学生看不到统计，仍是「今日统计」 -->
       <n-button
         v-if="teacher && route.name === 'submissions'"
+        class="stats-btn"
         quaternary
         title="统计：这节课、今天，或者回头看以前的课"
         @click="openStatistics()"
@@ -706,6 +718,7 @@ function dayBreak(index: number) {
       </n-button>
       <n-button
         v-else-if="route.name === 'submissions' && !flowMode"
+        class="stats-btn"
         quaternary
         :title="`今日统计：今天全站 ${todayCount} 条`"
         @click="toggleTodayPanel(true)"
@@ -846,11 +859,11 @@ function dayBreak(index: number) {
               <div v-if="dayBreak(index)" class="day">{{ dayBreak(index) }}</div>
               <div
                 class="row"
-                :class="{ on: row.id === selectedId && !isMobile, mobile: isMobile }"
+                :class="{ on: row.id === selectedId && !isMobile, 'two-line': twoLine }"
                 :data-row-id="row.id"
                 @click="rowClicked(row)"
               >
-                <template v-if="isDesktop">
+                <template v-if="!twoLine">
                   <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
                   <span class="c-user"><UserName :username="row.username" /></span>
                   <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
@@ -868,7 +881,9 @@ function dayBreak(index: number) {
                   </div>
                   <div class="m-line sub">
                     <span class="m-time">{{ submissionClockText(row.createTime) }}</span>
-                    <span class="title">{{ row.problemDisplayId }} {{ row.problemTitle }}</span>
+                    <span class="title" :title="`${row.problemDisplayId} ${row.problemTitle}`">
+                      {{ row.problemDisplayId }} {{ row.problemTitle }}
+                    </span>
                     <div class="spacer"></div>
                     <Icon v-if="!row.showLink" icon="ph:lock-simple" :width="13" class="m-lock" />
                   </div>
@@ -881,11 +896,11 @@ function dayBreak(index: number) {
               <div v-if="dayBreak(index)" class="day">{{ dayBreak(index) }}</div>
               <div
                 class="row"
-                :class="{ on: row.id === selectedId && !isMobile, mobile: isMobile }"
+                :class="{ on: row.id === selectedId && !isMobile, 'two-line': twoLine }"
                 :data-row-id="row.id"
                 @click="rowClicked(row)"
               >
-                <template v-if="isDesktop">
+                <template v-if="!twoLine">
                   <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
                   <span class="c-user">
                     <UserName :username="row.username" :muted="othersRow(row)" />
@@ -927,7 +942,9 @@ function dayBreak(index: number) {
                   </div>
                   <div class="m-line sub">
                     <span class="m-time">{{ submissionClockText(row.createTime) }}</span>
-                    <span class="title">{{ row.problemDisplayId }} {{ row.problemTitle }}</span>
+                    <span class="title" :title="`${row.problemDisplayId} ${row.problemTitle}`">
+                      {{ row.problemDisplayId }} {{ row.problemTitle }}
+                    </span>
                     <span v-if="row.problemSet" class="ps">题单</span>
                     <div class="spacer"></div>
                     <span class="m-lang">{{ languageText(row) }}</span>
@@ -957,11 +974,24 @@ function dayBreak(index: number) {
           <div v-if="!loaded" class="empty"><n-spin size="small" /></div>
         </div>
         <div class="list-foot">
-          <span v-if="total" class="total">共 {{ total }} 条</span>
+          <n-button
+            v-if="isDesktop"
+            size="small"
+            quaternary
+            :title="narrowList ? '列表放宽' : '列表收窄，右边的代码留宽一点'"
+            :aria-label="narrowList ? '列表放宽' : '列表收窄'"
+            @click="narrowList = !narrowList"
+          >
+            <template #icon>
+              <Icon :icon="narrowList ? 'ph:arrow-line-right' : 'ph:arrow-line-left'" />
+            </template>
+          </n-button>
+          <span v-if="total && !(isDesktop && narrowList)" class="total">共 {{ total }} 条</span>
           <div class="spacer"></div>
           <Pagination
             class="pager"
             :total="total"
+            :simple="isDesktop && narrowList"
             v-model:limit="query.limit"
             v-model:page="query.page"
           />
@@ -1119,23 +1149,36 @@ function dayBreak(index: number) {
 }
 
 .filters {
-  height: 60px;
+  min-height: 60px;
   flex: none;
   box-sizing: border-box;
-  padding: 0 var(--oj-pad-x);
+  padding: 12px var(--oj-pad-x);
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
   border-bottom: 1px solid v-bind("theme.dividerColor");
 }
 
+/* 窗口窄（或浏览器放大）排不下时折成两行，各个框保持原宽，不再被压扁、「统计」不再被挤出去 */
+.filters:not(.mobile-filters) > * {
+  flex-shrink: 0;
+}
+
+/* 「统计」单独折到第二行时，占位的 spacer 留在第一行，它自己靠右 */
+.stats-btn {
+  margin-left: auto;
+}
+
 .mobile-filters {
   padding: 0 14px;
 }
 
 .mobile-filters {
   height: 56px;
+  min-height: 0;
+  flex-wrap: nowrap;
   gap: 4px;
 }
 
@@ -1220,7 +1263,8 @@ function dayBreak(index: number) {
    控件放大到 34 高以后再把两头留白和标签的字收回一点 */
 @media (max-width: 1365px) {
   .filters {
-    padding: 0 16px;
+    padding-left: 16px;
+    padding-right: 16px;
   }
   .w-user {
     width: 108px;
@@ -1316,6 +1360,11 @@ function dayBreak(index: number) {
   min-height: 0;
 }
 
+/* 收窄：两行的排法，名字 + 结果一行、时间 + 题目 + 语言一行，题名还能露出十来个字 */
+.narrow-list .list {
+  flex: 0 0 320px;
+}
+
 .mobile .list {
   flex: 1 1 auto;
   max-width: none;
@@ -1395,7 +1444,7 @@ function dayBreak(index: number) {
   background: v-bind("tone('success').background");
 }
 
-.row.mobile {
+.row.two-line {
   height: 60px;
   padding: 0 14px;
   flex-direction: column;
@@ -1435,8 +1484,9 @@ function dayBreak(index: number) {
   opacity: 0.7;
 }
 
-/* 手机上的 day 行和列表行一样贴两边 */
-.mobile .day {
+/* 两行排法的 day 行和列表行一样贴两边 */
+.mobile .day,
+.narrow-list .day {
   padding: 0 14px;
 }
 

apps/web/src/shared/components/Pagination.vue

@@ -5,9 +5,16 @@ interface Props {
   total: number
   limit: number
   page: number
+  /** 只要「‹ 页码 / 总页数 ›」：提交列表收窄以后底栏放不下一串页码 */
+  simple?: boolean
 }
 
-const { total, limit: initialLimit = 10, page: initialPage = 1 } = defineProps<Props>()
+const {
+  total,
+  limit: initialLimit = 10,
+  page: initialPage = 1,
+  simple = false,
+} = defineProps<Props>()
 
 const emit = defineEmits(["update:limit", "update:page"])
 
@@ -42,7 +49,8 @@ watch(
     v-model:page-size="limit"
     :page-sizes="sizes"
     :page-slot="isDesktop ? 7 : 5"
-    :show-size-picker="isDesktop"
+    :show-size-picker="isDesktop && !simple"
+    :simple="simple"
   />
 </template>
 <style scoped>