From 740f956fe3495e9d92c91600327adb43ec04fedc Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 4 Jul 2026 03:50:43 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20SQL=20=E6=B5=8B=E8=AF=95=E7=82=B9?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8E=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/admin/api.ts                              |  18 ++
 .../problem/components/SQLTestcaseEditor.vue  | 297 ++++++++++++++++++
 2 files changed, 315 insertions(+)
 create mode 100644 src/admin/problem/components/SQLTestcaseEditor.vue

diff --git a/src/admin/api.ts b/src/admin/api.ts
index e88a099..0ff61c0 100644
--- a/src/admin/api.ts
+++ b/src/admin/api.ts
@@ -10,6 +10,7 @@ import type {
   Exercise,
   ExerciseType,
   Server,
+  SQLDisplay,
   TestcaseUploadedReturns,
   Tutorial,
   User,
@@ -145,6 +146,23 @@ export function uploadTestcases(file: File, options: { sql?: boolean } = {}) {
   })
 }
 
+// SQL 题测试点预览：后端跑一遍初始化脚本+标准答案，返回数据表和期望结果展示数据
+export function previewSQLTestcase(data: {
+  init_sql: string
+  ref_sql: string
+  mode: "query" | "modify"
+}) {
+  return http.post<SQLDisplay>("admin/sql_test_case_preview", data)
+}
+
+// 回显已上传的 SQL 测试点脚本内容（按 1.sql, 2.sql... 排序）
+export function getSQLTestcaseScripts(problemId: number) {
+  return http.get<{ name: string; content: string }[]>(
+    "admin/sql_test_case_scripts",
+    { params: { problem_id: problemId } },
+  )
+}
+
 export function createProblem(problem: BlankProblem) {
   return http.post("admin/problem", problem)
 }
