feat(SQL 题): 增删改题的期望结果标出执行后变了的格子，删掉的行写清是哪几行

学生原来只能拿两张表逐格对，看不出要改的是哪几行。现在改过的格子、新插的行标黄，
删掉的行在表下面写「删掉了 2 行（id 是 2、3）」。按第一列配对，对不上就不标。
数据表和期望结果抽成一个组件，后台出题页的预览也用它。
题型判断统一走契约的 isSqlProblem()。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/problem/components/SQLDataTable.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import type { SqlDisplayColumn } from "utils/types"
+import type { TableChanges } from "../utils/sqlChanges"
 
-defineProps<{
+const props = defineProps<{
   columns: SqlDisplayColumn[]
   rows: (string | number | null)[][]
   totalRows?: number
   truncated?: boolean
+  /** 增删改题执行后的表：变了的格子、新插的行标出来 */
+  changes?: TableChanges | null
 }>()
+
+const changed = (i: number, j: number) =>
+  !!props.changes && (props.changes.newRows.has(i) || props.changes.cells.has(`${i}:${j}`))
 </script>
 
 <template>
@@ -29,7 +35,11 @@ defineProps<{
           <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 }">
+          <td
+            v-for="(v, j) in row"
+            :key="j"
+            :class="{ nullCell: v === null, changed: changed(i, j) }"
+          >
             {{ v === null ? "NULL" : v }}
           </td>
         </tr>
@@ -63,6 +73,18 @@ defineProps<{
   font-weight: normal;
 }
 
+/* 和图例同一个黄：浅底深字，暗色下压暗底、提亮字 */
+.sqlTable :deep(td.changed) {
+  background-color: #fff4d6;
+  color: #7a4b00;
+  font-weight: 600;
+}
+
+html.dark .sqlTable :deep(td.changed) {
+  background-color: rgba(240, 180, 40, 0.18);
+  color: #f5d38a;
+}
+
 .nullCell {
   opacity: 0.45;
   font-style: italic;