From e984f698b2d8f44394b1a07dc04b5472e16eceb9 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 9 May 2026 17:54:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E4=B8=8E=20SQL=20=E6=96=87=E4=BB=B6=E5=BC=B9=E7=AA=97=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid/DataGrid.vue              | 16 +++++++-------
 .../sql-file/SqlFileExecutionDialog.vue       | 22 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/grid/DataGrid.vue b/src/components/grid/DataGrid.vue
index 8dc46e0c3d..9c0ff466cd 100644
--- a/src/components/grid/DataGrid.vue
+++ b/src/components/grid/DataGrid.vue
@@ -1834,8 +1834,8 @@ defineExpose({
                   autocapitalize="off"
                   autocorrect="off"
                   spellcheck="false"
-                  class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
-                  placeholder="id > 100"
+                  class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground/60"
+                  placeholder="condition..."
                   @keydown="onWhereFilterKeydown"
                   @click="updateWhereSuggestionPosition"
                   @blur="dismissWhereSuggestions"
@@ -1885,8 +1885,8 @@ defineExpose({
                   autocapitalize="off"
                   autocorrect="off"
                   spellcheck="false"
-                  class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
-                  placeholder="column desc"
+                  class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground/60"
+                  placeholder="columns..."
                   @keydown="onOrderByKeydown"
                   @click="updateOrderBySuggestionPosition"
                   @blur="dismissOrderBySuggestions"
@@ -1949,7 +1949,7 @@ defineExpose({
               <SelectTrigger class="h-6 w-28 px-2 text-xs">
                 <SelectValue :placeholder="t('grid.filterRows')" />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent position="popper">
                 <SelectItem value="all">{{ t("grid.filterAllRows") }}</SelectItem>
                 <SelectItem value="changed">{{ t("grid.filterChangedRows") }}</SelectItem>
                 <SelectItem value="edited">{{ t("grid.statusEdited") }}</SelectItem>
@@ -1994,8 +1994,8 @@ defineExpose({
           <div class="flex-1 flex min-h-0 overflow-hidden">
             <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
               <!-- Sticky header -->
-              <div ref="headerRef" class="shrink-0 bg-muted z-10 border-b border-border overflow-hidden">
-                <div class="flex text-xs font-medium" :style="{ width: 'var(--total-w)' }">
+              <div ref="headerRef" class="shrink-0 bg-muted/60 z-10 border-y border-border overflow-hidden">
+                <div class="flex text-xs font-semibold text-foreground" :style="{ width: 'var(--total-w)' }">
                   <div
                     class="shrink-0 px-2 py-1.5 border-r border-border text-center text-muted-foreground select-none"
                     :style="{ width: 'var(--row-num-w)' }"
@@ -2005,7 +2005,7 @@ defineExpose({
                   <Tooltip v-for="(col, colIdx) in result.columns" :key="`${col}-${colIdx}`">
                     <TooltipTrigger as-child>
                       <div
-                        class="shrink-0 px-3 py-1.5 border-r border-border whitespace-nowrap cursor-pointer hover:bg-accent/50 select-none relative overflow-hidden"
+                        class="shrink-0 px-3 py-1.5 border-r border-border whitespace-nowrap cursor-pointer hover:bg-accent/60 select-none relative overflow-hidden"
                         :style="{ width: `var(--col-w-${colIdx})` }"
                         @click="toggleSort(col, colIdx)"
                       >
diff --git a/src/components/sql-file/SqlFileExecutionDialog.vue b/src/components/sql-file/SqlFileExecutionDialog.vue
index 6d05e0a6bd..8ebc02cbca 100644
--- a/src/components/sql-file/SqlFileExecutionDialog.vue
+++ b/src/components/sql-file/SqlFileExecutionDialog.vue
@@ -336,7 +336,7 @@ watch(open, (value) => {
 
 <template>
   <Dialog :open="open" @update:open="handleOpenChange">
-    <DialogScrollContent class="sm:max-w-[620px]" :trap-focus="false" @interact-outside.prevent>
+    <DialogScrollContent class="sm:max-w-[620px] min-w-0 overflow-hidden" :trap-focus="false" @interact-outside.prevent>
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <FileCode class="w-4 h-4" />
@@ -344,8 +344,8 @@ watch(open, (value) => {
         </DialogTitle>
       </DialogHeader>
 
-      <div class="grid gap-4 py-3">
-        <div class="space-y-3">
+      <div class="grid min-w-0 gap-4 py-3">
+        <div class="min-w-0 space-y-3">
           <div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {{ t("sqlFile.file") }}
           </div>
@@ -370,7 +370,7 @@ watch(open, (value) => {
             </Button>
           </div>
 
-          <div v-if="preview" class="border rounded-md overflow-hidden">
+          <div v-if="preview" class="min-w-0 max-w-full border rounded-md overflow-hidden">
             <div class="flex items-center justify-between gap-3 px-3 py-2 text-xs border-b bg-muted/40">
               <div class="min-w-0 flex items-center gap-2">
                 <FileCode class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
@@ -378,13 +378,13 @@ watch(open, (value) => {
               </div>
               <span class="text-muted-foreground shrink-0">{{ formatBytes(preview.sizeBytes) }}</span>
             </div>
-            <pre class="max-h-40 overflow-auto p-3 text-xs font-mono whitespace-pre-wrap bg-muted/15">{{
+            <pre class="max-h-40 max-w-full overflow-auto p-3 text-xs font-mono whitespace-pre bg-muted/15">{{
               preview.preview
             }}</pre>
           </div>
         </div>
 
-        <div class="space-y-3">
+        <div class="min-w-0 space-y-3">
           <div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {{ t("sqlFile.target") }}
           </div>
@@ -437,7 +437,7 @@ watch(open, (value) => {
           </div>
         </div>
 
-        <div class="space-y-2.5">
+        <div class="min-w-0 space-y-2.5">
           <div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {{ t("sqlFile.options") }}
           </div>
@@ -454,7 +454,7 @@ watch(open, (value) => {
           </button>
         </div>
 
-        <div v-if="running || terminalStatus !== 'idle' || progress" class="space-y-3">
+        <div v-if="running || terminalStatus !== 'idle' || progress" class="min-w-0 space-y-3">
           <div class="flex items-center justify-between gap-3 text-xs">
             <div class="flex items-center gap-1.5 min-w-0" :class="statusTone">
               <component :is="statusIcon" class="w-3.5 h-3.5 shrink-0" :class="{ 'animate-spin': running }" />
@@ -508,14 +508,16 @@ watch(open, (value) => {
 
           <div v-if="progress?.statementSummary" class="space-y-1">
             <Label class="text-xs">{{ t("sqlFile.currentStatement") }}</Label>
-            <div class="border rounded-md p-2 text-xs font-mono bg-muted/15 max-h-20 overflow-auto whitespace-pre-wrap">
+            <div
+              class="max-h-20 max-w-full overflow-auto rounded-md border bg-muted/15 p-2 text-xs font-mono whitespace-pre"
+            >
               {{ progress.statementSummary }}
             </div>
           </div>
 
           <div
             v-if="progress?.error || terminalError"
-            class="border rounded-md p-2 text-xs text-destructive bg-destructive/5"
+            class="max-w-full overflow-auto rounded-md border bg-destructive/5 p-2 text-xs text-destructive whitespace-pre-wrap"
           >
             {{ progress?.error || terminalError }}
           </div>