diff --git a/src/admin/problem/components/SQLTestcaseEditor.vue b/src/admin/problem/components/SQLTestcaseEditor.vue
new file mode 100644
index 0000000..68c7996
--- /dev/null
+++ b/src/admin/problem/components/SQLTestcaseEditor.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { downloadZip } from "client-zip"
+import type { LANGUAGE, SQLDisplay, Testcase } from "utils/types"
+import SQLDataTable from "oj/problem/components/SQLDataTable.vue"
+import {
+  getSQLTestcaseScripts,
+  previewSQLTestcase,
+  uploadTestcases,
+} from "../../api"
+
+interface ScriptEntry {
+  id: number
+  sql: string
+  display: SQLDisplay | null
+  error: string
+  // 标准答案或题型改过之后，旧预览结果作废，需重新预览才能上传
+  stale: boolean
+}
+
+interface Props {
+  answers: { language: LANGUAGE; code: string }[]
+  mode: "query" | "modify"
+  problemId?: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  uploaded: [testCaseId: string, testCaseScore: Testcase[]]
+}>()
+
+const message = useMessage()
+
+let nextId = 0
+function blankEntry(): ScriptEntry {
+  return { id: nextId++, sql: "", display: null, error: "", stale: false }
+}
+
+const scripts = ref<ScriptEntry[]>([blankEntry(), blankEntry()])
+
+const refSQL = computed(
+  () =>
+    props.answers.find((a) => a.language === "SQL" && a.code.trim())?.code ??
+    "",
+)
+
+const isPreviewing = ref(false)
+const isUploading = ref(false)
+
+const hasAnyScript = computed(() => scripts.value.some((s) => s.sql.trim()))
+
+const canUpload = computed(() => {
+  const filled = scripts.value.filter((s) => s.sql.trim())
+  return (
+    !isPreviewing.value &&
+    filled.length > 0 &&
+    filled.every((s) => s.display && !s.error && !s.stale)
+  )
+})
+
+watch([refSQL, () => props.mode], () => {
+  for (const s of scripts.value) {
+    if (s.display || s.error) s.stale = true
+  }
+})
+
+// 编辑已有 SQL 题时回显已上传的脚本；新题或旧格式测试点则保持空白
+onMounted(async () => {
+  if (!props.problemId) return
+  try {
+    const res = await getSQLTestcaseScripts(props.problemId)
+    if (res.data.length) {
+      scripts.value = res.data.map((f) => ({ ...blankEntry(), sql: f.content }))
+    }
+  } catch {}
+})
+
+function add() {
+  scripts.value.push(blankEntry())
+}
+
+function remove(index: number) {
+  scripts.value.splice(index, 1)
+}
+
+function reset() {
+  scripts.value = [blankEntry(), blankEntry()]
+}
+
+function expectedQuery(d: SQLDisplay) {
+  return "columns" in d.expected ? d.expected : null
+}
+
+function changedTables(d: SQLDisplay) {
+  return "changed_tables" in d.expected ? d.expected.changed_tables : []
+}
+
+async function preview() {
+  // 丢弃空脚本
+  scripts.value = scripts.value.filter((s) => s.sql.trim())
+  if (!scripts.value.length) {
+    scripts.value = [blankEntry()]
+    return
+  }
+  isPreviewing.value = true
+  await Promise.all(
+    scripts.value.map(async (s) => {
+      s.display = null
+      s.error = ""
+      s.stale = false
+      try {
+        const res = await previewSQLTestcase({
+          init_sql: s.sql,
+          ref_sql: refSQL.value,
+          mode: props.mode,
+        })
+        s.display = res.data
+      } catch (err) {
+        const data = (err as { data?: unknown })?.data
+        s.error = typeof data === "string" ? data : "预览失败"
+      }
+    }),
+  )
+  isPreviewing.value = false
+}
+
+async function upload() {
+  isUploading.value = true
+  try {
+    const now = new Date()
+    const data = scripts.value
+      .filter((s) => s.sql.trim())
+      .map((s, i) => ({
+        name: `${i + 1}.sql`,
+        input: s.sql,
+        lastModified: now,
+      }))
+    const blob = await downloadZip(data).blob()
+    const file = new File([blob], "testcase.zip", { type: "application/zip" })
+
+    const res = await uploadTestcases(file, { sql: true })
+    const testcases: Testcase[] = res.data.info
+    const baseScore = Math.floor(100 / testcases.length)
+    const remainder = 100 - baseScore * testcases.length
+    testcases.forEach((tc, i) => {
+      tc.score = String(
+        i === testcases.length - 1 ? baseScore + remainder : baseScore,
+      )
+    })
+
+    emit("uploaded", res.data.id, testcases)
+    message.success("上传成功")
+  } catch {
+    message.error("上传失败")
+  } finally {
+    isUploading.value = false
+  }
+}
+</script>
+
+<template>
+  <n-flex vertical>
+    <n-alert
+      v-if="!refSQL"
+      type="warning"
+      :show-icon="false"
+      style="margin-bottom: 8px"
+    >
+      还没有填写 SQL 标准答案，请先在上方"本题参考答案"中填写，再来编写测试点
+    </n-alert>
+    <n-flex align="center" wrap>
+      <n-button :disabled="isPreviewing" @click="reset">清空</n-button>
+      <n-button :disabled="isPreviewing" @click="add">+1</n-button>
+      <n-tooltip :disabled="!!refSQL && hasAnyScript">
+        <template #trigger>
+          <span>
+            <n-button
+              type="success"
+              :loading="isPreviewing"
+              :disabled="!refSQL || !hasAnyScript"
+              @click="preview"
+            >
+              预览验证
+            </n-button>
+          </span>
+        </template>
+        {{ !refSQL ? "请先填写 SQL 标准答案" : "请先填写数据脚本" }}
+      </n-tooltip>
+      <n-tooltip :disabled="canUpload || isPreviewing">
+        <template #trigger>
+          <span>
+            <n-button
+              type="primary"
+              :loading="isUploading"
+              :disabled="!canUpload"
+              @click="upload"
+            >
+              上传
+            </n-button>
+          </span>
+        </template>
+        所有脚本预览验证通过后才能上传
+      </n-tooltip>
+    </n-flex>
+
+    <div v-for="(s, index) in scripts" :key="s.id" class="scriptBox">
+      <n-flex justify="space-between" align="center">
+        <strong>{{ index + 1 }}.sql</strong>
+        <n-button
+          size="small"
+          :disabled="scripts.length === 1 || isPreviewing"
+          @click="remove(index)"
+        >
+          删除
+        </n-button>
+      </n-flex>
+      <n-input
+        type="textarea"
+        v-model:value="s.sql"
+        :rows="8"
+        placeholder="-- 本测试点的建表 + 插入数据脚本
+CREATE TABLE ...;
+INSERT INTO ...;"
+        :status="
+          s.error ? 'error' : s.display && !s.stale ? 'success' : undefined
+        "
+      />
+      <n-alert v-if="s.error" type="error" :show-icon="false">
+        {{ s.error }}
+      </n-alert>
+      <template v-if="s.display">
+        <n-alert v-if="s.stale" type="warning" :show-icon="false">
+          标准答案或题型已修改，以下预览已过期，请重新预览
+        </n-alert>
+        <div :class="{ stalePreview: s.stale }">
+          <p class="previewTitle">数据表</p>
+          <div v-for="t in s.display.tables" :key="t.name">
+            <p class="sqlTableName">{{ t.name }}</p>
+            <SQLDataTable
+              :columns="t.columns"
+              :rows="t.rows"
+              :total-rows="t.total_rows"
+              :truncated="t.truncated"
+            />
+          </div>
+          <p class="previewTitle">期望结果</p>
+          <SQLDataTable
+            v-if="expectedQuery(s.display)"
+            :columns="
+              expectedQuery(s.display)!.columns.map((name) => ({ name }))
+            "
+            :rows="expectedQuery(s.display)!.rows"
+            :total-rows="expectedQuery(s.display)!.total_rows"
+            :truncated="expectedQuery(s.display)!.truncated"
+          />
+          <div v-for="t in changedTables(s.display)" :key="t.name">
+            <p class="sqlTableName">
+              {{ t.dropped ? `${t.name} 表已被删除` : `执行后的 ${t.name} 表` }}
+            </p>
+            <SQLDataTable
+              v-if="!t.dropped"
+              :columns="t.columns"
+              :rows="t.rows"
+              :total-rows="t.total_rows"
+              :truncated="t.truncated"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+  </n-flex>
+</template>
+
+<style scoped>
+.scriptBox {
+  border: 1px solid var(--n-border-color, rgba(128, 128, 128, 0.2));
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.previewTitle {
+  font-weight: bold;
+  margin: 4px 0;
+}
+
+.sqlTableName {
+  font-weight: 500;
+  margin: 4px 0;
+  opacity: 0.85;
+}
+
+.stalePreview {
+  opacity: 0.45;
+}
+</style>