feat(提交列表): 重做成左边列表、右边代码，方向键一条条翻，不再开弹框

- 右栏常驻选中那条的代码：编译失败 / 运行时错误用中文说清第几行错了并标红，
  老师看得到逐个测试点，学生看别人的只显示结果
- 老师一键「这节课」：筛到正在上课的班、这节课的题、今天
- 「正在评分」的行自己变成结果；新交的不插队，顶上提示「有 N 条新提交」
- 按天分组、默认每页 30 条；状态筛选补全，语言补上 SQL；流程图的评分详情也放进右栏
- 课堂看板的格子和名字能直接点进这个学生今天的提交

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

apps/web/src/oj/submission/components/FlowchartState.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { FlowchartSubmissionStatus } from "utils/types"
+import { useTone, type Tone } from "../composables/tone"
+
+/**
+ * 流程图提交在列表里的那个胶囊：评完的直接是「A 级 86 分」，没评完的是
+ * 排队中 / 评分中 / 评分失败。原来等级、分数、状态分三列，老师要横着对。
+ */
+const props = defineProps<{
+  status: number
+  grade: string | null
+  score: number | null
+}>()
+
+const tone = useTone()
+
+const GRADE_TONE: Record<string, Tone> = { S: "success", A: "info", B: "warning", C: "error" }
+
+const view = computed(() => {
+  if (props.status === FlowchartSubmissionStatus.COMPLETED && props.grade) {
+    return { tone: GRADE_TONE[props.grade] ?? "default", grade: props.grade, text: "" }
+  }
+  if (props.status === FlowchartSubmissionStatus.FAILED) {
+    return { tone: "error" as const, grade: "", text: "评分失败" }
+  }
+  if (props.status === FlowchartSubmissionStatus.PROCESSING) {
+    return { tone: "info" as const, grade: "", text: "评分中" }
+  }
+  return { tone: "default" as const, grade: "", text: "排队中" }
+})
+
+const colors = computed(() => tone(view.value.tone))
+</script>
+
+<template>
+  <span class="pill" :style="{ color: colors.color, background: colors.background }">
+    <template v-if="view.grade">
+      <b>{{ view.grade }} 级</b><span class="score">{{ score ?? 0 }} 分</span>
+    </template>
+    <template v-else>{{ view.text }}</template>
+  </span>
+</template>
+
+<style scoped>
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex: none;
+}
+
+.score {
+  font-weight: 400;
+}
+</style>