refactor(前端): 全站共用的班级下拉、胶囊配色挪出提交列表目录，编辑器不再偷读题目页的 store

- classLabel / groupClassOptions / classSelectOptions 挪到 utils/classes.ts，useTone 挪到
  shared/composables/tone.ts：原来放在 oj/submission/ 下，被前台、后台、shared 引了 50 多处
- 流程图编辑器的草稿键改由题目页传进来（键名不变，学生存着的草稿照样读得到）。原来编辑器
  自己读题目页的 store 和路由拼，后台出题页也用这个组件，那边 store 是空的
- SQL 表名补全改由题目页传表进来。原来补全直接读题目页的 store，自学页的 SQL 代码块会
  补出上一道看过的题的表名

实跑：提交列表、题目页、排名、后台题目页、SQL 题、流程图题打开无报错；SQL 题输入 stu
补出 students；流程图加一步，草稿照旧存在 flowchart-v2-problem-<题号>。

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

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

@@ -120,6 +120,19 @@ onMounted(loadCode)
 
 watch(() => problem.value?._id, loadCode)
 
+/**
+ * 流程图草稿：每道题一份；题单入口单独一份 —— 加入题单之前在题库里画到 A 的那张，不能一进
+ * 题单就摆在画布上（设计文档第 11 节 3，和代码草稿同理）。
+ * 键名带 v2：2026-10 之前的草稿是 vue-flow 的格式，读不了，也不去覆盖它
+ */
+const flowchartDraftKey = computed(() => {
+  const id = problem.value?._id
+  if (!id) return "flowchart-v2"
+  const base = `flowchart-v2-problem-${id}`
+  const problemSetId = route.params.problemSetId
+  return problemSetId ? `${base}-problemset-${problemSetId}` : base
+})
+
 /**
  * 存本地草稿。**协作中的教师不存** —— 那会儿编辑器里是学生的代码，存下去就把
  * 老师自己在这道题上的草稿盖掉了（他可能正开着自己的解法）。学生照存，那是他本人的。
@@ -219,6 +232,7 @@ onBeforeUnmount(() => flowchartStore.attachEditor(null))
       v-if="codeStore.code.language === 'Flowchart'"
       ref="flowchartEditorRef"
       :height="editorHeight"
+      :draft-key="flowchartDraftKey"
     />
     <SyncCodeEditor
       v-else
@@ -226,6 +240,7 @@ onBeforeUnmount(() => flowchartStore.attachEditor(null))
       :language="codeStore.code.language"
       :problem-id="problem!._id"
       :collab="ctx.collab"
+      :sql-tables="problem?.sqlDisplay?.tables"
       :height="editorHeight"
       :extra-extensions="editorExtensions"
       :font-size="isDesktop ? 20 : 15"