From 2cb39fd96b967f416eb5a4a9cee456a12b8fcc06 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Fri, 9 Oct 2026 18:59:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=90=8E=E5=8F=B0):=20SQL=20=E9=A2=98?=
 =?UTF-8?q?=E6=9C=89=E4=BA=86=E8=87=AA=E5=B7=B1=E7=9A=84=E5=87=BA=E9=A2=98?=
 =?UTF-8?q?=E9=A1=B5=E2=80=94=E2=80=94=E5=B7=A6=E8=BE=B9=E5=86=99=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=B3=E8=BE=B9=E5=B0=B1=E6=98=AF=E5=AD=A6=E7=94=9F=E7=9C=8B?=
 =?UTF-8?q?=E5=88=B0=E7=9A=84=E6=A0=B7=E5=AD=90=EF=BC=8C=E6=94=B9=E7=AD=94?=
 =?UTF-8?q?=E6=A1=88=E3=80=81=E6=94=B9=E6=95=B0=E6=8D=AE=E9=A9=AC=E4=B8=8A?=
 =?UTF-8?q?=E9=87=8D=E8=B7=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 「新建题目」先选编程题还是 SQL 题，选了就不能改；编辑时按题目本身进对应的页
- SQL 出题页（设计稿「SQL 出题页」方案 B）：测试数据一组一行，改完自动重跑，
  跑不通的用中文说原因；保存时才打包上传测试点，不用再手动「预览」「上传」
- 新建时存草稿，误关页面不丢
- 编程题出题页去掉 SQL 那一堆分支（以前勾上 SQL 会静默清掉语法要求和流程图）
- 题目列表能按题型筛，SQL 题标题后面挂标签

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/api/src/routes/admin/problem.ts          |   12 +-
 apps/web/src/admin/api.ts                     |    4 +-
 apps/web/src/admin/problem/SqlDetail.vue      | 1012 +++++++++++++++++
 .../problem/components/CreateProblemMenu.vue  |  132 +++
 .../src/admin/problem/components/sqlScript.ts |   62 +
 apps/web/src/admin/problem/detail.vue         |  254 ++---
 apps/web/src/admin/problem/editor.vue         |   63 +
 apps/web/src/admin/problem/list.vue           |   47 +-
 apps/web/src/admin/transforms.ts              |    1 +
 apps/web/src/routes.ts                        |    8 +-
 apps/web/src/utils/constants.ts               |    1 +
 apps/web/src/utils/types.ts                   |    1 +
 packages/contract/src/admin.ts                |    2 +
 13 files changed, 1414 insertions(+), 185 deletions(-)
 create mode 100644 apps/web/src/admin/problem/SqlDetail.vue
 create mode 100644 apps/web/src/admin/problem/components/CreateProblemMenu.vue
 create mode 100644 apps/web/src/admin/problem/components/sqlScript.ts
 create mode 100644 apps/web/src/admin/problem/editor.vue

