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/shared/components/FlowchartEditor/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useThemeVars } from "naive-ui"
 import storage from "utils/storage"
-import { useProblemStore } from "oj/store/problem"
 import {
   cloneDoc,
   emptyDoc,
@@ -35,8 +34,17 @@ interface Props {
    * false：图交给外面管（后台出题页的参考流程图，v-model:value），不存草稿
    */
   draft?: boolean
+  /**
+   * 草稿存在哪个键下，由题目页给（见 ProblemEditor.vue 的 flowchartDraftKey）。原来是这里
+   * 自己读题目页的 store 和路由拼出来的，后台出题页也用这个组件，那边 store 是空的
+   */
+  draftKey?: string
 }
-const { height = "calc(100vh - 134px)", draft = true } = defineProps<Props>()
+const {
+  height = "calc(100vh - 134px)",
+  draft = true,
+  draftKey = "flowchart-v2",
+} = defineProps<Props>()
 const model = defineModel<FlowDoc | null>("value", { default: null })
 
 const message = useMessage()
@@ -86,20 +94,7 @@ function redo() {
 
 // ==================== 草稿 ====================
 
-const problemStore = useProblemStore()
-const route = useRoute()
-/**
- * 每道题一份草稿；题单入口单独一份：加入题单之前在题库里画到 A 的那张，不能一进题单就
- * 摆在画布上（设计文档第 11 节 3，和代码草稿同理）。
- * 键名带 v2：2026-10 之前的草稿是 vue-flow 的格式，这里读不了，也不去覆盖它
- */
-const cacheKey = computed(() => {
-  const id = problemStore.problem?._id
-  if (!id) return "flowchart-v2"
-  const base = `flowchart-v2-problem-${id}`
-  const problemSetId = route.params.problemSetId
-  return problemSetId ? `${base}-problemset-${problemSetId}` : base
-})
+const cacheKey = computed(() => draftKey)
 
 const savedAt = ref<Date | null>(null)
 

apps/web/src/shared/components/Login.vue

@@ -2,7 +2,7 @@
 import { Icon } from "@iconify/vue"
 import { useThemeVars } from "naive-ui"
 import RankAvatar from "oj/rank/components/RankAvatar.vue"
-import { classLabel, groupClassOptions } from "oj/submission/utils"
+import { classLabel, groupClassOptions } from "utils/classes"
 import { errorCode } from "utils/api"
 import { STORAGE_KEY } from "utils/constants"
 import storage from "utils/storage"

apps/web/src/shared/components/SyncCodeEditor.vue

@@ -7,7 +7,7 @@ import type { Extension } from "@codemirror/state"
 import type { LANGUAGE } from "utils/types"
 import { darkCodeTheme, lightCodeTheme } from "../themes/codeTheme"
 import { styleTheme } from "shared/extensions/baseTheme"
-import { enhanceCompletion } from "shared/extensions/autocompletion"
+import { enhanceCompletion, type SqlTables } from "shared/extensions/autocompletion"
 import { languageExtension } from "shared/extensions/language"
 import { useCollabDoc } from "../composables/collabDoc"
 import { useCollabStore } from "shared/store/collab"
@@ -38,6 +38,8 @@ interface Props {
    * 光比对题号挡不住（见 problemPageContext 的 `collab`）
    */
   collab?: boolean
+  /** SQL 题的表，给补全用（表名、字段名） */
+  sqlTables?: SqlTables
 }
 
 const {
@@ -49,6 +51,7 @@ const {
   extraExtensions = [],
   problemId = "",
   collab = true,
+  sqlTables = [],
 } = defineProps<Props>()
 const code = defineModel<string>("value")
 
@@ -61,7 +64,7 @@ const extensions = computed(() => [
   closeBrackets(),
   isDark.value ? darkCodeTheme : lightCodeTheme,
   autocompletion({
-    override: [enhanceCompletion(language), completeAnyWord],
+    override: [enhanceCompletion(language, () => sqlTables), completeAnyWord],
   }),
   getInitialExtension(),
   ...extraExtensions,