From 959c326bc9a00f48d180295cacc621bbf9f84c1c Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 2 Nov 2026 23:51:28 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=90=8D=E5=AD=97):=20=E5=90=8D=E5=AD=97?=
 =?UTF-8?q?=E5=88=97=E6=8C=89=E5=8E=BB=E6=8E=89=20ks=20=E5=89=8D=E7=BC=80?=
 =?UTF-8?q?=E5=90=8E=E7=9A=84=E9=95=BF=E5=BA=A6=E6=94=B6=E7=AA=84=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E7=95=99=E4=B8=80=E5=A4=A7=E5=9D=97=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来的定宽是按 ks2312李鑫楠 定的（110～170px），现在名字最长 4 个字（在读的班 423 人里 5 人）。
只放名字的列收到 80px 左右；混着几个班、名字后面还有班号的（全部提交、全服 / 年级排名、
卡点分析没选班时）108px，最宽的「翁鑫叶炫 2312」95px 也放得下。改了提交列表、排名赛道和周榜、
比赛排名和成绩、题单全班情况、数据统计、后台自学情况和卡点分析、请假名单

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/admin/analytics/components/StuckDetail.vue | 10 +++++++---
 apps/web/src/admin/learn/ExerciseAttempts.vue      |  2 +-
 apps/web/src/admin/learn/ProblemReaders.vue        |  2 +-
 apps/web/src/admin/learn/index.vue                 |  5 +++--
 apps/web/src/oj/contest/pages/class.vue            |  5 +++--
 apps/web/src/oj/contest/pages/rank.vue             |  3 ++-
 .../web/src/oj/problemset/components/ClassView.vue |  3 ++-
 apps/web/src/oj/rank/components/RankTrack.vue      | 11 ++++++++---
 apps/web/src/oj/rank/components/WeekTop.vue        |  3 ++-
 .../web/src/oj/statistics/components/CodeStats.vue |  3 ++-
 .../web/src/oj/statistics/components/FlowStats.vue |  3 ++-
 apps/web/src/oj/submission/list.vue                | 14 +++++++++++---
 apps/web/src/oj/task/components/LeaveModal.vue     |  2 +-
 apps/web/src/shared/components/UserName.vue        |  2 +-
 14 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/admin/analytics/components/StuckDetail.vue b/apps/web/src/admin/analytics/components/StuckDetail.vue