diff --git a/apps/api/src/routes/admin/problem.ts b/apps/api/src/routes/admin/problem.ts
index e614577..3eba647 100644
--- a/apps/api/src/routes/admin/problem.ts
+++ b/apps/api/src/routes/admin/problem.ts
@@ -1,5 +1,6 @@
 import {
   addContestProblemRequestSchema,
+  isSqlProblem,
   createProblemRequestSchema,
   generateSqlTestCaseRequestSchema,
   makeProblemPublicRequestSchema,
@@ -15,7 +16,7 @@ import {
   type SqlTestCaseScript,
   type UploadTestCaseResponse,
 } from "@oj2/contract"
-import { and, count, desc, eq, ilike, inArray, isNull, ne, or, sql } from "drizzle-orm"
+import { and, count, desc, eq, ilike, inArray, isNull, ne, not, or, sql } from "drizzle-orm"
 import { Hono } from "hono"
 
 import { requireProblemPermission, type AppEnv } from "../../auth/middleware"
@@ -216,7 +217,7 @@ function commonChecks(data: {
 }): { error: string } | { sql: boolean } {
   const astError = astRulesError(pickAstRules(data.astRules, data.languages))
   if (astError) return { error: astError }
-  if (data.languages.includes("SQL")) {
+  if (isSqlProblem(data)) {
     if (data.languages.length !== 1)
       return { error: "SQL problem cannot be mixed with other languages" }
     if (!data.sqlConfig) return { error: "SQL problem requires sql_config" }
@@ -397,6 +398,11 @@ adminProblemRoutes.get("/problems", requireProblemPermission, async (c) => {
   const author = c.req.query("author")?.trim()
   const keyword = c.req.query("keyword")?.trim()
   const tagId = c.req.query("tagId")?.trim()
+  // 题型：sql = SQL 题，code = 编程题（C / C++ / Python）
+  const kind = c.req.query("kind")
+  const sqlOnly = sql`${schema.problem.languages} @> '["SQL"]'::jsonb`
+  if (kind === "sql") filters.push(sqlOnly)
+  else if (kind === "code") filters.push(not(sqlOnly))
   if (author) filters.push(eq(schema.user.username, author))
   if (keyword) {
     filters.push(
@@ -456,6 +462,7 @@ adminProblemRoutes.get("/problems", requireProblemPermission, async (c) => {
           createTime: problem.createTime,
           difficulty: problem.difficulty,
           tags: tags.get(problem.id) ?? [],
+          isSql: isSqlProblem(problem),
           hasAstRules: problem.astRules !== null,
           allowFlowchart: problem.allowFlowchart,
           showFlowchart: problem.showFlowchart,
@@ -637,6 +644,7 @@ adminProblemRoutes.get("/contests/:contestId/problems", requireProblemPermission
           createTime: problem.createTime,
           difficulty: problem.difficulty,
           tags: tags.get(problem.id) ?? [],
+          isSql: isSqlProblem(problem),
           hasAstRules: problem.astRules !== null,
           allowFlowchart: problem.allowFlowchart,
           showFlowchart: problem.showFlowchart,
diff --git a/apps/web/src/admin/api.ts b/apps/web/src/admin/api.ts
index 31672de..186cccc 100644
--- a/apps/web/src/admin/api.ts
+++ b/apps/web/src/admin/api.ts
@@ -63,10 +63,12 @@ export async function getProblemList(
   author?: string,
   contestID?: string,
   tagId?: number,
+  /** 题型：sql = SQL 题，code = 编程题；不传是全部（比赛题列表不认） */
+  kind?: "sql" | "code" | "",
 ) {
   const endpoint = contestID ? `admin/contests/${contestID}/problems` : "admin/problems"
   const res = await api.get<AdminProblemList>(endpoint, {
-    params: { offset, limit, keyword, author, tagId },
+    params: { offset, limit, keyword, author, tagId, kind: kind || undefined },
   })
   return {
     results: res.results.map(toAdminProblemRow),
diff --git a/apps/web/src/admin/problem/SqlDetail.vue b/apps/web/src/admin/problem/SqlDetail.vue
new file mode 100644
index 0000000..afad4e8
--- /dev/null
+++ b/apps/web/src/admin/problem/SqlDetail.vue
@@ -0,0 +1,1012 @@
+<script setup lang="ts">
+import { EditorView } from "@codemirror/view"
+import { PROBLEM_TAG_MAX_LENGTH } from "@oj2/contract"
+import { MdPreview } from "md-editor-v3"
+import "md-editor-v3/lib/preview.css"
+import { StorageSerializers } from "@vueuse/core"
+import { useThemeVars } from "naive-ui"
+import PageHeader from "admin/components/PageHeader.vue"
+import ProblemTypeTag from "oj/problem/components/ProblemTypeTag.vue"
+import SqlProblemData from "oj/problem/components/SqlProblemData.vue"
+import { getProblemTagList } from "shared/api"
+import TextEditor from "shared/components/TextEditor.vue"
+import { errorCode, errorMessage, isApiError } from "utils/api"
+import { DIFFICULTY, STORAGE_KEY } from "utils/constants"
+import { createZipBlob, getTagColor, unique } from "utils/functions"
+import type { AdminProblem, BlankProblem, SqlConfig, Tag, Testcase } from "utils/types"
+import {
+  createContestProblem,
+  createProblem,
+  editProblem,
+  generateSQLTestcase,
+  getSQLTestcaseScripts,
+  previewSQLTestcase,
+  uploadTestcases,
+} from "../api"
+import {
+  explainSqlError,
+  groupSummary,
+  type GroupStatus,
+  type ScriptGroup,
+} from "./components/sqlScript"
+
+const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
+/** 标准答案常是一长行，出题页左栏才 560 宽：折行，别横着滚。给稳定的数组，见 CodeEditor 的注释 */
+const wrapLines = [EditorView.lineWrapping]
+
+/**
+ * SQL 题的出题页（设计稿「SQL 出题页」方案 B）：左边写，右边就是学生打开这道题看到的样子。
+ *
+ * 和编程题分成两页，是因为两种题要填的东西几乎不重合 —— 没有输入输出说明和样例，
+ * 测试数据是建表脚本而不是输入 / 输出对，标准答案是判题依据而不是给 AI 看的参考。
+ * 题型在新建时选定（后台题目列表的「新建题目」），之后不能改。
+ *
+ * 测试数据改了不用手动「预览」「上传」：改完自动重跑，保存时再打包上传。
+ */
+const props = defineProps<{
+  problemID?: string
+  contestID?: string
+  /** 编辑时外层已经拉过一次题目（要靠它判断题型），直接给进来 */
+  initial?: AdminProblem | null
+}>()
+
+const message = useMessage()
+const router = useRouter()
+const theme = useThemeVars()
+const isDark = useDark()
+
+const isCreate = computed(() => !props.problemID)
+
+// ---------------------------------------------------------------- 表单
+
+interface SqlForm {
+  _id: string
+  title: string
+  difficulty: BlankProblem["difficulty"]
+  visible: boolean
+  tags: string[]
+  description: string
+  hint: string
+  source: string
+  prompt: string
+  memoryLimit: number
+  timeLimit: number
+  sqlConfig: SqlConfig
+  answer: string
+}
+
+const blankForm = (): SqlForm => ({
+  _id: "",
+  title: "",
+  difficulty: "Low",
+  visible: false,
+  tags: ["SQL"],
+  description: "",
+  hint: "",
+  source: "",
+  prompt: "",
+  memoryLimit: 64,
+  timeLimit: 1000,
+  sqlConfig: { mode: "query", order_sensitive: false },
+  answer: "",
+})
+
+const form = reactive<SqlForm>(blankForm())
+
+/** 富文本编辑器清空之后留下的是一个空段落，不是空串 */
+const isBlankHtml = (html: string) => !html.trim() || html === "<p><br></p>"
+
+const difficultyOptions = (["Low", "Mid", "High"] as const).map((value) => ({
+  label: DIFFICULTY[value],
+  value,
+}))
+const testCase = reactive({ id: "", score: [] as Testcase[] })
+
+let nextKey = 0
+function newGroup(sql = ""): ScriptGroup {
+  return { key: nextKey++, sql, ranFor: "", display: null, error: "", errorRaw: "", running: "" }
+}
+const groups = ref<ScriptGroup[]>([])
+const selected = ref(0)
+/** 打开时库里那几份脚本：没改过就不用重新上传 */
+let savedScripts: string[] = []
+/** 已有的测试数据没读出来。空白编辑器和「本来就没有」长得一样，必须说出来 */
+const loadError = ref("")
+
+const showMore = ref(false)
+const ready = ref(false)
+
+// 新建时存草稿：出一道 SQL 题要写好几段脚本，误关页面全没了太亏
+// 初值是 null 时 VueUse 推不出类型，会拿 String() 存成 "[object Object]"，得显式指定
+const draft = useLocalStorage<{ form: SqlForm; scripts: string[] } | null>(
+  STORAGE_KEY.ADMIN_SQL_PROBLEM,
+  null,
+  { serializer: StorageSerializers.object },
+)
+
+watchDebounced(
+  () => [form, groups.value.map((g) => g.sql)] as const,
+  () => {
+    if (!ready.value || !isCreate.value) return
+    const scripts = groups.value.map((g) => g.sql)
+    const empty =
+      !form._id &&
+      !form.title &&
+      isBlankHtml(form.description) &&
+      !form.answer &&
+      !scripts.some(Boolean)
+    draft.value = empty ? null : { form: { ...form }, scripts }
+  },
+  { debounce: 800, deep: true },
+)
+
+function clearDraft() {
+  draft.value = null
+  Object.assign(form, blankForm())
+  groups.value = [newGroup(), newGroup()]
+  selected.value = 0
+}
+
+async function load() {
+  if (isCreate.value) {
+    // 草稿是本机存的，形状不对（旧版本、被别的页面写坏）就当没有，别让整页起不来
+    const saved = draft.value
+    if (saved && typeof saved.form === "object" && Array.isArray(saved.scripts)) {
+      Object.assign(form, blankForm(), saved.form)
+      groups.value = saved.scripts.map((sql) => newGroup(String(sql)))
+    } else {
+      draft.value = null
+    }
+    if (groups.value.length < 2) groups.value = [newGroup(), newGroup()]
+    ready.value = true
+    return
+  }
+  const data = props.initial
+  if (!data) return
+  Object.assign(form, {
+    _id: data._id,
+    title: data.title,
+    difficulty: data.difficulty,
+    visible: data.visible,
+    tags: data.tags,
+    description: data.description,
+    hint: data.hint ?? "",
+    source: data.source ?? "",
+    prompt: data.prompt ?? "",
+    memoryLimit: data.memoryLimit,
+    timeLimit: data.timeLimit,
+    sqlConfig: data.sqlConfig ?? { mode: "query", order_sensitive: false },
+    answer: data.answers.find((a) => a.language === "SQL")?.code ?? "",
+  } satisfies SqlForm)
+  testCase.id = data.testCaseId
+  testCase.score = data.testCaseScore
+  try {
+    const scripts = await getSQLTestcaseScripts(data.id)
+    savedScripts = scripts.map((s) => s.content)
+    groups.value = savedScripts.map((sql) => newGroup(sql))
+  } catch (err) {
+    const code = errorCode(err)
+    // 测试点是旧格式（不是 SQL 脚本）时后端回 not-sql-test-case，当作「还没有」就对了
+    if (code !== "problem-not-found" && code !== "not-sql-test-case") {
+      const detail = isApiError(err) && typeof err.data === "string" ? `（${err.data}）` : ""
+      loadError.value =
+        `已有的测试数据没读出来${detail}。下面是空白的，不是这道题真实的测试数据 —— ` +
+        `直接保存会把它换掉，先排查测试点文件再改。`
+    }
+  }
+  if (groups.value.length < 2) {
+    while (groups.value.length < 2) groups.value.push(newGroup())
+  }
+  ready.value = true
+}
+
+// ---------------------------------------------------------------- 标签
+
+const tagList = shallowRef<Tag[]>([])
+const tagOptions = computed(() =>
+  unique([...tagList.value.map((t) => t.name), ...form.tags]).map((name) => ({
+    label: name,
+    value: name,
+  })),
+)
+
+function onTagsChange(tags: string[]) {
+  const tooLong = tags.find((t) => t.length > PROBLEM_TAG_MAX_LENGTH)
+  if (tooLong) {
+    message.error(`标签最多 ${PROBLEM_TAG_MAX_LENGTH} 个字：${tooLong}`)
+    return
+  }
+  form.tags = unique(tags.map((t) => t.trim()).filter(Boolean))
+}
+
+// ---------------------------------------------------------------- 测试数据：自动重跑
+
+/** 一组数据跑出来的结果取决于这三样，任何一样变了，原来的结果就作废 */
+const signatureOf = (g: ScriptGroup) => JSON.stringify([form.answer, form.sqlConfig.mode, g.sql])
+
+function statusOf(g: ScriptGroup): GroupStatus {
+  if (!g.sql.trim()) return "empty"
+  if (!form.answer.trim()) return "no-answer"
+  if (g.ranFor !== signatureOf(g)) return "running"
+  return g.error ? "error" : "ok"
+}
+
+async function run(g: ScriptGroup) {
+  const signature = signatureOf(g)
+  if (!g.sql.trim() || !form.answer.trim()) return
+  if (g.ranFor === signature || g.running === signature) return
+  g.running = signature
+  let display: ScriptGroup["display"] = null
+  let errorRaw = ""
+  try {
+    display = await previewSQLTestcase({
+      initSql: g.sql,
+      refSql: form.answer,
+      mode: form.sqlConfig.mode,
+    })
+  } catch (err) {
+    errorRaw =
+      isApiError(err) && typeof err.data === "string" ? err.data : errorMessage(err, "跑不起来")
+  }
+  // 跑的过程中又改了：这次的结果照样记下（ranFor 说明它对应哪一版），新的那版另有一次在跑
+  if (g.running === signature) g.running = ""
+  g.ranFor = signature
+  g.display = display
+  g.error = errorRaw && explainSqlError(errorRaw)
+  g.errorRaw = errorRaw
+}
+
+function runAll() {
+  groups.value.forEach((g) => void run(g))
+}
+
+watchDebounced(
+  () => [form.answer, form.sqlConfig.mode, groups.value.map((g) => g.sql)] as const,
+  runAll,
+  { debounce: 600, deep: true },
+)
+
+function addGroup() {
+  groups.value.push(newGroup())
+  selected.value = groups.value.length - 1
+}
+
+function removeGroup(index: number) {
+  groups.value.splice(index, 1)
+  if (selected.value >= groups.value.length) selected.value = groups.value.length - 1
+}
+
+const generating = ref(false)
+
+async function generateGroup() {
+  generating.value = true
+  try {
+    const res = await generateSQLTestcase({ refSql: form.answer, mode: form.sqlConfig.mode })
+    // 有空着的组就填进去，没有再加一组
+    const blank = groups.value.findIndex((g) => !g.sql.trim())
+    if (blank >= 0) {
+      groups.value[blank]!.sql = res.sql
+      selected.value = blank
+    } else {
+      groups.value.push(newGroup(res.sql))
+      selected.value = groups.value.length - 1
+    }
+  } catch (err) {
+    message.error(errorMessage(err, "AI 没写出来，稍后再试"))
+  } finally {
+    generating.value = false
+  }
+}
+
+const current = computed(() => groups.value[selected.value])
+
+// ---------------------------------------------------------------- 保存
+
+/** 为什么还不能保存。按出题的顺序查，只说第一条 */
+const blocker = computed(() => {
+  if (!form._id.trim() || !form.title.trim()) return "编号和题目还没填"
+  if (isBlankHtml(form.description)) return "题目描述还没写"
+  if (!form.tags.length) return "至少要有一个标签"
+  if (!form.answer.trim()) return "标准答案还没写"
+  if (groups.value.length < 2) return "测试数据至少要 2 组"
+  for (const [i, g] of groups.value.entries()) {
+    if (!g.sql.trim()) return `第 ${i + 1} 组还是空的，写上或删掉`
+  }
+  const seen = new Map<string, number>()
+  for (const [i, g] of groups.value.entries()) {
+    const same = seen.get(g.sql.trim())
+    if (same !== undefined) return `第 ${same + 1} 组和第 ${i + 1} 组一模一样，数据要不一样`
+    seen.set(g.sql.trim(), i)
+  }
+  for (const [i, g] of groups.value.entries()) {
+    const status = statusOf(g)
+    if (status === "running") return "测试数据还在跑……"
+    if (status === "error") return `第 ${i + 1} 组还没跑通，改好或删掉才能保存`
+  }
+  return ""
+})
+
+const saving = ref(false)
+
+async function uploadScripts(scripts: string[]) {
+  const blob = createZipBlob(scripts.map((content, i) => ({ name: `${i + 1}.sql`, content })))
+  const res = await uploadTestcases(new File([blob], "testcase.zip", { type: "application/zip" }), {
+    sql: true,
+  })
+  // 分值平分，余数给最后一组；只留落库的三个键（见契约 problemTestCaseScoreSchema）
+  const base = Math.floor(100 / res.info.length)
+  const rest = 100 - base * res.info.length
+  testCase.id = res.id
+  testCase.score = res.info.map((entry, i) => ({
+    input_name: entry.input_name,
+    output_name: entry.output_name,
+    score: i === res.info.length - 1 ? base + rest : base,
+  }))
+}
+
+async function save() {
+  if (blocker.value) {
+    message.warning(blocker.value)
+    return
+  }
+  saving.value = true
+  try {
+    const scripts = groups.value.map((g) => g.sql)
+    const changed =
+      !testCase.id ||
+      scripts.length !== savedScripts.length ||
+      scripts.some((sql, i) => sql !== savedScripts[i])
+    if (changed) await uploadScripts(scripts)
+
+    const body: BlankProblem = {
+      _id: form._id.trim(),
+      title: form.title.trim(),
+      description: form.description,
+      inputDescription: "",
+      outputDescription: "",
+      samples: [],
+      testCaseId: testCase.id,
+      testCaseScore: testCase.score,
+      timeLimit: form.timeLimit,
+      memoryLimit: form.memoryLimit,
+      difficulty: form.difficulty,
+      visible: form.visible,
+      tags: form.tags,
+      languages: ["SQL"],
+      template: {},
+      hint: isBlankHtml(form.hint) ? "" : form.hint,
+      source: form.source,
+      prompt: form.prompt,
+      answers: [{ language: "SQL", code: form.answer }],
+      allowFlowchart: false,
+      showFlowchart: false,
+      mermaidCode: "",
+      flowchartHint: "",
+      astRules: null,
+      sqlConfig: form.sqlConfig,
+      sqlDisplay: null,
+      contestId: props.contestID ? Number(props.contestID) : null,
+    }
+    if (!isCreate.value) {
+      await editProblem({ ...body, id: props.initial!.id })
+    } else if (props.contestID) {
+      await createContestProblem(body)
+    } else {
+      await createProblem(body)
+    }
+    savedScripts = scripts
+    if (isCreate.value) {
+      draft.value = null
+      message.success("SQL 题建好了")
+    } else {
+      message.success("保存好了")
+    }
+    router.push(
+      props.contestID
+        ? { name: "admin contest problem list", params: { contestID: props.contestID } }
+        : { name: "admin problem list" },
+    )
+  } catch (err) {
+    message.error(
+      errorCode(err) === "display-id-exists" ? "显示编号重复了，换一个" : errorMessage(err),
+    )
+  } finally {
+    saving.value = false
+  }
+}
+
+const backTo = computed(() =>
+  props.contestID
+    ? { name: "admin contest problem list", params: { contestID: props.contestID } }
+    : { name: "admin problem list" },
+)
+
+onMounted(async () => {
+  getProblemTagList().then((res) => (tagList.value = res))
+  await load()
+  runAll()
+})
+</script>
+
+<template>
+  <PageHeader :title="isCreate ? '新建题目' : '编辑题目'" :back="backTo">
+    <template #extra>
+      <ProblemTypeTag kind="sql" />
+      <n-text depth="3" class="kindNote">题型在新建时定下，之后不能改</n-text>
+    </template>
+    <template #actions>
+      <n-button v-if="isCreate && draft" quaternary @click="clearDraft">清空草稿</n-button>
+    </template>
+  </PageHeader>
+
+  <div v-if="ready" class="sqlEditor">
+    <!-- 左：写 -->
+    <div class="write">
+      <section class="card">
+        <div class="headRow">
+          <n-input v-model:value="form._id" placeholder="编号" aria-label="显示编号" class="pid" />
+          <n-input
+            v-model:value="form.title"
+            placeholder="题目，比如：统计平均工资超过6000元的部门"
+            aria-label="题目"
+            class="grow"
+          />
+          <n-select
+            v-model:value="form.difficulty"
+            :options="difficultyOptions"
+            aria-label="难度"
+            class="difficulty"
+          />
+          <label class="switch">
+            <n-switch v-model:value="form.visible" size="small" />
+            <span>可见</span>
+          </label>
+        </div>
+        <TextEditor v-model:value="form.description" title="" simple :min-height="140" />
+        <n-text depth="3" class="note">
+          数据表和期望结果会自动接在描述后面给学生看（用第 1
+          组测试数据），描述里不用再抄一遍表结构。
+        </n-text>
+        <div class="tagRow">
+          <span class="label">标签</span>
+          <n-select
+            :value="form.tags"
+            :options="tagOptions"
+            multiple
+            filterable
+            tag
+            placeholder="选一个，或者打字建新的"
+            @update:value="onTagsChange"
+          />
+        </div>
+        <n-button text type="primary" class="moreToggle" @click="showMore = !showMore">
+          提示 · 来源 · 内存限制 {{ showMore ? "▴" : "▾" }}
+        </n-button>
+        <div v-if="showMore" class="more">
+          <div class="label">提示（学生卡住时点开看）</div>
+          <TextEditor v-model:value="form.hint" title="" simple :min-height="60" />
+          <div class="moreRow">
+            <label class="field grow">
+              <span class="label">来源</span>
+              <n-input v-model:value="form.source" placeholder="比如：教学示例" />
+            </label>
+            <label class="field">
+              <span class="label">内存限制</span>
+              <n-input-number
+                v-model:value="form.memoryLimit"
+                :min="1"
+                :max="1024"
+                :show-button="false"
+                style="width: 110px"
+              >
+                <template #suffix>MB</template>
+              </n-input-number>
+            </label>
+          </div>
+          <label class="field">
+            <span class="label">考察的知识点（给 AI 分析用）</span>
+            <n-input v-model:value="form.prompt" placeholder="比如：多表连接、分组聚合" />
+          </label>
+        </div>
+      </section>
+
+      <section class="card">
+        <div class="cardHead">
+          <h3>判题</h3>
+          <n-radio-group v-model:value="form.sqlConfig.mode" size="small">
+            <n-radio-button value="query">查询 · 比结果</n-radio-button>
+            <n-radio-button value="modify">增删改 · 比执行完的表</n-radio-button>
+          </n-radio-group>
+          <n-checkbox
+            v-if="form.sqlConfig.mode === 'query'"
+            v-model:checked="form.sqlConfig.order_sensitive"
+            size="small"
+          >
+            按顺序比
+          </n-checkbox>
+        </div>
+        <div class="subHead">
+          <span class="label">标准答案</span>
+          <n-text depth="3" class="note">
+            {{
+              form.sqlConfig.mode === "query"
+                ? "每组数据都拿它跑出期望结果，学生看不到"
+                : "执行完之后，被改过的表就是期望结果，学生看不到"
+            }}
+          </n-text>
+        </div>
+        <CodeEditor
+          v-model:value="form.answer"
+          language="SQL"
+          :extra-extensions="wrapLines"
+          :font-size="14"
+          height="120px"
+          placeholder="SELECT ... FROM ..."
+        />
+      </section>
+
+      <section class="card">
+        <div class="cardHead">
+          <h3>测试数据</h3>
+          <n-text depth="3" class="note">至少 2 组，数据要不一样</n-text>
+          <div class="grow"></div>
+          <n-button
+            size="tiny"
+            :loading="generating"
+            :disabled="!form.answer.trim()"
+            :title="form.answer.trim() ? '按标准答案用到的表，让 AI 编一组数据' : '先写标准答案'"
+            @click="generateGroup"
+          >
+            AI 再写一组
+          </n-button>
+          <n-button size="tiny" @click="addGroup">+ 加一组</n-button>
+        </div>
+        <n-alert v-if="loadError" type="error" :show-icon="false">{{ loadError }}</n-alert>
+        <div class="groups" role="listbox" aria-label="测试数据">
+          <div
+            v-for="(g, i) in groups"
+            :key="g.key"
+            role="option"
+            tabindex="0"
+            :aria-selected="i === selected"
+            class="group"
+            :class="{ on: i === selected, bad: statusOf(g) === 'error' }"
+            @click="selected = i"
+            @keydown.enter="selected = i"
+          >
+            <b class="groupNo">第 {{ i + 1 }} 组</b>
+            <span v-if="i === 0" class="shown">题目里显示这组</span>
+            <span class="summary" :class="{ error: statusOf(g) === 'error' }">
+              <template v-if="statusOf(g) === 'empty'">还没写</template>
+              <template v-else-if="statusOf(g) === 'no-answer'">等标准答案</template>
+              <template v-else-if="statusOf(g) === 'running'">在跑……</template>
+              <template v-else-if="statusOf(g) === 'error'">{{ g.error }}</template>
+              <template v-else-if="g.display">{{ groupSummary(g.display) }}</template>
+            </span>
+            <span v-if="statusOf(g) === 'ok'" class="mark ok" aria-label="跑通了">✓</span>
+            <span v-else-if="statusOf(g) === 'error'" class="mark error" aria-label="没跑通"
+              >✗</span
+            >
+            <n-button
+              v-if="groups.length > 1"
+              size="tiny"
+              quaternary
+              class="remove"
+              :aria-label="`删掉第 ${i + 1} 组`"
+              @click.stop="removeGroup(i)"
+            >
+              删掉
+            </n-button>
+          </div>
+        </div>
+        <template v-if="current">
+          <div class="subHead">
+            <span class="label">第 {{ selected + 1 }} 组的脚本</span>
+            <n-text depth="3" class="note">建表 + 插数据，改完右边马上重跑</n-text>
+          </div>
+          <CodeEditor
+            :key="current.key"
+            v-model:value="current.sql"
+            language="SQL"
+            :extra-extensions="wrapLines"
+            :font-size="14"
+            height="260px"
+            placeholder="CREATE TABLE ...;&#10;INSERT INTO ... VALUES ...;"
+          />
+        </template>
+      </section>
+
+      <div class="saveBar">
+        <n-button type="primary" :loading="saving" :disabled="!!blocker" @click="save">
+          保存
+        </n-button>
+        <n-text v-if="blocker" :type="blocker.includes('没跑通') ? 'error' : 'default'" depth="2">
+          {{ blocker }}
+        </n-text>
+        <n-text v-else type="success">{{ groups.length }} 组都跑通了</n-text>
+      </div>
+    </div>
+
+    <!-- 右：学生看到的 -->
+    <aside class="preview" aria-label="学生看到的样子">
+      <div class="previewHead">
+        <b>学生看到的样子</b>
+        <div class="grow"></div>
+        <n-radio-group v-model:value="selected" size="small">
+          <n-radio-button v-for="(g, i) in groups" :key="g.key" :value="i">
+            第 {{ i + 1 }} 组<span v-if="statusOf(g) === 'error'" class="error"> ✗</span>
+          </n-radio-button>
+        </n-radio-group>
+      </div>
+      <div class="page">
+        <div class="titleRow">
+          <h2>
+            <span v-if="form._id">{{ form._id }}</span> {{ form.title || "（题目还没起名）" }}
+          </h2>
+          <ProblemTypeTag kind="sql" />
+          <n-tag size="small" :bordered="false" :type="getTagColor(form.difficulty)">
+            {{ DIFFICULTY[form.difficulty] }}
+          </n-tag>
+        </div>
+        <h3 class="title">描述</h3>
+        <MdPreview
+          preview-theme="vuepress"
+          :model-value="form.description"
+          :theme="isDark ? 'dark' : 'light'"
+        />
+        <p v-if="selected > 0" class="otherGroup">
+          学生看到的是第 1 组，下面是第 {{ selected + 1 }} 组跑出来的样子
+        </p>
+        <template v-if="current">
+          <p v-if="statusOf(current) === 'no-answer'" class="placeholder">
+            写好标准答案，这里就跑出期望结果
+          </p>
+          <p v-else-if="statusOf(current) === 'empty'" class="placeholder">
+            第 {{ selected + 1 }} 组还没写脚本
+          </p>
+          <p v-else-if="statusOf(current) === 'running' && !current.display" class="placeholder">
+            在跑……
+          </p>
+          <div v-else-if="statusOf(current) === 'error'" class="errorBox">
+            {{ current.error }}
+            <div v-if="current.error.startsWith('标准答案在这组数据上')" class="raw">
+              每组数据都要建齐标准答案用到的表和列。
+            </div>
+            <div v-if="current.error !== current.errorRaw" class="raw small">
+              原话：{{ current.errorRaw }}
+            </div>
+          </div>
+          <div v-else-if="current.display" :class="{ stale: statusOf(current) === 'running' }">
+            <SqlProblemData
+              :display="current.display"
+              :order-sensitive="form.sqlConfig.order_sensitive"
+            >
+              <template #title="{ text }">
+                <h3 class="title sqlTitle">{{ text }}</h3>
+              </template>
+            </SqlProblemData>
+          </div>
+        </template>
+        <template v-if="!isBlankHtml(form.hint)">
+          <h3 class="title sqlTitle">提示</h3>
+          <MdPreview
+            preview-theme="vuepress"
+            :model-value="form.hint"
+            :theme="isDark ? 'dark' : 'light'"
+          />
+        </template>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.kindNote {
+  font-size: 12px;
+}
+
+.sqlEditor {
+  display: grid;
+  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+/* 窄屏（老师的小笔记本）放不下两栏：预览挪到下面 */
+@media (max-width: 1180px) {
+  .sqlEditor {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.write {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.card {
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 6px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: v-bind("theme.cardColor");
+}
+
+.card :deep(.editorWrapper) {
+  margin-bottom: 0;
+}
+
+.headRow,
+.cardHead,
+.subHead,
+.tagRow,
+.moreRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cardHead {
+  flex-wrap: wrap;
+}
+
+.cardHead h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.subHead {
+  align-items: baseline;
+  gap: 8px;
+}
+
+.pid {
+  width: 84px;
+  flex: none;
+}
+
+.difficulty {
+  width: 84px;
+  flex: none;
+}
+
+.grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.switch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.label {
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  flex: none;
+}
+
+.note {
+  font-size: 12px;
+}
+
+.moreToggle {
+  align-self: flex-start;
+  font-size: 13px;
+}
+
+.more {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.moreRow {
+  align-items: flex-end;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.groups {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.group {
+  min-height: 36px;
+  box-sizing: border-box;
+  padding: 4px 6px 4px 10px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.group:hover {
+  background-color: rgba(128, 128, 128, 0.08);
+}
+
+.group.on {
+  background-color: rgba(24, 160, 88, 0.1);
+  box-shadow: inset 3px 0 0 v-bind("theme.primaryColor");
+}
+
+.group.on.bad {
+  background-color: rgba(208, 48, 80, 0.08);
+  box-shadow: inset 3px 0 0 v-bind("theme.errorColor");
+}
+
+.groupNo {
+  flex: none;
+  width: 48px;
+}
+
+.shown {
+  flex: none;
+  font-size: 12px;
+  color: v-bind("theme.primaryColorPressed");
+}
+
+.summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: v-bind("theme.textColor3");
+}
+
+.mark {
+  flex: none;
+  font-weight: 700;
+}
+
+.ok {
+  color: v-bind("theme.successColor");
+}
+
+.error {
+  color: v-bind("theme.errorColor");
+}
+
+.summary.error {
+  color: v-bind("theme.errorColor");
+}
+
+.remove {
+  flex: none;
+  opacity: 0;
+}
+
+.group:hover .remove,
+.group.on .remove,
+.remove:focus-visible {
+  opacity: 1;
+}
+
+.saveBar {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0 14px;
+  background: v-bind("theme.bodyColor");
+  border-top: 1px solid v-bind("theme.borderColor");
+}
+
+.preview {
+  position: sticky;
+  top: 12px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.previewHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 14px;
+}
+
+.page {
+  max-height: calc(100vh - 170px);
+  overflow: auto;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 6px;
+  padding: 18px 22px;
+  background: v-bind("theme.cardColor");
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.titleRow h2 {
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.3;
+}
+
+/* 和题目页的小节标题一个样子（oj/problem/components/ProblemContent.vue） */
+.title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.4;
+  margin: 0 0 6px;
+  padding-left: 9px;
+  border-left: 3px solid v-bind("theme.primaryColor");
+}
+
+.sqlTitle {
+  margin-top: 14px;
+}
+
+.page :deep(.md-editor) {
+  background: transparent;
+}
+
+.page :deep(.md-editor-preview-wrapper) {
+  padding: 0;
+}
+
+.otherGroup {
+  margin: 14px 0 0;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  background-color: rgba(128, 128, 128, 0.08);
+  color: v-bind("theme.textColor2");
+}
+
+.placeholder {
+  margin: 14px 0 0;
+  color: v-bind("theme.textColor3");
+}
+
+.errorBox {
+  margin-top: 14px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  background-color: rgba(208, 48, 80, 0.08);
+  color: v-bind("theme.errorColor");
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.errorBox .raw {
+  color: v-bind("theme.textColor2");
+}
+
+.errorBox .small {
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.stale {
+  opacity: 0.5;
+}
+</style>
diff --git a/apps/web/src/admin/problem/components/CreateProblemMenu.vue b/apps/web/src/admin/problem/components/CreateProblemMenu.vue
new file mode 100644
index 0000000..72cb300
--- /dev/null
+++ b/apps/web/src/admin/problem/components/CreateProblemMenu.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+
+/**
+ * 「新建题目」先选题型：编程题和 SQL 题是两张不同的出题页，测试数据的格式也不一样，
+ * 建好之后不能互相改（设计稿「SQL 出题页 · 三版共用」）。
+ * 每项要两行（名字 + 一句话），n-dropdown 的选项是固定行高，放不下，所以自己画
+ */
+defineProps<{ label: string; primary?: boolean }>()
+const emit = defineEmits<{ select: [kind: "code" | "sql"] }>()
+
+const show = ref(false)
+
+const OPTIONS = [
+  {
+    kind: "code",
+    icon: "ph:code-bold",
+    title: "编程题",
+    note: "C / C++ / Python，有输入输出说明和样例，也能挂流程图、语法要求",
+  },
+  {
+    kind: "sql",
+    icon: "ph:database-bold",
+    title: "SQL 题",
+    note: "学生写 SQL 查数据库；给几组建表脚本和一条标准答案就行",
+  },
+] as const
+
+function pick(kind: "code" | "sql") {
+  show.value = false
+  emit("select", kind)
+}
+</script>
+
+<template>
+  <n-popover
+    v-model:show="show"
+    trigger="click"
+    placement="bottom-end"
+    :show-arrow="false"
+    style="padding: 6px; width: 340px"
+  >
+    <template #trigger>
+      <n-button :type="primary ? 'primary' : 'default'" icon-placement="right">
+        {{ label }}
+        <template #icon><Icon icon="ph:caret-down-bold" /></template>
+      </n-button>
+    </template>
+    <div class="menu">
+      <button
+        v-for="option in OPTIONS"
+        :key="option.kind"
+        type="button"
+        class="option"
+        @click="pick(option.kind)"
+      >
+        <Icon :icon="option.icon" :width="20" class="icon" :class="option.kind" />
+        <span class="text">
+          <b>{{ option.title }}</b>
+          <span class="note">{{ option.note }}</span>
+        </span>
+      </button>
+      <div class="footnote">选好就定了：两种题的测试数据不一样，建好之后不能互相改</div>
+    </div>
+  </n-popover>
+</template>
+
+<style scoped>
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.option {
+  display: flex;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.option:hover,
+.option:focus-visible {
+  background-color: rgba(128, 128, 128, 0.1);
+}
+
+.icon {
+  flex: none;
+  margin-top: 1px;
+}
+
+/*
+ * 弹出层挂在 body 下，拿不到这个组件根上 v-bind 出来的主题变量，颜色只能写死
+ * （绿和题目页、青和 SQL 标签同一个值）
+ */
+.icon.code {
+  color: #18a058;
+}
+
+.icon.sql {
+  color: #0b6470;
+}
+
+html.dark .icon.sql {
+  color: #8fd8e0;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.note {
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+.footnote {
+  margin-top: 4px;
+  padding: 8px 12px 4px;
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
+  font-size: 12px;
+  opacity: 0.65;
+}
+</style>
diff --git a/apps/web/src/admin/problem/components/sqlScript.ts b/apps/web/src/admin/problem/components/sqlScript.ts
new file mode 100644
index 0000000..1f77069
--- /dev/null
+++ b/apps/web/src/admin/problem/components/sqlScript.ts
@@ -0,0 +1,62 @@
+import type { SqlDisplay } from "utils/types"
+import { changedRowCount, tableChanges } from "oj/problem/utils/sqlChanges"
+
+/** 出题页的一组测试数据：一份建表 + 插数据的脚本，和它跑出来的样子 */
+export interface ScriptGroup {
+  key: number
+  sql: string
+  /** 跑出来的结果对应的是哪一版（标准答案 + 判题方式 + 脚本），和现在的对不上就是过期了 */
+  ranFor: string
+  display: SqlDisplay | null
+  /** 跑不起来的原因，常见的已经翻成中文（explainSqlError） */
+  error: string
+  /** 后端回的原话，翻译过的时候用小字附在后面 */
+  errorRaw: string
+  /** 正在跑的那一版 */
+  running: string
+}
+
+export type GroupStatus = "empty" | "no-answer" | "running" | "ok" | "error"
+
+/**
+ * SQLite 的报错是英文，出题的老师未必看得懂。常见的几种翻成一句中文，
+ * 认不出来的原样给（后端已经加了「初始化脚本执行失败」这类中文前缀）
+ */
+export function explainSqlError(message: string) {
+  const rules: [RegExp, (m: RegExpMatchArray) => string][] = [
+    [/no such table: (\S+)/, (m) => `没有 ${m[1]} 这张表`],
+    [/no such column: (\S+)/, (m) => `没有 ${m[1]} 这一列`],
+    [/table (\S+) already exists/, (m) => `${m[1]} 这张表建了两次`],
+    [/near "([^"]*)": syntax error/, (m) => `语法有错，在「${m[1]}」附近`],
+    [/incomplete input/, () => "语句没写完（少了右括号或分号？）"],
+    [/UNIQUE constraint failed: (\S+)/, (m) => `${m[1]} 有重复的值`],
+    [/(\d+) values for (\d+) columns/, (m) => `一行给了 ${m[1]} 个值，但表有 ${m[2]} 列`],
+  ]
+  if (message.includes("标准答案未修改任何表数据")) {
+    return "标准答案在这组数据上一行都没改：增删改题的每组数据里都要有会被改到的行"
+  }
+  for (const [pattern, say] of rules) {
+    const match = message.match(pattern)
+    if (match) {
+      const where = message.startsWith("标准答案") ? "标准答案在这组数据上" : "这组的脚本"
+      return `${where}跑不起来：${say(match)}`
+    }
+  }
+  return message
+}
+
+/** 列表里那一行的小结：几张表各几行 → 期望几行 / 改了几行 */
+export function groupSummary(display: SqlDisplay) {
+  const rows = display.tables.map((t) => t.total_rows).join(" + ")
+  const expected = display.expected
+  if ("columns" in expected) return `${rows} 行 → 期望 ${expected.total_rows} 行`
+  const changed = expected.changed_tables.reduce((sum, table) => {
+    if (table.dropped) return sum + 1
+    const changes = tableChanges(
+      display.tables.find((t) => t.name === table.name),
+      table,
+    )
+    return sum + (changes ? changedRowCount(changes) : 0)
+  }, 0)
+  return changed ? `${rows} 行 → 改了 ${changed} 行` : `${rows} 行 → 一行都没改`
+}
diff --git a/apps/web/src/admin/problem/detail.vue b/apps/web/src/admin/problem/detail.vue
index 14d7ce8..fa6dcf3 100644
--- a/apps/web/src/admin/problem/detail.vue
+++ b/apps/web/src/admin/problem/detail.vue
@@ -5,12 +5,11 @@ import { PROBLEM_TAG_MAX_LENGTH } from "@oj2/contract"
 import { getProblemTagList } from "shared/api"
 import TextEditor from "shared/components/TextEditor.vue"
 import TestcaseGenerator from "./components/TestcaseGenerator.vue"
-import SQLTestcaseEditor from "./components/SQLTestcaseEditor.vue"
 import AstRulesEditor from "./components/AstRulesEditor.vue"
 import { CODE_TEMPLATES, LANGUAGE_SHOW_VALUE, STORAGE_KEY } from "utils/constants"
 import download from "utils/download"
 import { unique } from "utils/functions"
-import type { BlankProblem, LANGUAGE, Tag, Testcase } from "utils/types"
+import type { AdminProblem, BlankProblem, LANGUAGE, Tag, Testcase } from "utils/types"
 import {
   createContestProblem,
   createProblem,
@@ -24,9 +23,15 @@ const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEdit
 
 const MermaidEditor = defineAsyncComponent(() => import("shared/components/MermaidEditor.vue"))
 
+/**
+ * 编程题（C / C++ / Python）的出题页。SQL 题在 SqlDetail.vue，两种题由 editor.vue 分流：
+ * 新建看 `?type=sql`，编辑看题目本身
+ */
 interface Props {
   problemID?: string
   contestID?: string
+  /** 编辑时外层已经拉过一次题目（要靠它判断题型），直接给进来 */
+  initial?: AdminProblem | null
 }
 
 const message = useMessage()
@@ -166,12 +171,8 @@ const languageOptions = [
   { label: LANGUAGE_SHOW_VALUE["Python"], value: "Python" },
   { label: LANGUAGE_SHOW_VALUE["C"], value: "C" },
   { label: LANGUAGE_SHOW_VALUE["C++"], value: "C++" },
-  { label: LANGUAGE_SHOW_VALUE["SQL"], value: "SQL" },
 ]
 
-const isSQLProblem = computed(() => !!problem.value?.languages.includes("SQL"))
-
-// SQL 题联动：SQL 必须是唯一语言（后端强校验），不需要预制代码，自动初始化 sql_config
 // 两个流程图开关是互斥的：allowFlowchart 为真时后端不会把 mermaidCode 下发给
 // 学生，showFlowchart 就成了一个点进去什么都没有的 tab。UI 上已经把开关置灰，
 // 这里再把存量数据里两个都开着的情况纠正掉。
@@ -182,34 +183,6 @@ watch(
   },
 )
 
-watch(
-  () => problem.value?.languages,
-  (langs) => {
-    if (!langs) return
-    if (langs.includes("SQL")) {
-      if (langs.length > 1) {
-        problem.value.languages = ["SQL"]
-        return
-      }
-      needTemplate.value = false
-      if (!problem.value.sqlConfig) {
-        problem.value.sqlConfig = { mode: "query", order_sensitive: false }
-      }
-      currentActiveAnswer.value = "SQL"
-      // 代码规则检查基于 Python/C 的 AST 解析，对 SQL 没有意义，清空避免脏数据
-      if (problem.value.astRules) {
-        problem.value.astRules = null
-      }
-      // 流程图依赖 Python 答案生成，对 SQL 没有意义
-      problem.value.allowFlowchart = false
-      problem.value.showFlowchart = false
-    } else if (problem.value.sqlConfig) {
-      problem.value.sqlConfig = null
-    }
-  },
-  { immediate: true },
-)
-
 async function getProblemDetail() {
   if (!props.problemID) {
     // 草稿缓存和编辑页共用同一个 localStorage key：编辑页会把服务器数据连 id
@@ -217,12 +190,17 @@ async function getProblemDetail() {
     // 下的是那道旧题的包，SQL 测试点编辑器也会去回显那道旧题的脚本。
     // 新建页不存在 id，进来先摘掉。
     delete problem.value.id
+    // 以前 SQL 题也在这一页出，草稿里可能还留着 SQL：现在 SQL 题有自己的页
+    if (problem.value.languages.includes("SQL")) {
+      problem.value.languages = ["Python", "C"]
+      problem.value.sqlConfig = null
+    }
     syncTagInputsFromProblemTags()
     toggleReady(true)
     return
   }
   try {
-    const data = await getProblem(props.problemID)
+    const data = props.initial ?? (await getProblem(props.problemID))
     problem.value.id = data.id
     problem.value._id = data._id
     problem.value.title = data.title
@@ -300,7 +278,7 @@ async function handleUploadTestcases({ file }: UploadCustomRequestOptions) {
   try {
     // 失败走 catch —— 原来这里还有一句 `if (res.error)`（拿 { error, data }
     // 信封当返回值），被 @ts-ignore 压着，信封拆掉之后就是一段死代码了
-    const res = await uploadTestcases(file.file!, { sql: isSQLProblem.value })
+    const res = await uploadTestcases(file.file!)
     // score 不在上传响应里，前端按测试点数量平分补上
     const entries = res.info
     const testcases: Testcase[] = entries.map((entry) => ({
@@ -342,21 +320,19 @@ async function validateProblem() {
   // 题目
   else if (
     !problem.value.description ||
-    (!isSQLProblem.value && (!problem.value.inputDescription || !problem.value.outputDescription))
+    !problem.value.inputDescription ||
+    !problem.value.outputDescription
   ) {
     message.error("题目或输入或输出没有填写")
     hasErrors = true
   }
   // 样例
-  else if (!isSQLProblem.value && problem.value.samples.length == 0) {
+  else if (problem.value.samples.length == 0) {
     message.error("样例没有填写")
     hasErrors = true
   }
   // 样例是空的
-  else if (
-    !isSQLProblem.value &&
-    problem.value.samples.some((sample) => sample.output === "" || sample.input === "")
-  ) {
+  else if (problem.value.samples.some((sample) => sample.output === "" || sample.input === "")) {
     message.error("空样例没有删干净")
     hasErrors = true
   }
@@ -368,17 +344,6 @@ async function validateProblem() {
     message.error("编程语言没有选择")
     hasErrors = true
   }
-  // SQL 题验证
-  else if (isSQLProblem.value && !problem.value.sqlConfig?.mode) {
-    message.error("SQL 题需要选择题型（查询题/增删改题）")
-    hasErrors = true
-  } else if (
-    isSQLProblem.value &&
-    !problem.value.answers.find((ans) => ans.language === "SQL" && ans.code.trim() !== "")
-  ) {
-    message.error("SQL 题必须填写标准答案（判题时用它生成期望结果）")
-    hasErrors = true
-  }
   // 流程图验证
   else if (problem.value.showFlowchart || problem.value.allowFlowchart) {
     if (!problem.value.mermaidCode || problem.value.mermaidCode.trim() === "") {
@@ -421,18 +386,12 @@ function filterAnswers() {
   problem.value.answers = problem.value.answers.filter((ans) => ans.code.trim() !== "")
 }
 
-function filterSamplesForSQL() {
-  // SQL 题不展示样例；后端 CreateSampleSerializer 也不接受空字符串样例
-  if (isSQLProblem.value) problem.value.samples = []
-}
-
 async function submit() {
   const hasValidationErrors = await validateProblem()
   if (hasValidationErrors) return
   filterHint()
   getTemplate()
   filterAnswers()
-  filterSamplesForSQL()
   syncProblemTags()
   const api = {
     "admin problem create": createProblem,
@@ -584,43 +543,31 @@ watch(
     title="题目的描述"
     :min-height="300"
   />
-  <TextEditor
-    v-if="ready && !isSQLProblem"
-    v-model:value="problem.inputDescription"
-    title="输入的描述"
-  />
-  <TextEditor
-    v-if="ready && !isSQLProblem"
-    v-model:value="problem.outputDescription"
-    title="输出的描述"
-  />
-  <template v-if="!isSQLProblem">
-    <div class="box" v-for="(sample, index) in problem.samples" :key="index">
-      <n-flex justify="space-between" align="center">
-        <strong>测试样例 {{ index + 1 }}</strong>
-        <n-button tertiary type="warning" size="small" @click="removeSample(index)">
-          删除 {{ index + 1 }}
-        </n-button>
-      </n-flex>
-      <n-grid x-gap="20" cols="2">
-        <n-gi span="1">
-          <n-flex vertical>
-            <span>输入样例</span>
-            <n-input type="textarea" v-model:value="sample.input" />
-          </n-flex>
-        </n-gi>
-        <n-gi span="1">
-          <n-flex vertical>
-            <span>输出样例</span>
-            <n-input type="textarea" v-model:value="sample.output" />
-          </n-flex>
-        </n-gi>
-      </n-grid>
-    </div>
-    <n-button class="addSamples box" tertiary type="primary" @click="addSample">
-      添加用例
-    </n-button>
-  </template>
+  <TextEditor v-if="ready" v-model:value="problem.inputDescription" title="输入的描述" />
+  <TextEditor v-if="ready" v-model:value="problem.outputDescription" title="输出的描述" />
+  <div class="box" v-for="(sample, index) in problem.samples" :key="index">
+    <n-flex justify="space-between" align="center">
+      <strong>测试样例 {{ index + 1 }}</strong>
+      <n-button tertiary type="warning" size="small" @click="removeSample(index)">
+        删除 {{ index + 1 }}
+      </n-button>
+    </n-flex>
+    <n-grid x-gap="20" cols="2">
+      <n-gi span="1">
+        <n-flex vertical>
+          <span>输入样例</span>
+          <n-input type="textarea" v-model:value="sample.input" />
+        </n-flex>
+      </n-gi>
+      <n-gi span="1">
+        <n-flex vertical>
+          <span>输出样例</span>
+          <n-input type="textarea" v-model:value="sample.output" />
+        </n-flex>
+      </n-gi>
+    </n-grid>
+  </div>
+  <n-button class="addSamples box" tertiary type="primary" @click="addSample"> 添加用例 </n-button>
   <TextEditor v-if="ready" v-model:value="problem.hint" title="提示（选填）" />
   <n-form>
     <n-form-item label="题目的来源（选填）">
@@ -651,7 +598,7 @@ watch(
         </n-flex>
       </n-checkbox-group>
     </n-form-item>
-    <n-form-item v-if="!isSQLProblem">
+    <n-form-item>
       <n-checkbox v-model:checked="needTemplate" label="预制代码（显示在编辑器中，帮助快速上手）" />
     </n-form-item>
     <n-form-item>
@@ -667,31 +614,10 @@ watch(
     </n-form-item>
   </n-form>
 
-  <n-form v-if="isSQLProblem && problem.sqlConfig" inline label-placement="left">
-    <n-form-item label="SQL 题型">
-      <n-radio-group v-model:value="problem.sqlConfig.mode">
-        <n-radio-button value="query">查询题（比对查询结果）</n-radio-button>
-        <n-radio-button value="modify"> 增删改题（比对执行后的表数据） </n-radio-button>
-      </n-radio-group>
-    </n-form-item>
-    <n-form-item label="严格比对行顺序">
-      <n-switch v-model:value="problem.sqlConfig.order_sensitive" />
-      <n-text depth="3" style="margin-left: 12px">
-        题目要求 ORDER BY 时开启；关闭则按无序集合比对
-      </n-text>
-    </n-form-item>
-  </n-form>
-
   <n-grid :cols="2" x-gap="20">
     <n-gi>
       <n-form>
-        <n-form-item
-          :label="
-            isSQLProblem
-              ? '标准答案（必填，判题依据：每个测试点会运行它生成期望结果）'
-              : '本题参考答案（选填，用于 AI 分析，不会泄露）'
-          "
-        >
+        <n-form-item label="本题参考答案（选填，用于 AI 分析，不会泄露）">
           <n-tabs type="segment" default-value="Python" v-model:value="currentActiveAnswer">
             <n-tab-pane
               v-for="(answer, index) in problem.answers"
@@ -727,7 +653,7 @@ watch(
     </n-gi>
   </n-grid>
 
-  <n-grid v-if="!isSQLProblem" :cols="2">
+  <n-grid :cols="2">
     <n-gi :span="1">
       <AstRulesEditor v-model="problem.astRules!" :languages="problem.languages" />
     </n-gi>
@@ -737,7 +663,7 @@ watch(
 
   <h2 class="title">测试用例区域</h2>
 
-  <n-flex v-if="!isSQLProblem" align="center" style="margin-bottom: 12px">
+  <n-flex align="center" style="margin-bottom: 12px">
     <div>
       <n-button type="success" @click="showGeneratorModal = true"> （新）直接生成 </n-button>
     </div>
@@ -754,14 +680,6 @@ watch(
     </n-tooltip>
   </n-flex>
 
-  <SQLTestcaseEditor
-    v-if="isSQLProblem"
-    :answers="problem.answers"
-    :mode="problem.sqlConfig?.mode ?? 'query'"
-    :problem-id="problem.id"
-    @uploaded="handleTestcasesGenerated"
-  />
-
   <n-alert class="box" v-if="problem.testCaseScore.length" :show-icon="false" type="info">
     <template #header>
       <n-flex align="center">
@@ -792,49 +710,47 @@ watch(
     />
   </n-modal>
 
-  <template v-if="!isSQLProblem">
-    <n-divider />
+  <n-divider />
 
-    <h2 class="title">流程图区域</h2>
+  <h2 class="title">流程图区域</h2>
 
-    <!-- 流程图相关设置 -->
-    <n-form inline label-placement="left" :show-feedback="false">
-      <n-form-item label="根据上面的【Python答案】智能生成 Mermaid 代码">
-        <n-button
-          type="primary"
-          size="small"
-          :disabled="!problem.answers.filter((a) => a.language === 'Python')[0]?.code.length"
-          :loading="isAIGenerating"
-          @click="generateMermaid"
-        >
-          AI 生成
-        </n-button>
-      </n-form-item>
-      <n-form-item label="允许提交流程图">
-        <n-switch v-model:value="problem.allowFlowchart" />
-      </n-form-item>
-      <n-form-item label="显示标准流程图">
-        <n-flex align="center">
-          <n-switch v-model:value="problem.showFlowchart" :disabled="problem.allowFlowchart" />
-          <n-text v-if="problem.allowFlowchart" depth="3" style="font-size: 12px">
-            让学生自己画图时，标准流程图不会下发给学生，这个开关没有意义
-          </n-text>
-        </n-flex>
-      </n-form-item>
-    </n-form>
+  <!-- 流程图相关设置 -->
+  <n-form inline label-placement="left" :show-feedback="false">
+    <n-form-item label="根据上面的【Python答案】智能生成 Mermaid 代码">
+      <n-button
+        type="primary"
+        size="small"
+        :disabled="!problem.answers.filter((a) => a.language === 'Python')[0]?.code.length"
+        :loading="isAIGenerating"
+        @click="generateMermaid"
+      >
+        AI 生成
+      </n-button>
+    </n-form-item>
+    <n-form-item label="允许提交流程图">
+      <n-switch v-model:value="problem.allowFlowchart" />
+    </n-form-item>
+    <n-form-item label="显示标准流程图">
+      <n-flex align="center">
+        <n-switch v-model:value="problem.showFlowchart" :disabled="problem.allowFlowchart" />
+        <n-text v-if="problem.allowFlowchart" depth="3" style="font-size: 12px">
+          让学生自己画图时，标准流程图不会下发给学生，这个开关没有意义
+        </n-text>
+      </n-flex>
+    </n-form-item>
+  </n-form>
 
-    <n-form>
-      <n-form-item>
-        <MermaidEditor v-model="problem.mermaidCode" @render-state="onMermaidRenderState" />
-      </n-form-item>
-      <n-form-item label="流程图提示信息（选填）">
-        <n-input
-          v-model:value="problem.flowchartHint"
-          placeholder="请输入流程图相关的提示信息，帮助学生理解题目要求"
-        />
-      </n-form-item>
-    </n-form>
-  </template>
+  <n-form>
+    <n-form-item>
+      <MermaidEditor v-model="problem.mermaidCode" @render-state="onMermaidRenderState" />
+    </n-form-item>
+    <n-form-item label="流程图提示信息（选填）">
+      <n-input
+        v-model:value="problem.flowchartHint"
+        placeholder="请输入流程图相关的提示信息，帮助学生理解题目要求"
+      />
+    </n-form-item>
+  </n-form>
   <n-flex style="margin: 16px 0 120px" align="center" justify="end">
     <n-button type="primary" @click="submit">提交</n-button>
   </n-flex>
diff --git a/apps/web/src/admin/problem/editor.vue b/apps/web/src/admin/problem/editor.vue
new file mode 100644
index 0000000..68fc2fb
--- /dev/null
+++ b/apps/web/src/admin/problem/editor.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { isSqlProblem } from "@oj2/contract"
+import type { AdminProblem } from "utils/types"
+import { getProblem } from "../api"
+import ProblemDetail from "./detail.vue"
+import SqlDetail from "./SqlDetail.vue"
+
+/**
+ * 出题 / 改题的入口：编程题和 SQL 题是两张不同的页。
+ * 新建看地址上的 `?type=sql`（后台题目列表「新建题目」下拉里选的），
+ * 编辑看题目本身 —— 题型建好之后不能改，所以没有「切换题型」这回事。
+ */
+const props = defineProps<{
+  problemID?: string
+  contestID?: string
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const message = useMessage()
+
+const loaded = shallowRef<AdminProblem | null>(null)
+const kind = ref<"code" | "sql" | null>(null)
+
+async function resolve() {
+  kind.value = null
+  loaded.value = null
+  if (!props.problemID) {
+    kind.value = route.query.type === "sql" ? "sql" : "code"
+    return
+  }
+  try {
+    loaded.value = await getProblem(props.problemID)
+    kind.value = isSqlProblem(loaded.value) ? "sql" : "code"
+  } catch {
+    message.error("获取题目失败")
+    router.push(
+      props.contestID
+        ? { name: "admin contest problem list", params: { contestID: props.contestID } }
+        : { name: "admin problem list" },
+    )
+  }
+}
+
+watch(() => [props.problemID, route.query.type], resolve, { immediate: true })
+</script>
+
+<template>
+  <SqlDetail
+    v-if="kind === 'sql'"
+    :key="`sql-${problemID ?? 'new'}`"
+    :problem-i-d="problemID"
+    :contest-i-d="contestID"
+    :initial="loaded"
+  />
+  <ProblemDetail
+    v-else-if="kind === 'code'"
+    :key="`code-${problemID ?? 'new'}`"
+    :problem-i-d="problemID"
+    :contest-i-d="contestID"
+    :initial="loaded"
+  />
+</template>
diff --git a/apps/web/src/admin/problem/list.vue b/apps/web/src/admin/problem/list.vue
index 624c063..d671133 100644
--- a/apps/web/src/admin/problem/list.vue
+++ b/apps/web/src/admin/problem/list.vue
@@ -13,7 +13,9 @@ import { useRouteQuery } from "@vueuse/router"
 import AuthorSelect from "shared/components/AuthorSelect.vue"
 import type { DataTableRowKey } from "naive-ui"
 import BatchTagModal from "./components/BatchTagModal.vue"
+import CreateProblemMenu from "./components/CreateProblemMenu.vue"
 import PageHeader from "admin/components/PageHeader.vue"
+import ProblemTypeTag from "oj/problem/components/ProblemTypeTag.vue"
 
 interface Props {
   contestID?: string
@@ -72,18 +74,31 @@ const nextDisplayID = computed(() => {
 interface ProblemQuery {
   keyword: string
   author: string
+  kind: "" | "code" | "sql"
 }
 
 // 使用分页 composable
 const { query, clearQuery } = usePagination<ProblemQuery>({
   keyword: useRouteQuery("keyword", "").value,
   author: useRouteQuery("author", "").value,
+  kind: useRouteQuery<ProblemQuery["kind"]>("kind", "").value,
 })
 
 const baseColumns: DataTableColumn<AdminProblemRow>[] = [
   { title: "ID", key: "id", width: 100 },
   { title: "显示编号", key: "_id", width: 100 },
-  { title: "标题", key: "title", minWidth: 200 },
+  {
+    title: "标题",
+    key: "title",
+    minWidth: 200,
+    render: (row) =>
+      row.isSql
+        ? h(NFlex, { size: 6, align: "center", wrap: false }, () => [
+            h("span", row.title),
+            h(ProblemTypeTag, { kind: "sql" }),
+          ])
+        : row.title,
+  },
   {
     title: "难度",
     key: "difficulty",
@@ -194,6 +209,8 @@ async function listProblems() {
     query.keyword,
     query.author,
     props.contestID,
+    undefined,
+    query.kind,
   )
   total.value = res.total
   problems.value = res.results
@@ -209,10 +226,17 @@ async function toggleVisible(problemID: number) {
   })
 }
 
-function createContestProblem() {
+const kindOptions = [
+  { label: "全部题型", value: "" },
+  { label: "编程题", value: "code" },
+  { label: "SQL 题", value: "sql" },
+]
+
+function createProblem(kind: string) {
   router.push({
-    name: "admin contest problem create",
-    params: { contestID: props.contestID },
+    name: isContestProblemList.value ? "admin contest problem create" : "admin problem create",
+    params: isContestProblemList.value ? { contestID: props.contestID } : {},
+    query: kind === "sql" ? { type: "sql" } : {},
   })
 }
 
@@ -230,7 +254,7 @@ watchDebounced(() => query.keyword, listProblems, {
 })
 
 // 监听其他查询条件变化
-watch(() => [query.page, query.limit, query.author], listProblems)
+watch(() => [query.page, query.limit, query.author, query.kind], listProblems)
 </script>
 
 <template>
@@ -246,12 +270,10 @@ watch(() => [query.page, query.limit, query.author], listProblems)
             添加标签（{{ selectedProblemIds.length }}）
           </n-button>
         </template>
-        <n-button type="primary" @click="$router.push({ name: 'admin problem create' })">
-          新建题目
-        </n-button>
+        <CreateProblemMenu label="新建题目" primary @select="createProblem" />
       </template>
       <template v-else>
-        <n-button @click="createContestProblem">新建比赛题目</n-button>
+        <CreateProblemMenu label="新建比赛题目" @select="createProblem" />
         <n-button type="primary" @click="selectProblems">从题库中选择</n-button>
       </template>
     </template>
@@ -263,6 +285,13 @@ watch(() => [query.page, query.limit, query.author], listProblems)
         style="width: 220px"
         @clear="clearQuery"
       />
+      <n-select
+        v-if="!props.contestID"
+        v-model:value="query.kind"
+        :options="kindOptions"
+        aria-label="题型"
+        style="width: 120px"
+      />
       <n-flex v-if="!props.contestID" align="center" :size="8">
         <n-text depth="3">出题人</n-text>
         <AuthorSelect v-model:value="query.author" all />
diff --git a/apps/web/src/admin/transforms.ts b/apps/web/src/admin/transforms.ts
index 99123a1..b50e5f1 100644
--- a/apps/web/src/admin/transforms.ts
+++ b/apps/web/src/admin/transforms.ts
@@ -11,6 +11,7 @@ export function toAdminProblemRow(result: AdminProblemListItem): AdminProblemRow
     visible: result.visible,
     difficulty: result.difficulty,
     tags: result.tags,
+    isSql: result.isSql,
     hasAstRules: result.hasAstRules,
     allowFlowchart: result.allowFlowchart,
     showFlowchart: result.showFlowchart,
diff --git a/apps/web/src/routes.ts b/apps/web/src/routes.ts
index a5fb8bc..d87987c 100644
--- a/apps/web/src/routes.ts
+++ b/apps/web/src/routes.ts
@@ -194,13 +194,13 @@ export const admins: RouteRecordRaw = {
     {
       path: "problem/create",
       name: "admin problem create",
-      component: () => import("admin/problem/detail.vue"),
+      component: () => import("admin/problem/editor.vue"),
       meta: { requiresProblemPermission: true },
     },
     {
       path: "problem/edit/:problemID",
       name: "admin problem edit",
-      component: () => import("admin/problem/detail.vue"),
+      component: () => import("admin/problem/editor.vue"),
       props: true,
       meta: { requiresProblemPermission: true },
     },
@@ -233,14 +233,14 @@ export const admins: RouteRecordRaw = {
     {
       path: "contest/:contestID/problem/create",
       name: "admin contest problem create",
-      component: () => import("admin/problem/detail.vue"),
+      component: () => import("admin/problem/editor.vue"),
       props: true,
       meta: { requiresTeacherAdmin: true },
     },
     {
       path: "contest/:contestID/problem/edit/:problemID",
       name: "admin contest problem edit",
-      component: () => import("admin/problem/detail.vue"),
+      component: () => import("admin/problem/editor.vue"),
       props: true,
       meta: { requiresTeacherAdmin: true },
     },
diff --git a/apps/web/src/utils/constants.ts b/apps/web/src/utils/constants.ts
index 5ae8314..385f43c 100644
--- a/apps/web/src/utils/constants.ts
+++ b/apps/web/src/utils/constants.ts
@@ -152,6 +152,7 @@ export const STORAGE_KEY = {
   LANGUAGE: "problemLanguage",
   LEARN_CURRENT_STEP: "learnStep",
   ADMIN_PROBLEM: "adminProblem",
+  ADMIN_SQL_PROBLEM: "adminSqlProblem",
   ADMIN_PROBLEM_TAGS: "adminProblemTags",
   ADMIN_SIDER_COLLAPSED: "adminSiderCollapsed",
   DEMO_MODE: "demoMode",
diff --git a/apps/web/src/utils/types.ts b/apps/web/src/utils/types.ts
index 444ec1a..09e0667 100644
--- a/apps/web/src/utils/types.ts
+++ b/apps/web/src/utils/types.ts
@@ -181,6 +181,7 @@ export interface AdminProblemRow {
   createTime: string
   difficulty: ProblemDifficulty
   tags: string[]
+  isSql: boolean
   hasAstRules: boolean
   allowFlowchart: boolean
   showFlowchart: boolean
diff --git a/packages/contract/src/admin.ts b/packages/contract/src/admin.ts
index 94c2324..4a6bc89 100644
--- a/packages/contract/src/admin.ts
+++ b/packages/contract/src/admin.ts
@@ -633,6 +633,8 @@ export const adminProblemListItemSchema = z.object({
   createTime: z.string(),
   difficulty: problemDifficultySchema,
   tags: z.array(z.string()),
+  /** SQL 题：列表里标题后面挂标签；编辑时进 SQL 出题页 */
+  isSql: z.boolean(),
   hasAstRules: z.boolean(),
   allowFlowchart: z.boolean(),
   showFlowchart: z.boolean(),