From cd960ca01cf96db67da31f04be18196030728a52 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 28 Sep 2026 19:03:13 +0800
Subject: [PATCH] =?UTF-8?q?fix(SQL=20=E9=A2=98):=20=E5=88=97=E5=A4=9A?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E8=A1=A8=E6=A8=AA=E5=90=91=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=8C=E4=B8=8D=E5=86=8D=E6=8A=8A=E6=AF=8F=E4=B8=80?=
 =?UTF-8?q?=E5=88=97=E6=8C=A4=E6=88=90=E4=B8=80=E4=B8=A4=E4=B8=AA=E5=AD=97?=
 =?UTF-8?q?=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来表格固定占满左栏宽度，列一多、或者左栏拖窄，列名和值都折成好几行，对不上哪个值是
哪一列的。现在按内容撑开、至少占满一行，放不下就在表格里横向滚

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../oj/problem/components/SQLDataTable.vue    | 60 ++++++++++++-------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/oj/problem/components/SQLDataTable.vue b/apps/web/src/oj/problem/components/SQLDataTable.vue
index 6647075..5fd45fe 100644
--- a/apps/web/src/oj/problem/components/SQLDataTable.vue
+++ b/apps/web/src/oj/problem/components/SQLDataTable.vue
@@ -10,34 +10,52 @@ defineProps<{
 </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>
+  <!--
+    列多的表横向滚动（设计文档第 8 节）。原来 n-table 固定占满宽度，列一多就把每一列
+    挤成一两个字宽，列名和值都折成好几行，对不上哪个值是哪一列的
+  -->
+  <div class="sqlScroll">
+    <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>
+  </div>
   <p v-if="truncated" class="truncNote">共 {{ totalRows }} 行，仅展示前 {{ rows.length }} 行</p>
 </template>
 
 <style scoped>
-.sqlTable {
+.sqlScroll {
+  overflow-x: auto;
   margin-bottom: 8px;
 }
 
+/* 按内容撑开、至少占满一行：列名和值都不折行，放不下就横向滚 */
+.sqlTable {
+  width: max-content;
+  min-width: 100%;
+}
+
+.sqlTable :deep(th),
+.sqlTable :deep(td) {
+  white-space: nowrap;
+}
+
 .colType {
   font-size: 12px;
   opacity: 0.55;