style(题目): 题目页照设计稿「机房（方案 B）」重排——顶满的两栏、带底色的上下文条、下划线页签、新的结果和题面样式

原来实施时只照了设计文档，没对照设计稿，一路套 Naive 现成的分段页签、提示框、单选组，
功能对了、样子差很多。这次逐块对着设计稿的画板改：

- 两栏顶满内容区，中间一条 1px 分隔线；上下文条、页签行、工具栏下面各一道分隔线
- 上下文条：课堂浅绿、题单浅蓝、比赛浅黄三种底色；‹ › 是不带边框的箭头；比赛的题号是方角、
  做错的是红色 ✕；手机上不摆一排题号，写「这节课 做完 2/5 · 这是第 3 道」配 44px 的箭头
- 「题目 / 结果」是下划线页签，右边「统计 / 点评 / 我的提交」是胶囊按钮
- 抽屉盖住整个左栏（连上下文条、页签行），顶上有自己的「我的提交 / 统计 / 点评」页签，Esc 能关
- 结果页签：三个分段是胶囊，选中的深色实心、带时间（「提交结果 · 10:42」）；标题是圆形图标 +
  大字 + 灰字（「答案错误　在例子 1 上就错了」），不再套整块彩色提示框；答错的对比三栏并排、
  只把不一样的那几个字标红；「题目要求的输出」是一行小字；「让 AI 分析我的代码」是描边按钮；
  答对后的「下一题」是浅绿卡片里 44px 的大按钮
- 工具栏：语言、运行例子（描边）、提交（实心，就叫「提交」）靠左，求助、⋯ 推到最右；
  交对之后「提交」变成绿色描边；协作条换成设计稿的深蓝
- 题面：标题下「简单 · 还没交过」，流程图过关的加「流程图 A 级」；代码要求压成一行；
  小标题不带图标；输入、输出左右两栏；参考流程图是一行可以点开的条；例子表带「例子 1」和「复制」
- 去掉「限时 1 秒」：执行时间、内存对中职学生只会添迷惑（和设计稿不同，用户定的）
- 我的提交：一整块带框的列表，结果用彩色文字；展开的代码先露 5 行；题单锁住的几次合成一行
- 错在隐藏测试点时「去自己输入」给的数跳过例子里出现过的

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

apps/web/src/oj/problem/components/ProblemDrawer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useThemeVars } from "naive-ui"
 import { storeToRefs } from "pinia"
 import { useProblemStore } from "oj/store/problem"
 import { useUserStore } from "shared/store/user"
@@ -11,7 +12,8 @@ import { useTeacherCollab } from "../composables/teacherCollab"
 
 /**
  * 统计 / 点评 / 我的提交。原来是左栏的三个页签，课上几乎没人点，却和「题目」挤在一排；
- * 现在收进抽屉，盖住左栏、编辑器不动。
+ * 现在收进抽屉：盖住整个左栏（连上下文条、页签行），编辑器不动；抽屉顶上有自己的页签，
+ * 三样之间直接切（设计稿「我的提交 / 统计 / 点评：抽屉盖住左栏」）。
  *
  * 抽屉里的内容关上就卸载：再打开时「我的提交」要重新拉，刚交的那次才看得见。
  */
@@ -23,9 +25,21 @@ const open = defineModel<ProblemDrawer | null>({ required: true })
 
 const props = defineProps<{
   /** 桌面：挂进左栏（它得是 position: relative）；手机：不传，从底下拉起来盖住整屏 */
-  to?: string
+  to?: HTMLElement | null
 }>()
 
+/** 抽屉顶上的页签，顺序照设计稿：最常看的「我的提交」在前 */
+const tabs = computed(() =>
+  (["submission", "info", "reaction"] as const).filter((key) => ctx.value.drawers.includes(key)),
+)
+
+const theme = useThemeVars()
+
+// trap-focus 关着（编辑器还要能点），焦点不在抽屉里时 Naive 自己的 Esc 不生效，这里补一个
+useEventListener(document, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "Escape" && open.value) open.value = null
+})
+
 const ctx = useProblemPageContext()
 const route = useRoute()
 const router = useRouter()
@@ -54,13 +68,8 @@ watch(
   },
 )
 
-// 协作中的老师看的是学生的提交（ProblemSubmission 里按学生用户名查）
+// 协作中的老师看的是学生的提交（ProblemSubmission 里按学生用户名查），页签写「他的提交」
 const teacherCollab = useTeacherCollab()
-const drawerTitle = computed(() =>
-  lastOpened.value === "submission" && teacherCollab.value
-    ? "他的提交"
-    : DRAWER_TITLE[lastOpened.value],
-)
 
 /**
  * 「看这道题所有人的提交」，原来是工具栏上的「本题提交」。可见条件照旧：
@@ -90,34 +99,118 @@ function goAllSubmissions() {
 <template>
   <n-drawer
     v-model:show="show"
-    :to="props.to"
+    :to="props.to ?? undefined"
     :placement="props.to ? 'left' : 'bottom'"
     :width="props.to ? '100%' : undefined"
     :height="props.to ? undefined : '85%'"
     :trap-focus="false"
     :block-scroll="!props.to"
   >
-    <n-drawer-content :title="drawerTitle" closable :native-scrollbar="false">
+    <n-drawer-content
+      :native-scrollbar="false"
+      :header-style="{ padding: 0 }"
+      :body-content-style="{ padding: '16px 20px' }"
+    >
+      <template #header>
+        <div class="drawer-head">
+          <div class="drawer-tabs" role="tablist">
+            <button
+              v-for="key in tabs"
+              :key="key"
+              type="button"
+              role="tab"
+              class="drawer-tab"
+              :class="{ active: lastOpened === key }"
+              :aria-selected="lastOpened === key"
+              @click="open = key"
+            >
+              {{ key === "submission" && teacherCollab ? "他的提交" : DRAWER_TITLE[key] }}
+            </button>
+          </div>
+          <button type="button" class="drawer-close" aria-label="关闭" @click="open = null">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+            >
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
+        </div>
+      </template>
       <ProblemInfo v-if="lastOpened === 'info'" />
       <ProblemReaction v-else-if="lastOpened === 'reaction'" />
       <template v-else>
         <ProblemSubmission />
-        <n-button
-          v-if="showAllSubmissions"
-          class="all-submissions"
-          text
-          type="primary"
-          @click="goAllSubmissions"
-        >
-          看这道题所有人的提交 ›
-        </n-button>
+        <div v-if="showAllSubmissions" class="all-submissions">
+          <n-button text type="primary" @click="goAllSubmissions">看这道题所有人的提交 ›</n-button>
+        </div>
       </template>
     </n-drawer-content>
   </n-drawer>
 </template>
 
 <style scoped>
+.drawer-head {
+  height: 48px;
+  box-sizing: border-box;
+  padding: 0 12px 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.drawer-tabs {
+  display: flex;
+  height: 100%;
+}
+
+.drawer-tab {
+  height: 48px;
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  font-weight: normal;
+  color: v-bind("theme.textColor3");
+  cursor: pointer;
+}
+
+.drawer-tab.active {
+  border-bottom-color: v-bind("theme.primaryColor");
+  color: v-bind("theme.textColor1");
+  font-weight: 600;
+}
+
+.drawer-close {
+  margin-left: auto;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: v-bind("theme.textColor2");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.drawer-close:hover {
+  background-color: v-bind("theme.hoverColor");
+}
+
 .all-submissions {
   margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 13px;
 }
 </style>