From b46529c7415c921c2982652091d27f582b4891bb Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 29 Sep 2026 19:12:14 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8F=90=E4=BA=A4=E5=88=97=E8=A1=A8):=20?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=BE=E5=AE=BD=E3=80=81=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=8C=BA=E6=94=B6=E7=AA=84=EF=BC=8C=E9=A2=98=E7=9B=AE=E5=90=8D?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E8=A2=AB=E6=88=AA=E6=88=90=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E5=AD=97=EF=BC=9B=E5=8F=AA=E7=9C=8B=E4=B8=80=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E6=97=B6=E7=AD=9B=E9=80=89=E6=A1=86=E6=8D=A2=E6=88=90=E5=90=8D?=
 =?UTF-8?q?=E5=AD=97=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 左右从「列表 560 固定 + 代码占满」改成 56% : 44%（大屏列表最宽 1000）：学生的代码大多
  十来行，右边原来空着一大片，左边的题目名却只剩三个字；用户名一列 132 → 116
- 右栏顶上固定一行：「只看他 / 只看这题」只留漏斗图标，题目名太长时省略，翻条时代码区不再上下跳
- 按整名只看一个人时（只看他、协作条、看板点进来），108px 的输入框装不下八九个字的用户名，
  换成「只看 xxx ×」的标签；列表里题目名加上鼠标提示

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../submission/components/FlowchartPane.vue   | 41 ++++++++++++---
 .../submission/components/SubmissionPane.vue  | 30 +++++++++--
 apps/web/src/oj/submission/list.vue           | 52 ++++++++++++++-----
 3 files changed, 99 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/oj/submission/components/FlowchartPane.vue b/apps/web/src/oj/submission/components/FlowchartPane.vue
index 298f951..177970d 100644
--- a/apps/web/src/oj/submission/components/FlowchartPane.vue
+++ b/apps/web/src/oj/submission/components/FlowchartPane.vue
@@ -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
@@ -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;
diff --git a/apps/web/src/oj/submission/components/SubmissionPane.vue b/apps/web/src/oj/submission/components/SubmissionPane.vue
index 6e529e3..740102b 100644
--- a/apps/web/src/oj/submission/components/SubmissionPane.vue
+++ b/apps/web/src/oj/submission/components/SubmissionPane.vue
@@ -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"
@@ -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;
diff --git a/apps/web/src/oj/submission/list.vue b/apps/web/src/oj/submission/list.vue
index 6781ce5..9321733 100644
--- a/apps/web/src/oj/submission/list.vue
+++ b/apps/web/src/oj/submission/list.vue
@@ -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;