From 1026b8f9a27b1201f452bb5cd5dcbcbc3bfa06c0 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 28 Sep 2026 18:49:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A2=98=E7=9B=AE):=20=E5=B7=A6=E6=A0=8F?=
 =?UTF-8?q?=E6=8B=96=E5=AE=BD=E3=80=81=E5=8F=B3=E6=A0=8F=E7=AA=84=E4=BA=8E?=
 =?UTF-8?q?=20600px=20=E6=97=B6=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=94=B6?=
 =?UTF-8?q?=E4=B8=80=E6=94=B6=EF=BC=8C=E4=B8=8D=E5=86=8D=E6=8A=98=E6=88=90?=
 =?UTF-8?q?=E4=B8=A4=E8=A1=8C=E6=8A=8A=E7=BC=96=E8=BE=91=E5=99=A8=E5=BE=80?=
 =?UTF-8?q?=E4=B8=8B=E6=8C=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

「课堂统计」收进「⋯」，「写代码 / 画流程图」缩成「代码 / 流程图」，按钮间距收窄。
语言下拉不收：窄于 120px 时图标和「Python」会被挤成两行

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../oj/problem/components/EditorToolbar.vue   | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/oj/problem/components/EditorToolbar.vue b/apps/web/src/oj/problem/components/EditorToolbar.vue
index 7802337..94c8853 100644
--- a/apps/web/src/oj/problem/components/EditorToolbar.vue
+++ b/apps/web/src/oj/problem/components/EditorToolbar.vue
@@ -136,10 +136,21 @@ const toggleHelp = () => {
     collabStore.requestHelp(problem.value!._id, codeStore.code.language)
 }
 
+/**
+ * 右栏窄于 600px（学生把左栏拖宽看长题面、宽 SQL 表时）：工具栏折成两行会把编辑器往下挤，
+ * 所以次要的按钮收进「更多」、「写代码 / 画流程图」缩短一点（设计文档 5.4）。语言下拉不收：
+ * 窄于 120px 时图标和「Python」会被挤成两行
+ */
+const toolbarRef = useTemplateRef<{ $el: HTMLElement }>("toolbarRef")
+const { width: toolbarWidth } = useElementSize(() => toolbarRef.value?.$el)
+const narrow = computed(() => isDesktop.value && toolbarWidth.value > 0 && toolbarWidth.value < 600)
+/** 「课堂统计」常驻在工具栏上：桌面、而且放得下 */
+const statisticsInline = computed(() => isDesktop.value && !narrow.value)
+
 const menuOptions = computed<DropdownOption[]>(() => {
   const options: DropdownOption[] = []
-  // 移动端额外收纳桌面端常驻的「课堂统计」。「本题提交」挪到了「我的提交」抽屉的底部
-  if (!isDesktop.value && userStore.isTeacherOrAbove) {
+  // 放不下时（手机、右栏太窄）收进来的「课堂统计」。「本题提交」挪到了「我的提交」抽屉的底部
+  if (!statisticsInline.value && userStore.isTeacherOrAbove) {
     options.push({
       label: "课堂统计",
       key: "statistics",
@@ -261,11 +272,11 @@ const goEdit = () => {
 </script>
 
 <template>
-  <n-flex align="center">
+  <n-flex ref="toolbarRef" align="center" :size="narrow ? 8 : 12">
     <!-- 协作中的老师不会落到画图：求助入口本身就排掉了流程图 -->
     <n-radio-group v-if="canDraw && !showCollabBar" v-model:value="mode" :size="buttonSize">
-      <n-radio-button value="code">写代码</n-radio-button>
-      <n-radio-button value="draw">画流程图</n-radio-button>
+      <n-radio-button value="code">{{ narrow ? "代码" : "写代码" }}</n-radio-button>
+      <n-radio-button value="draw">{{ narrow ? "流程图" : "画流程图" }}</n-radio-button>
     </n-radio-group>
 
     <!-- 协作中编辑器的语言跟着学生走，这个选择器改了也不会生效，索性禁掉 -->
@@ -295,21 +306,23 @@ const goEdit = () => {
     <SubmitCode v-else-if="isDesktop" />
 
     <n-button
-      v-if="isDesktop && userStore.isTeacherOrAbove"
+      v-if="statisticsInline && userStore.isTeacherOrAbove"
       :size="buttonSize"
       @click="statisticPanel = true"
     >
       课堂统计
     </n-button>
 
-    <!-- 自测猫 / 复制代码 / 重置代码 / 编辑题目 收进下拉菜单；移动端再加上课堂统计 -->
+    <!-- 自测猫 / 复制代码 / 重置代码 / 编辑题目 收进下拉菜单；放不下时再加上课堂统计 -->
     <n-dropdown
       v-if="menuOptions.length"
       trigger="click"
       :options="menuOptions"
       @select="handleMenuSelect"
     >
-      <n-button :size="buttonSize">更多</n-button>
+      <n-button :size="buttonSize" :title="narrow ? '更多' : undefined">
+        {{ narrow ? "⋯" : "更多" }}
+      </n-button>
     </n-dropdown>
 
     <n-button