yuetsh
34ae9b032c
用浏览器把前后台走了一遍（这是第一次真的在界面上验证，之前全是脚本打 API）。
唯一找到的真问题在 SQLTestcaseEditor：
onMounted(async () => {
try { ... } catch {} // ← 静默吞掉
})
已有脚本读取失败时被 catch{} 吞掉，编辑器保持初始的 3 个空白项 ——
和「这题本来就没测试点」长得一模一样，教师完全看不出发生了什么。
改成：新题和旧格式测试点（404 problem-not-found / 409 not-sql-test-case）仍然
静默留空，那本来就是对的；其它失败挂一条 alert，并且把可操作的部分说全 ——
后端那句"测试点信息读取失败"只讲了现象，教师需要知道的是「下面是空模板、
直接存不会生效」。
保存本身是安全的，已实测：拿一道真实 SQL 题，在编辑器空白的状态下点提交，
test_case_id、测试点数（3）、sql_config 全部未变 —— 后端读不到测试点信息会
拒绝整个保存（400），不会把测试点清空。所以这条只是提示缺失，不是数据风险。
## 走查过程中的一次自我更正
中途我一度报告"保存返回 400 而界面没有任何错误提示"，那是错的：提示是正常
显示的，我第一次等了 4 秒才检查，而 Naive UI 的提示 3 秒就自动消失了。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
369 lines
11 KiB
Vue
369 lines
11 KiB
Vue
<script setup lang="ts">
|
||
import type { LANGUAGE, SQLDisplay, Testcase } from "utils/types"
|
||
import { createZipBlob } from "utils/functions"
|
||
import SQLDataTable from "oj/problem/components/SQLDataTable.vue"
|
||
import {
|
||
generateSQLTestcase,
|
||
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(), blankEntry()])
|
||
|
||
const refSQL = computed(
|
||
() =>
|
||
props.answers.find((a) => a.language === "SQL" && a.code.trim())?.code ??
|
||
"",
|
||
)
|
||
|
||
/** 已有脚本读取失败时的提示。空白编辑器和「本来就没测试点」长得一样，必须区分开 */
|
||
const loadError = ref("")
|
||
const isPreviewing = ref(false)
|
||
const isUploading = ref(false)
|
||
const isGenerating = ref(false)
|
||
|
||
const hasAnyScript = computed(() => scripts.value.some((s) => s.sql.trim()))
|
||
const hasBlankScript = computed(() => scripts.value.some((s) => !s.sql.trim()))
|
||
|
||
const filledCount = computed(
|
||
() => scripts.value.filter((s) => s.sql.trim()).length,
|
||
)
|
||
|
||
const canUpload = computed(() => {
|
||
const filled = scripts.value.filter((s) => s.sql.trim())
|
||
return (
|
||
!isPreviewing.value &&
|
||
// 至少 2 个数据不同的测试点，防止学生对照题目页的期望结果硬编码
|
||
filled.length >= 2 &&
|
||
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 (err: any) {
|
||
// 新题、以及旧格式（非 SQL）测试点，后端回 404/409，保持空白就是对的，不该报错。
|
||
// 但**其它**失败必须说出来：读不出来时编辑器长得和「这题本来就没测试点」一模一样，
|
||
// 教师看不出区别，会以为要自己重新填。保存本身是安全的（后端读不到测试点信息会拒绝
|
||
// 整个保存），所以这里只提示、不阻塞。
|
||
const code = err?.error
|
||
if (code && code !== "problem-not-found" && code !== "not-sql-test-case") {
|
||
// 后端那句话（如"测试点信息读取失败"）只说了现象，教师需要的是「下面是空的、别存」
|
||
const detail = err?.data ? `（${err.data}）` : ""
|
||
loadError.value =
|
||
`已有测试点脚本没能读出来${detail}。下方是空白模板，不是本题真实的测试点 —— ` +
|
||
`直接保存不会丢数据（后端会拒绝），但也不会生效。请先排查测试点文件，或重新上传。`
|
||
}
|
||
}
|
||
})
|
||
|
||
function add() {
|
||
scripts.value.push(blankEntry())
|
||
}
|
||
|
||
function remove(index: number) {
|
||
scripts.value.splice(index, 1)
|
||
}
|
||
|
||
function reset() {
|
||
scripts.value = [blankEntry(), 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 generate() {
|
||
const blanks = scripts.value.filter((s) => !s.sql.trim())
|
||
if (!blanks.length) return
|
||
isGenerating.value = true
|
||
await Promise.all(
|
||
blanks.map(async (s) => {
|
||
try {
|
||
const res = await generateSQLTestcase({
|
||
ref_sql: refSQL.value,
|
||
mode: props.mode,
|
||
})
|
||
s.sql = res.data.sql
|
||
} catch (err) {
|
||
const data = (err as { data?: unknown })?.data
|
||
message.error(typeof data === "string" ? data : "AI 生成失败")
|
||
}
|
||
}),
|
||
)
|
||
isGenerating.value = false
|
||
await preview()
|
||
}
|
||
|
||
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 data = scripts.value
|
||
.filter((s) => s.sql.trim())
|
||
.map((s, i) => ({
|
||
name: `${i + 1}.sql`,
|
||
content: s.sql,
|
||
}))
|
||
const blob = createZipBlob(data)
|
||
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-alert
|
||
v-if="loadError"
|
||
type="error"
|
||
:show-icon="false"
|
||
style="margin-bottom: 8px"
|
||
>
|
||
{{ loadError }}
|
||
</n-alert>
|
||
<n-flex align="center" wrap>
|
||
<n-button :disabled="isPreviewing || isGenerating" @click="reset">
|
||
清空
|
||
</n-button>
|
||
<n-button :disabled="isPreviewing || isGenerating" @click="add">
|
||
+1
|
||
</n-button>
|
||
<n-tooltip :disabled="!!refSQL && hasBlankScript">
|
||
<template #trigger>
|
||
<span>
|
||
<n-button
|
||
:loading="isGenerating"
|
||
:disabled="!refSQL || !hasBlankScript || isPreviewing"
|
||
@click="generate"
|
||
>
|
||
AI 生成
|
||
</n-button>
|
||
</span>
|
||
</template>
|
||
{{ !refSQL ? "请先填写 SQL 标准答案" : "所有脚本都写好了，无需生成" }}
|
||
</n-tooltip>
|
||
<n-tooltip :disabled="!!refSQL && hasAnyScript">
|
||
<template #trigger>
|
||
<span>
|
||
<n-button
|
||
type="success"
|
||
:loading="isPreviewing"
|
||
:disabled="!refSQL || !hasAnyScript || isGenerating"
|
||
@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 || isGenerating"
|
||
@click="upload"
|
||
>
|
||
上传
|
||
</n-button>
|
||
</span>
|
||
</template>
|
||
{{
|
||
filledCount < 2
|
||
? "SQL 题至少需要 2 个数据不同的测试点，防止硬编码期望结果"
|
||
: "所有脚本预览验证通过后才能上传"
|
||
}}
|
||
</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 || isGenerating"
|
||
@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"
|
||
: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>
|