index c71ff90..4eac263 100644
--- a/apps/web/src/admin/analytics/components/StuckDetail.vue
+++ b/apps/web/src/admin/analytics/components/StuckDetail.vue
@@ -205,7 +205,7 @@ const links = computed(() => {
         <div class="muted small">交得最多的</div>
         <div class="names">
           <div v-for="row in mostTries" :key="row.username" class="nrow">
-            <UserName :username="row.username" class="uname" />
+            <UserName :username="row.username" :class-name="className ? null : row.className" short-class class="uname" :class="{ 'with-class': !className }" />
             <span class="num strong ntries">交了 {{ row.tries }} 次</span>
             <span class="muted num">{{ gap(row.minutes) }}</span>
             <span class="grow" />
@@ -243,7 +243,7 @@ const links = computed(() => {
       </div>
       <div class="names">
         <div v-for="row in stuckStudents" :key="row.username" class="nrow">
-          <UserName :username="row.username" class="uname" />
+          <UserName :username="row.username" :class-name="className ? null : row.className" short-class class="uname" :class="{ 'with-class': !className }" />
           <span class="muted num ntries">交了 {{ row.tries }} 次</span>
           <span class="legend" :style="{ color: resultColor(row.lastResult) }">
             <i :style="{ background: resultColor(row.lastResult) }" />{{ resultName(row.lastResult) }}
@@ -450,10 +450,14 @@ const links = computed(() => {
   font-size: 13px;
   min-width: 0;
 }
+/* 名字最长 4 个字；没选班（全部班级）时名字后面还有班号（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽） */
 .uname {
-  width: 110px;
+  width: 80px;
   flex-shrink: 0;
 }
+.uname.with-class {
+  width: 108px;
+}
 .ntries {
   width: 64px;
   flex-shrink: 0;
diff --git a/apps/web/src/admin/learn/ExerciseAttempts.vue b/apps/web/src/admin/learn/ExerciseAttempts.vue
index f76c655..077a259 100644
--- a/apps/web/src/admin/learn/ExerciseAttempts.vue
+++ b/apps/web/src/admin/learn/ExerciseAttempts.vue
@@ -22,7 +22,7 @@ const desktopColumns: DataTableColumn<LearnExerciseAttempt>[] = [
   {
     title: '学生',
     key: 'username',
-    width: 140,
+    width: 100,
     render: (row) => h(UserName, { username: row.username }),
   },
   {
diff --git a/apps/web/src/admin/learn/ProblemReaders.vue b/apps/web/src/admin/learn/ProblemReaders.vue
index 3211713..65a0c26 100644
--- a/apps/web/src/admin/learn/ProblemReaders.vue
+++ b/apps/web/src/admin/learn/ProblemReaders.vue
@@ -49,7 +49,7 @@ const desktopColumns: DataTableColumn<ProblemReader>[] = [
   {
     title: '学生',
     key: 'username',
-    width: 150,
+    width: 100,
     render: (row) => h(UserName, { username: row.username }),
   },
   { title: '结果', key: 'result', width: 150, render: renderResult },
diff --git a/apps/web/src/admin/learn/index.vue b/apps/web/src/admin/learn/index.vue
index bfd1a54..add7dfb 100644
--- a/apps/web/src/admin/learn/index.vue
+++ b/apps/web/src/admin/learn/index.vue
@@ -503,8 +503,9 @@ onMounted(load)
   padding-bottom: 6px;
   border-top: 0;
 }
+/* 名字最长 4 个字，表头「每课打开过」5 个小字也放得下（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽） */
 .c-name {
-  width: 110px;
+  width: 80px;
   flex-shrink: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -756,7 +757,7 @@ onMounted(load)
     position: sticky;
     left: 0;
     z-index: 1;
-    width: 96px;
+    width: 72px;
     margin-left: -16px;
     padding-left: 16px;
     background: v-bind('theme.bodyColor');
diff --git a/apps/web/src/oj/contest/pages/class.vue b/apps/web/src/oj/contest/pages/class.vue
index d40f4d5..1faecdd 100644
--- a/apps/web/src/oj/contest/pages/class.vue
+++ b/apps/web/src/oj/contest/pages/class.vue
@@ -267,8 +267,9 @@ function exportGrades() {
 const success = computed(() => tone('success'))
 const danger = computed(() => tone('error'))
 const warning = computed(() => tone('warning'))
-const liveColumns = computed(() => `130px 48px repeat(${problems.value.length}, minmax(70px, 96px)) 90px 1fr`)
-const gradeColumns = computed(() => `24px 124px 40px 36px repeat(${problems.value.length}, 50px)`)
+// 名字列只放名字，最长 4 个字（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽）
+const liveColumns = computed(() => `88px 48px repeat(${problems.value.length}, minmax(70px, 96px)) 90px 1fr`)
+const gradeColumns = computed(() => `24px 88px 40px 36px repeat(${problems.value.length}, 50px)`)
 </script>
 
 <template>
diff --git a/apps/web/src/oj/contest/pages/rank.vue b/apps/web/src/oj/contest/pages/rank.vue
index 1301ca6..f1a0489 100644
--- a/apps/web/src/oj/contest/pages/rank.vue
+++ b/apps/web/src/oj/contest/pages/rank.vue
@@ -91,7 +91,8 @@ const narrow = useMediaQuery('(max-width: 640px)')
 const columns = computed(() => {
   const move = running.value ? '36px ' : ''
   const count = problems.value.length
-  return narrow.value ? `28px ${move}112px 36px 70px repeat(${count}, 52px)` : `40px ${move}170px 48px 80px repeat(${count}, 64px)`
+  // 名字列：名字最长 4 个字（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽）
+  return narrow.value ? `28px ${move}76px 36px 70px repeat(${count}, 52px)` : `40px ${move}96px 48px 80px repeat(${count}, 64px)`
 })
 </script>
 
diff --git a/apps/web/src/oj/problemset/components/ClassView.vue b/apps/web/src/oj/problemset/components/ClassView.vue
index efb1acc..a3e316b 100644
--- a/apps/web/src/oj/problemset/components/ClassView.vue
+++ b/apps/web/src/oj/problemset/components/ClassView.vue
@@ -51,7 +51,8 @@ const average = computed(() => (joined.value.length ? joined.value.reduce((sum,
 const finished = computed(() => joined.value.filter((s) => data.value && s.completedCount >= data.value.totalCount).length)
 const beforeCount = computed(() => joined.value.reduce((sum, s) => sum + s.cells.filter((cell) => cell.solvedBefore).length, 0))
 
-const columns = computed(() => `22px 110px 44px repeat(${data.value?.problems.length ?? 1}, minmax(72px, 1fr))`)
+// 名字列最长 4 个字（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽）
+const columns = computed(() => `22px 80px 44px repeat(${data.value?.problems.length ?? 1}, minmax(72px, 1fr))`)
 
 function cellLink(username: string, problemId: string) {
   return `/submission?username=${encodeURIComponent(username)}&problem=${encodeURIComponent(problemId)}`
diff --git a/apps/web/src/oj/rank/components/RankTrack.vue b/apps/web/src/oj/rank/components/RankTrack.vue
index c55e6f3..9d1d1d6 100644
--- a/apps/web/src/oj/rank/components/RankTrack.vue
+++ b/apps/web/src/oj/rank/components/RankTrack.vue
@@ -212,8 +212,8 @@ function onMenu(key: string, row: RankRow) {
           <div class="lane">
             <span class="rank">{{ item.row.solved ? item.row.rank : '—' }}</span>
             <RankAvatar :username="item.row.user.username" :avatar="item.row.avatar" :size="20" :me="item.row.user.id === meId" />
-            <button class="who" @click="emit('open', item.row.user.username)">
-              <UserName :username="item.row.user.username" :class-name="showClass ? item.row.className : null" />
+            <button class="who" :class="{ 'with-class': showClass }" @click="emit('open', item.row.user.username)">
+              <UserName :username="item.row.user.username" :class-name="showClass ? item.row.className : null" short-class />
             </button>
             <span class="bar-box" :style="{ background: palette.track }">
               <span class="bar" :style="{ width: width(item.row), background: barColor(item.row) }" />
@@ -343,6 +343,10 @@ function onMenu(key: string, row: RankRow) {
   min-width: 0;
 }
 
+.who.with-class {
+  width: 108px;
+}
+
 .prow .who {
   width: auto;
   min-width: 0;
@@ -428,8 +432,9 @@ function onMenu(key: string, row: RankRow) {
   font-weight: 700;
 }
 
+/* 名字最长 4 个字；本年级 / 全服的榜名字后面还有班号（2026-11 之前是 126px，放的是 ks2312李鑫楠） */
 .who {
-  width: 126px;
+  width: 80px;
   flex-shrink: 0;
   padding: 0;
   border: 0;
diff --git a/apps/web/src/oj/rank/components/WeekTop.vue b/apps/web/src/oj/rank/components/WeekTop.vue
index ca55a15..0b7f798 100644
--- a/apps/web/src/oj/rank/components/WeekTop.vue
+++ b/apps/web/src/oj/rank/components/WeekTop.vue
@@ -84,8 +84,9 @@ const scale = computed(() => top.value[0]?.solved || 1)
   color: v-bind('theme.textColor2');
 }
 
+/* 本班的周榜，只写名字（最长 4 个字；2026-11 之前放的是 ks2312李鑫楠） */
 .who {
-  width: 120px;
+  width: 80px;
   flex-shrink: 0;
   padding: 0;
   border: 0;
diff --git a/apps/web/src/oj/statistics/components/CodeStats.vue b/apps/web/src/oj/statistics/components/CodeStats.vue
index b901585..3372fe7 100644
--- a/apps/web/src/oj/statistics/components/CodeStats.vue
+++ b/apps/web/src/oj/statistics/components/CodeStats.vue
@@ -583,8 +583,9 @@ function pct(done: number, total: number) {
   display: flex;
   color: v-bind('theme.textColor3');
 }
+/* 名字最长 4 个字（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽） */
 .c-name {
-  width: 110px;
+  width: 80px;
   flex: none;
 }
 .c-last {
diff --git a/apps/web/src/oj/statistics/components/FlowStats.vue b/apps/web/src/oj/statistics/components/FlowStats.vue
index 24f81a5..48f69a0 100644
--- a/apps/web/src/oj/statistics/components/FlowStats.vue
+++ b/apps/web/src/oj/statistics/components/FlowStats.vue
@@ -418,8 +418,9 @@ function gradeStyle(grade: string | null) {
   font-size: var(--oj-fs-sec);
 }
 
+/* 名字最长 4 个字（2026-11 去掉 ks 前缀之前是按 ks2312李鑫楠 定的宽） */
 .p-name {
-  width: 110px;
+  width: 80px;
   flex: none;
 }
 
diff --git a/apps/web/src/oj/submission/list.vue b/apps/web/src/oj/submission/list.vue
index 011ea52..96d8f52 100644
--- a/apps/web/src/oj/submission/list.vue
+++ b/apps/web/src/oj/submission/list.vue
@@ -756,7 +756,9 @@ function dayBreak(index: number) {
               <div class="row" :class="{ on: row.id === selectedId && !isMobile, 'two-line': twoLine }" :data-row-id="row.id" @click="rowClicked(row)">
                 <template v-if="!twoLine">
                   <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
-                  <span class="c-user"><UserName :username="row.username" :class-name="mixedClasses ? row.className : null" short-class /></span>
+                  <span class="c-user" :class="{ 'with-class': mixedClasses }"
+                    ><UserName :username="row.username" :class-name="mixedClasses ? row.className : null" short-class
+                  /></span>
                   <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
                     <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
                   </span>
@@ -786,7 +788,7 @@ function dayBreak(index: number) {
               <div class="row" :class="{ on: row.id === selectedId && !isMobile, 'two-line': twoLine }" :data-row-id="row.id" @click="rowClicked(row)">
                 <template v-if="!twoLine">
                   <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
-                  <span class="c-user">
+                  <span class="c-user" :class="{ 'with-class': mixedClasses }">
                     <UserName :username="row.username" :class-name="mixedClasses ? row.className : null" short-class :muted="othersRow(row)" />
                   </span>
                   <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
@@ -1356,13 +1358,19 @@ function dayBreak(index: number) {
   border-bottom: 1px solid v-bind('theme.dividerColor');
 }
 
+/* 名字最长 4 个字（在读的班 423 人里 5 人），2026-11 去掉 ks 前缀之前是 116px（ks2312李鑫楠）。
+   混着几个班时名字后面还有班号（李鑫楠 2312） */
 .c-user {
-  width: 116px;
+  width: 80px;
   flex: none;
   display: flex;
   overflow: hidden;
 }
 
+.c-user.with-class {
+  width: 108px;
+}
+
 .c-problem {
   flex: 1 1 0;
   min-width: 0;
diff --git a/apps/web/src/oj/task/components/LeaveModal.vue b/apps/web/src/oj/task/components/LeaveModal.vue
index 14ebfb7..c62c2c2 100644
--- a/apps/web/src/oj/task/components/LeaveModal.vue
+++ b/apps/web/src/oj/task/components/LeaveModal.vue
@@ -106,7 +106,7 @@ function save() {
 
 .leave-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
   gap: 10px 8px;
 }
 
diff --git a/apps/web/src/shared/components/UserName.vue b/apps/web/src/shared/components/UserName.vue
index 79b8dc9..23bf5cc 100644
--- a/apps/web/src/shared/components/UserName.vue
+++ b/apps/web/src/shared/components/UserName.vue
@@ -9,7 +9,7 @@ import { classLabel } from 'utils/classes'
  *
  * `className` 给了就在名字后面淡写班级：一页上混着几个班（全服排名、全部提交、举手列表）时用，
  * 不同班同名的人（252、253 都有杨涵宇）靠它分开。一页只有一个班的别传。
- * `shortClass`：窄的定宽列（提交列表的名字列 116px）里只写班号（`李鑫楠 2312`），和原来 `ks2312李鑫楠` 一样宽。
+ * `shortClass`：定宽的名字列（提交列表、排名赛道，带班号时 108px）里只写班号（`李鑫楠 2312`），全称放不下。
  * `muted` 用在学生看别人的那几行（看得到结果、看不到代码）。悬停看得到完整用户名。
  */
 const props = defineProps<{ username: string; muted?: boolean; className?: string | null; shortClass?: boolean }>()