style(提交列表): 翻上一条下一条只用 ↑ ↓，去掉 ← →

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
style(提交列表): 列表放宽、代码区收窄，题目名不再被截成三个字；只看一个人时筛选框换成名字标签
2026-09-29 19:13:03 +08:00 · 2026-09-29 19:12:14 +08:00
3 changed files with 104 additions and 29 deletions
@@ -150,17 +150,32 @@ const canRetry = computed(
        >
          <UserName :username="row.username" />
        </a>
-        <button class="filter-pill" @click="emit('filterUser', row.username)">
-          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+        <button
+          class="filter-pill"
+          title="只看他的提交"
+          aria-label="只看他的提交"
+          @click="emit('filterUser', row.username)"
+        >
+          <Icon icon="ph:funnel-simple-bold" :width="12" />
        </button>
      </div>
      <span class="dot">·</span>
-      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+      <a
+        class="problem"
+        href="#"
+        :title="`${row.problemDisplayId} ${row.problemTitle}`"
+        @click.prevent="emit('openProblem', row)"
+      >
        <span class="problem-id">{{ row.problemDisplayId }}</span>
        {{ row.problemTitle }}
      </a>
-      <button class="filter-pill" @click="emit('filterProblem', row.problemDisplayId)">
-        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+      <button
+        class="filter-pill"
+        title="只看这道题的提交"
+        aria-label="只看这道题的提交"
+        @click="emit('filterProblem', row.problemDisplayId)"
+      >
+        <Icon icon="ph:funnel-simple-bold" :width="12" />
      </button>
      <div class="spacer"></div>
      <n-button
@@ -243,7 +258,7 @@ const canRetry = computed(
    </div>

    <div v-if="!narrow" class="foot">
-      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd></span>
+      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
      <span>换上一张 / 下一张</span>
      <div class="spacer"></div>
      <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
@@ -274,6 +289,17 @@ const canRetry = computed(
  gap: 8px;
  white-space: nowrap;
  font-size: 15px;
+  min-width: 0;
+}
+
+/* 顶上固定一行：按方向键翻条时这一行高度不能变，不然下面的代码区跟着上下跳。
+   名字和按钮不缩，题目名太长时省略（全名在 title 里） */
+.head .who {
+  flex-shrink: 0;
+}
+
+.head .problem {
+  flex: 0 1 auto;
 }

 .narrow {
@@ -343,10 +369,13 @@ const canRetry = computed(
  text-overflow: ellipsis;
 }

+/* 只留漏斗图标（右栏六百来宽，带字的话名字、题目和按钮排不进一行），字在 title 里 */
 .filter-pill {
  flex: none;
+  width: 24px;
  height: 22px;
-  padding: 0 7px;
+  padding: 0;
+  justify-content: center;
  border: 1px solid v-bind("tone('success').background");
  border-radius: 11px;
  background: transparent;
@@ -237,23 +237,30 @@ function openStandalone() {
        </a>
        <button
          class="filter-pill"
-          title="只看这个人的提交"
+          title="只看他的提交"
+          aria-label="只看他的提交"
          @click="emit('filterUser', row.username)"
        >
-          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+          <Icon icon="ph:funnel-simple-bold" :width="12" />
        </button>
      </div>
      <span class="dot">·</span>
-      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+      <a
+        class="problem"
+        href="#"
+        :title="`${row.problemDisplayId} ${row.problemTitle}`"
+        @click.prevent="emit('openProblem', row)"
+      >
        <span class="problem-id">{{ row.problemDisplayId }}</span>
        {{ row.problemTitle }}
      </a>
      <button
        class="filter-pill"
        title="只看这道题的提交"
+        aria-label="只看这道题的提交"
        @click="emit('filterProblem', row.problemDisplayId)"
      >
-        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+        <Icon icon="ph:funnel-simple-bold" :width="12" />
      </button>
      <a
        v-if="row.problemSet"
@@ -391,7 +398,7 @@ function openStandalone() {
    </template>

    <div v-if="!narrow" class="foot">
-      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd></span>
+      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
      <span>
        {{
          teacher
@@ -427,6 +434,16 @@ function openStandalone() {
  min-width: 0;
 }

+/* 顶上固定一行：按方向键翻条时这一行高度不能变，不然下面的代码区跟着上下跳。
+   名字和按钮不缩，题目名太长时省略（全名在 title 里） */
+.head .who {
+  flex-shrink: 0;
+}
+
+.head .problem {
+  flex: 0 1 auto;
+}
+
 .narrow {
  padding: 12px 14px;
 }
@@ -490,10 +507,13 @@ function openStandalone() {
  background: v-bind("tone('info').background");
 }

+/* 只留漏斗图标（右栏六百来宽，带字的话名字、题目和按钮排不进一行），字在 title 里 */
 .filter-pill {
  flex: none;
+  width: 24px;
  height: 22px;
-  padding: 0 7px;
+  padding: 0;
+  justify-content: center;
  border: 1px solid v-bind("tone('success').background");
  border-radius: 11px;
  background: transparent;
@@ -314,8 +314,8 @@ function move(step: 1 | -1) {

 const [todayPanel, toggleTodayPanel] = useToggle(false)

-// ← → 和 ↑ ↓ 一样（9 月加方向键时就是四个键都能翻，老师已经用惯了）
-onKeyStroke(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], (e: KeyboardEvent) => {
+// 只用 ↑ ↓（用户定的，← → 不要）
+onKeyStroke(["ArrowUp", "ArrowDown"], (e: KeyboardEvent) => {
  if (!isDesktop.value || todayPanel.value) return
  // 别的控件已经处理了这次按键（下拉框自己会开菜单、换选项）
  if (e.defaultPrevented) return
@@ -335,7 +335,7 @@ onKeyStroke(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], (e: KeyboardEve
  }
  if (!rows.value.length) return
  e.preventDefault()
-  move(e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1)
+  move(e.key === "ArrowUp" ? -1 : 1)
 })

 // 手机上没有右栏：点一行从右边滑出整屏的详情
@@ -543,6 +543,14 @@ function clear() {
  query.language = keepMode
 }

+/** 现在是不是按整名只看一个人（输入框换成名字标签的时候） */
+const exactPerson = computed(() => !!exactFor.value && query.username === exactFor.value)
+
+function clearPerson() {
+  exactFor.value = ""
+  query.username = ""
+}
+
 function filterUser(username: string) {
  exactFor.value = username
  query.myself = "0"
@@ -703,8 +711,20 @@ function dayBreak(index: number) {
        />
      </template>

+      <!-- 按整名只看一个人（「只看他」、协作条、看板点进来）：用户名有八九个字，塞进 108px 的
+           输入框只剩半截，还被清除按钮压着 —— 换成一个带名字的标签，点 × 取消 -->
+      <button
+        v-if="!mine && exactPerson"
+        class="chip on person"
+        :title="`只看 ${query.username}（点一下取消）`"
+        @click="clearPerson"
+      >
+        <Icon icon="ph:user-bold" :width="12" />
+        <UserName :username="query.username" class="person-name" />
+        <Icon icon="ph:x-bold" :width="12" />
+      </button>
      <n-input
-        v-if="!mine"
+        v-else-if="!mine"
        v-model:value="query.username"
        class="w-user"
        size="small"
@@ -840,7 +860,7 @@ function dayBreak(index: number) {
                <template v-if="isDesktop">
                  <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
                  <span class="c-user"><UserName :username="row.username" /></span>
-                  <span class="c-problem">
+                  <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
                    <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
                  </span>
                  <span class="c-state">
@@ -883,7 +903,7 @@ function dayBreak(index: number) {
                  <span class="c-user">
                    <UserName :username="row.username" :muted="othersRow(row)" />
                  </span>
-                  <span class="c-problem">
+                  <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
                    <span class="title">
                      <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
                    </span>
@@ -1180,6 +1200,15 @@ function dayBreak(index: number) {
  font-weight: 600;
 }

+.chip.person {
+  max-width: 180px;
+  padding: 0 10px;
+}
+
+.chip.person .person-name {
+  font-size: 13px;
+}
+
 .lesson b {
  font-weight: 600;
 }
@@ -1195,9 +1224,11 @@ function dayBreak(index: number) {
  display: flex;
 }

+/* 列表占多一点：学生的代码大多十来行、一行几十个字，右边给多了是一片空白（用户看过定的）。
+   大屏上列表最宽 1000，再宽一行里全是空隙 */
 .list {
-  width: 560px;
-  flex: none;
+  flex: 0 0 56%;
+  max-width: 1000px;
  box-sizing: border-box;
  border-right: 1px solid v-bind("theme.dividerColor");
  display: flex;
@@ -1205,14 +1236,9 @@ function dayBreak(index: number) {
  min-height: 0;
 }

-/* 1366 以下（机房 1280 的屏）左栏收窄一点，右边的代码多留几列 */
-@media (max-width: 1365px) {
-  .list {
-    width: 520px;
-  }
-}
-
 .mobile .list {
+  flex: 1 1 auto;
+  max-width: none;
  width: 100%;
  border-right: 0;
 }
@@ -1343,7 +1369,7 @@ function dayBreak(index: number) {
 }

 .c-user {
-  width: 132px;
+  width: 116px;
  flex: none;
  display: flex;
  overflow: hidden;