fix: sqlTableName 字体 fallback

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
feat: 管理端 SQL 题隐藏输入输出描述与样例表单
2026-07-03 06:26:00 -06:00 · 2026-07-03 01:31:08 -06:00 · 2026-07-03 01:26:16 -06:00
4 changed files with 278 additions and 124 deletions
--- a/src/admin/problem/detail.vue
+++ b/src/admin/problem/detail.vue
@@ -344,19 +344,20 @@ async function validateProblem() {
  // 题目
  else if (
    !problem.value.description ||
-    !problem.value.input_description ||
-    !problem.value.output_description
+    (!isSQLProblem.value &&
+      (!problem.value.input_description || !problem.value.output_description))
  ) {
    message.error("题目或输入或输出没有填写")
    hasErrors = true
  }
  // 样例
-  else if (problem.value.samples.length == 0) {
+  else if (!isSQLProblem.value && problem.value.samples.length == 0) {
    message.error("样例没有填写")
    hasErrors = true
  }
  // 样例是空的
  else if (
+    !isSQLProblem.value &&
    problem.value.samples.some(
      (sample) => sample.output === "" || sample.input === "",
    )
@@ -432,12 +433,18 @@ function filterAnswers() {
  )
 }

+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,
@@ -592,45 +599,47 @@ watch(
    :min-height="300"
  />
  <TextEditor
-    v-if="ready"
+    v-if="ready && !isSQLProblem"
    v-model:value="problem.input_description"
    title="输入的描述"
  />
  <TextEditor
-    v-if="ready"
+    v-if="ready && !isSQLProblem"
    v-model:value="problem.output_description"
    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>
+  <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.hint" title="提示（选填）" />
  <n-form>
    <n-form-item label="题目的来源（选填）">
--- a/src/oj/problem/components/ProblemContent.vue
+++ b/src/oj/problem/components/ProblemContent.vue
@@ -12,6 +12,7 @@ import { useDark } from "@vueuse/core"
 import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
 import { getSimilarProblems } from "oj/api"
+import SQLDataTable from "./SQLDataTable.vue"

 type Sample = Problem["samples"][number] & {
  id: number
@@ -30,6 +31,18 @@ const { problem } = storeToRefs(problemStore)

 const problemSetId = computed(() => route.params.problemSetId)

+// SQL 题：隐藏输入/输出/例子，改为渲染数据表与期望结果
+const isSQL = computed(() => !!problem.value?.sql_config)
+const sqlDisplay = computed(() => problem.value?.sql_display ?? null)
+const sqlExpectedQuery = computed(() => {
+  const exp = sqlDisplay.value?.expected
+  return exp && "columns" in exp ? exp : null
+})
+const sqlChangedTables = computed(() => {
+  const exp = sqlDisplay.value?.expected
+  return exp && "changed_tables" in exp ? exp.changed_tables : []
+})
+
 const router = useRouter()

 // 相似题目推荐
@@ -269,29 +282,79 @@ function type(status: ProblemStatus) {
      :theme="isDark ? 'dark' : 'light'"
    />

-    <p class="title" :style="style">
-      <n-flex align="center">
-        <Icon icon="streamline-ultimate-color:envelope-back-front"></Icon>
-        输入
-      </n-flex>
-    </p>
-    <MdPreview
-      preview-theme="vuepress"
-      :model-value="problem.input_description"
-      :theme="isDark ? 'dark' : 'light'"
-    />
+    <template v-if="!isSQL">
+      <p class="title" :style="style">
+        <n-flex align="center">
+          <Icon icon="streamline-ultimate-color:envelope-back-front"></Icon>
+          输入
+        </n-flex>
+      </p>
+      <MdPreview
+        preview-theme="vuepress"
+        :model-value="problem.input_description"
+        :theme="isDark ? 'dark' : 'light'"
+      />

-    <p class="title" :style="style">
-      <n-flex align="center">
-        <Icon icon="streamline-ultimate-color:mailbox-post"></Icon>
-        输出
-      </n-flex>
-    </p>
-    <MdPreview
-      preview-theme="vuepress"
-      :model-value="problem.output_description"
-      :theme="isDark ? 'dark' : 'light'"
-    />
+      <p class="title" :style="style">
+        <n-flex align="center">
+          <Icon icon="streamline-ultimate-color:mailbox-post"></Icon>
+          输出
+        </n-flex>
+      </p>
+      <MdPreview
+        preview-theme="vuepress"
+        :model-value="problem.output_description"
+        :theme="isDark ? 'dark' : 'light'"
+      />
+    </template>
+
+    <template v-if="isSQL && sqlDisplay">
+      <p class="title" :style="style">
+        <n-flex align="center">
+          <Icon icon="devicon:sqlite"></Icon>
+          数据表
+        </n-flex>
+      </p>
+      <div v-for="t in sqlDisplay.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="title" :style="style">
+        <n-flex align="center">
+          <Icon icon="streamline-ultimate-color:check-button"></Icon>
+          期望结果
+        </n-flex>
+      </p>
+      <template v-if="sqlExpectedQuery">
+        <SQLDataTable
+          :columns="sqlExpectedQuery.columns.map((name) => ({ name }))"
+          :rows="sqlExpectedQuery.rows"
+          :total-rows="sqlExpectedQuery.total_rows"
+          :truncated="sqlExpectedQuery.truncated"
+        />
+        <p v-if="!problem.sql_config?.order_sensitive" class="sqlNote">
+          结果顺序不限
+        </p>
+      </template>
+      <div v-for="t in sqlChangedTables" :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>
+    </template>

    <div v-if="problem.hint">
      <p class="title" :style="style">
@@ -334,50 +397,52 @@ function type(status: ProblemStatus) {
      </div>
    </div>

-    <div v-for="(sample, index) of samples" :key="index">
-      <n-flex align="center">
-        <p class="title" :style="style">
-          <n-flex align="center">
-            <Icon icon="streamline-emojis:microscope"></Icon>
-            例子 {{ index + 1 }}
-          </n-flex>
-        </p>
-        <n-button
-          size="small"
-          :type="type(sample.status)"
-          @click="test(sample, index)"
+    <template v-if="!isSQL">
+      <div v-for="(sample, index) of samples" :key="index">
+        <n-flex align="center">
+          <p class="title" :style="style">
+            <n-flex align="center">
+              <Icon icon="streamline-emojis:microscope"></Icon>
+              例子 {{ index + 1 }}
+            </n-flex>
+          </p>
+          <n-button
+            size="small"
+            :type="type(sample.status)"
+            @click="test(sample, index)"
+          >
+            {{ label(sample.status, sample.loading) }}
+          </n-button>
+        </n-flex>
+        <n-descriptions
+          bordered
+          :column="2"
+          label-style="width: 50%; min-width: 100px"
        >
-          {{ label(sample.status, sample.loading) }}
-        </n-button>
-      </n-flex>
-      <n-descriptions
-        bordered
-        :column="2"
-        label-style="width: 50%; min-width: 100px"
-      >
-        <n-descriptions-item>
-          <template #label>
-            <n-flex>
-              <span>输入</span>
-              <Copy :value="sample.input" />
-            </n-flex>
-          </template>
-          <div class="testcase">{{ sample.input }}</div>
-        </n-descriptions-item>
-        <n-descriptions-item>
-          <template #label>
-            <n-flex>
-              <span>输出</span>
-              <Copy :value="sample.output" />
-            </n-flex>
-          </template>
-          <div class="testcase">{{ sample.output }}</div>
-        </n-descriptions-item>
-        <n-descriptions-item label="运行结果" v-if="sample.msg">
-          <div class="testcase">{{ sample.msg }}</div>
-        </n-descriptions-item>
-      </n-descriptions>
-    </div>
+          <n-descriptions-item>
+            <template #label>
+              <n-flex>
+                <span>输入</span>
+                <Copy :value="sample.input" />
+              </n-flex>
+            </template>
+            <div class="testcase">{{ sample.input }}</div>
+          </n-descriptions-item>
+          <n-descriptions-item>
+            <template #label>
+              <n-flex>
+                <span>输出</span>
+                <Copy :value="sample.output" />
+              </n-flex>
+            </template>
+            <div class="testcase">{{ sample.output }}</div>
+          </n-descriptions-item>
+          <n-descriptions-item label="运行结果" v-if="sample.msg">
+            <div class="testcase">{{ sample.msg }}</div>
+          </n-descriptions-item>
+        </n-descriptions>
+      </div>
+    </template>

    <div v-if="problem.source">
      <p class="title" :style="style">
@@ -470,4 +535,16 @@ function type(status: ProblemStatus) {
  font-size: 13px;
  opacity: 0.65;
 }
+
+.sqlTableName {
+  font-weight: 600;
+  margin: 8px 0 4px;
+  font-family: Monaco, Consolas, monospace;
+}
+
+.sqlNote {
+  font-size: 13px;
+  opacity: 0.65;
+  margin: 0 0 8px;
+}
 </style>
--- a/src/oj/problem/components/SQLDataTable.vue
+++ b/src/oj/problem/components/SQLDataTable.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { SQLDisplayColumn } from "utils/types"
+
+defineProps<{
+  columns: SQLDisplayColumn[]
+  rows: (string | number | null)[][]
+  totalRows?: number
+  truncated?: boolean
+}>()
+</script>
+
+<template>
+  <n-table class="sqlTable" size="small" :single-line="false">
+    <thead>
+      <tr>
+        <th v-for="(col, i) in columns" :key="i">
+          {{ col.name }}
+          <span v-if="col.type" class="colType">{{ col.type }}</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-if="rows.length === 0">
+        <td :colspan="columns.length" class="nullCell">（空表）</td>
+      </tr>
+      <tr v-for="(row, i) in rows" :key="i">
+        <td v-for="(v, j) in row" :key="j" :class="{ nullCell: v === null }">
+          {{ v === null ? "NULL" : v }}
+        </td>
+      </tr>
+    </tbody>
+  </n-table>
+  <p v-if="truncated" class="truncNote">
+    共 {{ totalRows }} 行，仅展示前 {{ rows.length }} 行
+  </p>
+</template>
+
+<style scoped>
+.sqlTable {
+  margin-bottom: 8px;
+}
+
+.colType {
+  font-size: 12px;
+  opacity: 0.55;
+  margin-left: 4px;
+  font-weight: normal;
+}
+
+.nullCell {
+  opacity: 0.45;
+  font-style: italic;
+}
+
+.truncNote {
+  font-size: 13px;
+  opacity: 0.65;
+  margin: 0 0 8px;
+}
+</style>
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -34,10 +34,7 @@ export interface Profile {
 }

 export type UserAdminType =
-  | "Regular User"
-  | "Student Admin"
-  | "Teacher Admin"
-  | "Super Admin"
+  "Regular User" | "Student Admin" | "Teacher Admin" | "Super Admin"

 export interface User {
  id: number
@@ -72,23 +69,37 @@ export interface SQLConfig {
  order_sensitive: boolean
 }

+export interface SQLDisplayColumn {
+  name: string
+  type?: string
+}
+
+export interface SQLDisplayTable {
+  name: string
+  columns: SQLDisplayColumn[]
+  rows: (string | number | null)[][]
+  total_rows: number
+  truncated: boolean
+  dropped?: boolean
+}
+
+export interface SQLDisplay {
+  tables: SQLDisplayTable[]
+  expected:
+    | {
+        columns: string[]
+        rows: (string | number | null)[][]
+        total_rows: number
+        truncated: boolean
+      }
+    | { changed_tables: SQLDisplayTable[] }
+}
+
 export type LANGUAGE_SHOW_LABEL =
  (typeof LANGUAGE_SHOW_VALUE)[keyof typeof LANGUAGE_SHOW_VALUE]

 export type SUBMISSION_RESULT =
-  | -2
-  | -1
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
+  -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

 export type ProblemStatus = "passed" | "failed" | "not_test"

@@ -173,6 +184,9 @@ export interface Problem {

  // SQL 题配置（非 SQL 题为 null）
  sql_config?: SQLConfig | null
+
+  // SQL 题展示数据（后端保存题目时自动生成）
+  sql_display?: SQLDisplay | null
 }

 export type AdminProblem = Problem & AlterProblem
@@ -664,13 +678,7 @@ export interface ExerciseGroupData {
 }

 export type ExerciseType =
-  | "mcq"
-  | "sort"
-  | "fill"
-  | "match"
-  | "predict"
-  | "debug"
-  | "group"
+  "mcq" | "sort" | "fill" | "match" | "predict" | "debug" | "group"

 export interface Exercise {
  id: number
Author	SHA1	Message	Date
yuetsh	ad28c0ba21	fix: sqlTableName 字体 fallback Some checks failed Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled Details Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-07-03 06:26:00 -06:00
yuetsh	0b627b5157	feat: 管理端 SQL 题隐藏输入输出描述与样例表单 - 隐藏 SQL 题的输入/输出描述编辑器 - 隐藏 SQL 题的样例编辑区域 - 跳过 SQL 题的输入输出和样例验证 - SQL 题提交时清空样例数组 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-07-03 01:31:08 -06:00
yuetsh	aa212427ba	feat: SQL 题展示数据表与期望结果 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-07-03 01:26:16 -06:00